[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / resources / grid-columns-rows-get-set.js
index c535b9b..959afbc 100755 (executable)
-description('Test that setting and getting grid-columns and grid-rows works as expected');
+description('Test that setting and getting grid-definition-columns and grid-definition-rows works as expected');
 
-debug("Test getting -webkit-grid-columns and -webkit-grid-rows set through CSS");
+debug("Test getting -webkit-grid-definition-columns and -webkit-grid-definition-rows set through CSS");
 var gridWithNoneElement = document.getElementById("gridWithNoneElement");
-shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-columns')", "'none'");
-shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 
 var gridWithFixedElement = document.getElementById("gridWithFixedElement");
-shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-columns')", "'10px'");
-shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-rows')", "'15px'");
+shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'10px'");
+shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'15px'");
 
 var gridWithPercentElement = document.getElementById("gridWithPercentElement");
-shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-columns')", "'53%'");
-shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-rows')", "'27%'");
+shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'53%'");
+shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'27%'");
 
 var gridWithAutoElement = document.getElementById("gridWithAutoElement");
-shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-columns')", "'auto'");
-shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-rows')", "'auto'");
+shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'auto'");
+shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'auto'");
 
 var gridWithEMElement = document.getElementById("gridWithEMElement");
-shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-columns')", "'100px'");
-shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-rows')", "'150px'");
+shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'100px'");
+shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'150px'");
 
 var gridWithViewPortPercentageElement = document.getElementById("gridWithViewPortPercentageElement");
-shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-columns')", "'64px'");
-shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-rows')", "'60px'");
+shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'64px'");
+shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'60px'");
 
 var gridWithMinMax = document.getElementById("gridWithMinMax");
-shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-columns')", "'minmax(10%, 15px)'");
-shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-rows')", "'minmax(20px, 50%)'");
+shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(10%, 15px)'");
+shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(20px, 50%)'");
 
 var gridWithMinContent = document.getElementById("gridWithMinContent");
-shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-columns')", "'-webkit-min-content'");
-shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-min-content'");
+shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-definition-columns')", "'-webkit-min-content'");
+shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-definition-rows')", "'-webkit-min-content'");
 
 var gridWithMaxContent = document.getElementById("gridWithMaxContent");
-shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-columns')", "'-webkit-max-content'");
-shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-max-content'");
+shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-columns')", "'-webkit-max-content'");
+shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-rows')", "'-webkit-max-content'");
 
 debug("");
-debug("Test getting wrong values for -webkit-grid-columns and -webkit-grid-rows through CSS (they should resolve to the default: 'none')");
+debug("Test getting wrong values for -webkit-grid-definition-columns and -webkit-grid-definition-rows through CSS (they should resolve to the default: 'none')");
 var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");
-shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-columns')", "'none'");
-shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 
 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableElement");
-shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-columns')", "'none'");
-shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 
 debug("");
 debug("Test the initial value");
 var element = document.createElement("div");
 document.body.appendChild(element);
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'none'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 
 debug("");
-debug("Test getting and setting -webkit-grid-columns and -webkit-grid-rows through JS");
-element.style.webkitGridColumns = "18px";
-element.style.webkitGridRows = "66px";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'18px'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'66px'");
+debug("Test getting and setting -webkit-grid-definition-columns and -webkit-grid-definition-rows through JS");
+element.style.webkitGridDefinitionColumns = "18px";
+element.style.webkitGridDefinitionRows = "66px";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'18px'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'66px'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
-element.style.webkitGridColumns = "55%";
-element.style.webkitGridRows = "40%";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'55%'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'40%'");
+element.style.webkitGridDefinitionColumns = "55%";
+element.style.webkitGridDefinitionRows = "40%";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'55%'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'40%'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
-element.style.webkitGridColumns = "auto";
-element.style.webkitGridRows = "auto";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'auto'");
+element.style.webkitGridDefinitionColumns = "auto";
+element.style.webkitGridDefinitionRows = "auto";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'auto'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'auto'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
-element.style.webkitGridColumns = "10vw";
-element.style.webkitGridRows = "25vh";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'80px'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'150px'");
+element.style.webkitGridDefinitionColumns = "10vw";
+element.style.webkitGridDefinitionRows = "25vh";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'80px'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'150px'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
-element.style.webkitGridColumns = "-webkit-min-content";
-element.style.webkitGridRows = "-webkit-min-content";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'-webkit-min-content'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-min-content'");
+element.style.webkitGridDefinitionColumns = "-webkit-min-content";
+element.style.webkitGridDefinitionRows = "-webkit-min-content";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'-webkit-min-content'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'-webkit-min-content'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
-element.style.webkitGridColumns = "-webkit-max-content";
-element.style.webkitGridRows = "-webkit-max-content";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'-webkit-max-content'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'-webkit-max-content'");
+element.style.webkitGridDefinitionColumns = "-webkit-max-content";
+element.style.webkitGridDefinitionRows = "-webkit-max-content";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'-webkit-max-content'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'-webkit-max-content'");
 
 debug("");
-debug("Test getting and setting -webkit-grid-columns and -webkit-grid-rows to minmax() values through JS");
+debug("Test getting and setting -webkit-grid-definition-columns and -webkit-grid-definition-rows to minmax() values through JS");
 element = document.createElement("div");
 document.body.appendChild(element);
-element.style.webkitGridColumns = "minmax(55%, 45px)";
-element.style.webkitGridRows = "minmax(30px, 40%)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(55%, 45px)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(30px, 40%)'");
+element.style.webkitGridDefinitionColumns = "minmax(55%, 45px)";
+element.style.webkitGridDefinitionRows = "minmax(30px, 40%)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(55%, 45px)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(30px, 40%)'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
 element.style.font = "10px Ahem";
