Commit f55039c5 authored by sergio@webkit.org's avatar sergio@webkit.org
Browse files

[CSS Grid Layout] Refactor testing code

https://bugs.webkit.org/show_bug.cgi?id=119552

Reviewed by Darin Adler.

Based on Blink r148922 & r149060 by <jchaffraix@chromium.org>

The old testing code was a huge copy&paste of big testing code
blocks. Refactor it in some new utility functions so that we could
reduce the size of the layout test file and ease the maintenance.

* fast/css-grid-layout/grid-item-column-row-get-set-expected.txt:
* fast/css-grid-layout/grid-item-column-row-get-set.html:
* fast/css-grid-layout/grid-item-end-after-get-set-expected.txt:
* fast/css-grid-layout/grid-item-end-after-get-set.html:
* fast/css-grid-layout/grid-item-start-before-get-set-expected.txt:
* fast/css-grid-layout/grid-item-start-before-get-set.html:
* fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@154438 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 9bc82be5
2013-08-08 Sergio Villar Senin <svillar@igalia.com>
[CSS Grid Layout] Refactor testing code
https://bugs.webkit.org/show_bug.cgi?id=119552
Reviewed by Darin Adler.
Based on Blink r148922 & r149060 by <jchaffraix@chromium.org>
The old testing code was a huge copy&paste of big testing code
blocks. Refactor it in some new utility functions so that we could
reduce the size of the layout test file and ease the maintenance.
* fast/css-grid-layout/grid-item-column-row-get-set-expected.txt:
* fast/css-grid-layout/grid-item-column-row-get-set.html:
* fast/css-grid-layout/grid-item-end-after-get-set-expected.txt:
* fast/css-grid-layout/grid-item-end-after-get-set.html:
* fast/css-grid-layout/grid-item-start-before-get-set-expected.txt:
* fast/css-grid-layout/grid-item-start-before-get-set.html:
* fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js: Added.
2013-08-21 Ryosuke Niwa <rniwa@webkit.org>
 
