layout/style/test/test_grid_shorthand_serialization.html@141e0f1194b1
layout/style/test/test_grid_shorthand_serialization.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 serialization of CSS Grid shorthand properties</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 gridAutoColumns: "auto",
21 gridAutoRows: "auto",
22 };
24 // For various specified values of the grid-template subproperties,
25 // test the serialization of the shorthand.
26 var grid_template_test_cases = [
27 {
28 gridTemplateRows: "100px",
29 shorthand: "none / 100px",
30 },
31 {
32 gridTemplateColumns: "40px",
33 shorthand: "40px / none",
34 },
35 {
36 gridTemplateColumns: "40px",
37 gridTemplateRows: "subgrid",
38 shorthand: "40px / subgrid",
39 },
40 {
41 gridTemplateColumns: "(foo) 40px (bar)",
42 gridTemplateRows: "(baz) 100px (fizz)",
43 shorthand: "(foo) 40px (bar) / (baz) 100px (fizz)",
44 },
45 {
46 gridTemplateAreas: "\"a\"",
47 gridTemplateRows: "20px",
48 shorthand: "\"a\" 20px",
49 },
50 {
51 gridTemplateAreas: "\"a\"",
52 gridTemplateRows: "(foo) 20px (bar)",
53 shorthand: "(foo) \"a\" 20px (bar)",
54 },
55 // Combinations of longhands that make the shorthand non-serializable:
56 {
57 gridTemplateAreas: "\"a\"",
58 gridTemplateRows: "20px 100px",
59 shorthand: "",
60 },
61 {
62 gridTemplateAreas: "\"a\" \"b\"",
63 gridTemplateRows: "20px",
64 shorthand: "",
65 },
66 {
67 gridTemplateAreas: "\"a\"",
68 gridTemplateRows: "subgrid",
69 shorthand: "",
70 },
71 {
72 gridTemplateAreas: "\"a\"",
73 gridTemplateRows: "subgrid (foo)",
74 shorthand: "",
75 },
76 {
77 gridTemplateAreas: "\"a\"",
78 gridTemplateRows: "20px",
79 gridTemplateColumns: "subgrid",
80 shorthand: "",
81 },
82 ];
84 grid_test_cases = grid_template_test_cases.concat([
85 {
86 gridAutoFlow: "row",
87 shorthand: "row auto / auto",
88 },
89 {
90 gridAutoColumns: "40px",
91 shorthand: "none 40px / auto",
92 },
93 {
94 gridAutoFlow: "column dense",
95 gridAutoColumns: "minmax(min-content, max-content)",
96 shorthand: "column dense minmax(min-content, max-content) / auto",
97 },
98 {
99 gridAutoFlow: "row dense",
100 gridAutoRows: "minmax(min-content, 2fr)",
101 shorthand: "row dense auto / minmax(min-content, 2fr)",
102 },
103 {
104 gridAutoFlow: "row",
105 gridAutoColumns: "40px",
106 gridAutoRows: "100px",
107 shorthand: "row 40px / 100px",
108 },
109 ]);
111 function run_tests(test_cases, shorthand, subproperties) {
112 test_cases.forEach(function(test_case) {
113 test(function() {
114 var element = document.createElement('div');
115 document.body.appendChild(element);
116 subproperties.forEach(function(longhand) {
117 element.style[longhand] = test_case[longhand] ||
118 initial_values[longhand];
119 });
120 assert_equals(element.style[shorthand], test_case.shorthand);
121 }, "test shorthand serialization " + JSON.stringify(test_case));
122 });
123 }
125 run_tests(grid_template_test_cases, "gridTemplate", [
126 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);
128 run_tests(grid_test_cases, "grid", [
129 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
130 "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]);
132 </script>
133 </body>
134 </html>
