[CSS Grid Layout] Rename gridAutoFlow[Row|Column] to gridAutoFlow[Row|Column]Sparse
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 21 Jul 2014 07:46:35 +0000 (07:46 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 21 Jul 2014 07:46:35 +0000 (07:46 +0000)
https://bugs.webkit.org/show_bug.cgi?id=135013

Rename CSS styles in grid layout tests to make the name more explicit.
As the default mode for auto-placement algorithm is "sparse".

Reviewed by Darin Adler.

* fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution.html:
* fast/css-grid-layout/grid-auto-flow-get-set-expected.txt:
* fast/css-grid-layout/grid-auto-flow-get-set.html:
* fast/css-grid-layout/grid-auto-flow-resolution.html:
* fast/css-grid-layout/grid-auto-flow-sparse.html:
* fast/css-grid-layout/grid-item-addition-auto-placement-update.html:
* fast/css-grid-layout/grid-item-auto-placement-automatic-span.html:
* fast/css-grid-layout/grid-item-auto-placement-definite-span.html:
* fast/css-grid-layout/grid-item-order-auto-flow-resolution.html:
* fast/css-grid-layout/grid-item-removal-auto-placement-update.html:
* fast/css-grid-layout/resources/grid.css:
(.gridAutoFlowColumnSparse):
(.gridAutoFlowRowSparse):
(.gridAutoFlowColumn): Deleted.
(.gridAutoFlowRow): Deleted.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@171293 268f45cc-cd09-0410-ab3c-d52691b4dbfc

12 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution.html
LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt
LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html
LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html
LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html
LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html
LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html
LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html
LayoutTests/fast/css-grid-layout/grid-item-order-auto-flow-resolution.html
LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html
LayoutTests/fast/css-grid-layout/resources/grid.css

index 239fa41..d65a7ac 100644 (file)
@@ -1,3 +1,29 @@
+2014-07-21  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Rename gridAutoFlow[Row|Column] to gridAutoFlow[Row|Column]Sparse
+        https://bugs.webkit.org/show_bug.cgi?id=135013
+
+        Rename CSS styles in grid layout tests to make the name more explicit.
+        As the default mode for auto-placement algorithm is "sparse".
+
+        Reviewed by Darin Adler.
+
+        * fast/css-grid-layout/grid-auto-columns-rows-auto-flow-resolution.html:
+        * fast/css-grid-layout/grid-auto-flow-get-set-expected.txt:
+        * fast/css-grid-layout/grid-auto-flow-get-set.html:
+        * fast/css-grid-layout/grid-auto-flow-resolution.html:
+        * fast/css-grid-layout/grid-auto-flow-sparse.html:
+        * fast/css-grid-layout/grid-item-addition-auto-placement-update.html:
+        * fast/css-grid-layout/grid-item-auto-placement-automatic-span.html:
+        * fast/css-grid-layout/grid-item-auto-placement-definite-span.html:
+        * fast/css-grid-layout/grid-item-order-auto-flow-resolution.html:
+        * fast/css-grid-layout/grid-item-removal-auto-placement-update.html:
+        * fast/css-grid-layout/resources/grid.css:
+        (.gridAutoFlowColumnSparse):
+        (.gridAutoFlowRowSparse):
+        (.gridAutoFlowColumn): Deleted.
+        (.gridAutoFlowRow): Deleted.
+
 2014-07-20  Diego Pino Garcia  <dpino@igalia.com>
 
         ES6: Implement Math.sign()
index 7d752d0..22d97be 100644 (file)
 <div>This test checks that grid rows / columns created via the auto-placement algorithm do follow, grid-auto-{rows|columns}.</div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoFixedFixed gridAutoFlowRow">
+    <div class="grid gridAutoFixedFixed gridAutoFlowRowSparse">
         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoFixedFixed gridAutoFlowColumn">
+    <div class="grid gridAutoFixedFixed gridAutoFlowColumnSparse">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoFixedFixed gridAutoFlowRow">
+    <div class="grid gridAutoFixedFixed gridAutoFlowRowSparse">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoFixedFixed gridAutoFlowColumn">
+    <div class="grid gridAutoFixedFixed gridAutoFlowColumnSparse">
         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoMinMax gridAutoFlowRow">
+    <div class="grid gridAutoMinMax gridAutoFlowRowSparse">
         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoMinMax gridAutoFlowColumn">
+    <div class="grid gridAutoMinMax gridAutoFlowColumnSparse">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoMinMax gridAutoFlowRow">
+    <div class="grid gridAutoMinMax gridAutoFlowRowSparse">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoMinMax gridAutoFlowColumn">
+    <div class="grid gridAutoMinMax gridAutoFlowColumnSparse">
         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoMinMaxContent gridAutoFlowRow">
+    <div class="grid gridAutoMinMaxContent gridAutoFlowRowSparse">
         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoMinMaxContent gridAutoFlowColumn">
+    <div class="grid gridAutoMinMaxContent gridAutoFlowColumnSparse">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoMinMaxContent gridAutoFlowRow">
+    <div class="grid gridAutoMinMaxContent gridAutoFlowRowSparse">
         <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
 </div>
 
 <div class="unconstrainedContainer" style="position: relative">
-    <div class="grid gridAutoMinMaxContent gridAutoFlowColumn">
+    <div class="grid gridAutoMinMaxContent gridAutoFlowColumnSparse">
         <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5"></div>
     </div>
index f6b63b2..770517c 100644 (file)
@@ -4,8 +4,8 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Test getting -webkit-grid-auto-flow set through CSS
-PASS window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
-PASS window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowColumnSparse, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
+PASS window.getComputedStyle(gridAutoFlowRowSparse, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 PASS window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
 PASS window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
 PASS window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
index 798ee7f..33b0df5 100644 (file)
@@ -63,8 +63,8 @@
 </head>
 <body>
 <div class="grid" id="gridInitial"></div>
-<div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div>
-<div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div>
+<div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse"></div>
+<div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse"></div>
 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div>
 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div>
 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div>
 <div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div>
 <div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div>
 <div class="grid gridAutoFlowRowStack" id="gridAutoFlowRowStack"></div>
-<div class="grid gridAutoFlowColumn">
+<div class="grid gridAutoFlowColumnSparse">
     <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div>
 </div>
-<div class="grid gridAutoFlowColumn">
+<div class="grid gridAutoFlowColumnSparse">
     <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div><div>
 </div>
 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div>
@@ -94,8 +94,8 @@
     description('Test that setting and getting -webkit-grid-auto-flow works as expected');
 
     debug("Test getting -webkit-grid-auto-flow set through CSS");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowColumn", "column");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowRow", "row");
+    checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column");
+    checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row");
     checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense");
     checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense");
     checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense");
index 75acd24..cbfd94d 100644 (file)
@@ -56,7 +56,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumn">
+    <div class="grid bigGrid gridAutoFlowColumnSparse">
         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100">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 secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
@@ -66,7 +66,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRow">
+    <div class="grid bigGrid gridAutoFlowRowSparse">
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">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 secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
@@ -76,7 +76,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumn">
+    <div class="grid bigGrid gridAutoFlowColumnSparse">
         <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>
@@ -96,7 +96,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRow">
+    <div class="grid bigGrid gridAutoFlowRowSparse">
         <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>
 
 <!-- Using some 2 positions non-spanning fixed grid-{row|column} -->
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumn">
+    <div class="grid bigGrid gridAutoFlowColumnSparse">
         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-offset-x="300" data-offset-y="300" data-expected-width="200" data-expected-height="200">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstAutoRowSecondAutoColumn" 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>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRow">
+    <div class="grid bigGrid gridAutoFlowRowSparse">
         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-offset-x="300" data-offset-y="300" data-expected-width="200" data-expected-height="200">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstAutoRowSecondAutoColumn" 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>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumn">
+    <div class="grid bigGrid gridAutoFlowColumnSparse">
         <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="500" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRow">
+    <div class="grid bigGrid gridAutoFlowRowSparse">
         <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0" data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="500" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowColumn">
+    <div class="grid bigGrid gridAutoFlowColumnSparse">
         <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid bigGrid gridAutoFlowRow">
+    <div class="grid bigGrid gridAutoFlowRowSparse">
         <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
     </div>
index 8cc80f1..dbba0c8 100644 (file)
@@ -42,7 +42,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowColumn">
+    <div class="grid gridAutoFlowColumnSparse">
         <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>
@@ -53,7 +53,7 @@
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowColumn">
+    <div class="grid gridAutoFlowColumnSparse">
         <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>
index 4785d6b..d57478d 100644 (file)
@@ -26,17 +26,17 @@ function testAddition(gridElementID, position, autoFlowElementID, size)
 
 function testAdditions()
 {
-    checkLayout("#gridAutoFlowColumn");
-    testAddition("gridAutoFlowColumn", { 'row': '1', 'column': '1' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
-    testAddition("gridAutoFlowColumn", { 'row': '1', 'column': '2' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
-    testAddition("gridAutoFlowColumn", { 'row': '2', 'column': '2' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
-    testAddition("gridAutoFlowColumn", { 'row': '2', 'column': '1' }, "autoFlowColumnElement", { 'width': '170', 'height': '50' });
+    checkLayout("#gridAutoFlowColumnSparse");
+    testAddition("gridAutoFlowColumnSparse", { 'row': '1', 'column': '1' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
+    testAddition("gridAutoFlowColumnSparse", { 'row': '1', 'column': '2' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
+    testAddition("gridAutoFlowColumnSparse", { 'row': '2', 'column': '2' }, "autoFlowColumnElement", { 'width': '50', 'height': '100' });
+    testAddition("gridAutoFlowColumnSparse", { 'row': '2', 'column': '1' }, "autoFlowColumnElement", { 'width': '170', 'height': '50' });
 
-    checkLayout("#gridAutoFlowRow");
-    testAddition("gridAutoFlowRow", { 'row': '1', 'column': '1' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
-    testAddition("gridAutoFlowRow", { 'row': '2', 'column': '1' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
-    testAddition("gridAutoFlowRow", { 'row': '2', 'column': '2' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
-    testAddition("gridAutoFlowRow", { 'row': '1', 'column': '2' }, "autoFlowRowElement", { 'width': '50', 'height': '30' });
+    checkLayout("#gridAutoFlowRowSparse");
+    testAddition("gridAutoFlowRowSparse", { 'row': '1', 'column': '1' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
+    testAddition("gridAutoFlowRowSparse", { 'row': '2', 'column': '1' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
+    testAddition("gridAutoFlowRowSparse", { 'row': '2', 'column': '2' }, "autoFlowRowElement", { 'width': '100', 'height': '50' });
+    testAddition("gridAutoFlowRowSparse", { 'row': '1', 'column': '2' }, "autoFlowRowElement", { 'width': '50', 'height': '30' });
 
     checkLayout("#gridAutoFlowColumnWithAuto");
     testAddition("gridAutoFlowColumnWithAuto", { 'row': 'auto', 'column': '1' }, "autoFlowColumnElementWithAuto", { 'width': '50', 'height': '100' });
@@ -57,25 +57,25 @@ window.addEventListener("load", testAdditions, false);
 <p>This test checks that the tracks' auto positions are recomputed after adding a grid item.</p>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn">
+    <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse">
         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowRow" id="gridAutoFlowRow">
+    <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse">
         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumnWithAuto">
+    <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnWithAuto">
         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElementWithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAuto">
+    <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowWithAuto">
         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAuto" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
     </div>
 </div>
index e3afa61..3a17b04 100644 (file)
@@ -69,7 +69,7 @@
 <p>Thist test checks that span is supported in auto-placement for automatic positions.</p>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowRow">
+    <div class="grid gridAutoFlowRowSparse">
         <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
 </div>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowRow">
+    <div class="grid gridAutoFlowRowSparse">
         <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>
 </div>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowRow">
+    <div class="grid gridAutoFlowRowSparse">
         <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></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>
 </div>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowRow gridNamedGridLinesColumns">
+    <div class="grid gridAutoFlowRowSparse 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>
 </div>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowColumn">
+    <div class="grid gridAutoFlowColumnSparse">
         <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
         <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
 </div>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowColumn">
+    <div class="grid gridAutoFlowColumnSparse">
         <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>
 </div>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowColumn">
+    <div class="grid gridAutoFlowColumnSparse">
         <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" 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>
 </div>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowColumn gridNamedGridLinesRows">
+    <div class="grid gridAutoFlowColumnSparse 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>
index 63f210a..0b8e857 100644 (file)
@@ -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 gridAutoFlowRowSparse">
         <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>
@@ -71,7 +71,7 @@
 </div>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowRow">
+    <div class="grid gridAutoFlowRowSparse">
         <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>
@@ -91,7 +91,7 @@
 </div>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowColumn">
+    <div class="grid gridAutoFlowColumnSparse">
         <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>
 </div>
 
 <div style="position: relative">
-    <div class="grid gridAutoFlowColumn">
+    <div class="grid gridAutoFlowColumnSparse">
         <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>
index b6d0263..d57afe2 100644 (file)
 
     <!-- Step 1, grid item with a major-axis position that is not 'auto'. -->
     <div style="position: relative">
-        <div class="grid gridAutoFlowRow">
+        <div class="grid gridAutoFlowRowSparse">
             <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
             <div class="sizedToGridArea firstRowAutoColumn negativeOrder" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
         </div>
     </div>
 
     <div style="position: relative">
-        <div class="grid gridAutoFlowRow">
+        <div class="grid gridAutoFlowRowSparse">
             <div class="sizedToGridArea firstRowAutoColumn positiveOrder" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
             <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
         </div>
 
     <!-- Step 4.1, grid items with a minor-axis position that is not 'auto'. -->
     <div style="position: relative">
-        <div class="grid gridAutoFlowColumn">
+        <div class="grid gridAutoFlowColumnSparse">
             <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
             <div class="sizedToGridArea secondRowAutoColumn negativeOrder" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
         </div>
     </div>
 
     <div style="position: relative">
-        <div class="grid gridAutoFlowColumn">
+        <div class="grid gridAutoFlowColumnSparse">
             <div class="sizedToGridArea secondRowAutoColumn positiveOrder" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
             <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
         </div>
 
     <!-- Step 4.2, both minor and major-axis position are 'auto'. -->
     <div style="position: relative">
-        <div class="grid gridAutoFlowColumn">
+        <div class="grid gridAutoFlowColumnSparse">
             <div class="sizedToGridArea" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
             <div class="sizedToGridArea negativeOrder" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
         </div>
     </div>
 
     <div style="position: relative">
-        <div class="grid gridAutoFlowColumn">
+        <div class="grid gridAutoFlowColumnSparse">
             <div class="sizedToGridArea positiveOrder" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
             <div class="sizedToGridArea" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
         </div>
index 6f39d40..249ac68 100644 (file)
@@ -25,17 +25,17 @@ function testRemoval(gridElementID, autoFlowElementID, size)
 
 function testRemovals()
 {
-    checkLayout("#gridAutoFlowColumn");
-    testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '100' });
-    testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '50' });
-    testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '100' });
-    testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '50' });
+    checkLayout("#gridAutoFlowColumnSparse");
+    testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '100', 'height': '100' });
+    testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '100', 'height': '50' });
+    testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '50', 'height': '100' });
+    testRemoval("gridAutoFlowColumnSparse", "autoFlowColumnElement", { 'width': '50', 'height': '50' });
 
-    checkLayout("#gridAutoFlowRow");
-    testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'height': '100' });
-    testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'height': '50' });
-    testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'height': '50' });
-    testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'height': '50' });
+    checkLayout("#gridAutoFlowRowSparse");
+    testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '100', 'height': '100' });
+    testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '100', 'height': '50' });
+    testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '50', 'height': '50' });
+    testRemoval("gridAutoFlowRowSparse", "autoFlowRowElement", { 'width': '50', 'height': '50' });
 
     checkLayout("#gridAutoFlowColumnWithAutoItems");
     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '100' });
@@ -56,7 +56,7 @@ window.addEventListener("load", testRemovals, false);
 <p>This test checks that the tracks' auto positions are recomputed after removing a grid item.</p>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn">
+    <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse">
         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
@@ -66,7 +66,7 @@ window.addEventListener("load", testRemovals, false);
 </div>
 
 <div class="unconstrainedContainer">
-    <div class="grid gridAutoFlowRow" id="gridAutoFlowRow">
+    <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse">
         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
         <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
index aa78f23..6043a8c 100644 (file)
     -webkit-grid-auto-flow: stack;
 }
 
-.gridAutoFlowColumn {
+.gridAutoFlowColumnSparse {
     -webkit-grid-auto-flow: column;
 }
 
     -webkit-grid-auto-flow: column dense;
 }
 
-.gridAutoFlowRow {
+.gridAutoFlowRowSparse {
     -webkit-grid-auto-flow: row;
 }