Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(236)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js

Issue 16959008: [CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns} (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Added a missing fix for a test in webexposed/ Created 7 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint-expected.txt ('K') | « LayoutTests/fast/css-grid-layout/place-cell-by-index.html ('k') | LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js » ('j') | Source/core/css/CSSProperty.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 4f655444d08816f23f7586e1e0e3ece4e7be385d..f5c200ec1846ce8ec5d3b8b985fb4bcb59b53056 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')", "'-webkit-min-content'");
-shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-rows')", "'-webkit-min-content'");
+shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-definition-columns')", "'-webkit-min-content'");
+shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-definition-rows')", "'-webkit-min-content'");
var gridWithMaxContent = document.getElementById("gridWithMaxContent");
-shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-columns')", "'-webkit-max-content'");
-shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-rows')", "'-webkit-max-content'");
+shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-definition-columns')", "'-webkit-max-content'");
+shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-definition-rows')", "'-webkit-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 = "-webkit-min-content";
-element.style.gridRows = "-webkit-min-content";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'-webkit-min-content'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'-webkit-min-content'");
+element.style.gridDefinitionColumns = "-webkit-min-content";
+element.style.gridDefinitionRows = "-webkit-min-content";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'-webkit-min-content'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'-webkit-min-content'");
element = document.createElement("div");
document.body.appendChild(element);
-element.style.gridColumns = "-webkit-max-content";
-element.style.gridRows = "-webkit-max-content";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'-webkit-max-content'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'-webkit-max-content'");
+element.style.gridDefinitionColumns = "-webkit-max-content";
+element.style.gridDefinitionRows = "-webkit-max-content";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'-webkit-max-content'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'-webkit-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(-webkit-min-content, 8vh)";
-element.style.gridRows = "minmax(10vw, -webkit-min-content)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'minmax(-webkit-min-content, 48px)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax(80px, -webkit-min-content)'");
+element.style.gridDefinitionColumns = "minmax(-webkit-min-content, 8vh)";
+element.style.gridDefinitionRows = "minmax(10vw, -webkit-min-content)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'minmax(-webkit-min-content, 48px)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'minmax(80px, -webkit-min-content)'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.font = "10px Ahem";
-element.style.gridColumns = "minmax(22em, -webkit-max-content)";
-element.style.gridRows = "minmax(-webkit-max-content, 5em)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'minmax(220px, -webkit-max-content)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax(-webkit-max-content, 50px)'");
+element.style.gridDefinitionColumns = "minmax(22em, -webkit-max-content)";
+element.style.gridDefinitionRows = "minmax(-webkit-max-content, 5em)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'minmax(220px, -webkit-max-content)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'minmax(-webkit-max-content, 50px)'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.font = "10px Ahem";
-element.style.gridColumns = "minmax(22em, -webkit-max-content)";
-element.style.gridRows = "minmax(-webkit-max-content, 5em)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'minmax(220px, -webkit-max-content)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax(-webkit-max-content, 50px)'");
+element.style.gridDefinitionColumns = "minmax(22em, -webkit-max-content)";
+element.style.gridDefinitionRows = "minmax(-webkit-max-content, 5em)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'minmax(220px, -webkit-max-content)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'minmax(-webkit-max-content, 50px)'");
element = document.createElement("div");
document.body.appendChild(element);
-element.style.gridColumns = "minmax(-webkit-min-content, -webkit-max-content)";
-element.style.gridRows = "minmax(-webkit-max-content, -webkit-min-content)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax(-webkit-max-content, -webkit-min-content)'");
+element.style.gridDefinitionColumns = "minmax(-webkit-min-content, -webkit-max-content)";
+element.style.gridDefinitionRows = "minmax(-webkit-max-content, -webkit-min-content)";
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
+shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "'minmax(-webkit-max-content, -webkit-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();
« LayoutTests/fast/css-grid-layout/grid-element-change-rows-repaint-expected.txt ('K') | « LayoutTests/fast/css-grid-layout/place-cell-by-index.html ('k') | LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js » ('j') | Source/core/css/CSSProperty.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698