summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_flexbox_flex_shorthand.html
diff options
context:
space:
mode:
Diffstat (limited to 'layout/style/test/test_flexbox_flex_shorthand.html')
-rw-r--r--layout/style/test/test_flexbox_flex_shorthand.html280
1 files changed, 280 insertions, 0 deletions
diff --git a/layout/style/test/test_flexbox_flex_shorthand.html b/layout/style/test/test_flexbox_flex_shorthand.html
new file mode 100644
index 000000000..24bffed94
--- /dev/null
+++ b/layout/style/test/test_flexbox_flex_shorthand.html
@@ -0,0 +1,280 @@
+<!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'."
+// "When omitted [..., flex-basis's] specified value is '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>