[CSS Grid Layout] Remove stack from grid-auto-flow syntax
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Jan 2015 10:01:11 +0000 (10:01 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Jan 2015 10:01:11 +0000 (10:01 +0000)
https://bugs.webkit.org/show_bug.cgi?id=134842

Reviewed by Sergio Villar Senin.

Source/WebCore:

"stack" mode for grid-auto-flow property has been removed from the grid
layout spec. New syntax is:
  [ row | column ] || dense

Modified parsing in order to adapt it to the new syntax.

Also the current behavior relying on "stack" has been updated following
the spec. Now it won't be possible to mimic the old "none" (or "stack")
unless you specify manually the grid-placement properties.

No new tests needed, updated current tests to adapt them to the new
behavior.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue): Adapt to new syntax.
* css/CSSParser.cpp:
(WebCore::isValidGridAutoFlowId): Remove "stack" from valid ids.
(WebCore::CSSParser::parseGridAutoFlow): Adapt to new syntax.
* css/CSSValueKeywords.in: Remove "stack".
* css/StyleResolver.cpp:
(WebCore::StyleResolver::applyProperty): Adapt to new syntax.
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::placeItemsOnGrid): Remove old "stack" code.
* rendering/style/GridResolvedPosition.cpp:
(WebCore::GridResolvedPosition::resolveGridPositionsFromStyle): If we
cannot resolve positions, we have to run the auto-placement algorithm.
* rendering/style/RenderStyle.h: Remove "stack".
* rendering/style/RenderStyleConstants.h: Ditto.

LayoutTests:

Update layout tests in order to adapt the results to the new behavior.

* 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-update.html:
* fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
* fast/css-grid-layout/grid-item-z-index-change-repaint.html:
* fast/css-grid-layout/grid-item-z-index-stacking-context.html:
* fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
* fast/css-grid-layout/grid-shorthand-get-set.html:
* fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html:
* fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
* ietestcenter/css3/grid/grid-column-001.htm:
* ietestcenter/css3/grid/grid-column-002.htm:
* ietestcenter/css3/grid/grid-column-003.htm:

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

23 files changed:
LayoutTests/ChangeLog
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-update.html
LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html
LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint.html
LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html
LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt
LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html
LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html
LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html
LayoutTests/ietestcenter/css3/grid/grid-column-001.htm
LayoutTests/ietestcenter/css3/grid/grid-column-002.htm
LayoutTests/ietestcenter/css3/grid/grid-column-003.htm
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/style/GridResolvedPosition.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/RenderStyleConstants.h

index 9aebcc2..60a7555 100644 (file)
@@ -1,3 +1,26 @@
+2015-01-02  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Remove stack from grid-auto-flow syntax
+        https://bugs.webkit.org/show_bug.cgi?id=134842
+
+        Reviewed by Sergio Villar Senin.
+
+        Update layout tests in order to adapt the results to the new behavior.
+
+        * 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-update.html:
+        * fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
+        * fast/css-grid-layout/grid-item-z-index-change-repaint.html:
+        * fast/css-grid-layout/grid-item-z-index-stacking-context.html:
+        * fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
+        * fast/css-grid-layout/grid-shorthand-get-set.html:
+        * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html:
+        * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
+        * ietestcenter/css3/grid/grid-column-001.htm:
+        * ietestcenter/css3/grid/grid-column-002.htm:
+        * ietestcenter/css3/grid/grid-column-003.htm:
+
 2015-01-01  Yusuke Suzuki  <utatane.tea@gmail.com>
 
         String includes methods perform toString on searchString before toInteger on a offset
