DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
c2a0ccf0d44bb2a5dffbf932b05456ca58838a6b
yoga/gentest/fixtures/YGGapTest.html

131 lines
5.8 KiB
HTML
Raw Normal View History

Add tests for row-gap and column-gap Summary: This adds the fixtures from https://github.com/facebook/yoga/pull/1116 and generates tests. This adds a good amount of coverage, but I plan to follow up with a diff adding a bit more, e.g. for interactions with flex direction of column when we should no-op, etc. I also discovered the current fixtures do not allow testing shorthand props like "gap" without changes. This also updates the `webdrivers` gem to respond to a break with chromedriver on m1 macs from 4 days ago https://github.com/titusfortner/webdrivers/pull/239. Reviewed By: yungsters Differential Revision: D39922413 fbshipit-source-id: dfc7bda894be8dfcb24e25c19a4df0b09a72ce7e
2022-10-13 08:18:49 -07:00
<div id="column_gap_flexable" 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 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 style="width: 20px;"></div>
<div style="flex: 1;"></div>
<div style="width: 20px;"></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="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>
Reference in New Issue Copy Permalink