Bug 1107378 part 4: Add mochitest for our CSS unprefixing functionality. r=dbaron
☠☠ backed out by 68df163b1792 ☠ ☠
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 26 Feb 2015 12:07:08 -0800
changeset 231014 44144b89241487a8b89d3ceaf4a91856bc9060a5
parent 231013 5a8d5e8ff5241612e67fdbe3a952806a19153ba1
child 231015 19f877f9ff682388df5c7d1b9282cf7f869141c0
push id56157
push userdholbert@mozilla.com
push dateThu, 26 Feb 2015 20:08:08 +0000
treeherdermozilla-inbound@44144b892414 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs1107378
milestone39.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1107378 part 4: Add mochitest for our CSS unprefixing functionality. r=dbaron
layout/style/test/mochitest.ini
layout/style/test/test_unprefixing_service.html
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -218,16 +218,17 @@ skip-if = buildapp == 'b2g' || toolkit =
 [test_transitions_step_functions.html]
 [test_transitions_dynamic_changes.html]
 [test_transitions_bug537151.html]
 [test_unclosed_parentheses.html]
 [test_units_angle.html]
 [test_units_frequency.html]
 [test_units_length.html]
 [test_units_time.html]
+[test_unprefixing_service.html]
 [test_value_cloning.html]
 skip-if = (toolkit == 'gonk' && debug) || toolkit == 'android' #bug 775227 #debug-only failure; timed out
 [test_value_computation.html]
 skip-if = (toolkit == 'gonk' && debug) || toolkit == 'android' #debug-only failure
 [test_value_storage.html]
 skip-if = (toolkit == 'gonk' && debug) #debug-only failure
 [test_variable_serialization_computed.html]
 [test_variable_serialization_specified.html]
new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_unprefixing_service.html
@@ -0,0 +1,240 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1107378
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1107378</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=1107378">Mozilla Bug 1107378</a>
+<div id="display">
+  <div id="content">
+  </div>
+</div>
+<pre id="test">
+<script type="application/javascript;version=1.7">
+"use strict";
+
+/** Test for the CSS Unprefixing Service (Bug 1107378) **/
+
+function getComputedStyleWrapper(elem, prop)
+{
+  return window.getComputedStyle(elem, null).getPropertyValue(prop);
+}
+
+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" },
+];
+
+// The main test function.
+// aFlexboxTestcase is an entry from the list in flexbox_layout_testcases.js
+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 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 unprefixing service produced expected result " +
+       "in computed value of property '" +  aTestcase.targetPropName + "' " +
+       "when given decl '" + aTestcase.decl + "'");
+  }
+
+  elem.setAttribute("style", "");
+}
+
+function testWithUnprefixingDisabled()
+{
+  // Sanity-check that -webkit-prefixed properties are rejected, when
+  // pref is disabled:
+  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 'flex-grow' " +
+     "when unprefixing pref is disabled");
+
+  let initialDisplay = getComputedStyleWrapper(elem, "display");
+  elem.setAttribute("style", "display:-webkit-box");
+  is(getComputedStyleWrapper(elem, "display"), initialDisplay,
+     "-webkit-box-flex shouldn't affect 'display' " +
+     "when unprefixing pref is disabled");
+}
+
+function testWithUnprefixingEnabled()
+{
+  gTestcases.forEach(runOneTest);
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+
+// First, test with unprefixing disabled (by default for now):
+testWithUnprefixingDisabled();
+
+// ...and then test with it enabled.
+// XXXdholbert in bug 1132743, we'll be restricting unprefixing to only happen
+// on a "fixlist" of domains. We'll need to run this test from a predetermined
+// fake mochitest-domain, and include that domain in the "fixlist".
+SpecialPowers.pushPrefEnv(
+  { set: [["layout.css.unprefixing-service.enabled", true]] },
+  testWithUnprefixingEnabled);
+
+</script>
+</pre>
+</body>
+</html>