gecko/layout/style/test/test_flexbox_flex_shorthand.html
L. David Baron db939a352b Add support for unprefixed calc(), and prefer serializing to unprefixed form. (Bug 771678) r=bzbarsky
This also converts all of the tests in layout/style/test/ to using
calc(), except that it duplicates all of the valid values and some of
the invalid values for 'width' and '-moz-column-rule-width' (which are
the two properties that intentionally have extensive calc() tests) in
property_database.js.
2012-07-13 15:06:50 -07:00

261 lines
6.6 KiB
HTML

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=696253
-->
<head>
<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>
<p id="display"></p>
<div id="content">
</div>
<pre id="test">
<script type="application/javascript;version=1.7">
/** Test for Bug 696253 **/
/* (Testing the [-moz-]flex CSS shorthand property) */
const gFlexPropName = "-moz-flex";
const gFlexPropInfo = gCSSProperties[gFlexPropName];
// 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 = {
"-moz-flex-grow": "1",
"-moz-flex-shrink": "1",
"-moz-flex-basis": "0%"
};
let gFlexShorthandTestcases = [
/*
{
"-moz-flex": "SPECIFIED value for flex shorthand",
// Expected Computed Values of Subproperties
// Semi-optional -- if unspecified, the expected value is taken
// from gFlexShorthandDefaults.
"-moz-flex-grow": "EXPECTED computed value for flex-grow property",
"-moz-flex-shrink": "EXPECTED computed value for flex-shrink property",
"-moz-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).
{
"-moz-flex": "",
"-moz-flex-grow": "0",
"-moz-flex-shrink": "1",
"-moz-flex-basis": "auto",
},
{
"-moz-flex": "-moz-initial",
"-moz-flex-grow": "0",
"-moz-flex-shrink": "1",
"-moz-flex-basis": "auto",
},
// Special keyword "none" --> "0 0 auto"
// -------------------------------------
{
"-moz-flex": "none",
"-moz-flex-grow": "0",
"-moz-flex-shrink": "0",
"-moz-flex-basis": "auto",
},
// One Value (numeric) --> sets flex-grow
// --------------------------------------
{
"-moz-flex": "0",
"-moz-flex-grow": "0",
},
{
"-moz-flex": "5",
"-moz-flex-grow": "5",
},
{
"-moz-flex": "1000",
"-moz-flex-grow": "1000",
},
{
"-moz-flex": "0.0000001",
"-moz-flex-grow": "1e-7"
},
{
"-moz-flex": "20000000",
"-moz-flex-grow": "2e+7"
},
// One Value (length or other nonnumeric) --> sets flex-basis
// ----------------------------------------------------------
{
"-moz-flex": "0px",
"-moz-flex-basis": "0px",
},
{
"-moz-flex": "0%",
"-moz-flex-basis": "0%",
},
{
"-moz-flex": "25px",
"-moz-flex-basis": "25px",
},
{
"-moz-flex": "5%",
"-moz-flex-basis": "5%",
},
{
"-moz-flex": "auto",
"-moz-flex-basis": "auto",
},
{
"-moz-flex": "-moz-fit-content",
"-moz-flex-basis": "-moz-fit-content",
},
{
"-moz-flex": "calc(5px + 6px)",
"-moz-flex-basis": "11px",
},
{
"-moz-flex": "calc(15% + 30px)",
"-moz-flex-basis": "calc(30px + 15%)",
},
// Two Values (numeric) --> sets flex-grow, flex-shrink
// ----------------------------------------------------
{
"-moz-flex": "0 0",
"-moz-flex-grow": "0",
"-moz-flex-shrink": "0",
},
{
"-moz-flex": "0 2",
"-moz-flex-grow": "0",
"-moz-flex-shrink": "2",
},
{
"-moz-flex": "3 0",
"-moz-flex-grow": "3",
"-moz-flex-shrink": "0",
},
{
"-moz-flex": "0.5000 2.03",
"-moz-flex-grow": "0.5",
"-moz-flex-shrink": "2.03",
},
{
"-moz-flex": "300.0 500.0",
"-moz-flex-grow": "300",
"-moz-flex-shrink": "500",
},
// Two Values (numeric & length-ish) --> sets flex-grow, flex-basis
// ----------------------------------------------------------------
{
"-moz-flex": "0 0px",
"-moz-flex-grow": "0",
"-moz-flex-basis": "0px",
},
{
"-moz-flex": "0 0%",
"-moz-flex-grow": "0",
"-moz-flex-basis": "0%",
},
{
"-moz-flex": "10 30px",
"-moz-flex-grow": "10",
"-moz-flex-basis": "30px",
},
{
"-moz-flex": "99px 2.3",
"-moz-flex-grow": "2.3",
"-moz-flex-basis": "99px",
},
{
"-moz-flex": "99% 6",
"-moz-flex-grow": "6",
"-moz-flex-basis": "99%",
},
{
"-moz-flex": "auto 5",
"-moz-flex-grow": "5",
"-moz-flex-basis": "auto",
},
{
"-moz-flex": "5 -moz-fit-content",
"-moz-flex-grow": "5",
"-moz-flex-basis": "-moz-fit-content",
},
{
"-moz-flex": "calc(5% + 10px) 3",
"-moz-flex-grow": "3",
"-moz-flex-basis": "calc(10px + 5%)",
},
// Three Values --> Sets all three subproperties
// ---------------------------------------------
{
"-moz-flex": "0.0 0.00 0px",
"-moz-flex-grow": "0",
"-moz-flex-shrink": "0",
"-moz-flex-basis": "0px",
},
{
"-moz-flex": "0% 0 0",
"-moz-flex-grow": "0",
"-moz-flex-shrink": "0",
"-moz-flex-basis": "0%",
},
{
"-moz-flex": "10px 3 2",
"-moz-flex-grow": "3",
"-moz-flex-shrink": "2",
"-moz-flex-basis": "10px",
},
];
function runFlexShorthandTest(aFlexShorthandTestcase)
{
let content = document.getElementById("content");
let elem = document.createElement("div");
elem.style[gFlexPropInfo.domProp] = 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);
}
// Run the tests!
gFlexShorthandTestcases.forEach(runFlexShorthandTest)
</script>
</pre>
</body>
</html>