DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Add tests for gap interaction with child margins

Browse Source 
Summary:
Adds a couple test fixtures to validate the interaction of flex gap with children with margins. In both Yoga, and web browsers, these are additive vs collapsing.

Fixes a couple misspellings as well that weren't caught during review.

Changelog:
[Internal]

Reviewed By: lunaleaps

Differential Revision: D41343407

fbshipit-source-id: 427f94faf248901517feff24d334f17ccb85266b
This commit is contained in:
Nick Gerleman
2022-11-16 14:02:31 -08:00
committed by Facebook GitHub Bot
parent efefc1eb7f
commit 5a257aac85
5 changed files with 987 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
gentest/fixtures/YGGapTest.html
View File

@@ -1,21 +1,27 @@
<div id="column_gap_flexable" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div id="column_gap_flexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="flex: 1;"></div>
<div style="flex: 1;"></div>
<div style="flex: 1;"></div>
</div>
<div id="column_gap_inflexbale" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
<div id="column_gap_inflexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="column_gap_mixed_flexable" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
<div id="column_gap_mixed_flexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
<div style="width: 20px;"></div>
<div style="flex: 1;"></div>
<div style="width: 20px;"></div>
</div>
<div id="column_gap_child_margins" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
<div style="flex: 1; margin-inline: 2px;"></div>
<div style="flex: 1; margin-inline: 10px;"></div>
<div style="flex: 1; margin-inline: 15px;"></div>
</div>
<div id="column_row_gap_wrapping" style="flex-direction: row; flex-wrap: wrap; width: 80px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
@@ -134,3 +140,15 @@
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="row_gap_column_child_margins" style="flex-direction: column; width: 100px; height: 200px; row-gap: 10px;">
<div style="flex: 1; margin-block: 2px;"></div>
<div style="flex: 1; margin-block: 10px;"></div>
<div style="flex: 1; margin-block: 15px;"></div>
</div>
<div id="row_gap_row_wrap_child_margins" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; row-gap: 10px;">
<div style="width: 60px; margin-block: 2px;"></div>
<div style="width: 60px; margin-block: 10px;"></div>
<div style="width: 60px; margin-block: 15px;"></div>
</div>