layout/style/test/test_flexbox_flex_shorthand.html

Sat, 03 Jan 2015 20:18:00 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Sat, 03 Jan 2015 20:18:00 +0100
branch
TOR_BUG_3246
changeset 7
129ffea94266
permissions
-rw-r--r--

Conditionally enable double key logic according to:
private browsing mode or privacy.thirdparty.isolate preference and
implement in GetCookieStringCommon and FindCookie where it counts...
With some reservations of how to convince FindCookie users to test
condition and pass a nullptr when disabling double key logic.

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

mercurial