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

Impl of content box (#1711)

Browse Source 
Summary:
X-link: https://github.com/facebook/react-native/pull/46741

Pull Request resolved: https://github.com/facebook/yoga/pull/1711

box sizing is really just a reinterpretation of what length properties (like `width`, `height`, `max-width`, etc) mean. So to implement this I just add the border and padding if we are in content box when we ask for any of these properties. All the math that gets done by the algorithm is still in border box land, and the layout we return is to be interpreted as the border box (this is actually the expected behavior per https://drafts.csswg.org/css-sizing/#box-sizing). This makes this implementation pretty simple actually.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D63416833

fbshipit-source-id: fd76132cf51e8a5092129802c3a12ab24023018b
This commit is contained in:
Joe Vilches
2024-10-01 15:19:22 -07:00
committed by Facebook GitHub Bot
parent bc5098fc80
commit 671ae61a39
10 changed files with 181 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
gentest/fixtures/YGBoxSizingTest.html
View File

@@ -1,4 +1,4 @@
<div data-disabled="true" id="box_sizing_content_box"
<div id="box_sizing_content_box_simple"
style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: content-box">
</div>
@@ -6,7 +6,7 @@
style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: border-box">
</div>
<div data-disabled="true" id="box_sizing_content_box_padding_only"
<div id="box_sizing_content_box_padding_only"
style="width: 100px; height: 100px; padding: 5px; box-sizing: content-box">
</div>
@@ -14,7 +14,7 @@
style="width: 100px; height: 100px; padding: 5px; box-sizing: border-box">
</div>
<div data-disabled="true" id="box_sizing_content_box_border_only"
<div id="box_sizing_content_box_border_only"
style="width: 100px; height: 100px; border-width: 10px; box-sizing: content-box">
</div>
@@ -22,7 +22,7 @@
style="width: 100px; height: 100px; border-width: 10px; box-sizing: border-box">
</div>
<div data-disabled="true" id="box_sizing_content_box_no_padding_no_border"
<div id="box_sizing_content_box_no_padding_no_border"
style="width: 100px; height: 100px; box-sizing: content-box">
</div>
@@ -30,7 +30,7 @@
style="width: 100px; height: 100px; box-sizing: border-box">
</div>
<div data-disabled="true" id="box_sizing_content_box_children"
<div id="box_sizing_content_box_children"
style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: content-box">
<div style="width: 25px; height: 25px"></div>
<div style="width: 25px; height: 25px"></div>
@@ -46,7 +46,7 @@
<div style="width: 25px; height: 25px"></div>
</div>
<div data-disabled="true" id="box_sizing_content_box_siblings" style="width: 100px; height: 100px;">
<div id="box_sizing_content_box_siblings" style="width: 100px; height: 100px;">
<div style="width: 25px; height: 25px"></div>
<div style="width: 25px; height: 25px; box-sizing: content-box; padding: 10px; border-width: 10px"></div>
<div style="width: 25px; height: 25px"></div>
@@ -60,7 +60,7 @@
<div style="width: 25px; height: 25px"></div>
</div>
<div data-disabled="true" id="box_sizing_content_box_max_width" style="width: 100px; height: 100px;">
<div id="box_sizing_content_box_max_width" style="width: 100px; height: 100px;">
<div style="max-width: 50px; height: 25px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
@@ -70,7 +70,7 @@
<div style="width: 25px; height: 25px"></div>
</div>
<div data-disabled="true" id="box_sizing_content_box_max_height" style="width: 100px; height: 100px;">
<div id="box_sizing_content_box_max_height" style="width: 100px; height: 100px;">
<div style="width: 50px; max-height: 50px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
@@ -80,7 +80,7 @@
<div style="width: 25px; height: 25px"></div>
</div>
<div data-disabled="true" id="box_sizing_content_box_min_width" style="width: 100px; height: 100px;">
<div id="box_sizing_content_box_min_width" style="width: 100px; height: 100px;">
<div style="min-width: 50px; height: 25px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
@@ -90,7 +90,7 @@
<div style="width: 25px; height: 25px"></div>
</div>
<div data-disabled="true" id="box_sizing_content_box_min_height" style="width: 100px; height: 100px;">
<div id="box_sizing_content_box_min_height" style="width: 100px; height: 100px;">
<div style="width: 50px; min-height: 50px; box-sizing: content-box; padding: 5px; border-width: 15px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
@@ -100,7 +100,7 @@
<div style="width: 25px; height: 25px"></div>
</div>
<div data-disabled="true" id="box_sizing_content_box_no_height_no_width" style="width: 100px; height: 100px;">
<div id="box_sizing_content_box_no_height_no_width" style="width: 100px; height: 100px;">
<div style="box-sizing: content-box; padding: 2px; border-width: 7px">
</div>
</div>
@@ -110,7 +110,7 @@
</div>
</div>
<div data-disabled="true" id="box_sizing_content_box_nested"
<div id="box_sizing_content_box_nested"
style="width: 100px; height: 100px; box-sizing: content-box; padding: 15px; border-width: 3px;">
<div style="width: 20px; height: 20px; box-sizing: content-box; padding: 2px; border-width: 7px">
<div style="width: 10px; height: 5px; box-sizing: content-box; padding: 1px; border-width: 2px"></div>
@@ -124,7 +124,7 @@
</div>
</div>
<div data-disabled="true" id="box_sizing_content_box_nested_alternating"
<div id="box_sizing_content_box_nested_alternating"
style="width: 100px; height: 100px; box-sizing: content-box; padding: 3px; border-width: 2px;">
<div style="width: 40px; height: 40px; box-sizing: border-box; padding: 8px; border-width: 2px">
<div style="width: 20px; height: 25px; box-sizing: content-box; padding: 3px; border-width: 6px">
@@ -134,7 +134,7 @@
</div>
</div>
<div data-disabled="true" id="box_sizing_border_box_nested_alternating"
<div id="box_sizing_border_box_nested_alternating"
style="width: 100px; height: 100px; box-sizing: border-box; padding: 3px; border-width: 2px;">
<div style="width: 40px; height: 40px; box-sizing: content-box; padding: 8px; border-width: 2px">
<div style="width: 20px; height: 25px; box-sizing: border-box; padding: 3px; border-width: 6px">