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 { | 6 .gridAutoFlowColumnDense { |
7 grid-auto-flow: column dense; | 7 grid-auto-flow: column dense; |
8 } | 8 } |
9 .gridAutoFlowRowDense { | 9 .gridAutoFlowRowDense { |
10 grid-auto-flow: row dense; | 10 grid-auto-flow: row dense; |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
56 grid-auto-flow: dense row stack; | 56 grid-auto-flow: dense row stack; |
57 } | 57 } |
58 .gridAutoFlowStackRowRow { | 58 .gridAutoFlowStackRowRow { |
59 grid-auto-flow: stack row row; | 59 grid-auto-flow: stack row row; |
60 } | 60 } |
61 </style> | 61 </style> |
62 <script src="../../resources/js-test.js"></script> | 62 <script src="../../resources/js-test.js"></script> |
63 </head> | 63 </head> |
64 <body> | 64 <body> |
65 <div class="grid" id="gridInitial"></div> | 65 <div class="grid" id="gridInitial"></div> |
66 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div> | 66 <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse"></div> |
67 <div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div> | 67 <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse"></div> |
68 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> | 68 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> |
69 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> | 69 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> |
70 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> | 70 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> |
71 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div> | 71 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div> |
72 <div class="grid gridAutoFlowStack" id="gridAutoFlowStack"></div> | 72 <div class="grid gridAutoFlowStack" id="gridAutoFlowStack"></div> |
73 <div class="grid gridAutoFlowStackColumn" id="gridAutoFlowStackColumn"></div> | 73 <div class="grid gridAutoFlowStackColumn" id="gridAutoFlowStackColumn"></div> |
74 <div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div> | 74 <div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div> |
75 <div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div> | 75 <div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div> |
76 <div class="grid gridAutoFlowRowStack" id="gridAutoFlowRowStack"></div> | 76 <div class="grid gridAutoFlowRowStack" id="gridAutoFlowRowStack"></div> |
77 <div class="grid gridAutoFlowColumn"> | 77 <div class="grid gridAutoFlowColumnSparse"> |
78 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> | 78 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> |
79 </div> | 79 </div> |
80 <div class="grid gridAutoFlowColumn"> | 80 <div class="grid gridAutoFlowColumnSparse"> |
81 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div>
<div> | 81 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div>
<div> |
82 </div> | 82 </div> |
83 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> | 83 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> |
84 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> | 84 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> |
85 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> | 85 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> |
86 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> | 86 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> |
87 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> | 87 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> |
88 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> | 88 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> |
89 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack"
></div> | 89 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack"
></div> |
90 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div
> | 90 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div
> |
91 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div> | 91 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div> |
92 <script> | 92 <script> |
93 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'
); |
94 | 94 |
95 debug("Test getting auto-flow set through CSS"); | 95 debug("Test getting auto-flow set through CSS"); |
96 var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn"); | 96 var gridAutoFlowColumnSparse = document.getElementById("gridAutoFlowColumnSp
arse"); |
97 shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue('
grid-auto-flow')", "'column'"); | 97 shouldBe("window.getComputedStyle(gridAutoFlowColumnSparse, '').getPropertyV
alue('grid-auto-flow')", "'column'"); |
98 | 98 |
99 var gridAutoFlowRow = document.getElementById("gridAutoFlowRow"); | 99 var gridAutoFlowRowSparse = document.getElementById("gridAutoFlowRowSparse")
; |
100 shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('gri
d-auto-flow')", "'row'"); | 100 shouldBe("window.getComputedStyle(gridAutoFlowRowSparse, '').getPropertyValu
e('grid-auto-flow')", "'row'"); |
101 | 101 |
102 var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDen
se"); | 102 var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDen
se"); |
103 shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyVa
lue('grid-auto-flow')", "'column dense'"); | 103 shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyVa
lue('grid-auto-flow')", "'column dense'"); |
104 | 104 |
105 var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense"); | 105 var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense"); |
106 shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue
('grid-auto-flow')", "'row dense'"); | 106 shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue
('grid-auto-flow')", "'row dense'"); |
107 | 107 |
108 var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColu
mn"); | 108 var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColu
mn"); |
109 shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyVa
lue('grid-auto-flow')", "'column dense'"); | 109 shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyVa
lue('grid-auto-flow')", "'column dense'"); |
110 | 110 |
(...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
226 | 226 |
227 debug(""); | 227 debug(""); |
228 debug("Test setting grid-auto-flow to 'initial' through JS"); | 228 debug("Test setting grid-auto-flow to 'initial' through JS"); |
229 // Reusing the value so that we can check that it is set back to its initial
value. | 229 // Reusing the value so that we can check that it is set back to its initial
value. |
230 element.style.gridAutoFlow = "initial"; | 230 element.style.gridAutoFlow = "initial"; |
231 shouldBe("element.style.gridAutoFlow", "'initial'"); | 231 shouldBe("element.style.gridAutoFlow", "'initial'"); |
232 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f
low')", "'row'"); | 232 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f
low')", "'row'"); |
233 </script> | 233 </script> |
234 </body> | 234 </body> |
235 </html> | 235 </html> |
OLD | NEW |