index 770517c..49c0cbd 100644 (file)
@@ -6,15 +6,11 @@ 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(gridAutoFlowColumnSparse, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
 PASS window.getComputedStyle(gridAutoFlowRowSparse, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
 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'
 PASS window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
-PASS window.getComputedStyle(gridAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
-PASS window.getComputedStyle(gridAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
-PASS window.getComputedStyle(gridAutoFlowStackRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
-PASS window.getComputedStyle(gridAutoFlowColumnStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
-PASS window.getComputedStyle(gridAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
 PASS window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
 PASS window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 
@@ -22,12 +18,9 @@ Test getting -webkit-grid-auto-flow bad values set through CSS
 PASS window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 PASS window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 PASS window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 PASS window.getComputedStyle(gridAutoFlowColumnFoo, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 PASS window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowDenseColumnStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowDenseRowStack, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS window.getComputedStyle(gridAutoFlowStackRowRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
+PASS window.getComputedStyle(gridAutoFlowDenseRowRow, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 
 Test the initial value
 PASS element.style.webkitGridAutoFlow is ''
@@ -40,22 +33,14 @@ PASS element.style.webkitGridAutoFlow is 'column dense'
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
 PASS element.style.webkitGridAutoFlow is 'row dense'
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
+PASS element.style.webkitGridAutoFlow is 'row dense'
+PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
 PASS element.style.webkitGridAutoFlow is 'column dense'
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column dense'
 PASS element.style.webkitGridAutoFlow is 'row dense'
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row dense'
 PASS element.style.webkitGridAutoFlow is 'row'
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS element.style.webkitGridAutoFlow is 'row stack'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
-PASS element.style.webkitGridAutoFlow is 'column stack'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
-PASS element.style.webkitGridAutoFlow is 'row stack'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
-PASS element.style.webkitGridAutoFlow is 'column stack'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column stack'
-PASS element.style.webkitGridAutoFlow is 'row stack'
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row stack'
 
 Test getting and setting bad values for -webkit-grid-auto-flow through JS
 PASS element.style.webkitGridAutoFlow is ''
@@ -64,12 +49,6 @@ PASS element.style.webkitGridAutoFlow is ''
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 PASS element.style.webkitGridAutoFlow is ''
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS element.style.webkitGridAutoFlow is ''
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS element.style.webkitGridAutoFlow is ''
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
-PASS element.style.webkitGridAutoFlow is ''
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 
 Test setting -webkit-grid-auto-flow to 'initial' through JS
 PASS element.style.webkitGridAutoFlow is 'initial'
index 33b0df5..9355d0c 100644 (file)
@@ -3,6 +3,9 @@
 <head>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
+.gridAutoFlowDense {
+    -webkit-grid-auto-flow: dense;
+}
 .gridAutoFlowColumnDense {
     -webkit-grid-auto-flow: column dense;
 }
 .gridAutoFlowDenseRow {
     -webkit-grid-auto-flow: dense row;
 }
-.gridAutoFlowStackColumn {
-    -webkit-grid-auto-flow: stack column;
-}
-.gridAutoFlowStackRow {
-    -webkit-grid-auto-flow: stack row;
-}
-.gridAutoFlowColumnStack {
-    -webkit-grid-auto-flow: column stack;
-}
-.gridAutoFlowRowStack {
-    -webkit-grid-auto-flow: row stack;
-}
 .gridAutoFlowInherit {
     -webkit-grid-auto-flow: inherit;
 }
 .gridAutoFlowColumns {
     -webkit-grid-auto-flow: columns;
 }
-.gridAutoFlowDense {
-    -webkit-grid-auto-flow: dense;
-}
 .gridAutoFlowColumnFoo {
     -webkit-grid-auto-flow: column foo;
 }
 .gridAutoFlowColumnColumn {
     -webkit-grid-auto-flow: column column;
 }
-.gridAutoFlowDenseColumnStack {
-    -webkit-grid-auto-flow: dense column stack;
-}
-.gridAutoFlowDenseRowStack {
-    -webkit-grid-auto-flow: dense row stack;
-}
-.gridAutoFlowStackRowRow {
-    -webkit-grid-auto-flow: stack row row;
+.gridAutoFlowDenseRowRow {
+    -webkit-grid-auto-flow: dense row row;
 }
 </style>
 <script src="../../resources/js-test-pre.js"></script>
 <div class="grid" id="gridInitial"></div>
 <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse"></div>
 <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse"></div>
+<div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></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 gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div>
-<div class="grid gridAutoFlowStack" id="gridAutoFlowStack"></div>
-<div class="grid gridAutoFlowStackColumn" id="gridAutoFlowStackColumn"></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 gridAutoFlowColumnSparse">
     <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div>
 </div>
 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div>
 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div>
 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div>
-<div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div>
 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div>
 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div>
-<div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack"></div>
-<div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div>
-<div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div>
+<div class="grid gridAutoFlowDenseRowRow" id="gridAutoFlowDenseRowRow"></div>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script>
     description('Test that setting and getting -webkit-grid-auto-flow works as expected');
     debug("Test getting -webkit-grid-auto-flow set through CSS");
     checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column");
     checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row");
+    checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row dense");
     checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense");
     checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense");
     checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense");
     checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "row dense");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowStack", "row stack");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowStackColumn", "column stack");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowStackRow", "row stack");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowColumnStack", "column stack");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowRowStack", "row stack");
     checkGridAutoFlowSetCSSValue("gridAutoFlowInherit", "column");
     checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row");
 
     checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row");
     checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row");
     checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row");
     checkGridAutoFlowSetCSSValue("gridAutoFlowColumnFoo", "row");
     checkGridAutoFlowSetCSSValue("gridAutoFlowColumnColumn", "row");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumnStack", "row");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRowStack", "row");
-    checkGridAutoFlowSetCSSValue("gridAutoFlowStackRowRow", "row");
+    checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRowRow", "row");
 
     debug("");
     debug("Test the initial value");
     debug("Test getting and setting -webkit-grid-auto-flow through JS");
     checkGridAutoFlowSetJSValue("column", "column", "column");
     checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense");
+    checkGridAutoFlowSetJSValue("dense", "row dense", "row dense");
     checkGridAutoFlowSetJSValue("row dense", "row dense", "row dense");
     checkGridAutoFlowSetJSValue("dense column", "column dense", "column dense");
     checkGridAutoFlowSetJSValue("dense row", "row dense", "row dense");
     checkGridAutoFlowSetJSValue("row", "row", "row");
-    checkGridAutoFlowSetJSValue("stack", "row stack", "row stack");
-    checkGridAutoFlowSetJSValue("stack column", "column stack", "column stack");
-    checkGridAutoFlowSetJSValue("stack row", "row stack", "row stack");
-    checkGridAutoFlowSetJSValue("column stack", "column stack", "column stack");
-    checkGridAutoFlowSetJSValue("row stack", "row stack", "row stack");
 
     debug("");
     debug("Test getting and setting bad values for -webkit-grid-auto-flow through JS");
     checkGridAutoFlowSetJSValue("noone", "", "row");
-    checkGridAutoFlowSetJSValue("dense", "", "row");
     checkGridAutoFlowSetJSValue("column column", "", "row");
-    checkGridAutoFlowSetJSValue("dense column stack", "", "row");
-    checkGridAutoFlowSetJSValue("dense row stack", "", "row");
-    checkGridAutoFlowSetJSValue("stack row row", "", "row");
+    checkGridAutoFlowSetJSValue("dense row row", "", "row");
 
     debug("");
     debug("Test setting -webkit-grid-auto-flow to 'initial' through JS");
index abfb8d4..b453eb4 100644 (file)
@@ -26,7 +26,7 @@ function updateAutoFlow()
     checkLayout(".grid");
 
     testGrid("column", { 'offsetX': '0', 'offsetY': '50', 'width': '50', 'height': '100' });
-    testGrid("stack", { 'offsetX': '0', 'offsetY': '0', 'width': '50', 'height': '50' });
+    testGrid("dense", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height': '50' });
     testGrid("", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height': '50' });
     testGrid("invalid", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height': '50' });
     testGrid("none", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height': '50' });
index 8ae8b0c..60cc1bc 100644 (file)
@@ -4,7 +4,7 @@
 <link href="resources/grid.css" rel="stylesheet"/>
 <style>
 .grid {
-    -webkit-grid-template-rows: (before) 50px (middle) 100px (after);
+    -webkit-grid-template-rows: (before) 50px (middle) 100px (after) 150px;
     -webkit-grid-template-columns: 40px 80px 160px;
 }
 
@@ -59,7 +59,7 @@
 <p>This test checks that we resolve named grid areas per the specification.</p>
 
 <div style="position: relative">
-    <div class="grid gridWithoutRepeat gridAutoFlowStack">
+    <div class="grid gridWithoutRepeat">
         <div class="sizedToGridArea gridItemSixthArea" data-offset-x="120" data-offset-y="50" data-expected-width="160" data-expected-height="100"></div>
         <div class="sizedToGridArea gridItemFifthArea" data-offset-x="40" data-offset-y="50" data-expected-width="80" data-expected-height="100"></div>
         <div class="sizedToGridArea gridItemFourthArea" data-offset-x="0" data-offset-y="50" data-expected-width="40" data-expected-height="100"></div>
 </div>
 
 <div style="position: relative">
-    <div class="grid gridWithRepeat gridAutoFlowStack">
+    <div class="grid gridWithRepeat">
         <!-- fifth and sixth are invalid named grid areas. -->
-        <div class="sizedToGridArea gridItemSixthArea" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
-        <div class="sizedToGridArea gridItemFifthArea" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
+        <div class="sizedToGridArea gridItemSixthArea" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="150"></div>
+        <div class="sizedToGridArea gridItemFifthArea" data-offset-x="40" data-offset-y="150" data-expected-width="80" data-expected-height="150"></div>
 
         <div class="sizedToGridArea gridItemFourthArea" data-offset-x="0" data-offset-y="50" data-expected-width="120" data-expected-height="100"></div>
         <div class="sizedToGridArea gridItemThirdArea" data-offset-x="120" data-offset-y="0" data-expected-width="160" data-expected-height="150"></div>
index cd2d3ab..6f28ce0 100644 (file)
@@ -7,7 +7,6 @@
     -webkit-grid-template-rows: 100px;
     -webkit-grid-template-columns: 200px;
     margin-top: 10px;
-    -webkit-grid-auto-flow: stack;
 }
 .red {
     background-color: red;
@@ -42,18 +41,18 @@ window.onload = modifyZIndexAndDisplay;
 </div>
 
 <div class="grid">
-    <div id="item1" class="sizedToGridArea green negativeZIndex"></div>
-    <div class="sizedToGridArea red"></div>
+    <div id="item1" class="sizedToGridArea green negativeZIndex firstRowFirstColumn"></div>
+    <div class="sizedToGridArea red firstRowFirstColumn"></div>
 </div>
 
 <div class="grid">
-    <div id="item2" class="sizedToGridArea green"></div>
-    <div class="sizedToGridArea red"></div>
+    <div id="item2" class="sizedToGridArea green firstRowFirstColumn"></div>
+    <div class="sizedToGridArea red firstRowFirstColumn"></div>
 </div>
 
 <div id="grid3">
-    <div class="sizedToGridArea green"></div>
-    <div id="item3" class="red negativeZIndex"></div>
+    <div class="sizedToGridArea green firstRowFirstColumn"></div>
+    <div id="item3" class="red negativeZIndex firstRowFirstColumn"></div>
 </div>
 
 </body>
index a193f1a..45f8269 100644 (file)
@@ -7,7 +7,6 @@
     -webkit-grid-template-rows: 100px;
     -webkit-grid-template-columns: 200px 200px;
     margin-top: 10px;
-    -webkit-grid-auto-flow: stack;
 }
 .red {
     background-color: red;
 <p>For this test to pass, there should be no red below.</p>
 
 <div class="grid">
-    <div class="sizedToGridArea green positiveZIndex"></div>
-    <div class="sizedToGridArea red"></div>
+    <div class="sizedToGridArea green positiveZIndex firstRowFirstColumn"></div>
+    <div class="sizedToGridArea red firstRowFirstColumn"></div>
 </div>
 
 <div class="grid">
-    <div class="sizedToGridArea green"></div>
-    <div class="sizedToGridArea red negativeZIndex"></div>
+    <div class="sizedToGridArea green firstRowFirstColumn"></div>
+    <div class="sizedToGridArea red negativeZIndex firstRowFirstColumn"></div>
 </div>
 
 <div class="grid">
index c2674fa..31d8e9b 100644 (file)
@@ -4,12 +4,12 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Test getting the longhand values when shorthand is set through CSS.
-PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-auto-flow') is "row stack"
-PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithStack, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
+PASS window.getComputedStyle(gridWithDense, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-columns') is "15px"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-rows') is "10px"
 PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('-webkit-grid-template-areas') is "none"
@@ -28,24 +28,24 @@ PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit
 PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithTemplateNone, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-flow') is "row stack"
-PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowStackAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowDenseAndColumnsAndRows, '').getPropertyValue('-webkit-grid-auto-rows') is "20px"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-template-areas') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-auto-flow') is "column"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumns, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-flow') is "row stack"
-PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
+PASS window.getComputedStyle(gridWithAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
 PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-template-areas') is "none"
@@ -58,18 +58,6 @@ PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-we
 PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-flow') is "row dense"
 PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
 PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-flow') is "column stack"
-PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-flow') is "row stack"
-PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-columns') is "10px"
-PASS window.getComputedStyle(gridWithAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-rows') is "10px"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithAutoFlowAndColumnsAndRows, '').getPropertyValue('-webkit-grid-template-areas') is "none"
@@ -120,12 +108,6 @@ PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webk
 PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
 PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
 PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
-PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-template-areas') is "none"
-PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-auto-flow') is "row"
-PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-auto-columns') is "auto"
-PASS window.getComputedStyle(gridWithMisplacedStack, '').getPropertyValue('-webkit-grid-auto-rows') is "auto"
 PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridWithWrongSlash1, '').getPropertyValue('-webkit-grid-template-areas') is "none"
index 1fc903d..72c843a 100644 (file)
@@ -3,8 +3,8 @@
 <head>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
-#gridWithStack {
-    -webkit-grid: stack;
+#gridWithDense {
+    -webkit-grid: dense;
 }
 #gridWithTemplate {
     -webkit-grid: 15px / 10px;
 #gridWithTemplateNone {
     -webkit-grid: none / 10px;
 }
-#gridWithAutoFlowStackAndColumnsAndRows {
-    -webkit-grid: stack 10px / 20px;
+#gridWithAutoFlowDenseAndColumnsAndRows {
+    -webkit-grid: dense 10px / 20px;
 }
 #gridWithAutoFlowAndColumns {
     -webkit-grid: column 10px;
 }
-#gridWithAutoFlowStack {
-    -webkit-grid: stack 10px;
+#gridWithAutoFlowDense {
+    -webkit-grid: dense 10px;
 }
 #gridWithAutoFlowColumnDense {
     -webkit-grid: column dense 10px;
 #gridWithAutoFlowDenseRow {
     -webkit-grid: dense row 10px;
 }
-#gridWithAutoFlowStackColumn {
-    -webkit-grid: stack column 10px;
-}
-#gridWithAutoFlowRowStack {
-    -webkit-grid: row stack 10px;
-}
 #gridWithAutoFlowAndColumnsAndRows {
     -webkit-grid: column 10px / 20px;
 }
 #gridWithMisplacedDense {
     -webkit-grid: dense column dense;
 }
