1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_flexbox_flex_shorthand.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,280 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=696253
1.8 +-->
1.9 +<head>
1.10 + <meta charset="utf-8">
1.11 + <title>Test for Bug 696253</title>
1.12 + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.13 + <script type="text/javascript" src="property_database.js"></script>
1.14 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.15 +</head>
1.16 +<body>
1.17 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
1.18 +<div id="display">
1.19 + <div id="content">
1.20 + </div>
1.21 +</div>
1.22 +<pre id="test">
1.23 +<script type="application/javascript;version=1.7">
1.24 +"use strict";
1.25 +
1.26 +/** Test for Bug 696253 **/
1.27 +/* (Testing the 'flex' CSS shorthand property) */
1.28 +
1.29 +// The CSS property name for the shorthand we're testing:
1.30 +const gFlexPropName = "flex";
1.31 +
1.32 +// Info from property_database.js on this property:
1.33 +const gFlexPropInfo = gCSSProperties[gFlexPropName];
1.34 +
1.35 +// The name of the property in the DOM (i.e. in elem.style):
1.36 +// (NOTE: In this case it's actually the same as the CSS property name --
1.37 +// "flex" -- but that's not guaranteed in general.)
1.38 +const gFlexDOMName = gFlexPropInfo.domProp;
1.39 +
1.40 +// Default values for shorthand subproperties, when they're not specified
1.41 +// explicitly in a testcase. This lets the testcases be more concise.
1.42 +//
1.43 +// The values here are from the flexbox spec on the 'flex' shorthand:
1.44 +// "When omitted, [flex-grow and flex-shrink] are set to '1'.
1.45 +// "If omitted, the flex basis defaults to 0%"
1.46 +let gFlexShorthandDefaults = {
1.47 + "flex-grow": "1",
1.48 + "flex-shrink": "1",
1.49 + "flex-basis": "0%"
1.50 +};
1.51 +
1.52 +let gFlexShorthandTestcases = [
1.53 +/*
1.54 + {
1.55 + "flex": "SPECIFIED value for flex shorthand",
1.56 +
1.57 + // Expected Computed Values of Subproperties
1.58 + // Semi-optional -- if unspecified, the expected value is taken
1.59 + // from gFlexShorthandDefaults.
1.60 + "flex-grow": "EXPECTED computed value for flex-grow property",
1.61 + "flex-shrink": "EXPECTED computed value for flex-shrink property",
1.62 + "flex-basis": "EXPECTED computed value for flex-basis property",
1.63 + },
1.64 +*/
1.65 +
1.66 + // Initial values of subproperties:
1.67 + // --------------------------------
1.68 + // (checked by another test that uses property_database.js, too, but
1.69 + // might as well check here, too, for thoroughness).
1.70 + {
1.71 + "flex": "",
1.72 + "flex-grow": "0",
1.73 + "flex-shrink": "1",
1.74 + "flex-basis": "auto",
1.75 + },
1.76 + {
1.77 + "flex": "initial",
1.78 + "flex-grow": "0",
1.79 + "flex-shrink": "1",
1.80 + "flex-basis": "auto",
1.81 + },
1.82 +
1.83 + // Special keyword "none" --> "0 0 auto"
1.84 + // -------------------------------------
1.85 + {
1.86 + "flex": "none",
1.87 + "flex-grow": "0",
1.88 + "flex-shrink": "0",
1.89 + "flex-basis": "auto",
1.90 + },
1.91 +
1.92 + // One Value (numeric) --> sets flex-grow
1.93 + // --------------------------------------
1.94 + {
1.95 + "flex": "0",
1.96 + "flex-grow": "0",
1.97 + },
1.98 + {
1.99 + "flex": "5",
1.100 + "flex-grow": "5",
1.101 + },
1.102 + {
1.103 + "flex": "1000",
1.104 + "flex-grow": "1000",
1.105 + },
1.106 + {
1.107 + "flex": "0.0000001",
1.108 + "flex-grow": "1e-7"
1.109 + },
1.110 + {
1.111 + "flex": "20000000",
1.112 + "flex-grow": "2e+7"
1.113 + },
1.114 +
1.115 + // One Value (length or other nonnumeric) --> sets flex-basis
1.116 + // ----------------------------------------------------------
1.117 + {
1.118 + "flex": "0px",
1.119 + "flex-basis": "0px",
1.120 + },
1.121 + {
1.122 + "flex": "0%",
1.123 + "flex-basis": "0%",
1.124 + },
1.125 + {
1.126 + "flex": "25px",
1.127 + "flex-basis": "25px",
1.128 + },
1.129 + {
1.130 + "flex": "5%",
1.131 + "flex-basis": "5%",
1.132 + },
1.133 + {
1.134 + "flex": "auto",
1.135 + "flex-basis": "auto",
1.136 + },
1.137 + {
1.138 + "flex": "-moz-fit-content",
1.139 + "flex-basis": "-moz-fit-content",
1.140 + },
1.141 + {
1.142 + "flex": "calc(5px + 6px)",
1.143 + "flex-basis": "11px",
1.144 + },
1.145 + {
1.146 + "flex": "calc(15% + 30px)",
1.147 + "flex-basis": "calc(30px + 15%)",
1.148 + },
1.149 +
1.150 + // Two Values (numeric) --> sets flex-grow, flex-shrink
1.151 + // ----------------------------------------------------
1.152 + {
1.153 + "flex": "0 0",
1.154 + "flex-grow": "0",
1.155 + "flex-shrink": "0",
1.156 + },
1.157 + {
1.158 + "flex": "0 2",
1.159 + "flex-grow": "0",
1.160 + "flex-shrink": "2",
1.161 + },
1.162 + {
1.163 + "flex": "3 0",
1.164 + "flex-grow": "3",
1.165 + "flex-shrink": "0",
1.166 + },
1.167 + {
1.168 + "flex": "0.5000 2.03",
1.169 + "flex-grow": "0.5",
1.170 + "flex-shrink": "2.03",
1.171 + },
1.172 + {
1.173 + "flex": "300.0 500.0",
1.174 + "flex-grow": "300",
1.175 + "flex-shrink": "500",
1.176 + },
1.177 +
1.178 + // Two Values (numeric & length-ish) --> sets flex-grow, flex-basis
1.179 + // ----------------------------------------------------------------
1.180 + {
1.181 + "flex": "0 0px",
1.182 + "flex-grow": "0",
1.183 + "flex-basis": "0px",
1.184 + },
1.185 + {
1.186 + "flex": "0 0%",
1.187 + "flex-grow": "0",
1.188 + "flex-basis": "0%",
1.189 + },
1.190 + {
1.191 + "flex": "10 30px",
1.192 + "flex-grow": "10",
1.193 + "flex-basis": "30px",
1.194 + },
1.195 + {
1.196 + "flex": "99px 2.3",
1.197 + "flex-grow": "2.3",
1.198 + "flex-basis": "99px",
1.199 + },
1.200 + {
1.201 + "flex": "99% 6",
1.202 + "flex-grow": "6",
1.203 + "flex-basis": "99%",
1.204 + },
1.205 + {
1.206 + "flex": "auto 5",
1.207 + "flex-grow": "5",
1.208 + "flex-basis": "auto",
1.209 + },
1.210 + {
1.211 + "flex": "5 -moz-fit-content",
1.212 + "flex-grow": "5",
1.213 + "flex-basis": "-moz-fit-content",
1.214 + },
1.215 + {
1.216 + "flex": "calc(5% + 10px) 3",
1.217 + "flex-grow": "3",
1.218 + "flex-basis": "calc(10px + 5%)",
1.219 + },
1.220 +
1.221 + // Three Values --> Sets all three subproperties
1.222 + // ---------------------------------------------
1.223 + {
1.224 + "flex": "0 0 0",
1.225 + "flex-grow": "0",
1.226 + "flex-shrink": "0",
1.227 + "flex-basis": "0px",
1.228 + },
1.229 + {
1.230 + "flex": "0.0 0.00 0px",
1.231 + "flex-grow": "0",
1.232 + "flex-shrink": "0",
1.233 + "flex-basis": "0px",
1.234 + },
1.235 + {
1.236 + "flex": "0% 0 0",
1.237 + "flex-grow": "0",
1.238 + "flex-shrink": "0",
1.239 + "flex-basis": "0%",
1.240 + },
1.241 + {
1.242 + "flex": "10px 3 2",
1.243 + "flex-grow": "3",
1.244 + "flex-shrink": "2",
1.245 + "flex-basis": "10px",
1.246 + },
1.247 +];
1.248 +
1.249 +function runFlexShorthandTest(aFlexShorthandTestcase)
1.250 +{
1.251 + let content = document.getElementById("content");
1.252 +
1.253 + let elem = document.createElement("div");
1.254 +
1.255 + elem.style[gFlexDOMName] = aFlexShorthandTestcase[gFlexPropName];
1.256 + content.appendChild(elem);
1.257 +
1.258 + gFlexPropInfo.subproperties.forEach(function(aSubPropName) {
1.259 + var expectedVal = aSubPropName in aFlexShorthandTestcase ?
1.260 + aFlexShorthandTestcase[aSubPropName] :
1.261 + gFlexShorthandDefaults[aSubPropName];
1.262 +
1.263 + // Compare computed value against expected computed value (from testcase)
1.264 + is(window.getComputedStyle(elem, null).getPropertyValue(aSubPropName),
1.265 + expectedVal,
1.266 + "Computed value of subproperty \"" + aSubPropName + "\" when we set \"" +
1.267 + gFlexPropName + ": " + aFlexShorthandTestcase[gFlexPropName] + "\"");
1.268 + });
1.269 +
1.270 + // Clean up
1.271 + content.removeChild(elem);
1.272 +}
1.273 +
1.274 +function main() {
1.275 + gFlexShorthandTestcases.forEach(runFlexShorthandTest);
1.276 +}
1.277 +
1.278 +main();
1.279 +
1.280 +</script>
1.281 +</pre>
1.282 +</body>
1.283 +</html>
