DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
e8121df8e0bc954adc73f1b78b91c26dd59f109b
yoga/gentest/fixtures/YGGapTest.html
Soe Lynn cd4a1b8cf6 Implement Percentage support for gap styles (#1643) 
Summary:
X-link: https://github.com/facebook/react-native/pull/44067

X-link: https://github.com/facebook/litho/pull/980

Pull Request resolved: https://github.com/facebook/yoga/pull/1643

Changelog [Internal]:
- Added percentage value for flex layout gap
- Wired up to pass proper available width and height to implement this feature

Reviewed By: NickGerleman

Differential Revision: D56002340

fbshipit-source-id: c0bc86ac70a1391f115c87da99c2ef411535f68b
2024-04-15 16:44:16 -07:00

243 lines
11 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_start_index" style="flex-direction: row; flex-wrap: wrap; width: 80px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px; position: absolute"></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="column_gap_determines_parent_width" style="flex-direction: row; height: 100px; align-items: 'stretch'; column-gap: 10px;">
<div style="width: 10px;"></div>
<div style="width: 20px;"></div>
<div style="width: 30px;"></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>
<div id="row_gap_determines_parent_height" style="flex-direction: column; width: 100px; align-items: 'stretch'; row-gap: 10px;">
<div style="height: 10px;"></div>
<div style="height: 20px"></div>
<div style="height: 30px"></div>
</div>
<div id="row_gap_percent_wrapping" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
<div id="row_gap_percent_determines_parent_height" style="flex-direction: row; width: 300px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
<div id="row_gap_percent_wrapping_with_both_content_padding_and_item_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
</div>
<div id="row_gap_percent_wrapping_with_both_content_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
<div id="row_gap_percent_wrapping_with_content_margin" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
<div id="row_gap_percent_wrapping_with_content_margin_and_padding" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
<div id="row_gap_percent_wrapping_with_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
<div style="flex: 1;"></div>
<div style="flex: 1;"></div>
<div style="flex: 1;"></div>
</div>
<div id="row_gap_percent_wrapping_with_mixed_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
<div style="width: 10px;"></div>
<div style="flex: 1;"></div>
<div style="width: 10%;"></div>
</div>
<!-- TODO: Existing bug that Yoga is not inline with Chromium for calculation with min-width -->
<div id="row_gap_percent_wrapping_with_min_width" data-disabled="true" style="flex-direction: row; min-width: 300px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
Reference in New Issue View Git Blame Copy Permalink