-#gridWithMisplacedStack {
-    -webkit-grid: stack row stack;
-}
 </style>
 <script src="../../resources/js-test.js"></script>
 </head>
 <body>
-<div class="grid" id="gridWithStack"></div>
+<div class="grid" id="gridWithDense"></div>
 <div class="grid" id="gridWithTemplate"></div>
 <div class="grid" id="gridWithTemplate1"></div>
-<div class="grid" id="gridWithAutoFlowStackAndColumnsAndRows"></div>
+<div class="grid" id="gridWithAutoFlowDenseAndColumnsAndRows"></div>
 <div class="grid" id="gridWithAutoFlowAndColumns"></div>
-<div class="grid" id="gridWithAutoFlowStack"></div>
+<div class="grid" id="gridWithAutoFlowDense"></div>
 <div class="grid" id="gridWithAutoFlowColumnDense"></div>
 <div class="grid" id="gridWithAutoFlowDenseRow"></div>
-<div class="grid" id="gridWithAutoFlowStackColumn"></div>
-<div class="grid" id="gridWithAutoFlowRowStack"></div>
 <div class="grid" id="gridWithAutoFlowAndColumnsAndRows"></div>
 <div class="grid" id="gridWithNone"></div>
 <div class="grid" id="gridWithTemplateNone"></div>
 <div class="grid" id="gridWithTemplateAndAutoFlow"></div>
 <div class="grid" id="gridWithTemplateAndMisplacedString1"></div>
 <div class="grid" id="gridWithMisplacedDense"></div>
