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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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: 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 unified diff | Download patch
« no previous file with comments | « 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') | LayoutTests/ietestcenter/css3/grid/grid-items-005-expected.htm » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 description('Test that setting and getting grid-columns and grid-rows works as e xpected'); 1 description('Test that setting and getting grid-definition-columns and grid-defi nition-rows works as expected');
2 2
3 debug("Test getting grid-columns and grid-rows set through CSS"); 3 debug("Test getting grid-definition-columns and grid-definition-rows set through CSS");
4 var gridWithNoneElement = document.getElementById("gridWithNoneElement"); 4 var gridWithNoneElement = document.getElementById("gridWithNoneElement");
5 shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-colum ns')", "'none'"); 5 shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-defin ition-columns')", "'none'");
6 shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-rows' )", "'none'"); 6 shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-defin ition-rows')", "'none'");
7 7
8 var gridWithFixedElement = document.getElementById("gridWithFixedElement"); 8 var gridWithFixedElement = document.getElementById("gridWithFixedElement");
9 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-colu mns')", "'10px'"); 9 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-defi nition-columns')", "'10px'");
10 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-rows ')", "'15px'"); 10 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-defi nition-rows')", "'15px'");
11 11
12 var gridWithPercentElement = document.getElementById("gridWithPercentElement"); 12 var gridWithPercentElement = document.getElementById("gridWithPercentElement");
13 shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-co lumns')", "'53%'"); 13 shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-de finition-columns')", "'53%'");
14 shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-ro ws')", "'27%'"); 14 shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-de finition-rows')", "'27%'");
15 15
16 var gridWithAutoElement = document.getElementById("gridWithAutoElement"); 16 var gridWithAutoElement = document.getElementById("gridWithAutoElement");
17 shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-colum ns')", "'auto'"); 17 shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-defin ition-columns')", "'auto'");
18 shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-rows' )", "'auto'"); 18 shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-defin ition-rows')", "'auto'");
19 19
20 var gridWithEMElement = document.getElementById("gridWithEMElement"); 20 var gridWithEMElement = document.getElementById("gridWithEMElement");
21 shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-columns ')", "'100px'"); 21 shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-definit ion-columns')", "'100px'");
22 shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-rows')" , "'150px'"); 22 shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-definit ion-rows')", "'150px'");
23 23
24 var gridWithViewPortPercentageElement = document.getElementById("gridWithViewPor tPercentageElement"); 24 var gridWithViewPortPercentageElement = document.getElementById("gridWithViewPor tPercentageElement");
25 shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyVal ue('grid-columns')", "'64px'"); 25 shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyVal ue('grid-definition-columns')", "'64px'");
26 shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyVal ue('grid-rows')", "'60px'"); 26 shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyVal ue('grid-definition-rows')", "'60px'");
27 27
28 var gridWithMinMax = document.getElementById("gridWithMinMax"); 28 var gridWithMinMax = document.getElementById("gridWithMinMax");
29 shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-columns')" , "'minmax(10%, 15px)'"); 29 shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-definition -columns')", "'minmax(10%, 15px)'");
30 shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-rows')", " 'minmax(20px, 50%)'"); 30 shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-definition -rows')", "'minmax(20px, 50%)'");
31 31
32 var gridWithMinContent = document.getElementById("gridWithMinContent"); 32 var gridWithMinContent = document.getElementById("gridWithMinContent");
33 shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-column s')", "'-webkit-min-content'"); 33 shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-defini tion-columns')", "'-webkit-min-content'");
34 shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-rows') ", "'-webkit-min-content'"); 34 shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-defini tion-rows')", "'-webkit-min-content'");
35 35
36 var gridWithMaxContent = document.getElementById("gridWithMaxContent"); 36 var gridWithMaxContent = document.getElementById("gridWithMaxContent");
37 shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-column s')", "'-webkit-max-content'"); 37 shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-defini tion-columns')", "'-webkit-max-content'");
38 shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-rows') ", "'-webkit-max-content'"); 38 shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-defini tion-rows')", "'-webkit-max-content'");
39 39
40 var gridWithFraction = document.getElementById("gridWithFraction"); 40 var gridWithFraction = document.getElementById("gridWithFraction");
41 shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-columns' )", "'1fr'"); 41 shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-definiti on-columns')", "'1fr'");
42 shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-rows')", "'2fr'"); 42 shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-definiti on-rows')", "'2fr'");
43 43
44 debug(""); 44 debug("");
45 debug("Test getting wrong values for grid-columns and grid-rows through CSS (the y should resolve to the default: 'none')"); 45 debug("Test getting wrong values for grid-definition-columns and grid-definition -rows through CSS (they should resolve to the default: 'none')");
46 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme nt"); 46 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme nt");
47 shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid -columns')", "'none'"); 47 shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid -definition-columns')", "'none'");
48 shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid -rows')", "'none'"); 48 shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid -definition-rows')", "'none'");
49 49
50 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableE lement"); 50 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableE lement");
51 shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('gr id-columns')", "'none'"); 51 shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('gr id-definition-columns')", "'none'");
52 shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('gr id-rows')", "'none'"); 52 shouldBe("getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('gr id-definition-rows')", "'none'");
53 53
54 debug(""); 54 debug("");
55 debug("Test the initial value"); 55 debug("Test the initial value");
56 var element = document.createElement("div"); 56 var element = document.createElement("div");
57 document.body.appendChild(element); 57 document.body.appendChild(element);
58 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 58 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
59 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 59 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
60 60
61 debug(""); 61 debug("");
62 debug("Test getting and setting grid-columns and grid-rows through JS"); 62 debug("Test getting and setting grid-definition-columns and grid-definition-rows through JS");
63 element.style.gridColumns = "18px"; 63 element.style.gridDefinitionColumns = "18px";
64 element.style.gridRows = "66px"; 64 element.style.gridDefinitionRows = "66px";
65 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'18p x'"); 65 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'18px'");
66 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'66px'" ); 66 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'66px'");
67 67
68 element = document.createElement("div"); 68 element = document.createElement("div");
69 document.body.appendChild(element); 69 document.body.appendChild(element);
70 element.style.gridColumns = "55%"; 70 element.style.gridDefinitionColumns = "55%";
71 element.style.gridRows = "40%"; 71 element.style.gridDefinitionRows = "40%";
72 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'55% '"); 72 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'55%'");
73 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'40%'") ; 73 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'40%'");
74 74
75 element = document.createElement("div"); 75 element = document.createElement("div");
76 document.body.appendChild(element); 76 document.body.appendChild(element);
77 element.style.gridColumns = "auto"; 77 element.style.gridDefinitionColumns = "auto";
78 element.style.gridRows = "auto"; 78 element.style.gridDefinitionRows = "auto";
79 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'aut o'"); 79 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'auto'");
80 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'auto'" ); 80 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'auto'");
81 81
82 element = document.createElement("div"); 82 element = document.createElement("div");
83 document.body.appendChild(element); 83 document.body.appendChild(element);
84 element.style.gridColumns = "10vw"; 84 element.style.gridDefinitionColumns = "10vw";
85 element.style.gridRows = "25vh"; 85 element.style.gridDefinitionRows = "25vh";
86 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'80p x'"); 86 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'80px'");
87 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'150px' "); 87 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'150px'");
88 88
89 element = document.createElement("div"); 89 element = document.createElement("div");
90 document.body.appendChild(element); 90 document.body.appendChild(element);
91 element.style.gridColumns = "-webkit-min-content"; 91 element.style.gridDefinitionColumns = "-webkit-min-content";
92 element.style.gridRows = "-webkit-min-content"; 92 element.style.gridDefinitionRows = "-webkit-min-content";
93 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'-we bkit-min-content'"); 93 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'-webkit-min-content'");
94 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'-webki t-min-content'"); 94 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'-webkit-min-content'");
95 95
96 element = document.createElement("div"); 96 element = document.createElement("div");
97 document.body.appendChild(element); 97 document.body.appendChild(element);
98 element.style.gridColumns = "-webkit-max-content"; 98 element.style.gridDefinitionColumns = "-webkit-max-content";
99 element.style.gridRows = "-webkit-max-content"; 99 element.style.gridDefinitionRows = "-webkit-max-content";
100 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'-we bkit-max-content'"); 100 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'-webkit-max-content'");
101 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'-webki t-max-content'"); 101 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'-webkit-max-content'");
102 102
103 debug(""); 103 debug("");
104 debug("Test getting and setting grid-columns and grid-rows to minmax() values th rough JS"); 104 debug("Test getting and setting grid-definition-columns and grid-definition-rows to minmax() values through JS");
105 element = document.createElement("div"); 105 element = document.createElement("div");
106 document.body.appendChild(element); 106 document.body.appendChild(element);
107 element.style.gridColumns = "minmax(55%, 45px)"; 107 element.style.gridDefinitionColumns = "minmax(55%, 45px)";
108 element.style.gridRows = "minmax(30px, 40%)"; 108 element.style.gridDefinitionRows = "minmax(30px, 40%)";
109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(55%, 45px)'"); 109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'minmax(55%, 45px)'");
110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (30px, 40%)'"); 110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'minmax(30px, 40%)'");
111 111
112 element = document.createElement("div"); 112 element = document.createElement("div");
113 document.body.appendChild(element); 113 document.body.appendChild(element);
114 element.style.font = "10px Ahem"; 114 element.style.font = "10px Ahem";
115 element.style.gridColumns = "minmax(22em, 8vh)"; 115 element.style.gridDefinitionColumns = "minmax(22em, 8vh)";
116 element.style.gridRows = "minmax(10vw, 5em)"; 116 element.style.gridDefinitionRows = "minmax(10vw, 5em)";
117 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(220px, 48px)'"); 117 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'minmax(220px, 48px)'");
118 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (80px, 50px)'"); 118 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'minmax(80px, 50px)'");
119 119
120 element = document.createElement("div"); 120 element = document.createElement("div");
121 document.body.appendChild(element); 121 document.body.appendChild(element);
122 element.style.gridColumns = "minmax(-webkit-min-content, 8vh)"; 122 element.style.gridDefinitionColumns = "minmax(-webkit-min-content, 8vh)";
123 element.style.gridRows = "minmax(10vw, -webkit-min-content)"; 123 element.style.gridDefinitionRows = "minmax(10vw, -webkit-min-content)";
124 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(-webkit-min-content, 48px)'"); 124 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'minmax(-webkit-min-content, 48px)'");
125 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (80px, -webkit-min-content)'"); 125 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'minmax(80px, -webkit-min-content)'");
126 126
127 element = document.createElement("div"); 127 element = document.createElement("div");
128 document.body.appendChild(element); 128 document.body.appendChild(element);
129 element.style.font = "10px Ahem"; 129 element.style.font = "10px Ahem";
130 element.style.gridColumns = "minmax(22em, -webkit-max-content)"; 130 element.style.gridDefinitionColumns = "minmax(22em, -webkit-max-content)";
131 element.style.gridRows = "minmax(-webkit-max-content, 5em)"; 131 element.style.gridDefinitionRows = "minmax(-webkit-max-content, 5em)";
132 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(220px, -webkit-max-content)'"); 132 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'minmax(220px, -webkit-max-content)'");
133 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (-webkit-max-content, 50px)'"); 133 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'minmax(-webkit-max-content, 50px)'");
134 134
135 element = document.createElement("div"); 135 element = document.createElement("div");
136 document.body.appendChild(element); 136 document.body.appendChild(element);
137 element.style.font = "10px Ahem"; 137 element.style.font = "10px Ahem";
138 element.style.gridColumns = "minmax(22em, -webkit-max-content)"; 138 element.style.gridDefinitionColumns = "minmax(22em, -webkit-max-content)";
139 element.style.gridRows = "minmax(-webkit-max-content, 5em)"; 139 element.style.gridDefinitionRows = "minmax(-webkit-max-content, 5em)";
140 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(220px, -webkit-max-content)'"); 140 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'minmax(220px, -webkit-max-content)'");
141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (-webkit-max-content, 50px)'"); 141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'minmax(-webkit-max-content, 50px)'");
142 142
143 element = document.createElement("div"); 143 element = document.createElement("div");
144 document.body.appendChild(element); 144 document.body.appendChild(element);
145 element.style.gridColumns = "minmax(-webkit-min-content, -webkit-max-content)"; 145 element.style.gridDefinitionColumns = "minmax(-webkit-min-content, -webkit-max-c ontent)";
146 element.style.gridRows = "minmax(-webkit-max-content, -webkit-min-content)"; 146 element.style.gridDefinitionRows = "minmax(-webkit-max-content, -webkit-min-cont ent)";
147 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(-webkit-min-content, -webkit-max-content)'"); 147 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'minmax(-webkit-min-content, -webkit-max-content)'");
148 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (-webkit-max-content, -webkit-min-content)'"); 148 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'minmax(-webkit-max-content, -webkit-min-content)'");
149 149
150 // Unit comparison should be case-insensitive. 150 // Unit comparison should be case-insensitive.
151 element = document.createElement("div"); 151 element = document.createElement("div");
152 document.body.appendChild(element); 152 document.body.appendChild(element);
153 element.style.gridColumns = "3600Fr"; 153 element.style.gridDefinitionColumns = "3600Fr";
154 element.style.gridRows = "154fR"; 154 element.style.gridDefinitionRows = "154fR";
155 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'360 0fr'"); 155 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'3600fr'");
156 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'154fr' "); 156 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'154fr'");
157 157
158 // Float values are allowed. 158 // Float values are allowed.
159 element = document.createElement("div"); 159 element = document.createElement("div");
160 document.body.appendChild(element); 160 document.body.appendChild(element);
161 element.style.gridColumns = "3.1459fr"; 161 element.style.gridDefinitionColumns = "3.1459fr";
162 element.style.gridRows = "2.718fr"; 162 element.style.gridDefinitionRows = "2.718fr";
163 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'3.1 459fr'"); 163 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'3.1459fr'");
164 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'2.718f r'"); 164 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'2.718fr'");
165 165
166 // A leading '+' is allowed. 166 // A leading '+' is allowed.
167 element = document.createElement("div"); 167 element = document.createElement("div");
168 document.body.appendChild(element); 168 document.body.appendChild(element);
169 element.style.gridColumns = "+3fr"; 169 element.style.gridDefinitionColumns = "+3fr";
170 element.style.gridRows = "+4fr"; 170 element.style.gridDefinitionRows = "+4fr";
171 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'3fr '"); 171 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'3fr'");
172 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'4fr'") ; 172 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'4fr'");
173 173
174 debug(""); 174 debug("");
175 debug("Test setting grid-columns and grid-rows to bad values through JS"); 175 debug("Test setting grid-definition-columns and grid-definition-rows to bad valu es through JS");
176 element = document.createElement("div"); 176 element = document.createElement("div");
177 document.body.appendChild(element); 177 document.body.appendChild(element);
178 // No comma. 178 // No comma.
179 element.style.gridColumns = "minmax(10px 20px)"; 179 element.style.gridDefinitionColumns = "minmax(10px 20px)";
180 // Only 1 argument provided. 180 // Only 1 argument provided.
181 element.style.gridRows = "minmax(10px)"; 181 element.style.gridDefinitionRows = "minmax(10px)";
182 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 182 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
183 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 183 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
184 184
185 element = document.createElement("div"); 185 element = document.createElement("div");
186 document.body.appendChild(element); 186 document.body.appendChild(element);
187 // Nested minmax. 187 // Nested minmax.
188 element.style.gridColumns = "minmax(minmax(10px, 20px), 20px)"; 188 element.style.gridDefinitionColumns = "minmax(minmax(10px, 20px), 20px)";
189 // Only 2 arguments are allowed. 189 // Only 2 arguments are allowed.
190 element.style.gridRows = "minmax(10px, 20px, 30px)"; 190 element.style.gridDefinitionRows = "minmax(10px, 20px, 30px)";
191 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 191 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
192 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 192 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
193 193
194 element = document.createElement("div"); 194 element = document.createElement("div");
195 document.body.appendChild(element); 195 document.body.appendChild(element);
196 // No breadth value. 196 // No breadth value.
197 element.style.gridColumns = "minmax()"; 197 element.style.gridDefinitionColumns = "minmax()";
198 // No comma. 198 // No comma.
199 element.style.gridRows = "minmax(30px 30% 30em)"; 199 element.style.gridDefinitionRows = "minmax(30px 30% 30em)";
200 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 200 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
201 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 201 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
202 202
203 element = document.createElement("div"); 203 element = document.createElement("div");
204 document.body.appendChild(element); 204 document.body.appendChild(element);
205 // Auto is not allowed inside minmax. 205 // Auto is not allowed inside minmax.
206 element.style.gridColumns = "minmax(auto, 8vh)"; 206 element.style.gridDefinitionColumns = "minmax(auto, 8vh)";
207 element.style.gridRows = "minmax(10vw, auto)"; 207 element.style.gridDefinitionRows = "minmax(10vw, auto)";
208 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 208 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
209 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 209 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
210 210
211 element = document.createElement("div"); 211 element = document.createElement("div");
212 document.body.appendChild(element); 212 document.body.appendChild(element);
213 element.style.gridColumns = "-2fr"; 213 element.style.gridDefinitionColumns = "-2fr";
214 element.style.gridRows = "3ffr"; 214 element.style.gridDefinitionRows = "3ffr";
215 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 215 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
216 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 216 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
217 217
218 element = document.createElement("div"); 218 element = document.createElement("div");
219 document.body.appendChild(element); 219 document.body.appendChild(element);
220 element.style.gridColumns = "-2.05fr"; 220 element.style.gridDefinitionColumns = "-2.05fr";
221 element.style.gridRows = "+-3fr"; 221 element.style.gridDefinitionRows = "+-3fr";
222 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 222 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
223 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 223 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
224 224
225 element = document.createElement("div"); 225 element = document.createElement("div");
226 document.body.appendChild(element); 226 document.body.appendChild(element);
227 element.style.gridColumns = "0fr"; 227 element.style.gridDefinitionColumns = "0fr";
228 element.style.gridRows = "1r"; 228 element.style.gridDefinitionRows = "1r";
229 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 229 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
230 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 230 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
231 231
232 element = document.createElement("div"); 232 element = document.createElement("div");
233 document.body.appendChild(element); 233 document.body.appendChild(element);
234 element.style.gridColumns = ".0000fr"; 234 element.style.gridDefinitionColumns = ".0000fr";
235 element.style.gridRows = "13 fr"; // A dimension doesn't allow spaces between th e number and the unit. 235 element.style.gridDefinitionRows = "13 fr"; // A dimension doesn't allow spaces between the number and the unit.
236 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 236 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
237 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 237 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
238 238
239 element.style.gridColumns = "7.-fr"; 239 element.style.gridDefinitionColumns = "7.-fr";
240 element.style.gridRows = "-8,0fr"; 240 element.style.gridDefinitionRows = "-8,0fr";
241 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 241 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
242 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 242 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
243 243
244 debug(""); 244 debug("");
245 debug("Test setting grid-columns and grid-rows back to 'none' through JS"); 245 debug("Test setting grid-definition-columns and grid-definition-rows back to 'no ne' through JS");
246 element.style.gridColumns = "18px"; 246 element.style.gridDefinitionColumns = "18px";
247 element.style.gridRows = "66px"; 247 element.style.gridDefinitionRows = "66px";
248 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'18p x'"); 248 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'18px'");
249 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'66px'" ); 249 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'66px'");
250 element.style.gridColumns = "none"; 250 element.style.gridDefinitionColumns = "none";
251 element.style.gridRows = "none"; 251 element.style.gridDefinitionRows = "none";
252 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'non e'"); 252 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column s')", "'none'");
253 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'none'" ); 253 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows') ", "'none'");
254 254
255 function testInherit() 255 function testInherit()
256 { 256 {
257 var parentElement = document.createElement("div"); 257 var parentElement = document.createElement("div");
258 document.body.appendChild(parentElement); 258 document.body.appendChild(parentElement);
259 parentElement.style.gridColumns = "50px 'last'"; 259 parentElement.style.gridDefinitionColumns = "50px 'last'";
260 parentElement.style.gridRows = "'first' 101%"; 260 parentElement.style.gridDefinitionRows = "'first' 101%";
261 261
262 element = document.createElement("div"); 262 element = document.createElement("div");
263 parentElement.appendChild(element); 263 parentElement.appendChild(element);
264 element.style.gridColumns = "inherit"; 264 element.style.gridDefinitionColumns = "inherit";
265 element.style.gridRows = "inherit"; 265 element.style.gridDefinitionRows = "inherit";
266 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", " '50px last'"); 266 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co lumns')", "'50px last'");
267 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'fi rst 101%'"); 267 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro ws')", "'first 101%'");
268 268
269 document.body.removeChild(parentElement); 269 document.body.removeChild(parentElement);
270 } 270 }
271 debug(""); 271 debug("");
272 debug("Test setting grid-columns and grid-rows to 'inherit' through JS"); 272 debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit ' through JS");
273 testInherit(); 273 testInherit();
274 274
275 function testInitial() 275 function testInitial()
276 { 276 {
277 element = document.createElement("div"); 277 element = document.createElement("div");
278 document.body.appendChild(element); 278 document.body.appendChild(element);
279 element.style.gridColumns = "150% 'last'"; 279 element.style.gridDefinitionColumns = "150% 'last'";
280 element.style.gridRows = "'first' 1fr"; 280 element.style.gridDefinitionRows = "'first' 1fr";
281 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", " '150% last'"); 281 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co lumns')", "'150% last'");
282 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'fi rst 1fr'"); 282 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro ws')", "'first 1fr'");
283 283
284 element.style.gridColumns = "initial"; 284 element.style.gridDefinitionColumns = "initial";
285 element.style.gridRows = "initial"; 285 element.style.gridDefinitionRows = "initial";
286 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", " 'none'"); 286 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co lumns')", "'none'");
287 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'no ne'"); 287 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro ws')", "'none'");
288 288
289 document.body.removeChild(element); 289 document.body.removeChild(element);
290 } 290 }
291 debug(""); 291 debug("");
292 debug("Test setting grid-columns and grid-rows to 'initial' through JS"); 292 debug("Test setting grid-definition-columns and grid-definition-rows to 'initial ' through JS");
293 testInitial(); 293 testInitial();
OLDNEW
« no previous file with comments | « 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') | LayoutTests/ietestcenter/css3/grid/grid-items-005-expected.htm » ('J')

Powered by Google App Engine
This is Rietveld 408576698