test_grid_shorthand_serialization.html (6243B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Test serialization of CSS 'grid' shorthand property</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 gridAutoRows: "auto", 21 gridAutoColumns: "auto", 22 gridRowGap: "0px", 23 gridColumnGap: "0px", 24 }; 25 26 // For various specified values of the grid-template subproperties, 27 // test the serialization of the shorthand. 28 var grid_template_test_cases = [ 29 { 30 gridTemplateColumns: "100px", 31 shorthand: "none / 100px", 32 }, 33 { 34 gridTemplateRows: "minmax(auto,1fr)", 35 shorthand: "1fr / none", 36 }, 37 { 38 gridTemplateColumns: "minmax(auto,1fr)", 39 shorthand: "none / 1fr", 40 }, 41 { 42 gridTemplateRows: "40px", 43 shorthand: "40px / none", 44 }, 45 { 46 gridTemplateRows: "40px", 47 gridTemplateColumns: "subgrid", 48 shorthand: "40px / subgrid", 49 }, 50 { 51 gridTemplateRows: "[foo] 40px [bar]", 52 gridTemplateColumns: "[baz] 100px [fizz]", 53 shorthand: "[foo] 40px [bar] / [baz] 100px [fizz]", 54 }, 55 { 56 gridTemplateAreas: "\"a\"", 57 gridTemplateRows: "20px", 58 shorthand: "\"a\" 20px", 59 }, 60 { 61 gridTemplateAreas: "\"a\"", 62 gridTemplateRows: "[foo] 20px [bar]", 63 shorthand: "[foo] \"a\" 20px [bar]", 64 }, 65 { 66 gridTemplateAreas: "\"a\"", 67 gridTemplateRows: "[foo] repeat(1, 20px) [bar]", 68 shorthand: "", 69 }, 70 { 71 gridTemplateAreas: "\"a a\"", 72 gridTemplateColumns: "repeat(2, 100px)", 73 gridTemplateRows: "auto", 74 shorthand: "", 75 }, 76 // Combinations of longhands that make the shorthand non-serializable: 77 { 78 gridTemplateAreas: "\"a\"", 79 gridTemplateRows: "20px 100px", 80 shorthand: "", 81 }, 82 { 83 gridTemplateAreas: "\"a\" \"b\"", 84 gridTemplateRows: "20px", 85 shorthand: "", 86 }, 87 { 88 gridTemplateAreas: "\"a\"", 89 gridTemplateRows: "subgrid", 90 shorthand: "", 91 }, 92 { 93 gridTemplateAreas: "\"a\"", 94 gridTemplateRows: "subgrid [foo]", 95 shorthand: "", 96 }, 97 { 98 gridTemplateAreas: "\"a\"", 99 gridTemplateRows: "20px", 100 gridTemplateColumns: "subgrid", 101 shorthand: "", 102 }, 103 { 104 gridTemplateAreas: "\"a\"", 105 gridTemplateRows: "repeat(auto-fill, 20px)", 106 shorthand: "", 107 }, 108 { 109 gridTemplateAreas: "\"a\"", 110 gridTemplateColumns: "repeat(auto-fill, 100px)", 111 gridTemplateRows: "auto", 112 shorthand: "", 113 }, 114 ]; 115 116 grid_test_cases = grid_template_test_cases.concat([ 117 { 118 gridAutoFlow: "row", 119 shorthand: "none", 120 }, 121 { 122 gridAutoRows: "40px", 123 shorthand: "auto-flow 40px / none", 124 }, 125 { 126 gridAutoRows: "minmax(auto,1fr)", 127 shorthand: "auto-flow 1fr / none", 128 }, 129 { 130 gridAutoFlow: "column dense", 131 gridAutoRows: "minmax(min-content, max-content)", 132 shorthand: "", 133 }, 134 { 135 gridAutoFlow: "column dense", 136 gridAutoColumns: "minmax(min-content, max-content)", 137 shorthand: "none / auto-flow dense minmax(min-content, max-content)", 138 }, 139 { 140 gridAutoFlow: "column", 141 gridAutoColumns: "minmax(auto,1fr)", 142 shorthand: "none / auto-flow 1fr", 143 }, 144 { 145 gridAutoFlow: "row dense", 146 gridAutoColumns: "minmax(min-content, 2fr)", 147 shorthand: "", 148 }, 149 { 150 gridAutoFlow: "row dense", 151 gridAutoRows: "minmax(min-content, 2fr)", 152 shorthand: "auto-flow dense minmax(min-content, 2fr) / none", 153 }, 154 { 155 gridAutoFlow: "row", 156 gridAutoRows: "40px", 157 gridTemplateColumns: "100px", 158 shorthand: "auto-flow 40px / 100px", 159 }, 160 // Test that grid-gap properties don't affect serialization. 161 { 162 gridRowGap: "1px", 163 shorthand: "none", 164 }, 165 { 166 gridColumnGap: "1px", 167 shorthand: "none", 168 }, 169 ]); 170 171 var grid_important_test_cases = [ 172 { 173 "grid-auto-flow": "row", 174 shorthand: "", 175 }, 176 ]; 177 178 179 function run_tests(test_cases, shorthand, subproperties) { 180 test_cases.forEach(function(test_case) { 181 test(function() { 182 var element = document.createElement('div'); 183 document.body.appendChild(element); 184 subproperties.forEach(function(longhand) { 185 element.style[longhand] = test_case[longhand] || 186 initial_values[longhand]; 187 }); 188 assert_equals(element.style[shorthand], test_case.shorthand); 189 }, "test shorthand serialization " + JSON.stringify(test_case)); 190 }); 191 } 192 193 function run_important_tests(test_cases, shorthand, subproperties) { 194 test_cases.forEach(function(test_case) { 195 test(function() { 196 var element = document.createElement('div'); 197 document.body.appendChild(element); 198 subproperties.forEach(function(longhand) { 199 element.style.setProperty(longhand, 200 test_case[longhand] || initial_values[longhand], 201 "important"); 202 }); 203 assert_equals(element.style[shorthand], test_case.shorthand); 204 }, "test shorthand serialization " + JSON.stringify(test_case)); 205 }); 206 } 207 208 run_tests(grid_template_test_cases, "gridTemplate", [ 209 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]); 210 211 run_tests(grid_test_cases, "grid", [ 212 "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", 213 "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]); 214 215 run_important_tests(grid_important_test_cases, "grid", [ 216 "grid-template-areas", "grid-template-columns", "grid-template-rows", 217 "grid-auto-flow", "grid-auto-columns", "grid-auto-rows"]); 218 219 </script> 220 </body> 221 </html>