-<div class="grid" id="gridWithMisplacedStack"></div>
 <script src="resources/grid-shorthand-parsing-utils.js"></script>
 <script>
     description("This test checks that the 'grid' shorthand is properly parsed and the longhand properties correctly assigned.");
 
     debug("Test getting the longhand values when shorthand is set through CSS.");
-    testGridDefinitionsValues(document.getElementById("gridWithStack"), "none", "none", "none", "row stack", "auto", "auto");
+    testGridDefinitionsValues(document.getElementById("gridWithDense"), "none", "none", "none", "row dense", "auto", "auto");
     testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px", "10px", "none", "row", "auto", "auto");
     testGridDefinitionsValues(document.getElementById("gridWithTemplate1"), "none", "10px", "none", "row", "auto", "auto");
     testGridDefinitionsValues(document.getElementById("gridWithTemplateNone"), "none", "10px", "none", "row", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowStackAndColumnsAndRows"), "none", "none", "none", "row stack", "10px", "20px");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseAndColumnsAndRows"), "none", "none", "none", "row dense", "10px", "20px");
     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumns"), "none", "none", "none", "column", "10px", "10px");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowStack"), "none", "none", "none", "row stack", "10px", "10px");
+    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDense"), "none", "none", "none", "row dense", "10px", "10px");
     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDense"), "none", "none", "none", "column dense", "10px", "10px");
     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow"), "none", "none", "none", "row dense", "10px", "10px");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowStackColumn"), "none", "none", "none", "column stack", "10px", "10px");
