diff options
Diffstat (limited to 'layout/style/test/unprefixing_service_iframe.html')
| -rw-r--r-- | layout/style/test/unprefixing_service_iframe.html | 394 |
1 files changed, 394 insertions, 0 deletions
diff --git a/layout/style/test/unprefixing_service_iframe.html b/layout/style/test/unprefixing_service_iframe.html new file mode 100644 index 000000000..8edeb20dc --- /dev/null +++ b/layout/style/test/unprefixing_service_iframe.html @@ -0,0 +1,394 @@ +<!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> + <style type="text/css"> + #wrapper { + width: 500px; + } + </style> +</head> +<body> +<div id="wrapper"> + <div id="content"></div> +</div> + +<script type="application/javascript;version=1.7"> +"use strict"; + +/** Helper file for testing the CSS Unprefixing Service **/ + +/* Testcases for CSS Unprefixing service. + * + * Each testcase MUST have the following fields: + * - decl: A CSS declaration with prefixed style, to be tested via elem.style. + * - targetPropName: The name of the property whose value should be + * affected by |decl|. + * + * And will have EITHER: + * - isInvalid: If set to something truthy, this implies that |decl| is + * invalid and should have no effect on |targetPropName|'s + * computed or specified style. + * + * ...OR: + * - expectedDOMStyleVal: The value that we expect to find in the specified + * style -- in elem.style.[targetPropName]. + * - expectedCompStyleVal: The value that we expect to find in the computed + * style -- in getComputedStyle(...)[targetPropName] + * If omitted, this is assumed to be the same as + * expectedDOMStyleVal. (Usually they'll be the same.) + */ +const gTestcases = [ + { decl: "-webkit-box-flex:5", + targetPropName: "flex-grow", + expectedDOMStyleVal: "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", + expectedDOMStyleVal: "6" }, + + /* Tests for handling !important: */ + { decl: "-webkit-box-flex:3!important;", + targetPropName: "flex-grow", + expectedDOMStyleVal: "3" }, + { decl: "-webkit-box-flex:2!important;flex-grow:1", + targetPropName: "flex-grow", + expectedDOMStyleVal: "2" }, + + { decl: "-webkit-box-flex:1!important bogusText;", + targetPropName: "flex-grow", + isInvalid: true }, + + // Make sure we handle weird capitalization in property & value, too: + { decl: "-WEBKIT-BoX-aLign: baSELine", + targetPropName: "align-items", + expectedDOMStyleVal: "baseline" }, + + { decl: "display:-webkit-box", + targetPropName: "display", + expectedDOMStyleVal: "flex" }, + + { decl: "display:-webkit-box; display:-moz-box;", + targetPropName: "display", + expectedDOMStyleVal: "flex" }, + + { decl: "display:-webkit-foobar; display:-moz-box;", + targetPropName: "display", + expectedDOMStyleVal: "-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", + expectedDOMStyleVal: "baseline" }, + { decl: "-webkit-box-align: center", + targetPropName: "align-items", + expectedDOMStyleVal: "center" }, + { decl: "-webkit-box-align: end", + targetPropName: "align-items", + expectedDOMStyleVal: "flex-end" }, + { decl: "-webkit-box-align: start", + targetPropName: "align-items", + expectedDOMStyleVal: "flex-start" }, + { decl: "-webkit-box-align: stretch", + targetPropName: "align-items", + expectedDOMStyleVal: "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", + expectedDOMStyleVal: "2" }, + { decl: "-webkit-box-ordinal-group: 6000", + targetPropName: "order", + expectedDOMStyleVal: "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", + expectedDOMStyleVal: "row" }, + { decl: "-webkit-box-orient: inline-axis", + targetPropName: "flex-direction", + expectedDOMStyleVal: "row" }, + { decl: "-webkit-box-orient: vertical", + targetPropName: "flex-direction", + expectedDOMStyleVal: "column" }, + { decl: "-webkit-box-orient: block-axis", + targetPropName: "flex-direction", + expectedDOMStyleVal: "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", + expectedDOMStyleVal: "flex-start" }, + { decl: "-webkit-box-pack: center", + targetPropName: "justify-content", + expectedDOMStyleVal: "center" }, + { decl: "-webkit-box-pack: end", + targetPropName: "justify-content", + expectedDOMStyleVal: "flex-end" }, + { decl: "-webkit-box-pack: justify", + targetPropName: "justify-content", + expectedDOMStyleVal: "space-between" }, + + // -webkit-transform: <transform> maps directly to "transform" + { decl: "-webkit-transform: matrix(1, 2, 3, 4, 5, 6)", + targetPropName: "transform", + expectedDOMStyleVal: "matrix(1, 2, 3, 4, 5, 6)" }, + + // -webkit-transform-origin: <value> maps directly to "transform-origin" + { decl: "-webkit-transform-origin: 0 0", + targetPropName: "transform-origin", + expectedDOMStyleVal: "0px 0px 0px", + expectedCompStyleVal: "0px 0px" }, + + { decl: "-webkit-transform-origin: 100% 0", + targetPropName: "transform-origin", + expectedDOMStyleVal: "100% 0px 0px", + expectedCompStyleVal: "500px 0px" }, + + // -webkit-transition: <property> maps directly to "transition" + { decl: "-webkit-transition: width 1s linear 2s", + targetPropName: "transition", + expectedDOMStyleVal: "width 1s linear 2s" }, + + // -webkit-transition **with** -webkit-prefixed property in value. + { decl: "-webkit-transition: -webkit-transform 1s linear 2s", + targetPropName: "transition", + expectedDOMStyleVal: "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", + expectedDOMStyleVal: "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", + expectedDOMStyleVal: "transform 1s linear 2s" }, + { decl: "-webkit-transition: 1s -webkit-transform linear 2s", + targetPropName: "transition-property", + expectedDOMStyleVal: "transform" }, + + // -webkit-gradient(linear, ...) expressions: + { decl: "background-image: -webkit-gradient(linear,0 0,0 100%,from(rgb(1, 2, 3)),to(rgb(104, 105, 106)))", + targetPropName: "background-image", + expectedDOMStyleVal: "linear-gradient(180deg, rgb(1, 2, 3) 0%, rgb(104, 105, 106) 100%)"}, + { decl: "background-image: -webkit-gradient(linear, left top, right bottom, from(rgb(1, 2, 3)), to(rgb(201, 202, 203)))", + targetPropName: "background-image", + expectedDOMStyleVal: "linear-gradient(135deg, rgb(1, 2, 3) 0%, rgb(201, 202, 203) 100%)"}, + + { decl: "background-image: -webkit-gradient(linear, left center, right center, from(rgb(1, 2, 3)), to(rgb(201, 202, 203)))", + targetPropName: "background-image", + expectedDOMStyleVal: "linear-gradient(to right, rgb(1, 2, 3) 0%, rgb(201, 202, 203) 100%)"}, + + { decl: "background-image: -webkit-gradient(linear, left center, right center, from(rgb(0, 0, 0)), color-stop(30%, rgb(255, 0, 0)), color-stop(60%, rgb(0, 255, 0)), to(rgb(0, 0, 255)))", + targetPropName: "background-image", + expectedDOMStyleVal: "linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(255, 0, 0) 30%, rgb(0, 255, 0) 60%, rgb(0, 0, 255) 100%)"}, + + // -webkit-gradient(radial, ...) expressions: + { decl: "background-image: -webkit-gradient(radial, center center, 0, center center, 50, from(black), to(white)", + targetPropName: "background-image", + expectedDOMStyleVal: "radial-gradient(50px at center center , black 0%, white 100%)", + // XXXdholbert Note: unnecessary space, see bug 1160063----^ + expectedCompStyleVal: "radial-gradient(50px, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%)", }, + + { decl: "background-image: -webkit-gradient(radial, left bottom, 0, center center, 50, from(yellow), color-stop(20%, orange), color-stop(40%, red), color-stop(60%, green), color-stop(80%, blue), to(purple))", + targetPropName: "background-image", + expectedDOMStyleVal: "radial-gradient(50px at left bottom , yellow 0%, orange 20%, red 40%, green 60%, blue 80%, purple 100%)", + // XXXdholbert Note: unnecessary space, see bug 1160063--^ + expectedCompStyleVal: "radial-gradient(50px at 0% 100%, rgb(255, 255, 0) 0%, rgb(255, 165, 0) 20%, rgb(255, 0, 0) 40%, rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%, rgb(128, 0, 128) 100%)" }, + + // -webkit-linear-gradient(...) expressions: + { decl: "background-image: -webkit-linear-gradient(top, blue, green)", + targetPropName: "background-image", + expectedDOMStyleVal: "linear-gradient(to bottom, blue, green)", + expectedCompStyleVal: "linear-gradient(rgb(0, 0, 255), rgb(0, 128, 0))", }, + + { decl: "background-image: -webkit-linear-gradient(left, blue, green)", + targetPropName: "background-image", + expectedDOMStyleVal: "linear-gradient(to right, blue, green)", + expectedCompStyleVal: "linear-gradient(to right, rgb(0, 0, 255), rgb(0, 128, 0))", }, + + { decl: "background-image: -webkit-linear-gradient(left bottom, blue, green)", + targetPropName: "background-image", + expectedDOMStyleVal: "linear-gradient(to right top, blue, green)", + expectedCompStyleVal: "linear-gradient(to top right, rgb(0, 0, 255), rgb(0, 128, 0))", }, + + { decl: "background-image: -webkit-linear-gradient(130deg, blue, green)", + targetPropName: "background-image", + expectedDOMStyleVal: "linear-gradient(320deg, blue, green)", + expectedCompStyleVal: "linear-gradient(320deg, rgb(0, 0, 255), rgb(0, 128, 0))", }, + + // -webkit-radial-gradient(...) expressions: + { decl: "background-image: -webkit-radial-gradient(#000, #fff)", + targetPropName: "background-image", + expectedDOMStyleVal: "radial-gradient(rgb(0, 0, 0), rgb(255, 255, 255))", }, + + { decl: "background-image: -webkit-radial-gradient(bottom right, white, black)", + targetPropName: "background-image", + expectedDOMStyleVal: "radial-gradient(at right bottom , white, black)", + // XXXdholbert Note: unnecessary space---------------^ see bug 1160063 + expectedCompStyleVal: "radial-gradient(at 100% 100%, rgb(255, 255, 255), rgb(0, 0, 0))", }, + + // Combination of unprefixed & prefixed gradient styles in a single 'background-image' expression + { decl: "background-image: -webkit-linear-gradient(black, white), radial-gradient(blue, purple), -webkit-gradient(linear,0 0,0 100%,from(red),to(orange))", + targetPropName: "background-image", + expectedDOMStyleVal: "linear-gradient(black, white), radial-gradient(blue, purple), linear-gradient(180deg, red 0%, orange 100%)", + expectedCompStyleVal: "linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)), radial-gradient(rgb(0, 0, 255), rgb(128, 0, 128)), linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(255, 165, 0) 100%)", }, + +]; + +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"); + + // (self-test/sanity-check:) + if (!aTestcase.decl || !aTestcase.targetPropName) { + ok(false, "Bug in test; missing 'decl' or 'targetPropName' field"); + } + + // Populate testcase's implied fields: + if (aTestcase.isInvalid) { + // (self-test/sanity-check:) + if (aTestcase.expectedDOMStyleVal || aTestcase.expectedCompStyleVal) { + ok(false, "Bug in test; testcase w/ 'isInvalid' field also provided " + + "an expected*Val field, but should not have"); + } + aTestcase.expectedDOMStyleVal = ''; + aTestcase.expectedCompStyleVal = // initial computed style: + getComputedStyleWrapper(elem, aTestcase.targetPropName); + } else { + // (self-test/sanity-check:) + if (!aTestcase.expectedDOMStyleVal) { + ok(false, "Bug in test; testcase must provide expectedDOMStyleVal " + + "(or set isInvalid if it's testing an invalid decl)"); + } + // If expected computed style is unspecified, we assume it should match + // expected DOM style: + if (!aTestcase.expectedCompStyleVal) { + aTestcase.expectedCompStyleVal = aTestcase.expectedDOMStyleVal; + } + } + + elem.setAttribute("style", aTestcase.decl); + + // Check that DOM elem.style has the expected value: + is(elem.style[aTestcase.targetPropName], aTestcase.expectedDOMStyleVal, + "Checking if CSS Unprefixing Service produced expected result " + + "in elem.style['" + aTestcase.targetPropName + "'] " + + "when given decl '" + aTestcase.decl + "'"); + + // Check that computed style has the expected value: + // (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, aTestcase.expectedCompStyleVal, + "Checking if CSS Unprefixing Service produced expected result " + + "in computed value of property '" + aTestcase.targetPropName + "' " + + "when given decl '" + aTestcase.decl + "'"); + } + + elem.removeAttribute("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"); + + elem.style.display = "-webkit-box"; + is(getComputedStyleWrapper(elem, "display"), initialDisplay, + "Setting elem.style.display to '-webkit-box' shouldn't affect computed " + + "'display' when CSS Unprefixing Service is inactive"); +} + +// Focused test that CSS Unprefixing Service is functioning properly +// on direct tweaks to elem.style.display: +function testStyleDisplayDirectly() +{ + let elem = document.getElementById("content"); + elem.style.display = "-webkit-box"; + + is(elem.style.display, "flex", + "Setting elem.style.display to '-webkit-box' should produce 'flex' " + + "in elem.style.display, when CSS Unprefixing Service is active"); + is(getComputedStyleWrapper(elem, "display"), "flex", + "Setting elem.style.display to '-webkit-box' should produce 'flex' " + + "in computed style, when CSS Unprefixing Service is active"); + + // clean up: + elem.style.display = ""; +} + +function startTest() +{ + if (window.location.hash === "#expectEnabled") { + testStyleDisplayDirectly(); + 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> |