DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
4dfb29b5c8a37ae11c74f4ace562674f28f8cacf
yoga/gentest/fixtures/YGGapTest.html
Nick Gerleman 5a257aac85 Add tests for gap interaction with child margins 
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
2022-11-16 14:02:31 -08:00

155 lines
7.1 KiB
HTML
Raw Blame History

<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_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_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>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_justify_flex_start" style="flex-direction: row; justify-content: flex-start; width: 100px; 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_justify_center" style="flex-direction: row; justify-content: center; width: 100px; 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_justify_flex_end" style="flex-direction: row; justify-content: flex-end; width: 100px; 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_justify_space_between" style="flex-direction: row; justify-content: space-between; width: 100px; 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_justify_space_around" style="flex-direction: row; justify-content: space-around; width: 100px; 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_justify_space_evenly" style="flex-direction: row; justify-content: space-evenly; width: 100px; 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_wrap_align_flex_start" style="flex-direction: row; flex-wrap: wrap; align-content: flex-start; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_wrap_align_center" style="flex-direction: row; flex-wrap: wrap; align-content: center; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_wrap_align_flex_end" style="flex-direction: row; flex-wrap: wrap; align-content: flex-end; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_wrap_align_space_between" style="flex-direction: row; flex-wrap: wrap; align-content: space-between; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_wrap_align_space_around" style="flex-direction: row; flex-wrap: wrap; align-content: space-around; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_wrap_align_stretch" style="flex-direction: row; flex-wrap: wrap; width: 300px; height: 300px; column-gap: 5px; align-content: stretch;">
<div style="min-width: 60px; flex-grow: 1;"></div>
<div style="min-width: 60px; flex-grow: 1;"></div>
<div style="min-width: 60px; flex-grow: 1;"></div>
<div style="min-width: 60px; flex-grow: 1;"></div>
<div style="min-width: 60px; flex-grow: 1;"></div>
</div>
<div id="row_gap_align_items_stretch" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; column-gap: 10px; row-gap: 20px; align-items:stretch; align-content: stretch">
<div style="width: 20px; "></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="row_gap_align_items_end" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; column-gap: 10px; row-gap: 20px; align-items:flex-end;">
<div style="width: 20px; "></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<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>
Reference in New Issue View Git Blame Copy Permalink