| Index: LayoutTests/fast/css-grid-layout/grid-template-get-set.html
|
| diff --git a/LayoutTests/fast/css-grid-layout/grid-template-get-set.html b/LayoutTests/fast/css-grid-layout/grid-template-get-set.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..a5d0c007658e1410ab8de04a44a1910066cd24e9
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/css-grid-layout/grid-template-get-set.html
|
| @@ -0,0 +1,124 @@
|
| +<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
| +<html>
|
| +<head>
|
| +<script>
|
| +if (window.testRunner)
|
| + testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
|
| +</script>
|
| +<link href="resources/grid.css" rel="stylesheet">
|
| +<style>
|
| +#gridWithSingleStringTemplate {
|
| + grid-template: "area";
|
| +}
|
| +
|
| +#gridWithTwoColumnsTemplate {
|
| + grid-template: "first second";
|
| +}
|
| +
|
| +#gridWithTwoRowsTemplate {
|
| + grid-template: "first"
|
| + "second";
|
| +}
|
| +
|
| +#gridWithSpanningColumnsTemplate {
|
| + grid-template: "span span";
|
| +}
|
| +
|
| +#gridWithSpanningRowsDotTemplate {
|
| + grid-template: "span"
|
| + ".";
|
| +}
|
| +
|
| +#gridWithDotColumn {
|
| + grid-template: "header ."
|
| + "footer .";
|
| +}
|
| +</style>
|
| +<script src="../js/resources/js-test-pre.js"></script>
|
| +</head>
|
| +<body>
|
| +<div class="grid" id="gridWithDefaultTemplate"></div>
|
| +<div class="grid" id="gridWithSingleStringTemplate"></div>
|
| +<div class="grid" id="gridWithTwoColumnsTemplate"></div>
|
| +<div class="grid" id="gridWithTwoRowsTemplate"></div>
|
| +<div class="grid" id="gridWithSpanningColumnsTemplate"></div>
|
| +<div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
|
| +<div class="grid" id="gridWithDotColumn"></div>
|
| +<script>
|
| + description("This test checks that grid-template is properly parsed.");
|
| +
|
| + debug("Test getting grid-template set through CSS.");
|
| + var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTemplate");
|
| + shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getPropertyValue('grid-template')", "none")
|
| +
|
| + var gridWithSingleStringTemplate = document.getElementById("gridWithSingleStringTemplate");
|
| + shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate).getPropertyValue('grid-template')", "'area'")
|
| +
|
| + var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumnsTemplate");
|
| + shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).getPropertyValue('grid-template')", "'first second'")
|
| +
|
| + var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTemplate");
|
| + shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getPropertyValue('grid-template')", "'first' 'second'")
|
| +
|
| + var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpanningColumnsTemplate");
|
| + shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTemplate).getPropertyValue('grid-template')", "'span span'")
|
| +
|
| + var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpanningRowsDotTemplate");
|
| + shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTemplate).getPropertyValue('grid-template')", "'span' '.'")
|
| +
|
| + var gridWithDotColumn = document.getElementById("gridWithDotColumn");
|
| + shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropertyValue('grid-template')", "'header .' 'footer .'")
|
| +
|
| + debug("Test grid-template: initial");
|
| + var element = document.createElement("div");
|
| + document.body.appendChild(element);
|
| + element.style.gridTemplate = "'foobar'";
|
| + shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "'foobar'")
|
| + element.style.gridTemplate = "initial";
|
| + document.body.removeChild(element);
|
| +
|
| + debug("Test grid-template: inherit");
|
| + var parentElement = document.createElement("div");
|
| + document.body.appendChild(parentElement);
|
| + parentElement.style.gridTemplate = "'foo bar'";
|
| + shouldBeEqualToString("window.getComputedStyle(parentElement).getPropertyValue('grid-template')", "'foo bar'")
|
| +
|
| + var element = document.createElement("div");
|
| + parentElement.appendChild(element);
|
| + element.style.gridTemplate = "inherit";
|
| + shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "'foo bar'")
|
| + document.body.removeChild(parentElement);
|
| +
|
| + debug("Test invalid grid-template values.");
|
| + var element = document.createElement("div");
|
| + document.body.appendChild(element);
|
| +
|
| + // 'nav' is not a rectangular definition.
|
| + element.style.gridTemplate = "'nav head' 'nav nav'";
|
| + shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
|
| +
|
| + // 'nav' is not contiguous in the column direction.
|
| + element.style.gridTemplate = "'nav head nav'";
|
| + shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
|
| +
|
| + // 'nav' is not contiguous in the row direction.
|
| + element.style.gridTemplate = "'nav head' 'middle middle' 'nav footer'";
|
| + shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
|
| +
|
| + // The rows don't have the same number of columns.
|
| + element.style.gridTemplate = "'nav head' 'foot'";
|
| + shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
|
| +
|
| + // Empty rows.
|
| + element.style.gridTemplate = "'' ''";
|
| + shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
|
| +
|
| + debug("");
|
| + debug("FIXME: We currently don't validate that the named grid areas are <indent>.");
|
| + // <ident> only allows a leading '-'.
|
| + element.style.gridTemplate = "'nav-up'";
|
| + shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
|
| +</script>
|
| +<script src="../js/resources/js-test-post.js"></script>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 18532004:
Implement 'grid-template' parsing (Closed)
Base URL: svn://svn.chromium.org/blink/trunk