-    testGridDefinitionsValues(document.getElementById("gridWithAutoFlowRowStack"), "none", "none", "none", "row stack", "10px", "10px");
     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumnsAndRows"), "none", "none", "none", "column", "10px", "20px");
 
     debug("");
     testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto");
     testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto");
     testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto");
-    testGridDefinitionsValues(document.getElementById("gridWithMisplacedStack"), "none", "none", "none", "row", "auto", "auto");
     testGridDefinitionsValues(document.getElementById("gridWithWrongSlash1"), "none", "none", "none", "row", "auto", "auto");
     testGridDefinitionsValues(document.getElementById("gridWithWrongSlash2"), "none", "none", "none", "row", "auto", "auto");
     testGridDefinitionsValues(document.getElementById("gridWithWrongSlash3"), "none", "none", "none", "row", "auto", "auto");
index 5a38c97..212b95e 100644 (file)
@@ -10,7 +10,7 @@ function testLayout(gridDefinitions, itemsDefinitions)
     var gridContainer = document.getElementById("gridContainer");
     var gridElement = document.createElement("div");
     gridElement.className = "grid";
-    gridElement.style.webkitGridAutoFlow = "stack";
+    gridElement.style.webkitGridAutoFlow = "dense";
 
     for (var key in gridDefinitions) {
        if (key == "rows")
@@ -62,14 +62,14 @@ function updateRowsColumns()
     // Check grid area resolution.
     var gridAreasItems = [ { 'column': 'd', 'x': '150', 'y': '0', 'width': '200', 'height': '50' },
                           { 'column': 'c', 'x': '0', 'y': '0', 'width': '50', 'height': '50' },
-                          { 'column': 'a', 'x': '50', 'y': '0', 'width': '300', 'height': '50' }];
+                          { 'column': 'a', 'x': '50', 'y': '50', 'width': '300', 'height': '100' }];
 
     testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne }, gridAreasItems);
     testLayout({ 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItems);
     testLayout({ 'columns': columnNoNames, 'areas': templateAreaOne, 'rows': rowNoNames }, gridAreasItems);
 
     var gridAreasItemsTwo = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '300', 'height': '50' },
-                             { 'column': 'c', 'x': '150', 'y': '0', 'width': '200', 'height': '50' },
+                             { 'column': 'c', 'x': '150', 'y': '50', 'width': '200', 'height': '100' },
                              { 'column': 'a', 'x': '0', 'y': '0', 'width': '50', 'height': '50' }];
 
     testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNoNames, 'rows': rowNoNames }, gridAreasItems);
@@ -100,18 +100,18 @@ function updateRowsColumns()
     testLayout({ 'columns': columnNoNames, 'rows': rowNoNames, 'areas': templateAreaOne, 'areas': templateAreaTwo }, implicitNamesItemsTwo);
 
     // Check resolution when named lines are defined before the grid area.
