test_flexbox_flex_shorthand.html (6696B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=696253 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 696253</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script type="text/javascript" src="property_database.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 </head> 13 <body> 14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a> 15 <div id="display"> 16 <div id="content"> 17 </div> 18 </div> 19 <pre id="test"> 20 <script type="application/javascript"> 21 "use strict"; 22 23 /** Test for Bug 696253 */ 24 /* (Testing the 'flex' CSS shorthand property) */ 25 26 // The CSS property name for the shorthand we're testing: 27 const gFlexPropName = "flex"; 28 29 // Info from property_database.js on this property: 30 const gFlexPropInfo = gCSSProperties[gFlexPropName]; 31 32 // The name of the property in the DOM (i.e. in elem.style): 33 // (NOTE: In this case it's actually the same as the CSS property name -- 34 // "flex" -- but that's not guaranteed in general.) 35 const gFlexDOMName = gFlexPropInfo.domProp; 36 37 // Default values for shorthand subproperties, when they're not specified 38 // explicitly in a testcase. This lets the testcases be more concise. 39 // 40 // The values here are from the flexbox spec on the 'flex' shorthand: 41 // "When omitted, [flex-grow and flex-shrink are] set to '1'." 42 // "When omitted [..., flex-basis's] specified value is '0%'." 43 let gFlexShorthandDefaults = { 44 "flex-grow": "1", 45 "flex-shrink": "1", 46 "flex-basis": "0%" 47 }; 48 49 let gFlexShorthandTestcases = [ 50 /* 51 { 52 "flex": "SPECIFIED value for flex shorthand", 53 54 // Expected Computed Values of Subproperties 55 // Semi-optional -- if unspecified, the expected value is taken 56 // from gFlexShorthandDefaults. 57 "flex-grow": "EXPECTED computed value for flex-grow property", 58 "flex-shrink": "EXPECTED computed value for flex-shrink property", 59 "flex-basis": "EXPECTED computed value for flex-basis property", 60 }, 61 */ 62 63 // Initial values of subproperties: 64 // -------------------------------- 65 // (checked by another test that uses property_database.js, too, but 66 // might as well check here, too, for thoroughness). 67 { 68 "flex": "", 69 "flex-grow": "0", 70 "flex-shrink": "1", 71 "flex-basis": "auto", 72 }, 73 { 74 "flex": "initial", 75 "flex-grow": "0", 76 "flex-shrink": "1", 77 "flex-basis": "auto", 78 }, 79 80 // Special keyword "none" --> "0 0 auto" 81 // ------------------------------------- 82 { 83 "flex": "none", 84 "flex-grow": "0", 85 "flex-shrink": "0", 86 "flex-basis": "auto", 87 }, 88 89 // One Value (numeric) --> sets flex-grow 90 // -------------------------------------- 91 { 92 "flex": "0", 93 "flex-grow": "0", 94 }, 95 { 96 "flex": "5", 97 "flex-grow": "5", 98 }, 99 { 100 "flex": "1000", 101 "flex-grow": "1000", 102 }, 103 { 104 "flex": "0.0000001", 105 "flex-grow": "1e-7" 106 }, 107 { 108 "flex": "20000000", 109 "flex-grow": "20000000", 110 }, 111 112 // One Value (length or other nonnumeric) --> sets flex-basis 113 // ---------------------------------------------------------- 114 { 115 "flex": "0px", 116 "flex-basis": "0px", 117 }, 118 { 119 "flex": "0%", 120 "flex-basis": "0%", 121 }, 122 { 123 "flex": "25px", 124 "flex-basis": "25px", 125 }, 126 { 127 "flex": "5%", 128 "flex-basis": "5%", 129 }, 130 { 131 "flex": "auto", 132 "flex-basis": "auto", 133 }, 134 { 135 "flex": "fit-content", 136 "flex-basis": "fit-content", 137 }, 138 { 139 "flex": "calc(5px + 6px)", 140 "flex-basis": "11px", 141 }, 142 { 143 "flex": "calc(15% + 30px)", 144 "flex-basis": "calc(15% + 30px)", 145 }, 146 147 // Two Values (numeric) --> sets flex-grow, flex-shrink 148 // ---------------------------------------------------- 149 { 150 "flex": "0 0", 151 "flex-grow": "0", 152 "flex-shrink": "0", 153 }, 154 { 155 "flex": "0 2", 156 "flex-grow": "0", 157 "flex-shrink": "2", 158 }, 159 { 160 "flex": "3 0", 161 "flex-grow": "3", 162 "flex-shrink": "0", 163 }, 164 { 165 "flex": "0.5000 2.03", 166 "flex-grow": "0.5", 167 "flex-shrink": "2.03", 168 }, 169 { 170 "flex": "300.0 500.0", 171 "flex-grow": "300", 172 "flex-shrink": "500", 173 }, 174 175 // Two Values (numeric & length-ish) --> sets flex-grow, flex-basis 176 // ---------------------------------------------------------------- 177 { 178 "flex": "0 0px", 179 "flex-grow": "0", 180 "flex-basis": "0px", 181 }, 182 { 183 "flex": "0 0%", 184 "flex-grow": "0", 185 "flex-basis": "0%", 186 }, 187 { 188 "flex": "10 30px", 189 "flex-grow": "10", 190 "flex-basis": "30px", 191 }, 192 { 193 "flex": "99px 2.3", 194 "flex-grow": "2.3", 195 "flex-basis": "99px", 196 }, 197 { 198 "flex": "99% 6", 199 "flex-grow": "6", 200 "flex-basis": "99%", 201 }, 202 { 203 "flex": "auto 5", 204 "flex-grow": "5", 205 "flex-basis": "auto", 206 }, 207 { 208 "flex": "5 fit-content", 209 "flex-grow": "5", 210 "flex-basis": "fit-content", 211 }, 212 { 213 "flex": "calc(5% + 10px) 3", 214 "flex-grow": "3", 215 "flex-basis": "calc(5% + 10px)", 216 }, 217 218 // Three Values --> Sets all three subproperties 219 // --------------------------------------------- 220 { 221 "flex": "0 0 0", 222 "flex-grow": "0", 223 "flex-shrink": "0", 224 "flex-basis": "0px", 225 }, 226 { 227 "flex": "0.0 0.00 0px", 228 "flex-grow": "0", 229 "flex-shrink": "0", 230 "flex-basis": "0px", 231 }, 232 { 233 "flex": "0% 0 0", 234 "flex-grow": "0", 235 "flex-shrink": "0", 236 "flex-basis": "0%", 237 }, 238 { 239 "flex": "10px 3 2", 240 "flex-grow": "3", 241 "flex-shrink": "2", 242 "flex-basis": "10px", 243 }, 244 ]; 245 246 function runFlexShorthandTest(aFlexShorthandTestcase) 247 { 248 let content = document.getElementById("content"); 249 250 let elem = document.createElement("div"); 251 252 elem.style[gFlexDOMName] = aFlexShorthandTestcase[gFlexPropName]; 253 content.appendChild(elem); 254 255 gFlexPropInfo.subproperties.forEach(function(aSubPropName) { 256 var expectedVal = aSubPropName in aFlexShorthandTestcase ? 257 aFlexShorthandTestcase[aSubPropName] : 258 gFlexShorthandDefaults[aSubPropName]; 259 260 // Compare computed value against expected computed value (from testcase) 261 is(window.getComputedStyle(elem).getPropertyValue(aSubPropName), 262 expectedVal, 263 "Computed value of subproperty \"" + aSubPropName + "\" when we set \"" + 264 gFlexPropName + ": " + aFlexShorthandTestcase[gFlexPropName] + "\""); 265 }); 266 267 // Clean up 268 content.removeChild(elem); 269 } 270 271 function main() { 272 gFlexShorthandTestcases.forEach(runFlexShorthandTest); 273 } 274 275 main(); 276 277 </script> 278 </pre> 279 </body> 280 </html>