Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[GridNG] Do an additional pass when the min/max depends on block-size
As above. Previously legacy grid wasn't applying this rule directly, but if a grid was laid out twice, it'd use stale information to get the "correct" result on the 2nd layout pass. This fixed NG by explicity performing a 2nd pass. Added tests which quote the relevant part of the specification. Bug: 1045599, 1213878 Change-Id: Ia2e977356099642f3b6d1276bfcad0e201695541
- Loading branch information
1 parent
9f56af1
commit b85049c
Showing
3 changed files
with
64 additions
and
0 deletions.
There are no files selected for viewing
10 changes: 10 additions & 0 deletions
10
css/css-grid/grid-items/grid-item-inline-contribution-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,10 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview"> | ||
| <meta name="assert" content="Tests the min-content contribution is using the correct block-size."> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="display: inline-grid; background: green; height: 100px; grid-template-rows: 50px;"> | ||
| <div style="height: 100%;"> <!-- This height should resolve against 50px - not 100px --> | ||
| <canvas width="20" height="10" style="height: 100%;"> | ||
| </div> | ||
| </div> |
27 changes: 27 additions & 0 deletions
27
css/css-grid/grid-items/grid-item-inline-contribution-002.tentative.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,27 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview"> | ||
| <meta name="assert" content="Tests the min-content contribution is re-resolved during a 2nd pass."> | ||
| <!-- | ||
| " | ||
| Then, if the min-content contribution of any grid item has changed based on | ||
| the row sizes and alignment calculated in step 2, re-resolve the sizes of the | ||
| grid columns with the new min-content and max-content contributions (once | ||
| only). | ||
| " | ||
| In this testcase initially the row size is indefinite, then resolves to 100px. | ||
| Using this information we re-resolve the columns, resulting in 100px for the | ||
| first column. | ||
| --> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="display: grid; width: 0; grid-template: auto / auto auto;"> | ||
| <div style="background: green; height: 100%;"> | ||
| <canvas width="10" height="10" style="height: 100%;"> | ||
| </div> | ||
| <div> | ||
| <div style="height: 100px;"></div> | ||
| </div> | ||
| </div> |
27 changes: 27 additions & 0 deletions
27
css/css-grid/grid-items/grid-item-inline-contribution-003.tentative.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,27 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview"> | ||
| <meta name="assert" content="Tests the min-content contribution is re-resolved during a 2nd pass."> | ||
| <!-- | ||
| " | ||
| Then, if the min-content contribution of any grid item has changed based on | ||
| the row sizes and alignment calculated in step 2, re-resolve the sizes of the | ||
| grid columns with the new min-content and max-content contributions (once | ||
| only). | ||
| " | ||
| In this testcase initially the row size is indefinite, then resolves to 100px. | ||
| Using this information we re-resolve the columns, resulting in 100px for the | ||
| first column. | ||
| --> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="display: grid; width: 0; grid-template: auto / auto auto;"> | ||
| <div style="background: green;"> <!-- Has stretch alignment which the child should resolve against. --> | ||
| <canvas width="10" height="10" style="height: 100%;"> | ||
| </div> | ||
| <div> | ||
| <div style="height: 100px;"></div> | ||
| </div> | ||
| </div> |