The Tor Browser: layout/style/test/test_flexbox_flex_shorthand.html@8bccb770b82d (annotated)

layout/style/test/test_flexbox_flex_shorthand.html@8bccb770b82d (annotated)

layout/style/test/test_flexbox_flex_shorthand.html

Wed, 31 Dec 2014 13:27:57 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 13:27:57 +0100
branch: TOR_BUG_3246
changeset 6: 8bccb770b82d
permissions: -rw-r--r--

Ignore runtime configuration files generated during quality assurance.

 <!DOCTYPE HTML>
 <html>
 <!--
 https://bugzilla.mozilla.org/show_bug.cgi?id=696253
 -->
 <head>
   <meta charset="utf-8">
   <title>Test for Bug 696253</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <script type="text/javascript" src="property_database.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
 <div id="display">
   <div id="content">
   </div>
 </div>
 <pre id="test">
 <script type="application/javascript;version=1.7">
 "use strict";
 /** Test for Bug 696253 **/
 /* (Testing the 'flex' CSS shorthand property) */
 // The CSS property name for the shorthand we're testing:
 const gFlexPropName = "flex";
 // Info from property_database.js on this property:
 const gFlexPropInfo = gCSSProperties[gFlexPropName];
 // The name of the property in the DOM (i.e. in elem.style):
 // (NOTE: In this case it's actually the same as the CSS property name --
 // "flex" -- but that's not guaranteed in general.)
 const gFlexDOMName = gFlexPropInfo.domProp;
 // Default values for shorthand subproperties, when they're not specified
 // explicitly in a testcase.  This lets the testcases be more concise.
 //
 // The values here are from the flexbox spec on the 'flex' shorthand:
 //   "When omitted, [flex-grow and flex-shrink] are set to '1'.
 //   "If omitted, the flex basis defaults to 0%"
 let gFlexShorthandDefaults = {
     "flex-grow":   "1",
     "flex-shrink": "1",
     "flex-basis":  "0%"
 };
 let gFlexShorthandTestcases = [
 /*
   {
     "flex":        "SPECIFIED value for flex shorthand",
     // Expected Computed Values of Subproperties
     // Semi-optional -- if unspecified, the expected value is taken
     // from gFlexShorthandDefaults.
     "flex-grow":   "EXPECTED computed value for flex-grow property",
     "flex-shrink": "EXPECTED computed value for flex-shrink property",
     "flex-basis":  "EXPECTED computed value for flex-basis property",
   },
 */
   // Initial values of subproperties:
   // --------------------------------
   // (checked by another test that uses property_database.js, too, but
   // might as well check here, too, for thoroughness).
   {
     "flex":        "",
     "flex-grow":   "0",
     "flex-shrink": "1",
     "flex-basis":  "auto",
   },
   {
     "flex":        "initial",
     "flex-grow":   "0",
     "flex-shrink": "1",
     "flex-basis":  "auto",
   },
   // Special keyword "none" --> "0 0 auto"
   // -------------------------------------
   {
     "flex":        "none",
     "flex-grow":   "0",
     "flex-shrink": "0",
     "flex-basis":  "auto",
   },
   // One Value (numeric) --> sets flex-grow
   // --------------------------------------
   {
     "flex":        "0",
     "flex-grow":   "0",
   },
   {
     "flex":        "5",
     "flex-grow":   "5",
   },
   {
     "flex":        "1000",
     "flex-grow":   "1000",
   },
   {
     "flex":        "0.0000001",
     "flex-grow":   "1e-7"
   },
   {
     "flex":        "20000000",
     "flex-grow":   "2e+7"
   },
   // One Value (length or other nonnumeric) --> sets flex-basis
   // ----------------------------------------------------------
   {
     "flex":        "0px",
     "flex-basis":  "0px",
   },
   {
     "flex":        "0%",
     "flex-basis":  "0%",
   },
   {
     "flex":        "25px",
     "flex-basis":  "25px",
   },
   {
     "flex":        "5%",
     "flex-basis":  "5%",
   },
   {
     "flex":        "auto",
     "flex-basis":  "auto",
   },
   {
     "flex":        "-moz-fit-content",
     "flex-basis":  "-moz-fit-content",
   },
   {
     "flex":        "calc(5px + 6px)",
     "flex-basis":  "11px",
   },
   {
     "flex":        "calc(15% + 30px)",
     "flex-basis":  "calc(30px + 15%)",
   },
   // Two Values (numeric) --> sets flex-grow, flex-shrink
   // ----------------------------------------------------
   {
     "flex":        "0 0",
     "flex-grow":   "0",
     "flex-shrink": "0",
   },
   {
     "flex":        "0 2",
     "flex-grow":   "0",
     "flex-shrink": "2",
   },
   {
     "flex":        "3 0",
     "flex-grow":   "3",
     "flex-shrink": "0",
   },
   {
     "flex":        "0.5000 2.03",
     "flex-grow":   "0.5",
     "flex-shrink": "2.03",
   },
   {
     "flex":        "300.0 500.0",
     "flex-grow":   "300",
     "flex-shrink": "500",
   },
   // Two Values (numeric & length-ish) --> sets flex-grow, flex-basis
   // ----------------------------------------------------------------
   {
     "flex":        "0 0px",
     "flex-grow":   "0",
     "flex-basis":  "0px",
   },
   {
     "flex":        "0 0%",
     "flex-grow":   "0",
     "flex-basis":  "0%",
   },
   {
     "flex":        "10 30px",
     "flex-grow":   "10",
     "flex-basis":  "30px",
   },
   {
     "flex":        "99px 2.3",
     "flex-grow":   "2.3",
     "flex-basis":  "99px",
   },
   {
     "flex":        "99% 6",
     "flex-grow":   "6",
     "flex-basis":  "99%",
   },
   {
     "flex":        "auto 5",
     "flex-grow":   "5",
     "flex-basis":  "auto",
   },
   {
     "flex":        "5 -moz-fit-content",
     "flex-grow":   "5",
     "flex-basis":  "-moz-fit-content",
   },
   {
     "flex":        "calc(5% + 10px) 3",
     "flex-grow":   "3",
     "flex-basis":  "calc(10px + 5%)",
   },
   // Three Values --> Sets all three subproperties
   // ---------------------------------------------
   {
     "flex":        "0 0 0",
     "flex-grow":   "0",
     "flex-shrink": "0",
     "flex-basis":  "0px",
   },
   {
     "flex":        "0.0 0.00 0px",
     "flex-grow":   "0",
     "flex-shrink": "0",
     "flex-basis":  "0px",
   },
   {
     "flex":        "0% 0 0",
     "flex-grow":   "0",
     "flex-shrink": "0",
     "flex-basis":  "0%",
   },
   {
     "flex":        "10px 3 2",
     "flex-grow":   "3",
     "flex-shrink": "2",
     "flex-basis":  "10px",
   },
 ];
 function runFlexShorthandTest(aFlexShorthandTestcase)
 {
   let content = document.getElementById("content");
   let elem = document.createElement("div");
   elem.style[gFlexDOMName] = aFlexShorthandTestcase[gFlexPropName];
   content.appendChild(elem);
   gFlexPropInfo.subproperties.forEach(function(aSubPropName) {
     var expectedVal = aSubPropName in aFlexShorthandTestcase ?
      aFlexShorthandTestcase[aSubPropName] :
      gFlexShorthandDefaults[aSubPropName];
     // Compare computed value against expected computed value (from testcase)
     is(window.getComputedStyle(elem, null).getPropertyValue(aSubPropName),
        expectedVal,
        "Computed value of subproperty \"" + aSubPropName + "\" when we set \"" +
        gFlexPropName + ": " + aFlexShorthandTestcase[gFlexPropName] + "\"");
   });
   // Clean up
   content.removeChild(elem);
 }
 function main() {
   gFlexShorthandTestcases.forEach(runFlexShorthandTest);
 }
 main();
 </script>
 </pre>
 </body>
 </html>

The Tor Browser / annotate

layout/style/test/test_flexbox_flex_shorthand.html@8bccb770b82d (annotated)

layout/style/test/test_flexbox_flex_shorthand.html