blob: 7dd2e547aa27e36082ff4fd710714fd5061139f0 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script>
if (window.testRunner)
testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<style>
.gridItemWithPositiveInteger {
grid-end: 10;
grid-after: 15;
}
.gridItemWithNegativeInteger {
grid-end: -10;
grid-after: -15;
}
.gridItemWithBeforeSpan {
grid-end: span 2;
grid-after: span 9;
}
.gridItemWithAfterSpan {
grid-end: 2 span;
grid-after: 9 span;
}
.gridItemWithOnlySpan {
grid-end: span;
grid-after: span;
}
.gridItemWithAuto {
grid-end: auto;
grid-after: auto;
}
.gridItemWithString {
grid-end: "first";
grid-after: "last";
}
.gridItemWithSpanString {
grid-end: "first" span;
grid-after: span "last";
}
.gridItemWithSpanNumberString {
grid-end: 2 "first" span;
grid-after: "last" 3 span;
}
</style>
<script src="resources/grid-item-column-row-parsing-utils.js"></script>
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
<!-- The first has no properties set on it. -->
<div id="gridElement"></div>
<div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
<div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
<div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpan"></div>
<div class="gridItemWithAfterSpan" id="gridItemWithAfterSpan"></div>
<div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div>
<div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
<div class="gridItemWithString" id="gridItemWithStringElement"></div>
<div class="gridItemWithSpanString" id="gridItemWithSpanStringElement"></div>
<div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberStringElement"></div>
<script>
description('Test that setting and getting grid-end and grid-after works as expected');
debug("Test getting grid-end and grid-after set through CSS");
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");
testColumnRowCSSParsing("gridItemWithStringElement", "auto / 1 first", "auto / 1 last");
testColumnRowCSSParsing("gridItemWithSpanStringElement", "auto / span 1 first", "auto / span 1 last");
testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "auto / span 2 first", "auto / span 3 last");
debug("");
debug("Test the initial value");
var element = document.createElement("div");
document.body.appendChild(element);
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
debug("");
debug("Test getting and setting grid-end and grid-after through JS");
testEndAfterJSParsing("18", "66");
testEndAfterJSParsing("-55", "-40");
testEndAfterJSParsing("'first'", "'last'", "1 first", "1 last");
testEndAfterJSParsing("span 7", "span 2");
testEndAfterJSParsing("span 'first'", "span 'last'", "span 1 first", "span 1 last");
testEndAfterJSParsing("auto", "auto");
debug("");
debug("Test setting grid-start and grid-before to 'inherit' through JS");
testEndAfterInheritJSParsing("inherit", "18");
testEndAfterInheritJSParsing("2", "inherit");
testEndAfterInheritJSParsing("inherit", "inherit");
debug("");
debug("Test setting grid-start and grid-before to 'initial' through JS");
testEndAfterInitialJSParsing();
debug("");
debug("Test setting grid-end and grid-after back to 'auto' through JS");
element.style.gridEnd = "18";
element.style.gridAfter = "66";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'18'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / 18'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'66'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / 66'");
element.style.gridEnd = "auto";
element.style.gridAfter = "auto";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-end')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-after')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
</script>
<script src="../js/resources/js-test-post.js"></script>
</body>
</html>