-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
css-grid] Update a few WPT / reftests to new percentage row-gap layout.
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1458902 gecko-commit: 3239e0d823ff6fc85adda2b0c036f8b53c866fbf gecko-integration-branch: mozilla-inbound gecko-reviewers: dholbert
- Loading branch information
1 parent
15b8e55
commit 7f56040
Showing
4 changed files
with
56 additions
and
55 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 |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Layout Test: Support for percentage values for gap with no defined height for the grid</title> | ||
| <title>CSS Grid Layout Test: Support for percentage values for gap with indefinite percentage basis</title> | ||
| <link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> | ||
| <link rel="match" href="../reference/grid-collapsed-row-gutters-ref.html"> | ||
| <link rel="match" href="../reference/grid-percentage-gap-ref.html"> | ||
| <link rel="author" title="Rachel Andrew" href="mailto:[email protected]"> | ||
| <style> | ||
| #grid { | ||
|
|
@@ -13,17 +13,24 @@ | |
| grid-template-columns: 90px 90px; | ||
| grid-template-rows: 90px 90px; | ||
| background-color: green; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| #grid > div { | ||
| background-color: silver; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should resolve to auto, and therefore collapse to 0 height.</p> | ||
| <p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should be percentage of height.</p> | ||
| <div id="grid"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
| <div id="grid" style="display:inline-grid; width:auto; gap:calc(20px + 5%)"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></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 |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Layout Test: Support for percentage values for grid-gap with no defined height for the grid as alias for gap</title> | ||
| <title>CSS Grid Layout Test: Support for percentage values for grid-gap with indefinite percentage basis</title> | ||
| <link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters"> | ||
| <link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand"> | ||
| <link rel="match" href="../reference/grid-collapsed-row-gutters-ref.html"> | ||
| <link rel="match" href="../reference/grid-percentage-gap-ref.html"> | ||
| <link rel="author" title="Rachel Andrew" href="mailto:[email protected]"> | ||
| <style> | ||
| #grid { | ||
|
|
@@ -13,17 +13,24 @@ | |
| grid-template-columns: 90px 90px; | ||
| grid-template-rows: 90px 90px; | ||
| background-color: green; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| #grid > div { | ||
| background-color: silver; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should resolve to auto, and therefore collapse to 0 height.</p> | ||
| <p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should be percentage of height.</p> | ||
| <div id="grid"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
| <div id="grid" style="display:inline-grid; width:auto; grid-gap:calc(20px + 5%)"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
47 changes: 0 additions & 47 deletions
47
css/css-grid/reference/grid-collapsed-row-gutters-ref.html
This file was deleted.
Oops, something went wrong.
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 Layout Reference: percentage grid gaps</title> | ||
| <link rel="author" title="Rachel Andrew" href="mailto:[email protected]" /> | ||
| <style> | ||
| .grid { | ||
| width:200px; | ||
| height: 180px; | ||
| background-color: green; | ||
| position: relative; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .grid > div { | ||
| background-color: silver; | ||
| width: 90px; | ||
| height: 90px; | ||
| position: absolute; | ||
| } | ||
| </style> | ||
|
|
||
| <p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should be percentage of height.</p> | ||
| <div class="grid"> | ||
| <div style="top:0; left:0"></div> | ||
| <div style="top:0; left:110px"></div> | ||
| <div style="top:108px; left:0"></div> | ||
| <div style="top:108px; left:110px"></div> | ||
| </div> | ||
| <div class="grid" style="height:200px"> | ||
| <div style="top:0; left:0"></div> | ||
| <div style="top:0; left:120px"></div> | ||
| <div style="top:120px; left:0"></div> | ||
| <div style="top:120px; left:120px"></div> | ||
| </div> |