The Tor Browser / file comparison
comparison: layout/style/test/test_grid_container_shorthands.html
layout/style/test/test_grid_container_shorthands.html
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
equal
deleted
inserted
replaced
| -1:000000000000 | 0:03fb945420d4 |
|---|---|
| 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> | |
| 12 | |
| 13 <script> | |
| 14 | |
| 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 }; | |
| 24 | |
| 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 ]; | |
| 175 | |
| 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 ]); | |
| 203 | |
| 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 } | |
| 221 | |
| 222 run_tests(grid_template_test_cases, "gridTemplate", [ | |
| 223 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]); | |
| 224 | |
| 225 run_tests(grid_test_cases, "grid", [ | |
| 226 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", | |
| 227 "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]); | |
| 228 | |
| 229 </script> | |
| 230 </body> | |
| 231 </html> |