-element.style.webkitGridColumns = "minmax(22em, 8vh)";
-element.style.webkitGridRows = "minmax(10vw, 5em)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(220px, 48px)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(80px, 50px)'");
+element.style.webkitGridDefinitionColumns = "minmax(22em, 8vh)";
+element.style.webkitGridDefinitionRows = "minmax(10vw, 5em)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(220px, 48px)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(80px, 50px)'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
-element.style.webkitGridColumns = "minmax(-webkit-min-content, 8vh)";
-element.style.webkitGridRows = "minmax(10vw, -webkit-min-content)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(-webkit-min-content, 48px)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(80px, -webkit-min-content)'");
+element.style.webkitGridDefinitionColumns = "minmax(-webkit-min-content, 8vh)";
+element.style.webkitGridDefinitionRows = "minmax(10vw, -webkit-min-content)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(-webkit-min-content, 48px)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(80px, -webkit-min-content)'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
 element.style.font = "10px Ahem";
-element.style.webkitGridColumns = "minmax(22em, -webkit-max-content)";
-element.style.webkitGridRows = "minmax(-webkit-max-content, 5em)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(220px, -webkit-max-content)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(-webkit-max-content, 50px)'");
+element.style.webkitGridDefinitionColumns = "minmax(22em, -webkit-max-content)";
+element.style.webkitGridDefinitionRows = "minmax(-webkit-max-content, 5em)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(220px, -webkit-max-content)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(-webkit-max-content, 50px)'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
 element.style.font = "10px Ahem";
-element.style.webkitGridColumns = "minmax(22em, -webkit-max-content)";
-element.style.webkitGridRows = "minmax(-webkit-max-content, 5em)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(220px, -webkit-max-content)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(-webkit-max-content, 50px)'");
+element.style.webkitGridDefinitionColumns = "minmax(22em, -webkit-max-content)";
+element.style.webkitGridDefinitionRows = "minmax(-webkit-max-content, 5em)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(220px, -webkit-max-content)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(-webkit-max-content, 50px)'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
-element.style.webkitGridColumns = "minmax(-webkit-min-content, -webkit-max-content)";
-element.style.webkitGridRows = "minmax(-webkit-max-content, -webkit-min-content)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'minmax(-webkit-max-content, -webkit-min-content)'");
+element.style.webkitGridDefinitionColumns = "minmax(-webkit-min-content, -webkit-max-content)";
+element.style.webkitGridDefinitionRows = "minmax(-webkit-max-content, -webkit-min-content)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(-webkit-max-content, -webkit-min-content)'");
 
 debug("");
-debug("Test setting grid-columns and grid-rows to bad minmax value through JS");
+debug("Test setting grid-definition-columns and grid-definition-rows to bad minmax value through JS");
 element = document.createElement("div");
 document.body.appendChild(element);
 // No comma.
-element.style.webkitGridColumns = "minmax(10px 20px)";
+element.style.webkitGridDefinitionColumns = "minmax(10px 20px)";
 // Only 1 argument provided.
-element.style.webkitGridRows = "minmax(10px)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'none'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+element.style.webkitGridDefinitionRows = "minmax(10px)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
 // Nested minmax.
-element.style.webkitGridColumns = "minmax(minmax(10px, 20px), 20px)";
+element.style.webkitGridDefinitionColumns = "minmax(minmax(10px, 20px), 20px)";
 // Only 2 arguments are allowed.
-element.style.webkitGridRows = "minmax(10px, 20px, 30px)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'none'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+element.style.webkitGridDefinitionRows = "minmax(10px, 20px, 30px)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
 // No breadth value.
-element.style.webkitGridColumns = "minmax()";
+element.style.webkitGridDefinitionColumns = "minmax()";
 // No comma.
-element.style.webkitGridRows = "minmax(30px 30% 30em)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'none'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+element.style.webkitGridDefinitionRows = "minmax(30px 30% 30em)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 
 element = document.createElement("div");
 document.body.appendChild(element);
 // Auto is not allowed inside minmax.
-element.style.webkitGridColumns = "minmax(auto, 8vh)";
-element.style.webkitGridRows = "minmax(10vw, auto)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'none'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+element.style.webkitGridDefinitionColumns = "minmax(auto, 8vh)";
+element.style.webkitGridDefinitionRows = "minmax(10vw, auto)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
 
 debug("");
-debug("Test setting grid-columns and grid-rows back to 'none' through JS");
-element.style.webkitGridColumns = "18px";
-element.style.webkitGridRows = "66px";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'18px'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'66px'");
-element.style.webkitGridColumns = "none";
-element.style.webkitGridRows = "none";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'none'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'none'");
+debug("Test setting grid-definition-columns and grid-definition-rows back to 'none' through JS");
+element.style.webkitGridDefinitionColumns = "18px";
+element.style.webkitGridDefinitionRows = "66px";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'18px'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'66px'");
+element.style.webkitGridDefinitionColumns = "none";
+element.style.webkitGridDefinitionRows = "none";
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");