DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
27d632c697e983d15f14fc4b9c3adf35c0ade680
yoga/gentest/fixtures/YGAlignItemsTest.html
Nick Gerleman 27d632c697 Fix possible invalid measurements when width or height is zero pixels (#1820) 
Summary:
X-link: https://github.com/facebook/react-native/pull/52073

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

Fixes https://github.com/facebook/yoga/issues/1819

Yoga has a fast path when measuring a node, if it thinks it knows its dimensions ahead of time.

This path has some eroneous logic, to set both axis to owner size, if *either* will evaluate to zero, while having an `YGMeasureModeAtMost`/`FitContent` constraint. This means that if a node is given a zero width, and Yoga later measures with with `FitContent`, its height will become the maximum allowable height, even if it shouldn't be that large.

We can fix this, by only allowing if both axis are this fixed case, instead of just one.

This bug has existed for about a decade (going back to at least D3312496).

Changelog:
[General][Fixed] - Fix possible invalid measurements with width or height is zero pixels

Reviewed By: yungsters

Differential Revision: D76793705

fbshipit-source-id: ea4c00e688912a58c08801e4a14ddf1b293a5d86
2025-06-17 12:15:55 -07:00

254 lines
9.8 KiB
HTML
Raw Blame History

<div id="align_items_stretch" style="width: 100px; height: 100px;">
<div style="height: 10px;"></div>
</div>
<div id="align_items_center" style="width: 100px; height: 100px; align-items: center;">
<div style="height: 10px; width: 10px;"></div>
</div>
<div id="align_items_flex_start" style="width: 100px; height: 100px; align-items: flex-start;">
<div style="height: 10px; width: 10px;"></div>
</div>
<div id="align_items_flex_end" style="width: 100px; height: 100px; align-items: flex-end;">
<div style="height: 10px; width: 10px;"></div>
</div>
<div id="align_baseline" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;"></div>
</div>
<div id="align_baseline_child" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_child_multiline"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 60px;"></div>
<div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;"></div>
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_child_multiline_override"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 60px;"></div>
<div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;align-self:baseline;"></div>
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;align-self:baseline;"></div>
</div>
</div>
<div id="align_baseline_child_multiline_no_override_on_secondline"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 60px;"></div>
<div style="width: 50px; height: 25px;flex-wrap:wrap;flex-direction:row;">
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;"></div>
<div style="width: 25px; height: 20px;"></div>
<div style="width: 25px; height: 10px;align-self:baseline;"></div>
</div>
</div>
<div id="align_baseline_child_top" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;top:10px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_child_top2" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;top:5px">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_double_nested_child"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;">
<div style="width: 50px; height: 20px;"></div>
</div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 15px;"></div>
</div>
</div>
<div id="align_baseline_column" style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;"></div>
</div>
<div id="align_baseline_child_margin" style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;margin: 5px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;margin: 1px;"></div>
</div>
</div>
<div id="align_baseline_child_padding"
style="width: 100px; height: 100px; padding:5px; flex-direction:row; align-items: baseline;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;padding:5px;">
<div style="width: 50px; height: 10px;"></div>
</div>
</div>
<div id="align_baseline_multiline"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 50px;"></div>
</div>
<!-- TODO: Yoga's behavior is no longer in line with Chromium -->
<div id="align_baseline_multiline_column" data-disabled="true"
style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 30px; height: 50px;">
<div style="width: 20px; height: 20px;"></div>
</div>
<div style="width: 40px; height: 70px;">
<div style="width: 10px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;"></div>
</div>
<!-- TODO: Yoga's behavior is no longer in line with Chromium -->
<div id="align_baseline_multiline_column2" data-disabled="true"
style="width: 100px; height: 100px; flex-direction:column; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;flex-direction:column;"></div>
<div style="width: 30px; height: 50px;flex-direction:column;">
<div style="width: 20px; height: 20px;flex-direction:column;"></div>
</div>
<div style="width: 40px; height: 70px;flex-direction:column;">
<div style="width: 10px; height: 10px;flex-direction:column;"></div>
</div>
<div style="width: 50px; height: 20px;flex-direction:column;"></div>
</div>
<div id="align_baseline_multiline_row_and_column"
style="width: 100px; height: 100px; flex-direction:row; align-items: baseline;flex-wrap:wrap;">
<div style="width: 50px; height: 50px;"></div>
<div style="width: 50px; height: 50px;flex-direction:column;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;flex-direction:column;">
<div style="width: 50px; height: 10px;"></div>
</div>
<div style="width: 50px; height: 20px;"></div>
</div>
<div id="align_items_center_child_with_margin_bigger_than_parent"
style="height: 52px; width: 52px; align-items: center; justify-content: center;">
<div style="align-items: center;">
<div style="width: 52px; height: 52px; margin-left: 10px; margin-right: 10px;"></div>
</div>
</div>
<div id="align_items_flex_end_child_with_margin_bigger_than_parent"
style="height: 52px; width: 52px; align-items: center; justify-content: center;">
<div style="align-items: flex-end;">
<div style="width: 52px; height: 52px; margin-left: 10px; margin-right: 10px;"></div>
</div>
</div>
<div id="align_items_center_child_without_margin_bigger_than_parent"
style="height: 52px; width: 52px; align-items: center; justify-content: center;">
<div style="align-items: center;">
<div style="width: 72px; height: 72px;"></div>
</div>
</div>
<div id="align_items_flex_end_child_without_margin_bigger_than_parent"
style="height: 52px; width: 52px; align-items: center; justify-content: center;">
<div style="align-items: flex-end;">
<div style="width: 72px; height: 72px;"></div>
</div>
</div>
<div id="align_center_should_size_based_on_content"
style="width: 100px; height: 100px; align-items: center; margin-top: 20px;">
<div style="flex-grow: 0; flex-shrink: 1; justify-content: center;">
<div style="flex-grow: 1; flex-shrink: 1;">
<div style="width: 20px; height: 20px;"></div>
</div>
</div>
</div>
<div id="align_stretch_should_size_based_on_parent"
style="width: 100px; height: 100px; align-items: stretch; margin-top: 20px;">
<div style="flex-grow: 0; flex-shrink: 1; justify-content: center;">
<div style="flex-grow: 1; flex-shrink: 1;">
<div style="width: 20px; height: 20px;"></div>
</div>
</div>
</div>
<div id="align_flex_start_with_shrinking_children" style="height: 500px; width: 500px">
<div style="align-items: flex-start;">
<div style="flex-grow: 1; flex-shrink: 1;">
<div style="flex-grow: 1; flex-shrink: 1;"></div>
</div>
</div>
</div>
<div id="align_flex_start_with_stretching_children" style="height: 500px; width: 500px">
<div style="align-items: stretch;">
<div style="flex-grow: 1; flex-shrink: 1;">
<div style="flex-grow: 1; flex-shrink: 1;"></div>
</div>
</div>
</div>
<div id="align_flex_start_with_shrinking_children_with_stretch" style="height: 500px; width: 500px">
<div style="align-items: flex-start;">
<div style="flex-grow: 1; flex-shrink: 1; align-items: stretch;">
<div style="flex-grow: 1; flex-shrink: 1;"></div>
</div>
</div>
</div>
<div id="align_flex_end_with_row_reverse"
style="width: 100px; height: 75px; align-items: flex-end; flex-direction: column; flex-wrap: wrap;">
<div style="position:relative; width:50px; height:50px; margin-right: 5px; margin-left: 3px;">
</div>
<div style="position:relative; width:50px; height:50px;">
</div>
</div>
<div id="align_stretch_with_row_reverse"
style="width: 100px; height: 75px; align-items: stretch; flex-direction: column; flex-wrap: wrap;">
<div style="position:relative; width:50px; height:50px; margin-right: 5px; margin-left: 3px;">
</div>
<div style="position:relative; width:50px; height:50px;">
</div>
</div>
<div id="align_items_non_stretch_s526008"
style="flex-direction: column; width: 400px; height: 400px;">
<div style="flex-direction: row;">
<div style="flex-direction: column; align-items: flex-start;">
<div>
<div style="width: 0; height: 10px;"></div>
</div>
</div>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink