-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("gridWithFixedElement"), "7px 11px", "17px 2px");
testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% 99%", "27% 52%");
testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto auto", "auto auto");
debug("Test the initial value");
var element = document.createElement("div");
document.body.appendChild(element);
-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-rows and grid-definition-columns through JS");
+debug("Test getting and setting grid-template-rows and grid-template-columns through JS");
testNonGridDefinitionsSetJSValues("18px 22px", "66px 70px");
testNonGridDefinitionsSetJSValues("55% 80%", "40% 63%");
testNonGridDefinitionsSetJSValues("auto auto", "auto auto");
debug("");
debug("Test getting wrong values set from CSS");
var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto");
-shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-definition-columns')", "'none'");
-shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-definition-rows')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-rows')", "'none'");
var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed");
-shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-definition-columns')", "'none'");
-shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-definition-rows')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-rows')", "'none'");
debug("");
debug("Test setting and getting wrong values from JS");
{
var parentElement = document.createElement("div");
document.body.appendChild(parentElement);
- parentElement.style.gridDefinitionColumns = "50px 1fr (last)";
- parentElement.style.gridDefinitionRows = "101% (middle) 45px";
+ parentElement.style.gridTemplateColumns = "50px 1fr (last)";
+ parentElement.style.gridTemplateRows = "101% (middle) 45px";
testGridDefinitionsValues(parentElement, "50px 1fr (last)", "101% (middle) 45px");
element = document.createElement("div");
parentElement.appendChild(element);
- element.style.gridDefinitionColumns = "inherit";
- element.style.gridDefinitionRows = "inherit";
+ element.style.gridTemplateColumns = "inherit";
+ element.style.gridTemplateRows = "inherit";
testGridDefinitionsValues(element, "50px 1fr (last)", "101% (middle) 45px");
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% (middle) 55px";
- element.style.gridDefinitionRows = "1fr (line) 2fr (line)";
+ element.style.gridTemplateColumns = "150% (middle) 55px";
+ element.style.gridTemplateRows = "1fr (line) 2fr (line)";
testGridDefinitionsValues(element, "150% (middle) 55px", "1fr (line) 2fr (line)");
- 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();