DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Fix issue where padding for box sizing is resolved against wrong reference length (#1715)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1715

X-link: https://github.com/facebook/react-native/pull/46799

Content box impl had a bug where we resolved padding % against the same reference length as the dimensions. Padding should always be against containing block's width. This is also true for width, but not for height, which should be against containing block's height.

This just pipes the width into our box sizing functions.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D63787577

fbshipit-source-id: e512338770f25b66506cabab5a7cde8f04397ea0
This commit is contained in:
Joe Vilches
2024-10-04 17:07:05 -07:00
committed by Facebook GitHub Bot
parent 990ec920ad
commit e69fcb26bb
12 changed files with 171 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
gentest/fixtures/YGBoxSizingTest.html
View File

@@ -46,16 +46,16 @@
style="width: 100px; height: 100px; padding: 5px; box-sizing: content-box">
</div>
<div id="box_sizing_content_box_padding_only_percent" style="width: 100px; height: 100px;">
<div style="width: 50%; height: 75; padding: 10%; box-sizing: content-box">
<div id="box_sizing_content_box_padding_only_percent" style="width: 100px; height: 150px;">
<div style="width: 50px; height: 75px; padding: 10%; box-sizing: content-box">
</div>
</div>
<div id="box_sizing_border_box_padding_only" style="width: 100px; height: 100px; padding: 5px; box-sizing: border-box">
</div>
<div id="box_sizing_border_box_padding_only_percent" style="width: 100px; height: 100px;">
<div style="width: 50%; height: 75; padding: 10%; box-sizing: border-box">
<div id="box_sizing_border_box_padding_only_percent" style="width: 100px; height: 150px;">
<div style="width: 50px; height: 75px; padding: 10%; box-sizing: border-box">
</div>
</div>
@@ -197,7 +197,8 @@
</div>
</div>
<div data-disabled="true" id="box_sizing_content_box_flex_basis_row" style="width: 100px; height: 100px; flex-direction: row;">
<div data-disabled="true" id="box_sizing_content_box_flex_basis_row"
style="width: 100px; height: 100px; flex-direction: row;">
<div style="flex-basis: 50px; height: 25px; padding: 5px; border-width: 10px; box-sizing: content-box">
</div>
</div>
@@ -207,7 +208,8 @@
</div>
</div>
<div data-disabled="true" id="box_sizing_content_box_flex_basis_column" style="width: 100px; height: 100px; flex-direction: column;">
<div data-disabled="true" id="box_sizing_content_box_flex_basis_column"
style="width: 100px; height: 100px; flex-direction: column;">
<div style="flex-basis: 50px; height: 25px; padding: 5px; border-width: 10px; box-sizing: content-box">
</div>
</div>