OLD | NEW |
---|---|
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <style> | 5 <style> |
6 .gridAutoFlowColumnDense { | |
7 grid-auto-flow: column dense; | |
8 } | |
9 .gridAutoFlowRowDense { | |
10 grid-auto-flow: row dense; | |
11 } | |
12 .gridAutoFlowDenseColumn { | |
13 grid-auto-flow: dense column; | |
14 } | |
15 .gridAutoFlowDenseRow { | |
16 grid-auto-flow: dense row; | |
17 } | |
18 .gridAutoFlowStackColumn { | |
19 grid-auto-flow: stack column; | |
20 } | |
21 .gridAutoFlowStackRow { | |
22 grid-auto-flow: stack row; | |
23 } | |
24 .gridAutoFlowColumnStack { | |
25 grid-auto-flow: column stack; | |
26 } | |
27 .gridAutoFlowRowStack { | |
28 grid-auto-flow: row stack; | |
29 } | |
6 .gridAutoFlowInherit { | 30 .gridAutoFlowInherit { |
7 grid-auto-flow: inherit; | 31 grid-auto-flow: inherit; |
8 } | 32 } |
9 /* Bad values. */ | 33 /* Bad values. */ |
34 .gridAutoFlowNone { | |
35 grid-auto-flow: none; | |
36 } | |
10 .gridAutoFlowRows { | 37 .gridAutoFlowRows { |
11 grid-auto-flow: rows; | 38 grid-auto-flow: rows; |
12 } | 39 } |
13 .gridAutoFlowColumns { | 40 .gridAutoFlowColumns { |
14 grid-auto-flow: columns; | 41 grid-auto-flow: columns; |
15 } | 42 } |
43 .gridAutoFlowDense { | |
44 grid-auto-flow: dense; | |
45 } | |
46 .gridAutoFlowColumnFoo { | |
47 grid-auto-flow: column foo; | |
48 } | |
49 .gridAutoFlowColumnColumn { | |
50 grid-auto-flow: column column; | |
51 } | |
52 .gridAutoFlowDenseColumnStack { | |
53 grid-auto-flow: dense column stack; | |
54 } | |
55 .gridAutoFlowDenseRowStack { | |
56 grid-auto-flow: dense row stack; | |
57 } | |
58 .gridAutoFlowStackRowRow { | |
59 grid-auto-flow: stack row row; | |
60 } | |
16 </style> | 61 </style> |
17 <script src="../../resources/js-test.js"></script> | 62 <script src="../../resources/js-test.js"></script> |
18 </head> | 63 </head> |
19 <body> | 64 <body> |
20 <div class="grid" id="gridInitial"></div> | 65 <div class="grid" id="gridInitial"></div> |
21 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> | |
22 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div> | 66 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div> |
23 <div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div> | 67 <div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div> |
68 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> | |
69 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> | |
70 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> | |
71 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div> | |
72 <div class="grid gridAutoFlowStack" id="gridAutoFlowStack"></div> | |
73 <div class="grid gridAutoFlowStackColumn" id="gridAutoFlowStackColumn"></div> | |
74 <div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div> | |
75 <div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div> | |
76 <div class="grid gridAutoFlowRowStack" id="gridAutoFlowRowStack"></div> | |
24 <div class="grid gridAutoFlowColumn"> | 77 <div class="grid gridAutoFlowColumn"> |
25 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> | 78 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> |
26 </div> | 79 </div> |
27 <div class="grid gridAutoFlowColumn"> | 80 <div class="grid gridAutoFlowColumn"> |
28 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div> <div> | 81 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div> <div> |
29 </div> | 82 </div> |
83 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> | |
30 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> | 84 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> |
31 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> | 85 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> |
86 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> | |
87 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> | |
88 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> | |
89 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack" ></div> | |
90 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div > | |
91 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div> | |
32 <script> | 92 <script> |
33 description('Test that setting and getting grid-auto-flow works as expected' ); | 93 description('Test that setting and getting grid-auto-flow works as expected' ); |
34 | 94 |
35 debug("Test getting auto-flow set through CSS"); | 95 debug("Test getting auto-flow set through CSS"); |
36 var gridAutoFlowNone = document.getElementById("gridAutoFlowNone"); | |
37 shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('gr id-auto-flow')", "'none'"); | |
38 | |
39 var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn"); | 96 var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn"); |
40 shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue(' grid-auto-flow')", "'column'"); | 97 shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue(' grid-auto-flow')", "'column'"); |
41 | 98 |
42 var gridAutoFlowRow = document.getElementById("gridAutoFlowRow"); | 99 var gridAutoFlowRow = document.getElementById("gridAutoFlowRow"); |
43 shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('gri d-auto-flow')", "'row'"); | 100 shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('gri d-auto-flow')", "'row'"); |
44 | 101 |
102 var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDen se"); | |
103 shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyVa lue('grid-auto-flow')", "'column dense'"); | |
Julien - ping for review
2014/06/29 01:02:25
Nit: We should test both getComputedStyle and elem
Manuel Rego
2014/06/30 09:44:52
Ok, I'll do it in a different patch, as I'm just a
| |
104 | |
105 var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense"); | |
106 shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue ('grid-auto-flow')", "'row dense'"); | |
107 | |
108 var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColu mn"); | |
109 shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyVa lue('grid-auto-flow')", "'column dense'"); | |
110 | |
111 var gridAutoFlowDenseRow = document.getElementById("gridAutoFlowDenseRow"); | |
112 shouldBe("window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue ('grid-auto-flow')", "'row dense'"); | |
113 | |
114 var gridAutoFlowStack = document.getElementById("gridAutoFlowStack"); | |
115 shouldBe("window.getComputedStyle(gridAutoFlowStack, '').getPropertyValue('g rid-auto-flow')", "'stack row'"); | |
116 | |
117 var gridAutoFlowStackColumn = document.getElementById("gridAutoFlowStackColu mn"); | |
118 shouldBe("window.getComputedStyle(gridAutoFlowStackColumn, '').getPropertyVa lue('grid-auto-flow')", "'stack column'"); | |
119 | |
120 var gridAutoFlowStackRow = document.getElementById("gridAutoFlowStackRow"); | |
121 shouldBe("window.getComputedStyle(gridAutoFlowStackRow, '').getPropertyValue ('grid-auto-flow')", "'stack row'"); | |
122 | |
123 var gridAutoFlowColumnStack = document.getElementById("gridAutoFlowColumnSta ck"); | |
124 shouldBe("window.getComputedStyle(gridAutoFlowColumnStack, '').getPropertyVa lue('grid-auto-flow')", "'stack column'"); | |
125 | |
126 var gridAutoFlowRowStack = document.getElementById("gridAutoFlowRowStack"); | |
127 shouldBe("window.getComputedStyle(gridAutoFlowRowStack, '').getPropertyValue ('grid-auto-flow')", "'stack row'"); | |
128 | |
129 var gridAutoFlowNone = document.getElementById("gridAutoFlowNone"); | |
130 shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('gr id-auto-flow')", "'row'"); | |
131 | |
45 var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns"); | 132 var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns"); |
46 shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue( 'grid-auto-flow')", "'none'"); | 133 shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue( 'grid-auto-flow')", "'row'"); |
47 | 134 |
48 var gridAutoFlowRows = document.getElementById("gridAutoFlowRows"); | 135 var gridAutoFlowRows = document.getElementById("gridAutoFlowRows"); |
49 shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('gr id-auto-flow')", "'none'"); | 136 shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('gr id-auto-flow')", "'row'"); |
137 | |
138 var gridAutoFlowDense = document.getElementById("gridAutoFlowDense"); | |
139 shouldBe("window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('g rid-auto-flow')", "'row'"); | |
140 | |
141 var gridAutoFlowColumnFoo = document.getElementById("gridAutoFlowColumnFoo") ; | |
142 shouldBe("window.getComputedStyle(gridAutoFlowColumnFoo, '').getPropertyValu e('grid-auto-flow')", "'row'"); | |
143 | |
144 var gridAutoFlowColumnColumn = document.getElementById("gridAutoFlowColumnCo lumn"); | |
145 shouldBe("window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyV alue('grid-auto-flow')", "'row'"); | |
146 | |
147 var gridAutoFlowDenseColumnStack = document.getElementById("gridAutoFlowDens eColumnStack"); | |
148 shouldBe("window.getComputedStyle(gridAutoFlowDenseColumnStack, '').getPrope rtyValue('grid-auto-flow')", "'row'"); | |
149 | |
150 var gridAutoFlowDenseRowStack = document.getElementById("gridAutoFlowDenseRo wStack"); | |
151 shouldBe("window.getComputedStyle(gridAutoFlowDenseRowStack, '').getProperty Value('grid-auto-flow')", "'row'"); | |
152 | |
153 var gridAutoFlowStackRowRow = document.getElementById("gridAutoFlowStackRowR ow"); | |
154 shouldBe("window.getComputedStyle(gridAutoFlowStackRowRow, '').getPropertyVa lue('grid-auto-flow')", "'row'"); | |
50 | 155 |
51 var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit"); | 156 var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit"); |
52 shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue( 'grid-auto-flow')", "'column'"); | 157 shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue( 'grid-auto-flow')", "'column'"); |
53 | 158 |
54 var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit") ; | 159 var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit") ; |
55 shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValu e('grid-auto-flow')", "'none'"); | 160 shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValu e('grid-auto-flow')", "'row'"); |
56 | 161 |
57 debug(""); | 162 debug(""); |
58 debug("Test the initial value"); | 163 debug("Test the initial value"); |
59 element = document.createElement("div"); | 164 element = document.createElement("div"); |
60 document.body.appendChild(element); | 165 document.body.appendChild(element); |
61 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'none'"); | 166 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); |
62 | 167 |
63 debug(""); | 168 debug(""); |
64 debug("Test getting and setting grid-auto-flow through JS"); | 169 debug("Test getting and setting grid-auto-flow through JS"); |
65 element.style.gridAutoFlow = "column"; | 170 element.style.gridAutoFlow = "column"; |
66 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column'"); | 171 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column'"); |
67 | 172 element.style.gridAutoFlow = "column dense"; |
173 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column dense'"); | |
174 element.style.gridAutoFlow = "row dense"; | |
175 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row dense'"); | |
176 element.style.gridAutoFlow = "dense column"; | |
177 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column dense'"); | |
178 element.style.gridAutoFlow = "dense row"; | |
179 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row dense'"); | |
180 element.style.gridAutoFlow = "row"; | |
181 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
182 element.style.gridAutoFlow = "stack"; | |
183 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'"); | |
184 element.style.gridAutoFlow = "stack column"; | |
185 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack column'"); | |
186 element.style.gridAutoFlow = "stack row"; | |
187 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'"); | |
188 element.style.gridAutoFlow = "column stack"; | |
189 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack column'"); | |
190 element.style.gridAutoFlow = "row stack"; | |
191 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'"); | |
192 | |
193 debug(""); | |
194 debug("Test getting and setting bad values for grid-auto-flow through JS"); | |
68 element = document.createElement("div"); | 195 element = document.createElement("div"); |
69 document.body.appendChild(element); | 196 document.body.appendChild(element); |
70 element.style.gridAutoFlow = "row"; | |
71 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
72 | |
73 debug(""); | |
74 debug("Test getting and setting bad values for grid-auto-flow through JS"); | |
75 element.style.gridAutoFlow = "noone"; | 197 element.style.gridAutoFlow = "noone"; |
76 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | 198 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); |
199 element.style.gridAutoFlow = "dense"; | |
200 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
201 element.style.gridAutoFlow = "column column"; | |
202 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
203 element.style.gridAutoFlow = "dense column stack"; | |
204 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
205 element.style.gridAutoFlow = "dense row stack"; | |
206 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
207 element.style.gridAutoFlow = "stack row row"; | |
208 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); | |
77 | 209 |
78 debug(""); | 210 debug(""); |
79 debug("Test setting grid-auto-flow to 'initial' through JS"); | 211 debug("Test setting grid-auto-flow to 'initial' through JS"); |
80 // Reusing the value so that we can check that it is set back to its initial value. | 212 // Reusing the value so that we can check that it is set back to its initial value. |
81 element.style.gridAutoFlow = "initial"; | 213 element.style.gridAutoFlow = "initial"; |
82 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'none'"); | 214 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); |
83 </script> | 215 </script> |
84 </body> | 216 </body> |
85 </html> | 217 </html> |
OLD | NEW |