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

Add tests for row-gap and column-gap

Browse Source 
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
This commit is contained in:
Nick Gerleman
2022-10-13 08:18:49 -07:00
committed by Facebook GitHub Bot
parent 8e29e7c1e1
commit c2a0ccf0d4
7 changed files with 6739 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gentest/Gemfile
View File

@@ -1,4 +1,4 @@
source "https://rubygems.org"
gem 'watir', '~>6.19.0'
gem 'webdrivers', '~> 5.1.0'
gem 'webdrivers', '~> 5.2.0'

4
gentest/Gemfile.lock
View File

@@ -18,7 +18,7 @@ GEM
watir (6.19.1)
regexp_parser (>= 1.2, < 3)
selenium-webdriver (>= 3.142.7)
webdrivers (5.1.0)
webdrivers (5.2.0)
nokogiri (~> 1.6)
rubyzip (>= 1.3.0)
selenium-webdriver (~> 4.0)
@@ -29,7 +29,7 @@ PLATFORMS
DEPENDENCIES
watir (~> 6.19.0)
webdrivers (~> 5.1.0)
webdrivers (~> 5.2.0)
BUNDLED WITH
2.1.4

130
gentest/fixtures/YGGapTest.html Normal file
View File

@@ -0,0 +1,130 @@
<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>