grid-item-end-after-get-set.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    grid-template-areas: "firstArea secondArea"
                         "thirdArea thirdArea";
}

.gridItemWithPositiveInteger {
    grid-column-end: 10;
    grid-row-end: 15;
}
.gridItemWithNegativeInteger {
    grid-column-end: -10;
    grid-row-end: -15;
}
.gridItemWithBeforeSpan {
    grid-column-end: span 2;
    grid-row-end: span 9;
}
.gridItemWithAfterSpan {
    grid-column-end: 2 span;
    grid-row-end: 9 span;
}
.gridItemWithOnlySpan {
    grid-column-end: span;
    grid-row-end: span;
}
.gridItemWithAuto {
    grid-column-end: auto;
    grid-row-end: auto;
}
.gridItemWithCustomIdent {
    grid-column-end: first;
    grid-row-end: last;
}
.gridItemWithNumberCustomIdent {
    grid-column-end: first 2;
    grid-row-end: 3 last;
}
.gridItemWithSpanCustomIdent {
    grid-column-end: first span;
    grid-row-end: span last;
}
.gridItemWithSpanNumberCustomIdent {
    grid-column-end: 2 first span;
    grid-row-end: last 3 span;
}
.gridItemWithArea {
    grid-column-end: firstArea;
    grid-row-end: thirdArea;
}
.gridItemWithCSSWideKeyword {
    grid-column-end: 2 inherit;
    grid-row-end: 2 initial;
}
.gridItemWithCSSWideKeyword2 {
    grid-column-end: 2 unset;
    grid-row-end: 2 default;
}
.gridItemWithSpanAuto {
    grid-column-end: span auto;
    grid-row-end: auto span;
}
.gridItemWithOneAuto {
    grid-column-end: 1 auto;
    grid-row-end: auto 1;
}
.gridItemWithSpanAutoOne {
    grid-column-end: span 1 auto;
    grid-row-end: span auto 1;
}
</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="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="gridItemWithCustomIdent" id="gridItemWithCustomIdent"></div>
    <div class="gridItemWithNumberCustomIdent" id="gridItemWithNumberCustomIdent"></div>
    <div class="gridItemWithSpanCustomIdent" id="gridItemWithSpanCustomIdentElement"></div>
    <div class="gridItemWithSpanNumberCustomIdent" id="gridItemWithSpanNumberCustomIdentElement"></div>
    <div class="gridItemWithArea" id="gridItemWithArea"></div>
    <div class="gridItemWithCSSWideKeyword" id="gridItemWithCSSWideKeyword"></div>
    <div class="gridItemWithCSSWideKeyword2" id="gridItemWithCSSWideKeyword2"></div>
    <div class="gridItemWithSpanAuto" id="gridItemWithSpanAuto"></div>
    <div class="gridItemWithOneAuto" id="gridItemWithOneAuto"></div>
    <div class="gridItemWithSpanAutoOne" id="gridItemWithSpanAutoOne"></div>
</div>
<script>
    description('Test that setting and getting grid-column-end and grid-row-end works as expected');

    debug("Test getting grid-column-end and grid-row-end set through CSS");
    testColumnRowCSSParsing("gridElement", "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", "auto");
    testColumnRowCSSParsing("gridItemWithAutoElement", "auto", "auto");
    testColumnRowCSSParsing("gridItemWithCustomIdent", "auto / first", "auto / last");
    testColumnRowCSSParsing("gridItemWithNumberCustomIdent", "auto / 2 first", "auto / 3 last");
    testColumnRowCSSParsing("gridItemWithSpanCustomIdentElement", "auto / span first", "auto / span last");
    testColumnRowCSSParsing("gridItemWithSpanNumberCustomIdentElement", "auto / span 2 first", "auto / span 3 last");
    testColumnRowCSSParsing("gridItemWithArea", "auto / firstArea", "auto / thirdArea");
    testColumnRowCSSParsing("gridItemWithCSSWideKeyword", "auto", "auto");
    testColumnRowCSSParsing("gridItemWithCSSWideKeyword2", "auto", "auto");
    testColumnRowCSSParsing("gridItemWithSpanAuto", "auto", "auto");
    testColumnRowCSSParsing("gridItemWithOneAuto", "auto", "auto");
    testColumnRowCSSParsing("gridItemWithSpanAutoOne", "auto", "auto");

    debug("");
    debug("Test the initial value");
    var element = document.createElement("div");
    document.body.appendChild(element);
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto'");
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto'");

    debug("");
    debug("Test getting and setting grid-column-end and grid-row-end through JS");
    testColumnEndRowEndJSParsing("18", "66");
    testColumnEndRowEndJSParsing("-55", "-40");
    testColumnEndRowEndJSParsing("first", "last", "first", "last");
    testColumnEndRowEndJSParsing("span 7", "span 2");
    testColumnEndRowEndJSParsing("span first", "span last", "span first", "span last");
    testColumnEndRowEndJSParsing("auto", "auto");
    testColumnEndRowEndJSParsing("thirdArea", "secondArea");
    testColumnEndRowEndJSParsing("nonExistentArea", "secondArea");
    testColumnEndRowEndJSParsing("secondArea", "nonExistentArea");

    debug("");
    debug("Test setting grid-column-start and grid-row-start to 'inherit' through JS");
    testColumnEndRowEndInheritJSParsing("inherit", "18");
    testColumnEndRowEndInheritJSParsing("2", "inherit");
    testColumnEndRowEndInheritJSParsing("inherit", "inherit");

    debug("");
    debug("Test setting grid-column-start and grid-row-start to 'initial' through JS");
    testEndAfterInitialJSParsing();

    debug("");
    debug("Test setting grid-column-end and grid-row-end back to 'auto' through JS");
    element.style.gridColumnEnd = "18";
    element.style.gridRowEnd = "66";
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'18'");
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / 18'");
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'66'");
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / 66'");
    element.style.gridColumnEnd = "auto";
    element.style.gridRowEnd = "auto";
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto'");
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto'");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-item-end-after-get-set.html
