[CSS Grid Layout] Add element.style coverage for grid-auto-flow
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 17 Jul 2014 15:58:13 +0000 (15:58 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 17 Jul 2014 15:58:13 +0000 (15:58 +0000)
https://bugs.webkit.org/show_bug.cgi?id=134966

Reviewed by Sergio Villar Senin.

As follow-up patch after r170996 we're adding new test cases for
grid-auto-flow to check the correct behavior of element.style.

* fast/css-grid-layout/grid-auto-flow-get-set-expected.txt: Updated
expectations accordingly.
* fast/css-grid-layout/grid-auto-flow-get-set.html: Updated test to add
checks for element.style.
* fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
(checkGridAutoFlowSetCSSValue): Add new helper method to check
grid-auto-flow property.
(checkGridAutoFlowSetJSValue): Ditto.

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

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/resources/grid-definitions-parsing-utils.js

index 975f25c..ba6c541 100644 (file)
@@ -1,3 +1,22 @@
+2014-07-17  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [CSS Grid Layout] Add element.style coverage for grid-auto-flow
+        https://bugs.webkit.org/show_bug.cgi?id=134966
+
+        Reviewed by Sergio Villar Senin.
+
+        As follow-up patch after r170996 we're adding new test cases for
+        grid-auto-flow to check the correct behavior of element.style.
+
+        * fast/css-grid-layout/grid-auto-flow-get-set-expected.txt: Updated
+        expectations accordingly.
+        * fast/css-grid-layout/grid-auto-flow-get-set.html: Updated test to add
+        checks for element.style.
+        * fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
+        (checkGridAutoFlowSetCSSValue): Add new helper method to check
+        grid-auto-flow property.
+        (checkGridAutoFlowSetJSValue): Ditto.
+
 2014-07-16  Carlos Alberto Lopez Perez  <clopez@igalia.com>
 
         [GTK] Unreviewed GTK gardening.
index 77b4359..f6b63b2 100644 (file)
@@ -15,6 +15,10 @@ PASS window.getComputedStyle(gridAutoFlowStackColumn, '').getPropertyValue('-web
 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'
+
+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'
@@ -24,34 +28,51 @@ PASS window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyValue('-we
 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(gridAutoFlowInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
-PASS window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 
 Test the initial value
+PASS element.style.webkitGridAutoFlow is ''
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 
 Test getting and setting -webkit-grid-auto-flow through JS
+PASS element.style.webkitGridAutoFlow is 'column'
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'column'
+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 '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 ''
 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'
+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'
 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow') is 'row'
 PASS successfullyParsed is true
 
index ff8e910..798ee7f 100644 (file)
 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack"></div>
 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div>
 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></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");
-    var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn");
-    shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'column'");
+    checkGridAutoFlowSetCSSValue("gridAutoFlowColumn", "column");
+    checkGridAutoFlowSetCSSValue("gridAutoFlowRow", "row");
+    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");
 
-    var gridAutoFlowRow = document.getElementById("gridAutoFlowRow");
-    shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-
-    var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDense");
-    shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
-
-    var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense");
-    shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
-
-    var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColumn");
-    shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
-
-    var gridAutoFlowDenseRow = document.getElementById("gridAutoFlowDenseRow");
-    shouldBe("window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
-
-    var gridAutoFlowStack = document.getElementById("gridAutoFlowStack");
-    shouldBe("window.getComputedStyle(gridAutoFlowStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
-
-    var gridAutoFlowStackColumn = document.getElementById("gridAutoFlowStackColumn");
-    shouldBe("window.getComputedStyle(gridAutoFlowStackColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
-
-    var gridAutoFlowStackRow = document.getElementById("gridAutoFlowStackRow");
-    shouldBe("window.getComputedStyle(gridAutoFlowStackRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
-
-    var gridAutoFlowColumnStack = document.getElementById("gridAutoFlowColumnStack");
-    shouldBe("window.getComputedStyle(gridAutoFlowColumnStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
-
-    var gridAutoFlowRowStack = document.getElementById("gridAutoFlowRowStack");
-    shouldBe("window.getComputedStyle(gridAutoFlowRowStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
-
-    var gridAutoFlowNone= document.getElementById("gridAutoFlowNone");
-    shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-
-    var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns");
-    shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-
-    var gridAutoFlowRows = document.getElementById("gridAutoFlowRows");
-    shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-
-    var gridAutoFlowDense = document.getElementById("gridAutoFlowDense");
-    shouldBe("window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-
-    var gridAutoFlowColumnFoo = document.getElementById("gridAutoFlowColumnFoo");
-    shouldBe("window.getComputedStyle(gridAutoFlowColumnFoo, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-
-    var gridAutoFlowColumnColumn = document.getElementById("gridAutoFlowColumnColumn");
-    shouldBe("window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-
-    var gridAutoFlowDenseColumnStack = document.getElementById("gridAutoFlowDenseColumnStack");
-    shouldBe("window.getComputedStyle(gridAutoFlowDenseColumnStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-
-    var gridAutoFlowDenseRowStack = document.getElementById("gridAutoFlowDenseRowStack");
-    shouldBe("window.getComputedStyle(gridAutoFlowDenseRowStack, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-
-    var gridAutoFlowStackRowRow = document.getElementById("gridAutoFlowStackRowRow");
-    shouldBe("window.getComputedStyle(gridAutoFlowStackRowRow, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-
-    var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit");
-    shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue('-webkit-grid-auto-flow')", "'column'");
-
-    var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit");
-    shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+    debug("");
+    debug("Test getting -webkit-grid-auto-flow bad values set through CSS");
+    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");
 
     debug("");
     debug("Test the initial value");
-    element = document.createElement("div");
-    document.body.appendChild(element);
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+    checkGridAutoFlowSetJSValue("", "", "row");
 
     debug("");
     debug("Test getting and setting -webkit-grid-auto-flow through JS");
-    element.style.webkitGridAutoFlow = "column";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column'");
-    element.style.webkitGridAutoFlow = "column dense";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
-    element.style.webkitGridAutoFlow = "row dense";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
-    element.style.webkitGridAutoFlow = "dense column";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column dense'");
-    element.style.webkitGridAutoFlow = "dense row";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row dense'");
-    element.style.webkitGridAutoFlow = "row";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-    element.style.webkitGridAutoFlow = "stack";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
-    element.style.webkitGridAutoFlow = "stack column";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
-    element.style.webkitGridAutoFlow = "stack row";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
-    element.style.webkitGridAutoFlow = "column stack";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'column stack'");
-    element.style.webkitGridAutoFlow = "row stack";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row stack'");
+    checkGridAutoFlowSetJSValue("column", "column", "column");
+    checkGridAutoFlowSetJSValue("column dense", "column dense", "column 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");
-    element = document.createElement("div");
-    document.body.appendChild(element);
-    element.style.webkitGridAutoFlow = "noone";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-    element.style.webkitGridAutoFlow = "dense";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-    element.style.webkitGridAutoFlow = "column column";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-    element.style.webkitGridAutoFlow = "dense column stack";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-    element.style.webkitGridAutoFlow = "dense row stack";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
-    element.style.webkitGridAutoFlow = "stack row row";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+    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");
 
     debug("");
     debug("Test setting -webkit-grid-auto-flow to 'initial' through JS");
     // Reusing the value so that we can check that it is set back to its initial value.
-    element.style.webkitGridAutoFlow = "initial";
-    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'row'");
+    checkGridAutoFlowSetJSValue("initial", "initial", "row");
 </script>
 <script src="../../resources/js-test-post.js"></script>
 </body>
index 885e17a..2cad6cc 100644 (file)
@@ -45,3 +45,17 @@ function testGridTemplatesSetBadJSValues(columnValue, rowValue)
     testGridTemplatesValues(element, "none", "none");
     document.body.removeChild(element);
 }
+
+function checkGridAutoFlowSetCSSValue(elementId, expectedValue) {
+    shouldBe("window.getComputedStyle(" + elementId + ", '').getPropertyValue('-webkit-grid-auto-flow')", "'" + expectedValue + "'");
+}
+
+function checkGridAutoFlowSetJSValue(newValue, expectedStyleValue, expectedComputedStyleValue) {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    if (newValue)
+        element.style.webkitGridAutoFlow = newValue;
+    shouldBe("element.style.webkitGridAutoFlow", "'" + expectedStyleValue + "'");
+    shouldBe("window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-flow')", "'" + expectedComputedStyleValue + "'");
+    document.body.removeChild(element);
+}