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 .gridAutoFlowDense { | |
7 grid-auto-flow: dense; | |
8 } | |
6 .gridAutoFlowColumnDense { | 9 .gridAutoFlowColumnDense { |
7 grid-auto-flow: column dense; | 10 grid-auto-flow: column dense; |
8 } | 11 } |
9 .gridAutoFlowRowDense { | 12 .gridAutoFlowRowDense { |
10 grid-auto-flow: row dense; | 13 grid-auto-flow: row dense; |
11 } | 14 } |
12 .gridAutoFlowDenseColumn { | 15 .gridAutoFlowDenseColumn { |
13 grid-auto-flow: dense column; | 16 grid-auto-flow: dense column; |
14 } | 17 } |
15 .gridAutoFlowDenseRow { | 18 .gridAutoFlowDenseRow { |
16 grid-auto-flow: dense row; | 19 grid-auto-flow: dense row; |
17 } | 20 } |
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 } | |
30 .gridAutoFlowInherit { | 21 .gridAutoFlowInherit { |
31 grid-auto-flow: inherit; | 22 grid-auto-flow: inherit; |
32 } | 23 } |
33 /* Bad values. */ | 24 /* Bad values. */ |
34 .gridAutoFlowNone { | 25 .gridAutoFlowNone { |
35 grid-auto-flow: none; | 26 grid-auto-flow: none; |
36 } | 27 } |
37 .gridAutoFlowRows { | 28 .gridAutoFlowRows { |
38 grid-auto-flow: rows; | 29 grid-auto-flow: rows; |
39 } | 30 } |
40 .gridAutoFlowColumns { | 31 .gridAutoFlowColumns { |
41 grid-auto-flow: columns; | 32 grid-auto-flow: columns; |
42 } | 33 } |
43 .gridAutoFlowDense { | |
44 grid-auto-flow: dense; | |
45 } | |
46 .gridAutoFlowColumnFoo { | 34 .gridAutoFlowColumnFoo { |
47 grid-auto-flow: column foo; | 35 grid-auto-flow: column foo; |
48 } | 36 } |
49 .gridAutoFlowColumnColumn { | 37 .gridAutoFlowColumnColumn { |
50 grid-auto-flow: column column; | 38 grid-auto-flow: column column; |
51 } | 39 } |
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; | |
Julien - ping for review
2015/01/05 13:11:34
We could keep some of these tests to make sure the
Manuel Rego
2015/01/08 12:50:28
Sure, I'll keep some of them.
| |
60 } | |
61 </style> | 40 </style> |
62 <script src="../../resources/js-test.js"></script> | 41 <script src="../../resources/js-test.js"></script> |
63 </head> | 42 </head> |
64 <body> | 43 <body> |
65 <div class="grid" id="gridInitial"></div> | 44 <div class="grid" id="gridInitial"></div> |
66 <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse"></div> | 45 <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse"></div> |
67 <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse"></div> | 46 <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse"></div> |
47 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> | |
68 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> | 48 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> |
69 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> | 49 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> |
70 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> | 50 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> |
71 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div> | 51 <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> | |
77 <div class="grid gridAutoFlowColumnSparse"> | 52 <div class="grid gridAutoFlowColumnSparse"> |
78 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> | 53 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> |
79 </div> | 54 </div> |
80 <div class="grid gridAutoFlowColumnSparse"> | 55 <div class="grid gridAutoFlowColumnSparse"> |
81 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div> <div> | 56 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div> <div> |
82 </div> | 57 </div> |
83 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> | 58 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> |
84 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> | 59 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> |
85 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> | 60 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> |
86 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> | |
87 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> | 61 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> |
88 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> | 62 <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> | |
92 <script src="resources/grid-definitions-parsing-utils.js"></script> | 63 <script src="resources/grid-definitions-parsing-utils.js"></script> |
93 <script> | 64 <script> |
94 description('Test that setting and getting grid-auto-flow works as expected' ); | 65 description('Test that setting and getting grid-auto-flow works as expected' ); |
95 | 66 |
96 debug("Test getting grid-auto-flow set through CSS"); | 67 debug("Test getting grid-auto-flow set through CSS"); |
97 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column"); | 68 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column"); |
98 checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row"); | 69 checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row"); |
70 checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row dense"); | |
99 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense"); | 71 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense"); |
100 checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense"); | 72 checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense"); |
101 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense"); | 73 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense"); |
102 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "row dense"); | 74 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "row dense"); |
103 checkGridAutoFlowSetCSSValue("gridAutoFlowStack", "stack row"); | |
104 checkGridAutoFlowSetCSSValue("gridAutoFlowStackColumn", "stack column"); | |
105 checkGridAutoFlowSetCSSValue("gridAutoFlowStackRow", "stack row"); | |
106 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnStack", "stack column"); | |
107 checkGridAutoFlowSetCSSValue("gridAutoFlowRowStack", "stack row"); | |
108 checkGridAutoFlowSetCSSValue("gridAutoFlowInherit", "column"); | 75 checkGridAutoFlowSetCSSValue("gridAutoFlowInherit", "column"); |
109 checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row"); | 76 checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row"); |
110 | 77 |
111 debug(""); | 78 debug(""); |
112 debug("Test getting grid-auto-flow bad values set through CSS"); | 79 debug("Test getting grid-auto-flow bad values set through CSS"); |
113 checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row"); | 80 checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row"); |
114 checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row"); | 81 checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row"); |
115 checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row"); | 82 checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row"); |
116 checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row"); | |
117 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnFoo", "row"); | 83 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnFoo", "row"); |
118 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnColumn", "row"); | 84 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnColumn", "row"); |
119 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumnStack", "row"); | |
120 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRowStack", "row"); | |
121 checkGridAutoFlowSetCSSValue("gridAutoFlowStackRowRow", "row"); | |
122 | 85 |
123 debug(""); | 86 debug(""); |
124 debug("Test the initial value"); | 87 debug("Test the initial value"); |
125 checkGridAutoFlowSetJSValue("", "", "row"); | 88 checkGridAutoFlowSetJSValue("", "", "row"); |
126 | 89 |
127 debug("Test getting and setting grid-auto-flow through JS"); | 90 debug("Test getting and setting grid-auto-flow through JS"); |
128 checkGridAutoFlowSetJSValue("column", "column", "column"); | 91 checkGridAutoFlowSetJSValue("column", "column", "column"); |
129 checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense"); | 92 checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense"); |
130 checkGridAutoFlowSetJSValue("row dense", "row dense", "row dense"); | 93 checkGridAutoFlowSetJSValue("row dense", "row dense", "row dense"); |
131 checkGridAutoFlowSetJSValue("dense column", "dense column", "column dense"); | 94 checkGridAutoFlowSetJSValue("dense column", "dense column", "column dense"); |
132 checkGridAutoFlowSetJSValue("dense row", "dense row", "row dense"); | 95 checkGridAutoFlowSetJSValue("dense row", "dense row", "row dense"); |
133 checkGridAutoFlowSetJSValue("row", "row", "row"); | 96 checkGridAutoFlowSetJSValue("row", "row", "row"); |
134 checkGridAutoFlowSetJSValue("stack", "stack", "stack row"); | |
135 checkGridAutoFlowSetJSValue("stack column", "stack column", "stack column"); | |
136 checkGridAutoFlowSetJSValue("stack row", "stack row", "stack row"); | |
137 checkGridAutoFlowSetJSValue("column stack", "column stack", "stack column"); | |
138 checkGridAutoFlowSetJSValue("row stack", "row stack", "stack row"); | |
139 | 97 |
140 debug(""); | 98 debug(""); |
141 debug("Test getting and setting bad values for grid-auto-flow through JS"); | 99 debug("Test getting and setting bad values for grid-auto-flow through JS"); |
142 checkGridAutoFlowSetJSValue("noone", "", "row"); | 100 checkGridAutoFlowSetJSValue("noone", "", "row"); |
143 checkGridAutoFlowSetJSValue("dense", "", "row"); | 101 checkGridAutoFlowSetJSValue("dense row dense", "", "row"); |
144 checkGridAutoFlowSetJSValue("column column", "", "row"); | 102 checkGridAutoFlowSetJSValue("column column", "", "row"); |
145 checkGridAutoFlowSetJSValue("dense column stack", "", "row"); | |
146 checkGridAutoFlowSetJSValue("dense row stack", "", "row"); | |
147 checkGridAutoFlowSetJSValue("stack row row", "", "row"); | |
148 | 103 |
149 debug(""); | 104 debug(""); |
150 debug("Test setting grid-auto-flow to 'initial' through JS"); | 105 debug("Test setting grid-auto-flow to 'initial' through JS"); |
151 // Reusing the value so that we can check that it is set back to its initial value. | 106 // Reusing the value so that we can check that it is set back to its initial value. |
152 checkGridAutoFlowSetJSValue("initial", "initial", "row"); | 107 checkGridAutoFlowSetJSValue("initial", "initial", "row"); |
153 </script> | 108 </script> |
154 </body> | 109 </body> |
155 </html> | 110 </html> |
OLD | NEW |