[CSS Grid Layout] Implementation of the grid-template shorthand.

LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-columns-rows-get-set.js

Index: LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-columns-rows-get-set.js
diff --git a/LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-columns-rows-get-set.js b/LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-columns-rows-get-set.js
new file mode 100644
index 0000000000000000000000000000000000000000..9d04a7fcd04e3e67e079805a04ef938dde685191
--- /dev/null
+++ b/LayoutTests/fast/css-grid-layout/resources/grid-template-shorthand-columns-rows-get-set.js
@@ -0,0 +1,145 @@
+description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
+
+debug("Test getting grid-template shorthand set 'columns and rows' through CSS");
+testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none", "none", "none");
+testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px", "15px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "400px", "150px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px", "0px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "7px", "11px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px", "0px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElement"), "0px", "0px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "7px", "11px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageElement"), "64px", "60px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithMinMaxElement"), "80px", "300px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithMinContentElement"), "0px", "0px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithMinContentWithChildrenElement"), "17px", "11px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithMaxContentElement"), "0px", "0px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithMaxContentWithChildrenElement"), "17px", "11px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithFractionElement"), "800px", "600px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithCalcElement"), "150px", "75px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithCalcComplexElement"), "550px", "465px", "none");
+testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMaxElement"), "minmax(10%, 15px)", "minmax(20px, 50%)", "none", "80px", "300px");
+testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinMaxElement"), "minmax(10%, 415px)", "minmax(80px, 50%)", "none", "415px", "300px");
+
+debug("");
+debug("Test getting wrong values for grid-template shorthand 'columns and rows' through CSS (they should resolve to the default: 'none')");
+var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");
+testGridDefinitionsValues(gridWithFitContentElement, "none", "none", "none");
+
+var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableElement");
+testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none", "none");
+
+debug("");
+debug("Test the initial value");
+var element = document.createElement("div");
+document.body.appendChild(element);
+testGridDefinitionsValues(element, "none", "none", "none");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
+
+debug("");
+debug("Test getting and setting grid-template shorthand 'columns and rows' through JS");
+testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none");
+testGridDefinitionsSetJSValues("55% / 40%", "440px", "240px", "none", "55%", "40%");
+testGridDefinitionsSetJSValues("auto / auto", "0px", "0px", "none", "auto", "auto");
+testGridDefinitionsSetJSValues("10vw / 25vh", "80px", "150px", "none", "10vw", "25vh");
+testGridDefinitionsSetJSValues("min-content / min-content", "0px", "0px", "none", "min-content", "min-content");
+testGridDefinitionsSetJSValues("max-content/ max-content", "0px", "0px", "none", "max-content", "max-content");
+
+debug("");
+debug("Test getting and setting grid-template shorthand 'columns and rows' to minmax() values through JS");
+testGridDefinitionsSetJSValues("minmax(55%, 45px) / minmax(30px, 40%)", "440px", "240px", "none", "minmax(55%, 45px)", "minmax(30px, 40%)");
+testGridDefinitionsSetJSValues("minmax(22em, 8vh) / minmax(10vw, 5em)", "220px", "80px", "none", "minmax(22em, 8vh)", "minmax(10vw, 5em)");
+testGridDefinitionsSetJSValues("minmax(min-content, 8vh) / minmax(10vw, min-content)", "48px", "80px", "none", "minmax(min-content, 8vh)", "minmax(10vw, min-content)");
+testGridDefinitionsSetJSValues("minmax(22em, max-content) / minmax(max-content, 5em)", "220px", "50px", "none", "minmax(22em, max-content)", "minmax(max-content, 5em)");
+testGridDefinitionsSetJSValues("minmax(min-content, max-content) / minmax(max-content, min-content)", "0px", "0px", "none", "minmax(min-content, max-content)", "minmax(max-content, min-content)");
+// Unit comparison should be case-insensitive.
+testGridDefinitionsSetJSValues("3600Fr / 154fR", "800px", "600px", "none", "3600fr", "154fr", "none");
+// Float values are allowed.
+testGridDefinitionsSetJSValues("3.1459fr / 2.718fr", "800px", "600px", "none", "3.1459fr", "2.718fr");
+// A leading '+' is allowed.
+testGridDefinitionsSetJSValues("+3fr / +4fr", "800px", "600px", "none", "3fr", "4fr", "none");
+
+debug("");
+debug("Test getting and setting grid-template shorthand 'columns and rows' to calc() values through JS");
+testGridDefinitionsSetJSValues("calc(150px) / calc(75px)", "150px", "75px", "none", "calc(150px)", "calc(75px)");
+testGridDefinitionsSetJSValues("calc(50% - 30px) / calc(75px + 10%)", "370px", "135px", "none", "calc(50% - 30px)", "calc(75px + 10%)");
+testGridDefinitionsSetJSValues("minmax(25%, calc(30px)) / minmax(calc(75%), 40px)", "200px", "450px", "none", "minmax(25%, calc(30px))", "minmax(calc(75%), 40px)", "none", "minmax(25%, calc(30px))", "minmax(calc(75%), 40px)");
+testGridDefinitionsSetJSValues("minmax(10%, calc(30px + 10%)) / minmax(calc(25% - 50px), 200px)", "110px", "200px", "none", "minmax(10%, calc(30px + 10%))", "minmax(calc(25% - 50px), 200px)", "none", "minmax(10%, calc(30px + 10%))", "minmax(calc(25% - 50px), 200px)");
+
+debug("");
+debug("Test setting grid-template shorthand 'columns and rows' to bad values through JS");
+// No comma and only 1 argument provided.
+testGridDefinitionsSetBadJSValues("minmax(10px 20px) / minmax(10px)")
+// Nested minmax and only 2 arguments are allowed.
+testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px) / minmax(10px, 20px, 30px)");
+// No breadth value and no comma.
+testGridDefinitionsSetBadJSValues("minmax() / minmax(30px 30% 30em)");
+// Auto is not allowed inside minmax.
+testGridDefinitionsSetBadJSValues("minmax(auto, 8vh) / minmax(10vw, auto)");
+testGridDefinitionsSetBadJSValues("-2fr / 3ffr");
+testGridDefinitionsSetBadJSValues("-2.05fr / +-3fr");
+testGridDefinitionsSetBadJSValues("0fr / 1r");
+// A dimension doesn't allow spaces between the number and the unit.
+testGridDefinitionsSetBadJSValues(".0000fr / 13 fr");
+testGridDefinitionsSetBadJSValues("7.-fr / -8,0fr");
+// Negative values are not allowed.
+testGridDefinitionsSetBadJSValues("-1px / -6em");
+testGridDefinitionsSetBadJSValues("minmax(-1%, 32%) / minmax(2vw, -6em)");
+// Invalid expressions with calc
+testGridDefinitionsSetBadJSValues("calc(16px 30px) / calc(25px + auto)");
+testGridDefinitionsSetBadJSValues("minmax(min-content, calc()) / calc(10%(");
+
+debug("");
+debug("Test setting grid-template shorthand back to 'none' through JS");
+testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none");
+testGridDefinitionsSetJSValues("none", "none", "none", "none");
+
+function testInherit()
+{
+    var parentElement = document.createElement("div");
+    document.body.appendChild(parentElement);
+    parentElement.style.gridTemplate = "50px (last) / (first) 101%";
+
+    element = document.createElement("div");
+    parentElement.appendChild(element);
+    element.style.display = "grid";
+    element.style.height = "100px";
+    element.style.gridTemplate = "inherit";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'50px (last)'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 101px'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
+
+    document.body.removeChild(parentElement);
+}
+debug("");
+debug("Test setting grid-template shorthand to 'inherit' through JS");
+testInherit();
+
+function testInitial()
+{
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    element.style.display = "grid";
+    element.style.width = "300px";
+    element.style.height = "150px";
+    element.style.gridTemplateColumns = "150% (last)";
+    element.style.gridTemplateRows = "(first) 1fr";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'450px (last)'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 150px'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
+
+    element.style.display = "grid";
+    element.style.gridTemplateColumns = "initial";
+    element.style.gridTemplateRows = "initial";
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
+    shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
+
+    document.body.removeChild(element);
+}
+debug("");
+debug("Test setting grid-template shorthand to 'initial' through JS");
+testInitial();