Support "align-content: space-evenly" (#1422)
Summary: X-link: https://github.com/facebook/react-native/pull/41019 ### Changes made - Regenerated tests (as some aspect ratio tests seem to be out of date compared to the fixtures) - Added SpaceEvenly variant to the "Align" enums (via enums.py) - Implemented `align-content: space-evenly` alignment in CalculateLayout.cpp - Added generated tests `align-content: space-evenly` - Updated NumericBitfield test to account for the fact that the Align enum now requires more bits (this bit could do with being reviewed as I am not 100% certain that it's valid to just update the test like this). ### Changes not made - Any attempt to improve the spec-compliance of content alignment in general (e.g. I think https://github.com/facebook/yoga/pull/1013 probably still needs to happen) Pull Request resolved: https://github.com/facebook/yoga/pull/1422 Reviewed By: yungsters Differential Revision: D50305438 Pulled By: NickGerleman fbshipit-source-id: ef9f6f14220a0db066bc30db8dd690a4a82a0b00
This commit is contained in:
Nico Burns
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
2e2c124c28
commit
0d28b283e2
@@ -1,4 +1,11 @@
|
||||
<div id="align_content_flex_start" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
|
||||
<!-- ALIGN CONTENT: FLEX-START -->
|
||||
|
||||
<div id="align_content_flex_start_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: flex-start;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_flex_start_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
@@ -6,6 +13,28 @@
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
|
||||
<div id="align_content_flex_start_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_flex_start_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; height: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_flex_start_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; height: 10px; gap: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_flex_start_without_height_on_children" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
|
||||
<div style="width: 50px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
@@ -22,7 +51,14 @@
|
||||
<div style="width: 50px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_flex_end" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-end;">
|
||||
<!-- ALIGN CONTENT: FLEX-END -->
|
||||
|
||||
<div id="align_content_flex_end_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: flex-end;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_flex_end_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-end;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
@@ -30,6 +66,181 @@
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
|
||||
<div id="align_content_flex_end_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-end;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_flex_end_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; height: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_flex_end_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; height: 10px; gap: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ALIGN CONTENT: CENTER -->
|
||||
|
||||
<div id="align_content_center_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: center;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_center_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: center;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
|
||||
<div id="align_content_center_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: center;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_center_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; height: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_center_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; height: 10px; gap: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ALIGN CONTENT: SPACE-BETWEEN -->
|
||||
|
||||
<div id="align_content_space_between_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-between;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_space_between_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
|
||||
<div id="align_content_space_between_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_space_between_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_space_between_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px; gap: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ALIGN CONTENT: SPACE-AROUND -->
|
||||
|
||||
<div id="align_content_space_around_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-around;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_space_around_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
|
||||
<div id="align_content_space_around_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_space_around_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_space_around_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px; gap: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ALIGN CONTENT: SPACE-EVENLY -->
|
||||
|
||||
<div id="align_content_space_evenly_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-evenly;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_space_evenly_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-evenly;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
|
||||
<div id="align_content_space_evenly_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-evenly;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_space_evenly_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; justify-content: center; height: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_space_evenly_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
|
||||
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; justify-content: center; height: 10px; gap: 10px;">
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ALIGN CONTENT: STRETCH -->
|
||||
|
||||
<div id="align_content_stretch" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
|
||||
<div style="width: 50px;"></div>
|
||||
<div style="width: 50px;"></div>
|
||||
@@ -38,22 +249,6 @@
|
||||
<div style="width: 50px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_spacebetween" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_spacearound" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_stretch_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
|
||||
<div style="width: 50px;"></div>
|
||||
<div style="width: 50px;"></div>
|
||||
|
||||
Reference in New Issue
Block a user