Index: LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js |
diff --git a/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js b/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js |
index 4b3d51a518ce1a7e7f0589b66925c8b871a40d34..0f9ff1129f2736e5fdfb91e908519ec413b1c923 100755 |
--- a/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js |
+++ b/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js |
@@ -1,293 +1,293 @@ |
-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 grid-columns and grid-rows set through CSS"); |
+debug("Test getting grid-definition-columns and grid-definition-rows set through CSS"); |
var gridWithNoneElement = document.getElementById("gridWithNoneElement"); |
-shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-rows')", "'none'"); |
+shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-definition-rows')", "'none'"); |
var gridWithFixedElement = document.getElementById("gridWithFixedElement"); |
-shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-columns')", "'10px'"); |
-shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-rows')", "'15px'"); |
+shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-definition-columns')", "'10px'"); |
+shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-definition-rows')", "'15px'"); |
var gridWithPercentElement = document.getElementById("gridWithPercentElement"); |
-shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-columns')", "'53%'"); |
-shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-rows')", "'27%'"); |
+shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-definition-columns')", "'53%'"); |
+shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-definition-rows')", "'27%'"); |
var gridWithAutoElement = document.getElementById("gridWithAutoElement"); |
-shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-columns')", "'auto'"); |
-shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-rows')", "'auto'"); |
+shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-definition-columns')", "'auto'"); |
+shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-definition-rows')", "'auto'"); |
var gridWithEMElement = document.getElementById("gridWithEMElement"); |
-shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-columns')", "'100px'"); |
-shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-rows')", "'150px'"); |
+shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-definition-columns')", "'100px'"); |
+shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-definition-rows')", "'150px'"); |
var gridWithViewPortPercentageElement = document.getElementById("gridWithViewPortPercentageElement"); |
-shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-columns')", "'64px'"); |
-shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-rows')", "'60px'"); |
+shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-definition-columns')", "'64px'"); |
+shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-definition-rows')", "'60px'"); |
var gridWithMinMax = document.getElementById("gridWithMinMax"); |
-shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-columns')", "'minmax(10%, 15px)'"); |
-shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-rows')", "'minmax(20px, 50%)'"); |
+shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-definition-columns')", "'minmax(10%, 15px)'"); |
+shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-definition-rows')", "'minmax(20px, 50%)'"); |
var gridWithMinContent = document.getElementById("gridWithMinContent"); |
-shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-columns')", "'min-content'"); |
-shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-rows')", "'min-content'"); |
+shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-definition-columns')", "'min-content'"); |
+shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-definition-rows')", "'min-content'"); |
var gridWithMaxContent = document.getElementById("gridWithMaxContent"); |
-shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-columns')", "'max-content'"); |
-shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-rows')", "'max-content'"); |
+shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-definition-columns')", "'max-content'"); |
+shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-definition-rows')", "'max-content'"); |
var gridWithFraction = document.getElementById("gridWithFraction"); |
-shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-columns')", "'1fr'"); |
-shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-rows')", "'2fr'"); |
+shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-definition-columns')", "'1fr'"); |
+shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-definition-rows')", "'2fr'"); |
debug(""); |
-debug("Test getting wrong values for grid-columns and grid-rows through CSS (they should resolve to the default: 'none')"); |
+debug("Test getting wrong values for grid-definition-columns and grid-definition-rows through CSS (they should resolve to the default: 'none')"); |
var gridWithFitContentElement = document.getElementById("gridWithFitContentElement"); |
-shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-rows')", "'none'"); |
+shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-definition-rows')", "'none'"); |
var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableElement"); |
-shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-rows')", "'none'"); |
+shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-definition-rows')", "'none'"); |
debug(""); |
debug("Test the initial value"); |
var element = document.createElement("div"); |
document.body.appendChild(element); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
debug(""); |
-debug("Test getting and setting grid-columns and grid-rows through JS"); |
-element.style.gridColumns = "18px"; |
-element.style.gridRows = "66px"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'18px'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'66px'"); |
+debug("Test getting and setting grid-definition-columns and grid-definition-rows through JS"); |
+element.style.gridDefinitionColumns = "18px"; |
+element.style.gridDefinitionRows = "66px"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'18px'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'66px'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "55%"; |
-element.style.gridRows = "40%"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'55%'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'40%'"); |
+element.style.gridDefinitionColumns = "55%"; |
+element.style.gridDefinitionRows = "40%"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'55%'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'40%'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "auto"; |
-element.style.gridRows = "auto"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'auto'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'auto'"); |
+element.style.gridDefinitionColumns = "auto"; |
+element.style.gridDefinitionRows = "auto"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'auto'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'auto'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "10vw"; |
-element.style.gridRows = "25vh"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'80px'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'150px'"); |
+element.style.gridDefinitionColumns = "10vw"; |
+element.style.gridDefinitionRows = "25vh"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'80px'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'150px'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "min-content"; |
-element.style.gridRows = "min-content"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min-content'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'min-content'"); |
+element.style.gridDefinitionColumns = "min-content"; |
+element.style.gridDefinitionRows = "min-content"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'min-content'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'min-content'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "max-content"; |
-element.style.gridRows = "max-content"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'max-content'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'max-content'"); |
+element.style.gridDefinitionColumns = "max-content"; |
+element.style.gridDefinitionRows = "max-content"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'max-content'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'max-content'"); |
debug(""); |
-debug("Test getting and setting grid-columns and grid-rows to minmax() values through JS"); |
+debug("Test getting and setting grid-definition-columns and grid-definition-rows to minmax() values through JS"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "minmax(55%, 45px)"; |
-element.style.gridRows = "minmax(30px, 40%)"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'minmax(55%, 45px)'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax(30px, 40%)'"); |
+element.style.gridDefinitionColumns = "minmax(55%, 45px)"; |
+element.style.gridDefinitionRows = "minmax(30px, 40%)"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'minmax(55%, 45px)'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'minmax(30px, 40%)'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
element.style.font = "10px Ahem"; |
-element.style.gridColumns = "minmax(22em, 8vh)"; |
-element.style.gridRows = "minmax(10vw, 5em)"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'minmax(220px, 48px)'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax(80px, 50px)'"); |
+element.style.gridDefinitionColumns = "minmax(22em, 8vh)"; |
+element.style.gridDefinitionRows = "minmax(10vw, 5em)"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'minmax(220px, 48px)'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'minmax(80px, 50px)'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "minmax(min-content, 8vh)"; |
-element.style.gridRows = "minmax(10vw, min-content)"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'minmax(min-content, 48px)'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax(80px, min-content)'"); |
+element.style.gridDefinitionColumns = "minmax(min-content, 8vh)"; |
+element.style.gridDefinitionRows = "minmax(10vw, min-content)"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'minmax(min-content, 48px)'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'minmax(80px, min-content)'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
element.style.font = "10px Ahem"; |
-element.style.gridColumns = "minmax(22em, max-content)"; |
-element.style.gridRows = "minmax(max-content, 5em)"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'minmax(220px, max-content)'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax(max-content, 50px)'"); |
+element.style.gridDefinitionColumns = "minmax(22em, max-content)"; |
+element.style.gridDefinitionRows = "minmax(max-content, 5em)"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'minmax(220px, max-content)'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'minmax(max-content, 50px)'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
element.style.font = "10px Ahem"; |
-element.style.gridColumns = "minmax(22em, max-content)"; |
-element.style.gridRows = "minmax(max-content, 5em)"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'minmax(220px, max-content)'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax(max-content, 50px)'"); |
+element.style.gridDefinitionColumns = "minmax(22em, max-content)"; |
+element.style.gridDefinitionRows = "minmax(max-content, 5em)"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'minmax(220px, max-content)'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'minmax(max-content, 50px)'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "minmax(min-content, max-content)"; |
-element.style.gridRows = "minmax(max-content, min-content)"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'minmax(min-content, max-content)'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax(max-content, min-content)'"); |
+element.style.gridDefinitionColumns = "minmax(min-content, max-content)"; |
+element.style.gridDefinitionRows = "minmax(max-content, min-content)"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'minmax(min-content, max-content)'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'minmax(max-content, min-content)'"); |
// Unit comparison should be case-insensitive. |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "3600Fr"; |
-element.style.gridRows = "154fR"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'3600fr'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'154fr'"); |
+element.style.gridDefinitionColumns = "3600Fr"; |
+element.style.gridDefinitionRows = "154fR"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'3600fr'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'154fr'"); |
// Float values are allowed. |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "3.1459fr"; |
-element.style.gridRows = "2.718fr"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'3.1459fr'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'2.718fr'"); |
+element.style.gridDefinitionColumns = "3.1459fr"; |
+element.style.gridDefinitionRows = "2.718fr"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'3.1459fr'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'2.718fr'"); |
// A leading '+' is allowed. |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "+3fr"; |
-element.style.gridRows = "+4fr"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'3fr'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'4fr'"); |
+element.style.gridDefinitionColumns = "+3fr"; |
+element.style.gridDefinitionRows = "+4fr"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'3fr'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'4fr'"); |
debug(""); |
-debug("Test setting grid-columns and grid-rows to bad values through JS"); |
+debug("Test setting grid-definition-columns and grid-definition-rows to bad values through JS"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
// No comma. |
-element.style.gridColumns = "minmax(10px 20px)"; |
+element.style.gridDefinitionColumns = "minmax(10px 20px)"; |
// Only 1 argument provided. |
-element.style.gridRows = "minmax(10px)"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+element.style.gridDefinitionRows = "minmax(10px)"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
// Nested minmax. |
-element.style.gridColumns = "minmax(minmax(10px, 20px), 20px)"; |
+element.style.gridDefinitionColumns = "minmax(minmax(10px, 20px), 20px)"; |
// Only 2 arguments are allowed. |
-element.style.gridRows = "minmax(10px, 20px, 30px)"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+element.style.gridDefinitionRows = "minmax(10px, 20px, 30px)"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
// No breadth value. |
-element.style.gridColumns = "minmax()"; |
+element.style.gridDefinitionColumns = "minmax()"; |
// No comma. |
-element.style.gridRows = "minmax(30px 30% 30em)"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+element.style.gridDefinitionRows = "minmax(30px 30% 30em)"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
// Auto is not allowed inside minmax. |
-element.style.gridColumns = "minmax(auto, 8vh)"; |
-element.style.gridRows = "minmax(10vw, auto)"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+element.style.gridDefinitionColumns = "minmax(auto, 8vh)"; |
+element.style.gridDefinitionRows = "minmax(10vw, auto)"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "-2fr"; |
-element.style.gridRows = "3ffr"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+element.style.gridDefinitionColumns = "-2fr"; |
+element.style.gridDefinitionRows = "3ffr"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "-2.05fr"; |
-element.style.gridRows = "+-3fr"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+element.style.gridDefinitionColumns = "-2.05fr"; |
+element.style.gridDefinitionRows = "+-3fr"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = "0fr"; |
-element.style.gridRows = "1r"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+element.style.gridDefinitionColumns = "0fr"; |
+element.style.gridDefinitionRows = "1r"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
element = document.createElement("div"); |
document.body.appendChild(element); |
-element.style.gridColumns = ".0000fr"; |
-element.style.gridRows = "13 fr"; // A dimension doesn't allow spaces between the number and the unit. |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+element.style.gridDefinitionColumns = ".0000fr"; |
+element.style.gridDefinitionRows = "13 fr"; // A dimension doesn't allow spaces between the number and the unit. |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
-element.style.gridColumns = "7.-fr"; |
-element.style.gridRows = "-8,0fr"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+element.style.gridDefinitionColumns = "7.-fr"; |
+element.style.gridDefinitionRows = "-8,0fr"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
debug(""); |
-debug("Test setting grid-columns and grid-rows back to 'none' through JS"); |
-element.style.gridColumns = "18px"; |
-element.style.gridRows = "66px"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'18px'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'66px'"); |
-element.style.gridColumns = "none"; |
-element.style.gridRows = "none"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+debug("Test setting grid-definition-columns and grid-definition-rows back to 'none' through JS"); |
+element.style.gridDefinitionColumns = "18px"; |
+element.style.gridDefinitionRows = "66px"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'18px'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'66px'"); |
+element.style.gridDefinitionColumns = "none"; |
+element.style.gridDefinitionRows = "none"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
function testInherit() |
{ |
var parentElement = document.createElement("div"); |
document.body.appendChild(parentElement); |
- parentElement.style.gridColumns = "50px 'last'"; |
- parentElement.style.gridRows = "'first' 101%"; |
+ parentElement.style.gridDefinitionColumns = "50px 'last'"; |
+ parentElement.style.gridDefinitionRows = "'first' 101%"; |
element = document.createElement("div"); |
parentElement.appendChild(element); |
- element.style.gridColumns = "inherit"; |
- element.style.gridRows = "inherit"; |
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'50px last'"); |
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'first 101%'"); |
+ 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%'"); |
document.body.removeChild(parentElement); |
} |
debug(""); |
-debug("Test setting grid-columns and grid-rows to 'inherit' through JS"); |
+debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit' through JS"); |
testInherit(); |
function testInitial() |
{ |
element = document.createElement("div"); |
document.body.appendChild(element); |
- element.style.gridColumns = "150% 'last'"; |
- element.style.gridRows = "'first' 1fr"; |
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'150% last'"); |
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'first 1fr'"); |
+ 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.gridColumns = "initial"; |
- element.style.gridRows = "initial"; |
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'none'"); |
- shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'"); |
+ element.style.gridDefinitionColumns = "initial"; |
+ element.style.gridDefinitionRows = "initial"; |
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'none'"); |
+ shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'none'"); |
document.body.removeChild(element); |
} |
debug(""); |
-debug("Test setting grid-columns and grid-rows to 'initial' through JS"); |
+debug("Test setting grid-definition-columns and grid-definition-rows to 'initial' through JS"); |
testInitial(); |