<!DOCTYPE html>
<html>
<head>
<script>
if (window.testRunner)
    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.gridItemWithPositiveInteger {
    -webkit-grid-column-end: 10;
    -webkit-grid-row-end: 15;
}
.gridItemWithNegativeInteger {
    -webkit-grid-column-end: -10;
    -webkit-grid-row-end: -15;
}
.gridItemWithBeforeSpan {
    -webkit-grid-column-end: span 2;
    -webkit-grid-row-end: span 9;
}
.gridItemWithAfterSpan {
    -webkit-grid-column-end: 2 span;
    -webkit-grid-row-end: 9 span;
}
.gridItemWithOnlySpan {
    -webkit-grid-column-end: span;
    -webkit-grid-row-end: span;
}
.gridItemWithAuto {
    -webkit-grid-column-end: auto;
    -webkit-grid-row-end: auto;
}
</style>
<script src="resources/grid-item-column-row-parsing-utils.js"></script>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<!-- The first has no properties set on it. -->
<div class="grid">
    <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>
<script>
    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");
    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");
    var element = document.createElement("div");
    document.body.appendChild(element);
    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'");

    debug("");
    debug("Test getting and setting grid-column-end and grid-row-end through JS");
    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");
    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.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'");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>