671ae61a39
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
146 lines
6.3 KiB
HTML
146 lines
6.3 KiB
HTML
<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"
|
|
style="width: 100px; height: 100px; padding: 5px; border-width: 10px; box-sizing: border-box">
|
|
</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>
|
|
|
|
<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_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>
|
|
|
|
<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>
|