-    var itemsBeforeArea = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '300', 'height': '50' },
-                           { 'row': 'c', 'x': '0', 'y': '0', 'width': '50', 'height': '150'},
-                           { 'column': 'd-start', 'x': '50', 'y': '0', 'width': '100', 'height': '50' },
+    var itemsBeforeArea = [ { 'column': 'd', 'x': '50', 'y': '150', 'width': '300', 'height': '200' },
+                           { 'row': 'c', 'x': '50', 'y': '0', 'width': '100', 'height': '150'},
+                           { 'column': 'd-start', 'x': '50', 'y': '350', 'width': '100', 'height': '0' },
                            { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '50', 'width': '50', 'height': '300' } ];
 
     testLayout({ 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea, 'areas': templateAreaOne }, itemsBeforeArea);
     testLayout({ 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
     testLayout({ 'columns': columnNamedLineBeforeArea, 'areas': templateAreaOne, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
 
-    var itemsBeforeAreaTwo = [ { 'column': 'd', 'x': '50', 'y': '0', 'width': '300', 'height': '50' },
-                              { 'row': 'c', 'x': '0', 'y': '0', 'width': '50', 'height': '350'},
-                              { 'column': 'd-start', 'x': '50', 'y': '0', 'width': '100', 'height': '50' },
+    var itemsBeforeAreaTwo = [ { 'column': 'd', 'x': '50', 'y': '350', 'width': '300', 'height': '0' },
+                              { 'row': 'c', 'x': '50', 'y': '0', 'width': '100', 'height': '350'},
+                              { 'column': 'd-start', 'x': '50', 'y': '350', 'width': '100', 'height': '0' },
                               { 'column': 'a-start', 'row': 'd', 'x': '0', 'y': '0', 'width': '50', 'height': '150' } ];
 
     testLayout({ 'areas': templateAreaTwo, 'areas': templateAreaOne, 'columns': columnNamedLineBeforeArea, 'rows': rowNamedLineBeforeArea }, itemsBeforeArea);
index f66fee6..3a91d50 100644 (file)
 
 <!-- Check positioning using unique grid-line names -->
 <div style="position: relative">
-  <div class="grid gridUniqueNames gridAutoFlowStack">
+  <div class="grid gridUniqueNames">
     <div class="sizedToGridArea" style="-webkit-grid-column: b;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: e;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
-    <div class="sizedToGridArea" style="-webkit-grid-column: b-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+    <div class="sizedToGridArea" style="-webkit-grid-column: b-start;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: g-start;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
   </div>
 </div>
 
 <!-- Check that without named gridAreas there are no implicit grid-line names defined -->
 <div style="position: relative">
-  <div class="grid gridUniqueNames gridAutoFlowStack">
+  <div class="grid gridUniqueNames">
     <div class="sizedToGridArea" style="-webkit-grid-column: c-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
-    <div class="sizedToGridArea" style="-webkit-grid-row: f-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
-    <div class="sizedToGridArea" style="-webkit-grid-column: c-start; -webkit-grid-row: f-end" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
-    <div class="sizedToGridArea" style="-webkit-grid-column: b-end; -webkit-grid-row: h-start" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    <div class="sizedToGridArea" style="-webkit-grid-row: f-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+    <div class="sizedToGridArea" style="-webkit-grid-column: c-start; -webkit-grid-row: f-end" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+    <div class="sizedToGridArea" style="-webkit-grid-column: b-end; -webkit-grid-row: h-start" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
   </div>
 </div>
 
 </div>
 
 <div style="position: relative">
-  <div class="grid gridAreas gridNoLineNames gridAutoFlowStack">
-    <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
+  <div class="grid gridAreas gridNoLineNames">
+    <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="150"></div>
   </div>
 
 <!-- Use explicitly named grid lines if they're defined before the grid area -->
 <div style="position: relative">
-  <div class="grid gridAreas gridWithNamedLineBeforeGridArea gridAutoFlowStack">
-    <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
+  <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
+    <div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
     <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
-    <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
-    <div class="sizedToGridArea" style="-webkit-grid-row: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
+    <div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
+    <div class="sizedToGridArea" style="-webkit-grid-row: c;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
   </div>
 </div>
 
 </div>
 
 <div style="position: relative">
-  <div class="grid gridAreas gridWithNamedLineBeforeGridArea gridAutoFlowStack">
+  <div class="grid gridAreas gridWithNamedLineBeforeGridArea">
     <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
-    <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
+    <div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="350" data-offset-y="50" data-expected-width="0" data-expected-height="300"></div>
     <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
   </div>
 </div>
 
 <!-- Check behavior with areas named *-start or *-end -->
 <div style="position: relative">
-  <div class="grid gridAreasSpecial gridNoLineNames gridAutoFlowStack">
+  <div class="grid gridAreasSpecial gridNoLineNames">
     <div class="sizedToGridArea" style="-webkit-grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
-    <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
-    <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    <div class="sizedToGridArea" style="-webkit-grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+    <div class="sizedToGridArea" style="-webkit-grid-column: a; -webkit-grid-row: a;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
   </div>
 </div>
 
index f814d95..d018ca4 100644 (file)
                 -webkit-grid-row: 1;
                 grid-row: 1;
             }
+            #row1column1
+            {
+                -ms-grid-column: 1;
+                -moz-grid-column: 1;
+                -o-grid-column: 1;
+                -webkit-grid-column: 1;
+                grid-column: 1;
+                -ms-grid-row: 1;
+                -moz-grid-row: 1;
+                -o-grid-row: 1;
+                -webkit-grid-row: 1;
+                grid-row: 1;
+            }
         </style>
     </head>
     <body>
         <p>Test passes if there is no red visible on the page.</p>
         <div id="test">
             <div id="griditem">XXXX</div>
-            <div>XXXXX</div>
+            <div id="row1column1">XXXXX</div>
         </div>
     </body>
 </html>
index 98b58c4..4b458ad 100644 (file)
         <meta name="flags" content="ahem invalid" />
         <meta name="assert" content="The 'grid-column' with a value of '0' is invalid and inserts the grid-item in the first column." />
         <style type="text/css">
-            #test
+            #container
             {
+                position: relative;
                 color: green;
+                font: 20px/1 ahem;
+            }
+            #test
+            {
+                position: absolute;
+                left: 0;
+                top: 0;
                 display: -ms-grid;
                 display: -moz-grid;
                 display: -o-grid;
                 display: -webkit-grid;
                 display: grid;
-                font: 20px/1 ahem;
                 height: 3em;
                 -ms-grid-columns: auto 1fr;
                 -moz-grid-columns: auto 1fr;
                 -webkit-grid-row: 1;
                 grid-row: 1;
             }
+            #absolute {
+                position: absolute;
+                left: 0;
+                top: 0;
+            }
         </style>
     </head>
     <body>
         <p>Test passes if there is no red visible on the page.</p>
-        <div id="test">
-            <div id="griditem">XXXX</div>
-            <div>XXXXX</div>
+        <div id="container">
+            <div id="test">
+                <div id="griditem">XXXX</div>
+            </div>
+            <div id="absolute">XXXXX</div>
         </div>
     </body>
 </html>
index 9d5d04a..bee4e66 100644 (file)
                 -webkit-grid-row: 1;
                 grid-row: 1;
             }
+            #row1column1
+            {
+                -ms-grid-column: 1;
+                -moz-grid-column: 1;
+                -o-grid-column: 1;
+                -webkit-grid-column: 1;
+                grid-column: 1;
+                -ms-grid-row: 1;
+                -moz-grid-row: 1;
+                -o-grid-row: 1;
+                -webkit-grid-row: 1;
+                grid-row: 1;
+            }
             span
             {
                 color: red;
@@ -83,7 +96,7 @@
     <body>
         <p>Test passes if there is no red visible on the page.</p>
         <div id="test">
-            <div><span>XX</span>X<span>XX</span></div>
+            <div id="row1column1"><span>XX</span>X<span>XX</span></div>
             <div id="griditem">XX XX</div>
         </div>
     </body>
index 38a84c4..7787cd0 100644 (file)
@@ -1,3 +1,39 @@
+2015-01-02  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Remove stack from grid-auto-flow syntax
+        https://bugs.webkit.org/show_bug.cgi?id=134842
+
+        Reviewed by Sergio Villar Senin.
+
+        "stack" mode for grid-auto-flow property has been removed from the grid
+        layout spec. New syntax is:
+          [ row | column ] || dense
+
+        Modified parsing in order to adapt it to the new syntax.
+
+        Also the current behavior relying on "stack" has been updated following
+        the spec. Now it won't be possible to mimic the old "none" (or "stack")
+        unless you specify manually the grid-placement properties.
+
+        No new tests needed, updated current tests to adapt them to the new
+        behavior.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::ComputedStyleExtractor::propertyValue): Adapt to new syntax.
+        * css/CSSParser.cpp:
+        (WebCore::isValidGridAutoFlowId): Remove "stack" from valid ids.
+        (WebCore::CSSParser::parseGridAutoFlow): Adapt to new syntax.
+        * css/CSSValueKeywords.in: Remove "stack".
+        * css/StyleResolver.cpp:
+        (WebCore::StyleResolver::applyProperty): Adapt to new syntax.
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::placeItemsOnGrid): Remove old "stack" code.
+        * rendering/style/GridResolvedPosition.cpp:
+        (WebCore::GridResolvedPosition::resolveGridPositionsFromStyle): If we
+        cannot resolve positions, we have to run the auto-placement algorithm.
+        * rendering/style/RenderStyle.h: Remove "stack".
+        * rendering/style/RenderStyleConstants.h: Ditto.
+
 2015-01-01  Sam Weinig  <sam@webkit.org>
 
         Remove GroupSettings
index 84c5597..15b3568 100644 (file)
@@ -2190,8 +2190,6 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
 
             if (style->isGridAutoFlowAlgorithmDense())
                 list->append(cssValuePool().createIdentifierValue(CSSValueDense));
-            else if (style->isGridAutoFlowAlgorithmStack())
-                list->append(cssValuePool().createIdentifierValue(CSSValueStack));
 
             return list.release();
         }
