Gentest and initial tests for intrinsic sizing (#1723)
Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1723 Adds gentest support for intrinsic sizing keywords and creates an initial batch of somewhat interesting tests for these keywords on `width`, `height`, `min-width`, `min-height`, `max-width`, `max-height`, and `flex-basis` Reviewed By: NickGerleman Differential Revision: D64145117 fbshipit-source-id: 1e3e7214fab062ab6f260cfe7bdfaf3c0aca3bf7
This commit is contained in:
Joe Vilches
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
488288e291
commit
867bfae3a3
@@ -219,3 +219,251 @@
|
||||
Sed at consectetur ipsum.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="max_content_width" style="flex-direction: row; width:max-content; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="fit_content_width" style="width: 90px; position: relative;">
|
||||
<div style="flex-direction: row; width: fit-content; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="stretch_width" style="width: 500px; position: relative;">
|
||||
<div style="flex-direction: row; width: -webkit-fill-available; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="max_content_height" style="height:max-content; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="fit_content_height" style="height: 90px; position: relative;">
|
||||
<div style="height: fit-content; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="stretch_height" style="height: 500px; position: relative;">
|
||||
<div style="height: -webkit-fill-available; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="max_content_flex_basis_column" style="flex-basis: max-content; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="fit_content_flex_basis_column" style="height: 90px; position: relative;">
|
||||
<div style="flex-basis: fit-content; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="stretch_flex_basis_column" style="height: 500px; position: relative;">
|
||||
<div style="flex-basis: -webkit-fill-available; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="max_content_flex_basis_row" style="flex-direction: row; flex-basis: max-content; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 500px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="fit_content_flex_basis_row" style="width: 90px; position: relative;">
|
||||
<div style="flex-direction: row; flex-basis: fit-content; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="stretch_flex_basis_row" style="width: 500px; position: relative;">
|
||||
<div style="flex-direction: row; flex-basis: -webkit-fill-available; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="max_content_max_width" style="flex-direction: row; max-width:max-content; width: 200px; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="fit_content_max_width" style="width: 90px; position: relative;">
|
||||
<div style="flex-direction: row; max-width: fit-content; width: 110px; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="stretch_max_width" style="width: 500px; position: relative;">
|
||||
<div style="flex-direction: row; max-width: -webkit-fill-available; width: 600px; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="max_content_min_width" style="flex-direction: row; min-width:max-content; width: 100px; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="fit_content_min_width" style="width: 90px; position: relative;">
|
||||
<div style="flex-direction: row; min-width: fit-content; width: 90px; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="stretch_min_width" style="width: 500px; position: relative;">
|
||||
<div style="flex-direction: row; min-width: -webkit-fill-available; width: 400px; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 25px; height: 50px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="max_content_max_height" style="max-height:max-content; height: 200px; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="fit_content_max_height" style="height: 90px; position: relative;">
|
||||
<div style="max-height: fit-content; height: 110px; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="stretch_max_height" style="height: 500px; position: relative;">
|
||||
<div style="max-height: -webkit-fill-available; flex-wrap: wrap; height: 600px;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="max_content_min_height" style="min-height:max-content; height: 100px; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="fit_content_min_height" style="height: 90px; position: relative;">
|
||||
<div style="min-height: fit-content; height: 90px; flex-wrap: wrap;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-disabled="true" id="stretch_min_height" style="height: 500px; position: relative;">
|
||||
<div style="min-height: -webkit-fill-available; flex-wrap: wrap; height: 400px;">
|
||||
<div style="width: 50px; height: 50px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 100px;">
|
||||
</div>
|
||||
<div style="width: 50px; height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user