Bug 1107378 - Part 4: Add mochitest for our CSS unprefixing functionality. r=dbaron
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 26 Feb 2015 12:07:08 -0800
changeset 231131 81233d5e13943ba99c1af751c99c30c03914d7e1
parent 231130 57410350de4dcd0bd40dd1a0260ce02a35c04e8b
child 231132 27f56cce61829ff560b7f4eac1791ba231d4958f
push id28344
push userryanvm@gmail.com
push dateFri, 27 Feb 2015 18:20:08 +0000
treeherdermozilla-central@9dd9d1e5b43c [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>