index 10b607e..45d3c22 100644 (file)
@@ -5416,12 +5416,12 @@ PassRefPtr<CSSPrimitiveValue> CSSParser::parseGridBreadth(CSSParserValue& value)
 
 static inline bool isValidGridAutoFlowId(CSSValueID id)
 {
-    return (id == CSSValueRow || id == CSSValueColumn || id == CSSValueDense || id == CSSValueStack);
+    return (id == CSSValueRow || id == CSSValueColumn || id == CSSValueDense);
 }
 
 PassRefPtr<CSSValue> CSSParser::parseGridAutoFlow(CSSParserValueList& inputList)
 {
-    // [ row | column ] && dense? | stack && [ row | column ]?
+    // [ row | column ] || dense
     CSSParserValue* value = inputList.current();
     if (!value)
         return nullptr;
@@ -5438,9 +5438,6 @@ PassRefPtr<CSSValue> CSSParser::parseGridAutoFlow(CSSParserValueList& inputList)
     value = inputList.next();
     if (!value || !isValidGridAutoFlowId(value->id)) {
         if (firstId == CSSValueDense)
-            return nullptr;
-
-        if (firstId == CSSValueStack)
             parsedValues->append(cssValuePool().createIdentifierValue(CSSValueRow));
 
         parsedValues->append(cssValuePool().createIdentifierValue(firstId));
@@ -5451,13 +5448,12 @@ PassRefPtr<CSSValue> CSSParser::parseGridAutoFlow(CSSParserValueList& inputList)
     case CSSValueRow:
     case CSSValueColumn:
         parsedValues->append(cssValuePool().createIdentifierValue(firstId));
-        if (value->id == CSSValueDense || value->id == CSSValueStack) {
+        if (value->id == CSSValueDense) {
             parsedValues->append(cssValuePool().createIdentifierValue(value->id));
             inputList.next();
         }
         break;
     case CSSValueDense:
-    case CSSValueStack:
         if (value->id == CSSValueRow || value->id == CSSValueColumn) {
             parsedValues->append(cssValuePool().createIdentifierValue(value->id));
             inputList.next();
index 66dfd38..2bf822d 100644 (file)
@@ -1076,7 +1076,6 @@ span
 
 // -webkit-grid-auto-flow
 dense
-stack
 
 #if defined(ENABLE_CSS3_TEXT) && ENABLE_CSS3_TEXT
 // text-indent
index e4a84e7..61f5e27 100644 (file)
@@ -2762,14 +2762,14 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
         GridAutoFlow autoFlow = RenderStyle::initialGridAutoFlow();
         switch (first.getValueID()) {
         case CSSValueRow:
-            if (second)
-                autoFlow = second->getValueID() == CSSValueDense ? AutoFlowRowDense : AutoFlowStackRow;
+            if (second && second->getValueID() == CSSValueDense)
+                autoFlow =  AutoFlowRowDense;
             else
                 autoFlow = AutoFlowRow;
             break;
         case CSSValueColumn:
-            if (second)
-                autoFlow = second->getValueID() == CSSValueDense ? AutoFlowColumnDense : AutoFlowStackColumn;
+            if (second && second->getValueID() == CSSValueDense)
+                autoFlow = AutoFlowColumnDense;
             else
                 autoFlow = AutoFlowColumn;
             break;
index c0c2353..0b57de2 100644 (file)
@@ -743,14 +743,6 @@ void RenderGrid::placeItemsOnGrid()
     ASSERT(gridRowCount() >= GridResolvedPosition::explicitGridRowCount(style()));
     ASSERT(gridColumnCount() >= GridResolvedPosition::explicitGridColumnCount(style()));
 
-    // FIXME: Implement properly "stack" value in auto-placement algorithm.
-    if (style().isGridAutoFlowAlgorithmStack()) {
-        // If we did collect some grid items, they won't be placed thus never laid out.
-        ASSERT(!autoMajorAxisAutoGridItems.size());
-        ASSERT(!specifiedMajorAxisAutoGridItems.size());
-        return;
-    }
-
     placeSpecifiedMajorAxisItemsOnGrid(specifiedMajorAxisAutoGridItems);
     placeAutoMajorAxisItemsOnGrid(autoMajorAxisAutoGridItems);
 }
index ccdc2a3..af535e0 100644 (file)
@@ -135,14 +135,9 @@ std::unique_ptr<GridSpan> GridResolvedPosition::resolveGridPositionsFromStyle(co
 
     adjustGridPositionsFromStyle(gridContainerStyle, initialPosition, finalPosition, initialPositionSide, finalPositionSide);
 
-    if (initialPosition.shouldBeResolvedAgainstOppositePosition() && finalPosition.shouldBeResolvedAgainstOppositePosition()) {
-        // FIXME: Implement properly "stack" value in auto-placement algorithm.
-        if (gridContainerStyle.isGridAutoFlowAlgorithmStack())
-            return std::make_unique<GridSpan>(0, 0);
-
-        // We can't get our grid positions without running the auto placement algorithm.
+    // We can't get our grid positions without running the auto placement algorithm.
+    if (initialPosition.shouldBeResolvedAgainstOppositePosition() && finalPosition.shouldBeResolvedAgainstOppositePosition())
         return nullptr;
-    }
 
     if (initialPosition.shouldBeResolvedAgainstOppositePosition()) {
         // Infer the position from the final position ('auto / 1' or 'span 2 / 3' case).
index f5d45a6..08da271 100644 (file)
@@ -930,7 +930,6 @@ public:
     bool isGridAutoFlowDirectionColumn() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowDirectionColumn); }
     bool isGridAutoFlowAlgorithmSparse() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowAlgorithmSparse); }
     bool isGridAutoFlowAlgorithmDense() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowAlgorithmDense); }
