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

More niche box sizing tests (#1712)

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

tsia, add some more advanced tests checking

* percent widths/heights/padding/border
* absolute positioned nodes with content box
* containing block with content box + static
* flex basis (fails now, needs follow up)
* relative padding/border values

All pass but flex basis

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D63423302

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

119
gentest/fixtures/YGBoxSizingTest.html
View File

@@ -2,32 +2,85 @@
style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: content-box">
</div>
<div id="box_sizing_border_box"
<div id="box_sizing_border_box_simple"
style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: border-box">
</div>
<div id="box_sizing_content_box_percent" style="width: 100px; height: 100px;">
<div style="width: 50%; height: 25%; padding: 4px; border-width: 16px; box-sizing: content-box">
</div>
</div>
<div id="box_sizing_border_box_percent" style="width: 100px; height: 100px;">
<div style="width: 50%; height: 25%; padding: 4px; border-width: 16px; box-sizing: border-box">
</div>
</div>
<div id="box_sizing_content_box_absolute" style="width: 100px; height: 100px;">
<div style="width: 50; height: 25%; padding: 12px; border-width: 8px; box-sizing: content-box; position: absolute;">
</div>
</div>
<div id="box_sizing_border_box_absolute" style="width: 100px; height: 100px;">
<div style="width: 50; height: 25%; padding: 12px; border-width: 8px; box-sizing: border-box; position: absolute;">
</div>
</div>
<div id="box_sizing_content_box_comtaining_block"
style="width: 100px; height: 100px; padding: 12px; border-width: 8px; box-sizing: content-box; ">
<div style="width: 75; height: 75; position: static;">
<div style="width: 50px; height: 25%; position: absolute;">
</div>
</div>
</div>
<div id="box_sizing_border_box_comtaining_block"
style="width: 100px; height: 100px; padding: 12px; border-width: 8px; box-sizing: border-box; ">
<div style="width: 75; height: 75; position: static;">
<div style="width: 50px; height: 25%; position: absolute;">
</div>
</div>
</div>
<div id="box_sizing_content_box_padding_only"
style="width: 100px; height: 100px; padding: 5px; box-sizing: content-box">
</div>
<div id="box_sizing_border_box_padding_only"
style="width: 100px; height: 100px; padding: 5px; box-sizing: border-box">
<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>
</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>
</div>
<div id="box_sizing_content_box_border_only"
style="width: 100px; height: 100px; border-width: 10px; box-sizing: content-box">
</div>
<div id="box_sizing_content_box_border_only_percent" style="width: 100px; height: 100px;">
<div style="width: 50%; height: 75; border-width: 10%; box-sizing: content-box">
</div>
</div>
<div id="box_sizing_border_box_border_only"
style="width: 100px; height: 100px; border-width: 10px; box-sizing: border-box">
</div>
<div id="box_sizing_content_box_no_padding_no_border"
style="width: 100px; height: 100px; box-sizing: content-box">
<div id="box_sizing_border_box_border_only_percent" style="width: 100px; height: 100px;">
<div style="width: 50%; height: 75; border-width: 10%; box-sizing: border-box">
</div>
</div>
<div id="box_sizing_border_box_no_padding_no_border"
style="width: 100px; height: 100px; box-sizing: border-box">
<div id="box_sizing_content_box_no_padding_no_border" style="width: 100px; height: 100px; box-sizing: content-box">
</div>
<div id="box_sizing_border_box_no_padding_no_border" style="width: 100px; height: 100px; box-sizing: border-box">
</div>
<div id="box_sizing_content_box_children"
@@ -143,3 +196,55 @@
</div>
</div>
</div>
<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>
<div id="box_sizing_border_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: border-box">
</div>
</div>
<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>
<div id="box_sizing_border_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: border-box">
</div>
</div>
<div id="box_sizing_content_box_padding_start"
style="width: 100px; height: 100px; padding-start: 5px; box-sizing: content-box">
</div>
<div id="box_sizing_border_box_padding_start"
style="width: 100px; height: 100px; padding-start: 5px; box-sizing: border-box">
</div>
<div id="box_sizing_content_box_padding_end"
style="width: 100px; height: 100px; padding-end: 5px; box-sizing: content-box">
</div>
<div id="box_sizing_border_box_padding_end"
style="width: 100px; height: 100px; padding-end: 5px; box-sizing: border-box">
</div>
<div id="box_sizing_content_box_border_start"
style="width: 100px; height: 100px; border-start-width: 5px; box-sizing: content-box">
</div>
<div id="box_sizing_border_box_border_start"
style="width: 100px; height: 100px; border-start-width: 5px; box-sizing: border-box">
</div>
<div id="box_sizing_content_box_border_end"
style="width: 100px; height: 100px; border-end-width: 5px; box-sizing: content-box">
</div>
<div id="box_sizing_border_box_border_end"
style="width: 100px; height: 100px; border-end-width: 5px; box-sizing: border-box">
</div>