Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /layout/style/test/unprefixing_service_iframe.html
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
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>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /layout/style/test/unprefixing_service_iframe.html
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip