grid-shorthand-serialization.html (12050B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: only serialize 'grid' shorthands when the value can roundtrip</title> 6 <link rel="author" title="Daniel Libby" href="mailto:dlibby@microsoft.com"> 7 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid"> 9 <meta name="assert" content="grid shorthand must not serialize when the value cannot roundtrip."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 </head> 13 <body> 14 <script> 15 function test_shorthand_roundtrip(cssText, properties, declarations) { 16 var div = document.createElement('div'); 17 div.style.cssText = cssText; 18 19 for (let property of Object.keys(properties).sort()) { 20 test(function(){ 21 const readValue = div.style[property]; 22 if (Array.isArray(properties[property])) { 23 assert_in_array(readValue, properties[property], property + " serialization should be sound"); 24 } else { 25 assert_equals(readValue, properties[property], property + " serialization should be canonical"); 26 } 27 28 if (readValue != "") { 29 div.style[property] = ""; 30 div.style[property] = readValue; 31 assert_equals(div.style[property], readValue, "serialization should round-trip"); 32 } 33 }, "e.style.cssText = " + cssText + " should set " + property); 34 } 35 36 if (declarations) { 37 let cssTextSerialization = div.style.cssText; 38 declarations.forEach(decl => { 39 test(function(){ 40 assert_true(cssTextSerialization.indexOf(decl) !== -1, 41 `cssText serialization ('${cssTextSerialization}') must contain contain '${decl}'`); 42 }, `cssText ('${cssText}') must contain '${decl}' in its serialization`); 43 }); 44 } 45 } 46 47 test_shorthand_roundtrip('grid: auto-flow auto / 100px 100px', 48 { 49 'grid': 'none / 100px 100px', 50 'grid-template-areas': 'none' 51 }); 52 53 test_shorthand_roundtrip('grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four"', 54 { 55 'grid': '', 56 'grid-template-areas': '"one two" "three four"', 57 'grid-auto-flow': 'row', 58 'grid-auto-rows': 'auto' 59 }); 60 61 test_shorthand_roundtrip('grid: 30px 40px / 50px 60px; grid-auto-flow: column', 62 { 63 'grid': '', 64 'grid-template': '30px 40px / 50px 60px', 65 'grid-auto-flow': 'column', 66 }, [ 67 'grid-template: 30px 40px / 50px 60px;', 68 'grid-auto-rows: auto;', 69 'grid-auto-columns: auto;', 70 'grid-auto-flow: column;' 71 ]); 72 73 test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: 20px', 74 { 75 'grid': '20px / 10px', 76 'grid-template': '20px / 10px' 77 }, [ 78 'grid: 20px / 10px;' 79 ]); 80 81 test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: repeat(2, 20px)', 82 { 83 'grid': 'repeat(2, 20px) / 10px', 84 'grid-template-rows': 'repeat(2, 20px)' 85 }); 86 87 test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: repeat(2, 20px) repeat(3, 30px)', 88 { 89 'grid': 'repeat(2, 20px) repeat(3, 30px) / 10px', 90 'grid-template-rows': 'repeat(2, 20px) repeat(3, 30px)' 91 }); 92 93 test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: repeat(auto-fill, 20px)', 94 { 95 'grid': 'repeat(auto-fill, 20px) / 10px', 96 'grid-template-rows': 'repeat(auto-fill, 20px)' 97 }); 98 99 100 test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: repeat(auto-fit, 20px)', 101 { 102 'grid': 'repeat(auto-fit, 20px) / 10px', 103 'grid-template-rows': 'repeat(auto-fit, 20px)' 104 }); 105 106 test_shorthand_roundtrip('grid: 10px / auto; grid-template-columns: 20px', 107 { 108 'grid': '10px / 20px', 109 'grid-template': '10px / 20px' 110 }, [ 111 'grid: 10px / 20px;' 112 ]); 113 114 test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-columns: repeat(2, 20px)', 115 { 116 'grid': 'none / repeat(2, 20px)', 117 'grid-template-columns': 'repeat(2, 20px)' 118 }); 119 120 test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-columns: repeat(2, 20px) repeat(3, 30px)', 121 { 122 'grid': 'none / repeat(2, 20px) repeat(3, 30px)', 123 'grid-template-columns': 'repeat(2, 20px) repeat(3, 30px)' 124 }); 125 126 test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-columns: repeat(auto-fill, 20px)', 127 { 128 'grid': 'none / repeat(auto-fill, 20px)', 129 'grid-template-columns': 'repeat(auto-fill, 20px)' 130 }); 131 132 test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-columns: repeat(auto-fit, 20px)', 133 { 134 'grid': 'none / repeat(auto-fit, 20px)', 135 'grid-template-columns': 'repeat(auto-fit, 20px)' 136 }); 137 138 test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-flow: inherit', { 'grid': '' }); 139 test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-flow: row', { 'grid': '1px / 2px' }); 140 test_shorthand_roundtrip('grid: none / 2px; grid-auto-flow: row', { 'grid': 'none / 2px' }); 141 test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-columns: auto', { 'grid': '1px / 2px' }); 142 test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-rows: auto', { 'grid': '1px / 2px' }); 143 test_shorthand_roundtrip('grid: 1px / auto-flow 2px; grid-auto-rows: auto', { 'grid': '1px / auto-flow 2px' }); 144 test_shorthand_roundtrip('grid: 1px / auto-flow; grid-auto-columns: auto', { 'grid': '1px / auto-flow' }); 145 test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-columns: auto', { 'grid': 'auto-flow 1px / 2px' }); 146 test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-auto-columns: auto', { 'grid': 'auto-flow 1px / none' }); 147 test_shorthand_roundtrip('grid: auto-flow dense / 2px; grid-auto-rows: auto', { 'grid': 'auto-flow dense / 2px' }); 148 149 test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-columns: 3px', 150 { 151 'grid': '', 152 'grid-auto-columns': '3px', 153 'grid-auto-rows': '1px', 154 'grid-auto-flow': 'row', 155 'grid-template-columns': '2px', 156 'grid-template-rows': 'none' 157 }); 158 test_shorthand_roundtrip('grid: 1px / auto-flow 2px; grid-auto-rows: 3px', 159 { 160 'grid': '', 161 'grid-auto-columns': '2px', 162 'grid-auto-rows': '3px', 163 'grid-auto-flow': 'column', 164 'grid-template-columns': 'none', 165 'grid-template-rows': '1px' 166 }); 167 test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: 3px', 168 { 169 'grid': '', 170 'grid-auto-columns': '1px', 171 'grid-auto-rows': 'auto', 172 'grid-auto-flow': 'column', 173 'grid-template-columns': '3px', 174 'grid-template-rows': 'none' 175 }); 176 test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: repeat(2, 3px)', 177 { 178 'grid': '', 179 'grid-auto-columns': '1px', 180 'grid-auto-rows': 'auto', 181 'grid-auto-flow': 'column', 182 'grid-template-columns': 'repeat(2, 3px)', 183 'grid-template-rows': 'none' 184 }); 185 test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fill, 3px)', 186 { 187 'grid': '', 188 'grid-auto-columns': '1px', 189 'grid-auto-rows': 'auto', 190 'grid-auto-flow': 'column', 191 'grid-template-columns': 'repeat(auto-fill, 3px)', 192 'grid-template-rows': 'none' 193 }); 194 test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: repeat(auto-fit, 3px)', 195 { 196 'grid': '', 197 'grid-auto-columns': '1px', 198 'grid-auto-rows': 'auto', 199 'grid-auto-flow': 'column', 200 'grid-template-columns': 'repeat(auto-fit, 3px)', 201 'grid-template-rows': 'none' 202 }); 203 test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: 3px', 204 { 205 'grid': '', 206 'grid-auto-columns': 'auto', 207 'grid-auto-rows': '1px', 208 'grid-auto-flow': 'row', 209 'grid-template-columns': 'none', 210 'grid-template-rows': '3px' 211 }); 212 test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: repeat(2, 3px)', 213 { 214 'grid': '', 215 'grid-auto-columns': 'auto', 216 'grid-auto-rows': '1px', 217 'grid-auto-flow': 'row', 218 'grid-template-columns': 'none', 219 'grid-template-rows': 'repeat(2, 3px)' 220 }); 221 test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fill, 3px)', 222 { 223 'grid': '', 224 'grid-auto-columns': 'auto', 225 'grid-auto-rows': '1px', 226 'grid-auto-flow': 'row', 227 'grid-template-columns': 'none', 228 'grid-template-rows': 'repeat(auto-fill, 3px)' 229 }); 230 test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: repeat(auto-fit, 3px)', 231 { 232 'grid': '', 233 'grid-auto-columns': 'auto', 234 'grid-auto-rows': '1px', 235 'grid-auto-flow': 'row', 236 'grid-template-columns': 'none', 237 'grid-template-rows': 'repeat(auto-fit, 3px)' 238 }); 239 240 test_shorthand_roundtrip('grid-template: none;', 241 { 242 'grid': '', 243 'grid-template-areas': 'none', 244 'grid-template-rows': 'none', 245 'grid-template-columns': 'none', 246 'grid-template': 'none' 247 }); 248 test_shorthand_roundtrip('grid-template: auto / auto;', 249 { 250 'grid': '', 251 'grid-template-areas': 'none', 252 'grid-template-rows': 'auto', 253 'grid-template-columns': 'auto', 254 'grid-template': 'auto / auto' 255 }); 256 test_shorthand_roundtrip('grid-template: [header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto', 257 { 258 'grid': '', 259 'grid-template-areas': '"a a a" "b b b"', 260 'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]', 261 'grid-template-columns': 'auto 1fr auto', 262 'grid-template': '[header-top] "a a a" [header-bottom main-top] "b b b" 1fr [main-bottom] / auto 1fr auto' 263 }); 264 265 test_shorthand_roundtrip('grid-template: [header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr [main-bottom] "c c c" "d d d" / auto', 266 { 267 'grid': '', 268 'grid-template-areas': '"a a a" "b b b" "c c c" "d d d"', 269 'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom] auto auto', 270 'grid-template-columns': 'auto', 271 'grid-template': '[header-top] "a a a" [header-bottom main-top] "b b b" 1fr [main-bottom] "c c c" "d d d" / auto' 272 }); 273 274 test_shorthand_roundtrip('grid-template-rows: auto auto; grid-template-columns: repeat(2, 3px); grid-template-areas: "one two" "three four"', 275 { 276 'grid': '', 277 'grid-template-areas': '"one two" "three four"', 278 'grid-template-rows': 'auto auto', 279 'grid-template-columns': 'repeat(2, 3px)' 280 }); 281 test_shorthand_roundtrip('grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "one two" "three four"', 282 { 283 'grid': '', 284 'grid-template-areas': '"one two" "three four"', 285 'grid-template-rows': 'auto auto', 286 'grid-template-columns': 'repeat(2, 1fr)' 287 }); 288 test_shorthand_roundtrip('grid-template-rows: auto auto; grid-template-columns: repeat(auto-fill, 3px); grid-template-areas: "one two" "three four"', 289 { 290 'grid': '', 291 'grid-template-areas': '"one two" "three four"', 292 'grid-template-rows': 'auto auto', 293 'grid-template-columns': 'repeat(auto-fill, 3px)' 294 }); 295 test_shorthand_roundtrip('grid-template-rows: auto auto; grid-template-columns: repeat(auto-fit, 3px); grid-template-areas: "one two" "three four"', 296 { 297 'grid': '', 298 'grid-template-areas': '"one two" "three four"', 299 'grid-template-rows': 'auto auto', 300 'grid-template-columns': 'repeat(auto-fit, 3px)' 301 }); 302 </script>