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'"); |
| 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 |