-    bool isGridAutoFlowAlgorithmStack() const { return (rareNonInheritedData->m_grid->m_gridAutoFlow & InternalAutoFlowAlgorithmStack); }
     const GridTrackSize& gridAutoColumns() const { return rareNonInheritedData->m_grid->m_gridAutoColumns; }
     const GridTrackSize& gridAutoRows() const { return rareNonInheritedData->m_grid->m_gridAutoRows; }
 
index 582f9a9..719aac5 100644 (file)
@@ -604,25 +604,22 @@ enum LineAlign { LineAlignNone, LineAlignEdges };
 enum RubyPosition { RubyPositionBefore, RubyPositionAfter, RubyPositionInterCharacter };
 
 #if ENABLE(CSS_GRID_LAYOUT)
-static const size_t GridAutoFlowBits = 5;
+static const size_t GridAutoFlowBits = 4;
 enum InternalGridAutoFlowAlgorithm {
     InternalAutoFlowAlgorithmSparse = 0x1,
     InternalAutoFlowAlgorithmDense = 0x2,
-    InternalAutoFlowAlgorithmStack = 0x4
 };
 
 enum InternalGridAutoFlowDirection {
-    InternalAutoFlowDirectionRow = 0x8,
-    InternalAutoFlowDirectionColumn = 0x10
+    InternalAutoFlowDirectionRow = 0x4,
+    InternalAutoFlowDirectionColumn = 0x8
 };
 
 enum GridAutoFlow {
     AutoFlowRow = InternalAutoFlowAlgorithmSparse | InternalAutoFlowDirectionRow,
     AutoFlowColumn = InternalAutoFlowAlgorithmSparse | InternalAutoFlowDirectionColumn,
     AutoFlowRowDense = InternalAutoFlowAlgorithmDense | InternalAutoFlowDirectionRow,
-    AutoFlowColumnDense = InternalAutoFlowAlgorithmDense | InternalAutoFlowDirectionColumn,
-    AutoFlowStackRow = InternalAutoFlowAlgorithmStack | InternalAutoFlowDirectionRow,
-    AutoFlowStackColumn = InternalAutoFlowAlgorithmStack | InternalAutoFlowDirectionColumn
+    AutoFlowColumnDense = InternalAutoFlowAlgorithmDense | InternalAutoFlowDirectionColumn
 };
 #endif