-description('Test that setting and getting grid-definition-columns and grid-definition-rows works as expected');
+description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
-debug("Test getting grid-definition-columns and grid-definition-rows set through CSS");
+debug("Test getting grid-template-columns and grid-template-rows set through CSS");
testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px", "15px");
testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53%", "27%");
testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinMax"), "minmax(10%, calc(50% + 15px))", "minmax(calc(20px + 10%), 50%)");
debug("");
-debug("Test getting wrong values for grid-definition-columns and grid-definition-rows through CSS (they should resolve to the default: 'none')");
+debug("Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')");
var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");
testGridDefinitionsValues(gridWithFitContentElement, "none", "none");
var element = document.createElement("div");
document.body.appendChild(element);
testGridDefinitionsValues(element, "none", "none");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
debug("");
-debug("Test getting and setting grid-definition-columns and grid-definition-rows through JS");
+debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
testNonGridDefinitionsSetJSValues("18px", "66px");
testNonGridDefinitionsSetJSValues("55%", "40%");
testNonGridDefinitionsSetJSValues("auto", "auto");
testNonGridDefinitionsSetJSValues("max-content", "max-content");
debug("");
-debug("Test getting and setting grid-definition-columns and grid-definition-rows to minmax() values through JS");
+debug("Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS");
testNonGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)");
testNonGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "minmax(220px, 48px)", "minmax(80px, 50px)");
testNonGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-content)", "minmax(min-content, 48px)", "minmax(80px, min-content)");
testNonGridDefinitionsSetJSValues("+3fr", "+4fr", "3fr", "4fr", "3fr", "4fr");
debug("");
-debug("Test setting grid-definition-columns and grid-definition-rows to bad values through JS");
+debug("Test setting grid-template-columns and grid-template-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(-1%, 32%)", "minmax(2vw, -6em)");
debug("");
-debug("Test setting grid-definition-columns and grid-definition-rows back to 'none' through JS");
+debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
testNonGridDefinitionsSetJSValues("18px", "66px");
testNonGridDefinitionsSetJSValues("none", "none");
{
var parentElement = document.createElement("div");
document.body.appendChild(parentElement);
- parentElement.style.gridDefinitionColumns = "50px (last)";
- parentElement.style.gridDefinitionRows = "(first) 101%";
+ parentElement.style.gridTemplateColumns = "50px (last)";
+ parentElement.style.gridTemplateRows = "(first) 101%";
element = document.createElement("div");
parentElement.appendChild(element);
- element.style.gridDefinitionColumns = "inherit";
- element.style.gridDefinitionRows = "inherit";
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'50px (last)'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'(first) 101%'");
+ element.style.gridTemplateColumns = "inherit";
+ element.style.gridTemplateRows = "inherit";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'50px (last)'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 101%'");
document.body.removeChild(parentElement);
}
debug("");
-debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit' through JS");
+debug("Test setting grid-template-columns and grid-template-rows to 'inherit' through JS");
testInherit();
function testInitial()
{
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "150% (last)";
- element.style.gridDefinitionRows = "(first) 1fr";
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'150% (last)'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'(first) 1fr'");
+ element.style.gridTemplateColumns = "150% (last)";
+ element.style.gridTemplateRows = "(first) 1fr";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'150% (last)'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'(first) 1fr'");
- element.style.gridDefinitionColumns = "initial";
- element.style.gridDefinitionRows = "initial";
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'");
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'");
+ element.style.gridTemplateColumns = "initial";
+ element.style.gridTemplateRows = "initial";
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
document.body.removeChild(element);
}
debug("");
-debug("Test setting grid-definition-columns and grid-definition-rows to 'initial' through JS");
+debug("Test setting grid-template-columns and grid-template-rows to 'initial' through JS");
testInitial();