e769dd97d8
Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1286 This can be marked in fixtures to skip a test without commenting it out. We add one more usage of this. The same functionality existed (unused) before for `experiments`, which I changed to `data-experiments`. Formatting of JS tests changed to be closer to what Prettier would output, and to remove usage of `Yoga.UNDEFINED` which doesn't existi and just resolves to `undefined` (this is converted to NaN by the wrapper layer). Reviewed By: yungsters Differential Revision: D45723003 fbshipit-source-id: 337af319ab1c1c12047d6579da8c7e63b4f1537a
112 lines
4.7 KiB
HTML
112 lines
4.7 KiB
HTML
<div id="percentage_width_height" style="width: 200px; height: 200px; flex-direction: row;">
|
|
<div style="width: 30%; height: 30%;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_position_left_top" style="width: 400px; height: 400px; flex-direction: row;">
|
|
<div style="width: 45%; height: 55%; left: 10%; top: 20%"></div>
|
|
</div>
|
|
|
|
<div id="percentage_position_bottom_right" style="width: 500px; height: 500px; flex-direction: row;">
|
|
<div style="width: 55%; height: 15%; bottom: 10%; right: 20%"></div>
|
|
</div>
|
|
|
|
<div id="percentage_flex_basis" style="width: 200px; height: 200px; flex-direction: row;">
|
|
<div style="flex-grow: 1; flex-basis: 50%;"></div>
|
|
<div style="flex-grow: 1; flex-basis: 25%;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_flex_basis_cross" style="width: 200px; height: 200px; flex-direction: column;">
|
|
<div style="flex-grow: 1; flex-basis: 50%;"></div>
|
|
<div style="flex-grow: 1; flex-basis: 25%;"></div>
|
|
</div>
|
|
|
|
|
|
<!-- TODO: Yoga's behavior is no longer in line with Chromium -->
|
|
<div id="percentage_flex_basis_cross_min_height" data-disabled="true" style="width: 200px; height: 200px; flex-direction: column;">
|
|
<div style="flex-grow: 1; min-height: 60%;"></div>
|
|
<div style="flex-grow: 2; min-height: 10%;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_flex_basis_main_max_height" style="width: 200px; height: 200px; flex-direction: row;">
|
|
<div style="flex-grow: 1; flex-basis: 10%; max-height: 60%;"></div>
|
|
<div style="flex-grow: 4; flex-basis: 10%; max-height: 20%;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_flex_basis_cross_max_height" style="width: 200px; height: 200px; flex-direction: column;">
|
|
<div style="flex-grow: 1; flex-basis: 10%; max-height: 60%;"></div>
|
|
<div style="flex-grow: 4; flex-basis: 10%; max-height: 20%;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_flex_basis_main_max_width" style="width: 200px; height: 200px; flex-direction: row;">
|
|
<div style="flex-grow: 1; flex-basis: 15%; max-width: 60%;"></div>
|
|
<div style="flex-grow: 4; flex-basis: 10%; max-width: 20%;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_flex_basis_cross_max_width" style="width: 200px; height: 200px; flex-direction: column;">
|
|
<div style="flex-grow: 1; flex-basis: 10%; max-width: 60%;"></div>
|
|
<div style="flex-grow: 4; flex-basis: 15%; max-width: 20%;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_flex_basis_main_min_width" style="width: 200px; height: 200px; flex-direction: row;">
|
|
<div style="flex-grow: 1; flex-basis: 15%; min-width: 60%;"></div>
|
|
<div style="flex-grow: 4; flex-basis: 10%; min-width: 20%;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_flex_basis_cross_min_width" style="width: 200px; height: 200px; flex-direction: column;">
|
|
<div style="flex-grow: 1; flex-basis: 10%; min-width: 60%;"></div>
|
|
<div style="flex-grow: 4; flex-basis: 15%; min-width: 20%;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_multiple_nested_with_padding_margin_and_percentage_values" style="width: 200px; height: 200px; flex-direction: column;">
|
|
<div style="flex-grow: 1; flex-basis: 10%; min-width: 60%; margin: 5px; padding: 3px;">
|
|
<div style="width: 50%; margin: 5px; padding: 3%;">
|
|
<div style="width: 45%; margin: 5%; padding: 3px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="flex-grow: 4; flex-basis: 15%; min-width: 20%;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_margin_should_calculate_based_only_on_width" style="width: 200px; height: 100px;">
|
|
<div style="flex-grow: 1; margin: 10%;">
|
|
<div style="width: 10px; height: 10px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="percentage_padding_should_calculate_based_only_on_width" style="width: 200px; height: 100px;">
|
|
<div style="flex-grow: 1; padding: 10%;">
|
|
<div style="width: 10px; height: 10px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="percentage_absolute_position" style="width: 200px; height: 100px;">
|
|
<div style="position: absolute; top: 10%; left: 30%; width: 10px; height: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_width_height_undefined_parent_size">
|
|
<div style="width: 50%; height: 50%;"></div>
|
|
</div>
|
|
|
|
<div id="percent_within_flex_grow" style="flex-direction:row; width: 350px; height: 100px; align-items: stretch; ">
|
|
<div style="width:100px;"></div>
|
|
<div style="flex-grow: 1;">
|
|
<div style="width:100%;"></div>
|
|
</div>
|
|
<div style="width: 100px;"></div>
|
|
</div>
|
|
|
|
<div id="percentage_container_in_wrapping_container" style="align-items: center; width: 200px; height: 200px; justify-content: center;">
|
|
<div>
|
|
<div style="alignItems: center; flex-direction: row; justify-content: center; width: 100%;">
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="percent_absolute_position" style="width: 60px; height: 50px;">
|
|
<div style="height: 50px; width: 100%; left: 50%; position: absolute; flex-direction: row;">
|
|
<div style="width: 100%;"></div>
|
|
<div style="width: 100%;"></div>
|
|
</div>
|
|
</div>
|