Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[css-grid] Always consider baseline shim for the minimum contribution
Before this patch, the shim used for baseline alignment is not taken into consideration when calculating the minimum contribution of a grid item if its preferred size is auto, its minimum size is auto, and the max track sizing function is a fixed small value. In this case, the auto minimum size can produce a smaller track than if it was 0. The specification needs to clarify how baseline shims interact with minimum contributions (w3c/csswg-drafts#3660), but the above doesn't make sense. BUG=934535 TEST=external/wpt/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html Change-Id: Iafd194ab7e5656b5018e0e36b915ba183bdedd19
- Loading branch information
1 parent
c271bdc
commit 9381ef6
Showing
3 changed files
with
270 additions
and
0 deletions.
There are no files selected for viewing
88 changes: 88 additions & 0 deletions
88
css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title> | ||
| <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes"> | ||
| <meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area."> | ||
| <style> | ||
| .grid { | ||
| display: grid; | ||
| position: relative; | ||
| font-size: 0; | ||
| height: 0; | ||
| width: 0; | ||
| margin-bottom: 125px; | ||
| grid-template-columns: 50px 50px; | ||
| grid-template-rows: minmax(auto, var(--max-track-sizing-function)); | ||
| align-items: baseline; | ||
| } | ||
| .item1 { | ||
| padding-top: 25px; | ||
| background: yellow; | ||
| } | ||
| .item2 { | ||
| padding-bottom: 25px; | ||
| background: magenta; | ||
| } | ||
| .item1::before, .item2::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 25px; | ||
| height: 25px; | ||
| vertical-align: bottom; | ||
| } | ||
| .item2::before { | ||
| vertical-align: top; | ||
| } | ||
| .area { | ||
| position: absolute; | ||
| z-index: -1; | ||
| left: 0; | ||
| right: 0; | ||
| top: 0; | ||
| bottom: 0; | ||
| grid-column: 1 / 3; | ||
| grid-row: 1 / 2; | ||
| background: cyan; | ||
| } | ||
| </style> | ||
|
|
||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/resources/check-layout-th.js"></script> | ||
|
|
||
| <div id="log"></div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 0px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="100" data-expected-height="75"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 75px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="100" data-expected-height="75"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 88px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="100" data-expected-height="88"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 100px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="100" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: auto;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="100" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| checkLayout(".grid"); | ||
| </script> |
91 changes: 91 additions & 0 deletions
91
css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-002.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title> | ||
| <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes"> | ||
| <meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area."> | ||
| <style> | ||
| .grid { | ||
| display: grid; | ||
| position: relative; | ||
| font-size: 0; | ||
| height: 0; | ||
| width: 0; | ||
| margin-bottom: 125px; | ||
| grid-template-columns: minmax(auto, var(--max-track-sizing-function)); | ||
| grid-template-rows: 50px 50px; | ||
| justify-items: baseline; | ||
| } | ||
| .item1, .item2 { | ||
| writing-mode: vertical-lr; | ||
| } | ||
| .item1 { | ||
| padding-left: 25px; | ||
| background: yellow; | ||
| } | ||
| .item2 { | ||
| padding-right: 25px; | ||
| background: magenta; | ||
| } | ||
| .item1::before, .item2::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 25px; | ||
| height: 25px; | ||
| vertical-align: top; | ||
| } | ||
| .item2::before { | ||
| vertical-align: bottom; | ||
| } | ||
| .area { | ||
| position: absolute; | ||
| z-index: -1; | ||
| left: 0; | ||
| right: 0; | ||
| top: 0; | ||
| bottom: 0; | ||
| grid-column: 1 / 2; | ||
| grid-row: 1 / 3; | ||
| background: cyan; | ||
| } | ||
| </style> | ||
|
|
||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/resources/check-layout-th.js"></script> | ||
|
|
||
| <div id="log"></div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 0px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="75" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 75px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="75" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 88px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="88" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 100px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="100" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: auto;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="100" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| checkLayout(".grid"); | ||
| </script> |
91 changes: 91 additions & 0 deletions
91
css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-003.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title> | ||
| <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes"> | ||
| <meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area."> | ||
| <style> | ||
| .grid { | ||
| display: grid; | ||
| position: relative; | ||
| font-size: 0; | ||
| height: 0; | ||
| width: 0; | ||
| margin-bottom: 125px; | ||
| grid-template-columns: minmax(auto, var(--max-track-sizing-function)); | ||
| grid-template-rows: 50px 50px; | ||
| justify-items: baseline; | ||
| } | ||
| .item1, .item2 { | ||
| writing-mode: vertical-rl; | ||
| } | ||
| .item1 { | ||
| padding-left: 25px; | ||
| background: yellow; | ||
| } | ||
| .item2 { | ||
| padding-right: 25px; | ||
| background: magenta; | ||
| } | ||
| .item1::before, .item2::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 25px; | ||
| height: 25px; | ||
| vertical-align: top; | ||
| } | ||
| .item2::before { | ||
| vertical-align: bottom; | ||
| } | ||
| .area { | ||
| position: absolute; | ||
| z-index: -1; | ||
| left: 0; | ||
| right: 0; | ||
| top: 0; | ||
| bottom: 0; | ||
| grid-column: 1 / 2; | ||
| grid-row: 1 / 3; | ||
| background: cyan; | ||
| } | ||
| </style> | ||
|
|
||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/resources/check-layout-th.js"></script> | ||
|
|
||
| <div id="log"></div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 0px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="75" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 75px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="75" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 88px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="88" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: 100px;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="100" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <div class="grid" style="--max-track-sizing-function: auto;"> | ||
| <div class="item1" data-offset-x="0" data-offset-y="0"></div> | ||
| <div class="item2" data-offset-x="50" data-offset-y="50"></div> | ||
| <div class="area" data-expected-width="100" data-expected-height="100"></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| checkLayout(".grid"); | ||
| </script> |