[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
1 description('Test that setting and getting grid-definition-columns and grid-definition-rows works as expected');
2
3 debug("Test getting -webkit-grid-definition-columns and -webkit-grid-definition-rows set through CSS");
4 var gridWithNoneElement = document.getElementById("gridWithNoneElement");
5 shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
6 shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
7
8 var gridWithFixedElement = document.getElementById("gridWithFixedElement");
9 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'10px'");
10 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'15px'");
11
12 var gridWithPercentElement = document.getElementById("gridWithPercentElement");
13 shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'53%'");
14 shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'27%'");
15
16 var gridWithAutoElement = document.getElementById("gridWithAutoElement");
17 shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'auto'");
18 shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'auto'");
19
20 var gridWithEMElement = document.getElementById("gridWithEMElement");
21 shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'100px'");
22 shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'150px'");
23
24 var gridWithViewPortPercentageElement = document.getElementById("gridWithViewPortPercentageElement");
25 shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'64px'");
26 shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'60px'");
27
28 var gridWithMinMax = document.getElementById("gridWithMinMax");
29 shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(10%, 15px)'");
30 shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(20px, 50%)'");
31
32 var gridWithMinContent = document.getElementById("gridWithMinContent");
33 shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-definition-columns')", "'-webkit-min-content'");
34 shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('-webkit-grid-definition-rows')", "'-webkit-min-content'");
35
36 var gridWithMaxContent = document.getElementById("gridWithMaxContent");
37 shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-columns')", "'-webkit-max-content'");
38 shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('-webkit-grid-definition-rows')", "'-webkit-max-content'");
39
40 debug("");
41 debug("Test getting wrong values for -webkit-grid-definition-columns and -webkit-grid-definition-rows through CSS (they should resolve to the default: 'none')");
42 var gridWithFitContentElement = document.getElementById("gridWithFitContentElement");
43 shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
44 shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
45
46 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableElement");
47 shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
48 shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
49
50 debug("");
51 debug("Test the initial value");
52 var element = document.createElement("div");
53 document.body.appendChild(element);
54 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
55 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
56
57 debug("");
58 debug("Test getting and setting -webkit-grid-definition-columns and -webkit-grid-definition-rows through JS");
59 element.style.webkitGridDefinitionColumns = "18px";
60 element.style.webkitGridDefinitionRows = "66px";
61 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'18px'");
62 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'66px'");
63
64 element = document.createElement("div");
65 document.body.appendChild(element);
66 element.style.webkitGridDefinitionColumns = "55%";
67 element.style.webkitGridDefinitionRows = "40%";
68 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'55%'");
69 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'40%'");
70
71 element = document.createElement("div");
72 document.body.appendChild(element);
73 element.style.webkitGridDefinitionColumns = "auto";
74 element.style.webkitGridDefinitionRows = "auto";
75 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'auto'");
76 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'auto'");
77
78 element = document.createElement("div");
79 document.body.appendChild(element);
80 element.style.webkitGridDefinitionColumns = "10vw";
81 element.style.webkitGridDefinitionRows = "25vh";
82 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'80px'");
83 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'150px'");
84
85 element = document.createElement("div");
86 document.body.appendChild(element);
87 element.style.webkitGridDefinitionColumns = "-webkit-min-content";
88 element.style.webkitGridDefinitionRows = "-webkit-min-content";
89 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'-webkit-min-content'");
90 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'-webkit-min-content'");
91
92 element = document.createElement("div");
93 document.body.appendChild(element);
94 element.style.webkitGridDefinitionColumns = "-webkit-max-content";
95 element.style.webkitGridDefinitionRows = "-webkit-max-content";
96 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'-webkit-max-content'");
97 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'-webkit-max-content'");
98
99 debug("");
100 debug("Test getting and setting -webkit-grid-definition-columns and -webkit-grid-definition-rows to minmax() values through JS");
101 element = document.createElement("div");
102 document.body.appendChild(element);
103 element.style.webkitGridDefinitionColumns = "minmax(55%, 45px)";
104 element.style.webkitGridDefinitionRows = "minmax(30px, 40%)";
105 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(55%, 45px)'");
106 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(30px, 40%)'");
107
108 element = document.createElement("div");
109 document.body.appendChild(element);
110 element.style.font = "10px Ahem";
111 element.style.webkitGridDefinitionColumns = "minmax(22em, 8vh)";
112 element.style.webkitGridDefinitionRows = "minmax(10vw, 5em)";
113 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(220px, 48px)'");
114 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(80px, 50px)'");
115
116 element = document.createElement("div");
117 document.body.appendChild(element);
118 element.style.webkitGridDefinitionColumns = "minmax(-webkit-min-content, 8vh)";
119 element.style.webkitGridDefinitionRows = "minmax(10vw, -webkit-min-content)";
120 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(-webkit-min-content, 48px)'");
121 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(80px, -webkit-min-content)'");
122
123 element = document.createElement("div");
124 document.body.appendChild(element);
125 element.style.font = "10px Ahem";
126 element.style.webkitGridDefinitionColumns = "minmax(22em, -webkit-max-content)";
127 element.style.webkitGridDefinitionRows = "minmax(-webkit-max-content, 5em)";
128 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(220px, -webkit-max-content)'");
129 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(-webkit-max-content, 50px)'");
130
131 element = document.createElement("div");
132 document.body.appendChild(element);
133 element.style.font = "10px Ahem";
134 element.style.webkitGridDefinitionColumns = "minmax(22em, -webkit-max-content)";
135 element.style.webkitGridDefinitionRows = "minmax(-webkit-max-content, 5em)";
136 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(220px, -webkit-max-content)'");
137 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(-webkit-max-content, 50px)'");
138
139 element = document.createElement("div");
140 document.body.appendChild(element);
141 element.style.webkitGridDefinitionColumns = "minmax(-webkit-min-content, -webkit-max-content)";
142 element.style.webkitGridDefinitionRows = "minmax(-webkit-max-content, -webkit-min-content)";
143 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
144 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'minmax(-webkit-max-content, -webkit-min-content)'");
145
146 debug("");
147 debug("Test setting grid-definition-columns and grid-definition-rows to bad minmax value through JS");
148 element = document.createElement("div");
149 document.body.appendChild(element);
150 // No comma.
151 element.style.webkitGridDefinitionColumns = "minmax(10px 20px)";
152 // Only 1 argument provided.
153 element.style.webkitGridDefinitionRows = "minmax(10px)";
154 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
155 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
156
157 element = document.createElement("div");
158 document.body.appendChild(element);
159 // Nested minmax.
160 element.style.webkitGridDefinitionColumns = "minmax(minmax(10px, 20px), 20px)";
161 // Only 2 arguments are allowed.
162 element.style.webkitGridDefinitionRows = "minmax(10px, 20px, 30px)";
163 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
164 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
165
166 element = document.createElement("div");
167 document.body.appendChild(element);
168 // No breadth value.
169 element.style.webkitGridDefinitionColumns = "minmax()";
170 // No comma.
171 element.style.webkitGridDefinitionRows = "minmax(30px 30% 30em)";
172 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
173 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
174
175 element = document.createElement("div");
176 document.body.appendChild(element);
177 // Auto is not allowed inside minmax.
178 element.style.webkitGridDefinitionColumns = "minmax(auto, 8vh)";
179 element.style.webkitGridDefinitionRows = "minmax(10vw, auto)";
180 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
181 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");
182
183 debug("");
184 debug("Test setting grid-definition-columns and grid-definition-rows back to 'none' through JS");
185 element.style.webkitGridDefinitionColumns = "18px";
186 element.style.webkitGridDefinitionRows = "66px";
187 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'18px'");
188 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'66px'");
189 element.style.webkitGridDefinitionColumns = "none";
190 element.style.webkitGridDefinitionRows = "none";
191 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-columns')", "'none'");
192 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-definition-rows')", "'none'");