OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | 4 <script> |
5 if (window.testRunner) | 5 if (window.testRunner) |
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
7 </script> | 7 </script> |
8 <style> | 8 <style> |
9 .gridItemWithPositiveInteger { | 9 .gridItemWithPositiveInteger { |
10 -webkit-grid-column: 10; | 10 -webkit-grid-column: 10; |
11 -webkit-grid-row: 15; | 11 -webkit-grid-row: 15; |
12 } | 12 } |
13 .gridItemWithNegativeInteger { | 13 .gridItemWithNegativeInteger { |
14 -webkit-grid-column: -10; | 14 -webkit-grid-column: -10; |
15 -webkit-grid-row: -15; | 15 -webkit-grid-row: -15; |
16 } | 16 } |
17 .gridItemWithAuto { | 17 .gridItemWithAuto { |
18 -webkit-grid-column: auto; | 18 -webkit-grid-column: auto; |
19 -webkit-grid-row: auto; | 19 -webkit-grid-row: auto; |
20 } | 20 } |
21 .gridItemWith2Integer { | 21 .gridItemWith2Integer { |
22 -webkit-grid-column: 10 / 15; | 22 -webkit-grid-column: 10 / 15; |
23 -webkit-grid-row: 5 / 5; | 23 -webkit-grid-row: 5 / 5; |
24 } | 24 } |
25 .gridItemWithNegativePositiveInteger { | 25 .gridItemWithNegativePositiveInteger { |
26 -webkit-grid-column: 10 / -10; | 26 -webkit-grid-column: 10 / -10; |
27 -webkit-grid-row: -8 / 5; | 27 -webkit-grid-row: -8 / 5; |
28 } | 28 } |
| 29 .gridItemWithBeforeSpan { |
| 30 -webkit-grid-column: span 2 / 4; |
| 31 -webkit-grid-row: 3 / span 5; |
| 32 } |
| 33 .gridItemWithAfterSpan { |
| 34 -webkit-grid-column: 2 span / 4; |
| 35 -webkit-grid-row: 3 / 5 span; |
| 36 } |
| 37 .gridItemWith2OnlySpan { |
| 38 -webkit-grid-column: span / span; |
| 39 -webkit-grid-row: span / span; |
| 40 } |
29 .gridItemWith2Auto { | 41 .gridItemWith2Auto { |
30 -webkit-grid-column: auto / auto; | 42 -webkit-grid-column: auto / auto; |
31 -webkit-grid-row: auto / auto; | 43 -webkit-grid-row: auto / auto; |
32 } | 44 } |
33 .gridItemWithBothLongHand { | 45 .gridItemWithBothLongHand { |
34 -webkit-grid-end: 11; | 46 -webkit-grid-end: 11; |
35 -webkit-grid-before: 4; | 47 -webkit-grid-before: 4; |
36 } | 48 } |
37 .gridItemWithNoSpace { | 49 .gridItemWithNoSpace { |
38 -webkit-grid-column: auto/1; | 50 -webkit-grid-column: auto/1; |
39 -webkit-grid-row: 5/auto; | 51 -webkit-grid-row: 5/auto; |
40 } | 52 } |
41 </style> | 53 </style> |
42 <script src="../js/resources/js-test-pre.js"></script> | 54 <script src="../js/resources/js-test-pre.js"></script> |
43 </head> | 55 </head> |
44 <body> | 56 <body> |
45 <!-- The first has no properties set on it. --> | 57 <!-- The first has no properties set on it. --> |
46 <div id="gridElement"></div> | 58 <div id="gridElement"></div> |
47 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div> | 59 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div> |
48 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div> | 60 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div> |
49 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div> | 61 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div> |
50 <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div> | 62 <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div> |
51 <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiv
eIntegerElement"></div> | 63 <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiv
eIntegerElement"></div> |
52 <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div> | 64 <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div> |
| 65 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div> |
| 66 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div> |
| 67 <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div> |
53 <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gr
idItemWithBothShortLongHandElement"></div> | 68 <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gr
idItemWithBothShortLongHandElement"></div> |
54 <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div> | 69 <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div> |
55 <script> | 70 <script> |
56 description('Test that setting and getting grid-column and grid-row works as
expected'); | 71 description('Test that setting and getting grid-column and grid-row works as
expected'); |
57 | 72 |
58 debug("Test getting -webkit-grid-column and -webkit-grid-row set through CSS
"); | 73 debug("Test getting -webkit-grid-column and -webkit-grid-row set through CSS
"); |
59 var gridElement = document.getElementById("gridElement"); | 74 var gridElement = document.getElementById("gridElement"); |
60 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-c
olumn')", "'auto / auto'"); | 75 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-c
olumn')", "'auto / auto'"); |
61 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-s
tart')", "'auto'"); | 76 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-s
tart')", "'auto'"); |
62 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-e
nd')", "'auto'"); | 77 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-e
nd')", "'auto'"); |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
97 shouldBe("getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue
('-webkit-grid-after')", "'5'"); | 112 shouldBe("getComputedStyle(gridItemWith2IntegerElement, '').getPropertyValue
('-webkit-grid-after')", "'5'"); |
98 | 113 |
99 var gridItemWithNegativePositiveIntegerElement = document.getElementById("gr
idItemWithNegativePositiveIntegerElement"); | 114 var gridItemWithNegativePositiveIntegerElement = document.getElementById("gr
idItemWithNegativePositiveIntegerElement"); |
100 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-column')", "'10 / -10'"); | 115 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-column')", "'10 / -10'"); |
101 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-start')", "'10'"); | 116 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-start')", "'10'"); |
102 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-end')", "'-10'"); | 117 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-end')", "'-10'"); |
103 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-row')", "'-8 / 5'"); | 118 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-row')", "'-8 / 5'"); |
104 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-before')", "'-8'"); | 119 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-before')", "'-8'"); |
105 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-after')", "'5'"); | 120 shouldBe("getComputedStyle(gridItemWithNegativePositiveIntegerElement, '').g
etPropertyValue('-webkit-grid-after')", "'5'"); |
106 | 121 |
| 122 var gridItemWithBeforeSpanElement = document.getElementById("gridItemWithBef
oreSpanElement"); |
| 123 shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyVal
ue('-webkit-grid-column')", "'span 2 / 4'"); |
| 124 shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyVal
ue('-webkit-grid-start')", "'span 2'"); |
| 125 shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyVal
ue('-webkit-grid-end')", "'4'"); |
| 126 shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyVal
ue('-webkit-grid-row')", "'3 / span 5'"); |
| 127 shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyVal
ue('-webkit-grid-before')", "'3'"); |
| 128 shouldBe("getComputedStyle(gridItemWithBeforeSpanElement, '').getPropertyVal
ue('-webkit-grid-after')", "'span 5'"); |
| 129 |
| 130 var gridItemWithAfterSpanElement = document.getElementById("gridItemWithAfte
rSpanElement"); |
| 131 shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValu
e('-webkit-grid-column')", "'span 2 / 4'"); |
| 132 shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValu
e('-webkit-grid-start')", "'span 2'"); |
| 133 shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValu
e('-webkit-grid-end')", "'4'"); |
| 134 shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValu
e('-webkit-grid-row')", "'3 / span 5'"); |
| 135 shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValu
e('-webkit-grid-before')", "'3'"); |
| 136 shouldBe("getComputedStyle(gridItemWithAfterSpanElement, '').getPropertyValu
e('-webkit-grid-after')", "'span 5'"); |
| 137 |
| 138 var gridItemWith2OnlySpanElement = document.getElementById("gridItemWith2Onl
ySpanElement"); |
| 139 shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValu
e('-webkit-grid-column')", "'auto / auto'"); |
| 140 shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValu
e('-webkit-grid-start')", "'auto'"); |
| 141 shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValu
e('-webkit-grid-end')", "'auto'"); |
| 142 shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValu
e('-webkit-grid-row')", "'auto / auto'"); |
| 143 shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValu
e('-webkit-grid-before')", "'auto'"); |
| 144 shouldBe("getComputedStyle(gridItemWith2OnlySpanElement, '').getPropertyValu
e('-webkit-grid-after')", "'auto'"); |
| 145 |
107 var gridItemWith2AutoElement = document.getElementById("gridItemWith2AutoEle
ment"); | 146 var gridItemWith2AutoElement = document.getElementById("gridItemWith2AutoEle
ment"); |
108 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-column')", "'auto / auto'"); | 147 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-column')", "'auto / auto'"); |
109 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-start')", "'auto'"); | 148 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-start')", "'auto'"); |
110 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-end')", "'auto'"); | 149 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-end')", "'auto'"); |
111 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-row')", "'auto / auto'"); | 150 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-row')", "'auto / auto'"); |
112 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-before')", "'auto'"); | 151 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-before')", "'auto'"); |
113 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-after')", "'auto'"); | 152 shouldBe("getComputedStyle(gridItemWith2AutoElement, '').getPropertyValue('-
webkit-grid-after')", "'auto'"); |
114 | 153 |
115 var gridItemWithBothShortLongHandElement = document.getElementById("gridItem
WithBothShortLongHandElement"); | 154 var gridItemWithBothShortLongHandElement = document.getElementById("gridItem
WithBothShortLongHandElement"); |
116 shouldBe("getComputedStyle(gridItemWithBothShortLongHandElement, '').getProp
ertyValue('-webkit-grid-column')", "'10 / 11'"); | 155 shouldBe("getComputedStyle(gridItemWithBothShortLongHandElement, '').getProp
ertyValue('-webkit-grid-column')", "'10 / 11'"); |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
178 element.style.webkitGridRow = "1 / 10"; | 217 element.style.webkitGridRow = "1 / 10"; |
179 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'10 / 55'"); | 218 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'10 / 55'"); |
180 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'10'"); | 219 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'10'"); |
181 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'55'"); | 220 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'55'"); |
182 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'1 / 10'"); | 221 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'1 / 10'"); |
183 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'1'"); | 222 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'1'"); |
184 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'10'"); | 223 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'10'"); |
185 | 224 |
186 element = document.createElement("div"); | 225 element = document.createElement("div"); |
187 document.body.appendChild(element); | 226 document.body.appendChild(element); |
| 227 element.style.webkitGridColumn = "span 5 / 5"; |
| 228 element.style.webkitGridRow = "4 / span 4"; |
| 229 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'span 5 / 5'"); |
| 230 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'span 5'"); |
| 231 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'5'"); |
| 232 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'4 / span 4'"); |
| 233 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'4'"); |
| 234 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'span 4'"); |
| 235 |
| 236 element = document.createElement("div"); |
| 237 document.body.appendChild(element); |
188 element.style.webkitGridColumn = "-5 / 5"; | 238 element.style.webkitGridColumn = "-5 / 5"; |
189 element.style.webkitGridRow = "4 / -4"; | 239 element.style.webkitGridRow = "4 / -4"; |
190 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'-5 / 5'"); | 240 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'-5 / 5'"); |
191 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'-5'"); | 241 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'-5'"); |
192 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'5'"); | 242 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'5'"); |
193 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'4 / -4'"); | 243 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'4 / -4'"); |
194 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'4'"); | 244 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'4'"); |
195 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'-4'"); | 245 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'-4'"); |
196 | 246 |
197 element = document.createElement("div"); | 247 element = document.createElement("div"); |
(...skipping 11 matching lines...) Expand all Loading... |
209 document.body.appendChild(element); | 259 document.body.appendChild(element); |
210 element.style.webkitGridColumn = "auto / 5"; | 260 element.style.webkitGridColumn = "auto / 5"; |
211 element.style.webkitGridRow = "auto / 8"; | 261 element.style.webkitGridRow = "auto / 8"; |
212 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'auto / 5'"); | 262 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'auto / 5'"); |
213 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'auto'"); | 263 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'auto'"); |
214 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'5'"); | 264 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'5'"); |
215 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'auto / 8'"); | 265 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'auto / 8'"); |
216 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'auto'"); | 266 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'auto'"); |
217 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'8'"); | 267 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'8'"); |
218 | 268 |
| 269 element = document.createElement("div"); |
| 270 document.body.appendChild(element); |
| 271 element.style.webkitGridColumn = "span / 3"; |
| 272 element.style.webkitGridRow = "5 / span"; |
| 273 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'span 1 / 3'"); |
| 274 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'span 1'"); |
| 275 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'3'"); |
| 276 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'5 / span 1'"); |
| 277 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'5'"); |
| 278 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'span 1'"); |
| 279 |
219 debug(""); | 280 debug(""); |
220 debug("Test setting grid-column and grid-row back to 'auto' through JS"); | 281 debug("Test setting grid-column and grid-row back to 'auto' through JS"); |
221 element.style.webkitGridColumn = "18 / 19"; | 282 element.style.webkitGridColumn = "18 / 19"; |
222 element.style.webkitGridRow = "66 / 68"; | 283 element.style.webkitGridRow = "66 / 68"; |
223 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'18 / 19'"); | 284 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'18 / 19'"); |
224 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'18'"); | 285 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'18'"); |
225 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'19'"); | 286 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'19'"); |
226 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'66 / 68'"); | 287 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'66 / 68'"); |
227 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'66'"); | 288 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'66'"); |
228 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'68'"); | 289 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'68'"); |
(...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
319 element = document.createElement("div"); | 380 element = document.createElement("div"); |
320 document.body.appendChild(element); | 381 document.body.appendChild(element); |
321 element.style.webkitGridColumn = "0"; | 382 element.style.webkitGridColumn = "0"; |
322 element.style.webkitGridRow = "0"; | 383 element.style.webkitGridRow = "0"; |
323 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'auto / auto'"); | 384 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'auto / auto'"); |
324 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'auto'"); | 385 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'auto'"); |
325 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'auto'"); | 386 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'auto'"); |
326 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'auto / auto'"); | 387 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'auto / auto'"); |
327 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'auto'"); | 388 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'auto'"); |
328 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'auto'"); | 389 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'auto'"); |
| 390 |
| 391 element = document.createElement("div"); |
| 392 document.body.appendChild(element); |
| 393 element.style.webkitGridColumn = "span span / span span"; |
| 394 element.style.webkitGridRow = "span span / span span"; |
| 395 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'auto / auto'"); |
| 396 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'auto'"); |
| 397 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'auto'"); |
| 398 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'auto / auto'"); |
| 399 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'auto'"); |
| 400 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'auto'"); |
| 401 |
| 402 // Negative integer or 0 are invalid. |
| 403 element = document.createElement("div"); |
| 404 document.body.appendChild(element); |
| 405 element.style.webkitGridColumn = "span -1 / -2 span"; |
| 406 element.style.webkitGridRow = "-3 span / span -4"; |
| 407 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'auto / auto'"); |
| 408 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'auto'"); |
| 409 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'auto'"); |
| 410 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'auto / auto'"); |
| 411 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'auto'"); |
| 412 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'auto'"); |
| 413 |
| 414 element = document.createElement("div"); |
| 415 document.body.appendChild(element); |
| 416 element.style.webkitGridColumn = "0 span / span 0"; |
| 417 element.style.webkitGridRow = "span 0 / 0 span"; |
| 418 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'auto / auto'"); |
| 419 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'auto'"); |
| 420 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'auto'"); |
| 421 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'auto / auto'"); |
| 422 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'auto'"); |
| 423 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'auto'"); |
| 424 |
| 425 element = document.createElement("div"); |
| 426 document.body.appendChild(element); |
| 427 element.style.webkitGridColumn = "5 span / span 2"; |
| 428 element.style.webkitGridRow = "span 4 / 3 span"; |
| 429 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum
n')", "'auto / auto'"); |
| 430 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-start
')", "'auto'"); |
| 431 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-end')
", "'auto'"); |
| 432 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')
", "'auto / auto'"); |
| 433 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-befor
e')", "'auto'"); |
| 434 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-after
')", "'auto'"); |
329 </script> | 435 </script> |
330 <script src="../js/resources/js-test-post.js"></script> | 436 <script src="../js/resources/js-test-post.js"></script> |
331 </body> | 437 </body> |
332 </html> | 438 </html> |
OLD | NEW |