c2a0ccf0d4
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
131 lines
5.8 KiB
HTML
131 lines
5.8 KiB
HTML
<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>
|
|
|