layout/style/test/test_grid_container_shorthands.html@141e0f1194b1
layout/style/test/test_grid_container_shorthands.html
Wed, 31 Dec 2014 07:16:47 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 07:16:47 +0100
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
- permissions
- -rw-r--r--
Revert simplistic fix pending revisit of Mozilla integration attempt.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=utf-8>
5 <title>Test parsing of grid container shorthands (grid-template, grid)</title>
6 <link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
7 <script src="/resources/testharness.js"></script>
8 <script src="/resources/testharnessreport.js"></script>
9 <link rel='stylesheet' href='/resources/testharness.css'>
10 </head>
11 <body>
13 <script>
15 var initial_values = {
16 gridTemplateAreas: "none",
17 gridTemplateColumns: "none",
18 gridTemplateRows: "none",
19 gridAutoFlow: "none",
20 // Computed value for 'auto'
21 gridAutoColumns: "minmax(min-content, max-content)",
22 gridAutoRows: "minmax(min-content, max-content)",
23 };
25 // For various specified values of the grid-template shorthand,
26 // test the computed values of the corresponding longhands.
27 var grid_template_test_cases = [
28 {
29 specified: "none",
30 },
31 {
32 specified: "40px / 100px",
33 gridTemplateColumns: "40px",
34 gridTemplateRows: "100px",
35 },
36 {
37 specified: "(foo) 40px (bar) / (baz) 100px (fizz)",
38 gridTemplateColumns: "(foo) 40px (bar)",
39 gridTemplateRows: "(baz) 100px (fizz)",
40 },
41 {
42 specified: " none/100px",
43 gridTemplateColumns: "none",
44 gridTemplateRows: "100px",
45 },
46 {
47 specified: "40px/none",
48 gridTemplateColumns: "40px",
49 gridTemplateRows: "none",
50 },
51 {
52 specified: "40px/repeat(1, 20px)",
53 gridTemplateColumns: "40px",
54 gridTemplateRows: "20px",
55 },
56 {
57 specified: "40px/(a)repeat(1, 20px)",
58 gridTemplateColumns: "40px",
59 gridTemplateRows: "(a) 20px",
60 },
61 {
62 specified: "40px/repeat(1, (a) 20px)",
63 gridTemplateColumns: "40px",
64 gridTemplateRows: "(a) 20px",
65 },
66 {
67 specified: "40px/(a)repeat(2, (b)20px)",
68 gridTemplateColumns: "40px",
69 gridTemplateRows: "(a b) 20px (b) 20px",
70 },
71 {
72 specified: "40px/(a)repeat(2, 20px)",
73 gridTemplateColumns: "40px",
74 gridTemplateRows: "(a) 20px 20px",
75 },
76 {
77 specified: "40px/repeat(2, (a) 20px)",
78 gridTemplateColumns: "40px",
79 gridTemplateRows: "(a) 20px (a) 20px",
80 },
81 {
82 specified: "40px/(a)repeat(2, (b)20px)",
83 gridTemplateColumns: "40px",
84 gridTemplateRows: "(a b) 20px (b) 20px",
85 },
86 {
87 specified: "40px/repeat(2, 20px(a))",
88 gridTemplateColumns: "40px",
89 gridTemplateRows: "20px (a) 20px (a)",
90 },
91 {
92 specified: "40px/repeat(2, 20px(a)) (b)",
93 gridTemplateColumns: "40px",
94 gridTemplateRows: "20px (a) 20px (a b)",
95 },
96 {
97 specified: "40px/repeat(2, (a) 20px(b)) (c)",
98 gridTemplateColumns: "40px",
99 gridTemplateRows: "(a) 20px (b a) 20px (b c)",
100 },
101 {
102 specified: "40px/(a) repeat(3, (b c) 20px (d) 100px (e f)) (g)",
103 gridTemplateColumns: "40px",
104 gridTemplateRows: "(a b c) 20px (d) 100px (e f b c) 20px (d) 100px (e f b c) 20px (d) 100px (e f g)",
105 },
106 {
107 specified: "'fizz'",
108 gridTemplateAreas: "\"fizz\"",
109 gridTemplateRows: "minmax(min-content, max-content)",
110 },
111 {
112 specified: "(bar) 'fizz'",
113 gridTemplateAreas: "\"fizz\"",
114 gridTemplateRows: "(bar) minmax(min-content, max-content)",
115 },
116 {
117 specified: "(foo) 40px / 'fizz'",
118 gridTemplateAreas: "\"fizz\"",
119 gridTemplateColumns: "(foo) 40px",
120 gridTemplateRows: "minmax(min-content, max-content)",
121 },
122 {
123 specified: "(foo) 40px / (bar) 'fizz'",
124 gridTemplateAreas: "\"fizz\"",
125 gridTemplateColumns: "(foo) 40px",
126 gridTemplateRows: "(bar) minmax(min-content, max-content)",
127 },
128 {
129 specified: "(foo) 40px / 'fizz' 100px",
130 gridTemplateAreas: "\"fizz\"",
131 gridTemplateColumns: "(foo) 40px",
132 gridTemplateRows: "100px",
133 },
134 {
135 specified: "(foo) 40px / (bar) 'fizz' 100px (buzz) \n (a) '.' 200px (b)",
136 gridTemplateAreas: "\"fizz\" \".\"",
137 gridTemplateColumns: "(foo) 40px",
138 gridTemplateRows: "(bar) 100px (buzz a) 200px (b)",
139 },
140 {
141 specified: "subgrid",
142 gridTemplateColumns: "subgrid",
143 gridTemplateRows: "subgrid",
144 },
145 {
146 specified: "subgrid / subgrid",
147 gridTemplateColumns: "subgrid",
148 gridTemplateRows: "subgrid",
149 },
150 {
151 specified: "subgrid / subgrid (foo)",
152 gridTemplateColumns: "subgrid",
153 gridTemplateRows: "subgrid (foo)",
154 },
155 {
156 specified: "subgrid / subgrid (foo) repeat(3, () (a b) (c))",
157 gridTemplateColumns: "subgrid",
158 gridTemplateRows: "subgrid (foo) () (a b) (c) () (a b) (c) () (a b) (c)",
159 },
160 {
161 // https://bugzilla.mozilla.org/show_bug.cgi?id=978478#c1
162 // The number of repetitions is clamped to
163 // #define GRID_TEMPLATE_MAX_REPETITIONS 10000
164 specified: "subgrid / subgrid (foo) repeat(999999999, (a))",
165 gridTemplateColumns: "subgrid",
166 // Array(n + 1).join(s) is a hack for the non-standard s.repeat(n)
167 gridTemplateRows: "subgrid (foo)" + Array(10000 + 1).join(" (a)"),
168 },
169 {
170 specified: "subgrid () (foo)/ subgrid (bar",
171 gridTemplateColumns: "subgrid () (foo)",
172 gridTemplateRows: "subgrid (bar)",
173 },
174 ];
176 grid_test_cases = grid_template_test_cases.concat([
177 {
178 specified: "row",
179 gridAutoFlow: "row",
180 },
181 {
182 specified: "none 40px",
183 gridAutoFlow: "none",
184 gridAutoColumns: "40px",
185 },
186 {
187 specified: "column dense auto",
188 gridAutoFlow: "column dense",
189 gridAutoColumns: "minmax(min-content, max-content)",
190 },
191 {
192 specified: "dense row minmax(min-content, 2fr)",
193 gridAutoFlow: "row dense",
194 gridAutoColumns: "minmax(min-content, 2fr)",
195 },
196 {
197 specified: "row 40px / 100px",
198 gridAutoFlow: "row",
199 gridAutoColumns: "40px",
200 gridAutoRows: "100px",
201 },
202 ]);
204 function run_tests(test_cases, shorthand, subproperties) {
205 test_cases.forEach(function(test_case) {
206 test(function() {
207 var element = document.createElement('div');
208 document.body.appendChild(element);
209 element.style[shorthand] = test_case.specified;
210 var computed = window.getComputedStyle(element);
211 subproperties.forEach(function(longhand) {
212 assert_equals(
213 computed[longhand],
214 test_case[longhand] || initial_values[longhand],
215 longhand
216 );
217 });
218 }, "test parsing of 'grid-template: " + test_case.specified + "'");
219 });
220 }
222 run_tests(grid_template_test_cases, "gridTemplate", [
223 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);
225 run_tests(grid_test_cases, "grid", [
226 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
227 "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]);
229 </script>
230 </body>
231 </html>
