summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests
diff options
context:
space:
mode:
authorrego@igalia.com <rego@igalia.com@bbb929c8-8fbe-4397-9dbb-9b2b20218538>2014-07-16 10:48:00 +0000
committerrego@igalia.com <rego@igalia.com@bbb929c8-8fbe-4397-9dbb-9b2b20218538>2014-07-16 10:48:00 +0000
commit54a32beb556ec6fb94d516e2949b80b14dd780a3 (patch)
treec0ca7bb291ab05bb0360f569146617bebf03f72c /third_party/WebKit/LayoutTests
parent45acb6c51852298925516e99e7592738c98e87b8 (diff)
downloadchromium_src-54a32beb556ec6fb94d516e2949b80b14dd780a3.zip
chromium_src-54a32beb556ec6fb94d516e2949b80b14dd780a3.tar.gz
chromium_src-54a32beb556ec6fb94d516e2949b80b14dd780a3.tar.bz2
[CSS Grid Layout] Support sparse in auto-placement algorithm
Sparse mode for auto-placement algorithm was not implemented yet. This patch implements sparse mode for auto-placement algorithm. It keeps track of the auto-placement cursor in RenderGrid::placeAutoMajorAxisItemsOnGrid() and updates it accordingly when auto-positioned items are placed. If we're in dense mode it resets the cursor after each item. GridIterator has been adapted to look for empty areas from a given position in both directions. Test cases have been adapted accordingly, adding new cases to cover both sparse and dense options. TEST=fast/css-grid-layout/grid-auto-flow-sparse.html BUG=384099 Review URL: https://codereview.chromium.org/362733002 git-svn-id: svn://svn.chromium.org/blink/trunk@178262 bbb929c8-8fbe-4397-9dbb-9b2b20218538
Diffstat (limited to 'third_party/WebKit/LayoutTests')
-rw-r--r--third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html4
-rw-r--r--third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse-expected.txt10
-rw-r--r--third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html109
-rw-r--r--third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html2
-rw-r--r--third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html2
-rw-r--r--third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html14
-rw-r--r--third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html4
-rw-r--r--third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html4
-rw-r--r--third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html4
-rw-r--r--third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid.css34
10 files changed, 167 insertions, 20 deletions
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html
index 49c9988..4d27afd 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html
@@ -76,7 +76,7 @@
</div>
<div class="unconstrainedContainer">
- <div class="grid bigGrid gridAutoFlowColumn">
+ <div class="grid bigGrid gridAutoFlowColumnDense">
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
@@ -86,7 +86,7 @@
</div>
<div class="unconstrainedContainer">
- <div class="grid bigGrid gridAutoFlowRow">
+ <div class="grid bigGrid gridAutoFlowRowDense">
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse-expected.txt b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse-expected.txt
new file mode 100644
index 0000000..52a64ad
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse-expected.txt
@@ -0,0 +1,10 @@
+This test checks that the auto-placement algorithm is sparse by default.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html
new file mode 100644
index 0000000..907b3ce
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ grid-template-columns: 50px 100px 150px 200px;
+ grid-template-rows: 50px 100px 150px 200px;
+}
+
+.unconstrainedContainer {
+ /* For accurate x / y offset. */
+ position: relative;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the auto-placement algorithm is sparse by default.</p>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="50" data-offset-y="50" data-expected-width="250" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning3" data-offset-x="50" data-offset-y="150" data-expected-width="450" data-expected-height="350"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="300" data-expected-width="50" data-expected-height="200"></div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+ <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid gridAutoFlowColumn">
+ <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="250"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid gridAutoFlowColumn">
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="300" data-expected-width="100" data-expected-height="200"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning3AutoColumnSpanning2" data-offset-x="150" data-offset-y="50" data-expected-width="350" data-expected-height="450"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid gridAutoFlowColumn">
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid gridAutoFlowColumn">
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html
index 95a67a3..a1305f5 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-explicit-grid-recompute-child.html
@@ -4,7 +4,7 @@
<script src="../../resources/check-layout.js"></script>
<style>
.grid {
- grid-auto-flow: row;
+ grid-auto-flow: row dense;
}
#firstGridItem {
grid-row: auto;
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html
index 1e0a755..b9840f2 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html
@@ -4,7 +4,7 @@
<script src="../../resources/check-layout.js"></script>
<style>
.grid {
- grid-auto-flow: row;
+ grid-auto-flow: row dense;
}
#firstGridItem {
grid-row: auto;
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html
index f8e96c3..930bbde 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html
@@ -15,12 +15,6 @@
grid-template-rows: 50px 100px (line) 200px (line);
}
-.autoRowAutoColumnSpanning2 {
- background-color: maroon;
- grid-column: span 2;
- grid-row: auto;
-}
-
.autoRowAutoColumnSpanning3 {
background-color: teal;
grid-column: span 3;
@@ -91,7 +85,7 @@
</div>
<div style="position: relative">
- <div class="grid gridAutoFlowRow">
+ <div class="grid gridAutoFlowRowDense">
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowThirdColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
@@ -119,7 +113,7 @@
</div>
<div style="position: relative">
- <div class="grid gridAutoFlowRow gridNamedGridLinesColumns">
+ <div class="grid gridAutoFlowRowDense gridNamedGridLinesColumns">
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
@@ -152,7 +146,7 @@
</div>
<div style="position: relative">
- <div class="grid gridAutoFlowColumn">
+ <div class="grid gridAutoFlowColumnDense">
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
@@ -180,7 +174,7 @@
</div>
<div style="position: relative">
- <div class="grid gridAutoFlowColumn gridNamedGridLinesRows">
+ <div class="grid gridAutoFlowColumnDense gridNamedGridLinesRows">
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html
index 35e2ae1..a12db68 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html
@@ -52,7 +52,7 @@
<p>Thist test checks that span is supported in auto-placement for definite positions.</p>
<div style="position: relative">
- <div class="grid gridAutoFlowRow">
+ <div class="grid gridAutoFlowRowDense">
<div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
@@ -72,7 +72,7 @@
</div>
<div style="position: relative">
- <div class="grid gridAutoFlowColumn">
+ <div class="grid gridAutoFlowColumnDense">
<div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
<div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html
index 5e7e4f2..4effae8 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html
@@ -77,7 +77,7 @@ window.addEventListener("load", testRemovals, false);
</div>
<div class="unconstrainedContainer">
- <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumnWithAutoItems">
+ <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAutoItems">
<div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea autoRowSecondColumn">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
@@ -87,7 +87,7 @@ window.addEventListener("load", testRemovals, false);
</div>
<div class="unconstrainedContainer">
- <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAutoAndFixedItems">
+ <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowWithAutoAndFixedItems">
<div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html
index f36175d..aa2cd93 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html
@@ -107,7 +107,7 @@
<!-- Check positioning using grid areas -->
<div style="position: relative">
- <div class="grid gridAreas gridNoLineNames">
+ <div class="grid gridAreas gridNoLineNames gridAutoFlowRowDense">
<div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
<div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
@@ -125,7 +125,7 @@
<!-- Use grid area's implicit line names if defined before explicitly named grid lines -->
<div style="position: relative">
- <div class="grid gridAreas gridWithNamedLineAfterGridArea">
+ <div class="grid gridAreas gridWithNamedLineAfterGridArea gridAutoFlowRowDense">
<div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
<div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid.css b/third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid.css
index e28c00e..ed2266e 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid.css
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid.css
@@ -122,19 +122,53 @@
grid-row: auto;
}
+.autoRowAutoColumnSpanning2 {
+ background-color: maroon;
+ grid-column: span 2;
+ grid-row: auto;
+}
+
+.autoRowSpanning2AutoColumn {
+ background-color: aqua;
+ grid-column: auto;
+ grid-row: span 2;
+}
+
+.autoRowSpanning2AutoColumnSpanning3 {
+ background-color: olive;
+ grid-column: span 3;
+ grid-row: span 2;
+}
+
+.autoRowSpanning3AutoColumnSpanning2 {
+ background-color: indigo;
+ grid-column: span 2;
+ grid-row: span 3;
+}
+
/* Grid element flow. */
.gridAutoFlowStack {
grid-auto-flow: stack;
}
+/* FIXME: Rename to gridAutoFlowColumnSparse to be more explicit about the algorithm mode by default. */
.gridAutoFlowColumn {
grid-auto-flow: column;
}
+.gridAutoFlowColumnDense {
+ grid-auto-flow: column dense;
+}
+
+/* FIXME: Rename to gridAutoFlowRowSparse to be more explicit about the algorithm mode by default. */
.gridAutoFlowRow {
grid-auto-flow: row;
}
+.gridAutoFlowRowDense {
+ grid-auto-flow: row dense;
+}
+
/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
.constrainedContainer {
width: 10px;
generated by cgit v1.1 at 2025-11-30 01:54:34 +0000