The Tor Browser / file comparison
comparison: layout/style/test/test_flexbox_flex_shorthand.html
layout/style/test/test_flexbox_flex_shorthand.html
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
equal
deleted
inserted
replaced
| -1:000000000000 | 0:c41adb4ef65e |
|---|---|
| 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 type="application/javascript" 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;version=1.7"> | |
| 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 // "If omitted, the flex basis defaults to 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": "2e+7" | |
| 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": "-moz-fit-content", | |
| 136 "flex-basis": "-moz-fit-content", | |
| 137 }, | |
| 138 { | |
| 139 "flex": "calc(5px + 6px)", | |
| 140 "flex-basis": "11px", | |
| 141 }, | |
| 142 { | |
| 143 "flex": "calc(15% + 30px)", | |
| 144 "flex-basis": "calc(30px + 15%)", | |
| 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 -moz-fit-content", | |
| 209 "flex-grow": "5", | |
| 210 "flex-basis": "-moz-fit-content", | |
| 211 }, | |
| 212 { | |
| 213 "flex": "calc(5% + 10px) 3", | |
| 214 "flex-grow": "3", | |
| 215 "flex-basis": "calc(10px + 5%)", | |
| 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, null).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> |
