layout/style/test/test_flexbox_flex_shorthand.html

   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>