forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Grid] Honor the specified width of a subgrid in its contribution size
1. Fixing the behavior of `GridLayoutAlgorithm` where the contribution size of a subgrid in its standalone axis would ignore its specified `width` and `[min|max]-width`, always using its intrinsic sizes. This caused the columns of a subgrid to be sized incorrectly, while the actual layout of the subgrid would not match its grid area. 2. Adding test coverage to the WPT suite for this issue. Bug: 1475008 Change-Id: I5b22891cba49c85d3ca7d3a6a83f4514a492ae38 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5109555 Reviewed-by: Ian Kilpatrick <[email protected]> Commit-Queue: Ethan Jimenez <[email protected]> Reviewed-by: Alison Maher <[email protected]> Reviewed-by: Kurt Catti-Schmidt <[email protected]> Cr-Commit-Position: refs/heads/main@{#1237829}
- Loading branch information
1 parent
0bd1bde
commit e6e4ce2
Showing
4 changed files
with
118 additions
and
0 deletions.
There are no files selected for viewing
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,25 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Test: Subgrid contribution size on standalone axis</title> | ||
| <link rel="author" title="Ethan Jimenez" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| .grid { | ||
| background: green; | ||
| display: inline-grid; | ||
| grid-template-rows: 100px; | ||
| } | ||
| .subgrid { | ||
| width: 100px; | ||
| display: grid; | ||
| grid-template-rows: subgrid; | ||
| } | ||
| .w200 { width: 200px } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div class="grid"> | ||
| <div class="subgrid"> | ||
| <div class="w200"></div> | ||
| </div> | ||
| </div> |
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,25 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Test: Subgrid contribution size on standalone axis</title> | ||
| <link rel="author" title="Ethan Jimenez" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| .grid { | ||
| display: inline-grid; | ||
| grid-template: 100px / minmax(auto, 100px); | ||
| } | ||
| .subgrid { | ||
| width: 100%; | ||
| display: grid; | ||
| background: green; | ||
| grid-template-rows: subgrid; | ||
| } | ||
| .w200 { width: 200px } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div class="grid"> | ||
| <div class="subgrid"> | ||
| <div class="w200"></div> | ||
| </div> | ||
| </div> |
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,34 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Test: Subgrid contribution size on standalone axis</title> | ||
| <link rel="author" title="Ethan Jimenez" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| .grid { | ||
| display: grid; | ||
| background: red; | ||
| width: max-content; | ||
| grid-template-columns: minmax(min-content, max-content); | ||
| } | ||
| .subgrid { | ||
| display: grid; | ||
| background: green; | ||
| width: min-content; | ||
| grid-template-rows: subgrid; | ||
| } | ||
| .w100 { | ||
| display: inline-block; | ||
| height: 50px; | ||
| width: 100px; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div class="grid"> | ||
| <div class="subgrid"> | ||
| <div style="font-size: 0"> | ||
| <div class="w100"></div> | ||
| <div class="w100"></div> | ||
| </div> | ||
| </div> | ||
| </div> |
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,34 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Test: Subgrid contribution size on standalone axis</title> | ||
| <link rel="author" title="Ethan Jimenez" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| .grid { | ||
| display: grid; | ||
| background: red; | ||
| width: min-content; | ||
| } | ||
| .subgrid { | ||
| display: grid; | ||
| background: green; | ||
| max-width: 100px; | ||
| width: max-content; | ||
| grid-template-rows: subgrid; | ||
| } | ||
| .w100 { | ||
| display: inline-block; | ||
| height: 50px; | ||
| width: 100px; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div class="grid"> | ||
| <div class="subgrid"> | ||
| <div style="font-size: 0"> | ||
| <div class="w100"></div> | ||
| <div class="w100"></div> | ||
| </div> | ||
| </div> | ||
| </div> |