test_grid_container_shorthands.html (7939B)
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 gridTemplateRows: "none", 18 gridTemplateColumns: "none", 19 gridAutoFlow: "row", 20 // Computed value for 'auto' 21 gridAutoRows: "auto", 22 gridAutoColumns: "auto", 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 gridTemplateRows: "40px", 34 gridTemplateColumns: "100px", 35 }, 36 { 37 specified: "minmax(auto,1fr) / minmax(auto,1fr)", 38 gridTemplateRows: "1fr", 39 gridTemplateColumns: "1fr", 40 }, 41 { 42 specified: "[foo] 40px [bar] / [baz] 100px [fizz]", 43 gridTemplateRows: "[foo] 40px [bar]", 44 gridTemplateColumns: "[baz] 100px [fizz]", 45 }, 46 { 47 specified: " none/100px", 48 gridTemplateRows: "none", 49 gridTemplateColumns: "100px", 50 }, 51 { 52 specified: "40px/none", 53 gridTemplateRows: "40px", 54 gridTemplateColumns: "none", 55 }, 56 { 57 specified: "40px/repeat(1, 20px)", 58 gridTemplateRows: "40px", 59 gridTemplateColumns: "repeat(1, 20px)", 60 }, 61 { 62 specified: "40px/[a]repeat(1, 20px)", 63 gridTemplateRows: "40px", 64 gridTemplateColumns: "[a] repeat(1, 20px)", 65 }, 66 { 67 specified: "40px/repeat(1, [a] 20px)", 68 gridTemplateRows: "40px", 69 gridTemplateColumns: "repeat(1, [a] 20px)", 70 }, 71 { 72 specified: "40px/[a]repeat(2, [b]20px)", 73 gridTemplateRows: "40px", 74 gridTemplateColumns: "[a] repeat(2, [b] 20px)", 75 }, 76 { 77 specified: "40px/[a]repeat(2, 20px)", 78 gridTemplateRows: "40px", 79 gridTemplateColumns: "[a] repeat(2, 20px)", 80 }, 81 { 82 specified: "40px/repeat(2, [a] 20px)", 83 gridTemplateRows: "40px", 84 gridTemplateColumns: "repeat(2, [a] 20px)", 85 }, 86 { 87 specified: "40px/[a]repeat(2, [b]20px)", 88 gridTemplateRows: "40px", 89 gridTemplateColumns: "[a] repeat(2, [b] 20px)", 90 }, 91 { 92 specified: "40px/repeat(2, 20px[a])", 93 gridTemplateRows: "40px", 94 gridTemplateColumns: "repeat(2, 20px [a])", 95 }, 96 { 97 specified: "40px/repeat(2, 20px[a]) [b]", 98 gridTemplateRows: "40px", 99 gridTemplateColumns: "repeat(2, 20px [a]) [b]", 100 }, 101 { 102 specified: "40px/repeat(2, [a] 20px[b]) [c]", 103 gridTemplateRows: "40px", 104 gridTemplateColumns: "repeat(2, [a] 20px [b]) [c]", 105 }, 106 { 107 specified: "40px/[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]", 108 gridTemplateRows: "40px", 109 gridTemplateColumns: "[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]", 110 }, 111 { 112 specified: "'fizz'", 113 gridTemplateAreas: "\"fizz\"", 114 gridTemplateRows: "auto", 115 }, 116 { 117 specified: "[bar] 'fizz'", 118 gridTemplateAreas: "\"fizz\"", 119 gridTemplateRows: "[bar] auto", 120 }, 121 { 122 specified: "'fizz' / [foo] 40px", 123 gridTemplateAreas: "\"fizz\"", 124 gridTemplateRows: "auto", 125 gridTemplateColumns: "[foo] 40px", 126 }, 127 { 128 specified: "[bar] 'fizz' / [foo] 40px", 129 gridTemplateAreas: "\"fizz\"", 130 gridTemplateRows: "[bar] auto", 131 gridTemplateColumns: "[foo] 40px", 132 }, 133 { 134 specified: "'fizz' 100px / [foo] 40px", 135 gridTemplateAreas: "\"fizz\"", 136 gridTemplateRows: "100px", 137 gridTemplateColumns: "[foo] 40px", 138 }, 139 { 140 specified: "[bar] 'fizz' 100px [buzz] \n [a] '.' 200px [b] / [foo] 40px", 141 gridTemplateAreas: "\"fizz\" \".\"", 142 gridTemplateRows: "[bar] 100px [buzz a] 200px [b]", 143 gridTemplateColumns: "[foo] 40px", 144 }, 145 { 146 specified: "subgrid / subgrid", 147 gridTemplateColumns: "subgrid", 148 gridTemplateRows: "subgrid", 149 }, 150 { 151 specified: "subgrid [foo] / subgrid", 152 gridTemplateColumns: "subgrid", 153 gridTemplateRows: "subgrid [foo]", 154 }, 155 { 156 specified: "subgrid [foo] repeat(3, [] [a b] [c]) / subgrid", 157 gridTemplateColumns: "subgrid", 158 gridTemplateRows: "subgrid [foo] repeat(3, [] [a b] [c])", 159 }, 160 { 161 // Test that the number of lines is clamped to kMaxLine = 10000. 162 // https://drafts.csswg.org/css-grid/#overlarge-grids 163 specified: "subgrid [foo] repeat(999999999, [a]) / subgrid", 164 gridTemplateColumns: "subgrid", 165 gridTemplateRows: "subgrid [foo] repeat(10000, [a])", 166 }, 167 { 168 specified: "subgrid [bar]/ subgrid [] [foo", 169 gridTemplateColumns: "subgrid [] [foo]", 170 gridTemplateRows: "subgrid [bar]", 171 }, 172 { 173 specified: "'fizz' repeat(1, 100px)", 174 }, 175 { 176 specified: "'fizz' repeat(auto-fill, 100px)", 177 }, 178 { 179 specified: "'fizz' / repeat(1, 100px)", 180 }, 181 { 182 specified: "'fizz' / repeat(auto-fill, 100px)", 183 }, 184 ]; 185 186 grid_test_cases = grid_template_test_cases.concat([ 187 { 188 specified: "auto-flow / 0", 189 gridAutoFlow: "row", 190 gridAutoRows: "auto", 191 gridTemplateColumns: "0px", 192 }, 193 { 194 specified: "auto-flow dense / 0", 195 gridAutoFlow: "dense", 196 gridAutoRows: "auto", 197 gridTemplateColumns: "0px", 198 }, 199 { 200 specified: "auto-flow minmax(auto,1fr) / none", 201 gridAutoFlow: "row", 202 gridAutoRows: "1fr", 203 }, 204 { 205 specified: "auto-flow 40px / none", 206 gridAutoFlow: "row", 207 gridAutoRows: "40px", 208 }, 209 { 210 specified: "none / auto-flow 40px", 211 gridAutoFlow: "column", 212 gridAutoRows: "auto", 213 gridAutoColumns: "40px", 214 }, 215 { 216 specified: "none / auto-flow minmax(auto,1fr)", 217 gridAutoFlow: "column", 218 gridAutoRows: "auto", 219 gridAutoColumns: "1fr", 220 }, 221 { 222 specified: "0 / auto-flow dense auto", 223 gridAutoFlow: "column dense", 224 gridAutoRows: "auto", 225 gridAutoColumns: "auto", 226 gridTemplateRows: "0px", 227 }, 228 { 229 specified: "dense auto-flow minmax(min-content, 2fr) / 0", 230 gridAutoFlow: "dense", 231 gridAutoRows: "minmax(min-content, 2fr)", 232 gridAutoColumns: "auto", 233 gridTemplateColumns: "0px", 234 }, 235 { 236 specified: "auto-flow 40px / 100px", 237 gridAutoFlow: "row", 238 gridAutoRows: "40px", 239 gridAutoColumns: "auto", 240 gridTemplateColumns: "100px", 241 }, 242 ]); 243 244 function run_tests(test_cases, shorthand, subproperties) { 245 test_cases.forEach(function(test_case) { 246 test(function() { 247 var element = document.createElement('div'); 248 document.body.appendChild(element); 249 element.style[shorthand] = test_case.specified; 250 var computed = window.getComputedStyle(element); 251 subproperties.forEach(function(longhand) { 252 assert_equals( 253 computed[longhand], 254 test_case[longhand] || initial_values[longhand], 255 longhand 256 ); 257 }); 258 }, "test parsing of 'grid-template: " + test_case.specified + "'"); 259 }); 260 } 261 262 run_tests(grid_template_test_cases, "gridTemplate", [ 263 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]); 264 265 run_tests(grid_test_cases, "grid", [ 266 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", 267 "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]); 268 269 </script> 270 </body> 271 </html>