<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
grid-template-areas: "firstArea secondArea"
"thirdArea thirdArea";
grid-template-columns: [first nav] 10px 10px;
grid-template-rows: [last] 10px 10px;
}
.gridItemWithPositiveInteger {
grid-column: 10;
grid-row: 15;
}
.gridItemWithNegativeInteger {
grid-column: -10;
grid-row: -15;
}
.gridItemWithAuto {
grid-column: auto;
grid-row: auto;
}
.gridItemWith2Integer {
grid-column: 10 / 15;
grid-row: 5 / 5;
}
.gridItemWithNegativePositiveInteger {
grid-column: 10 / -10;
grid-row: -8 / 5;
}
.gridItemWithBeforeSpan {
grid-column: span 2 / 4;
grid-row: 3 / span 5;
}
.gridItemWithAfterSpan {
grid-column: 2 span / 4;
grid-row: 3 / 5 span;
}
.gridItemWith2OnlySpan {
grid-column: span / span;
grid-row: span / span;
}
.gridItemWith2Auto {
grid-column: auto / auto;
grid-row: auto / auto;
}
.gridItemWithBothLongHand {
grid-column-end: 11;
grid-row-start: 4;
}
.gridItemWithNoSpace {
grid-column: auto/1;
grid-row: 5/auto;
}
.gridItemWithCustomIdent {
grid-column: first;
grid-row: last;
}
.gridItemWithNonExistingCustomIdent {
grid-column: nav;
grid-row: foo;
}
.gridItemWithSpanCustomIdent {
grid-column: 1 /span first;
grid-row: -1 / span last;
}
.gridItemWithSpanNumberCustomIdent {
grid-column: 1 /span 3 first;
grid-row: -1 / last 2 span ;
}
.gridItemWithSingleNamedGridArea {
grid-column: thirdArea;
grid-row: firstArea;
}
.gridItemWithNamedGridAreaAndSpan {
grid-column: thirdArea / span 1;
grid-row: firstArea / span 2;
}
</style>
<script src="resources/grid-item-column-row-parsing-utils.js"></script>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div class="grid">
<!-- The first has no properties set on it. -->
<div id="gridItemWithNoCSSRule"></div>
<div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
<div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
<div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
<div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div>
<div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiveIntegerElement"></div>
<div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div>
<div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div>
<div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div>
<div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div>
<div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gridItemWithBothShortLongHandElement"></div>
<div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div>
<div class="gridItemWithCustomIdent" id="gridItemWithCustomIdent"></div>
<div class="gridItemWithNonExistingCustomIdent" id="gridItemWithNonExistingCustomIdent"></div>
<div class="gridItemWithSpanCustomIdent" id="gridItemWithSpanCustomIdent"></div>
<div class="gridItemWithSpanNumberCustomIdent" id="gridItemWithSpanNumberCustomIdent"></div>
<div class="gridItemWithSingleNamedGridArea" id="gridItemWithSingleNamedGridArea"></div>
<div class="gridItemWithNamedGridAreaAndSpan" id="gridItemWithNamedGridAreaAndSpan"></div>
</div>
<script>
description('Test that setting and getting grid-column and grid-row works as expected');
debug("Test getting grid-column and grid-row set through CSS");
testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto", "auto", "auto", "auto", "auto", "auto");
testColumnRowCSSParsing("gridItemWithPositiveInteger", "10", "15", "10", "auto", "15", "auto");
testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10", "-15", "-10", "auto", "-15", "auto");
testColumnRowCSSParsing("gridItemWithAutoElement", "auto", "auto", "auto", "auto", "auto", "auto");
testColumnRowCSSParsing("gridItemWith2IntegerElement", "10 / 15", "5 / 5", "10", "15", "5", "5");
testColumnRowCSSParsing("gridItemWithNegativePositiveIntegerElement", "10 / -10", "-8 / 5", "10", "-10", "-8", "5");
testColumnRowCSSParsing("gridItemWithBeforeSpanElement", "span 2 / 4", "3 / span 5", "span 2", "4", "3", "span 5");
testColumnRowCSSParsing("gridItemWith2OnlySpanElement", "auto", "auto", "auto", "auto", "auto", "auto");
testColumnRowCSSParsing("gridItemWith2AutoElement", "auto" , "auto", "auto", "auto", "auto", "auto");
testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", "4 / 5", "10", "11", "4", "5");
testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5", "auto", "1", "5", "auto");
testColumnRowCSSParsing("gridItemWithCustomIdent", "first", "last", "first", "first", "last", "last");
testColumnRowCSSParsing("gridItemWithNonExistingCustomIdent", "nav", "foo", "nav", "nav", "foo", "foo");
testColumnRowCSSParsing("gridItemWithSpanCustomIdent", "1 / span first", "-1 / span last", "1", "span first", "-1", "span last");
testColumnRowCSSParsing("gridItemWithSpanNumberCustomIdent", "1 / span 3 first", "-1 / span 2 last", "1", "span 3 first", "-1", "span 2 last");
testColumnRowCSSParsing("gridItemWithSingleNamedGridArea", "thirdArea", "firstArea", "thirdArea", "thirdArea", "firstArea", "firstArea");
testColumnRowCSSParsing("gridItemWithNamedGridAreaAndSpan", "thirdArea / span 1", "firstArea / span 2", "thirdArea", "span 1", "firstArea", "span 2");
debug("");
debug("Test the initial value");
var element = document.createElement("div");
document.body.appendChild(element);
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
debug("");
debug("Test getting and setting grid-column and grid-row through JS");
testColumnRowJSParsing("18", "66", "18", "66");
testColumnRowJSParsing("-55", "-40", "-55", "-40");
testColumnRowJSParsing("auto", "auto", "auto", "auto");
testColumnRowJSParsing("10 / 55", "1 / 10", "10 / 55", "1 / 10");
testColumnRowJSParsing("span 5 / 5", "4 / span 4", "span 5 / 5", "4 / span 4");
testColumnRowJSParsing("-5 / 5", "4 / -4", "-5 / 5", "4 / -4");
testColumnRowJSParsing("4 / auto", "5 / auto", "4", "5");
testColumnRowJSParsing("auto / 5", "auto / 8", "auto / 5", "auto / 8");
testColumnRowJSParsing("span / 3", "5 / span", "auto", "auto");
testColumnRowJSParsing("span 1 / 3", "5 / span 1", "span 1 / 3", "5 / span 1");
testColumnRowJSParsing("first span / 3", "5 / last span", "span first / 3", "5 / span last");
testColumnRowJSParsing("first / last", "nav / last span", "first / last", "nav / span last");
testColumnRowJSParsing("3 first / 2 last", "5 nav / last 7 span", "3 first / 2 last", "5 nav / span 7 last");
testColumnRowJSParsing("3 first span / -3 last", "last 2 span / -1 nav", "span 3 first / -3 last", "span 2 last / -1 nav");
testColumnRowJSParsing("5 / none", "8 / foobar", "5 / none", "8 / foobar");
testColumnRowJSParsing("nonExistent / none", "nonExistent / foobar", "nonExistent / none", "nonExistent / foobar");
testColumnRowJSParsing("span first 3 / none", "last span / foobar", "span 3 first / none", "span last / foobar");
testColumnRowJSParsing("5 span / span 2", "span first / last span", "span 5 / span 2", "span first / span last");
testColumnRowJSParsing("span 5 first / span last 2", "3 first span / last 7 span", "span 5 first / span 2 last", "span 3 first / span 7 last");
debug("");
debug("Test setting grid-column and grid-row back to 'auto' through JS");
element.style.gridColumn = "18 / 19";
element.style.gridRow = "66 / 68";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'18 / 19'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'18'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'19'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / 68'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'68'");
element.style.gridColumn = "auto";
element.style.gridRow = "auto";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
debug("");
debug("Test getting and setting 'initial' grid-column and grid-row through JS");
testColumnRowInitialJSParsing();
debug("");
debug("Test getting and setting 'inherit' grid-column and grid-row through JS");
testColumnRowInheritJSParsing("1", "inherit");
testColumnRowInheritJSParsing("inherit", "1");
testColumnRowInheritJSParsing("inherit", "inherit");
debug("");
debug("Test getting and setting invalid grid-column and grid-row through JS");
testColumnRowInvalidJSParsing("4 5", "5 8");
testColumnRowInvalidJSParsing("4 /", "5 /");
testColumnRowInvalidJSParsing("5 5", "8 auto");
testColumnRowInvalidJSParsing("5 / /", "8 / /");
// 0 is invalid.
testColumnRowInvalidJSParsing("0 / 5", "0 / 6");
testColumnRowInvalidJSParsing("6 / 0", "8 / 0");
testColumnRowInvalidJSParsing("0", "0");
// 'span' alone is invalid
testColumnRowInvalidJSParsing("span", "span");
testColumnRowInvalidJSParsing("span / span", "span / span");
// 'span' and 'auto' are not valid <custom-ident>
testColumnRowInvalidJSParsing("span span / span span", "span span / span span");
testColumnRowInvalidJSParsing("span auto / span auto", "span auto / span auto");
// CSS wide keywords are not valid <custom-ident>
testColumnRowInvalidJSParsing("span default / span default", "span default / span default");
testColumnRowInvalidJSParsing("span inherit / span inherit", "span inherit / span inherit");
testColumnRowInvalidJSParsing("span initial / span initial", "span initial / span initial");
// More than 1 <integer> and / or <string>.
testColumnRowInvalidJSParsing("5 5 / span 2", "4 4 / 3 span");
testColumnRowInvalidJSParsing("5 first last / span 2", "first 4 last / 3 span");
testColumnRowInvalidJSParsing("5 / first last 2", "4 / first 3 last");
testColumnRowInvalidJSParsing("first last / span 2", "first last / 3 span");
testColumnRowInvalidJSParsing("5 / first last", "4 / first last");
testColumnRowInvalidJSParsing("5 5 span / 2", "span 4 4 / 3");
testColumnRowInvalidJSParsing("span 3 5 / 1", "5 span 4 / 3");
testColumnRowInvalidJSParsing("span last first / 1", "span first last / 3");
testColumnRowInvalidJSParsing("2 / span last first", "3 / span first last");
testColumnRowInvalidJSParsing("span last first / 1", "span first last 7 / 3");
testColumnRowInvalidJSParsing("2 / span last 3 first", "3 / span first 5 last");
testColumnRowInvalidJSParsing("1 span 2 first / 1", "1 span last 7 / 3");
testColumnRowInvalidJSParsing("2 / 3 span 3 first", "3 / 5 span first 5");
// Negative integer or 0 are invalid for spans.
testColumnRowInvalidJSParsing("span -1 / -2", "-3 span / -4");
testColumnRowInvalidJSParsing("-1 / -2 span", "-3 / span -4");
testColumnRowInvalidJSParsing("0 span / 0", "span 0 / 0");
testColumnRowInvalidJSParsing("0 / span 0", "0 / 0 span");
testColumnRowInvalidJSParsing("span -3 'first' / 3 last", "last -2 span / 1 nav");
// We don't allow span to be between the <integer> and the <string>.
testColumnRowInvalidJSParsing("first span 1 / last", "2 span first / last");
testColumnRowInvalidJSParsing("3 first / 2 span last", "5 nav / last span 7");
testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3");
</script>
</body>
</html>
Codebase Browser
chromium