mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-07 20:17:37 +00:00
bbd726bf8c
Backed out changeset 4e00f10f5a2d (bug 1132743) Backed out changeset 720842726906 (bug 1132743)
251 lines
8.7 KiB
HTML
251 lines
8.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Helper file for testing CSS Unprefixing Service</title>
|
|
<script type="text/javascript" src="property_database.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="content"></div>
|
|
|
|
<script type="application/javascript;version=1.7">
|
|
"use strict";
|
|
|
|
/** Helper file for testing the CSS Unprefixing Service **/
|
|
|
|
// Testcases for CSS Unprefixing service, with the (string) declaration that
|
|
// should be unprefixed, and the expected resulting property name & value:
|
|
const gTestcases = [
|
|
{ decl: "-webkit-box-flex:5",
|
|
targetPropName: "flex-grow",
|
|
targetPropVal: "5" },
|
|
|
|
/* If author happens to specify modern flexbox style after prefixed style,
|
|
make sure the modern stuff is preserved. */
|
|
{ decl: "-webkit-box-flex:4;flex-grow:6",
|
|
targetPropName: "flex-grow",
|
|
targetPropVal: "6" },
|
|
|
|
/* Tests for handling !important: */
|
|
{ decl: "-webkit-box-flex:3!important;",
|
|
targetPropName: "flex-grow",
|
|
targetPropVal: "3" },
|
|
{ decl: "-webkit-box-flex:2!important;flex-grow:1",
|
|
targetPropName: "flex-grow",
|
|
targetPropVal: "2" },
|
|
|
|
{ decl: "-webkit-box-flex:1!important bogusText;",
|
|
targetPropName: "flex-grow"
|
|
/* invalid syntax --> no target prop-val. */
|
|
},
|
|
|
|
// Make sure we handle weird capitalization in property & value, too:
|
|
{ decl: "-WEBKIT-BoX-aLign: baSELine",
|
|
targetPropName: "align-items",
|
|
targetPropVal: "baseline" },
|
|
|
|
{ decl: "display:-webkit-box",
|
|
targetPropName: "display",
|
|
targetPropVal: "flex" },
|
|
|
|
{ decl: "display:-webkit-box; display:-moz-box;",
|
|
targetPropName: "display",
|
|
targetPropVal: "flex" },
|
|
|
|
{ decl: "display:-webkit-foobar; display:-moz-box;",
|
|
targetPropName: "display",
|
|
targetPropVal: "-moz-box" },
|
|
|
|
// -webkit-box-align: baseline | center | end | start | stretch
|
|
// ...maps to:
|
|
// align-items: baseline | center | flex-end | flex-start | stretch
|
|
{ decl: "-webkit-box-align: baseline",
|
|
targetPropName: "align-items",
|
|
targetPropVal: "baseline" },
|
|
{ decl: "-webkit-box-align: center",
|
|
targetPropName: "align-items",
|
|
targetPropVal: "center" },
|
|
{ decl: "-webkit-box-align: end",
|
|
targetPropName: "align-items",
|
|
targetPropVal: "flex-end" },
|
|
{ decl: "-webkit-box-align: start",
|
|
targetPropName: "align-items",
|
|
targetPropVal: "flex-start" },
|
|
{ decl: "-webkit-box-align: stretch",
|
|
targetPropName: "align-items",
|
|
targetPropVal: "stretch" },
|
|
|
|
// -webkit-box-direction is not supported, because it's unused & would be
|
|
// complicated to support. See note in CSSUnprefixingService.js for more.
|
|
|
|
// -webkit-box-ordinal-group: <number> maps directly to "order".
|
|
{ decl: "-webkit-box-ordinal-group: 2",
|
|
targetPropName: "order",
|
|
targetPropVal: "2" },
|
|
{ decl: "-webkit-box-ordinal-group: 6000",
|
|
targetPropName: "order",
|
|
targetPropVal: "6000" },
|
|
|
|
// -webkit-box-orient: horizontal | inline-axis | vertical | block-axis
|
|
// ...maps to:
|
|
// flex-direction: row | row | column | column
|
|
{ decl: "-webkit-box-orient: horizontal",
|
|
targetPropName: "flex-direction",
|
|
targetPropVal: "row" },
|
|
{ decl: "-webkit-box-orient: inline-axis",
|
|
targetPropName: "flex-direction",
|
|
targetPropVal: "row" },
|
|
{ decl: "-webkit-box-orient: vertical",
|
|
targetPropName: "flex-direction",
|
|
targetPropVal: "column" },
|
|
{ decl: "-webkit-box-orient: block-axis",
|
|
targetPropName: "flex-direction",
|
|
targetPropVal: "column" },
|
|
|
|
// -webkit-box-pack: start | center | end | justify
|
|
// ... maps to:
|
|
// justify-content: flex-start | center | flex-end | space-between
|
|
{ decl: "-webkit-box-pack: start",
|
|
targetPropName: "justify-content",
|
|
targetPropVal: "flex-start" },
|
|
{ decl: "-webkit-box-pack: center",
|
|
targetPropName: "justify-content",
|
|
targetPropVal: "center" },
|
|
{ decl: "-webkit-box-pack: end",
|
|
targetPropName: "justify-content",
|
|
targetPropVal: "flex-end" },
|
|
{ decl: "-webkit-box-pack: justify",
|
|
targetPropName: "justify-content",
|
|
targetPropVal: "space-between" },
|
|
|
|
// -webkit-transform: <transform> maps directly to "transform"
|
|
{ decl: "-webkit-transform: matrix(1, 2, 3, 4, 5, 6)",
|
|
targetPropName: "transform",
|
|
targetPropVal: "matrix(1, 2, 3, 4, 5, 6)" },
|
|
|
|
// -webkit-transition: <property> maps directly to "transition"
|
|
{ decl: "-webkit-transition: width 1s linear 2s",
|
|
targetPropName: "transition",
|
|
targetPropVal: "width 1s linear 2s" },
|
|
|
|
// -webkit-transition **with** -webkit-prefixed property in value.
|
|
{ decl: "-webkit-transition: -webkit-transform 1s linear 2s",
|
|
targetPropName: "transition",
|
|
targetPropVal: "transform 1s linear 2s" },
|
|
// (Re-test to check that it sets the "transition-property" subproperty.)
|
|
{ decl: "-webkit-transition: -webkit-transform 1s linear 2s",
|
|
targetPropName: "transition-property",
|
|
targetPropVal: "transform" },
|
|
|
|
// Same as previous test, except with "-webkit-transform" in the
|
|
// middle of the value instead of at the beginning (still valid):
|
|
{ decl: "-webkit-transition: 1s -webkit-transform linear 2s",
|
|
targetPropName: "transition",
|
|
targetPropVal: "transform 1s linear 2s" },
|
|
{ decl: "-webkit-transition: 1s -webkit-transform linear 2s",
|
|
targetPropName: "transition-property",
|
|
targetPropVal: "transform" },
|
|
];
|
|
|
|
function getComputedStyleWrapper(elem, prop)
|
|
{
|
|
return window.getComputedStyle(elem, null).getPropertyValue(prop);
|
|
}
|
|
|
|
// Shims for "is()" and "ok()", which defer to parent window using postMessage:
|
|
function is(aActual, aExpected, aDesc)
|
|
{
|
|
// Add URL to description:
|
|
aDesc += " (iframe url: '" + window.location + "')";
|
|
|
|
window.parent.postMessage({type: "is",
|
|
actual: aActual,
|
|
expected: aExpected,
|
|
desc: aDesc}, "*");
|
|
}
|
|
|
|
function ok(aCondition, aDesc)
|
|
{
|
|
// Add URL to description:
|
|
aDesc += " (iframe url: '" + window.location + "')";
|
|
|
|
window.parent.postMessage({type: "ok",
|
|
condition: aCondition,
|
|
desc: aDesc}, "*");
|
|
}
|
|
|
|
// Main test function to use, to test a given unprefixed CSS property.
|
|
// The argument aTestcase should be an entry from gTestcases above.
|
|
function runOneTest(aTestcase)
|
|
{
|
|
let elem = document.getElementById("content");
|
|
|
|
let expectedValueInDOMStyle;
|
|
let expectedValueInComputedStyle;
|
|
if (typeof(aTestcase.targetPropVal) == 'undefined') {
|
|
expectedValueInDOMStyle = '';
|
|
expectedValueInComputedStyle = // initial computed style:
|
|
getComputedStyleWrapper(elem, aTestcase.targetPropName);
|
|
} else {
|
|
expectedValueInDOMStyle = aTestcase.targetPropVal;
|
|
expectedValueInComputedStyle = aTestcase.targetPropVal;
|
|
}
|
|
|
|
elem.setAttribute("style", aTestcase.decl);
|
|
|
|
// Check specified style for fixup:
|
|
is(elem.style[aTestcase.targetPropName], expectedValueInDOMStyle,
|
|
"Checking if CSS Unprefixing Service produced expected result " +
|
|
"in elem.style['" + aTestcase.targetPropName + "'] " +
|
|
"when given decl '" + aTestcase.decl + "'");
|
|
|
|
// Check computed style for fixup:
|
|
// (only for longhand properties; shorthands aren't in computed style)
|
|
if (gCSSProperties[aTestcase.targetPropName].type == CSS_TYPE_LONGHAND) {
|
|
let computedValue = getComputedStyleWrapper(elem, aTestcase.targetPropName);
|
|
is(computedValue, expectedValueInComputedStyle,
|
|
"Checking if CSS Unprefixing Service produced expected result " +
|
|
"in computed value of property '" + aTestcase.targetPropName + "' " +
|
|
"when given decl '" + aTestcase.decl + "'");
|
|
}
|
|
|
|
elem.setAttribute("style", "");
|
|
}
|
|
|
|
// Function used to quickly test that unprefixing is off:
|
|
function testUnprefixingDisabled()
|
|
{
|
|
let elem = document.getElementById("content");
|
|
|
|
let initialFlexGrow = getComputedStyleWrapper(elem, "flex-grow");
|
|
elem.setAttribute("style", "-webkit-box-flex:5");
|
|
is(getComputedStyleWrapper(elem, "flex-grow"), initialFlexGrow,
|
|
"'-webkit-box-flex' shouldn't affect computed 'flex-grow' " +
|
|
"when CSS Unprefixing Service is inactive");
|
|
|
|
let initialDisplay = getComputedStyleWrapper(elem, "display");
|
|
elem.setAttribute("style", "display:-webkit-box");
|
|
is(getComputedStyleWrapper(elem, "display"), initialDisplay,
|
|
"'display:-webkit-box' shouldn't affect computed 'display' " +
|
|
"when CSS Unprefixing Service is inactive");
|
|
}
|
|
|
|
function startTest()
|
|
{
|
|
if (window.location.hash === "#expectEnabled") {
|
|
gTestcases.forEach(runOneTest);
|
|
} else if (window.location.hash === "#expectDisabled") {
|
|
testUnprefixingDisabled();
|
|
} else {
|
|
ok(false,
|
|
"Need a recognized 'window.location.hash' to indicate expectation. " +
|
|
"Got: '" + window.location.hash + "'");
|
|
}
|
|
window.parent.postMessage({type: "testComplete"}, "*");
|
|
}
|
|
|
|
startTest();
|
|
</script>
|
|
</body>
|
|
</html>
|