Update Mac test expectations.
......@@ -4,34 +4,48 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
Test getting -webkit-grid-column-end and -webkit-grid-row-end set through CSS
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-end') is 'auto'
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-end') is 'auto'
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-end') is '10'
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column') is 'auto / 10'
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-end') is '15'
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row') is 'auto / 15'
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-end') is '-10'
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column') is 'auto / -10'
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-end') is '-15'
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row') is 'auto / -15'
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-end') is 'span 2'
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column') is 'auto / span 2'
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-end') is 'span 9'
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row') is 'auto / span 9'
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-end') is 'span 2'
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column') is 'auto / span 2'
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-end') is 'span 9'
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row') is 'auto / span 9'
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-end') is 'span 1'
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column') is 'auto / span 1'
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-end') is 'span 1'
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row') is 'auto / span 1'
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-end') is 'auto'
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-end') is 'auto'
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column') is "auto / 10"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-end') is "10"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row') is "auto / 15"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-end') is "15"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column') is "auto / -10"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-end') is "-10"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row') is "auto / -15"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-end') is "-15"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column') is "auto / span 2"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row') is "auto / span 9"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-end') is "span 9"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column') is "auto / span 2"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-end') is "span 2"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row') is "auto / span 9"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-end') is "span 9"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column') is "auto / span 1"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-end') is "span 1"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row') is "auto / span 1"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-end') is "span 1"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is 'auto'
......@@ -40,22 +54,30 @@ PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is '
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
Test getting and setting grid-column-end and grid-row-end through JS
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is '18'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / 18'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is '66'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / 66'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is '-55'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / -55'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is '-40'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / -40'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is 'span 7'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / span 7'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is 'span 2'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / span 2'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / 18"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "18"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / 66"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "66"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / -55"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "-55"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / -40"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "-40"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / span 7"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "span 7"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / span 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
Test setting grid-column-end and grid-row-end back to 'auto' through JS
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end') is '18'
......
......@@ -31,6 +31,7 @@ if (window.testRunner)
-webkit-grid-row-end: auto;
}
</style>
<script src="resources/grid-item-column-row-parsing-utils.js"></script>
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
......@@ -46,47 +47,13 @@ if (window.testRunner)
description('Test that setting and getting grid-column-end and grid-row-end works as expected');
debug("Test getting -webkit-grid-column-end and -webkit-grid-row-end set through CSS");
var gridElement = document.getElementById("gridElement");
shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-end')", "'auto'");
shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-end')", "'auto'");
shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
var gridItemWithPositiveInteger = document.getElementById("gridItemWithPositiveInteger");
shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-end')", "'10'");
shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column')", "'auto / 10'");
shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-end')", "'15'");
shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row')", "'auto / 15'");
var gridItemWithNegativeInteger = document.getElementById("gridItemWithNegativeInteger");
shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-end')", "'-10'");
shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column')", "'auto / -10'");
shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-end')", "'-15'");
shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row')", "'auto / -15'");
var gridItemWithBeforeSpan = document.getElementById("gridItemWithBeforeSpan");
shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-end')", "'span 2'");
shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column')", "'auto / span 2'");
shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-end')", "'span 9'");
shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row')", "'auto / span 9'");
var gridItemWithAfterSpan = document.getElementById("gridItemWithAfterSpan");
shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-end')", "'span 2'");
shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column')", "'auto / span 2'");
shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-end')", "'span 9'");
shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row')", "'auto / span 9'");
var gridItemWithOnlySpan = document.getElementById("gridItemWithOnlySpan");
shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-end')", "'span 1'");
shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column')", "'auto / span 1'");
shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-end')", "'span 1'");
shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row')", "'auto / span 1'");
var gridItemWithAutoElement = document.getElementById("gridItemWithAutoElement");
shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-end')", "'auto'");
shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-end')", "'auto'");
shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto");
testColumnRowCSSParsing("gridItemWithPositiveInteger", "auto / 10", "auto / 15");
testColumnRowCSSParsing("gridItemWithNegativeInteger", "auto / -10", "auto / -15");
testColumnRowCSSParsing("gridItemWithBeforeSpan", "auto / span 2", "auto / span 9");
testColumnRowCSSParsing("gridItemWithAfterSpan", "auto / span 2", "auto / span 9");
testColumnRowCSSParsing("gridItemWithOnlySpan", "auto / span 1", "auto / span 1");
testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto");
debug("");
debug("Test the initial value");
......@@ -99,39 +66,10 @@ if (window.testRunner)
debug("");
debug("Test getting and setting grid-column-end and grid-row-end through JS");
element.style.webkitGridColumnEnd = "18";
element.style.webkitGridRowEnd = "66";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'18'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / 18'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'66'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / 66'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.webkitGridColumnEnd = "-55";
element.style.webkitGridRowEnd = "-40";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'-55'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / -55'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'-40'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / -40'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.webkitGridColumnEnd = "span 7";
element.style.webkitGridRowEnd = "span 2";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'span 7'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / span 7'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'span 2'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / span 2'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.webkitGridColumnEnd = "auto";
element.style.webkitGridRowEnd = "auto";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
testColumnEndRowEndJSParsing("18", "66");
testColumnEndRowEndJSParsing("-55", "-40");
testColumnEndRowEndJSParsing("span 7", "span 2");
testColumnEndRowEndJSParsing("auto", "auto");
debug("");
debug("Test setting grid-column-end and grid-row-end back to 'auto' through JS");
......
......@@ -8,30 +8,42 @@ PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-sta
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-start') is 'auto'
PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-start') is '10'
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column') is '10 / auto'
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-start') is '15'
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row') is '15 / auto'
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-start') is '-10'
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column') is '-10 / auto'
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-start') is '-15'
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row') is '-15 / auto'
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-start') is 'span 2'
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column') is 'span 2 / auto'
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-start') is 'span 8'
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row') is 'span 8 / auto'
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-start') is 'span 2'
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column') is 'span 2 / auto'
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-start') is 'span 8'
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row') is 'span 8 / auto'
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-start') is 'span 1'
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column') is 'span 1 / auto'
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-start') is 'span 1'
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row') is 'span 1 / auto'
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-start') is 'auto'
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-start') is 'auto'
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column') is "10 / auto"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-start') is "10"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row') is "15 / auto"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-start') is "15"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column') is "-10 / auto"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-start') is "-10"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row') is "-15 / auto"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-start') is "-15"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column') is "span 2 / auto"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-start') is "span 2"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row') is "span 8 / auto"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-start') is "span 8"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column') is "span 2 / auto"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-start') is "span 2"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row') is "span 8 / auto"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-start') is "span 8"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column') is "span 1 / auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-start') is "span 1"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row') is "span 1 / auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-start') is "span 1"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is 'auto'
......@@ -40,22 +52,30 @@ PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
Test getting and setting grid-column-start and grid-row-start through JS
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is '18'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is '18 / auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is '66'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is '66 / auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is '-55'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is '-55 / auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is '-40'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is '-40 / auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is 'span 3'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'span 3 / auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is 'span 20'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'span 20 / auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-row') is 'auto / auto'
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "18 / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "18"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "66 / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "66"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "-55 / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "-55"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "-40 / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-40"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 3 / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 3"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 20 / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 20"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
Test setting grid-column-start and grid-row-start back to 'auto' through JS
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start') is '18'
......
......@@ -31,6 +31,7 @@ if (window.testRunner)
-webkit-grid-row-start: auto;
}
</style>
<script src="resources/grid-item-column-row-parsing-utils.js"></script>
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
......@@ -52,41 +53,12 @@ if (window.testRunner)
shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-start')", "'auto'");
shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
var gridItemWithPositiveInteger = document.getElementById("gridItemWithPositiveInteger");
shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-start')", "'10'");
shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column')", "'10 / auto'");
shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row-start')", "'15'");
shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row')", "'15 / auto'");
var gridItemWithNegativeInteger = document.getElementById("gridItemWithNegativeInteger");
shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column-start')", "'-10'");
shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column')", "'-10 / auto'");
shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row-start')", "'-15'");
shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row')", "'-15 / auto'");
var gridItemWithBeforeSpan = document.getElementById("gridItemWithBeforeSpan");
shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column-start')", "'span 2'");
shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-column')", "'span 2 / auto'");
shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row-start')", "'span 8'");
shouldBe("getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('-webkit-grid-row')", "'span 8 / auto'");
var gridItemWithAfterSpan = document.getElementById("gridItemWithAfterSpan");
shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column-start')", "'span 2'");
shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-column')", "'span 2 / auto'");
shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row-start')", "'span 8'");
shouldBe("getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('-webkit-grid-row')", "'span 8 / auto'");
var gridItemWithOnlySpan = document.getElementById("gridItemWithOnlySpan");
shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column-start')", "'span 1'");
shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-column')", "'span 1 / auto'");
shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row-start')", "'span 1'");
shouldBe("getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('-webkit-grid-row')", "'span 1 / auto'");
var gridItemWithAutoElement = document.getElementById("gridItemWithAutoElement");
shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column-start')", "'auto'");
shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-start')", "'auto'");
shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / auto");
testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
testColumnRowCSSParsing("gridItemWithBeforeSpan", "span 2 / auto", "span 8 / auto");
testColumnRowCSSParsing("gridItemWithAfterSpan", "span 2 / auto", "span 8 / auto");
testColumnRowCSSParsing("gridItemWithOnlySpan", "span 1 / auto", "span 1 / auto");
testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto");
debug("");
debug("Test the initial value");
......@@ -99,39 +71,10 @@ if (window.testRunner)
debug("");
debug("Test getting and setting grid-column-start and grid-row-start through JS");
element.style.webkitGridColumnStart = "18";
element.style.webkitGridRowStart = "66";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'18'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'18 / auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'66'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'66 / auto'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.webkitGridColumnStart = "-55";
element.style.webkitGridRowStart = "-40";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'-55'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'-55 / auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'-40'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'-40 / auto'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.webkitGridColumnStart = "span 3";
element.style.webkitGridRowStart = "span 20";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'span 3'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'span 3 / auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'span 20'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'span 20 / auto'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.webkitGridColumnStart = "auto";
element.style.webkitGridRowStart = "auto";
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'");
testColumnStartRowStartJSParsing("18", "66");
testColumnStartRowStartJSParsing("-55", "-40");
testColumnStartRowStartJSParsing("span 3", "span 20");
testColumnStartRowStartJSParsing("auto", "auto");
debug("");
debug("Test setting grid-column-start and grid-row-start back to 'auto' through JS");
......
(function() {
function checkColumnRowValues(gridItem, columnValue, rowValue)
{
this.gridItem = gridItem;
gridItemId = gridItem.id ? gridItem.id : "gridItem";
var gridColumnStartEndValues = columnValue.split("/")
var gridColumnStartValue = gridColumnStartEndValues[0].trim();
var gridColumnEndValue = gridColumnStartEndValues[1].trim();
var gridRowStartEndValues = rowValue.split("/")
var gridRowStartValue = gridRowStartEndValues[0].trim();
var gridRowEndValue = gridRowStartEndValues[1].trim();
shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-column')", columnValue);
shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-column-start')", gridColumnStartValue);
shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-column-end')", gridColumnEndValue);
shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-row')", rowValue);
shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-row-start')", gridRowStartValue);
shouldBeEqualToString("getComputedStyle(" + gridItemId + ", '').getPropertyValue('-webkit-grid-row-end')", gridRowEndValue);
}
window.testColumnRowCSSParsing = function(id, columnValue, rowValue)
{
var gridItem = document.getElementById(id);
checkColumnRowValues(gridItem, columnValue, rowValue);
}
window.testColumnRowJSParsing = function(columnValue, rowValue, expectedColumnValue, expectedRowValue)
{
var gridItem = document.createElement("div");
document.body.appendChild(gridItem);
gridItem.style.webkitGridColumn = columnValue;
gridItem.style.webkitGridRow = rowValue;
checkColumnRowValues(gridItem, expectedColumnValue ? expectedColumnValue : columnValue, expectedRowValue ? expectedRowValue : rowValue);
document.body.removeChild(gridItem);
}
window.testColumnRowInvalidJSParsing = function(columnValue, rowValue)
{
var gridItem = document.createElement("div");
document.body.appendChild(gridItem);
gridItem.style.webkitGridColumn = columnValue;
gridItem.style.webkitGridRow = rowValue;
checkColumnRowValues(gridItem, "auto / auto", "auto / auto");
document.body.removeChild(gridItem);
}
window.testColumnStartRowStartJSParsing = function(columnStartValue, rowStartValue)
{
var gridItem = document.createElement("div");
document.body.appendChild(gridItem);
gridItem.style.webkitGridColumnStart = columnStartValue;
gridItem.style.webkitGridRowStart = rowStartValue;
checkColumnRowValues(gridItem, columnStartValue + " / auto", rowStartValue + " / auto");
document.body.removeChild(gridItem);
}
window.testColumnEndRowEndJSParsing = function(columnEndValue, rowEndValue)
{
var gridItem = document.createElement("div");
document.body.appendChild(gridItem);
gridItem.style.webkitGridColumnEnd = columnEndValue;
gridItem.style.webkitGridRowEnd = rowEndValue;
checkColumnRowValues(gridItem, "auto / " + columnEndValue, "auto / " + rowEndValue);
document.body.removeChild(gridItem);
}
})();
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment