DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
ef9ae63268685895ec49568d0615ddc84158a301
yoga/gentest/fixtures/YGBoxSizingTest.html
Joe Vilches e69fcb26bb Fix issue where padding for box sizing is resolved against wrong reference length (#1715) 
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
2024-10-04 17:07:05 -07:00

253 lines
10 KiB
HTML
Raw Blame History

<div id="box_sizing_content_box_simple"
style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: content-box">
</div>
<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_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: 150px;">
<div style="width: 50px; height: 75px; 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_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_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"
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>
<div style="width: 25px; height: 25px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
<div id="box_sizing_border_box_children"
style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: border-box">
<div style="width: 25px; height: 25px"></div>
<div style="width: 25px; height: 25px"></div>
<div style="width: 25px; height: 25px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
<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>
<div style="width: 25px; height: 25px"></div>
</div>
<div id="box_sizing_border_box_siblings" style="width: 100px; height: 100px;">
<div style="width: 25px; height: 25px"></div>
<div style="width: 25px; height: 25px; box-sizing: border-box; padding: 10px; border-width: 10px"></div>
<div style="width: 25px; height: 25px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
<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>
<div id="box_sizing_border_box_max_width" style="width: 100px; height: 100px;">
<div style="max-width: 50px; height: 25px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
<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>
<div id="box_sizing_border_box_max_height" style="width: 100px; height: 100px;">
<div style="width: 50px; max-height: 50px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
<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>
<div id="box_sizing_border_box_min_width" style="width: 100px; height: 100px;">
<div style="min-width: 50px; height: 25px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
<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>
<div id="box_sizing_border_box_min_height" style="width: 100px; height: 100px;">
<div style="width: 50px; min-height: 50px; box-sizing: border-box; padding: 5px; border-width: 15px"></div>
<div style="width: 25px; height: 25px"></div>
</div>
<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>
<div id="box_sizing_border_box_no_height_no_width" style="width: 100px; height: 100px;">
<div style="box-sizing: border-box; padding: 2px; border-width: 7px">
</div>
</div>
<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>
</div>
</div>
<div id="box_sizing_border_box_nested"
style="width: 100px; height: 100px; box-sizing: border-box; padding: 15px; border-width: 3px;">
<div style="width: 20px; height: 20px; box-sizing: border-box; padding: 2px; border-width: 7px">
<div style="width: 10px; height: 5px; box-sizing: border-box; padding: 1px; border-width: 2px"></div>
</div>
</div>
<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">
<div style="width: 10px; height: 5px; box-sizing: border-box; padding: 1px; border-width: 1px">
</div>
</div>
</div>
</div>
<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">
<div style="width: 10px; height: 5px; box-sizing: content-box; padding: 1px; border-width: 1px">
</div>
</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>
Reference in New Issue View Git Blame Copy Permalink