Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

410 files changed, 68725 insertions, 0 deletions

diff --git a/layout/style/test/Ahem.ttf b/layout/style/test/Ahem.ttf
new file mode 100644
index 0000000000..ac81cb0316
--- /dev/null
+++ b/layout/style/test/Ahem.ttf
diff --git a/layout/style/test/BitPattern.woff b/layout/style/test/BitPattern.woff
new file mode 100644
index 0000000000..e4e8244057
--- /dev/null
+++ b/layout/style/test/BitPattern.woff
diff --git a/layout/style/test/ListCSSProperties.cpp b/layout/style/test/ListCSSProperties.cpp
new file mode 100644
index 0000000000..743fd72dea
--- /dev/null
+++ b/layout/style/test/ListCSSProperties.cpp
@@ -0,0 +1,179 @@
+/* vim: set shiftwidth=4 tabstop=8 autoindent cindent expandtab: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* build (from code) lists of all supported CSS properties */
+
+#include <stdio.h>
+#include <string.h>
+#include <stdlib.h>
+#include "mozilla/ArrayUtils.h"
+
+// Do not consider properties not valid in style rules
+#define CSS_PROP_LIST_EXCLUDE_NOT_IN_STYLE
+
+// Need an extra level of macro nesting to force expansion of method_
+// params before they get pasted.
+#define STRINGIFY_METHOD(method_) #method_
+
+struct PropertyInfo {
+  const char* propName;
+  const char* domName;
+  const char* pref;
+};
+
+const PropertyInfo gLonghandProperties[] = {
+
+#define CSS_PROP_PUBLIC_OR_PRIVATE(publicname_, privatename_) publicname_
+#define CSS_PROP_LONGHAND(name_, id_, method_, flags_, pref_, ...) \
+  {#name_, STRINGIFY_METHOD(method_), pref_},
+
+#include "mozilla/ServoCSSPropList.h"
+
+#undef CSS_PROP_LONGHAND
+#undef CSS_PROP_PUBLIC_OR_PRIVATE
+
+};
+
+/*
+ * These are the properties for which domName in the above list should
+ * be used.  They're in the same order as the above list, with some
+ * items skipped.
+ */
+const char* gLonghandPropertiesWithDOMProp[] = {
+
+#define CSS_PROP_LIST_EXCLUDE_INTERNAL
+#define CSS_PROP_LONGHAND(name_, ...) #name_,
+
+#include "mozilla/ServoCSSPropList.h"
+
+#undef CSS_PROP_LONGHAND
+#undef CSS_PROP_LIST_EXCLUDE_INTERNAL
+
+};
+
+const PropertyInfo gShorthandProperties[] = {
+
+#define CSS_PROP_PUBLIC_OR_PRIVATE(publicname_, privatename_) publicname_
+#define CSS_PROP_SHORTHAND(name_, id_, method_, flags_, pref_) \
+  {#name_, STRINGIFY_METHOD(method_), pref_},
+#define CSS_PROP_ALIAS(name_, aliasid_, id_, method_, flags_, pref_) \
+  {#name_, #method_, pref_},
+
+#include "mozilla/ServoCSSPropList.h"
+
+#undef CSS_PROP_ALIAS
+#undef CSS_PROP_SHORTHAND
+#undef CSS_PROP_PUBLIC_OR_PRIVATE
+
+};
+
+/* see gLonghandPropertiesWithDOMProp */
+const char* gShorthandPropertiesWithDOMProp[] = {
+
+#define CSS_PROP_LIST_EXCLUDE_INTERNAL
+#define CSS_PROP_SHORTHAND(name_, id_, method_, flags_, pref_) #name_,
+#define CSS_PROP_ALIAS(name_, aliasid_, id_, method_, flags_, pref_) #name_,
+
+#include "mozilla/ServoCSSPropList.h"
+
+#undef CSS_PROP_ALIAS
+#undef CSS_PROP_SHORTHAND
+#undef CSS_PROP_LIST_EXCLUDE_INTERNAL
+
+};
+
+#undef STRINGIFY_METHOD
+
+const char* gInaccessibleProperties[] = {
+    // Don't print the properties that aren't accepted by the parser, per
+    // CSSParserImpl::ParseProperty
+    "-x-cols",
+    "-x-lang",
+    "-x-span",
+    "-x-text-scale",
+    "-moz-default-appearance",
+    "-moz-inert",
+    "-moz-script-level",  // parsed by UA sheets only
+    "-moz-script-size-multiplier",
+    "-moz-script-min-size",
+    "-moz-math-variant",
+    "-moz-math-display",                     // parsed by UA sheets only
+    "-moz-top-layer",                        // parsed by UA sheets only
+    "-moz-min-font-size-ratio",              // parsed by UA sheets only
+    "-moz-box-collapse",                     // chrome-only internal properties
+    "-moz-font-smoothing-background-color",  // chrome-only internal properties
+    "-moz-subtree-hidden-only-visually",     // chrome-only internal properties
+    "-moz-window-input-region-margin",       // chrome-only internal properties
+    "-moz-window-opacity",                   // chrome-only internal properties
+    "-moz-window-transform",                 // chrome-only internal properties
+    "-moz-window-transform-origin",          // chrome-only internal properties
+    "-moz-window-shadow",                    // chrome-only internal properties
+};
+
+inline int is_inaccessible(const char* aPropName) {
+  for (unsigned j = 0; j < MOZ_ARRAY_LENGTH(gInaccessibleProperties); ++j) {
+    if (strcmp(aPropName, gInaccessibleProperties[j]) == 0) return 1;
+  }
+  return 0;
+}
+
+void print_array(const char* aName, const PropertyInfo* aProps,
+                 unsigned aPropsLength, const char* const* aDOMProps,
+                 unsigned aDOMPropsLength) {
+  printf("var %s = [\n", aName);
+
+  int first = 1;
+  unsigned j = 0;  // index into DOM prop list
+  for (unsigned i = 0; i < aPropsLength; ++i) {
+    const PropertyInfo* p = aProps + i;
+
+    if (is_inaccessible(p->propName))
+      // inaccessible properties never have DOM props, so don't
+      // worry about incrementing j.  The assertion below will
+      // catch if they do.
+      continue;
+
+    if (first)
+      first = 0;
+    else
+      printf(",\n");
+
+    printf("\t{ name: \"%s\", prop: ", p->propName);
+    if (j >= aDOMPropsLength || strcmp(p->propName, aDOMProps[j]) != 0)
+      printf("null");
+    else {
+      ++j;
+      if (strncmp(p->domName, "Moz", 3) == 0)
+        printf("\"%s\"", p->domName);
+      else
+        // lowercase the first letter
+        printf("\"%c%s\"", p->domName[0] + 32, p->domName + 1);
+    }
+    if (p->pref[0]) {
+      printf(", pref: \"%s\"", p->pref);
+    }
+    printf(" }");
+  }
+
+  if (j != aDOMPropsLength) {
+    fprintf(stderr, "Assertion failure %s:%d\n", __FILE__, __LINE__);
+    fprintf(stderr, "j==%d, aDOMPropsLength == %d\n", j, aDOMPropsLength);
+    exit(1);
+  }
+
+  printf("\n];\n\n");
+}
+
+int main() {
+  print_array("gLonghandProperties", gLonghandProperties,
+              MOZ_ARRAY_LENGTH(gLonghandProperties),
+              gLonghandPropertiesWithDOMProp,
+              MOZ_ARRAY_LENGTH(gLonghandPropertiesWithDOMProp));
+  print_array("gShorthandProperties", gShorthandProperties,
+              MOZ_ARRAY_LENGTH(gShorthandProperties),
+              gShorthandPropertiesWithDOMProp,
+              MOZ_ARRAY_LENGTH(gShorthandPropertiesWithDOMProp));
+  return 0;
+}
diff --git a/layout/style/test/ParseCSS.cpp b/layout/style/test/ParseCSS.cpp
new file mode 100644
index 0000000000..04e37d48e2
--- /dev/null
+++ b/layout/style/test/ParseCSS.cpp
@@ -0,0 +1,80 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+// vim:cindent:ts=8:et:sw=4:
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/*
+ * This file is meant to be used with |#define CSS_REPORT_PARSE_ERRORS|
+ * in mozilla/dom/html/style/src/nsCSSScanner.h uncommented, and the
+ * |#ifdef DEBUG| block in nsCSSScanner::OutputError (in
+ * nsCSSScanner.cpp in the same directory) used (even if not a debug
+ * build).
+ */
+
+#include "nsXPCOM.h"
+#include "nsCOMPtr.h"
+
+#include "nsIFile.h"
+#include "nsNetUtil.h"
+
+#include "nsContentCID.h"
+#include "mozilla/StyleSheetInlines.h"
+#include "mozilla/css/Loader.h"
+
+using namespace mozilla;
+
+static already_AddRefed<nsIURI> FileToURI(const char* aFilename,
+                                          nsresult* aRv = 0) {
+  nsCOMPtr<nsIFile> lf(do_CreateInstance(NS_LOCAL_FILE_CONTRACTID, aRv));
+  NS_ENSURE_TRUE(lf, nullptr);
+  // XXX Handle relative paths somehow.
+  lf->InitWithNativePath(nsDependentCString(aFilename));
+
+  nsIURI* uri = nullptr;
+  nsresult rv = NS_NewFileURI(&uri, lf);
+  if (aRv) *aRv = rv;
+  return uri;
+}
+
+static int ParseCSSFile(nsIURI* aSheetURI) {
+  RefPtr<mozilla::css::Loader> = new mozilla::css::Loader();
+  RefPtr<CSSStyleSheet> sheet;
+  loader->LoadSheetSync(aSheetURI, getter_AddRefs(sheet));
+  NS_ASSERTION(sheet, "sheet load failed");
+  /* This can happen if the file can't be found (e.g. you
+   * ask for a relative path and xpcom/io rejects it)
+   */
+  if (!sheet) return -1;
+  bool complete;
+  sheet->GetComplete(complete);
+  NS_ASSERTION(complete, "synchronous load did not complete");
+  if (!complete) return -2;
+  return 0;
+}
+
+int main(int argc, char** argv) {
+  if (argc < 2) {
+    fprintf(stderr, "%s [FILE]...\n", argv[0]);
+  }
+  nsresult rv = NS_InitXPCOM(nullptr, nullptr, nullptr);
+  if (NS_FAILED(rv)) return (int)rv;
+
+  int res = 0;
+  for (int i = 1; i < argc; ++i) {
+    const char* filename = argv[i];
+
+    printf("\nParsing %s.\n", filename);
+
+    nsCOMPtr<nsIURI> uri = FileToURI(filename, &rv);
+    if (rv == NS_ERROR_OUT_OF_MEMORY) {
+      fprintf(stderr, "Out of memory.\n");
+      return 1;
+    }
+    if (uri) res = ParseCSSFile(uri);
+  }
+
+  NS_ShutdownXPCOM(nullptr);
+
+  return res;
+}
diff --git a/layout/style/test/additional_sheets_helper.html b/layout/style/test/additional_sheets_helper.html
new file mode 100644
index 0000000000..306ddbf5bd
--- /dev/null
+++ b/layout/style/test/additional_sheets_helper.html
@@ -0,0 +1,7 @@
+<html>
+<head>
+</head>
+<body>
+  some text
+</body>
+</html>
diff --git a/layout/style/test/animation_utils.js b/layout/style/test/animation_utils.js
new file mode 100644
index 0000000000..624ec2cc7a
--- /dev/null
+++ b/layout/style/test/animation_utils.js
@@ -0,0 +1,933 @@
+//----------------------------------------------------------------------
+//
+// Common testing functions
+//
+//----------------------------------------------------------------------
+
+function advance_clock(milliseconds) {
+  SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
+}
+
+// Test-element creation/destruction and event checking
+(function () {
+  var gElem;
+  var gEventsReceived = [];
+
+  function new_div(style) {
+    return new_element("div", style);
+  }
+
+  // Creates a new |tagname| element with inline style |style| and appends
+  // it as a child of the element with ID 'display'.
+  // The element will also be given the class 'target' which can be used
+  // for additional styling.
+  function new_element(tagname, style) {
+    if (gElem) {
+      ok(false, "test author forgot to call done_div/done_elem");
+    }
+    if (typeof style != "string") {
+      ok(false, "test author forgot to pass argument");
+    }
+    if (!document.getElementById("display")) {
+      ok(false, "no 'display' element to append to");
+    }
+    gElem = document.createElement(tagname);
+    gElem.setAttribute("style", style);
+    gElem.classList.add("target");
+    document.getElementById("display").appendChild(gElem);
+    return [gElem, getComputedStyle(gElem, "")];
+  }
+
+  function listen() {
+    if (!gElem) {
+      ok(false, "test author forgot to call new_div before listen");
+    }
+    gEventsReceived = [];
+    function listener(event) {
+      gEventsReceived.push(event);
+    }
+    gElem.addEventListener("animationstart", listener);
+    gElem.addEventListener("animationiteration", listener);
+    gElem.addEventListener("animationend", listener);
+  }
+
+  function check_events(eventsExpected, desc) {
+    // This function checks that the list of eventsExpected matches
+    // the received events -- but it only checks the properties that
+    // are present on eventsExpected.
+    is(
+      gEventsReceived.length,
+      eventsExpected.length,
+      "number of events received for " + desc
+    );
+    for (
+      var i = 0,
+        i_end = Math.min(eventsExpected.length, gEventsReceived.length);
+      i != i_end;
+      ++i
+    ) {
+      var exp = eventsExpected[i];
+      var rec = gEventsReceived[i];
+      for (var prop in exp) {
+        if (prop == "elapsedTime") {
+          // Allow floating point error.
+          ok(
+            Math.abs(rec.elapsedTime - exp.elapsedTime) < 0.000002,
+            "events[" +
+              i +
+              "]." +
+              prop +
+              " for " +
+              desc +
+              " received=" +
+              rec.elapsedTime +
+              " expected=" +
+              exp.elapsedTime
+          );
+        } else {
+          is(
+            rec[prop],
+            exp[prop],
+            "events[" + i + "]." + prop + " for " + desc
+          );
+        }
+      }
+    }
+    for (var i = eventsExpected.length; i < gEventsReceived.length; ++i) {
+      ok(false, "unexpected " + gEventsReceived[i].type + " event for " + desc);
+    }
+    gEventsReceived = [];
+  }
+
+  function done_element() {
+    if (!gElem) {
+      ok(
+        false,
+        "test author called done_element/done_div without matching" +
+          " call to new_element/new_div"
+      );
+    }
+    gElem.remove();
+    gElem = null;
+    if (gEventsReceived.length) {
+      ok(false, "caller should have called check_events");
+    }
+  }
+
+  [new_div, new_element, listen, check_events, done_element].forEach(function (
+    fn
+  ) {
+    window[fn.name] = fn;
+  });
+  window.done_div = done_element;
+})();
+
+function px_to_num(str) {
+  return Number(String(str).match(/^([\d.]+)px$/)[1]);
+}
+
+function bezier(x1, y1, x2, y2) {
+  // Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
+  function x_for_t(t) {
+    var omt = 1 - t;
+    return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t;
+  }
+  function y_for_t(t) {
+    var omt = 1 - t;
+    return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t;
+  }
+  function t_for_x(x) {
+    // Binary subdivision.
+    var mint = 0,
+      maxt = 1;
+    for (var i = 0; i < 30; ++i) {
+      var guesst = (mint + maxt) / 2;
+      var guessx = x_for_t(guesst);
+      if (x < guessx) {
+        maxt = guesst;
+      } else {
+        mint = guesst;
+      }
+    }
+    return (mint + maxt) / 2;
+  }
+  return function bezier_closure(x) {
+    if (x == 0) {
+      return 0;
+    }
+    if (x == 1) {
+      return 1;
+    }
+    return y_for_t(t_for_x(x));
+  };
+}
+
+function step_end(nsteps) {
+  return function step_end_closure(x) {
+    return Math.floor(x * nsteps) / nsteps;
+  };
+}
+
+function step_start(nsteps) {
+  var stepend = step_end(nsteps);
+  return function step_start_closure(x) {
+    return 1.0 - stepend(1.0 - x);
+  };
+}
+
+var gTF = {
+  ease: bezier(0.25, 0.1, 0.25, 1),
+  linear: function (x) {
+    return x;
+  },
+  ease_in: bezier(0.42, 0, 1, 1),
+  ease_out: bezier(0, 0, 0.58, 1),
+  ease_in_out: bezier(0.42, 0, 0.58, 1),
+  step_start: step_start(1),
+  step_end: step_end(1),
+};
+
+function is_approx(float1, float2, error, desc) {
+  ok(
+    Math.abs(float1 - float2) < error,
+    desc + ": " + float1 + " and " + float2 + " should be within " + error
+  );
+}
+
+function findKeyframesRule(name) {
+  for (var i = 0; i < document.styleSheets.length; i++) {
+    var match = [].find.call(document.styleSheets[i].cssRules, function (rule) {
+      return rule.type == CSSRule.KEYFRAMES_RULE && rule.name == name;
+    });
+    if (match) {
+      return match;
+    }
+  }
+  return undefined;
+}
+
+// Checks if off-main thread animation (OMTA) is available, and if it is, runs
+// the provided callback function. If OMTA is not available or is not
+// functioning correctly, the second callback, aOnSkip, is run instead.
+//
+// This function also does an internal test to verify that OMTA is working at
+// all so that if OMTA is not functioning correctly when it is expected to
+// function only a single failure is produced.
+//
+// Since this function relies on various asynchronous operations, the caller is
+// responsible for calling SimpleTest.waitForExplicitFinish() before calling
+// this and SimpleTest.finish() within aTestFunction and aOnSkip.
+//
+// specialPowersForPrefs exists because some SpecialPowers objects apparently
+// can get prefs and some can't; callers that would normally have one of the
+// latter but can get their hands on one of the former can pass it in
+// explicitly.
+function runOMTATest(aTestFunction, aOnSkip, specialPowersForPrefs) {
+  const OMTAPrefKey = "layers.offmainthreadcomposition.async-animations";
+  var utils = SpecialPowers.DOMWindowUtils;
+  if (!specialPowersForPrefs) {
+    specialPowersForPrefs = SpecialPowers;
+  }
+  var expectOMTA =
+    utils.layerManagerRemote &&
+    // ^ Off-main thread animation cannot be used if off-main
+    // thread composition (OMTC) is not available
+    specialPowersForPrefs.getBoolPref(OMTAPrefKey);
+
+  isOMTAWorking()
+    .then(function (isWorking) {
+      if (expectOMTA) {
+        if (isWorking) {
+          aTestFunction();
+        } else {
+          // We only call this when we know it will fail as otherwise in the
+          // regular success case we will end up inflating the "passed tests"
+          // count by 1
+          ok(isWorking, "OMTA should work");
+          aOnSkip();
+        }
+      } else {
+        todo(
+          isWorking,
+          "OMTA should ideally work, though we don't expect it to work on " +
+            "this platform/configuration"
+        );
+        aOnSkip();
+      }
+    })
+    .catch(function (err) {
+      ok(false, err);
+      aOnSkip();
+    });
+
+  function isOMTAWorking() {
+    // Create keyframes rule
+    const animationName = "a6ce3091ed85"; // Random name to avoid clashes
+    var ruleText =
+      "@keyframes " +
+      animationName +
+      " { from { opacity: 0.5 } to { opacity: 0.5 } }";
+    var style = document.createElement("style");
+    style.appendChild(document.createTextNode(ruleText));
+    document.head.appendChild(style);
+
+    // Create animation target
+    var div = document.createElement("div");
+    document.body.appendChild(div);
+
+    // Give the target geometry so it is eligible for layerization
+    div.style.width = "100px";
+    div.style.height = "100px";
+    div.style.backgroundColor = "white";
+
+    // Common clean up code
+    var cleanUp = function () {
+      div.remove();
+      style.remove();
+      if (utils.isTestControllingRefreshes) {
+        utils.restoreNormalRefresh();
+      }
+    };
+
+    return waitForDocumentLoad()
+      .then(loadPaintListener)
+      .then(function () {
+        // Put refresh driver under test control and flush all pending style,
+        // layout and paint to avoid the situation that waitForPaintsFlush()
+        // receives unexpected MozAfterpaint event for those pending
+        // notifications.
+        utils.advanceTimeAndRefresh(0);
+        return waitForPaintsFlushed();
+      })
+      .then(function () {
+        div.style.animation = animationName + " 10s";
+
+        return waitForPaintsFlushed();
+      })
+      .then(function () {
+        var opacity = utils.getOMTAStyle(div, "opacity");
+        cleanUp();
+        return Promise.resolve(opacity == 0.5);
+      })
+      .catch(function (err) {
+        cleanUp();
+        return Promise.reject(err);
+      });
+  }
+
+  function waitForDocumentLoad() {
+    return new Promise(function (resolve, reject) {
+      if (document.readyState === "complete") {
+        resolve();
+      } else {
+        window.addEventListener("load", resolve);
+      }
+    });
+  }
+
+  function loadPaintListener() {
+    return new Promise(function (resolve, reject) {
+      if (typeof window.waitForAllPaints !== "function") {
+        var script = document.createElement("script");
+        script.onload = resolve;
+        script.onerror = function () {
+          reject(new Error("Failed to load paint listener"));
+        };
+        script.src = "/tests/SimpleTest/paint_listener.js";
+        var firstScript = document.scripts[0];
+        firstScript.parentNode.insertBefore(script, firstScript);
+      } else {
+        resolve();
+      }
+    });
+  }
+}
+
+// Common architecture for setting up a series of asynchronous animation tests
+//
+// Usage example:
+//
+//    addAsyncAnimTest(function *() {
+//       .. do work ..
+//       yield functionThatReturnsAPromise();
+//       .. do work ..
+//    });
+//    runAllAsyncAnimTests().then(SimpleTest.finish());
+//
+(function () {
+  var tests = [];
+
+  window.addAsyncAnimTest = function (generator) {
+    tests.push(generator);
+  };
+
+  // Returns a promise when all tests have run
+  window.runAllAsyncAnimTests = function (aOnAbort) {
+    // runAsyncAnimTest returns a Promise that is resolved when the
+    // test is finished so we can chain them together
+    return tests.reduce(function (sequence, test) {
+      return sequence.then(function () {
+        return runAsyncAnimTest(test, aOnAbort);
+      });
+    }, Promise.resolve() /* the start of the sequence */);
+  };
+
+  // Takes a generator function that represents a test case. Each point in the
+  // test case that waits asynchronously for some result yields a Promise that
+  // is resolved when the asynchronous action has completed. By chaining these
+  // intermediate results together we run the test to completion.
+  //
+  // This method itself returns a Promise that is resolved when the generator
+  // function has completed.
+  //
+  // This arrangement is based on add_task() which is currently only available
+  // in mochitest-chrome (bug 872229). If add_task becomes available in
+  // mochitest-plain, we can remove this function and use add_task instead.
+  function runAsyncAnimTest(aTestFunc, aOnAbort) {
+    var generator;
+
+    function step(arg) {
+      var next;
+      try {
+        next = generator.next(arg);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+      if (next.done) {
+        return Promise.resolve(next.value);
+      }
+      return Promise.resolve(next.value).then(step, function (err) {
+        throw err;
+      });
+    }
+
+    // Put refresh driver under test control
+    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(0);
+
+    // Run test
+    var promise = aTestFunc();
+    if (!promise.then) {
+      generator = promise;
+      promise = step();
+    }
+    return promise
+      .catch(function (err) {
+        ok(false, err.message);
+        if (typeof aOnAbort == "function") {
+          aOnAbort();
+        }
+      })
+      .then(function () {
+        // Restore clock
+        SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
+      });
+  }
+})();
+
+//----------------------------------------------------------------------
+//
+// Helper functions for testing animated values on the compositor
+//
+//----------------------------------------------------------------------
+
+const RunningOn = {
+  MainThread: 0,
+  Compositor: 1,
+  Either: 2,
+  TodoMainThread: 3,
+  TodoCompositor: 4,
+};
+
+const ExpectComparisonTo = {
+  Pass: 1,
+  Fail: 2,
+};
+
+(function () {
+  window.omta_todo_is = function (
+    elem,
+    property,
+    expected,
+    runningOn,
+    desc,
+    pseudo
+  ) {
+    return omta_is_approx(
+      elem,
+      property,
+      expected,
+      0,
+      runningOn,
+      desc,
+      ExpectComparisonTo.Fail,
+      pseudo
+    );
+  };
+
+  window.omta_is = function (
+    elem,
+    property,
+    expected,
+    runningOn,
+    desc,
+    pseudo
+  ) {
+    return omta_is_approx(
+      elem,
+      property,
+      expected,
+      0,
+      runningOn,
+      desc,
+      ExpectComparisonTo.Pass,
+      pseudo
+    );
+  };
+
+  // Many callers of this method will pass 'undefined' for
+  // expectedComparisonResult.
+  window.omta_is_approx = function (
+    elem,
+    property,
+    expected,
+    tolerance,
+    runningOn,
+    desc,
+    expectedComparisonResult,
+    pseudo
+  ) {
+    // Check input
+    // FIXME: Auto generate this array.
+    const omtaProperties = [
+      "transform",
+      "translate",
+      "rotate",
+      "scale",
+      "offset-path",
+      "offset-distance",
+      "offset-rotate",
+      "offset-anchor",
+      "opacity",
+      "background-color",
+    ];
+    if (!omtaProperties.includes(property)) {
+      ok(false, property + " is not an OMTA property");
+      return;
+    }
+    var normalize;
+    var compare;
+    var normalizedToString = JSON.stringify;
+    switch (property) {
+      case "offset-path":
+      case "offset-distance":
+      case "offset-rotate":
+      case "offset-anchor":
+      case "translate":
+      case "rotate":
+      case "scale":
+        if (runningOn == RunningOn.MainThread) {
+          normalize = value => value;
+          compare = function (a, b, error) {
+            return a == b;
+          };
+          break;
+        }
+      // fall through
+      case "transform":
+        normalize = convertTo3dMatrix;
+        compare = matricesRoughlyEqual;
+        normalizedToString = convert3dMatrixToString;
+        break;
+      case "opacity":
+        normalize = parseFloat;
+        compare = function (a, b, error) {
+          return Math.abs(a - b) <= error;
+        };
+        break;
+      default:
+        normalize = value => value;
+        compare = function (a, b, error) {
+          return a == b;
+        };
+        break;
+    }
+
+    if (!!expected.compositorValue) {
+      const originalNormalize = normalize;
+      normalize = value =>
+        !!value.compositorValue
+          ? originalNormalize(value.compositorValue)
+          : originalNormalize(value);
+    }
+
+    // Get actual values
+    var compositorStr = SpecialPowers.DOMWindowUtils.getOMTAStyle(
+      elem,
+      property,
+      pseudo
+    );
+    var computedStr = window.getComputedStyle(elem, pseudo)[property];
+
+    // Prepare expected value
+    var expectedValue = normalize(expected);
+    if (expectedValue === null) {
+      ok(
+        false,
+        desc +
+          ": test author should provide a valid 'expected' value" +
+          " - got " +
+          expected.toString()
+      );
+      return;
+    }
+
+    // Check expected value appears in the right place
+    var actualStr;
+    switch (runningOn) {
+      case RunningOn.Either:
+        runningOn =
+          compositorStr !== "" ? RunningOn.Compositor : RunningOn.MainThread;
+        actualStr = compositorStr !== "" ? compositorStr : computedStr;
+        break;
+
+      case RunningOn.Compositor:
+        if (compositorStr === "") {
+          ok(false, desc + ": should be animating on compositor");
+          return;
+        }
+        actualStr = compositorStr;
+        break;
+
+      case RunningOn.TodoMainThread:
+        todo(
+          compositorStr === "",
+          desc + ": should NOT be animating on compositor"
+        );
+        actualStr = compositorStr === "" ? computedStr : compositorStr;
+        break;
+
+      case RunningOn.TodoCompositor:
+        todo(
+          compositorStr !== "",
+          desc + ": should be animating on compositor"
+        );
+        actualStr = compositorStr !== "" ? computedStr : compositorStr;
+        break;
+
+      default:
+        if (compositorStr !== "") {
+          ok(false, desc + ": should NOT be animating on compositor");
+          return;
+        }
+        actualStr = computedStr;
+        break;
+    }
+
+    var okOrTodo =
+      expectedComparisonResult == ExpectComparisonTo.Fail ? todo : ok;
+
+    // Compare animated value with expected
+    var actualValue = normalize(actualStr);
+    // Note: the actualStr should be empty string when using todoCompositor, so
+    // actualValue is null in this case. However, compare() should handle null
+    // well.
+    okOrTodo(
+      compare(expectedValue, actualValue, tolerance),
+      desc +
+        " - got " +
+        actualStr +
+        ", expected " +
+        normalizedToString(expectedValue)
+    );
+
+    // For transform-like properties, if we have multiple transform-like
+    // properties, the OMTA value and getComputedStyle() must be different,
+    // so use this flag to skip the following tests.
+    // FIXME: Putting this property on the expected value is a little bit odd.
+    // It's not really a product of the expected value, but rather the kind of
+    // test we're running. That said, the omta_is, omta_todo_is etc. methods are
+    // already pretty complex and adding another parameter would probably
+    // complicate things too much so this is fine for now. If we extend these
+    // functions any more, though, we should probably reconsider this API.
+    if (expected.usesMultipleProperties) {
+      return;
+    }
+
+    if (typeof expected.computed !== "undefined") {
+      // For some tests we specify a separate computed value for comparing
+      // with getComputedStyle.
+      //
+      // In particular, we do this for the individual transform functions since
+      // the form returned from getComputedStyle() reflects the individual
+      // properties (e.g. 'translate: 100px') while the form we read back from
+      // the compositor represents the combined result of all the transform
+      // properties as a single transform matrix (e.g. [0, 0, 0, 0, 100, 0]).
+      //
+      // Despite the fact that we can't directly compare the OMTA value against
+      // the getComputedStyle value in this case, it is still worth checking the
+      // result of getComputedStyle since it will help to alert us if some
+      // discrepancy arises between the way we calculate values on the main
+      // thread and compositor.
+      okOrTodo(
+        computedStr == expected.computed,
+        desc + ": Computed style should be equal to " + expected.computed
+      );
+    } else if (actualStr === compositorStr) {
+      // For compositor animations do an additional check that they match
+      // the value calculated on the main thread
+      var computedValue = normalize(computedStr);
+      if (computedValue === null) {
+        ok(
+          false,
+          desc +
+            ": test framework should parse computed style" +
+            " - got " +
+            computedStr
+        );
+        return;
+      }
+      okOrTodo(
+        compare(computedValue, actualValue, 0.0),
+        desc +
+          ": OMTA style and computed style should be equal" +
+          " - OMTA " +
+          actualStr +
+          ", computed " +
+          computedStr
+      );
+    }
+  };
+
+  window.matricesRoughlyEqual = function (a, b, tolerance) {
+    // Error handle if a or b is invalid.
+    if (!a || !b) {
+      return false;
+    }
+
+    tolerance = tolerance || 0.00011;
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 4; j++) {
+        var diff = Math.abs(a[i][j] - b[i][j]);
+        if (diff > tolerance || isNaN(diff)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  };
+
+  // Converts something representing an transform into a 3d matrix in
+  // column-major order.
+  // The following are supported:
+  //  "matrix(...)"
+  //  "matrix3d(...)"
+  //  [ 1, 0, 0, ... ]
+  //  { a: 1, ty: 23 } etc.
+  window.convertTo3dMatrix = function (matrixLike) {
+    if (typeof matrixLike == "string") {
+      return convertStringTo3dMatrix(matrixLike);
+    } else if (Array.isArray(matrixLike)) {
+      return convertArrayTo3dMatrix(matrixLike);
+    } else if (typeof matrixLike == "object") {
+      return convertObjectTo3dMatrix(matrixLike);
+    }
+    return null;
+  };
+
+  // In future most of these methods should be able to be replaced
+  // with DOMMatrix
+  window.isInvertible = function (matrix) {
+    return getDeterminant(matrix) != 0;
+  };
+
+  // Converts strings of the format "matrix(...)" and "matrix3d(...)" to a 3d
+  // matrix
+  function convertStringTo3dMatrix(str) {
+    if (str == "none") {
+      return convertArrayTo3dMatrix([1, 0, 0, 1, 0, 0]);
+    }
+    var result = str.match("^matrix(3d)?\\(");
+    if (result === null) {
+      return null;
+    }
+
+    return convertArrayTo3dMatrix(
+      str
+        .substring(result[0].length, str.length - 1)
+        .split(",")
+        .map(function (component) {
+          return Number(component);
+        })
+    );
+  }
+
+  // Takes an array of numbers of length 6 (2d matrix) or 16 (3d matrix)
+  // representing a matrix specified in column-major order and returns a 3d
+  // matrix represented as an array of arrays
+  function convertArrayTo3dMatrix(array) {
+    if (array.length == 6) {
+      return convertObjectTo3dMatrix({
+        a: array[0],
+        b: array[1],
+        c: array[2],
+        d: array[3],
+        e: array[4],
+        f: array[5],
+      });
+    } else if (array.length == 16) {
+      return [
+        array.slice(0, 4),
+        array.slice(4, 8),
+        array.slice(8, 12),
+        array.slice(12, 16),
+      ];
+    }
+    return null;
+  }
+
+  // Return the first defined value in args.
+  function defined(...args) {
+    return args.find(arg => typeof arg !== "undefined");
+  }
+
+  // Takes an object of the form { a: 1.1, e: 23 } and builds up a 3d matrix
+  // with unspecified values filled in with identity values.
+  function convertObjectTo3dMatrix(obj) {
+    return [
+      [
+        defined(obj.a, obj.sx, obj.m11, 1),
+        obj.b || obj.m12 || 0,
+        obj.m13 || 0,
+        obj.m14 || 0,
+      ],
+      [
+        obj.c || obj.m21 || 0,
+        defined(obj.d, obj.sy, obj.m22, 1),
+        obj.m23 || 0,
+        obj.m24 || 0,
+      ],
+      [obj.m31 || 0, obj.m32 || 0, defined(obj.sz, obj.m33, 1), obj.m34 || 0],
+      [
+        obj.e || obj.tx || obj.m41 || 0,
+        obj.f || obj.ty || obj.m42 || 0,
+        obj.tz || obj.m43 || 0,
+        defined(obj.m44, 1),
+      ],
+    ];
+  }
+
+  function convert3dMatrixToString(matrix) {
+    if (is2d(matrix)) {
+      return (
+        "matrix(" +
+        [
+          matrix[0][0],
+          matrix[0][1],
+          matrix[1][0],
+          matrix[1][1],
+          matrix[3][0],
+          matrix[3][1],
+        ].join(", ") +
+        ")"
+      );
+    }
+    return (
+      "matrix3d(" +
+      matrix
+        .reduce(function (outer, inner) {
+          return outer.concat(inner);
+        })
+        .join(", ") +
+      ")"
+    );
+  }
+
+  function is2d(matrix) {
+    return (
+      matrix[0][2] === 0 &&
+      matrix[0][3] === 0 &&
+      matrix[1][2] === 0 &&
+      matrix[1][3] === 0 &&
+      matrix[2][0] === 0 &&
+      matrix[2][1] === 0 &&
+      matrix[2][2] === 1 &&
+      matrix[2][3] === 0 &&
+      matrix[3][2] === 0 &&
+      matrix[3][3] === 1
+    );
+  }
+
+  function getDeterminant(matrix) {
+    if (is2d(matrix)) {
+      return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
+    }
+
+    return (
+      matrix[0][3] * matrix[1][2] * matrix[2][1] * matrix[3][0] -
+      matrix[0][2] * matrix[1][3] * matrix[2][1] * matrix[3][0] -
+      matrix[0][3] * matrix[1][1] * matrix[2][2] * matrix[3][0] +
+      matrix[0][1] * matrix[1][3] * matrix[2][2] * matrix[3][0] +
+      matrix[0][2] * matrix[1][1] * matrix[2][3] * matrix[3][0] -
+      matrix[0][1] * matrix[1][2] * matrix[2][3] * matrix[3][0] -
+      matrix[0][3] * matrix[1][2] * matrix[2][0] * matrix[3][1] +
+      matrix[0][2] * matrix[1][3] * matrix[2][0] * matrix[3][1] +
+      matrix[0][3] * matrix[1][0] * matrix[2][2] * matrix[3][1] -
+      matrix[0][0] * matrix[1][3] * matrix[2][2] * matrix[3][1] -
+      matrix[0][2] * matrix[1][0] * matrix[2][3] * matrix[3][1] +
+      matrix[0][0] * matrix[1][2] * matrix[2][3] * matrix[3][1] +
+      matrix[0][3] * matrix[1][1] * matrix[2][0] * matrix[3][2] -
+      matrix[0][1] * matrix[1][3] * matrix[2][0] * matrix[3][2] -
+      matrix[0][3] * matrix[1][0] * matrix[2][1] * matrix[3][2] +
+      matrix[0][0] * matrix[1][3] * matrix[2][1] * matrix[3][2] +
+      matrix[0][1] * matrix[1][0] * matrix[2][3] * matrix[3][2] -
+      matrix[0][0] * matrix[1][1] * matrix[2][3] * matrix[3][2] -
+      matrix[0][2] * matrix[1][1] * matrix[2][0] * matrix[3][3] +
+      matrix[0][1] * matrix[1][2] * matrix[2][0] * matrix[3][3] +
+      matrix[0][2] * matrix[1][0] * matrix[2][1] * matrix[3][3] -
+      matrix[0][0] * matrix[1][2] * matrix[2][1] * matrix[3][3] -
+      matrix[0][1] * matrix[1][0] * matrix[2][2] * matrix[3][3] +
+      matrix[0][0] * matrix[1][1] * matrix[2][2] * matrix[3][3]
+    );
+  }
+})();
+
+//----------------------------------------------------------------------
+//
+// Promise wrappers for paint_listener.js
+//
+//----------------------------------------------------------------------
+
+// Returns a Promise that resolves once all paints have completed
+function waitForPaints() {
+  return new Promise(function (resolve, reject) {
+    waitForAllPaints(resolve);
+  });
+}
+
+// As with waitForPaints but also flushes pending style changes before waiting
+function waitForPaintsFlushed() {
+  return new Promise(function (resolve, reject) {
+    waitForAllPaintsFlushed(resolve);
+  });
+}
+
+function waitForVisitedLinkColoring(visitedLink, waitProperty, waitValue) {
+  function checkLink(resolve) {
+    if (
+      SpecialPowers.DOMWindowUtils.getVisitedDependentComputedStyle(
+        visitedLink,
+        "",
+        waitProperty
+      ) == waitValue
+    ) {
+      // Our link has been styled as visited.  Resolve.
+      resolve(true);
+    } else {
+      // Our link is not yet styled as visited.  Poll for completion.
+      setTimeout(checkLink, 0, resolve);
+    }
+  }
+  return new Promise(function (resolve, reject) {
+    checkLink(resolve);
+  });
+}
diff --git a/layout/style/test/browser.ini b/layout/style/test/browser.ini
new file mode 100644
index 0000000000..cf478a1db3
--- /dev/null
+++ b/layout/style/test/browser.ini
@@ -0,0 +1,14 @@
+[DEFAULT]
+support-files =
+  bug453896_iframe.html
+  media_queries_iframe.html
+  mapped.css
+  mapped.css^headers^
+  mapped2.css
+  mapped2.css^headers^
+  sourcemap_css.html
+
+[browser_bug453896.js]
+[browser_sourcemap.js]
+[browser_sourcemap_comment.js]
+[browser_sourceurl_comment.js]
diff --git a/layout/style/test/browser_bug453896.js b/layout/style/test/browser_bug453896.js
new file mode 100644
index 0000000000..6b8e180c38
--- /dev/null
+++ b/layout/style/test/browser_bug453896.js
@@ -0,0 +1,16 @@
+add_task(async function () {
+  let uri = getRootDirectory(gTestPath) + "bug453896_iframe.html";
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: uri,
+    },
+    function (browser) {
+      return SpecialPowers.spawn(browser, [], async function () {
+        var fake_window = { ok: ok };
+        content.wrappedJSObject.run(fake_window);
+      });
+    }
+  );
+});
diff --git a/layout/style/test/browser_sourcemap.js b/layout/style/test/browser_sourcemap.js
new file mode 100644
index 0000000000..56ad067818
--- /dev/null
+++ b/layout/style/test/browser_sourcemap.js
@@ -0,0 +1,41 @@
+add_task(async function () {
+  let uri = "http://example.com/browser/layout/style/test/sourcemap_css.html";
+  info(`URI is ${uri}`);
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: uri,
+    },
+    async function (browser) {
+      await SpecialPowers.spawn(browser, [], function () {
+        let seenSheets = 0;
+
+        for (let i = 0; i < content.document.styleSheets.length; ++i) {
+          let sheet = content.document.styleSheets[i];
+
+          info(`Checking ${sheet.href}`);
+          if (/mapped\.css/.test(sheet.href)) {
+            is(
+              sheet.sourceMapURL,
+              "mapped.css.map",
+              "X-SourceMap header took effect"
+            );
+            seenSheets |= 1;
+          } else if (/mapped2\.css/.test(sheet.href)) {
+            is(
+              sheet.sourceMapURL,
+              "mapped2.css.map",
+              "SourceMap header took effect"
+            );
+            seenSheets |= 2;
+          } else {
+            ok(false, "sheet does not have source map URL");
+          }
+        }
+
+        is(seenSheets, 3, "seen all source-mapped sheets");
+      });
+    }
+  );
+});
diff --git a/layout/style/test/browser_sourcemap_comment.js b/layout/style/test/browser_sourcemap_comment.js
new file mode 100644
index 0000000000..e0bbff8de4
--- /dev/null
+++ b/layout/style/test/browser_sourcemap_comment.js
@@ -0,0 +1,47 @@
+add_task(async function () {
+  // Test text and expected results.
+  let test_cases = [
+    ["/*# sourceMappingURL=here*/", "here"],
+    ["/*# sourceMappingURL=here  */", "here"],
+    ["/*@ sourceMappingURL=here*/", "here"],
+    ["/*@ sourceMappingURL=there*/ /*# sourceMappingURL=here*/", "here"],
+    ["/*# sourceMappingURL=here there  */", "here"],
+
+    ["/*# sourceMappingURL=  here  */", ""],
+    ["/*# sourceMappingURL=*/", ""],
+    ["/*# sourceMappingUR=here  */", ""],
+    ["/*! sourceMappingURL=here  */", ""],
+    ["/*# sourceMappingURL = here  */", ""],
+    ["/*   # sourceMappingURL=here   */", ""],
+  ];
+
+  let page = "<!DOCTYPE HTML>\n<html>\n<head>\n";
+  for (let i = 0; i < test_cases.length; ++i) {
+    page += `<style type="text/css"> #x${i} { color: red; }${test_cases[i][0]}</style>\n`;
+  }
+  page += "</head><body>some text</body></html>";
+
+  let uri = "data:text/html;base64," + btoa(page);
+  info(`URI is ${uri}`);
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: uri,
+    },
+    async function (browser) {
+      await SpecialPowers.spawn(browser, [test_cases], function (tests) {
+        for (let i = 0; i < content.document.styleSheets.length; ++i) {
+          let sheet = content.document.styleSheets[i];
+
+          info(`Checking sheet #${i}`);
+          is(
+            sheet.sourceMapURL,
+            tests[i][1],
+            `correct source map for sheet ${i}`
+          );
+        }
+      });
+    }
+  );
+});
diff --git a/layout/style/test/browser_sourceurl_comment.js b/layout/style/test/browser_sourceurl_comment.js
new file mode 100644
index 0000000000..9baf6c9ce5
--- /dev/null
+++ b/layout/style/test/browser_sourceurl_comment.js
@@ -0,0 +1,43 @@
+add_task(async function () {
+  // Test text and expected results.
+  let test_cases = [
+    ["/*# sourceURL=here*/", "here"],
+    ["/*# sourceURL=here  */", "here"],
+    ["/*@ sourceURL=here*/", "here"],
+    ["/*@ sourceURL=there*/ /*# sourceURL=here*/", "here"],
+    ["/*# sourceURL=here there  */", "here"],
+
+    ["/*# sourceURL=  here  */", ""],
+    ["/*# sourceURL=*/", ""],
+    ["/*# sourceUR=here  */", ""],
+    ["/*! sourceURL=here  */", ""],
+    ["/*# sourceURL = here  */", ""],
+    ["/*   # sourceURL=here   */", ""],
+  ];
+
+  let page = "<!DOCTYPE HTML>\n<html>\n<head>\n";
+  for (let i = 0; i < test_cases.length; ++i) {
+    page += `<style type="text/css"> #x${i} { color: red; }${test_cases[i][0]}</style>\n`;
+  }
+  page += "</head><body>some text</body></html>";
+
+  let uri = "data:text/html;base64," + btoa(page);
+  info(`URI is ${uri}`);
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: uri,
+    },
+    async function (browser) {
+      await SpecialPowers.spawn(browser, [test_cases], function (tests) {
+        for (let i = 0; i < content.document.styleSheets.length; ++i) {
+          let sheet = content.document.styleSheets[i];
+
+          info(`Checking sheet #${i}`);
+          is(sheet.sourceURL, tests[i][1], `correct source URL for sheet ${i}`);
+        }
+      });
+    }
+  );
+});
diff --git a/layout/style/test/bug1382568-iframe.html b/layout/style/test/bug1382568-iframe.html
new file mode 100644
index 0000000000..b1448703e5
--- /dev/null
+++ b/layout/style/test/bug1382568-iframe.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<iframe src="http://example.com/doesnt-matter-because-it-gets-blocked-due-to-mixed-content"></iframe>
+<script>
+window.addEventListener('load', function(){
+  window[0].document.body.innerText;
+  window.parent.postMessage({ result: "ok" }, "*");
+});
+</script>
diff --git a/layout/style/test/bug1729861.js b/layout/style/test/bug1729861.js
new file mode 100644
index 0000000000..dbfa060ab1
--- /dev/null
+++ b/layout/style/test/bug1729861.js
@@ -0,0 +1,81 @@
+// # Bug 1729861
+
+// Expected values. Format: [name, pref_off_value, pref_on_value]
+var expected_values = [
+  [
+    "device-aspect-ratio",
+    screen.width + "/" + screen.height,
+    window.innerWidth + "/" + window.innerHeight,
+  ],
+  ["device-height", screen.height + "px", window.innerHeight + "px"],
+  ["device-width", screen.width + "px", window.innerWidth + "px"],
+];
+
+// Create a line containing a CSS media query and a rule to set the bg color.
+var mediaQueryCSSLine = function (key, val, color) {
+  return (
+    "@media (" +
+    key +
+    ": " +
+    val +
+    ") { #" +
+    key +
+    " { background-color: " +
+    color +
+    "; } }\n"
+  );
+};
+
+var green = "rgb(0, 128, 0)";
+var blue = "rgb(0, 0, 255)";
+
+// Set a pref value asynchronously, returning a promise that resolves
+// when it succeeds.
+var pushPref = function (key, value) {
+  return SpecialPowers.pushPrefEnv({ set: [[key, value]] });
+};
+
+// Set the resistFingerprinting pref to the given value, and then check that the background
+// color has been updated properly as a result of re-evaluating the media queries.
+var checkColorForPref = async function (setting, testDivs, expectedColor) {
+  await pushPref("privacy.resistFingerprinting", setting);
+  for (let div of testDivs) {
+    let color = window.getComputedStyle(div).backgroundColor;
+    is(color, expectedColor, "background for '" + div.id + "' is " + color);
+  }
+};
+
+var test = async function () {
+  // If the "off" and "on" expected values are the same, we can't actually
+  // test anything here. (Might this be the case on mobile?)
+  let skipTest = false;
+  for (let [key, offVal, onVal] of expected_values) {
+    if (offVal == onVal) {
+      todo(false, "Unable to test because '" + key + "' is invariant");
+      return;
+    }
+  }
+
+  let css =
+    ".test { margin: 1em; padding: 1em; color: white; width: max-content; font: 2em monospace }\n";
+
+  // Create a test element for each of the media queries we're checking, and append the matching
+  // "on" and "off" media queries to the CSS.
+  let testDivs = [];
+  for (let [key, offVal, onVal] of expected_values) {
+    let div = document.createElement("div");
+    div.textContent = key;
+    div.setAttribute("class", "test");
+    div.setAttribute("id", key);
+    testDivs.push(div);
+    document.getElementById("display").appendChild(div);
+    css += mediaQueryCSSLine(key, onVal, "green");
+    css += mediaQueryCSSLine(key, offVal, "blue");
+  }
+  document.getElementById("test-css").textContent = css;
+
+  // Check that the test elements change color as expected when we flip the resistFingerprinting pref.
+  await checkColorForPref(true, testDivs, green);
+  await checkColorForPref(false, testDivs, blue);
+  await checkColorForPref(true, testDivs, green);
+};
diff --git a/layout/style/test/bug453896_iframe.html b/layout/style/test/bug453896_iframe.html
new file mode 100644
index 0000000000..e5414cc0df
--- /dev/null
+++ b/layout/style/test/bug453896_iframe.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+  <title>Bug 453896 Test middle frame</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <script type="application/javascript">
+
+function run(test_window)
+{
+  var subdoc = document.getElementById("subdoc").contentDocument;
+  var subwin = document.getElementById("subdoc").contentWindow;
+  var style = subdoc.getElementById("style");
+  var iframe_style = document.getElementById("subdoc").style;
+  var body_cs = subdoc.defaultView.getComputedStyle(subdoc.body);
+
+  function query_applies(q) {
+    style.setAttribute("media", q);
+    return body_cs.getPropertyValue("text-decoration-line") == "underline";
+  }
+
+  function should_apply(q) {
+    test_window.ok(query_applies(q), q + " should apply");
+  }
+
+  function should_not_apply(q) {
+    test_window.ok(!query_applies(q), q + " should not apply");
+  }
+
+  // in this test, assume the common underlying implementation is correct
+  let width_val = 157; // pick two not-too-round numbers
+  let height_val = 182;
+  iframe_style.width = width_val + "px";
+  iframe_style.height = height_val + "px";
+  for (let [feature, value] of
+         Object.entries({ "width": width_val, "height": height_val })) {
+    should_apply("all and (" + feature + ": " + value + "px)");
+    should_not_apply("all and (" + feature + ": " + (value + 1) + "px)");
+    should_not_apply("all and (" + feature + ": " + (value - 1) + "px)");
+  }
+
+  iframe_style.width = "0";
+  should_apply("all and (height)");
+  should_not_apply("all and (width)");
+  iframe_style.height = "0";
+  should_not_apply("all and (height)");
+  should_not_apply("all and (width)");
+  should_apply("all and (device-height)");
+  should_apply("all and (device-width)");
+  iframe_style.width = width_val + "px";
+  should_not_apply("all and (height)");
+  should_apply("all and (width)");
+  iframe_style.height = height_val + "px";
+  should_apply("all and (height)");
+  should_apply("all and (width)");
+}
+
+  </script>
+</head>
+<body>
+
+<iframe id="subdoc" src="media_queries_iframe.html"></iframe>
+
+</body>
+</html>
diff --git a/layout/style/test/bug517224.sjs b/layout/style/test/bug517224.sjs
new file mode 100644
index 0000000000..bd1fe4f336
--- /dev/null
+++ b/layout/style/test/bug517224.sjs
@@ -0,0 +1,27 @@
+function handleRequest(request, response) {
+  response.setHeader("Cache-Control", "no-cache", false);
+  switch (request.queryString) {
+    case "reset":
+      response.setHeader("Content-Type", "application/ecmascript", false);
+      setState("imageloaded", "");
+      break;
+    case "image":
+      setState("imageloaded", "imageloaded");
+      response.setStatusLine("1.1", 302, "Found");
+      // redirect to a solid blue image
+      response.setHeader(
+        "Location",
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12NgYPgPAAEDAQDZqt2zAAAAAElFTkSuQmCC"
+      );
+      response.setHeader("Content-Type", "text/plain", false);
+      break;
+    case "result":
+      response.setHeader("Content-Type", "application/ecmascript", false);
+      var state = getState("imageloaded");
+      response.write(
+        "is('" + state + "', '', 'image should not have been loaded')\n"
+      );
+      response.write("SimpleTest.finish()");
+      break;
+  }
+}
diff --git a/layout/style/test/bug732209-css.sjs b/layout/style/test/bug732209-css.sjs
new file mode 100644
index 0000000000..a572cf3942
--- /dev/null
+++ b/layout/style/test/bug732209-css.sjs
@@ -0,0 +1,30 @@
+function handleRequest(request, response) {
+  // First item will be the ID; other items are optional
+  var query = request.queryString.split(/&/);
+
+  response.setHeader("Content-Type", "text/css", false);
+
+  if (query.indexOf("cors-anonymous") != -1) {
+    response.setHeader("Access-Control-Allow-Origin", "*", false);
+  } else if (
+    query.indexOf("cors-credentials") != -1 &&
+    request.hasHeader("Origin")
+  ) {
+    response.setHeader(
+      "Access-Control-Allow-Origin",
+      request.getHeader("Origin"),
+      false
+    );
+    response.setHeader("Access-Control-Allow-Credentials", "true", false);
+  }
+
+  response.write(
+    "#" +
+      query[0] +
+      " { color: green !important }" +
+      "\n" +
+      "#" +
+      query[0] +
+      ".reverse { color: red !important }"
+  );
+}
diff --git a/layout/style/test/ccd-quirks.html b/layout/style/test/ccd-quirks.html
new file mode 100644
index 0000000000..570b5d5a1b
--- /dev/null
+++ b/layout/style/test/ccd-quirks.html
@@ -0,0 +1,129 @@
+<!-- Intentionally in quirks mode. -->
+<html><head>
+<!-- baseline -->
+<style>
+body, html { margin: 0; padding: 0; overflow: hidden }
+div {
+  width: 60px;
+  height: 20px;
+  position: relative;
+}
+p {
+  position: absolute;
+  top: 2px; left: 2px;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+}
+p + p { left: 22px }
+
+#IA1i, #IA1l, #IA2i, #IA2l, #IB1i, #IB1l, #IB2i, #IB2l,
+#IC1i, #IC1l, #IC2i, #IC2l, #ID1i, #ID1l, #ID2i, #ID2l,
+#JA1i, #JA1l, #JA2i, #JA2l, #JD1i, #JD1l, #JD2i, #JD2l
+ { background-color: red }
+
+#JB1i, #JB1l, #JC1i, #JC1l,
+#JB2i, #JB2l, #JC2i, #JC2l
+ { background-color: lime }
+
+#IA3i, #IA3l, #IB3i, #IB3l, #IC3i, #IC3l, #ID3i, #ID3l,
+#JA3i, #JA3l, #JB3i, #JB3l, #JC3i, #JC3l, #JD3i, #JD3l
+ { background-color: lime }
+</style>
+
+<!-- @import rules -->
+<style>
+@import url("ccd.sjs?IA1iq");
+@import url("ccd.sjs?IA2iq");
+@import url("ccd.sjs?IA3iq");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?IB1iq");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?IB2iq");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?IB3iq");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC1iq");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC2iq");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC3iq");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID1iq");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID2iq");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID3iq");
+@import url("ccd.sjs?JA1iq");
+@import url("ccd.sjs?JA2iq");
+@import url("ccd.sjs?JA3iq");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?JB1iq");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?JB2iq");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?JB3iq");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC1iq");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC2iq");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC3iq");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD1iq");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD2iq");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD3iq");
+</style>
+
+<!-- link directives -->
+<link rel="stylesheet" href="ccd.sjs?IA1lq">
+<link rel="stylesheet" href="ccd.sjs?IA2lq">
+<link rel="stylesheet" href="ccd.sjs?IA3lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?IB1lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?IB2lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?IB3lq">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC1lq">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC2lq">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC3lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID1lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID2lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID3lq">
+<link rel="stylesheet" href="ccd.sjs?JA1lq">
+<link rel="stylesheet" href="ccd.sjs?JA2lq">
+<link rel="stylesheet" href="ccd.sjs?JA3lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?JB1lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?JB2lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?JB3lq">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC1lq">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC2lq">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC3lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD1lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD2lq">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD3lq">
+
+</head><body>
+<div></div>
+<div></div>
+<div><p id="IA1i"></p><p id="IA1l"></p></div>
+<div><p id="IA2i"></p><p id="IA2l"></p></div>
+<div><p id="IA3i"></p><p id="IA3l"></p></div>
+<div></div>
+<div><p id="IB1i"></p><p id="IB1l"></p></div>
+<div><p id="IB2i"></p><p id="IB2l"></p></div>
+<div><p id="IB3i"></p><p id="IB3l"></p></div>
+<div></div>
+<div><p id="IC1i"></p><p id="IC1l"></p></div>
+<div><p id="IC2i"></p><p id="IC2l"></p></div>
+<div><p id="IC3i"></p><p id="IC3l"></p></div>
+<div></div>
+<div><p id="ID1i"></p><p id="ID1l"></p></div>
+<div><p id="ID2i"></p><p id="ID2l"></p></div>
+<div><p id="ID3i"></p><p id="ID3l"></p></div>
+<div></div>
+<div></div>
+<div><p id="JA1i"></p><p id="JA1l"></p></div>
+<div><p id="JA2i"></p><p id="JA2l"></p></div>
+<div><p id="JA3i"></p><p id="JA3l"></p></div>
+<div></div>
+<div><p id="JB1i"></p><p id="JB1l"></p></div>
+<div><p id="JB2i"></p><p id="JB2l"></p></div>
+<div><p id="JB3i"></p><p id="JB3l"></p></div>
+<div></div>
+<div><p id="JC1i"></p><p id="JC1l"></p></div>
+<div><p id="JC2i"></p><p id="JC2l"></p></div>
+<div><p id="JC3i"></p><p id="JC3l"></p></div>
+<div></div>
+<div><p id="JD1i"></p><p id="JD1l"></p></div>
+<div><p id="JD2i"></p><p id="JD2l"></p></div>
+<div><p id="JD3i"></p><p id="JD3l"></p></div>
+<script>
+  window.onload = function() {
+    window.parent.quirksLoaded()
+  }
+</script>
+</body></html>
diff --git a/layout/style/test/ccd-standards.html b/layout/style/test/ccd-standards.html
new file mode 100644
index 0000000000..693402df4c
--- /dev/null
+++ b/layout/style/test/ccd-standards.html
@@ -0,0 +1,128 @@
+<!doctype html>
+<html><head>
+<!-- baseline -->
+<style>
+body, html { margin: 0; padding: 0; overflow: hidden }
+div {
+  width: 60px;
+  height: 20px;
+  position: relative;
+}
+p {
+  position: absolute;
+  top: 2px; left: 2px;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+}
+p + p { left: 22px }
+
+#IA1i, #IA1l, #IA2i, #IA2l, #IB1i, #IB1l, #IB2i, #IB2l,
+#IC1i, #IC1l, #IC2i, #IC2l, #ID1i, #ID1l, #ID2i, #ID2l
+ { background-color: red }
+
+#JA1i, #JA1l, #JA2i, #JA2l, #JB1i, #JB1l, #JB2i, #JB2l,
+#JC1i, #JC1l, #JC2i, #JC2l, #JD1i, #JD1l, #JD2i, #JD2l
+ { background-color: lime }
+
+#IA3i, #IA3l, #IB3i, #IB3l, #IC3i, #IC3l, #ID3i, #ID3l,
+#JA3i, #JA3l, #JB3i, #JB3l, #JC3i, #JC3l, #JD3i, #JD3l
+ { background-color: lime }
+</style>
+
+<!-- @import rules -->
+<style>
+@import url("ccd.sjs?IA1is");
+@import url("ccd.sjs?IA2is");
+@import url("ccd.sjs?IA3is");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?IB1is");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?IB2is");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?IB3is");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC1is");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC2is");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC3is");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID1is");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID2is");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID3is");
+@import url("ccd.sjs?JA1is");
+@import url("ccd.sjs?JA2is");
+@import url("ccd.sjs?JA3is");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?JB1is");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?JB2is");
+@import url("http://example.org/tests/layout/style/test/ccd.sjs?JB3is");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC1is");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC2is");
+@import url("redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC3is");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD1is");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD2is");
+@import url("http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD3is");
+</style>
+
+<!-- link directives -->
+<link rel="stylesheet" href="ccd.sjs?IA1ls">
+<link rel="stylesheet" href="ccd.sjs?IA2ls">
+<link rel="stylesheet" href="ccd.sjs?IA3ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?IB1ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?IB2ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?IB3ls">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC1ls">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC2ls">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?IC3ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID1ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID2ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?ccd.sjs?ID3ls">
+<link rel="stylesheet" href="ccd.sjs?JA1ls">
+<link rel="stylesheet" href="ccd.sjs?JA2ls">
+<link rel="stylesheet" href="ccd.sjs?JA3ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?JB1ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?JB2ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/ccd.sjs?JB3ls">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC1ls">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC2ls">
+<link rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/ccd.sjs?JC3ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD1ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD2ls">
+<link rel="stylesheet" href="http://example.org/tests/layout/style/test/redirect.sjs?http://mochi.test:8888/tests/layout/style/test/ccd.sjs?JD3ls">
+
+</head><body>
+<div></div>
+<div></div>
+<div><p id="IA1i"></p><p id="IA1l"></p></div>
+<div><p id="IA2i"></p><p id="IA2l"></p></div>
+<div><p id="IA3i"></p><p id="IA3l"></p></div>
+<div></div>
+<div><p id="IB1i"></p><p id="IB1l"></p></div>
+<div><p id="IB2i"></p><p id="IB2l"></p></div>
+<div><p id="IB3i"></p><p id="IB3l"></p></div>
+<div></div>
+<div><p id="IC1i"></p><p id="IC1l"></p></div>
+<div><p id="IC2i"></p><p id="IC2l"></p></div>
+<div><p id="IC3i"></p><p id="IC3l"></p></div>
+<div></div>
+<div><p id="ID1i"></p><p id="ID1l"></p></div>
+<div><p id="ID2i"></p><p id="ID2l"></p></div>
+<div><p id="ID3i"></p><p id="ID3l"></p></div>
+<div></div>
+<div></div>
+<div><p id="JA1i"></p><p id="JA1l"></p></div>
+<div><p id="JA2i"></p><p id="JA2l"></p></div>
+<div><p id="JA3i"></p><p id="JA3l"></p></div>
+<div></div>
+<div><p id="JB1i"></p><p id="JB1l"></p></div>
+<div><p id="JB2i"></p><p id="JB2l"></p></div>
+<div><p id="JB3i"></p><p id="JB3l"></p></div>
+<div></div>
+<div><p id="JC1i"></p><p id="JC1l"></p></div>
+<div><p id="JC2i"></p><p id="JC2l"></p></div>
+<div><p id="JC3i"></p><p id="JC3l"></p></div>
+<div></div>
+<div><p id="JD1i"></p><p id="JD1l"></p></div>
+<div><p id="JD2i"></p><p id="JD2l"></p></div>
+<div><p id="JD3i"></p><p id="JD3l"></p></div>
+<script>
+  window.onload = function() {
+    window.parent.standardsLoaded();
+  }
+</script>
+</body></html>
diff --git a/layout/style/test/ccd.sjs b/layout/style/test/ccd.sjs
new file mode 100644
index 0000000000..22a4294d59
--- /dev/null
+++ b/layout/style/test/ccd.sjs
@@ -0,0 +1,71 @@
+const DEBUG_all_valid = false;
+const DEBUG_all_stub = false;
+
+function handleRequest(request, response) {
+  // Decode the query string to know what test we're doing.
+
+  // character 1: 'I' = text/css response, 'J' = text/html response
+  let responseCSS = request.queryString[0] == "I";
+
+  // character 2: redirection type - we only care about whether we're
+  // ultimately same-origin with the requesting document ('A', 'D') or
+  // not ('B', 'C').
+  let sameOrigin =
+    request.queryString[1] == "A" || request.queryString[1] == "D";
+
+  // character 3: '1' = syntactically valid, '2' = invalid, '3' = http error
+  let malformed = request.queryString[2] == "2";
+  let httpError = request.queryString[2] == "3";
+
+  // character 4: loaded with <link> or @import (no action required)
+
+  // character 5: loading document mode: 'q' = quirks, 's' = standards
+  let quirksMode = request.queryString[4] == "q";
+
+  // Our response contains a CSS rule that selects an element whose
+  // ID is the first four characters of the query string.
+  let selector = "#" + request.queryString.substring(0, 4);
+
+  // "Malformed" responses wrap the CSS rule in the construct
+  //     <html>{} ... </html>
+  // This mimics what the CSS parser might see if an actual HTML
+  // document were fed to it.  Because CSS parsers recover from
+  // errors by skipping tokens until they find something
+  // recognizable, a style rule appearing where I wrote '...' above
+  // will be honored!
+  let leader = malformed ? "<html>{}" : "";
+  let trailer = malformed ? "</html>" : "";
+
+  // Standards mode documents will ignore the style sheet if it is being
+  // served as text/html (regardless of its contents).  Quirks mode
+  // documents will ignore the style sheet if it is being served as
+  // text/html _and_ it is not same-origin.  Regardless, style sheets
+  // are ignored if they come as the body of an HTTP error response.
+  //
+  // Style sheets that should be ignored paint the element red; those
+  // that should be honored paint it lime.
+  let color =
+    (responseCSS || (quirksMode && sameOrigin)) && !httpError ? "lime" : "red";
+
+  // For debugging the test itself, we have the capacity to make every style
+  // sheet well-formed, or every style sheet do nothing.
+  if (DEBUG_all_valid) {
+    // In this mode, every test chip should turn blue.
+    response.setHeader("Content-Type", "text/css");
+    response.write(selector + "{background-color:blue}\n");
+  } else if (DEBUG_all_stub) {
+    // In this mode, every test chip for a case where the true test
+    // sheet would be honored, should turn red.
+    response.setHeader("Content-Type", "text/css");
+    response.write(selector + "{}\n");
+  } else {
+    // Normal operation.
+    if (httpError) {
+      response.setStatusLine(request.httpVersion, 500, "Internal Server Error");
+    }
+    response.setHeader("Content-Type", responseCSS ? "text/css" : "text/html");
+    response.write(
+      leader + selector + "{background-color:" + color + "}" + trailer + "\n"
+    );
+  }
+}
diff --git a/layout/style/test/chrome/bug418986-2.js b/layout/style/test/chrome/bug418986-2.js
new file mode 100644
index 0000000000..99ca030116
--- /dev/null
+++ b/layout/style/test/chrome/bug418986-2.js
@@ -0,0 +1,329 @@
+// # Bug 418986, part 2.
+
+const is_chrome_window = window.location.protocol === "chrome:";
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+
+// Expected values. Format: [name, pref_off_value, pref_on_value]
+// If pref_*_value is an array with two values, then we will match
+// any value in between those two values. If a value is null, then
+// we skip the media query.
+var expected_values = [
+  ["color", null, 8],
+  ["color-index", null, 0],
+  ["aspect-ratio", null, window.innerWidth + "/" + window.innerHeight],
+  [
+    "device-aspect-ratio",
+    screen.width + "/" + screen.height,
+    window.innerWidth + "/" + window.innerHeight,
+  ],
+  ["device-height", screen.height + "px", window.innerHeight + "px"],
+  ["device-width", screen.width + "px", window.innerWidth + "px"],
+  ["grid", null, 0],
+  ["height", window.innerHeight + "px", window.innerHeight + "px"],
+  ["monochrome", null, 0],
+  // Square is defined as portrait:
+  [
+    "orientation",
+    null,
+    window.innerWidth > window.innerHeight ? "landscape" : "portrait",
+  ],
+  ["resolution", null, "96dpi"],
+  [
+    "resolution",
+    [
+      0.999 * window.devicePixelRatio + "dppx",
+      1.001 * window.devicePixelRatio + "dppx",
+    ],
+    "1dppx",
+  ],
+  ["width", window.innerWidth + "px", window.innerWidth + "px"],
+  ["-moz-device-pixel-ratio", window.devicePixelRatio, 1],
+  [
+    "-moz-device-orientation",
+    screen.width > screen.height ? "landscape" : "portrait",
+    window.innerWidth > window.innerHeight ? "landscape" : "portrait",
+  ],
+];
+
+// These media queries return value 0 or 1 when the pref is off.
+// When the pref is on, they should not match.
+var suppressed_toggles = [
+  "-moz-mac-graphite-theme",
+  // Not available on most OSs.
+  //  "-moz-maemo-classic",
+  "-moz-scrollbar-end-backward",
+  "-moz-scrollbar-end-forward",
+  "-moz-scrollbar-start-backward",
+  "-moz-scrollbar-start-forward",
+  "-moz-windows-compositor",
+  "-moz-windows-default-theme",
+  "-moz-windows-glass",
+  "-moz-gtk-csd-available",
+  "-moz-gtk-csd-minimize-button",
+  "-moz-gtk-csd-maximize-button",
+  "-moz-gtk-csd-close-button",
+  "-moz-gtk-csd-reversed-placement",
+];
+
+var toggles_enabled_in_content = [];
+
+// Read the current OS.
+var OS = SpecialPowers.Services.appinfo.OS;
+
+// If we are using Windows, add an extra toggle only
+// available on that OS.
+if (OS === "WINNT") {
+  suppressed_toggles.push("-moz-windows-classic");
+}
+
+// __keyValMatches(key, val)__.
+// Runs a media query and returns true if key matches to val.
+var keyValMatches = (key, val) =>
+  matchMedia("(" + key + ":" + val + ")").matches;
+
+// __testMatch(key, val)__.
+// Attempts to run a media query match for the given key and value.
+// If value is an array of two elements [min max], then matches any
+// value in-between.
+var testMatch = function (key, val) {
+  if (val === null) {
+    return;
+  } else if (Array.isArray(val)) {
+    ok(
+      keyValMatches("min-" + key, val[0]) &&
+        keyValMatches("max-" + key, val[1]),
+      "Expected " + key + " between " + val[0] + " and " + val[1]
+    );
+  } else {
+    ok(keyValMatches(key, val), "Expected " + key + ":" + val);
+  }
+};
+
+// __testToggles(resisting)__.
+// Test whether we are able to match the "toggle" media queries.
+var testToggles = function (resisting) {
+  suppressed_toggles.forEach(function (key) {
+    var exists = keyValMatches(key, 0) || keyValMatches(key, 1);
+    if (!toggles_enabled_in_content.includes(key) && !is_chrome_window) {
+      ok(!exists, key + " should not exist.");
+    } else {
+      ok(exists, key + " should exist.");
+      if (resisting) {
+        ok(
+          keyValMatches(key, 0) && !keyValMatches(key, 1),
+          "Should always match as false"
+        );
+      }
+    }
+  });
+};
+
+// __generateHtmlLines(resisting)__.
+// Create a series of div elements that look like:
+// `<div class='spoof' id='resolution'>resolution</div>`,
+// where each line corresponds to a different media query.
+var generateHtmlLines = function (resisting) {
+  let fragment = document.createDocumentFragment();
+  expected_values.forEach(function ([key, offVal, onVal]) {
+    let val = resisting ? onVal : offVal;
+    if (val) {
+      let div = document.createElementNS(HTML_NS, "div");
+      div.setAttribute("class", "spoof");
+      div.setAttribute("id", key);
+      div.textContent = key;
+      fragment.appendChild(div);
+    }
+  });
+  suppressed_toggles.forEach(function (key) {
+    let div = document.createElementNS(HTML_NS, "div");
+    div.setAttribute("class", "suppress");
+    div.setAttribute("id", key);
+    div.textContent = key;
+    fragment.appendChild(div);
+  });
+  return fragment;
+};
+
+// __cssLine__.
+// Creates a line of css that looks something like
+// `@media (resolution: 1ppx) { .spoof#resolution { background-color: green; } }`.
+var cssLine = function (query, clazz, id, color) {
+  return (
+    "@media " +
+    query +
+    " { ." +
+    clazz +
+    "#" +
+    id +
+    " { background-color: " +
+    color +
+    "; } }\n"
+  );
+};
+
+// __constructQuery(key, val)__.
+// Creates a CSS media query from key and val. If key is an array of
+// two elements, constructs a range query (using min- and max-).
+var constructQuery = function (key, val) {
+  return Array.isArray(val)
+    ? "(min-" + key + ": " + val[0] + ") and (max-" + key + ": " + val[1] + ")"
+    : "(" + key + ": " + val + ")";
+};
+
+// __mediaQueryCSSLine(key, val, color)__.
+// Creates a line containing a CSS media query and a CSS expression.
+var mediaQueryCSSLine = function (key, val, color) {
+  if (val === null) {
+    return "";
+  }
+  return cssLine(constructQuery(key, val), "spoof", key, color);
+};
+
+// __suppressedMediaQueryCSSLine(key, color)__.
+// Creates a CSS line that matches the existence of a
+// media query that is supposed to be suppressed.
+var suppressedMediaQueryCSSLine = function (key, color, suppressed) {
+  let query = "(" + key + ": 0), (" + key + ": 1)";
+  return cssLine(query, "suppress", key, color);
+};
+
+// __generateCSSLines(resisting)__.
+// Creates a series of lines of CSS, each of which corresponds to
+// a different media query. If the query produces a match to the
+// expected value, then the element will be colored green.
+var generateCSSLines = function (resisting) {
+  let lines = ".spoof { background-color: red;}\n";
+  expected_values.forEach(function ([key, offVal, onVal]) {
+    lines += mediaQueryCSSLine(key, resisting ? onVal : offVal, "green");
+  });
+  lines +=
+    ".suppress { background-color: " + (resisting ? "green" : "red") + ";}\n";
+  suppressed_toggles.forEach(function (key) {
+    if (
+      !toggles_enabled_in_content.includes(key) &&
+      !resisting &&
+      !is_chrome_window
+    ) {
+      lines += "#" + key + " { background-color: green; }\n";
+    } else {
+      lines += suppressedMediaQueryCSSLine(key, "green");
+    }
+  });
+  return lines;
+};
+
+// __green__.
+// Returns the computed color style corresponding to green.
+var green = "rgb(0, 128, 0)";
+
+// __testCSS(resisting)__.
+// Creates a series of divs and CSS using media queries to set their
+// background color. If all media queries match as expected, then
+// all divs should have a green background color.
+var testCSS = function (resisting) {
+  document.getElementById("display").appendChild(generateHtmlLines(resisting));
+  document.getElementById("test-css").textContent = generateCSSLines(resisting);
+  let cssTestDivs = document.querySelectorAll(".spoof,.suppress");
+  for (let div of cssTestDivs) {
+    let color = window.getComputedStyle(div).backgroundColor;
+    ok(color === green, "CSS for '" + div.id + "'");
+  }
+};
+
+// __testOSXFontSmoothing(resisting)__.
+// When fingerprinting resistance is enabled, the `getComputedStyle`
+// should always return `undefined` for `MozOSXFontSmoothing`.
+var testOSXFontSmoothing = function (resisting) {
+  let div = document.createElementNS(HTML_NS, "div");
+  div.style.MozOsxFontSmoothing = "unset";
+  document.documentElement.appendChild(div);
+  let readBack = window.getComputedStyle(div).MozOsxFontSmoothing;
+  div.remove();
+  let smoothingPref = SpecialPowers.getBoolPref(
+    "layout.css.osx-font-smoothing.enabled",
+    false
+  );
+  is(
+    readBack,
+    resisting ? "" : smoothingPref ? "auto" : "",
+    "-moz-osx-font-smoothing"
+  );
+};
+
+// __sleep(timeoutMs)__.
+// Returns a promise that resolves after the given timeout.
+var sleep = function (timeoutMs) {
+  return new Promise(function (resolve, reject) {
+    window.setTimeout(resolve);
+  });
+};
+
+// __testMediaQueriesInPictureElements(resisting)__.
+// Test to see if media queries are properly spoofed in picture elements
+// when we are resisting fingerprinting.
+var testMediaQueriesInPictureElements = async function (resisting) {
+  const MATCH = "/tests/layout/style/test/chrome/match.png";
+  let container = document.getElementById("pictures");
+  let testImages = [];
+  for (let [key, offVal, onVal] of expected_values) {
+    let expected = resisting ? onVal : offVal;
+    if (expected) {
+      let picture = document.createElementNS(HTML_NS, "picture");
+      let query = constructQuery(key, expected);
+      ok(matchMedia(query).matches, `${query} should match`);
+
+      let source = document.createElementNS(HTML_NS, "source");
+      source.setAttribute("srcset", MATCH);
+      source.setAttribute("media", query);
+
+      let image = document.createElementNS(HTML_NS, "img");
+      image.setAttribute("title", key + ":" + expected);
+      image.setAttribute("class", "testImage");
+      image.setAttribute("src", "/tests/layout/style/test/chrome/mismatch.png");
+      image.setAttribute("alt", key);
+
+      testImages.push(image);
+
+      picture.appendChild(source);
+      picture.appendChild(image);
+      container.appendChild(picture);
+    }
+  }
+  const matchURI = new URL(MATCH, document.baseURI).href;
+  await sleep(0);
+  for (let testImage of testImages) {
+    is(
+      testImage.currentSrc,
+      matchURI,
+      "Media query '" + testImage.title + "' in picture should match."
+    );
+  }
+};
+
+// __pushPref(key, value)__.
+// Set a pref value asynchronously, returning a promise that resolves
+// when it succeeds.
+var pushPref = function (key, value) {
+  return new Promise(function (resolve, reject) {
+    SpecialPowers.pushPrefEnv({ set: [[key, value]] }, resolve);
+  });
+};
+
+// __test(isContent)__.
+// Run all tests.
+var test = async function (isContent) {
+  for (prefValue of [false, true]) {
+    await pushPref("privacy.resistFingerprinting", prefValue);
+    let resisting = prefValue && isContent;
+    expected_values.forEach(function ([key, offVal, onVal]) {
+      testMatch(key, resisting ? onVal : offVal);
+    });
+    testToggles(resisting);
+    testCSS(resisting);
+    if (OS === "Darwin") {
+      testOSXFontSmoothing(resisting);
+    }
+    await testMediaQueriesInPictureElements(resisting);
+  }
+};
diff --git a/layout/style/test/chrome/bug535806-css.css b/layout/style/test/chrome/bug535806-css.css
new file mode 100644
index 0000000000..bda339f776
--- /dev/null
+++ b/layout/style/test/chrome/bug535806-css.css
@@ -0,0 +1 @@
+fooBar[fooBar] { color: green; }
diff --git a/layout/style/test/chrome/bug535806-html.html b/layout/style/test/chrome/bug535806-html.html
new file mode 100644
index 0000000000..e4395da3f3
--- /dev/null
+++ b/layout/style/test/chrome/bug535806-html.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="bug535806-css.css">
+  </head>
+  <body onload="window.parent.wrappedJSObject.htmlLoaded()">
+  </body>
+</html>
diff --git a/layout/style/test/chrome/bug535806-xul.xhtml b/layout/style/test/chrome/bug535806-xul.xhtml
new file mode 100644
index 0000000000..3d9a82b91e
--- /dev/null
+++ b/layout/style/test/chrome/bug535806-xul.xhtml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="chrome://global/skin"?>
+<?xml-stylesheet type="text/css" href="data:text/css,fooBar{color:red;}"?>
+<?xml-stylesheet type="text/css" href="bug535806-css.css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        onload="window.parent.wrappedJSObject.xulLoaded()">
+  <fooBar fooBar="" id="s"/>
+</window>
diff --git a/layout/style/test/chrome/chrome-only-media-queries.js b/layout/style/test/chrome/chrome-only-media-queries.js
new file mode 100644
index 0000000000..ae71857d66
--- /dev/null
+++ b/layout/style/test/chrome/chrome-only-media-queries.js
@@ -0,0 +1,42 @@
+const CHROME_ONLY_TOGGLES = [
+  "-moz-is-glyph",
+  "-moz-print-preview",
+  "-moz-non-native-content-theme",
+  "-moz-scrollbar-start-backward",
+  "-moz-scrollbar-start-forward",
+  "-moz-scrollbar-end-backward",
+  "-moz-scrollbar-end-forward",
+  "-moz-overlay-scrollbars",
+  "-moz-windows-classic",
+  "-moz-windows-compositor",
+  "-moz-windows-default-theme",
+  "-moz-mac-graphite-theme",
+  "-moz-mac-big-sur-theme",
+  "-moz-menubar-drag",
+  "-moz-windows-accent-color-in-titlebar",
+  "-moz-windows-compositor",
+  "-moz-windows-classic",
+  "-moz-windows-glass",
+  "-moz-windows-non-native-menus",
+  "-moz-swipe-animation-enabled",
+  "-moz-gtk-csd-available",
+  "-moz-gtk-csd-minimize-button",
+  "-moz-gtk-csd-maximize-button",
+  "-moz-gtk-csd-close-button",
+  "-moz-gtk-csd-reversed-placement",
+  "-moz-panel-animations",
+];
+
+// Non-parseable queries can be tested directly in
+// `test_chrome_only_media_queries.html`.
+const CHROME_ONLY_QUERIES = [
+  "(-moz-platform: linux)",
+  "(-moz-platform: windows)",
+  "(-moz-platform: macos)",
+  "(-moz-platform: android)",
+  "(-moz-platform: windows-win7)",
+  "(-moz-platform: windows-win8)",
+  "(-moz-platform: windows-win10)",
+  "(-moz-content-prefers-color-scheme: dark)",
+  "(-moz-content-prefers-color-scheme: light)",
+];
diff --git a/layout/style/test/chrome/chrome.ini b/layout/style/test/chrome/chrome.ini
new file mode 100644
index 0000000000..95f9444c8c
--- /dev/null
+++ b/layout/style/test/chrome/chrome.ini
@@ -0,0 +1,31 @@
+[DEFAULT]
+skip-if = os == 'android'
+support-files =
+  bug418986-2.js
+  bug535806-css.css
+  bug535806-html.html
+  bug535806-xul.xhtml
+  hover_helper.html
+  match.png
+  mismatch.png
+
+[test_bug1346623.html]
+[test_bug1371453.html]
+[test_bug418986-2.xhtml]
+[test_bug1157097.html]
+[test_bug535806.xhtml]
+[test_chrome_only_media_queries.html]
+support-files = chrome-only-media-queries.js
+[test_display_mode.html]
+support-files = display_mode.html
+tags = fullscreen
+[test_display_mode_reflow.html]
+support-files = display_mode_reflow.html
+tags = fullscreen
+[test_scrollbar_inline_size.html]
+[test_hover.html]
+skip-if = true # bug 1346353
+[test_moz_document_rules.html]
+[test_stylesheet_clone_import_rule.html]
+support-files = import_useless1.css import_useless2.css
+[test_constructable_stylesheets_chrome_only_rules.html]
diff --git a/layout/style/test/chrome/display_mode.html b/layout/style/test/chrome/display_mode.html
new file mode 100644
index 0000000000..a4a0afb57e
--- /dev/null
+++ b/layout/style/test/chrome/display_mode.html
@@ -0,0 +1,122 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1104916
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Display Mode</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://global/skin"/>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+    var imports = [ "SimpleTest", "is", "isnot", "ok" ];
+    for (var n of imports) {
+        window[n] = window.opener.wrappedJSObject[n];
+    }
+
+    /** Test for Display Mode **/
+
+    function waitOneEvent(element, name) {
+      return new Promise(function(resolve, reject) {
+        element.addEventListener(name, function() {
+          resolve();
+        }, {once: true});
+      });
+    }
+
+    function promiseNextTick() {
+      return new Promise(resolve => setTimeout(resolve, 0));
+    }
+
+    async function test_task() {
+      var iframe = document.getElementById("subdoc");
+      var subdoc = iframe.contentDocument;
+      var style = subdoc.getElementById("style");
+      var bodyComputedStyled = subdoc.defaultView.getComputedStyle(subdoc.body);
+      var win = Services.wm.getMostRecentWindow("navigator:browser");
+
+      function queryApplies(q) {
+        style.setAttribute("media", q);
+        return bodyComputedStyled.getPropertyValue("text-decoration-line") ==
+               "underline";
+      }
+
+      function shouldApply(q) {
+        ok(queryApplies(q), q + " should apply");
+      }
+
+      function shouldNotApply(q) {
+        ok(!queryApplies(q), q + " should not apply");
+      }
+
+      function setDisplayMode(mode) {
+        window.browsingContext.top.displayMode = mode;
+      }
+
+      shouldApply("all and (display-mode: browser)");
+      shouldNotApply("all and (display-mode: fullscreen)");
+      shouldNotApply("all and (display-mode: standalone)");
+      shouldNotApply("all and (display-mode: minimal-ui)");
+
+      // Test entering the OS's fullscreen mode.
+      var fullScreenEntered = waitOneEvent(win, "sizemodechange");
+      synthesizeKey("KEY_F11");
+      await fullScreenEntered;
+      // Wait for the next tick to apply media feature changes. See bug 1430380.
+      await promiseNextTick();
+      shouldApply("all and (display-mode: fullscreen)");
+      shouldNotApply("all and (display-mode: browser)");
+      var fullScreenExited = waitOneEvent(win, "sizemodechange");
+      synthesizeKey("KEY_F11");
+      await fullScreenExited;
+      // Wait for the next tick to apply media feature changes. See bug 1430380.
+      await promiseNextTick();
+      shouldNotApply("all and (display-mode: fullscreen)");
+      shouldApply("all and (display-mode: browser)");
+
+      // Test entering fullscreen through document requestFullScreen.
+      fullScreenEntered = waitOneEvent(document, "mozfullscreenchange");
+      document.body.mozRequestFullScreen();
+      await fullScreenEntered
+      ok(document.mozFullScreenElement, "window entered fullscreen");
+      shouldApply("all and (display-mode: fullscreen)");
+      shouldNotApply("all and (display-mode: browser)");
+      fullScreenExited = waitOneEvent(document, "mozfullscreenchange");
+      document.mozCancelFullScreen();
+      await fullScreenExited;
+      ok(!document.mozFullScreenElement, "window exited fullscreen");
+      shouldNotApply("all and (display-mode: fullscreen)");
+      shouldApply("all and (display-mode: browser)");
+
+      // Test entering display mode mode through docshell
+      setDisplayMode("standalone");
+      shouldApply("all and (display-mode: standalone)");
+      shouldNotApply("all and (display-mode: fullscreen)");
+      shouldNotApply("all and (display-mode: browser)");
+      shouldNotApply("all and (display-mode: minimal-ui)");
+
+      // Test that changes in the display mode are reflected
+      setDisplayMode("minimal-ui");
+      shouldApply("all and (display-mode: minimal-ui)");
+      shouldNotApply("all and (display-mode: standalone)");
+
+      // Set the display mode back.
+      setDisplayMode("browser");
+
+      window.close();
+      window.SimpleTest.finish();
+    }
+  </script>
+</head>
+<body onload="test_task()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1104916">Mozilla Bug 1104916</a>
+<iframe id="subdoc" src="http://mochi.test:8888/tests/layout/style/test/chrome/media_queries_iframe.html" allowfullscreen></iframe>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/chrome/display_mode_reflow.html b/layout/style/test/chrome/display_mode_reflow.html
new file mode 100644
index 0000000000..7b2a118cd6
--- /dev/null
+++ b/layout/style/test/chrome/display_mode_reflow.html
@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1256084
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Display Mode</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://global/skin"/>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+    var imports = [ "SimpleTest", "is", "isnot", "ok" ];
+    for (var n of imports) {
+      window[n] = window.opener.wrappedJSObject[n];
+    }
+
+    /** Test for Display Mode **/
+
+    function waitOneEvent(element, name) {
+      return new Promise(function(resolve, reject) {
+        element.addEventListener(name, function() {
+          resolve();
+        }, {once: true});
+      });
+    }
+
+    function promiseNextTick() {
+      return new Promise(resolve => setTimeout(resolve, 0));
+    }
+
+    async function test_task() {
+      var iframe = document.getElementById("subdoc");
+      var subdoc = iframe.contentDocument;
+      var style = subdoc.getElementById("style");
+      var bodyComputedStyled = subdoc.defaultView.getComputedStyle(subdoc.body);
+      var win = Services.wm.getMostRecentWindow("navigator:browser");
+
+      var secondDiv = subdoc.getElementById("b");
+      var offsetTop = secondDiv.offsetTop;
+
+      // Test entering the OS's fullscreen mode.
+      var fullScreenEntered = waitOneEvent(win, "sizemodechange");
+      synthesizeKey("KEY_F11");
+      await fullScreenEntered;
+
+      // Wait for the next tick to apply media feature changes. See bug 1430380.
+      await promiseNextTick();
+      ok(offsetTop !== secondDiv.offsetTop, "offset top changes");
+      var fullScreenExited = waitOneEvent(win, "sizemodechange");
+      synthesizeKey("KEY_F11");
+      await fullScreenExited;
+
+      // Wait for the next tick to apply media feature changes. See bug 1430380.
+      await promiseNextTick();
+      ok(offsetTop === secondDiv.offsetTop, "offset top returns to original value");
+
+      offsetTop = secondDiv.offsetTop;
+      // Test entering fullscreen through document requestFullScreen.
+      fullScreenEntered = waitOneEvent(document, "mozfullscreenchange");
+      document.body.mozRequestFullScreen();
+      await fullScreenEntered
+      ok(offsetTop !== secondDiv.offsetTop, "offset top changes");
+      fullScreenExited = waitOneEvent(document, "mozfullscreenchange");
+      document.mozCancelFullScreen();
+      await fullScreenExited;
+      ok(offsetTop === secondDiv.offsetTop, "offset top returns to original value");
+
+      window.close();
+      window.SimpleTest.finish();
+    }
+  </script>
+</head>
+<body onload="test_task()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256084">Mozilla Bug 1256084</a>
+<iframe id="subdoc" src="http://mochi.test:8888/tests/layout/style/test/chrome/display_mode_reflow_iframe.html"></iframe>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/chrome/display_mode_reflow_iframe.html b/layout/style/test/chrome/display_mode_reflow_iframe.html
new file mode 100644
index 0000000000..c05880ce7f
--- /dev/null
+++ b/layout/style/test/chrome/display_mode_reflow_iframe.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+  <title>Display Mode Reflow inner frame</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css" id="style" media="all">
+  div {
+    border: 2px solid black;
+    width: 50px;
+    height: 50px;
+  }
+  @media (display-mode: fullscreen) {
+    #a { height: 100px; }
+  }
+  </style>
+</head>
+<body>
+  <div id="a"></div>
+  <div id="b"></div>
+</body>
+</html>
diff --git a/layout/style/test/chrome/hover_empty.html b/layout/style/test/chrome/hover_empty.html
new file mode 100644
index 0000000000..7879e1ce9f
--- /dev/null
+++ b/layout/style/test/chrome/hover_empty.html
@@ -0,0 +1,4 @@
+<html>
+<body>
+</body>
+</html>
diff --git a/layout/style/test/chrome/hover_helper.html b/layout/style/test/chrome/hover_helper.html
new file mode 100644
index 0000000000..b1ae14e8cc
--- /dev/null
+++ b/layout/style/test/chrome/hover_helper.html
@@ -0,0 +1,270 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for :hover</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <style type="text/css">
+
+  div#one { height: 10px; width: 10px; }
+  div#one:hover { background: #00f; }
+  div#one > div { height: 5px; width: 20px; }
+  div#one > div:hover { background: #f00; }
+
+  div#twoparent { overflow: hidden; height: 20px; }
+  div#two { width: 10px; height: 10px; }
+  div#two:hover { margin-left: 5px; background: #0f0; }
+  div#two + iframe { width: 50px; height: 10px; }
+  div#two:hover + iframe { width: 100px; }
+
+  </style>
+</head>
+<!-- need a set timeout because we need things to start after painting suppression ends -->
+<body onload="setTimeout(step1, 0)">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
+<div id="display" style="position: absolute; top: 0; left: 0; width: 300px; height: 300px">
+
+  <div id="one"><div></div></div>
+
+  <div id="twoparent">
+    <div id="two"></div>
+    <iframe id="twoi" src="hover_empty.html"></iframe>
+    <div style="width: 5000px; height: 10px;"></div>
+  </div>
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+var imports = [ "SimpleTest", "is", "isnot", "ok" ];
+for (var name of imports) {
+    window[name] = window.opener.wrappedJSObject[name];
+}
+
+var div = document.getElementById("display");
+var divtwo = document.getElementById("two");
+var iframe = document.getElementById("twoi");
+var divtwoparent = document.getElementById("twoparent");
+
+iframe.contentDocument.open();
+iframe.contentDocument.write("<style type='text/css'>html, body { margin: 0; padding: 0; }<\/style><body>");
+iframe.contentDocument.close();
+
+var moveEvent = { type: "mousemove", clickCount: "0" };
+
+function setResize(str) {
+  var handler = function() {
+    iframe.contentWindow.removeEventListener("resize", arguments.callee);
+    setTimeout(str, 100);
+  };
+  iframe.contentWindow.addEventListener("resize", handler);
+}
+
+function step1() {
+    /** test basic hover **/
+    var divone = document.getElementById("one");
+    synthesizeMouse(divone, 5, 7, moveEvent, window);
+    is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)",
+       ":hover applies");
+    is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgba(0, 0, 0, 0)",
+       ":hover does not apply");
+    synthesizeMouse(divone, 5, 2, moveEvent, window);
+    is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)",
+       ":hover applies hierarchically");
+    is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgb(255, 0, 0)",
+       ":hover applies");
+    synthesizeMouse(divone, 15, 7, moveEvent, window);
+    is(getComputedStyle(divone, "").backgroundColor, "rgba(0, 0, 0, 0)",
+       ":hover does not apply");
+    is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgba(0, 0, 0, 0)",
+       ":hover does not apply");
+    synthesizeMouse(divone, 15, 2, moveEvent, window);
+    is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)",
+       ":hover applies hierarchically");
+    is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgb(255, 0, 0)",
+       ":hover applies");
+
+    /** Test for Bug 302561 **/
+    setResize("step2();");
+    is(iframe.contentDocument.body.offsetWidth, 50,
+       ":hover does not apply (iframe body width)");
+    synthesizeMouse(divtwoparent, 7, 5, moveEvent, window);
+    is(iframe.contentDocument.body.offsetWidth, 100,
+       ":hover applies (iframe body width)");
+}
+
+var step2called = false;
+function step2() {
+    is(step2called, false, "step2 called only once");
+    step2called = true;
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
+       ":hover applies");
+    is(iframe.contentDocument.body.offsetWidth, 100,
+       ":hover applies (iframe body width)");
+    setResize("step3()");
+    synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);
+    is(iframe.contentDocument.body.offsetWidth, 50,
+       ":hover does not apply (iframe body width)");
+}
+
+var step3called = false;
+function step3() {
+    is(step3called, false, "step3 called only once");
+    step3called = true;
+    if (getComputedStyle(iframe, "").width == "100px") {
+        // The two resize events may be coalesced into a single one.
+        step4();
+        return;
+    }
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
+       ":hover does not apply");
+    setResize("step4()");
+    /* expect to get a second resize from the oscillation */
+}
+
+var step4called = false;
+function step4() {
+    is(step4called, false, "step4 called only once (more than two cycles of oscillation)");
+    if (step4called)
+        return;
+    step4called = true;
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
+       ":hover applies");
+    setTimeout(step5, 500); // time to detect oscillations if they exist
+}
+
+var step5called = false;
+function step5() {
+    is(step5called, false, "step5 called only once");
+    step5called = true;
+    setResize("step6()");
+    synthesizeMouse(divtwoparent, 25, 5, moveEvent, window);
+}
+
+var step6called = false;
+function step6() {
+    is(step6called, false, "step6 called only once");
+    step6called = true;
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
+       ":hover does not apply");
+    synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);
+    setTimeout(step7, 500); // time to detect oscillations if they exist
+}
+
+var step7called = false;
+function step7() {
+    is(step7called, false, "step7 called only once (more than two cycles of oscillation)");
+    if (step7called)
+        return;
+    step7called = true;
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
+       ":hover does not apply");
+    setTimeout(step8, 500); // time to detect oscillations if they exist
+}
+
+/* test the same case with scrolltop */
+
+var step8called = false;
+function step8() {
+    is(step8called, false, "step8 called only once");
+    step8called = true;
+    iframe.contentDocument.body.removeAttribute("onresize");
+    /* move the mouse out of the way */
+    synthesizeMouse(divtwoparent, 200, 5, moveEvent, window);
+    divtwoparent.scrollLeft = 5;
+    setResize("step9()");
+    synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);
+    /* mouse now over 7, 5 */
+}
+
+var step9called = false;
+function step9() {
+    is(step9called, false, "step9 called only once");
+    step9called = true;
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
+       ":hover applies");
+    setResize("step10()");
+    divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */
+}
+
+var step10called = false;
+function step10() {
+    is(step10called, false, "step10 called only once");
+    step10called = true;
+    if (getComputedStyle(iframe, "").width == "100px") {
+        // The two resize events may be coalesced into a single one.
+        step11();
+        return;
+    }
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
+       ":hover does not apply");
+    setResize("step11()");
+    /* expect to get a second resize from the oscillation */
+}
+
+var step11called = false;
+function step11() {
+    is(step11called, false, "step11 called only once (more than two cycles of oscillation)");
+    if (step11called)
+        return;
+    step11called = true;
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
+       ":hover applies");
+    setTimeout(step12, 500); // time to detect oscillations if they exist
+}
+
+var step12called = false;
+function step12() {
+    is(step12called, false, "step12 called only once");
+    step12called = true;
+    setResize("step13()");
+    divtwoparent.scrollLeft = 25; /* mouse now over 27,5 */
+}
+
+var step13called = false;
+function step13() {
+    is(step13called, false, "step13 called only once");
+    step13called = true;
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
+       ":hover does not apply");
+    setResize("step14()");
+    divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */
+}
+
+var step14called = false;
+function step14() {
+    is(step14called, false, "step14 called only once");
+    step14called = true;
+    if (getComputedStyle(iframe, "").width == "50px") {
+        // The two resize events may be coalesced into a single one.
+        step15();
+        return;
+    }
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
+       ":hover applies");
+    setResize("step15()");
+    /* expect to get a second resize from the oscillation */
+}
+
+var step15called = false;
+function step15() {
+    is(step15called, false, "step15 called only once (more than two cycles of oscillation)");
+    if (step15called)
+        return;
+    step15called = true;
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
+       ":hover does not apply");
+    setTimeout(finish, 500); // time to detect oscillations if they exist
+}
+
+function finish() {
+    document.getElementById("display").style.display = "none";
+
+    var tester = window.SimpleTest;
+    window.close();
+    tester.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/chrome/import_useless1.css b/layout/style/test/chrome/import_useless1.css
new file mode 100644
index 0000000000..37e1a3d1d9
--- /dev/null
+++ b/layout/style/test/chrome/import_useless1.css
@@ -0,0 +1,3 @@
+.unlikely_to_match_anything {
+  color: black;
+}
diff --git a/layout/style/test/chrome/import_useless2.css b/layout/style/test/chrome/import_useless2.css
new file mode 100644
index 0000000000..37e1a3d1d9
--- /dev/null
+++ b/layout/style/test/chrome/import_useless2.css
@@ -0,0 +1,3 @@
+.unlikely_to_match_anything {
+  color: black;
+}
diff --git a/layout/style/test/chrome/match.png b/layout/style/test/chrome/match.png
new file mode 100644
index 0000000000..d3f299bf58
--- /dev/null
+++ b/layout/style/test/chrome/match.png
diff --git a/layout/style/test/chrome/mismatch.png b/layout/style/test/chrome/mismatch.png
new file mode 100644
index 0000000000..8f9da3f00f
--- /dev/null
+++ b/layout/style/test/chrome/mismatch.png
diff --git a/layout/style/test/chrome/moz_document_helper.html b/layout/style/test/chrome/moz_document_helper.html
new file mode 100644
index 0000000000..8b331b19e0
--- /dev/null
+++ b/layout/style/test/chrome/moz_document_helper.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div id="display" style="position: relative"></div>
diff --git a/layout/style/test/chrome/test_bug1157097.html b/layout/style/test/chrome/test_bug1157097.html
new file mode 100644
index 0000000000..febf4952fb
--- /dev/null
+++ b/layout/style/test/chrome/test_bug1157097.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Test for bug 1157097</title>
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+<style>
+.blue { color: blue; }
+.red { color: red; }
+.inline-block { display: inline-block; }
+</style>
+<body onload=run()>
+<p><span id=s1 class=blue><b></b></span><span id=s2 class=red><b></b></span></p>
+<script>
+function run() {
+  window.windowUtils.postRestyleSelfEvent(document.querySelector("p"));
+  document.querySelectorAll("span")[0].className = "";
+  document.querySelectorAll("b")[0].className = "inline-block";
+  document.querySelectorAll("span")[1].className = "blue";
+  window.windowUtils.postRestyleSelfEvent(document.querySelectorAll("b")[1]);
+
+  document.body.offsetTop;
+
+  ok(true, "finished (hopefully we didn't assert)");
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+</script>
diff --git a/layout/style/test/chrome/test_bug1346623.html b/layout/style/test/chrome/test_bug1346623.html
new file mode 100644
index 0000000000..30e21bcc36
--- /dev/null
+++ b/layout/style/test/chrome/test_bug1346623.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for bug 1346623</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+</head>
+<body onload="startTest();">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1346623">Mozilla Bug 1346623</a>
+<div id="display">
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+var winUtils = window.windowUtils;
+
+function startTest() {
+  // load some styles at the agent level
+  var css = `
+    #ac-parent { color: green; }
+    #ac-child.abc { }
+  `;
+  var sheetURL = "data:text/css," + encodeURIComponent(css);
+  winUtils.loadSheetUsingURIString(sheetURL, winUtils.AGENT_SHEET);
+
+  // add canvas anonymous content
+  var bq = document.createElement("blockquote");
+  bq.id = "ac-parent";
+  bq.textContent = "This blockquote text should be green.";
+  var div = document.createElement("div");
+  div.id = "ac-child";
+  div.textContent = " This div text should be green.";
+  bq.appendChild(div);
+  var ac = document.insertAnonymousContent(bq);
+  document.body.offsetWidth;
+
+  is(ac.getComputedStylePropertyValue("ac-child", "color"), "rgb(0, 128, 0)",
+     "color before reframing");
+
+  // reframe the root
+  document.documentElement.style.display = "flex";
+  document.body.offsetWidth;
+
+  // restyle the div
+  ac.setAttributeForElement("ac-child", "class", "abc");
+  document.body.offsetWidth;
+
+  is(ac.getComputedStylePropertyValue("ac-child", "color"), "rgb(0, 128, 0)",
+     "color after reframing");
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/chrome/test_bug1371453.html b/layout/style/test/chrome/test_bug1371453.html
new file mode 100644
index 0000000000..6b3b4cb6eb
--- /dev/null
+++ b/layout/style/test/chrome/test_bug1371453.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Test for Bug 1371453</title>
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+<link rel="stylesheet" href="data:text/css,{}">
+<body>
+<script>
+SimpleTest.waitForExplicitFinish();
+
+const Cu = SpecialPowers.Components.utils;
+
+document.styleSheetChangeEventsEnabled = true;
+
+onload = runTest;
+
+async function runTest() {
+  const sheet = document.getElementsByTagName("link")[1].sheet;
+  sheet.insertRule('@import url("blahblah")', 0);
+
+  const rule = sheet.cssRules[0];
+  is(rule.type, CSSRule.IMPORT_RULE, "Got expected import rule.");
+  isnot(rule.styleSheet, null, "Import rule contains a stylesheet.");
+  isnot(rule.media, null, "Import rule contains a media list.");
+  is(rule.href, "blahblah", "Import rule contains expected href.");
+
+  SimpleTest.finish();
+}
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/chrome/test_bug418986-2.xhtml b/layout/style/test/chrome/test_bug418986-2.xhtml
new file mode 100644
index 0000000000..152cac004e
--- /dev/null
+++ b/layout/style/test/chrome/test_bug418986-2.xhtml
@@ -0,0 +1,29 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="chrome://global/skin"?>
+<?xml-stylesheet type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"?>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=418986
+-->
+<window title="Mozilla Bug 418986"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
+  <!-- test results are displayed in the html:body -->
+  <body xmlns="http://www.w3.org/1999/xhtml">
+  <style id="test-css" scoped="true"></style>
+  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=418986"
+     target="_blank">Mozilla Bug 418986</a>
+  <p id="display"></p>
+  <p id="pictures"></p>
+  </body>
+
+  <script type="text/javascript" src="bug418986-2.js"></script>
+  <!-- test code goes here -->
+  <script type="text/javascript">
+    // Run all tests now.
+    window.onload = function () {
+      add_task(async function() {
+        await test(false);
+      });
+    };
+  </script>
+</window>
diff --git a/layout/style/test/chrome/test_bug535806.xhtml b/layout/style/test/chrome/test_bug535806.xhtml
new file mode 100644
index 0000000000..7f4ec286bc
--- /dev/null
+++ b/layout/style/test/chrome/test_bug535806.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="chrome://global/skin"?>
+<?xml-stylesheet type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"?>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=535806
+-->
+<window title="Mozilla Bug 535806"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
+
+  <!-- test results are displayed in the html:body -->
+  <body xmlns="http://www.w3.org/1999/xhtml">
+  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=535806"
+     target="_blank">Mozilla Bug 535806</a>
+  </body>
+
+  <iframe id="f"/>
+  
+  <!-- test code goes here -->
+  <script type="application/javascript">
+  <![CDATA[
+  /** Test for Bug 535806 **/
+  SimpleTest.waitForExplicitFinish();
+
+  window.addEventListener("load", function() {
+      $("f").setAttribute("src", "bug535806-html.html");
+    });
+
+  function htmlLoaded() {
+    $("f").setAttribute("src", "bug535806-xul.xhtml");
+  }
+
+  function xulLoaded() {
+    var doc = $("f").contentDocument;
+    is(doc.defaultView.getComputedStyle(doc.getElementById("s")).color,
+       "rgb(0, 128, 0)");
+    SimpleTest.finish();
+  }
+
+
+  ]]>
+  </script>
+</window>
diff --git a/layout/style/test/chrome/test_chrome_only_media_queries.html b/layout/style/test/chrome/test_chrome_only_media_queries.html
new file mode 100644
index 0000000000..1a2fb098c0
--- /dev/null
+++ b/layout/style/test/chrome/test_chrome_only_media_queries.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<title>Test for parsing of non-content-exposed media-queries.</title>
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<script src="chrome-only-media-queries.js"></script>
+<style></style>
+<script>
+const SHEET = document.querySelector('style');
+
+SimpleTest.waitForExplicitFinish();
+
+async function testWithPref() {
+  await new Promise(r => {
+    SpecialPowers.pushPrefEnv(
+      {
+        set: [
+          ["layout.css.forced-colors.enabled", false],
+        ],
+      },
+      r
+    );
+  });
+  expectKnown("(forced-colors: none)");
+  expectKnown("(forced-colors: active)");
+  expectKnown("(forced-colors)");
+  SimpleTest.finish();
+}
+
+function expect(q, shouldBeKnown) {
+  is(matchMedia(q).media, q, "Serialization should roundtrip");
+  is(matchMedia(`${q} or (not ${q})`).matches, shouldBeKnown, `Query should${shouldBeKnown ? "" : " not"} be known`);
+}
+
+function expectKnown(q) {
+  expect(q, true);
+}
+
+function expectUnkown(q) {
+  expect(q, false);
+}
+
+// Test a toggle that should always match for `1` or `0`.
+function testToggle(toggle) {
+  expectKnown(`(${toggle})`);
+  expectKnown(`(${toggle}: 1)`);
+  expectKnown(`(${toggle}: 0)`);
+
+  expectUnkown(`(${toggle}: foo)`);
+  expectUnkown(`(${toggle}: true)`);
+  expectUnkown(`(${toggle}: false)`);
+  expectUnkown(`(${toggle}: -1)`);
+  expectUnkown(`(min-${toggle}: 0)`);
+  expectUnkown(`(max-${toggle}: 0)`);
+  expectUnkown(`(max-${toggle})`);
+  expectUnkown(`(min-${toggle})`);
+
+  let matches_1 = matchMedia(`(${toggle}: 1)`).matches;
+  let matches_0 = matchMedia(`(${toggle}: 0)`).matches;
+  isnot(matches_0, matches_1, `Should not match both true and false: ${toggle}`);
+  is(matches_0 || matches_1, true, `Should match at least one: ${toggle}`);
+}
+
+for (let toggle of CHROME_ONLY_TOGGLES) {
+  testToggle(toggle)
+}
+
+for (let query of CHROME_ONLY_QUERIES) {
+  expectKnown(query);
+}
+
+// These might be exposed to content by pref, we just want to make sure they're
+// always exposed to chrome.
+expectKnown("(prefers-contrast: more)")
+expectKnown("(prefers-contrast: no-preference)")
+expectKnown("(prefers-contrast: less)");
+expectKnown("(prefers-contrast)")
+
+expectKnown("(forced-colors: none)");
+expectKnown("(forced-colors: active)");
+expectKnown("(forced-colors)");
+
+expectUnkown("(-moz-platform: )");
+
+testWithPref();
+</script>
diff --git a/layout/style/test/chrome/test_constructable_stylesheets_chrome_only_rules.html b/layout/style/test/chrome/test_constructable_stylesheets_chrome_only_rules.html
new file mode 100644
index 0000000000..4d9647ba27
--- /dev/null
+++ b/layout/style/test/chrome/test_constructable_stylesheets_chrome_only_rules.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Test for chrome-only rules in constructable stylesheets</title>
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<script>
+  add_task(async function chrome_rules_constructable_stylesheets() {
+    let sheet = new CSSStyleSheet();
+    sheet.replaceSync(".foo { -moz-default-appearance: none }");
+    is(sheet.cssRules[0].style.length, 1, "Should parse chrome-only property in chrome document");
+  });
+</script>
diff --git a/layout/style/test/chrome/test_display_mode.html b/layout/style/test/chrome/test_display_mode.html
new file mode 100644
index 0000000000..69e72d5ab8
--- /dev/null
+++ b/layout/style/test/chrome/test_display_mode.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1104916
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Display Mode</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://global/skin"/>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+    SimpleTest.waitForExplicitFinish();
+    async function startTest() {
+      await new Promise(r => {
+        SpecialPowers.pushPrefEnv(
+          {
+            set: [
+              ["dom.security.featurePolicy.header.enabled", true],
+              ["dom.security.featurePolicy.webidl.enabled", true],
+            ],
+          },
+          r
+        );
+      });
+      // Chrome test run tests in iframe, and fullscreen is disabled by default.
+      // So run the test in a separate window.
+      window.open("display_mode.html", "display_mode", "width=500,height=500,resizable");
+    }
+  </script>
+</head>
+<body onload="startTest();">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1104916">Mozilla Bug 1104916</a>
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/chrome/test_display_mode_reflow.html b/layout/style/test/chrome/test_display_mode_reflow.html
new file mode 100644
index 0000000000..01022207f3
--- /dev/null
+++ b/layout/style/test/chrome/test_display_mode_reflow.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1256084
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Display Mode</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://global/skin"/>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+    SimpleTest.waitForExplicitFinish();
+    async function startTest() {
+      await new Promise(r => {
+        SpecialPowers.pushPrefEnv(
+          {
+            set: [
+              ["dom.security.featurePolicy.header.enabled", true],
+              ["dom.security.featurePolicy.webidl.enabled", true],
+            ],
+          },
+          r
+        );
+      });
+      // Chrome test run tests in iframe, and fullscreen is disabled by default.
+      // So run the test in a separate window.
+      window.open("display_mode_reflow.html", "display_mode_reflow", "width=500,height=500,resizable");
+    }
+  </script>
+</head>
+<body onload="startTest();">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256084">Mozilla Bug 1256084</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/chrome/test_hover.html b/layout/style/test/chrome/test_hover.html
new file mode 100644
index 0000000000..019f537e8c
--- /dev/null
+++ b/layout/style/test/chrome/test_hover.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for :hover</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+</head>
+<body onload="startTest();">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
+<div id="display">
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+SimpleTest.waitForExplicitFinish();
+
+function startTest() {
+  // Run the test in a separate window so that the parent document doesn't have
+  // anything that will cause reflows and dispatch synth mouse moves when we don't
+  // want them and disturb our test.
+  window.open("hover_helper.html", "hover_helper", "width=200,height=300");
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/chrome/test_moz_document_rules.html b/layout/style/test/chrome/test_moz_document_rules.html
new file mode 100644
index 0000000000..c28fc964ed
--- /dev/null
+++ b/layout/style/test/chrome/test_moz_document_rules.html
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for @-moz-document rules</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=398962">Mozilla Bug 398962</a>
+<iframe id="iframe" src="http://mochi.test:8888/tests/layout/style/test/chrome/moz_document_helper.html"></iframe>
+<pre id="test">
+<script type="application/javascript">
+
+var [gStyleSheetService, gIOService] = (function() {
+    return [
+            Cc["@mozilla.org/content/style-sheet-service;1"]
+                .getService(Ci.nsIStyleSheetService),
+            Cc["@mozilla.org/network/io-service;1"]
+                .getService(Ci.nsIIOService)
+           ];
+})();
+function set_user_sheet(sheeturi)
+{
+    var uri = gIOService.newURI(sheeturi);
+    gStyleSheetService.loadAndRegisterSheet(uri, gStyleSheetService.USER_SHEET);
+}
+function remove_user_sheet(sheeturi)
+{
+    var uri = gIOService.newURI(sheeturi);
+    gStyleSheetService.unregisterSheet(uri, gStyleSheetService.USER_SHEET);
+}
+
+function run()
+{
+    var iframe = document.getElementById("iframe");
+    var subdoc = iframe.contentDocument;
+    var subwin = iframe.contentWindow;
+    var cs = subwin.getComputedStyle(subdoc.getElementById("display"));
+    var zIndexCounter = 0;
+
+    function test_document_rule(urltests, shouldapply)
+    {
+        var zIndex = ++zIndexCounter;
+        var encodedRule = encodeURI("@-moz-document " + urltests + " { ") +
+                          "%23" + // encoded hash character for "#display"
+                          encodeURI("display { z-index: " + zIndex + " } }");
+        var sheeturi = "data:text/css," + encodedRule;
+        set_user_sheet(sheeturi);
+        if (shouldapply) {
+            is(cs.zIndex, String(zIndex),
+               "@-moz-document " + urltests +
+               " should apply to this document");
+        } else {
+            is(cs.zIndex, "auto",
+               "@-moz-document " + urltests +
+               " should NOT apply to this document");
+        }
+        remove_user_sheet(sheeturi);
+    }
+
+    test_document_rule("domain(mochi.test)", true);
+    test_document_rule("domain(\"mochi.test\")", true);
+    test_document_rule("domain('mochi.test')", true);
+    test_document_rule("domain('test')", true);
+    test_document_rule("domain(.test)", false);
+    test_document_rule("domain('.test')", false);
+    test_document_rule("domain('ochi.test')", false);
+    test_document_rule("domain(ochi.test)", false);
+    test_document_rule("url-prefix(http://moch)", true);
+    test_document_rule("url-prefix(http://och)", false);
+    test_document_rule("url-prefix(http://mochi.test)", true);
+    test_document_rule("url-prefix(http://mochi.test:88)", true);
+    test_document_rule("url-prefix(http://mochi.test:8888)", true);
+    test_document_rule("url-prefix(http://mochi.test:8888/)", true);
+    test_document_rule("url-prefix('http://mochi.test:8888/tests/layout/style/test/chrome/moz_document_helper.html')", true);
+    test_document_rule("url-prefix('http://mochi.test:8888/tests/layout/style/test/chrome/moz_document_helper.htmlx')", false);
+    test_document_rule("url(http://mochi.test:8888/)", false);
+    test_document_rule("url('http://mochi.test:8888/tests/layout/style/test/chrome/moz_document_helper.html')", true);
+    test_document_rule("url('http://mochi.test:8888/tests/layout/style/test/chrome/moz_document_helper.htmlx')", false);
+    test_document_rule("regexp(.*ochi.*)", false); // syntax error
+    test_document_rule("regexp('.*ochi.*')", true);
+    test_document_rule("regexp('ochi.*')", false);
+    test_document_rule("regexp('.*ochi')", false);
+    test_document_rule("regexp('http:.*ochi.*')", true);
+    test_document_rule("regexp('http:.*ochi')", false);
+    test_document_rule("regexp('http:.*oCHi.*')", false); // case sensitive
+
+    SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/chrome/test_scrollbar_inline_size.html b/layout/style/test/chrome/test_scrollbar_inline_size.html
new file mode 100644
index 0000000000..31161a9caf
--- /dev/null
+++ b/layout/style/test/chrome/test_scrollbar_inline_size.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Test for env(scrollbar-inline-size)</title>
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+<link rel="stylesheet" href="chrome://global/skin"/>
+<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+<div id="scroller" style="width: 100px; height: 100px; overflow: scroll"></div>
+<div id="ref" style="width: env(scrollbar-inline-size, 1000px)"></div>
+<script>
+  SimpleTest.waitForExplicitFinish();
+  async function runTest() {
+    // We need to disable overlay scrollbars to measure the real scrollbar
+    // size.
+    await SpecialPowers.pushPrefEnv({
+      set: [["ui.useOverlayScrollbars", 0]],
+    });
+    runOnce();
+
+    info("with full zoom");
+    SpecialPowers.setFullZoom(window, 2.0);
+
+    runOnce();
+  }
+
+  function runOnce() {
+    let scroller = document.getElementById("scroller");
+    let ref = document.getElementById("ref");
+    let scrollbarSize = scroller.getBoundingClientRect().width - scroller.clientWidth;
+    ok(scrollbarSize > 0, "Should have a scrollbar");
+    // clientWidth rounds, so we might see a bit of rounding error
+    isfuzzy(ref.getBoundingClientRect().width, scrollbarSize, 1, "env() should match the scrollbar size");
+  }
+
+  runTest().then(SimpleTest.finish);
+</script>
diff --git a/layout/style/test/chrome/test_stylesheet_clone_import_rule.html b/layout/style/test/chrome/test_stylesheet_clone_import_rule.html
new file mode 100644
index 0000000000..37c3b9ccaa
--- /dev/null
+++ b/layout/style/test/chrome/test_stylesheet_clone_import_rule.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+
+<style>div { color: green; }</style>
+
+<link id="theOnlyLink" rel="stylesheet" type="text/css" href="import_useless1.css">
+
+<div id="theOnlyDiv">This text will change colors several times.</div>
+
+<script>
+  SimpleTest.waitForExplicitFinish();
+
+  const Cu = SpecialPowers.Components.utils;
+  
+
+  let theOnlyDiv = document.getElementById("theOnlyDiv");
+  let link = document.getElementById("theOnlyLink");
+  let stylesheet = link.sheet;
+
+  runTest().catch(function(reason) {
+    ok(false, "Failed with reason: " + reason);
+  }).then(function() {
+    SimpleTest.finish();
+  });
+
+  function cssRulesToString(cssRules) {
+    return Array.from(cssRules).map(rule => rule.cssText).join('');
+  }
+
+  async function runTest() {
+    // Test that the div is initially red (from base.css)
+    is(getComputedStyle(theOnlyDiv).color, "rgb(0, 128, 0)", "div begins as green.");
+
+    // Insert some import rules.
+    stylesheet.insertRule('@import url("import_useless2.css")', 0);
+    stylesheet.insertRule('@import url("import_useless2.css")', 1);
+
+    // Do some sanity checking of our import rules.
+    let primaryRules = stylesheet.cssRules;
+    await SimpleTest.promiseWaitForCondition(function() {
+      try {
+        primaryRules[0].styleSheet.cssRules;
+        primaryRules[1].styleSheet.cssRules;
+        return true;
+      } catch (ex) {
+        return false;
+      }
+    });
+
+    // Make some helper variables for the comparison tests.
+    let importSheet1 = primaryRules[0].styleSheet;
+    let rules1 = importSheet1.cssRules;
+
+    let importSheet2 = primaryRules[1].styleSheet;
+    let rules2 = importSheet2.cssRules;
+
+    // Confirm that these two sheets are meaningfully the same.
+    is(cssRulesToString(rules1), cssRulesToString(rules2), "Cloned sheet rules are equivalent.");
+
+    // Add a color-changing rule to the first stylesheet.
+    importSheet1.insertRule('div { color: blue; }');
+    rules1 = importSheet1.cssRules;
+
+    // And make sure that it has an effect.
+    is(getComputedStyle(theOnlyDiv).color, "rgb(0, 0, 255)", "div becomes blue.");
+
+    // Make sure that the two sheets have different rules now.
+    isnot(cssRulesToString(rules1), cssRulesToString(rules2), "Cloned sheet rules are no longer equivalent.");
+
+    // Add a color-changing rule to the second stylesheet (that will mask the first).
+    importSheet2.insertRule('div { color: red; }');
+    // And make sure that it has an effect.
+    is(getComputedStyle(theOnlyDiv).color, "rgb(255, 0, 0)", "div becomes red.");
+
+    // Delete the second sheet by removing the import rule, and make sure the color changes back.
+    stylesheet.deleteRule(1);
+    is(getComputedStyle(theOnlyDiv).color, "rgb(0, 0, 255)", "div goes back to blue.");
+
+    // Delete the first sheet by removing the import rule, and make sure the color changes back.
+    stylesheet.deleteRule(0);
+    is(getComputedStyle(theOnlyDiv).color, "rgb(0, 128, 0)", "div goes back to green.");
+  }
+</script>
+</html>
diff --git a/layout/style/test/css_properties_like_longhand.js b/layout/style/test/css_properties_like_longhand.js
new file mode 100644
index 0000000000..606de3ad68
--- /dev/null
+++ b/layout/style/test/css_properties_like_longhand.js
@@ -0,0 +1 @@
+var gShorthandPropertiesLikeLonghand = [{ name: "overflow", prop: "overflow" }];
diff --git a/layout/style/test/descriptor_database.js b/layout/style/test/descriptor_database.js
new file mode 100644
index 0000000000..f5abc8576d
--- /dev/null
+++ b/layout/style/test/descriptor_database.js
@@ -0,0 +1,142 @@
+/* -*- tab-width: 4; indent-tabs-mode: nil; js-indent-level: 4 -*- */
+/* vim: set shiftwidth=4 tabstop=4 autoindent cindent noexpandtab: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Each property has the following fields:
+//   domProp: The name of the relevant member of nsIDOM[NS]CSS2Properties
+//   values: Strings that are values for the descriptor and should be accepted.
+//   invalid_values: Things that are not values for the descriptor and
+//     should be rejected.
+
+var gCSSFontFaceDescriptors = {
+  "font-family": {
+    domProp: "fontFamily",
+    values: [
+      '"serif"',
+      '"cursive"',
+      "seriff",
+      "Times New     Roman",
+      "TimesRoman",
+      '"Times New Roman"',
+    ],
+    /* not clear that the generics are really invalid */
+    invalid_values: [
+      "sans-serif",
+      "Times New Roman, serif",
+      "'Times New Roman', serif",
+      "cursive",
+      "fantasy",
+      "Times )",
+      "Times !",
+      "Times ! foo",
+      "Times ! important",
+    ],
+  },
+  "font-stretch": {
+    domProp: "fontStretch",
+    values: [
+      "normal",
+      "ultra-condensed",
+      "extra-condensed",
+      "condensed",
+      "semi-condensed",
+      "semi-expanded",
+      "expanded",
+      "extra-expanded",
+      "ultra-expanded",
+    ],
+    invalid_values: ["wider", "narrower", "normal ! important", "normal )"],
+  },
+  "font-style": {
+    domProp: "fontStyle",
+    values: ["normal", "italic", "oblique"],
+    invalid_values: [],
+  },
+  "font-weight": {
+    domProp: "fontWeight",
+    values: [
+      "normal",
+      "400",
+      "bold",
+      "100",
+      "200",
+      "300",
+      "500",
+      "600",
+      "700",
+      "800",
+      "900",
+      "107",
+      "399",
+      "401",
+      "699",
+      "710",
+      "calc(1001)",
+      "calc(100 + 1)",
+      "calc(1)",
+      "100.6",
+      "99",
+      "700 900",
+      "300.4 500.4",
+      "calc(200.4) calc(400.4)",
+    ],
+    invalid_values: ["bolder", "lighter", "1001", "0", "0 100", "100 1001"],
+  },
+  src: {
+    domProp: null,
+    values: [
+      "url(404.ttf)",
+      'url("404.eot")',
+      "url('404.otf')",
+      'url(404.ttf) format("truetype")',
+      "local(Times New Roman)",
+      "local('Times New Roman')",
+      'local("Times New Roman")',
+      'local("serif")',
+      "url(404.ttf) format(truetype)",
+      'url(404.ttf) format("truetype", "opentype"), url(\'404.eot\')',
+      'url(404.ttf) format("truetype", "unknown"), local(Times New Roman), url(\'404.eot\')',
+    ],
+    invalid_values: [
+      'url(404.ttf) format("truetype" "opentype")',
+      'url(404.ttf) format("truetype",)',
+      'local("Times New" Roman)',
+      "local(serif)" /* is this valid? */,
+      "url(404.ttf) )",
+      "url(404.ttf) ) foo",
+      "url(404.ttf) ! important",
+      "url(404.ttf) ! hello",
+      'url(404.ttf) format("truetype", "opentype")',
+    ],
+  },
+  "unicode-range": {
+    domProp: null,
+    values: [
+      "U+0-10FFFF",
+      "U+3-7B3",
+      "U+3??",
+      "U+6A",
+      "U+3????",
+      "U+???",
+      "U+302-302",
+      "U+0-7,U+A-C",
+      "U+3??, U+500-513 ,U+612 , U+4????",
+      "U+1FFF,U+200-27F",
+    ],
+    invalid_values: [
+      "U+1????-2????",
+      "U+0-7,A-C",
+      "U+100-17F,U+200-17F",
+      "U+100-17F,200-27F",
+      "U+6A!important",
+      "U+6A)",
+    ],
+  },
+  "font-display": {
+    domProp: null,
+    values: ["auto", "block", "swap", "fallback", "optional"],
+    invalid_values: ["normal", "initial"],
+  },
+};
diff --git a/layout/style/test/empty.html b/layout/style/test/empty.html
new file mode 100644
index 0000000000..734c5a1c09
--- /dev/null
+++ b/layout/style/test/empty.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title></title></head><body></body></html>
\ No newline at end of file
diff --git a/layout/style/test/file_animations_async_tests.html b/layout/style/test/file_animations_async_tests.html
new file mode 100644
index 0000000000..9d4dfa1fed
--- /dev/null
+++ b/layout/style/test/file_animations_async_tests.html
@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1086937</title>
+  <script>
+    var is = opener.is.bind(opener);
+    var ok = opener.ok.bind(opener);
+    var todo = opener.todo.bind(opener);
+    function finish() {
+      var o = opener;
+      self.close();
+      o.SimpleTest.finish();
+    }
+  </script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <style>
+  /* must use implicit value at one end */
+  @keyframes slide-left { from { margin-left: -1000px } }
+  </style>
+  <script type="application/javascript">
+
+  var gDisplay;
+
+  function run() {
+    gDisplay = document.getElementById("display");
+    opener.SimpleTest.executeSoon(test1);
+  }
+
+  /*
+   * Bug 1086937 - Animations continue correctly across load of
+   * downloadable font.
+   */
+  function test1() {
+    var animdiv = document.createElement("div");
+    // Take control of the refresh driver right from the start
+    advance_clock(0);
+    animdiv.style.animation = "slide-left 100s linear"; // 10px per second
+    gDisplay.appendChild(animdiv);
+    var cs = getComputedStyle(animdiv, "");
+    is(cs.marginLeft, "-1000px", "initial value of animation (force flush)");
+    advance_clock(1000);
+    is(cs.marginLeft, "-990px", "value of animation before font load");
+
+    var font = new FontFace("DownloadedAhem", "url(Ahem.ttf)");
+    document.fonts.add(font);
+
+    var fontdiv = document.createElement("div");
+    fontdiv.appendChild(document.createTextNode("A"));
+    fontdiv.style.fontFamily = "DownloadedAhem";
+    gDisplay.appendChild(fontdiv);
+
+    font.load().then(function(loadedFace) {
+      is(cs.marginLeft, "-990px", "value of animation after font load " +
+                                  "(clock only advances when we say so)");
+      advance_clock(1000);
+      is(cs.marginLeft, "-980px",
+         "animation should still be advancing after font load");
+
+      SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
+      document.fonts.delete(font);
+      animdiv.remove();
+      fontdiv.remove();
+
+      finish();
+    });
+  }
+
+  </script>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1086937">Mozilla Bug 1086937</a>
+<div id="display"></div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/file_animations_omta_scroll.html b/layout/style/test/file_animations_omta_scroll.html
new file mode 100644
index 0000000000..625b4b6c19
--- /dev/null
+++ b/layout/style/test/file_animations_omta_scroll.html
@@ -0,0 +1,392 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Test for css-animations running on the compositor thread with scroll-timeline</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script src="/tests/gfx/layers/apz/test/mochitest/apz_test_utils.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <style type="text/css">
+    @keyframes transform_anim {
+      from { transform: translate(50px); }
+      to { transform: translate(150px); }
+    }
+
+    @keyframes always_fifty {
+      from, to { transform: translate(50px); }
+    }
+
+    @keyframes geometry {
+      from { width: 50px; }
+      to { width: 100px; }
+    }
+
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: green;
+    }
+
+    .scroller {
+      width: 100px;
+      height: 100px;
+      overflow: scroll;
+      scroll-timeline-name: scroll_timeline;
+    }
+
+    .content {
+      block-size: 100%;
+      padding-block-end: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div id="display"></div>
+  <pre id="test"></pre>
+</body>
+<script type="application/javascript">
+"use strict";
+
+// Global state
+var gScroller = null;
+var gDiv = null;
+
+// Shortcut omta_is and friends by filling in the initial 'elem' argument
+// with gDiv.
+[ 'omta_is', 'omta_todo_is', 'omta_is_approx' ].forEach(function(fn) {
+  var origFn = window[fn];
+  window[fn] = function() {
+    var args = Array.from(arguments);
+    if (!(args[0] instanceof Element)) {
+      args.unshift(gDiv);
+    }
+    return origFn.apply(window, args);
+  };
+});
+
+// Shortcut new_div and done_div to update gDiv
+var originalNewDiv = window.new_div;
+window.new_div = function(style) {
+  [ gDiv ] = originalNewDiv(style);
+};
+var originalDoneDiv = window.done_div;
+window.done_div = function() {
+  originalDoneDiv();
+  gDiv = null;
+};
+
+// Bind the ok and todo to the opener, and close this window when we finish.
+var ok = opener.ok.bind(opener);
+var todo = opener.todo.bind(opener);
+function finish() {
+  var o = opener;
+  self.close();
+  o.SimpleTest.finish();
+}
+
+function new_scroller() {
+  gScroller = document.createElement('div');
+  gScroller.className = `scroller`;
+
+  let content = document.createElement('div');
+  content.className = 'content';
+
+  gScroller.appendChild(content);
+  document.getElementById("display").appendChild(gScroller);
+  return gScroller;
+}
+
+function done_scroller() {
+  gScroller.firstChild.remove();
+  gScroller.remove();
+  gScroller = null;
+}
+
+waitUntilApzStable().then(() => {
+  runOMTATest(function() {
+    var onAbort = function() {
+      if (gDiv) {
+        done_div();
+      }
+      if (gScroller) {
+        done_scroller();
+      }
+    };
+    runAllAsyncAnimTests(onAbort).then(finish);
+  }, finish);
+});
+
+//----------------------------------------------------------------------
+//
+// Test cases
+//
+//----------------------------------------------------------------------
+
+// The non-omta property with scroll-timeline together with an omta property
+// with document-timeline.
+addAsyncAnimTest(async function() {
+  new_scroller();
+  new_div("animation: geometry 10s scroll_timeline, always_fifty 1s infinite;");
+  await waitForPaintsFlushed();
+
+  // Note: width is not a OMTA property, so it must be running on the main
+  // thread.
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "transform animations should runs on compositor thread");
+
+  done_div();
+  done_scroller();
+});
+
+// transform property with scroll-driven animations.
+addAsyncAnimTest(async function() {
+  let scroller = new_scroller();
+  new_div("animation: transform_anim 1s linear scroll_timeline;");
+  await waitForPaintsFlushed();
+
+  scroller.scrollTop = 50;
+  await waitForPaintsFlushed();
+
+  omta_is_approx("transform", { tx: 100 }, 0.1, RunningOn.Compositor,
+                 "scroll transform animations should runs on compositor " +
+                 "thread");
+
+  done_div();
+  done_scroller();
+});
+
+
+// The scroll-driven animation with an underlying value and make it go from the
+// active phase to the before phase.
+addAsyncAnimTest(async function() {
+  let scroller = new_scroller();
+  new_div("animation: always_fifty 5s linear 5s scroll_timeline; " +
+          "transform: translate(25px);");
+  await waitForPaintsFlushed();
+
+  // NOTE: getOMTAStyle() can't detect the animation is running on the
+  // compositor during the delay phase.
+  omta_is_approx("transform", { tx: 25 }, 0.1, RunningOn.Either,
+                 "The scroll animation is in delay");
+
+  scroller.scrollTop = 75;
+  await waitForPaintsFlushed();
+
+  omta_is_approx("transform", { tx: 50 }, 0.1, RunningOn.Compositor,
+                 "scroll transform animations should runs on compositor " +
+                 "thread");
+
+  // Use setAsyncScrollOffset() to update apz (compositor thread only) to make
+  // sure Bug 1776077 is reproducible.
+  let utils = SpecialPowers.wrap(window).windowUtils;
+  utils.setAsyncScrollOffset(scroller, 0, -50);
+  utils.advanceTimeAndRefresh(16);
+  utils.restoreNormalRefresh();
+  await waitForPaints();
+
+  // NOTE: setAsyncScrollOffset() doesn't update main thread, so we check the
+  // OMTA style directly.
+  let compositorStr =
+    SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "transform");
+  ok(compositorStr === "matrix(1, 0, 0, 1, 25, 0)",
+     "scroll animations is in delay phase before calling main thread style " +
+     "udpate");
+
+  scroller.scrollTop = 25;
+  await waitForPaintsFlushed();
+
+  compositorStr = SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "transform");
+  ok(compositorStr === "",
+     "scroll animation in delay phase clears its OMTA style");
+  omta_is_approx("transform", { tx: 25 }, 0.1, RunningOn.Either,
+                 "The scroll animation is in delay");
+
+  done_div();
+  done_scroller();
+});
+
+// The scroll-driven animation without an underlying value and make it go from
+// the active phase to the before phase.
+addAsyncAnimTest(async function() {
+  let scroller = new_scroller();
+  new_div("animation: always_fifty 5s linear 5s scroll_timeline; ");
+  await waitForPaintsFlushed();
+
+  // NOTE: getOMTAStyle() can't detect the animation is running on the
+  // compositor during the delay phase.
+  omta_is_approx("transform", { tx: 0 }, 0.1, RunningOn.Either,
+                 "The scroll animation is in delay");
+
+  scroller.scrollTop = 75;
+  await waitForPaintsFlushed();
+
+  omta_is_approx("transform", { tx: 50 }, 0.1, RunningOn.Compositor,
+                 "scroll transform animations should runs on compositor " +
+                 "thread");
+
+  // Use setAsyncScrollOffset() to update apz (compositor thread only) to make
+  // sure Bug 1776077 is reproducible.
+  let utils = SpecialPowers.wrap(window).windowUtils;
+  utils.setAsyncScrollOffset(scroller, 0, -50);
+  utils.advanceTimeAndRefresh(16);
+  utils.restoreNormalRefresh();
+  await waitForPaints();
+
+  // NOTE: setAsyncScrollOffset() doesn't update main thread, so we check the
+  // OMTA style directly.
+  let compositorStr =
+    SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "transform");
+  ok(compositorStr === "matrix(1, 0, 0, 1, 0, 0)",
+     "scroll animations is in delay phase before calling main thread style " +
+     "udpate");
+
+  done_div();
+  done_scroller();
+});
+
+// The scroll-driven animation is in delay, together with other runing
+// animations.
+addAsyncAnimTest(async function() {
+  let scroller = new_scroller();
+  new_div("animation: transform_anim 10s linear -5s paused, " +
+          "           always_fifty 5s linear 5s scroll_timeline;");
+  await waitForPaintsFlushed();
+
+  omta_is_approx("transform", { tx: 100 }, 0.1, RunningOn.Compositor,
+                 "The scroll animation is in delay");
+
+  scroller.scrollTop = 75;
+  await waitForPaintsFlushed();
+
+  omta_is_approx("transform", { tx: 50 }, 0.1, RunningOn.Compositor,
+                 "scroll transform animations should runs on compositor " +
+                 "thread");
+
+  let utils = SpecialPowers.wrap(window).windowUtils;
+  utils.setAsyncScrollOffset(scroller, 0, -50);
+  utils.advanceTimeAndRefresh(16);
+  utils.restoreNormalRefresh();
+  await waitForPaints();
+
+  // NOTE: setAsyncScrollOffset() doesn't update main thread, so we check the
+  // OMTA style directly.
+  let compositorStr =
+    SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "transform");
+  ok(compositorStr === "matrix(1, 0, 0, 1, 100, 0)",
+     "scroll animations is in delay phase before calling main thread style " +
+     "udpate");
+
+  done_div();
+  done_scroller();
+});
+
+addAsyncAnimTest(async function() {
+  let iframe = document.createElement("iframe");
+  iframe.setAttribute("style", "width: 200px; height: 200px");
+  iframe.setAttribute("scrolling", "no");
+  iframe.srcdoc =
+    "<!DOCTYPE HTML>" +
+    "<html style='min-height: 100%; padding-bottom: 100px;'>" +
+    "<style>" +
+    "@keyframes anim { from, to { transform: translate(50px) } }" +
+    "</style>" +
+    "<div id='target_in_iframe' " +
+    "     style='width:50px; height:50px; background:green;" +
+    "            animation: anim 10s linear scroll(root);'>" +
+    "</div>" +
+    "</html>";
+
+  await new Promise(resolve => {
+    iframe.onload = resolve;
+    document.body.appendChild(iframe);
+  });
+
+  gDiv = iframe.contentDocument.getElementById("target_in_iframe");
+
+  const root = iframe.contentDocument.scrollingElement;
+  const maxScroll = root.scrollHeight - root.clientHeight;
+  root.scrollTop = 0.5 * maxScroll;
+  await waitForPaintsFlushed();
+
+  omta_is_approx("transform", { tx: 50 }, 0, RunningOn.MainThread,
+                 "scroll transform animations inside an iframe with " +
+                 "scrolling:no should run on the main thread");
+
+  gDiv = null;
+  iframe.remove();
+});
+
+// FIXME: Bug 1818346. Support OMTA for view-timeline.
+addAsyncAnimTest(async function() {
+  let scroller = document.createElement("div");
+  scroller.style.width = "100px";
+  scroller.style.height = "100px";
+  // Use hidden so we don't have scrollbar, to make sure the scrollport size
+  // is 100px x 100px, so view progress visibility range is 100px on block axis.
+  scroller.style.overflow = "hidden";
+
+  let content1 = document.createElement("div");
+  content1.style.height = "150px";
+  scroller.appendChild(content1);
+
+  let subject = document.createElement("div");
+  subject.style.width = "50px";
+  subject.style.height = "50px";
+  subject.style.viewTimelineName = "view_timeline";
+  scroller.appendChild(subject);
+
+  // Let |target| be the child of |subject|, so view-timeline-name property of
+  // |subject| is referenceable.
+  let target = document.createElement("div");
+  target.style.width = "10px";
+  target.style.height = "10px";
+  subject.appendChild(target);
+  gDiv = target;
+
+  let content2 = document.createElement("div");
+  content2.style.height = "150px";
+  scroller.appendChild(content2);
+
+  // So the DOM tree looks like this:
+  // <div class=scroller>  <!-- "scroller", height: 100px; -->
+  //   <div></div>         <!-- "",         height: 150px -->
+  //   <div></div>         <!-- "subject",  height: 50px; -->
+  //   <div></div>         <!-- "",         height: 150px; -->
+  // </div>
+  // The subject is in view when scroller.scrollTop is [50px, 200px].
+  document.getElementById("display").appendChild(scroller);
+  await waitForPaintsFlushed();
+
+  scroller.scrollTop = 0;
+  target.style.animation = "transform_anim 10s linear";
+  target.style.animationTimeline = "view_timeline";
+  await waitForPaintsFlushed();
+
+  omta_is_approx("transform", { tx: 0 }, 0.1, RunningOn.OnMainThread,
+                 "The scroll animation is out of view");
+
+  scroller.scrollTop = 50;
+  await waitForPaintsFlushed();
+
+  omta_is_approx("transform", { tx: 50 }, 0.1, RunningOn.OnMainThread,
+                 "The scroll animation is 0%");
+
+  scroller.scrollTop = 125;
+  await waitForPaintsFlushed();
+
+  omta_is_approx("transform", { tx: 100 }, 0.1, RunningOn.OnMainThread,
+                 "The scroll animation is 50%");
+
+  target.remove();
+  content2.remove();
+  subject.remove();
+  content1.remove();
+  scroller.remove();
+  gDiv = null;
+});
+
+</script>
+</html>
diff --git a/layout/style/test/file_animations_omta_scroll_rtl.html b/layout/style/test/file_animations_omta_scroll_rtl.html
new file mode 100644
index 0000000000..771cf6c38f
--- /dev/null
+++ b/layout/style/test/file_animations_omta_scroll_rtl.html
@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+  <title>Test for css-animations running on the compositor thread with
+    scroll-timeline and right to left writing mode</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script src="/tests/gfx/layers/apz/test/mochitest/apz_test_utils.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <style type="text/css">
+    @keyframes transform_anim {
+      from { transform: translateX(-100px) }
+      to { transform: translateX(-200px) }
+    }
+
+    html {
+      min-width: 100%;
+      padding-left: 100px;
+      direction: rtl;
+    }
+
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: green;
+    }
+  </style>
+</head>
+<body>
+  <div id="display"></div>
+  <pre id="test"></pre>
+</body>
+<script type="application/javascript">
+"use strict";
+
+// Global state
+var gDiv = null;
+
+// Shortcut omta_is and friends by filling in the initial 'elem' argument
+// with gDiv.
+[ 'omta_is', 'omta_todo_is', 'omta_is_approx' ].forEach(function(fn) {
+  var origFn = window[fn];
+  window[fn] = function() {
+    var args = Array.from(arguments);
+    if (!(args[0] instanceof Element)) {
+      args.unshift(gDiv);
+    }
+    return origFn.apply(window, args);
+  };
+});
+
+// Shortcut new_div and done_div to update gDiv
+var originalNewDiv = window.new_div;
+window.new_div = function(style) {
+  [ gDiv ] = originalNewDiv(style);
+};
+var originalDoneDiv = window.done_div;
+window.done_div = function() {
+  originalDoneDiv();
+  gDiv = null;
+};
+
+// Bind the ok and todo to the opener, and close this window when we finish.
+var ok = opener.ok.bind(opener);
+var todo = opener.todo.bind(opener);
+function finish() {
+  var o = opener;
+  self.close();
+  o.SimpleTest.finish();
+}
+
+waitUntilApzStable().then(() => {
+  runOMTATest(function() {
+    var onAbort = function() {
+      if (gDiv) {
+        done_div();
+      }
+    };
+    runAllAsyncAnimTests(onAbort).then(finish);
+  }, finish);
+});
+
+//----------------------------------------------------------------------
+//
+// Test cases
+//
+//----------------------------------------------------------------------
+
+// transform property with scroll-driven animations. The writing mode is from
+// right to left, so we have to use the negative scroll offset.
+addAsyncAnimTest(async function() {
+  new_div("animation: transform_anim 1s linear scroll(horizontal root);");
+  await waitForPaintsFlushed();
+
+  const root = document.scrollingElement;
+  const maxScroll = root.scrollWidth - root.clientWidth;
+  root.scrollLeft = -0.5 * maxScroll;
+  await waitForPaintsFlushed();
+
+  omta_is_approx("transform", { tx: -150 }, 0.1, RunningOn.Compositor,
+                 "scroll transform animations should runs on compositor " +
+                 "thread");
+
+  root.scrollLeft = 0;
+  done_div();
+});
+
+</script>
+</html>
diff --git a/layout/style/test/file_animations_with_disabled_properties.html b/layout/style/test/file_animations_with_disabled_properties.html
new file mode 100644
index 0000000000..5b206df693
--- /dev/null
+++ b/layout/style/test/file_animations_with_disabled_properties.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<head>
+  <meta charset=utf-8>
+  <style>
+  @keyframes enabled-and-disabled {
+    from {
+      left: 0px;
+      overflow-clip-box: padding-box;
+    }
+    to {
+      left: 100px;
+      overflow-clip-box: padding-box;
+    }
+  }
+  </style>
+  <script>
+    var is = opener.is.bind(opener);
+    var ok = opener.ok.bind(opener);
+    function finish() {
+      var o = opener;
+      self.close();
+      o.SimpleTest.finish();
+    }
+  </script>
+</head>
+<body>
+<div id="display"></div>
+<script>
+'use strict';
+
+var display = document.getElementById('display');
+display.style.animation = 'enabled-and-disabled 0.01s';
+
+var animation = display.getAnimations()[0];
+is(animation.effect.getKeyframes().length, 2,
+   'Got two frames on the generated animation');
+
+ok(animation.effect.getKeyframes()[0].hasOwnProperty('left'),
+   'Enabled property is set on initial keyframe');
+ok(!animation.effect.getKeyframes()[0].hasOwnProperty('overflowClipBox'),
+   'Disabled property is not set on initial keyframe');
+
+ok(animation.effect.getKeyframes()[1].hasOwnProperty('left'),
+   'Enabled property is set on final keyframe');
+ok(!animation.effect.getKeyframes()[1].hasOwnProperty('overflowClipBox'),
+   'Disabled property is not set on final keyframe');
+
+finish();
+</script>
+</body>
diff --git a/layout/style/test/file_bug1055933_circle-xxl.png b/layout/style/test/file_bug1055933_circle-xxl.png
new file mode 100644
index 0000000000..3223a56900
--- /dev/null
+++ b/layout/style/test/file_bug1055933_circle-xxl.png
diff --git a/layout/style/test/file_bug1089417_iframe.html b/layout/style/test/file_bug1089417_iframe.html
new file mode 100644
index 0000000000..95208dbc56
--- /dev/null
+++ b/layout/style/test/file_bug1089417_iframe.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Bug 1089417</title>
+  <style>
+    html { background: red }
+    @media (min-height: 300px) { html { background: green } }
+  </style>
+  <style id="s">/* empty */</style>
+  <script>
+    document.getElementById("s").disabled = true;
+  </script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/layout/style/test/file_bug1375944.html b/layout/style/test/file_bug1375944.html
new file mode 100644
index 0000000000..809ea4205b
--- /dev/null
+++ b/layout/style/test/file_bug1375944.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+@font-face {
+  font-family: Ahem;
+  src: url(Ahem.ttf);
+}
+#test {
+  display: inline-block;
+  font: 64px/1 Ahem;
+  margin-right: 1ex;
+}
+</style>
+<div id="test">X</div>
diff --git a/layout/style/test/file_bug1381233.html b/layout/style/test/file_bug1381233.html
new file mode 100644
index 0000000000..b82d309128
--- /dev/null
+++ b/layout/style/test/file_bug1381233.html
@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="somestylesheet">
+<table><td>
+<embed src="whatever" type="application/x-shockwave-flash"></embed>
+</td></table>
diff --git a/layout/style/test/file_bug1443344.css b/layout/style/test/file_bug1443344.css
new file mode 100644
index 0000000000..74e81d1823
--- /dev/null
+++ b/layout/style/test/file_bug1443344.css
@@ -0,0 +1 @@
+#importTarget { color: red ! important }
diff --git a/layout/style/test/file_bug645998-1.css b/layout/style/test/file_bug645998-1.css
new file mode 100644
index 0000000000..328e6ed797
--- /dev/null
+++ b/layout/style/test/file_bug645998-1.css
@@ -0,0 +1 @@
+@import url("file_bug645998-2.css");
diff --git a/layout/style/test/file_bug645998-2.css b/layout/style/test/file_bug645998-2.css
new file mode 100644
index 0000000000..2d5edbe217
--- /dev/null
+++ b/layout/style/test/file_bug645998-2.css
@@ -0,0 +1 @@
+@import url("file_bug645998-1.css");
diff --git a/layout/style/test/file_bug829816.css b/layout/style/test/file_bug829816.css
new file mode 100644
index 0000000000..8f12ba6f56
--- /dev/null
+++ b/layout/style/test/file_bug829816.css
diff --git a/layout/style/test/file_computed_style_bfcache_display_none.html b/layout/style/test/file_computed_style_bfcache_display_none.html
new file mode 100644
index 0000000000..d366aa68ee
--- /dev/null
+++ b/layout/style/test/file_computed_style_bfcache_display_none.html
@@ -0,0 +1,6 @@
+<div id=div style="display:none">Page 1</div>
+<script>
+  window.onload = function() {
+    opener.postMessage("loaded", "*");
+  }
+</script>
diff --git a/layout/style/test/file_computed_style_bfcache_display_none2.html b/layout/style/test/file_computed_style_bfcache_display_none2.html
new file mode 100644
index 0000000000..c337ca7214
--- /dev/null
+++ b/layout/style/test/file_computed_style_bfcache_display_none2.html
@@ -0,0 +1,6 @@
+<div>Page 2</div>
+<script>
+  window.onload = function() {
+    opener.postMessage("loaded", "*");
+  }
+</script>;
diff --git a/layout/style/test/file_font_loading_api_vframe.html b/layout/style/test/file_font_loading_api_vframe.html
new file mode 100644
index 0000000000..51dbbbee91
--- /dev/null
+++ b/layout/style/test/file_font_loading_api_vframe.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<style></style>
diff --git a/layout/style/test/file_shared_sheet_caching.css b/layout/style/test/file_shared_sheet_caching.css
new file mode 100644
index 0000000000..2ceb1b7e0b
--- /dev/null
+++ b/layout/style/test/file_shared_sheet_caching.css
@@ -0,0 +1,3 @@
+:root {
+  background-color: lime;
+}
diff --git a/layout/style/test/file_shared_sheet_caching.html b/layout/style/test/file_shared_sheet_caching.html
new file mode 100644
index 0000000000..1eb9a8ce31
--- /dev/null
+++ b/layout/style/test/file_shared_sheet_caching.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="file_shared_sheet_caching.css">
+<script>
+onload = function() {
+  if (parent != window) {
+    parent.childWindowLoaded(window);
+  } else {
+    window.opener.childWindowLoaded(window);
+  }
+}
+</script>
diff --git a/layout/style/test/file_specified_value_serialization_individual_transforms.html b/layout/style/test/file_specified_value_serialization_individual_transforms.html
new file mode 100644
index 0000000000..9dcf85f955
--- /dev/null
+++ b/layout/style/test/file_specified_value_serialization_individual_transforms.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test for Bug 1207734 (individual transforms)</title>
+<!--
+  FIXME: This is only here in a separate file since it needs the
+  layout.css.individual-transform.enabled pref to be set when it runs and the
+  pref= annotation in mochitest.ini doesn't work on Android (bug 1393326).
+  Once we turn on that pref by default or fix bug 1393326 we can move this back
+  into test_specified_value_serialization.html.
+-->
+<script>
+const is = opener.is.bind(opener);
+function finish() {
+  const o = opener;
+  self.close();
+  o.SimpleTest.finish();
+}
+
+function runTest() {
+  // Test for rotate property serialization.
+  [
+    [" 90deg ", "90deg"],
+    [" 100grad ", "100grad"],
+    [" 100gRaD ", "100grad"],
+    [" 0.25turn  ", "0.25turn"],
+    [" 0.25tUrN  ", "0.25turn"],
+    [" 1.57RaD  ", "1.57rad"],
+  ].forEach(function(arr) {
+    document.documentElement.style.rotate = arr[0];
+    is(document.documentElement.style.rotate, arr[1],
+      "bug-1207734: incorrect rotate serialization");
+  });
+  document.documentElement.style.rotate = "";
+
+  // Test for translate property serialization.
+  [
+    [" 50% 5px 6px ", "50% 5px 6px"],
+    [" 50% 10px 100px ", "50% 10px 100px"],
+    [" 4px 5px ", "4px 5px"],
+    [" 10% 10% 99px  ", "10% 10% 99px"],
+    ["   50px    ", "50px"],
+  ].forEach(function(arr) {
+    document.documentElement.style.translate = arr[0];
+    is(document.documentElement.style.translate, arr[1],
+      "bug-1207734: incorrect translate serialization");
+  });
+  document.documentElement.style.translate = "";
+
+  // Test for scale property serialization.
+  [
+    [" 10  ", "10"],
+    [" 10 20.5 ", "10 20.5"],
+    [" 10 20  30 ", "10 20 30"],
+  ].forEach(function(arr) {
+    document.documentElement.style.scale = arr[0];
+    is(document.documentElement.style.scale, arr[1],
+      "bug-1207734: incorrect scale serialization");
+  });
+
+  document.documentElement.style.scale = "";
+}
+
+runTest();
+finish();
+</script>
diff --git a/layout/style/test/flexbox_layout_testcases.js b/layout/style/test/flexbox_layout_testcases.js
new file mode 100644
index 0000000000..c8990877ab
--- /dev/null
+++ b/layout/style/test/flexbox_layout_testcases.js
@@ -0,0 +1,1317 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 sw=2 sts=2 et: */
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * For the purposes of this test, flex items are specified as a hash with a
+ * hash-entry for each CSS property that is to be set.  In these per-property
+ * entries, the key is the property-name, and the value can be either of the
+ * following:
+ *  (a) the property's specified value (which indicates that we don't need to
+ *      bother checking the computed value of this particular property)
+ *  ...OR...
+ *  (b) an array with 2-3 entries...
+ *        [specifiedValue, expectedComputedValue (, epsilon) ]
+ *      ...which indicates that the property's computed value should be
+ *      checked.  The array's first entry (for the specified value) may be
+ *      null; this means that no value should be explicitly specified for this
+ *      property. The second entry is the property's expected computed
+ *      value. The third (optional) entry is an epsilon value, which allows for
+ *      fuzzy equality when testing the computed value.
+ *
+ * To allow these testcases to be re-used in both horizontal and vertical
+ * flex containers, we specify "width"/"min-width"/etc. using the aliases
+ * "_main-size", "_min-main-size", etc.  The test code can map these
+ * placeholder names to their corresponding property-names using the maps
+ * defined below -- gRowPropertyMapping, gColumnPropertyMapping, etc.
+ *
+ * If the testcase needs to customize its flex container at all (e.g. by
+ * specifying a custom container-size), it can do so by including a hash
+ * called "container_properties", with propertyName:propertyValue mappings.
+ * (This hash can use aliased property-names like "_main-size" as well.)
+ */
+
+// The standard main-size we'll use for our flex container when setting up
+// the testcases defined below:
+var gDefaultFlexContainerSize = "200px";
+
+// Left-to-right versions of placeholder property-names used in
+// testcases below:
+var gRowPropertyMapping = {
+  "_main-size": "width",
+  "_min-main-size": "min-width",
+  "_max-main-size": "max-width",
+  "_border-main-start-width": "border-left-width",
+  "_border-main-end-width": "border-right-width",
+  "_padding-main-start": "padding-left",
+  "_padding-main-end": "padding-right",
+  "_margin-main-start": "margin-left",
+  "_margin-main-end": "margin-right",
+};
+
+// Right-to-left versions of placeholder property-names used in
+// testcases below:
+var gRowReversePropertyMapping = {
+  "_main-size": "width",
+  "_min-main-size": "min-width",
+  "_max-main-size": "max-width",
+  "_border-main-start-width": "border-right-width",
+  "_border-main-end-width": "border-left-width",
+  "_padding-main-start": "padding-right",
+  "_padding-main-end": "padding-left",
+  "_margin-main-start": "margin-right",
+  "_margin-main-end": "margin-left",
+};
+
+// Top-to-bottom versions of placeholder property-names used in
+// testcases below:
+var gColumnPropertyMapping = {
+  "_main-size": "height",
+  "_min-main-size": "min-height",
+  "_max-main-size": "max-height",
+  "_border-main-start-width": "border-top-width",
+  "_border-main-end-width": "border-bottom-width",
+  "_padding-main-start": "padding-top",
+  "_padding-main-end": "padding-bottom",
+  "_margin-main-start": "margin-top",
+  "_margin-main-end": "margin-bottom",
+};
+
+// Bottom-to-top versions of placeholder property-names used in
+// testcases below:
+var gColumnReversePropertyMapping = {
+  "_main-size": "height",
+  "_min-main-size": "min-height",
+  "_max-main-size": "max-height",
+  "_border-main-start-width": "border-bottom-width",
+  "_border-main-end-width": "border-top-width",
+  "_padding-main-start": "padding-bottom",
+  "_padding-main-end": "padding-top",
+  "_margin-main-start": "margin-bottom",
+  "_margin-main-end": "margin-top",
+};
+
+// The list of actual testcase definitions:
+var gFlexboxTestcases = [
+  // No flex properties specified --> should just use 'width' for sizing
+  {
+    items: [
+      { "_main-size": ["40px", "40px"] },
+      { "_main-size": ["65px", "65px"] },
+    ],
+  },
+  // flex-basis is specified:
+  {
+    items: [
+      { "flex-basis": "50px", "_main-size": [null, "50px"] },
+      {
+        "flex-basis": "20px",
+        "_main-size": [null, "20px"],
+      },
+    ],
+  },
+  // flex-basis is *large* -- sum of flex-basis values is > flex container size:
+  // (w/ 0 flex-shrink so we don't shrink):
+  {
+    items: [
+      {
+        flex: "0 0 150px",
+        "_main-size": [null, "150px"],
+      },
+      {
+        flex: "0 0 90px",
+        "_main-size": [null, "90px"],
+      },
+    ],
+  },
+  // flex-basis is *large* -- each flex-basis value is > flex container size:
+  // (w/ 0 flex-shrink so we don't shrink):
+  {
+    items: [
+      {
+        flex: "0 0 250px",
+        "_main-size": [null, "250px"],
+      },
+      {
+        flex: "0 0 400px",
+        "_main-size": [null, "400px"],
+      },
+    ],
+  },
+  // flex-basis has percentage value:
+  {
+    items: [
+      {
+        "flex-basis": "30%",
+        "_main-size": [null, "60px"],
+      },
+      {
+        "flex-basis": "45%",
+        "_main-size": [null, "90px"],
+      },
+    ],
+  },
+  // flex-basis has calc(percentage) value:
+  {
+    items: [
+      {
+        "flex-basis": "calc(20%)",
+        "_main-size": [null, "40px"],
+      },
+      {
+        "flex-basis": "calc(80%)",
+        "_main-size": [null, "160px"],
+      },
+    ],
+  },
+  // flex-basis has calc(percentage +/- length) value:
+  {
+    items: [
+      {
+        "flex-basis": "calc(10px + 20%)",
+        "_main-size": [null, "50px"],
+      },
+      {
+        "flex-basis": "calc(60% - 1px)",
+        "_main-size": [null, "119px"],
+      },
+    ],
+  },
+  // flex-grow is specified:
+  {
+    items: [
+      {
+        flex: "1",
+        "_main-size": [null, "60px"],
+      },
+      {
+        flex: "2",
+        "_main-size": [null, "120px"],
+      },
+      {
+        flex: "0 20px",
+        "_main-size": [null, "20px"],
+      },
+    ],
+  },
+  // Same ratio as prev. testcase; making sure we handle float inaccuracy
+  {
+    items: [
+      {
+        flex: "100000",
+        "_main-size": [null, "60px"],
+      },
+      {
+        flex: "200000",
+        "_main-size": [null, "120px"],
+      },
+      {
+        flex: "0.000001 20px",
+        "_main-size": [null, "20px"],
+      },
+    ],
+  },
+  // Same ratio as prev. testcase, but with items cycled and w/
+  // "flex: none" & explicit size instead of "flex: 0 20px"
+  {
+    items: [
+      {
+        flex: "none",
+        "_main-size": ["20px", "20px"],
+      },
+      {
+        flex: "1",
+        "_main-size": [null, "60px"],
+      },
+      {
+        flex: "2",
+        "_main-size": [null, "120px"],
+      },
+    ],
+  },
+
+  // ...and now with flex-grow:[huge] to be sure we handle infinite float values
+  // gracefully.
+  {
+    items: [
+      {
+        flex: "9999999999999999999999999999999999999999999999999999999",
+        "_main-size": [null, "200px"],
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        flex: "9999999999999999999999999999999999999999999999999999999",
+        "_main-size": [null, "50px"],
+      },
+      {
+        flex: "9999999999999999999999999999999999999999999999999999999",
+        "_main-size": [null, "50px"],
+      },
+      {
+        flex: "9999999999999999999999999999999999999999999999999999999",
+        "_main-size": [null, "50px"],
+      },
+      {
+        flex: "9999999999999999999999999999999999999999999999999999999",
+        "_main-size": [null, "50px"],
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        flex: "99999999999999999999999999999999999",
+        "_main-size": [null, "50px"],
+      },
+      {
+        flex: "99999999999999999999999999999999999",
+        "_main-size": [null, "50px"],
+      },
+      {
+        flex: "99999999999999999999999999999999999",
+        "_main-size": [null, "50px"],
+      },
+      {
+        flex: "99999999999999999999999999999999999",
+        "_main-size": [null, "50px"],
+      },
+    ],
+  },
+
+  // And now, some testcases to check that we handle float accumulation error
+  // gracefully.
+
+  // First, a testcase with just a custom-sized huge container, to be sure we'll
+  // be able to handle content on that scale, in the subsequent more-complex
+  // testcases:
+  {
+    container_properties: {
+      "_main-size": "9000000px",
+    },
+    items: [
+      {
+        flex: "1",
+        "_main-size": [null, "9000000px"],
+      },
+    ],
+  },
+  // ...and now with two flex items dividing up that container's huge size:
+  {
+    container_properties: {
+      "_main-size": "9000000px",
+    },
+    items: [
+      {
+        flex: "2",
+        "_main-size": [null, "6000000px"],
+      },
+      {
+        flex: "1",
+        "_main-size": [null, "3000000px"],
+      },
+    ],
+  },
+
+  // OK, now to actually test accumulation error. Below, we have six flex items
+  // splitting up the container's size, with huge differences between flex
+  // weights.  For simplicity, I've set up the weights so that they sum exactly
+  // to the container's size in px. So 1 unit of flex *should* get you 1px.
+  //
+  // NOTE: The expected computed "_main-size" values for the flex items below
+  // appear to add up to more than their container's size, which would suggest
+  // that they overflow their container unnecessarily. But they don't actually
+  // overflow -- this discrepancy is simply because Gecko's code for reporting
+  // computed-sizes rounds to 6 significant figures (in particular, the method
+  // (nsTSubstring_CharT::AppendFloat() does this).  Internally, in app-units,
+  // the child frames' main-sizes add up exactly to the container's main-size,
+  // as you'd hope & expect.
+  {
+    container_properties: {
+      "_main-size": "9000000px",
+    },
+    items: [
+      {
+        flex: "3000000",
+        "_main-size": [null, "3000000px"],
+      },
+      {
+        flex: "1",
+        "_main-size": [null, "1px"],
+      },
+      {
+        flex: "1",
+        "_main-size": [null, "1px"],
+      },
+      {
+        flex: "2999999",
+        // NOTE: Expected value is off slightly, from float error when
+        // resolving flexible lengths & when generating computed value string:
+        "_main-size": [null, "3000000px"],
+      },
+      {
+        flex: "2999998",
+        // NOTE: Expected value is off slightly, from float error when
+        // resolving flexible lengths & when generating computed value string:
+        "_main-size": [null, "3000000px"],
+      },
+      {
+        flex: "1",
+        "_main-size": [null, "1px", 0.2],
+      },
+    ],
+  },
+  // Same flex items as previous testcase, but now reordered such that the items
+  // with tiny flex weights are all listed last:
+  {
+    container_properties: {
+      "_main-size": "9000000px",
+    },
+    items: [
+      {
+        flex: "3000000",
+        "_main-size": [null, "3000000px"],
+      },
+      {
+        flex: "2999999",
+        // NOTE: Expected value is off slightly, from float error when
+        // resolving flexible lengths & when generating computed value string:
+        "_main-size": [null, "3000000px"],
+      },
+      {
+        flex: "2999998",
+        // NOTE: Expected value is off slightly, from float error when
+        // resolving flexible lengths & when generating computed value string:
+        "_main-size": [null, "3000000px"],
+      },
+      {
+        flex: "1",
+        "_main-size": [null, "1px", 0.2],
+      },
+      {
+        flex: "1",
+        "_main-size": [null, "1px", 0.2],
+      },
+      {
+        flex: "1",
+        "_main-size": [null, "1px", 0.2],
+      },
+    ],
+  },
+  // Same flex items as previous testcase, but now reordered such that the items
+  // with tiny flex weights are all listed first:
+  {
+    container_properties: {
+      "_main-size": "9000000px",
+    },
+    items: [
+      {
+        flex: "1",
+        // NOTE: Expected value is off slightly, from float error when
+        // resolving flexible lengths:
+        "_main-size": [null, "1px", 0.2],
+      },
+      {
+        flex: "1",
+        // NOTE: Expected value is off slightly, from float error when
+        // resolving flexible lengths:
+        "_main-size": [null, "1px", 0.2],
+      },
+      {
+        flex: "1",
+        // NOTE: Expected value is off slightly, from float error when
+        // resolving flexible lengths:
+        "_main-size": [null, "1px", 0.2],
+      },
+      {
+        flex: "3000000",
+        "_main-size": [null, "3000000px"],
+      },
+      {
+        flex: "2999999",
+        // NOTE: Expected value is off slightly, from float error when
+        // resolving flexible lengths & when generating computed value string:
+        "_main-size": [null, "3000000px"],
+      },
+      {
+        flex: "2999998",
+        // NOTE: Expected value is off slightly, from float error when
+        // resolving flexible lengths & when generating computed value string:
+        "_main-size": [null, "3000000px"],
+      },
+    ],
+  },
+
+  // Trying "flex: auto" (== "1 1 auto") w/ a mix of flex-grow/flex-basis values
+  {
+    items: [
+      {
+        flex: "auto",
+        "_main-size": [null, "45px"],
+      },
+      {
+        flex: "2",
+        "_main-size": [null, "90px"],
+      },
+      {
+        flex: "20px 1 0",
+        "_main-size": [null, "65px"],
+      },
+    ],
+  },
+  // Same as previous, but with items cycled & different syntax
+  {
+    items: [
+      {
+        flex: "20px",
+        "_main-size": [null, "65px"],
+      },
+      {
+        flex: "1",
+        "_main-size": [null, "45px"],
+      },
+      {
+        flex: "2",
+        "_main-size": [null, "90px"],
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        flex: "2",
+        "_main-size": [null, "100px"],
+        border: "0px dashed",
+        "_border-main-start-width": ["5px", "5px"],
+        "_border-main-end-width": ["15px", "15px"],
+        "_margin-main-start": ["22px", "22px"],
+        "_margin-main-end": ["8px", "8px"],
+      },
+      {
+        flex: "1",
+        "_main-size": [null, "50px"],
+        "_margin-main-start": ["auto", "0px"],
+        "_padding-main-end": ["auto", "0px"],
+      },
+    ],
+  },
+  // Test negative flexibility:
+
+  // Basic testcase: just 1 item (relying on initial "flex-shrink: 1") --
+  // should shrink to container size.
+  {
+    items: [{ "_main-size": ["400px", "200px"] }],
+  },
+  // ...and now with a "flex" specification and a different flex-shrink value:
+  {
+    items: [
+      {
+        flex: "4 2 250px",
+        "_main-size": [null, "200px"],
+      },
+    ],
+  },
+  // ...and now with multiple items, which all shrink proportionally (by 50%)
+  // to fit to the container, since they have the same (initial) flex-shrink val
+  {
+    items: [
+      { "_main-size": ["80px", "40px"] },
+      { "_main-size": ["40px", "20px"] },
+      { "_main-size": ["30px", "15px"] },
+      { "_main-size": ["250px", "125px"] },
+    ],
+  },
+  // ...and now with positive flexibility specified. (should have no effect, so
+  // everything still shrinks by the same proportion, since the flex-shrink
+  // values are all the same).
+  {
+    items: [
+      {
+        flex: "4 3 100px",
+        "_main-size": [null, "80px"],
+      },
+      {
+        flex: "5 3 50px",
+        "_main-size": [null, "40px"],
+      },
+      {
+        flex: "0 3 100px",
+        "_main-size": [null, "80px"],
+      },
+    ],
+  },
+  // ...and now with *different* flex-shrink values:
+  {
+    items: [
+      {
+        flex: "4 2 50px",
+        "_main-size": [null, "30px"],
+      },
+      {
+        flex: "5 3 50px",
+        "_main-size": [null, "20px"],
+      },
+      {
+        flex: "0 0 150px",
+        "_main-size": [null, "150px"],
+      },
+    ],
+  },
+  // Same ratio as prev. testcase; making sure we handle float inaccuracy
+  {
+    items: [
+      {
+        flex: "4 20000000 50px",
+        "_main-size": [null, "30px"],
+      },
+      {
+        flex: "5 30000000 50px",
+        "_main-size": [null, "20px"],
+      },
+      {
+        flex: "0 0.0000001 150px",
+        "_main-size": [null, "150px"],
+      },
+    ],
+  },
+  // Another "different flex-shrink values" testcase:
+  {
+    items: [
+      {
+        flex: "4 2 115px",
+        "_main-size": [null, "69px"],
+      },
+      {
+        flex: "5 1 150px",
+        "_main-size": [null, "120px"],
+      },
+      {
+        flex: "1 4 30px",
+        "_main-size": [null, "6px"],
+      },
+      {
+        flex: "1 0 5px",
+        "_main-size": [null, "5px"],
+      },
+    ],
+  },
+
+  // ...and now with min-size (clamping the effects of flex-shrink on one item):
+  {
+    items: [
+      {
+        flex: "4 5 75px",
+        "_min-main-size": "50px",
+        "_main-size": [null, "50px"],
+      },
+      {
+        flex: "5 5 100px",
+        "_main-size": [null, "62.5px"],
+      },
+      {
+        flex: "0 4 125px",
+        "_main-size": [null, "87.5px"],
+      },
+    ],
+  },
+
+  // Test a min-size that's much larger than initial preferred size, but small
+  // enough that our flexed size pushes us over it:
+  {
+    items: [
+      {
+        flex: "auto",
+        "_min-main-size": "110px",
+        "_main-size": ["50px", "125px"],
+      },
+      {
+        flex: "auto",
+        "_main-size": [null, "75px"],
+      },
+    ],
+  },
+
+  // Test a min-size that's much larger than initial preferred size, and is
+  // even larger than our positively-flexed size, so that we have to increase it
+  // (as a 'min violation') after we've flexed.
+  {
+    items: [
+      {
+        flex: "auto",
+        "_min-main-size": "150px",
+        "_main-size": ["50px", "150px"],
+      },
+      {
+        flex: "auto",
+        "_main-size": [null, "50px"],
+      },
+    ],
+  },
+
+  // Test min-size on multiple items simultaneously:
+  {
+    items: [
+      {
+        flex: "auto",
+        "_min-main-size": "20px",
+        "_main-size": [null, "20px"],
+      },
+      {
+        flex: "9 auto",
+        "_min-main-size": "150px",
+        "_main-size": ["50px", "180px"],
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        flex: "1 1 0px",
+        "_min-main-size": "90px",
+        "_main-size": [null, "90px"],
+      },
+      {
+        flex: "1 1 0px",
+        "_min-main-size": "80px",
+        "_main-size": [null, "80px"],
+      },
+      {
+        flex: "1 1 40px",
+        "_main-size": [null, "30px"],
+      },
+    ],
+  },
+
+  // Test a case where _min-main-size will be violated on different items in
+  // successive iterations of the "resolve the flexible lengths" loop
+  {
+    items: [
+      {
+        flex: "1 2 100px",
+        "_min-main-size": "90px",
+        "_main-size": [null, "90px"],
+      },
+      {
+        flex: "1 1 100px",
+        "_min-main-size": "70px",
+        "_main-size": [null, "70px"],
+      },
+      {
+        flex: "1 1 100px",
+        "_main-size": [null, "40px"],
+      },
+    ],
+  },
+
+  // Test some cases that have a min-size violation on one item and a
+  // max-size violation on another:
+
+  // Here, both items initially grow to 100px. That violates both
+  // items' sizing constraints (it's smaller than the min-size and larger than
+  // the max-size), so we clamp both of them and sum the clamping-differences:
+  //
+  //   (130px - 100px) + (50px - 100px) = (30px) + (-50px) = -20px
+  //
+  // This sum is negative, so (per spec) we freeze the item that had its
+  // max-size violated (the second one) and restart the algorithm.  This time,
+  // all the available space (200px - 50px = 150px) goes to the not-yet-frozen
+  // first item, and that puts it above its min-size, so all is well.
+  {
+    items: [
+      {
+        flex: "auto",
+        "_min-main-size": "130px",
+        "_main-size": [null, "150px"],
+      },
+      {
+        flex: "auto",
+        "_max-main-size": "50px",
+        "_main-size": [null, "50px"],
+      },
+    ],
+  },
+
+  // As above, both items initially grow to 100px, and that violates both items'
+  // constraints. However, now the sum of the clamping differences is:
+  //
+  //   (130px - 100px) + (80px - 100px) = (30px) + (-20px) = 10px
+  //
+  // This sum is positive, so (per spec) we freeze the item that had its
+  // min-size violated (the first one) and restart the algorithm. This time,
+  // all the available space (200px - 130px = 70px) goes to the not-yet-frozen
+  // second item, and that puts it below its max-size, so all is well.
+  {
+    items: [
+      {
+        flex: "auto",
+        "_min-main-size": "130px",
+        "_main-size": [null, "130px"],
+      },
+      {
+        flex: "auto",
+        "_max-main-size": "80px",
+        "_main-size": [null, "70px"],
+      },
+    ],
+  },
+
+  // As above, both items initially grow to 100px, and that violates both items'
+  // constraints. So we clamp both items and sum the clamping differences to
+  // see what to do next.  The sum is:
+  //
+  //   (80px - 100px) + (120px - 100px) = (-20px) + (20px) = 0px
+  //
+  // Per spec, if the sum is 0, we're done -- we leave both items at their
+  // clamped sizes.
+  {
+    items: [
+      {
+        flex: "auto",
+        "_max-main-size": "80px",
+        "_main-size": [null, "80px"],
+      },
+      {
+        flex: "auto",
+        "_min-main-size": "120px",
+        "_main-size": [null, "120px"],
+      },
+    ],
+  },
+
+  // Test cases where flex-grow sums to less than 1:
+  // ===============================================
+  // This makes us treat the flexibilities like "fraction of free space"
+  // instead of weights, so that e.g. a single item with "flex-grow: 0.1"
+  // will only get 10% of the free space instead of all of the free space.
+
+  // Basic cases where flex-grow sum is less than 1:
+  {
+    items: [
+      {
+        flex: "0.1 100px",
+        "_main-size": [null, "110px"], // +10% of free space
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        flex: "0.8 0px",
+        "_main-size": [null, "160px"], // +80% of free space
+      },
+    ],
+  },
+
+  // ... and now with two flex items:
+  {
+    items: [
+      {
+        flex: "0.4 70px",
+        "_main-size": [null, "110px"], // +40% of free space
+      },
+      {
+        flex: "0.2 30px",
+        "_main-size": [null, "50px"], // +20% of free space
+      },
+    ],
+  },
+
+  // ...and now with max-size modifying how much free space one item can take:
+  {
+    items: [
+      {
+        flex: "0.4 70px",
+        "_main-size": [null, "110px"], // +40% of free space
+      },
+      {
+        flex: "0.2 30px",
+        "_max-main-size": "35px",
+        "_main-size": [null, "35px"], // +20% free space, then clamped
+      },
+    ],
+  },
+  // ...and now with a max-size smaller than our flex-basis:
+  // (This makes us freeze the second item right away, before we compute
+  // the initial free space.)
+  {
+    items: [
+      {
+        flex: "0.4 70px",
+        "_main-size": [null, "118px"], // +40% of 200px-70px-10px
+      },
+      {
+        flex: "0.2 30px",
+        "_max-main-size": "10px",
+        "_main-size": [null, "10px"], // immediately frozen
+      },
+    ],
+  },
+  // ...and now with a max-size and a huge flex-basis, such that we initially
+  // have negative free space, which makes the "% of [original] free space"
+  // calculations a bit more subtle. We set the "original free space" after
+  // we've clamped the second item (the first time the free space is positive).
+  {
+    items: [
+      {
+        flex: "0.4 70px",
+        "_main-size": [null, "118px"], // +40% of free space _after freezing
+        // the other item_
+      },
+      {
+        flex: "0.2 150px",
+        "_max-main-size": "10px",
+        "_main-size": [null, "10px"], // clamped immediately
+      },
+    ],
+  },
+
+  // Now with min-size modifying how much free space our items take:
+  {
+    items: [
+      {
+        flex: "0.4 70px",
+        "_main-size": [null, "110px"], // +40% of free space
+      },
+      {
+        flex: "0.2 30px",
+        "_min-main-size": "70px",
+        "_main-size": [null, "70px"], // +20% free space, then clamped
+      },
+    ],
+  },
+
+  // ...and now with a large enough min-size that it prevents the other flex
+  // item from taking its full desired portion of the original free space:
+  {
+    items: [
+      {
+        flex: "0.4 70px",
+        "_main-size": [null, "80px"], // (Can't take my full +40% of
+        // free space due to other item's
+        // large min-size.)
+      },
+      {
+        flex: "0.2 30px",
+        "_min-main-size": "120px",
+        "_main-size": [null, "120px"], // +20% free space, then clamped
+      },
+    ],
+  },
+  // ...and now with a large-enough min-size that it pushes the other flex item
+  // to actually shrink a bit (with default "flex-shrink:1"):
+  {
+    items: [
+      {
+        flex: "0.3 30px",
+        "_main-size": [null, "20px"], // -10px, instead of desired +45px
+      },
+      {
+        flex: "0.2 20px",
+        "_min-main-size": "180px",
+        "_main-size": [null, "180px"], // +160px, instead of desired +30px
+      },
+    ],
+  },
+
+  // In this case, the items' flexibilities don't initially sum to < 1, but they
+  // do after we freeze the third item for violating its max-size.
+  {
+    items: [
+      {
+        flex: "0.3 30px",
+        "_main-size": [null, "75px"],
+        // 1st loop: desires (0.3 / 5) * 150px = 9px. Tentatively granted.
+        // 2nd loop: desires 0.3 * 150px = 45px. Tentatively granted.
+        // 3rd loop: desires 0.3 * 150px = 45px. Granted +45px.
+      },
+      {
+        flex: "0.2 20px",
+        "_max-main-size": "30px",
+        "_main-size": [null, "30px"],
+        // First loop: desires (0.2 / 5) * 150px = 6px. Tentatively granted.
+        // Second loop: desires 0.2 * 150px = 30px. Frozen at +10px.
+      },
+      {
+        flex: "4.5 0px",
+        "_max-main-size": "20px",
+        "_main-size": [null, "20px"],
+        // First loop: desires (4.5 / 5) * 150px = 135px. Frozen at +20px.
+      },
+    ],
+  },
+
+  // Make sure we calculate "original free space" correctly when one of our
+  // flex items will be clamped right away, due to max-size preventing it from
+  // growing at all:
+  {
+    // Here, the second flex item is effectively inflexible; it's
+    // immediately frozen at 40px since we're growing & this item's max size
+    // trivially prevents it from growing. This leaves us with an "original
+    // free space" of 60px. The first flex item takes half of that, due to
+    // its flex-grow value of 0.5.
+    items: [
+      {
+        flex: "0.5 100px",
+        "_main-size": [null, "130px"],
+      },
+      {
+        flex: "1 98px",
+        "_max-main-size": "40px",
+        "_main-size": [null, "40px"],
+      },
+    ],
+  },
+  {
+    // Same as previous example, but with a larger flex-basis on the second
+    // element (which shouldn't ultimately matter, because its max size clamps
+    // its size immediately anyway).
+    items: [
+      {
+        flex: "0.5 100px",
+        "_main-size": [null, "130px"],
+      },
+      {
+        flex: "1 101px",
+        "_max-main-size": "40px",
+        "_main-size": [null, "40px"],
+      },
+    ],
+  },
+
+  {
+    // Here, the third flex item is effectively inflexible; it's immediately
+    // frozen at 0px since we're growing & this item's max size trivially
+    // prevents it from growing. This leaves us with an "original free space" of
+    // 100px. The first flex item takes 40px, and the third takes 50px, due to
+    // their flex values of 0.4 and 0.5.
+    items: [
+      {
+        flex: "0.4 50px",
+        "_main-size": [null, "90px"],
+      },
+      {
+        flex: "0.5 50px",
+        "_main-size": [null, "100px"],
+      },
+      {
+        flex: "0 90px",
+        "_max-main-size": "0px",
+        "_main-size": [null, "0px"],
+      },
+    ],
+  },
+  {
+    // Same as previous example, but with slightly larger flex-grow values on
+    // the first and second items, which sum to 1.0 and produce slightly larger
+    // main sizes. This demonstrates that there's no discontinuity between the
+    // "< 1.0 sum" to ">= 1.0 sum" behavior, in this situation at least.
+    items: [
+      {
+        flex: "0.45 50px",
+        "_main-size": [null, "95px"],
+      },
+      {
+        flex: "0.55 50px",
+        "_main-size": [null, "105px"],
+      },
+      {
+        flex: "0 90px",
+        "_max-main-size": "0px",
+        "_main-size": [null, "0px"],
+      },
+    ],
+  },
+
+  // Test cases where flex-shrink sums to less than 1:
+  // =================================================
+  // This makes us treat the flexibilities more like "fraction of (negative)
+  // free space" instead of weights, so that e.g. a single item with
+  // "flex-shrink: 0.1" will only shrink by 10% of amount that it overflows
+  // its container by.
+  //
+  // It gets a bit more complex when there are multiple flex items, because
+  // flex-shrink is scaled by the flex-basis before it's used as a weight. But
+  // even with that scaling, the general principal is that e.g. if the
+  // flex-shrink values *sum* to 0.6, then the items will collectively only
+  // shrink by 60% (and hence will still overflow).
+
+  // Basic cases where flex-grow sum is less than 1:
+  {
+    items: [
+      {
+        flex: "0 0.1 300px",
+        "_main-size": [null, "290px"], // +10% of (negative) free space
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        flex: "0 0.8 400px",
+        "_main-size": [null, "240px"], // +80% of (negative) free space
+      },
+    ],
+  },
+
+  // ...now with two flex items, with the same flex-basis value:
+  {
+    items: [
+      {
+        flex: "0 0.4 150px",
+        "_main-size": [null, "110px"], // +40% of (negative) free space
+      },
+      {
+        flex: "0 0.2 150px",
+        "_main-size": [null, "130px"], // +20% of (negative) free space
+      },
+    ],
+  },
+
+  // ...now with two flex items, with different flex-basis values (and hence
+  // differently-scaled flex factors):
+  {
+    items: [
+      {
+        flex: "0 0.3 100px",
+        "_main-size": [null, "76px"],
+      },
+      {
+        flex: "0 0.1 200px",
+        "_main-size": [null, "184px"],
+      },
+    ],
+    // Notes:
+    //  - Free space: -100px
+    //  - Sum of flex-shrink factors: 0.3 + 0.1 = 0.4
+    //  - Since that sum ^ is < 1, we'll only distribute that fraction of
+    //    the free space. We'll distribute: -100px * 0.4 = -40px
+    //
+    //  - 1st item's scaled flex factor:  0.3 * 100px = 30
+    //  - 2nd item's scaled flex factor:  0.1 * 200px = 20
+    //  - 1st item's share of distributed free space: 30/(30+20) = 60%
+    //  - 2nd item's share of distributed free space: 20/(30+20) = 40%
+    //
+    // SO:
+    //  - 1st item gets 60% * -40px = -24px.  100px-24px = 76px
+    //  - 2nd item gets 40% * -40px = -16px.  200px-16px = 184px
+  },
+
+  // ...now with min-size modifying how much one item can shrink:
+  {
+    items: [
+      {
+        flex: "0 0.3 100px",
+        "_main-size": [null, "70px"],
+      },
+      {
+        flex: "0 0.1 200px",
+        "_min-main-size": "190px",
+        "_main-size": [null, "190px"],
+      },
+    ],
+    // Notes:
+    //  - We proceed as in previous testcase, but clamp the second flex item
+    //    at its min main size.
+    //  - After that point, we have a total flex-shrink of = 0.3, so we
+    //    distribute 0.3 * -100px = -30px to the remaining unfrozen flex
+    //    items. Since there's only one unfrozen item left, it gets all of it.
+  },
+
+  // ...now with min-size larger than our flex-basis:
+  // (This makes us freeze the second item right away, before we compute
+  // the initial free space.)
+  {
+    items: [
+      {
+        flex: "0 0.3 100px",
+        "_main-size": [null, "55px"], // +30% of 200px-100px-250px
+      },
+      {
+        flex: "0 0.1 200px",
+        "_min-main-size": "250px",
+        "_main-size": [null, "250px"], // immediately frozen
+      },
+    ],
+    // (Same as previous example, except the min-main-size prevents the
+    // second item from shrinking at all)
+  },
+
+  // ...and now with a min-size and a small flex-basis, such that we initially
+  // have positive free space, which makes the "% of [original] free space"
+  // calculations a bit more subtle. We set the "original free space" after
+  // we've clamped the second item (the first time the free space is negative).
+  {
+    items: [
+      {
+        flex: "0 0.3 100px",
+        "_main-size": [null, "70px"],
+      },
+      {
+        flex: "0 0.1 50px",
+        "_min-main-size": "200px",
+        "_main-size": [null, "200px"],
+      },
+    ],
+  },
+
+  // Now with max-size making an item shrink more than its flex-shrink value
+  // calls for:
+  {
+    items: [
+      {
+        flex: "0 0.3 100px",
+        "_main-size": [null, "70px"],
+      },
+      {
+        flex: "0 0.1 200px",
+        "_max-main-size": "150px",
+        "_main-size": [null, "150px"],
+      },
+    ],
+    // Notes:
+    //  - We proceed as in an earlier testcase, but clamp the second flex item
+    //    at its max main size.
+    //  - After that point, we have a total flex-shrink of = 0.3, so we
+    //    distribute 0.3 * -100px = -30px to the remaining unfrozen flex
+    //    items. Since there's only one unfrozen item left, it gets all of it.
+  },
+
+  // ...and now with a small enough max-size that it prevents the other flex
+  // item from taking its full desired portion of the (negative) original free
+  // space:
+  {
+    items: [
+      {
+        flex: "0 0.3 100px",
+        "_main-size": [null, "90px"],
+      },
+      {
+        flex: "0 0.1 200px",
+        "_max-main-size": "110px",
+        "_main-size": [null, "110px"],
+      },
+    ],
+    // Notes:
+    //  - We proceed as in an earlier testcase, but clamp the second flex item
+    //    at its max main size.
+    //  - After that point, we have a total flex-shrink of 0.3, which would
+    //    have us distribute 0.3 * -100px = -30px to the (one) remaining
+    //    unfrozen flex item. But our remaining free space is only -10px at
+    //    that point, so we distribute that instead.
+  },
+
+  // ...and now with a small enough max-size that it pushes the other flex item
+  // to actually grow a bit (with custom "flex-grow: 1" for this testcase):
+  {
+    items: [
+      {
+        flex: "1 0.3 100px",
+        "_main-size": [null, "120px"],
+      },
+      {
+        flex: "1 0.1 200px",
+        "_max-main-size": "80px",
+        "_main-size": [null, "80px"],
+      },
+    ],
+  },
+
+  // In this case, the items' flexibilities don't initially sum to < 1, but they
+  // do after we freeze the third item for violating its min-size.
+  {
+    items: [
+      {
+        flex: "0 0.3 100px",
+        "_main-size": [null, "76px"],
+      },
+      {
+        flex: "0 0.1 150px",
+        "_main-size": [null, "138px"],
+      },
+      {
+        flex: "0 0.8 10px",
+        "_min-main-size": "40px",
+        "_main-size": [null, "40px"],
+      },
+    ],
+    // Notes:
+    //  - We immediately freeze the 3rd item, since we're shrinking and its
+    //    min size obviously prevents it from shrinking at all.  This leaves
+    //    200px - 100px - 150px - 40px = -90px of "initial free space".
+    //
+    //  - Our remaining flexible items have a total flex-shrink of 0.4,
+    //    so we can distribute a total of 0.4 * -90px = -36px
+    //
+    //  - We distribute that space using *scaled* flex factors:
+    //    * 1st item's scaled flex factor:  0.3 * 100px = 30
+    //    * 2nd item's scaled flex factor:  0.1 * 150px = 15
+    //   ...which means...
+    //    * 1st item's share of distributed free space: 30/(30+15) = 2/3
+    //    * 2nd item's share of distributed free space: 15/(30+15) = 1/3
+    //
+    // SO:
+    //  - 1st item gets 2/3 * -36px = -24px. 100px - 24px = 76px
+    //  - 2nd item gets 1/3 * -36px = -12px. 150px - 12px = 138px
+  },
+
+  // In this case, the items' flexibilities sum to > 1, in part due to an item
+  // that *can't actually shrink* due to its 0 flex-basis (which gives it a
+  // "scaled flex factor" of 0). This prevents us from triggering the special
+  // behavior for flexibilities that sum to less than 1, and as a result, the
+  // first item ends up absorbing all of the free space.
+  {
+    items: [
+      {
+        flex: "0 .5 300px",
+        "_main-size": [null, "200px"],
+      },
+      {
+        flex: "0 5 0px",
+        "_main-size": [null, "0px"],
+      },
+    ],
+  },
+
+  // This case is similar to the one above, but with a *barely* nonzero base
+  // size for the second item. This should produce a result similar to the case
+  // above. (In particular, we should first distribute a very small amount of
+  // negative free space to the second item, getting it to approximately zero,
+  // and distribute the bulk of the negative free space to the first item,
+  // getting it to approximately 200px.)
+  {
+    items: [
+      {
+        flex: "0 .5 300px",
+        "_main-size": [null, "200px"],
+      },
+      {
+        flex: "0 1 0.01px",
+        "_main-size": [null, "0px"],
+      },
+    ],
+  },
+  // This case is similar to the ones above, but now we've increased the
+  // flex-shrink value on the second-item so that it claims enough of the
+  // negative free space to go below its min-size (0px). So, it triggers a min
+  // violation & is frozen. For the loop *after* the min violation, the sum of
+  // the remaining flex items' flex-shrink values is less than 1, so we trigger
+  // the special <1 behavior and only distribute half of the remaining
+  // (negative) free space to the first item (instead of all of it).
+  {
+    items: [
+      {
+        flex: "0 .5 300px",
+        "_main-size": [null, "250px"],
+      },
+      {
+        flex: "0 5 0.01px",
+        "_main-size": [null, "0px"],
+      },
+    ],
+  },
+];
diff --git a/layout/style/test/gen-css-properties.py b/layout/style/test/gen-css-properties.py
new file mode 100644
index 0000000000..1d6fad226d
--- /dev/null
+++ b/layout/style/test/gen-css-properties.py
@@ -0,0 +1,24 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+import os
+import sys
+import subprocess
+
+
+def main(output, css_properties, exe):
+    # moz.build passes in the exe name without any path, so to run it we need to
+    # prepend the './'
+    run_exe = exe if os.path.isabs(exe) else "./%s" % exe
+
+    # Use universal_newlines so everything is '\n', which gets converted to
+    # '\r\n' when writing out the file in Windows.
+    data = subprocess.check_output([run_exe], universal_newlines=True)
+    with open(css_properties) as f:
+        data += f.read()
+    output.write(data)
+
+
+if __name__ == "__main__":
+    main(sys.stdout, *sys.argv[1:])
diff --git a/layout/style/test/gtest/ImportScannerTest.cpp b/layout/style/test/gtest/ImportScannerTest.cpp
new file mode 100644
index 0000000000..c0b43221dd
--- /dev/null
+++ b/layout/style/test/gtest/ImportScannerTest.cpp
@@ -0,0 +1,119 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "gtest/gtest.h"
+#include "mozilla/ImportScanner.h"
+#include "mozilla/StaticPrefs_layout.h"
+
+using namespace mozilla;
+
+static nsTArray<nsString> Scan(const char* aCssCode) {
+  nsTArray<nsString> urls;
+  ImportScanner scanner;
+  scanner.Start();
+  urls.AppendElements(scanner.Scan(NS_ConvertUTF8toUTF16(aCssCode)));
+  urls.AppendElements(scanner.Stop());
+  return urls;
+}
+
+TEST(ImportScanner, Simple)
+{
+  auto urls = Scan(
+      "/* Something something */ "
+      "@charset \"utf-8\";"
+      "@import url(bar);"
+      "@import uRL( baz );"
+      "@import \"bazz)\"");
+
+  ASSERT_EQ(urls.Length(), 3u);
+  ASSERT_EQ(urls[0], u"bar"_ns);
+  ASSERT_EQ(urls[1], u"baz"_ns);
+  ASSERT_EQ(urls[2], u"bazz)"_ns);
+}
+
+TEST(ImportScanner, UrlWithQuotes)
+{
+  auto urls = Scan(
+      "/* Something something */ "
+      "@import url(\"bar\");"
+      "@import\tuRL( \"baz\" );"
+      "@imPort\turL( 'bazz' );"
+      "something else {}"
+      "@import\turL( 'bazz' ); ");
+
+  ASSERT_EQ(urls.Length(), 3u);
+  ASSERT_EQ(urls[0], u"bar"_ns);
+  ASSERT_EQ(urls[1], u"baz"_ns);
+  ASSERT_EQ(urls[2], u"bazz"_ns);
+}
+
+TEST(ImportScanner, MediaIsIgnored)
+{
+  auto urls = Scan(
+      "@chArset \"utf-8\";"
+      "@import url(\"bar\") print;"
+      "/* Something something */ "
+      "@import\tuRL( \"baz\" ) (min-width: 100px);"
+      "@import\turL( bazz ) (max-width: 100px);");
+
+  ASSERT_EQ(urls.Length(), 3u);
+  ASSERT_EQ(urls[0], u"bar"_ns);
+  ASSERT_EQ(urls[1], u"baz"_ns);
+  ASSERT_EQ(urls[2], u"bazz"_ns);
+}
+
+TEST(ImportScanner, Layers)
+{
+  auto urls = Scan(
+      "@layer foo, bar;\n"
+      "@import url(\"bar\") layer(foo);"
+      "@import url(\"baz\");"
+      "@import url(bazz);"
+      "@layer block {}"
+      // This one below is invalid now and shouldn't be scanned.
+      "@import\turL( 'bazzz' ); ");
+
+  ASSERT_EQ(urls.Length(), 3u);
+  ASSERT_EQ(urls[0], u"bar"_ns);
+  ASSERT_EQ(urls[1], u"baz"_ns);
+  ASSERT_EQ(urls[2], u"bazz"_ns);
+}
+
+TEST(ImportScanner, Supports)
+{
+  auto urls = Scan(
+      // Supported feature, should be included.
+      "@import url(bar) supports(display: block);"
+      // Unsupported feature, should not be included.
+      "@import url(baz) supports(foo: bar);"
+      // Supported condition with operator, should be included.
+      "@import url(bazz) supports((display: flex) and (display: block));"
+      // Unsupported condition with function, should be not included.
+      "@import url(bazzz) supports(selector(foo:bar(baz)));"
+      // Supported large condition with layer, supports, media list
+      "@import url(bazzzz) layer(A.B) supports(display: flex) (max-width: "
+      "100px)");
+
+  if (StaticPrefs::layout_css_import_supports_enabled()) {
+    // If the pref is enabled, expect the supports conditions to be evaluated
+    // and unsupported to not be emitted.
+
+    ASSERT_EQ(urls.Length(), 3u);
+    ASSERT_EQ(urls[0], u"bar"_ns);
+    ASSERT_EQ(urls[1], u"bazz"_ns);
+    ASSERT_EQ(urls[2], u"bazzzz"_ns);
+  } else {
+    // If disabled, all imports should be included as the supports conditions
+    // should be ignored.
+
+    ASSERT_EQ(urls.Length(), 5u);
+    ASSERT_EQ(urls[0], u"bar"_ns);
+    ASSERT_EQ(urls[1], u"baz"_ns);
+    ASSERT_EQ(urls[2], u"bazz"_ns);
+    ASSERT_EQ(urls[3], u"bazzz"_ns);
+    ASSERT_EQ(urls[4], u"bazzzz"_ns);
+  }
+}
diff --git a/layout/style/test/gtest/StyloParsingBench.cpp b/layout/style/test/gtest/StyloParsingBench.cpp
new file mode 100644
index 0000000000..f2f03b0f85
--- /dev/null
+++ b/layout/style/test/gtest/StyloParsingBench.cpp
@@ -0,0 +1,116 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=8 sts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#include "gtest/gtest.h"
+#include "gtest/MozGTestBench.h"
+#include "nsString.h"
+#include "ExampleStylesheet.h"
+#include "ServoBindings.h"
+#include "mozilla/dom/DOMString.h"
+#include "mozilla/Encoding.h"
+#include "mozilla/Utf8.h"
+#include "mozilla/NullPrincipal.h"
+#include "mozilla/css/SheetParsingMode.h"
+#include "ReferrerInfo.h"
+#include "nsCSSValue.h"
+#include "ReferrerInfo.h"
+
+using namespace mozilla;
+using namespace mozilla::css;
+using namespace mozilla::dom;
+using namespace mozilla::net;
+
+// Bug 1436018 - Disable Stylo microbenchmark on Windows
+#if !defined(_WIN32) && !defined(_WIN64)
+
+#  define PARSING_REPETITIONS 20
+#  define SETPROPERTY_REPETITIONS (1000 * 1000)
+#  define GETPROPERTY_REPETITIONS (1000 * 1000)
+
+static void ServoParsingBench(const StyleUseCounters* aCounters) {
+  auto css = AsBytes(MakeStringSpan(EXAMPLE_STYLESHEET));
+  nsCString cssStr;
+  cssStr.Append(css);
+  ASSERT_EQ(Encoding::UTF8ValidUpTo(css), css.Length());
+
+  RefPtr<nsIURI> uri = NullPrincipal::CreateURI();
+  nsCOMPtr<nsIReferrerInfo> referrerInfo = new ReferrerInfo(nullptr);
+  RefPtr<URLExtraData> data =
+      new URLExtraData(uri.forget(), referrerInfo.forget(),
+                       NullPrincipal::CreateWithoutOriginAttributes());
+  for (int i = 0; i < PARSING_REPETITIONS; i++) {
+    RefPtr<StyleStylesheetContents> stylesheet =
+        Servo_StyleSheet_FromUTF8Bytes(
+            nullptr, nullptr, nullptr, &cssStr, eAuthorSheetFeatures, data, 0,
+            eCompatibility_FullStandards, nullptr, aCounters,
+            StyleAllowImportRules::Yes, StyleSanitizationKind::None, nullptr)
+            .Consume();
+  }
+}
+
+static constexpr auto STYLE_RULE = StyleCssRuleType::Style;
+
+static void ServoSetPropertyByIdBench(const nsACString& css) {
+  RefPtr<StyleLockedDeclarationBlock> block =
+      Servo_DeclarationBlock_CreateEmpty().Consume();
+  RefPtr<nsIURI> uri = NullPrincipal::CreateURI();
+  nsCOMPtr<nsIReferrerInfo> referrerInfo = new ReferrerInfo(nullptr);
+  RefPtr<URLExtraData> data =
+      new URLExtraData(uri.forget(), referrerInfo.forget(),
+                       NullPrincipal::CreateWithoutOriginAttributes());
+  ASSERT_TRUE(IsUtf8(css));
+
+  for (int i = 0; i < SETPROPERTY_REPETITIONS; i++) {
+    Servo_DeclarationBlock_SetPropertyById(
+        block, eCSSProperty_width, &css,
+        /* is_important = */ false, data, ParsingMode::Default,
+        eCompatibility_FullStandards, nullptr, STYLE_RULE, {});
+  }
+}
+
+static void ServoGetPropertyValueById() {
+  RefPtr<StyleLockedDeclarationBlock> block =
+      Servo_DeclarationBlock_CreateEmpty().Consume();
+
+  RefPtr<nsIURI> uri = NullPrincipal::CreateURI();
+  nsCOMPtr<nsIReferrerInfo> referrerInfo = new ReferrerInfo(nullptr);
+  RefPtr<URLExtraData> data =
+      new URLExtraData(uri.forget(), referrerInfo.forget(),
+                       NullPrincipal::CreateWithoutOriginAttributes());
+  constexpr auto css_ = "10px"_ns;
+  const nsACString& css = css_;
+  Servo_DeclarationBlock_SetPropertyById(
+      block, eCSSProperty_width, &css,
+      /* is_important = */ false, data, ParsingMode::Default,
+      eCompatibility_FullStandards, nullptr, STYLE_RULE, {});
+
+  for (int i = 0; i < GETPROPERTY_REPETITIONS; i++) {
+    nsAutoCString value;
+    Servo_DeclarationBlock_GetPropertyValueById(block, eCSSProperty_width,
+                                                &value);
+    ASSERT_TRUE(value.EqualsLiteral("10px"));
+  }
+}
+
+MOZ_GTEST_BENCH(Stylo, Servo_StyleSheet_FromUTF8Bytes_Bench,
+                [] { ServoParsingBench(nullptr); });
+
+MOZ_GTEST_BENCH(Stylo, Servo_StyleSheet_FromUTF8Bytes_Bench_UseCounters, [] {
+  UniquePtr<StyleUseCounters> counters(Servo_UseCounters_Create());
+  ServoParsingBench(counters.get());
+});
+
+MOZ_GTEST_BENCH(Stylo, Servo_DeclarationBlock_SetPropertyById_Bench,
+                [] { ServoSetPropertyByIdBench("10px"_ns); });
+
+MOZ_GTEST_BENCH(Stylo,
+                Servo_DeclarationBlock_SetPropertyById_WithInitialSpace_Bench,
+                [] { ServoSetPropertyByIdBench(" 10px"_ns); });
+
+MOZ_GTEST_BENCH(Stylo, Servo_DeclarationBlock_GetPropertyById_Bench,
+                ServoGetPropertyValueById);
+
+#endif
diff --git a/layout/style/test/gtest/example.css b/layout/style/test/gtest/example.css
new file mode 100644
index 0000000000..12a0fb9a4f
--- /dev/null
+++ b/layout/style/test/gtest/example.css
@@ -0,0 +1,2925 @@
+/* Copied from devtools/client/debugger/debugger.css on 2017-04-03 */
+
+.landing-page {
+  flex: 1;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: row;
+  align-items: stretch;
+  /* Customs properties */
+  --title-font-size: 24px;
+  --ui-element-font-size: 16px;
+  --primary-line-height: 30px;
+  --secondary-line-height: 25px;
+  --base-spacing: 20px;
+  --base-transition: all 0.25s ease;
+}
+
+.landing-popup {
+  min-width: 0;
+}
+
+.landing-page .panel {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.landing-page .panel header {
+  display: flex;
+  align-items: baseline;
+  margin: calc(2 * var(--base-spacing)) 0 0;
+  padding-bottom: var(--base-spacing);
+}
+
+.landing-page .panel header input[type=search] {
+  flex: 1;
+  background-color: var(--theme-tab-toolbar-background);
+  color: var(--theme-comment);
+  font-size: var(--ui-element-font-size);
+  border: 1px solid var(--theme-splitter-color);
+  padding: calc(var(--base-spacing) / 2);
+  margin: 0 var(--base-spacing);
+  transition: var(--base-transition);
+}
+
+.landing-page .panel header input[type=button] {
+  background-color: var(--theme-tab-toolbar-background);
+  color: var(--theme-comment);
+  font-size: var(--ui-element-font-size);
+  border: 1px solid var(--theme-splitter-color);
+  padding: calc(var(--base-spacing) / 2);
+  margin: 0 var(--base-spacing);
+  transition: var(--base-transition);
+}
+
+.landing-page .panel header h1 {
+  color: var(--theme-body-color);
+  font-size: var(--title-font-size);
+  margin: 0;
+  line-height: var(--primary-line-height);
+  font-weight: normal;
+  padding-left: calc(2 * var(--base-spacing));
+}
+
+.landing-page .panel h3 {
+  padding-left: calc(2 * var(--base-spacing));
+}
+
+.landing-page .panel header input::placeholder {
+  color: var(--theme-body-color-inactive);
+}
+
+.landing-page .panel header input:focus {
+  border: 1px solid var(--theme-selection-background);
+}
+
+.landing-page .panel .center-message {
+  font-size: var(--ui-element-font-size);
+  line-height: var(--secondary-line-height);
+  padding: calc(var(--base-spacing) / 2);
+}
+
+.landing-page .center a {
+  color: var(--theme-highlight-bluegrey);
+  text-decoration: none;
+}
+
+.landing-page .panel .footer-note {
+  padding: var(--base-spacing) 0;
+  text-align: center;
+  font-size: 14px;
+  color: var(--theme-comment);
+}
+.landing-page .tab-group {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.landing-page .tab-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.landing-page .tab {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: calc(var(--base-spacing) / 2) var(--base-spacing);
+  font-family: sans-serif;
+}
+
+.landing-page .tab-sides {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 calc(var(--base-spacing) * 2);
+}
+
+.landing-page .tab-title {
+  line-height: var(--secondary-line-height);
+  font-size: var(--ui-element-font-size);
+  color: var(--theme-highlight-bluegrey);
+  word-break: break-all;
+}
+
+.landing-page .tab-url {
+  color: var(--theme-comment);
+  word-break: break-all;
+}
+
+.landing-page .tab-value {
+  color: var(--theme-comment);
+  line-height: var(--secondary-line-height);
+  font-size: var(--ui-element-font-size);
+}
+
+.landing-page .tab:focus,
+.landing-page .tab.active {
+  background: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+  cursor: pointer;
+  transition: var(--base-transition);
+}
+
+.landing-page .tab:focus .tab-title,
+.landing-page .tab.active .tab-title {
+  color: inherit;
+}
+
+.landing-page .tab:focus .tab-url,
+.landing-page .tab.active .tab-url {
+  color: var(--theme-highlight-gray);
+}
+.landing-page .sidebar {
+  display: flex;
+  background-color: var(--theme-tab-toolbar-background);
+  width: 200px;
+  flex-direction: column;
+  border-right: 1px solid var(--theme-splitter-color);
+}
+
+.landing-page .sidebar h1 {
+  color: var(--theme-body-color);
+  font-size: var(--title-font-size);
+  margin: 0;
+  line-height: var(--primary-line-height);
+  font-weight: normal;
+  padding: calc(2 * var(--base-spacing)) var(--base-spacing);
+}
+
+.landing-page .sidebar ul {
+  list-style: none;
+  padding: 0;
+  line-height: var(--primary-line-height);
+  font-size: var(--ui-element-font-size);
+}
+
+.landing-page .sidebar li {
+  padding: calc(var(--base-spacing) / 4) var(--base-spacing);
+}
+
+.landing-page .sidebar li a {
+  color: var(--theme-body-color);
+}
+
+.landing-page .sidebar li.selected {
+  background: var(--theme-highlight-bluegrey);
+  color: var(--theme-selection-color);
+  transition: var(--base-transition);
+}
+
+.landing-page .sidebar li.selected a {
+  color: inherit;
+}
+
+.landing-page .sidebar li:hover,
+.landing-page .sidebar li:focus {
+  background: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+  cursor: pointer;
+}
+
+.landing-page .sidebar li:hover a,
+.landing-page .sidebar li:focus a {
+  color: inherit;
+}
+:root.theme-light,
+:root .theme-light {
+  --theme-search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+#mount {
+  display: flex;
+  height: 100%;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 8px;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background: rgba(113, 113, 113, 0.5);
+}
+
+:root.theme-dark .CodeMirror-scrollbar-filler {
+  background: transparent;
+}
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: -20px;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  overflow: auto;
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root {
+  /* --breakpoint-background: url("chrome://devtools/skin/images/breakpoint.svg#light"); */
+  /* --breakpoint-hover-background: url("chrome://devtools/skin/images/breakpoint.svg#light-hover"); */
+  --breakpoint-active-color: rgba(44,187,15,.2);
+  --breakpoint-active-color-hover: rgba(44,187,15,.5);
+  /* --breakpoint-conditional-background: url("chrome://devtools/skin/images/breakpoint.svg#light-conditional"); */
+}
+
+.theme-dark:root {
+  /* --breakpoint-background: url("chrome://devtools/skin/images/breakpoint.svg#dark"); */
+  /* --breakpoint-hover-background: url("chrome://devtools/skin/images/breakpoint.svg#dark-hover"); */
+  --breakpoint-active-color: rgba(0,255,175,.4);
+  --breakpoint-active-color-hover: rgba(0,255,175,.7);
+  /* --breakpoint-conditional-background: url("chrome://devtools/skin/images/breakpoint.svg#dark-conditional"); */
+}
+
+.CodeMirror .errors {
+  width: 16px;
+}
+
+.CodeMirror .error {
+  display: inline-block;
+  margin-left: 5px;
+  width: 12px;
+  height: 12px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  /* background-image: url("chrome://devtools/skin/images/editor-error.png"); */
+  opacity: 0.75;
+}
+
+.CodeMirror .hit-counts {
+  width: 6px;
+}
+
+.CodeMirror .hit-count {
+  display: inline-block;
+  height: 12px;
+  border: solid rgba(0,0,0,0.2);
+  border-width: 1px 1px 1px 0;
+  border-radius: 0 3px 3px 0;
+  padding: 0 3px;
+  font-size: 10px;
+  pointer-events: none;
+}
+
+.CodeMirror-linenumber:before {
+  content: " ";
+  display: block;
+  width: calc(100% - 3px);
+  position: absolute;
+  top: 1px;
+  left: 0;
+  height: 12px;
+  z-index: -1;
+  background-size: calc(100% - 2px) 12px;
+  background-repeat: no-repeat;
+  background-position: right center;
+  padding-inline-end: 9px;
+}
+
+.breakpoint .CodeMirror-linenumber {
+  color: var(--theme-body-background);
+}
+
+.breakpoint .CodeMirror-linenumber:before {
+  background-image: var(--breakpoint-background) !important;
+}
+
+.conditional .CodeMirror-linenumber:before {
+  background-image: var(--breakpoint-conditional-background) !important;
+}
+
+.debug-line .CodeMirror-linenumber {
+  background-color: var(--breakpoint-active-color);
+}
+
+.theme-dark .debug-line .CodeMirror-linenumber {
+  color: #c0c0c0;
+}
+
+.debug-line .CodeMirror-line {
+  background-color: var(--breakpoint-active-color) !important;
+}
+
+/* Don't display the highlight color since the debug line
+   is already highlighted */
+.debug-line .CodeMirror-activeline-background {
+  display: none;
+}
+
+.CodeMirror {
+  cursor: text;
+  height: 100%;
+}
+
+.CodeMirror-gutters {
+  cursor: default;
+}
+
+/* This is to avoid the fake horizontal scrollbar div of codemirror to go 0
+height when floating scrollbars are active. Make sure that this value is equal
+to the maximum of `min-height` specific to the `scrollbar[orient="horizontal"]`
+selector in floating-scrollbar-light.css across all platforms. */
+.CodeMirror-hscrollbar {
+  min-height: 10px;
+}
+
+/* This is to avoid the fake vertical scrollbar div of codemirror to go 0
+width when floating scrollbars are active. Make sure that this value is equal
+to the maximum of `min-width` specific to the `scrollbar[orient="vertical"]`
+selector in floating-scrollbar-light.css across all platforms. */
+.CodeMirror-vscrollbar {
+  min-width: 10px;
+}
+
+.cm-trailingspace {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==");
+  opacity: 0.75;
+  background-position: left bottom;
+  background-repeat: repeat-x;
+}
+
+.cm-highlight {
+  position: relative;
+}
+
+.cm-highlight:before {
+  position: absolute;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: var(--theme-comment-alt);
+  border-bottom-color: var(--theme-comment-alt);
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  top: -1px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  content: "";
+  margin-bottom: -1px;
+}
+
+.cm-highlight-full:before {
+  border: 1px solid var(--theme-comment-alt);
+}
+
+.cm-highlight-start:before {
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-left-color: var(--theme-comment-alt);
+  margin: 0 0 -1px -1px;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+.cm-highlight-end:before {
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-right-color: var(--theme-comment-alt);
+  margin: 0 -1px -1px 0;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+/* CodeMirror dialogs styling */
+
+.CodeMirror-dialog {
+  padding: 4px 3px;
+}
+
+.CodeMirror-dialog,
+.CodeMirror-dialog input {
+  font: message-box;
+}
+
+/* Fold addon */
+
+.CodeMirror-foldmarker {
+  color: blue;
+  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+  font-family: sans-serif;
+  line-height: .3;
+  cursor: pointer;
+}
+
+.CodeMirror-foldgutter {
+  width: 16px; /* Same as breakpoints gutter above */
+}
+
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded {
+  color: #555;
+  cursor: pointer;
+}
+
+.CodeMirror-foldgutter-open:after {
+  font-size: 120%;
+  content: "\25BE";
+}
+
+.CodeMirror-foldgutter-folded:after {
+  font-size: 120%;
+  content: "\25B8";
+}
+
+.CodeMirror-hints {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 2px;
+  border-radius: 3px;
+  font-size: 90%;
+  max-height: 20em;
+  overflow-y: auto;
+}
+
+.CodeMirror-hint {
+  margin: 0;
+  padding: 0 4px;
+  border-radius: 2px;
+  max-width: 19em;
+  overflow: hidden;
+  white-space: pre;
+  cursor: pointer;
+}
+
+.CodeMirror-Tern-completion {
+  padding-inline-start: 22px;
+  position: relative;
+  line-height: 18px;
+}
+
+.CodeMirror-Tern-completion:before {
+  position: absolute;
+  left: 2px;
+  bottom: 2px;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: bold;
+  height: 15px;
+  width: 15px;
+  line-height: 16px;
+  text-align: center;
+  color: #ffffff;
+  box-sizing: border-box;
+}
+
+.CodeMirror-Tern-completion-unknown:before {
+  content: "?";
+}
+
+.CodeMirror-Tern-completion-object:before {
+  content: "O";
+}
+
+.CodeMirror-Tern-completion-fn:before {
+  content: "F";
+}
+
+.CodeMirror-Tern-completion-array:before {
+  content: "A";
+}
+
+.CodeMirror-Tern-completion-number:before {
+  content: "N";
+}
+
+.CodeMirror-Tern-completion-string:before {
+  content: "S";
+}
+
+.CodeMirror-Tern-completion-bool:before {
+  content: "B";
+}
+
+.CodeMirror-Tern-completion-guess {
+  color: #999;
+}
+
+.CodeMirror-Tern-tooltip {
+  border-radius: 3px;
+  padding: 2px 5px;
+  white-space: pre-wrap;
+  max-width: 40em;
+  position: absolute;
+  z-index: 10;
+}
+
+.CodeMirror-Tern-hint-doc {
+  max-width: 25em;
+}
+
+.CodeMirror-Tern-farg-current {
+  text-decoration: underline;
+}
+
+.CodeMirror-Tern-fhint-guess {
+  opacity: .7;
+}
+:root.theme-light,
+:root .theme-light {
+  --search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
+}
+
+:root.theme-dark,
+:root .theme-dark {
+  --search-overlays-semitransparent: rgba(42, 46, 56, 0.66);
+}
+.debugger {
+  display: flex;
+  flex: 1;
+  height: 100%;
+}
+
+.editor-pane {
+  display: flex;
+  position: relative;
+  flex: 1;
+  background-color: var(--theme-tab-toolbar-background);
+  height: calc(100% - 1px);
+  overflow: hidden;
+}
+
+.editor-container {
+  width: 100%;
+}
+
+.subsettings:hover {
+  cursor: pointer;
+}
+
+.search-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  z-index: 200;
+  background-color: var(--search-overlays-semitransparent);
+}
+
+.search-container .close-button {
+  width: 16px;
+  margin-top: 25px;
+  margin-right: 20px;
+}
+menupopup {
+  position: fixed;
+  z-index: 10000;
+  background: white;
+  border: 1px solid #cccccc;
+  padding: 5px 0;
+  background: #f2f2f2;
+  border-radius: 5px;
+  color: #585858;
+  box-shadow: 0 0 4px 0 rgba(190, 190, 190, 0.8);
+  min-width: 130px;
+}
+
+menuitem {
+  display: block;
+  padding: 0 20px;
+  line-height: 20px;
+  font-weight: 500;
+  font-size: 13px;
+  user-select: none;
+}
+
+menuitem:hover {
+  background: #3780fb;
+  color: white;
+  cursor: pointer;
+}
+
+menuitem[disabled=true] {
+  color: #cccccc;
+}
+
+menuitem[disabled=true]:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
+menuseparator {
+  border-bottom: 1px solid #cacdd3;
+  width: 100%;
+  height: 5px;
+  display: block;
+  margin-bottom: 5px;
+}
+
+#contextmenu-mask.show {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+}
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.split-box {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.split-box.vert {
+  flex-direction: row;
+}
+
+.split-box.horz {
+  flex-direction: column;
+}
+
+.split-box > .uncontrolled {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+
+.split-box > .controlled {
+  display: flex;
+  overflow: auto;
+}
+
+.split-box > .splitter {
+  background-image: none;
+  border: 0;
+  border-style: solid;
+  border-color: transparent;
+  background-color: var(--theme-splitter-color);
+  background-clip: content-box;
+  position: relative;
+
+  box-sizing: border-box;
+
+  /* Positive z-index positions the splitter on top of its siblings and makes
+     it clickable on both sides. */
+  z-index: 1;
+}
+
+.split-box.vert > .splitter {
+  min-width: calc(var(--devtools-splitter-inline-start-width) +
+    var(--devtools-splitter-inline-end-width) + 1px);
+
+  border-left-width: var(--devtools-splitter-inline-start-width);
+  border-right-width: var(--devtools-splitter-inline-end-width);
+
+  margin-left: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
+  margin-right: calc(-1 * var(--devtools-splitter-inline-end-width));
+
+  cursor: ew-resize;
+}
+
+.split-box.horz > .splitter {
+  min-height: calc(var(--devtools-splitter-top-width) +
+    var(--devtools-splitter-bottom-width) + 1px);
+
+  border-top-width: var(--devtools-splitter-top-width);
+  border-bottom-width: var(--devtools-splitter-bottom-width);
+
+  margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
+  margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
+
+  cursor: ns-resize;
+}
+
+.split-box.disabled {
+  pointer-events: none;
+}
+
+/**
+ * Make sure splitter panels are not processing any mouse
+ * events. This is good for performance during splitter
+ * bar dragging.
+ */
+.split-box.dragging > .controlled,
+.split-box.dragging > .uncontrolled {
+  pointer-events: none;
+}
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.theme-dark,
+.theme-light {
+  --number-color: var(--theme-highlight-green);
+  --string-color: var(--theme-highlight-orange);
+  --null-color: var(--theme-comment);
+  --object-color: var(--theme-body-color);
+  --caption-color: var(--theme-highlight-blue);
+  --location-color: var(--theme-content-color1);
+  --source-link-color: var(--theme-highlight-blue);
+  --node-color: var(--theme-highlight-bluegrey);
+  --reference-color: var(--theme-highlight-purple);
+}
+
+.theme-firebug {
+  --number-color: #000088;
+  --string-color: #FF0000;
+  --null-color: #787878;
+  --object-color: DarkGreen;
+  --caption-color: #444444;
+  --location-color: #555555;
+  --source-link-color: blue;
+  --node-color: rgb(0, 0, 136);
+  --reference-color: rgb(102, 102, 255);
+}
+
+/******************************************************************************/
+
+.objectLink:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.inline {
+  display: inline;
+  white-space: normal;
+}
+
+.objectBox-object {
+  font-weight: bold;
+  color: var(--object-color);
+  white-space: pre-wrap;
+}
+
+.objectBox-string,
+.objectBox-text,
+.objectLink-textNode,
+.objectBox-table {
+  white-space: pre-wrap;
+}
+
+.objectBox-number,
+.objectLink-styleRule,
+.objectLink-element,
+.objectLink-textNode,
+.objectBox-array > .length {
+  color: var(--number-color);
+}
+
+.objectBox-string {
+  color: var(--string-color);
+}
+
+.objectLink-function,
+.objectBox-stackTrace,
+.objectLink-profile {
+  color: var(--object-color);
+}
+
+.objectLink-Location {
+  font-style: italic;
+  color: var(--location-color);
+}
+
+.objectBox-null,
+.objectBox-undefined,
+.objectBox-hint,
+.logRowHint {
+  font-style: italic;
+  color: var(--null-color);
+}
+
+.objectLink-sourceLink {
+  position: absolute;
+  right: 4px;
+  top: 2px;
+  padding-left: 8px;
+  font-weight: bold;
+  color: var(--source-link-color);
+}
+
+/******************************************************************************/
+
+.objectLink-event,
+.objectLink-eventLog,
+.objectLink-regexp,
+.objectLink-object,
+.objectLink-Date {
+  font-weight: bold;
+  color: var(--object-color);
+  white-space: pre-wrap;
+}
+
+/******************************************************************************/
+
+.objectLink-object .nodeName,
+.objectLink-NamedNodeMap .nodeName,
+.objectLink-NamedNodeMap .objectEqual,
+.objectLink-NamedNodeMap .arrayLeftBracket,
+.objectLink-NamedNodeMap .arrayRightBracket,
+.objectLink-Attr .attrEqual,
+.objectLink-Attr .attrTitle {
+  color: var(--node-color);
+}
+
+.objectLink-object .nodeName {
+  font-weight: normal;
+}
+
+/******************************************************************************/
+
+.objectLeftBrace,
+.objectRightBrace,
+.arrayLeftBracket,
+.arrayRightBracket {
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.objectLeftBrace,
+.arrayLeftBracket {
+  margin-right: 4px;
+}
+
+.objectRightBrace,
+.arrayRightBracket {
+  margin-left: 4px;
+}
+
+/******************************************************************************/
+/* Cycle reference*/
+
+.objectLink-Reference {
+  font-weight: bold;
+  color: var(--reference-color);
+}
+
+.objectBox-array > .objectTitle {
+  font-weight: bold;
+  color: var(--object-color);
+}
+
+.caption {
+  font-weight: bold;
+  color:  var(--caption-color);
+}
+
+/******************************************************************************/
+/* Themes */
+
+.theme-dark .objectBox-null,
+.theme-dark .objectBox-undefined,
+.theme-light .objectBox-null,
+.theme-light .objectBox-undefined {
+  font-style: normal;
+}
+
+.theme-dark .objectBox-object,
+.theme-light .objectBox-object {
+  font-weight: normal;
+  white-space: pre-wrap;
+}
+
+.theme-dark .caption,
+.theme-light .caption {
+  font-weight: normal;
+}
+
+.search-container {
+  position: absolute;
+  top: 30px;
+  left: 0;
+  width: calc(100% - 1px);
+  height: calc(100% - 31px);
+  display: flex;
+  z-index: 200;
+  background-color: var(--theme-body-background);
+}
+
+.searchinput-container {
+  display: flex;
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.theme-dark .result-list li .subtitle {
+  color: var(--theme-comment-alt);
+}
+
+.arrow,
+.folder,
+.domain,
+.file,
+.worker,
+.refresh,
+.add-button {
+  fill: var(--theme-splitter-color);
+}
+
+.worker,
+.folder {
+  position: relative;
+  top: 2px;
+}
+
+.domain,
+.file,
+.worker,
+.refresh,
+.add-button {
+  position: relative;
+  top: 1px;
+}
+
+.domain svg,
+.folder svg,
+.worker svg,
+.refresh svg,
+.add-button svg {
+  width: 15px;
+}
+
+.file svg {
+  width: 13px;
+}
+
+.file svg,
+.domain svg,
+.folder svg,
+.refresh svg,
+.worker svg {
+  margin-inline-end: 5px;
+}
+
+.arrow svg {
+  fill: var(--theme-splitter-color);
+  margin-top: 3px;
+  transition: transform 0.25s ease;
+  width: 10px;
+}
+
+html:not([dir="rtl"]) .arrow svg {
+  margin-right: 5px;
+  transform: rotate(-90deg);
+}
+
+html[dir="rtl"] .arrow svg {
+  margin-left: 5px;
+  transform: rotate(90deg);
+}
+
+/* TODO (Amit): html is just for specificity. keep it like this? */
+html .arrow.expanded svg {
+  transform: rotate(0deg);
+}
+
+.arrow.hidden {
+  visibility: hidden;
+}
+.close-btn path {
+  fill: var(--theme-comment-alt);
+}
+
+.close-btn .close {
+  cursor: pointer;
+  width: 14px;
+  height: 14px;
+  padding: 2px;
+  text-align: center;
+  margin-top: 2px;
+  line-height: 7px;
+  transition: all 0.25s easeinout;
+}
+
+.close-btn .close svg {
+  width: 8px;
+}
+
+.close-btn:hover {
+  display: block;
+}
+
+.close-btn:hover .close {
+  background: var(--theme-selection-background);
+  border-radius: 2px;
+}
+
+.close-btn:hover .close path {
+  fill: white;
+}
+
+.close-btn-big {
+  padding: 11px;
+  margin-right: 7px;
+  width: 27px;
+  height: 40px;
+}
+
+.close-btn-big .close {
+  cursor: pointer;
+  display: inline-block;
+  padding: 2px;
+  text-align: center;
+  transition: all 0.25s easeinout;
+  line-height: 100%;
+  width: 16px;
+  height: 16px;
+}
+
+.close-btn-big .close svg {
+  width: 9px;
+  height: 9px;
+}
+
+.close-btn-big .close:hover {
+  border-radius: 2px;
+}
+
+.search-field {
+  width: calc(100% - 1px);
+  height: 27px;
+  background-color: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding-right: 10px;
+  display: flex;
+  flex-shrink: 0;
+}
+
+.search-field.big {
+  height: 40px;
+  font-size: 14px;
+}
+
+.search-field.big input {
+  font-size: 14px;
+}
+
+.search-field i {
+  display: block;
+  padding: 0;
+  width: 16px;
+}
+
+.search-field i svg {
+  width: 16px;
+}
+
+.search-field.big input {
+  line-height: 40px;
+}
+
+.search-field input {
+  border: none;
+  line-height: 30px;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-inactive);
+  width: calc(100% - 38px);
+  flex: 1;
+}
+
+.theme-dark .search-field input {
+  color: var(--theme-body-color-inactive);
+}
+
+.search-field i.magnifying-glass,
+.search-field i.sad-face {
+  padding: 6px;
+  width: 24px;
+}
+
+.search-field.big i.magnifying-glass,
+.search-field.big i.sad-face {
+  padding: 14px;
+  width: 40px;
+}
+
+.search-field .magnifying-glass path,
+.search-field .magnifying-glass ellipse {
+  stroke: var(--theme-splitter-color);
+}
+
+.search-field ::-webkit-input-placeholder {
+  color: var(--theme-body-color-inactive);
+}
+
+.search-field input::placeholder {
+  color: var(--theme-body-color-inactive);
+}
+
+.search-field input:focus {
+  outline-width: 0;
+}
+
+.search-field input.empty {
+  color: var(--theme-highlight-orange);
+}
+
+.search-field.big .summary {
+  line-height: 40px;
+}
+
+.search-field .summary {
+  line-height: 27px;
+  padding-right: 10px;
+  color: var(--theme-body-color-inactive);
+}
+
+.result-list {
+  list-style: none;
+  width: 100%;
+  background-color: var(--theme-toolbar-background);
+  margin: 0px;
+  padding: 0px;
+  overflow: auto;
+}
+
+.result-list.big {
+  max-height: calc(100% - 32px);
+}
+
+.result-list * {
+  user-select: none;
+}
+
+.result-list li {
+  color: var(--theme-body-color);
+  background-color: var(--theme-tab-toolbar-background);
+  padding: 4px 13px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.result-list li:first-child {
+  border-top: none;
+}
+
+.result-list.big li {
+  padding: 10px;
+  flex-direction: column;
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.result-list li:hover {
+  background: var(--theme-tab-toolbar-background);
+  cursor: pointer;
+}
+
+.result-list li.selected {
+  border: 1px solid var(--theme-selection-background);
+}
+
+.result-list.big li.selected {
+  padding-left: 9px;
+  padding-top: 9px;
+}
+
+.search-bar .result-list li.selected {
+  background-color: var(--theme-selection-background);
+  color: white;
+}
+
+.result-list li .title {
+  line-height: 1.5em;
+  word-break: break-all;
+}
+
+.result-list li.selected .title {
+  color: white;
+}
+
+.result-list.big li.selected .title {
+  color: var(--theme-body-color);
+}
+
+.result-list.big li .subtitle {
+  word-break: break-all;
+  color: var(--theme-body-color-inactive);
+}
+
+.result-list.big li .subtitle {
+  line-height: 1.5em;
+}
+
+.search-bar .result-list li.selected .subtitle {
+  color: white;
+}
+
+.search-bar .result-list {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.theme-dark .result-list {
+  background-color: var(--theme-body-background);
+}
+
+.autocomplete {
+  flex: 1;
+  width: 100%;
+}
+
+.autocomplete .no-result-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--theme-graphs-full-red);
+  font-size: 24px;
+  padding: 4px;
+  word-break: break-all;
+}
+
+.autocomplete .no-result-msg .sad-face {
+  width: 24px;
+  margin: 0 4px;
+  line-height: 0;
+  flex-shrink: 0;
+}
+
+.autocomplete .no-result-msg .sad-face svg {
+  fill: var(--theme-graphs-full-red);
+}
+.tree {
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+
+  white-space: nowrap;
+  overflow: auto;
+  min-width: 100%;
+}
+
+.tree button {
+  display: block;
+}
+
+.tree .node {
+  padding: 2px 5px;
+  position: relative;
+  cursor: pointer;
+}
+
+.tree .node.focused {
+  color: white;
+  background-color: var(--theme-selection-background);
+}
+
+html:not([dir="rtl"]) .tree .node > div {
+  margin-left: 10px;
+}
+
+html[dir="rtl"] .tree .node > div {
+  margin-right: 10px;
+}
+
+.tree .node.focused svg {
+  fill: white;
+}
+
+.tree-node button {
+  position: fixed;
+}
+.sources-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sources-panel * {
+  user-select: none;
+}
+
+.sources-header {
+  height: 30px;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  line-height: 30px;
+  font-size: 1.2em;
+  display: flex;
+  align-items: baseline;
+  user-select: none;
+  justify-content: flex-end;
+}
+
+.theme-dark .sources-header {
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.sources-header {
+  padding-inline-start: 10px;
+}
+
+.sources-header-info {
+  font-size: 12px;
+  color: var(--theme-comment-alt);
+  font-weight: lighter;
+  white-space: nowrap;
+  padding-inline-end: 10px;
+  cursor: pointer;
+}
+
+.sources-list {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.theme-dark .sources-list .tree .node:not(.focused) svg {
+  fill: var(--theme-comment);
+}
+
+.theme-dark .source-list .tree .node.focused {
+  background-color: var(--theme-tab-toolbar-background);
+}
+.toggle-button-start,
+.toggle-button-end {
+  transform: translate(0, 2px);
+  transition: transform 0.25s ease-in-out;
+  cursor: pointer;
+  padding: 4px 2px;
+}
+
+.toggle-button-start svg,
+.toggle-button-end svg {
+  width: 16px;
+  fill: var(--theme-comment);
+}
+
+.theme-dark .toggle-button-start svg,
+.theme-dark .toggle-button-end svg {
+  fill: var(--theme-comment-alt);
+}
+
+.toggle-button-end {
+  margin-left: auto;
+  margin-right: 5px;
+}
+
+.toggle-button-start {
+  margin-left: 5px;
+}
+
+html:not([dir="rtl"]) .toggle-button-end svg,
+html[dir="rtl"] .toggle-button-start svg {
+  transform: rotate(180deg);
+}
+
+html .toggle-button-end.vertical svg {
+  transform: rotate(-90deg);
+}
+
+.toggle-button-end.vertical {
+  margin-bottom: 2px;
+}
+
+.toggle-button-start.collapsed,
+.toggle-button-end.collapsed {
+  transform: rotate(180deg);
+}
+
+.source-footer {
+  background: var(--theme-toolbar-background);
+  border-top: 1px solid var(--theme-splitter-color);
+  position: absolute;
+  display: flex;
+  bottom: 0;
+  left: 0;
+  right: 1px;
+  opacity: 1;
+  z-index: 100;
+  user-select: none;
+  height: 27px;
+  box-sizing: border-box;
+}
+
+.source-footer .commands {
+  display: flex;
+}
+
+.source-footer .commands * {
+  user-select: none;
+}
+
+.source-footer > .commands > .action {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 200ms;
+  border: none;
+  background: transparent;
+  padding: 8px 0.7em;
+}
+
+.source-footer > .commands > .action i {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+:root.theme-dark .source-footer > .commands > .action {
+  fill: var(--theme-body-color);
+}
+
+:root.theme-dark .source-footer > .commands > .action:hover {
+  fill: var(--theme-selection-color);
+}
+
+.source-footer > .commands > .action svg {
+  height: 16px;
+  width: 16px;
+}
+
+.source-footer .commands .coverage {
+  color: var(--theme-body-color);
+}
+
+.coverage-on .source-footer .commands .coverage {
+  color: var(--theme-highlight-blue);
+  border: 1px solid var(--theme-body-color-inactive);
+  border-radius: 2px;
+}
+
+.search-bar {
+  display: flex;
+  flex-direction: column;
+  max-height: 50%;
+}
+
+.search-bar .search-field {
+  padding-left: 7px;
+}
+
+.search-bar .close-btn {
+  padding: 6px;
+}
+
+.search-bottom-bar * {
+  user-select: none;
+}
+
+.search-bottom-bar {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: space-between;
+  width: calc(100% - 1px);
+  height: 27px;
+  background-color: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 0 13px;
+}
+
+.search-bottom-bar button:focus {
+  outline: none;
+}
+
+.search-bottom-bar .search-modifiers {
+  display: flex;
+  align-items: center;
+}
+
+.search-bottom-bar .search-modifiers button {
+  padding: 0 3px;
+  margin: 0 3px;
+  border: none;
+  background: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+}
+
+.search-bottom-bar .search-modifiers button i {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  width: 16px;
+}
+
+.search-bottom-bar .search-modifiers button svg {
+  fill: var(--theme-comment-alt);
+  height: 16px;
+  width: 16px;
+}
+
+.search-bottom-bar .search-modifiers button svg:hover {
+  cursor: pointer;
+}
+
+.search-bottom-bar .search-modifiers button:active {
+  outline: none;
+}
+
+.search-bottom-bar .search-modifiers button.active svg {
+  fill: var(--theme-selection-background);
+}
+
+.theme-dark .search-bottom-bar .search-modifiers button.active svg {
+  fill: white;
+}
+
+.search-bottom-bar .search-modifiers button.disabled svg {
+  fill: var(--theme-comment-alt);
+}
+
+.search-bottom-bar .search-type-toggles {
+  display: flex;
+  align-items: center;
+}
+
+.search-bottom-bar .search-type-toggles .search-toggle-title {
+  color: var(--theme-body-color-inactive);
+  font-size: 11px;
+  font-weight: normal;
+  margin: 0;
+}
+
+.search-bottom-bar .search-type-toggles .search-type-btn {
+  margin: 0 6px;
+  border: none;
+  background: transparent;
+  color: var(--theme-comment-alt);
+}
+
+.search-bottom-bar .search-type-toggles .search-type-btn:hover {
+  cursor: pointer;
+}
+
+.search-bottom-bar .search-type-toggles .search-type-btn:active {
+  outline: none;
+}
+
+.search-bottom-bar .search-type-toggles .search-type-btn.active {
+  color: var(--theme-selection-background);
+}
+
+.theme-dark .search-bottom-bar .search-type-toggles .search-type-btn.active {
+  color: white;
+}
+
+.search-bar .result-list {
+  max-height: 230px;
+}
+.popover {
+  position: fixed;
+  z-index: 4;
+}
+
+.popover-gap {
+  height: 10px;
+  padding-top: 10px;
+}
+
+.popover::before,
+.popover::after {
+  content: '';
+  height: 0;
+  width: 0;
+  position: absolute;
+  border: 10px solid transparent;
+  left: calc(20% - 10px); /* corresponds to calculation in Popover.js */
+}
+
+.popover::before {
+  border-bottom-color: var(--theme-comment);
+  top: -10px;
+}
+
+.popover::after {
+  border-bottom-color: var(--theme-body-background);
+  top: -8px;
+}
+.preview {
+  background: var(--theme-body-background);
+  min-width: 200px;
+  min-height: 80px;
+  border: 1px solid var(--theme-comment);
+  padding: 10px;
+  height: auto;
+  min-height: inherit;
+  max-height: 130px;
+  overflow: auto;
+  max-width: 400px;
+}
+
+.preview .header {
+  width: 100%;
+  line-height: 20px;
+  border-bottom: 1px solid #cccccc;
+  display: flex;
+  flex-direction: column;
+}
+
+.preview .header .link {
+  align-self: flex-end;
+  color: var(--theme-highlight-blue);
+  text-decoration: underline;
+}
+.preview .header .link:hover {
+  cursor: pointer;
+}
+
+.selected-token {
+  background-color: var(--theme-search-overlays-semitransparent);
+  color: var(--theme-selection-color);
+}
+
+.selected-token:hover {
+  cursor: pointer;
+}
+
+.preview .function-signature {
+  padding-top: 10px;
+}
+
+.function-signature {
+  line-height: 20px;
+  align-self: center;
+}
+
+.function-signature .function-name {
+  color: var(--theme-highlight-blue);
+}
+
+.function-signature .param {
+  color: var(--string-color);
+}
+
+.function-signature .paren {
+  color: var(--object-color);
+}
+
+.function-signature .comma {
+  color: var(--object-color);
+}
+
+.theme-dark .preview {
+  border-color: var(--theme-body-color);
+}
+
+.theme-dark .preview .arrow svg {
+  fill: var(--theme-comment);
+}
+.conditional-breakpoint-panel {
+  cursor: initial;
+  margin: 1em 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--theme-toolbar-background);
+  border-top: 1px solid var(--theme-splitter-color);
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.conditional-breakpoint-panel .prompt {
+  font-size: 1.8em;
+  color: var(--theme-comment-alt);
+  padding-left: 3px;
+}
+
+.conditional-breakpoint-panel input {
+  margin: 5px 10px;
+  width: calc(100% - 4em);
+  border: none;
+  background: var(--theme-toolbar-background);
+  font-size: 14px;
+  color: var(--theme-comment);
+  line-height: 30px;
+}
+
+.conditional-breakpoint-panel input:focus {
+  outline-width: 0;
+}
+/* vim:set ts=2 sw=2 sts=2 et: */
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * There's a known codemirror flex issue with chrome that this addresses.
+ * BUG https://github.com/devtools-html/debugger.html/issues/63
+ */
+.editor-wrapper {
+  position: absolute;
+  height: calc(100% - 31px);
+  width: 100%;
+  top: 30px;
+  left: 0px;
+}
+
+html[dir="rtl"] .editor-mount {
+  direction: ltr;
+}
+
+.editor-wrapper .breakpoints {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.function-search {
+  max-height: 300px;
+  overflow: hidden;
+}
+
+.function-search .results {
+  height: auto;
+}
+
+.editor.hit-marker {
+  height: 14px;
+}
+
+.coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-line,
+.coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-gutter-wrapper {
+  opacity: 0.5;
+}
+
+.editor.new-breakpoint svg {
+  fill: var(--theme-selection-background);
+  width: 60px;
+  height: 14px;
+  position: absolute;
+  top: 0px;
+  right: -4px;
+}
+
+.new-breakpoint.has-condition svg {
+  fill: var(--theme-graphs-yellow);
+}
+
+.editor.new-breakpoint.breakpoint-disabled svg {
+  opacity: 0.3;
+}
+
+.CodeMirror {
+  width: 100%;
+  height: 100%;
+}
+
+.editor-wrapper .editor-mount {
+  width: 100%;
+  height: calc(100% - 32px);
+  background-color: var(--theme-body-background);
+}
+
+.search-bar ~ .editor-mount {
+  height: calc(100% - 72px);
+}
+
+.CodeMirror-linenumber {
+  font-size: 11px;
+  line-height: 14px;
+}
+
+/* set the linenumber white when there is a breakpoint */
+.new-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
+  color: white;
+}
+
+/* move the breakpoint below the linenumber */
+.new-breakpoint .CodeMirror-gutter-elt:last-child {
+  z-index: 0;
+}
+
+.editor-wrapper .CodeMirror-line {
+  font-size: 11px;
+  line-height: 14px;
+}
+
+.theme-dark .editor-wrapper .CodeMirror-line .cm-comment {
+  color: var(--theme-content-color3);
+}
+
+.debug-line .CodeMirror-line {
+  background-color: var(--breakpoint-active-color) !important;
+}
+
+/* Don't display the highlight color since the debug line
+   is already highlighted */
+.debug-line .CodeMirror-activeline-background {
+  display: none;
+}
+
+.highlight-line .CodeMirror-line {
+  animation: fade-highlight-out 1.5s normal forwards;
+}
+
+@keyframes fade-highlight-out {
+  0% { background-color: var(--theme-highlight-gray); }
+  100% { background-color: transparent; }
+}
+
+.welcomebox {
+  width: calc(100% - 1px);
+
+  /* Offsetting it by 30px for the sources-header area */
+  height: calc(100% - 30px);
+  position: absolute;
+  top: 30px;
+  left: 0;
+  padding: 50px 0;
+  text-align: center;
+  font-size: 1.25em;
+  color: var(--theme-comment-alt);
+  background-color: var(--theme-tab-toolbar-background);
+  font-weight: lighter;
+  z-index: 100;
+  user-select: none;
+}
+.input-expression {
+  width: 100%;
+  margin: 0px;
+  border: 1px;
+  cursor: pointer;
+  background-color: var(--theme-body-background);
+  font-size: 12px;
+  padding: 0px 20px;
+  color: var(--theme-highlight-blue);
+}
+
+.input-expression::-webkit-input-placeholder {
+  text-align: center;
+  font-style: italic;
+  color: var(--theme-comment-alt);
+}
+
+.input-expression::placeholder {
+  text-align: center;
+  font-style: italic;
+  color: var(--theme-comment-alt);
+  opacity: 1;
+}
+
+.input-expression:focus {
+  outline: none;
+  cursor: text;
+}
+
+.expression-input-container {
+  padding: 0.5em;
+  display: flex;
+}
+
+.expression-container {
+  border: 1px;
+  padding: 8px 5px 0px 0px;
+  width: 100%;
+  color: var(--theme-body-color);
+  background-color: var(--theme-body-background);
+  display: flex;
+  position: relative;
+}
+
+.expression-container > .tree {
+  width: 100%;
+  overflow: hidden;
+}
+
+:root.theme-light .expression-container:hover {
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+:root.theme-dark .expression-container:hover {
+  background-color: var(--search-overlays-semitransparent);
+}
+
+.expression-container .close-btn {
+  position: absolute;
+  inset-inline-end: 6px;
+  top: 6px;
+}
+
+.expression-container .close {
+  display: none;
+}
+
+.expression-container:hover .close {
+  display: block;
+}
+
+.expression-input {
+  cursor: pointer;
+  max-width: 50%;
+}
+
+.expression-separator {
+  padding: 0px 5px;
+}
+
+.expression-value {
+  overflow-x: scroll;
+  color: var(--theme-content-color2);
+  max-width: 50% !important;
+}
+
+.expression-error {
+  color: var(--theme-highlight-red);
+}
+
+.why-paused {
+  background-color: var(--breakpoint-active-color);
+  border: 1.7px solid var(--breakpoint-active-color);
+  color: var(--theme-highlight-blue);
+  padding: 10px 10px 10px 20px;
+  white-space: normal;
+  opacity: 0.9;
+  font-size: 12px;
+  font-weight: bold;
+  flex: 0 1 auto;
+}
+
+.theme-dark .secondary-panes .why-paused {
+  color: white;
+}
+.breakpoints-list * {
+  user-select: none;
+}
+
+.breakpoints-list .breakpoint {
+  font-size: 12px;
+  color: var(--theme-content-color1);
+  padding: 0.5em 1px;
+  line-height: 1em;
+  position: relative;
+  transition: all 0.25s ease;
+}
+
+html[dir="rtl"] .breakpoints-list .breakpoint {
+  border-right: 4px solid transparent;
+}
+
+html:not([dir="rtl"]) .breakpoints-list .breakpoint {
+  border-left: 4px solid transparent;
+}
+
+.breakpoints-list .breakpoint:last-of-type {
+  padding-bottom: 0.45em;
+}
+
+html:not([dir="rtl"]) .breakpoints-list .breakpoint.is-conditional {
+  border-left-color: var(--theme-graphs-yellow);
+}
+
+html[dir="rtl"] .breakpoints-list .breakpoint.is-conditional {
+  border-right-color: var(--theme-graphs-yellow);
+}
+
+html .breakpoints-list .breakpoint.paused {
+  background-color: var(--theme-toolbar-background-alt);
+  border-color: var(--breakpoint-active-color);
+}
+
+.breakpoints-list .breakpoint.disabled .breakpoint-label {
+  color: var(--theme-content-color3);
+  transition: color 0.5s linear;
+}
+
+.breakpoints-list .breakpoint:hover {
+  cursor: pointer;
+  background-color: var(--search-overlays-semitransparent);
+}
+
+.breakpoints-list .breakpoint.paused:hover {
+  border-color: var(--breakpoint-active-color-hover);
+}
+
+.breakpoints-list .breakpoint-checkbox {
+  margin-inline-start: 0;
+}
+
+.breakpoints-list .breakpoint-label {
+  display: inline-block;
+  padding-inline-start: 2px;
+  padding-bottom: 4px;
+}
+
+.breakpoints-list .pause-indicator {
+  flex: 0 1 content;
+  order: 3;
+}
+
+:root.theme-light .breakpoint-snippet,
+:root.theme-firebug .breakpoint-snippet {
+  color: var(--theme-comment);
+}
+
+:root.theme-dark .breakpoint-snippet {
+  color: var(--theme-body-color);
+  opacity: 0.6;
+}
+
+.breakpoint-snippet {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-inline-start: 18px;
+  padding-inline-end: 18px;
+}
+
+.breakpoint .close-btn {
+  position: absolute;
+  inset-inline-end: 6px;
+  top: 12px;
+}
+
+.breakpoint .close {
+  display: none;
+}
+
+.breakpoint:hover .close {
+  display: block;
+}
+
+.object-node.default-property {
+  opacity: 0.6;
+}
+
+.object-label {
+  color: var(--theme-highlight-blue);
+}
+
+.objectBox-object,
+.objectBox-string,
+.objectBox-text,
+.objectBox-table,
+.objectLink-textNode,
+.objectLink-event,
+.objectLink-eventLog,
+.objectLink-regexp,
+.objectLink-object,
+.objectLink-Date,
+.theme-dark .objectBox-object,
+.theme-light .objectBox-object {
+  white-space: nowrap;
+}
+
+.scopes-list .tree-node {
+  overflow: hidden;
+}
+.frames ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.frames ul li {
+  cursor: pointer;
+  padding: 7px 10px 7px 21px;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+}
+
+/* Style the focused call frame like so:
+.frames ul li:focus {
+  border: 3px solid red;
+}
+*/
+
+.frames ul li * {
+  user-select: none;
+}
+
+.frames ul li:nth-of-type(2n) {
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.frames .location {
+  font-weight: lighter;
+}
+
+:root.theme-light .frames .location,
+:root.theme-firebug .frames .location {
+  color: var(--theme-comment);
+}
+
+:root.theme-dark .frames .location {
+  color: var(--theme-body-color);
+  opacity: 0.6;
+}
+
+.frames .title {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-right: 1em;
+}
+
+.frames ul li:hover,
+.frames ul li:focus {
+  background-color: var(--theme-toolbar-background-alt);
+  outline: none;
+}
+
+.frames ul li.selected {
+  background-color: var(--theme-selection-background);
+  color: white;
+}
+
+:root.theme-light .frames ul li.selected .location,
+:root.theme-firebug .frames ul li.selected .location,
+:root.theme-dark .frames ul li.selected .location {
+  color: white;
+}
+
+:root.theme-dark .frames ul li:hover .location,
+:root.theme-dark .frames ul li.selected .location {
+  opacity: 1;
+}
+
+.show-more {
+  cursor: pointer;
+  text-align: center;
+  padding: 8px 0px;
+  border-top: 1px solid var(--theme-splitter-color);
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.show-more:hover {
+  background-color: var(--search-overlays-semitransparent);
+}
+.event-listeners {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.event-listeners .listener {
+  cursor: pointer;
+  padding: 7px 10px 7px 21px;
+  clear: both;
+  overflow: hidden;
+}
+
+.event-listeners .listener * {
+  user-select: none;
+}
+
+.event-listeners .listener:nth-of-type(2n) {
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.event-listeners .listener .type {
+  color: var(--theme-highlight-bluegrey);
+  padding-right: 5px;
+}
+
+.event-listeners .listener .selector {
+  color: var(--theme-content-color2);
+}
+
+.event-listeners .listener-checkbox {
+  margin-left: 0;
+}
+
+.event-listeners .listener .close-btn {
+  float: right;
+}
+
+.event-listeners .listener .close {
+  display: none;
+}
+
+.event-listeners .listener:hover .close {
+  display: block;
+}
+.accordion {
+  background-color: var(--theme-body-background);
+  width: 100%;
+}
+
+.accordion ._header {
+  background-color: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 5px;
+  transition: all 0.25s ease;
+  width: 100%;
+
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.accordion ._header {
+  display: flex;
+}
+
+.accordion ._header:hover {
+  background-color: var(--search-overlays-semitransparent);
+}
+
+.accordion ._header button svg,
+.accordion ._header:hover button svg {
+  fill: currentColor;
+  height: 16px;
+}
+
+.accordion ._content {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  font-size: 12px;
+}
+
+.accordion ._header .header-buttons {
+  display: flex;
+  margin-left: auto;
+  padding-right: 5px;
+}
+
+.accordion .header-buttons .add-button {
+  font-size: 180%;
+  text-align: center;
+  line-height: 16px;
+}
+
+.accordion .header-buttons button {
+  color: var(--theme-body-color);
+  border: none;
+  background: none;
+  outline: 0;
+  padding: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.accordion .header-buttons button::-moz-focus-inner {
+  border: none;
+}
+.command-bar {
+  flex: 0 0 30px;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  display: flex;
+  height: 30px;
+  overflow: hidden;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--theme-body-background);
+}
+
+.theme-dark .command-bar {
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.command-bar > button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  transition: all 0.25s ease;
+  padding: 8px 5px;
+  position: relative;
+  fill: currentColor;
+}
+
+:root.theme-dark .command-bar > button {
+  color: var(--theme-body-color);
+}
+
+.command-bar > button {
+  margin-inline-end: 0.7em;
+}
+
+html .command-bar > button:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.command-bar > button > i {
+  height: 100%;
+  width: 100%;
+  display: block;
+}
+
+.command-bar > button > i > svg {
+  width: 16px;
+  height: 16px;
+}
+
+.command-bar button.pause-exceptions {
+  margin-inline-start: 0.5em;
+}
+
+.command-bar .subSettings {
+  float: right;
+}
+
+.command-bar button.pause-exceptions.uncaught {
+  color: var(--theme-highlight-purple);
+}
+
+.command-bar button.pause-exceptions.all {
+  color: var(--theme-highlight-blue);
+}
+.secondary-panes {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  white-space: nowrap;
+}
+
+.secondary-panes * {
+  user-select: none;
+}
+
+.secondary-panes .accordion {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1 0 auto;
+}
+
+.pane {
+  color: var(--theme-body-color);
+}
+
+.pane .pane-info {
+  font-style: italic;
+  text-align: center;
+  padding: 0.5em;
+  user-select: none;
+}
+
+.theme-dark .secondary-panes .accordion .arrow svg {
+  fill: var(--theme-comment);
+}
+.welcomebox {
+  width: calc(100% - 1px);
+
+  /* Offsetting it by 30px for the sources-header area */
+  height: calc(100% - 30px);
+  position: absolute;
+  top: 30px;
+  left: 0;
+  padding: 50px 0 0 0;
+  text-align: center;
+  font-size: 1.25em;
+  color: var(--theme-comment-alt);
+  background-color: var(--theme-tab-toolbar-background);
+  font-weight: lighter;
+  z-index: 100;
+}
+
+html .welcomebox .toggle-button-end {
+  bottom: 11px;
+  position: absolute;
+  top: auto;
+}
+.dropdown {
+  --width: 150px;
+  background: var(--theme-body-background);
+  border: 1px solid var(--theme-splitter-color);
+  box-shadow: 0 4px 4px 0 var(--search-overlays-semitransparent);
+  max-height: 300px;
+  position: absolute;
+  right: 8px;
+  top: 35px;
+  width: var(--width);
+  z-index: 1000;
+}
+
+html[dir="rtl"] .dropdown {
+  right: calc((var(--width) - 11px) * (-1));
+}
+
+.dropdown-block {
+  padding: 0px 2px;
+  position: relative;
+  align-self: center;
+}
+
+.dropdown-button {
+  cursor: pointer;
+  color: var(--theme-comment);
+  background: none;
+  border: none;
+  padding: 0;
+  font-weight: 100;
+  margin-top: 6px;
+  font-size: 14px;
+}
+
+.dropdown li {
+  transition: all 0.25s ease;
+  padding: 2px 10px 10px 5px;
+  overflow: hidden;
+  height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown li:hover {
+  background-color: var(--search-overlays-semitransparent);
+  cursor: pointer;
+}
+
+.dropdown ul {
+  list-style: none;
+  line-height: 2em;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+}
+
+.dropdown-mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  z-index: 999;
+  left: 0;
+  top: 0;
+}
+.source-header {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.source-header * {
+  user-select: none;
+}
+
+.source-header .new-tab-btn {
+  padding: 0px 4px;
+  margin-top: 8px;
+  cursor: pointer;
+  fill: var(--theme-comment);
+  transition: 0.1s ease;
+  align-self: center;
+}
+
+.source-header .new-tab-btn svg {
+  width: 12px;
+}
+
+.source-tabs {
+  max-width: calc(100% - 80px);
+  align-self: flex-start;
+}
+
+.source-tab {
+  border: 1px solid transparent;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  transition: all 0.25s ease;
+  min-width: 40px;
+  overflow: hidden;
+  padding: 6px;
+  margin-inline-start: 3px;
+  margin-top: 2px;
+}
+
+.source-tab:hover {
+  background-color: var(--theme-toolbar-background-alt);
+  border-color: var(--theme-splitter-color);
+  cursor: pointer;
+}
+
+.source-tab.active {
+  color: var(--theme-body-color);
+  background-color: var(--theme-body-background);
+  border-color: var(--theme-splitter-color);
+  border-bottom-color: transparent;
+}
+
+.source-tab.active path,
+.source-tab:hover path {
+  fill: var(--theme-body-color);
+}
+
+.source-tab .prettyPrint {
+  line-height: 0;
+}
+
+.source-tab .prettyPrint svg {
+  height: 12px;
+  width: 12px;
+}
+
+.source-tab .prettyPrint path {
+  fill: var(--theme-textbox-box-shadow);
+}
+
+.source-tab .filename {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.source-tab.pretty .filename {
+  padding-inline-start: 8px;
+}
+
+.source-tab .close-btn {
+  visibility: hidden;
+  line-height: 0;
+  margin-inline-start: 6px;
+}
+
+.source-tab.active .close-btn {
+  visibility: visible;
+}
+
+.source-tab:hover .close-btn {
+  visibility: visible;
+}
+
+.source-tab .close-btn .close {
+  padding: 0;
+  margin-top: 0;
+  display: inline-flex;
+  justify-content: center;
+}
diff --git a/layout/style/test/gtest/generate_example_stylesheet.py b/layout/style/test/gtest/generate_example_stylesheet.py
new file mode 100644
index 0000000000..5c69f5c702
--- /dev/null
+++ b/layout/style/test/gtest/generate_example_stylesheet.py
@@ -0,0 +1,16 @@
+def main(output, stylesheet):
+    css = open(stylesheet, "r").read()
+    css = (
+        css.replace("\\", "\\\\")
+        .replace("\r", "\\r")
+        .replace("\n", "\\n")
+        .replace('"', '\\"')
+    )
+
+    # Work around "error C2026: string too big"
+    # https://msdn.microsoft.com/en-us/library/dddywwsc.aspx
+    chunk_size = 10000
+    chunks = ('"%s"' % css[i : i + chunk_size] for i in range(0, len(css), chunk_size))
+
+    header = "#define EXAMPLE_STYLESHEET " + " ".join(chunks)
+    output.write(header)
diff --git a/layout/style/test/gtest/moz.build b/layout/style/test/gtest/moz.build
new file mode 100644
index 0000000000..aa3adbc9ab
--- /dev/null
+++ b/layout/style/test/gtest/moz.build
@@ -0,0 +1,24 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+Library("style-gtest")
+
+UNIFIED_SOURCES = [
+    "ImportScannerTest.cpp",
+    "StyloParsingBench.cpp",
+]
+
+LOCAL_INCLUDES += [
+    "/layout/style",
+]
+
+GeneratedFile(
+    "ExampleStylesheet.h",
+    script="generate_example_stylesheet.py",
+    inputs=["example.css"],
+)
+
+FINAL_LIBRARY = "xul-gtest"
diff --git a/layout/style/test/mapped.css b/layout/style/test/mapped.css
new file mode 100644
index 0000000000..7aebaecc82
--- /dev/null
+++ b/layout/style/test/mapped.css
@@ -0,0 +1,3 @@
+div {
+  color: #f06;
+}
diff --git a/layout/style/test/mapped.css^headers^ b/layout/style/test/mapped.css^headers^
new file mode 100644
index 0000000000..3b74491556
--- /dev/null
+++ b/layout/style/test/mapped.css^headers^
@@ -0,0 +1 @@
+X-SourceMap: mapped.css.map
diff --git a/layout/style/test/mapped2.css b/layout/style/test/mapped2.css
new file mode 100644
index 0000000000..fc42a5abef
--- /dev/null
+++ b/layout/style/test/mapped2.css
@@ -0,0 +1,4 @@
+span {
+  color: #f06;
+}
+//# sourceMappingURL: overridden-by-headers
diff --git a/layout/style/test/mapped2.css^headers^ b/layout/style/test/mapped2.css^headers^
new file mode 100644
index 0000000000..1656e66589
--- /dev/null
+++ b/layout/style/test/mapped2.css^headers^
@@ -0,0 +1,2 @@
+SourceMap: mapped2.css.map
+X-SourceMap: ignored.css.map
diff --git a/layout/style/test/media_queries_iframe.html b/layout/style/test/media_queries_iframe.html
new file mode 100644
index 0000000000..141ecdcd94
--- /dev/null
+++ b/layout/style/test/media_queries_iframe.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title>Media Queries Test inner frame</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<style type="text/css" id="style" media="all">
+	body { text-decoration: underline; }
+	</style>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/layout/style/test/media_queries_iframe2.html b/layout/style/test/media_queries_iframe2.html
new file mode 100644
index 0000000000..8768cd53c6
--- /dev/null
+++ b/layout/style/test/media_queries_iframe2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>Media Queries Test inner frame</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+  </style>
+  <style type="text/css" id="style" media="all and (display-mode: browser)">
+    body { background: yellow; }
+  </style>
+  <style type="text/css" id="style" media="all and (display-mode: standalone)">
+    body { background: green; }
+  </style>
+  <style type="text/css" id="style" media="all and (display-mode: minimal-ui)">
+    body { background: red; }
+  </style>
+  <style type="text/css" id="style" media="all and (display-mode: fullscreen)">
+    body { background: blue; }
+  </style>
+</head>
+<body>
+<script>
+window.addEventListener("message", e => {
+  if (e.data == "get-background-color") {
+    let { backgroundColor } = document.defaultView.getComputedStyle(document.body);
+    e.source.postMessage({ backgroundColor }, e.origin);
+  }
+});
+</script>
+</body>
+</html>
diff --git a/layout/style/test/mochitest.ini b/layout/style/test/mochitest.ini
new file mode 100644
index 0000000000..4b16c4e93f
--- /dev/null
+++ b/layout/style/test/mochitest.ini
@@ -0,0 +1,443 @@
+[DEFAULT]
+prefs =
+  dom.animations-api.compositing.enabled=true
+  dom.animations-api.core.enabled=true
+  dom.animations-api.getAnimations.enabled=true
+  dom.animations-api.implicit-keyframes.enabled=true
+  dom.animations-api.timelines.enabled=true
+  dom.animations.mainthread-synchronization-with-geometric-animations=true
+  gfx.omta.background-color=true
+  gfx.font_loader.delay=0
+  layout.css.accent-color.enabled=true
+  layout.css.container-queries.enabled=true
+  layout.css.constructable-stylesheets.enabled=true
+  layout.css.individual-transform.enabled=true
+  layout.css.motion-path.enabled=true
+  layout.css.motion-path-ray.enabled=true
+  layout.css.motion-path-offset-position.enabled=true
+  layout.css.overflow-logical.enabled=true
+  layout.css.step-position-jump.enabled=true
+  layout.css.backdrop-filter.enabled=true
+  layout.css.fit-content-function.enabled=true
+  layout.css.scroll-driven-animations.enabled=true
+  layout.css.scrollbar-gutter.enabled=true
+  layout.css.linear-easing-function.enabled=true
+  layout.css.animation-composition.enabled=true
+support-files =
+  animation_utils.js
+  bug1729861.js
+  ccd-quirks.html
+  ccd.sjs
+  ccd-standards.html
+  chrome/bug418986-2.js
+  chrome/match.png
+  chrome/mismatch.png
+  descriptor_database.js
+  !/dom/events/test/event_leak_utils.js
+  empty.html
+  file_computed_style_bfcache_display_none.html
+  file_computed_style_bfcache_display_none2.html
+  media_queries_iframe.html
+  media_queries_iframe2.html
+  neverending_font_load.sjs
+  neverending_stylesheet_load.sjs
+  post-redirect-1.css
+  post-redirect-2.css
+  post-redirect-3.css
+  property_database.js
+  redirect.sjs
+  style_attribute_tests.js
+  support/blue-100x100.png
+  support/1x1-transparent.png
+  unstyled.css
+  unstyled-frame.css
+  unstyled-frame.xml
+  unstyled.xml
+  viewport_units_iframe.html
+  visited_image_loading_frame_empty.html
+  visited_image_loading_frame.html
+  visited_image_loading.sjs
+  visited-lying-inner.html
+  visited-pref-iframe.html
+
+[test_acid3_test46.html]
+[test_addSheet.html]
+support-files = additional_sheets_helper.html
+[test_additional_sheets.html]
+support-files = additional_sheets_helper.html
+[test_align_justify_computed_values.html]
+[test_all_shorthand.html]
+[test_animations.html]
+[test_animations_async_tests.html]
+support-files = Ahem.ttf file_animations_async_tests.html
+[test_animations_dynamic_changes.html]
+[test_animations_effect_timing_duration.html]
+[test_animations_effect_timing_enddelay.html]
+[test_animations_effect_timing_iterations.html]
+[test_animations_event_handler_attribute.html]
+[test_animations_event_order.html]
+[test_animations_iterationstart.html]
+[test_animations_omta.html]
+[test_animations_omta_scroll.html]
+support-files = file_animations_omta_scroll.html
+[test_animations_omta_scroll_rtl.html]
+support-files = file_animations_omta_scroll_rtl.html
+[test_animations_omta_start.html]
+[test_animations_pausing.html]
+[test_animations_playbackrate.html]
+[test_animations_reverse.html]
+[test_animations_styles_on_event.html]
+[test_animations_variable_changes.html]
+[test_animations_with_disabled_properties.html]
+support-files = file_animations_with_disabled_properties.html
+[test_any_dynamic.html]
+[test_area_url_cursor.html]
+[test_asyncopen.html]
+[test_at_rule_parse_serialize.html]
+[test_attribute_selector_eof_behavior.html]
+[test_backdrop_filter_enabled_state.html]
+[test_background_blend_mode.html]
+[test_border_device_pixel_rounding_initial_style.html]
+[test_box_size_keywords.html]
+[test_bug1055933.html]
+support-files = file_bug1055933_circle-xxl.png
+[test_bug1089417.html]
+support-files = file_bug1089417_iframe.html
+[test_bug1112014.html]
+[test_bug1203766.html]
+[test_bug1232829.html]
+[test_bug1292447.html]
+[test_bug1330375.html]
+[test_bug1371488.html]
+[test_bug1375944.html]
+support-files = file_bug1375944.html Ahem.ttf
+[test_bug1382568.html]
+support-files = bug1382568-iframe.html
+[test_bug1394302.html]
+[test_bug1443344-1.html]
+scheme = https
+support-files = file_bug1443344.css
+[test_bug1443344-2.html]
+scheme = https
+support-files = file_bug1443344.css
+[test_bug1451199-1.html]
+[test_bug1451199-2.html]
+[test_bug1490890.html]
+[test_bug1505254.html]
+[test_bug160403.html]
+[test_bug1729861.html]
+[test_bug200089.html]
+[test_bug221428.html]
+[test_bug229915.html]
+[test_bug302186.html]
+[test_bug319381.html]
+[test_bug357614.html]
+[test_bug363146.html]
+[test_bug372770.html]
+[test_bug373293.html]
+[test_bug377947.html]
+[test_bug379440.html]
+[test_bug379741.html]
+[test_bug382027.html]
+[test_bug383075.html]
+[test_bug387615.html]
+[test_bug389464.html]
+[test_bug391034.html]
+[test_bug391221.html]
+[test_bug397427.html]
+fail-if = xorigin
+skip-if =
+  http3
+[test_bug399349.html]
+[test_bug401046.html]
+skip-if = true # Bug 701060
+[test_bug405818.html]
+[test_bug412901.html]
+[test_bug413958.html]
+[test_bug418986-2.html]
+[test_bug437915.html]
+[test_bug450191.html]
+[test_bug470769.html]
+[test_bug499655.html]
+[test_bug499655.xhtml]
+[test_bug511909.html]
+[test_bug517224.html]
+support-files = bug517224.sjs
+[test_bug524175.html]
+[test_bug525952.html]
+[test_bug534804.html]
+[test_bug573255.html]
+[test_bug580685.html]
+[test_bug621351.html]
+[test_bug635286.html]
+[test_bug645998.html]
+support-files = file_bug645998-1.css file_bug645998-2.css
+[test_bug652486.html]
+[test_bug657143.html]
+[test_bug667520.html]
+[test_bug716226.html]
+[test_bug732153.html]
+[test_bug732209.html]
+support-files = bug732209-css.sjs
+skip-if =
+  http3
+[test_bug73586.html]
+[test_bug74880.html]
+[test_bug765590.html]
+[test_bug771043.html]
+[test_bug795520.html]
+[test_bug798843_pref.html]
+[test_bug829816.html]
+support-files = file_bug829816.css
+[test_bug874919.html]
+[test_bug887741_at-rules_in_declaration_lists.html]
+[test_bug892929.html]
+[test_bug98997.html]
+[test_cascade.html]
+[test_ch_ex_no_infloops.html]
+[test_change_hint_optimizations.html]
+[test_clip-path_polygon.html]
+[test_color_rounding.html]
+[test_compute_data_with_start_struct.html]
+skip-if = toolkit == 'android'
+[test_computed_style.html]
+[test_computed_style_bfcache_display_none.html]
+[test_computed_style_difference.html]
+[test_computed_style_grid_with_pseudo.html]
+[test_computed_style_in_created_document.html]
+[test_computed_style_min_size_auto.html]
+[test_computed_style_no_flush.html]
+[test_computed_style_no_pseudo.html]
+[test_computed_style_prefs.html]
+[test_condition_text.html]
+[test_constructable_stylesheets_chrome_only_rules_in_content.html]
+[test_counter_descriptor_storage.html]
+[test_counter_style.html]
+[test_crash_with_content_policy.html]
+support-files = file_bug1381233.html
+[test_css_cross_domain.html]
+skip-if =
+  http3
+[test_css_cross_domain_no_orb.html]
+skip-if =
+  http3
+[test_css_eof_handling.html]
+[test_css_escape_api.html]
+[test_css_function_mismatched_parenthesis.html]
+[test_css_loader_crossorigin_data_url.html]
+[test_css_parse_error_smoketest.html]
+[test_css_supports.html]
+[test_css_supports_variables.html]
+[test_cue_restrictions.html]
+[test_custom_content_inheritance.html]
+[test_default_bidi_css.html]
+[test_default_computed_style.html]
+[test_descriptor_storage.html]
+[test_descriptor_syntax_errors.html]
+[test_display_mode.html]
+skip-if =
+  http3
+[test_dont_use_document_colors.html]
+[test_dont_use_document_fonts.html]
+[test_dynamic_change_causing_reflow.html]
+[test_exposed_prop_accessors.html]
+[test_extra_inherit_initial.html]
+[test_first_letter_restrictions.html]
+[test_first_line_restrictions.html]
+[test_flexbox_child_display_values.xhtml]
+[test_flexbox_flex_grow_and_shrink.html]
+[test_flexbox_flex_shorthand.html]
+[test_flexbox_focus_order.html]
+[test_flexbox_layout.html]
+support-files = flexbox_layout_testcases.js
+[test_flexbox_order.html]
+[test_flexbox_order_abspos.html]
+[test_flexbox_order_table.html]
+[test_flexbox_reflow_counts.html]
+skip-if = verify
+[test_flushing_frame.html]
+[test_font_face_cascade.html]
+[test_font_face_parser.html]
+[test_font_family_parsing.html]
+[test_font_family_serialization.html]
+[test_font_loading_api.html]
+support-files =
+  BitPattern.woff
+  file_font_loading_api_vframe.html
+# This test checks font loading state. When loaded second time, fonts may be
+# loaded synchronously, causing this test to fail in test-verify task.
+skip-if =
+  verify || toolkit == 'android' # Bug 1455824
+  http3
+[test_garbage_at_end_of_declarations.html]
+[test_grid_computed_values.html]
+[test_grid_container_shorthands.html]
+[test_grid_item_shorthands.html]
+[test_grid_shorthand_serialization.html]
+[test_group_insertRule.html]
+[test_hover_on_part.html]
+[test_hover_quirk.html]
+[test_html_attribute_computed_values.html]
+[test_ident_escaping.html]
+[test_img_src_causing_reflow.html]
+[test_import_preload.html]
+support-files = slow_load.sjs
+# Test is slightly racy and on Android it fails frequently enough to be
+# annoying.
+skip-if = toolkit == 'android'
+[test_inherit_computation.html]
+[test_inherit_storage.html]
+[test_initial_computation.html]
+[test_initial_storage.html]
+[test_invalidation_basic.html]
+[test_keyframes_rules.html]
+[test_keyframes_vendor_prefix.html]
+[test_load_events_on_stylesheets.html]
+support-files = slow_broken_sheet.sjs slow_ok_sheet.sjs
+[test_logical_properties.html]
+[test_marker_restrictions.html]
+[test_mask_image_CORS.html]
+[test_media_queries.html]
+# times out on verify, see bug 1461033.
+skip-if = verify
+support-files = chrome/chrome-only-media-queries.js
+[test_media_queries_dynamic.html]
+skip-if = xorigin # Crashes, Assertion failure: mInFlightProcessId == 0, at /builds/worker/checkouts/gecko/docshell/base/CanonicalBrowsingContext.cpp:110, [Child][MessageChannel] Error: (msgtype=0xFFF7,name=<unknown IPC msg name>) Channel error: cannot send/recv
+[test_media_query_list.html]
+[test_media_query_serialization.html]
+[test_medialist_privilege.html]
+[test_moz_device_pixel_ratio.html]
+[test_moz_prefixed_cursor.html]
+[test_mq_any_hover_and_any_pointer.html]
+[test_mq_changes_in_iframe.html]
+support-files = mq_changes_child.html
+run-if = !headless && (os == 'mac' || toolkit == 'android' || toolkit == 'gtk')
+[test_mq_hover_and_pointer.html]
+[test_mq_prefers_contrast_dynamic.html]
+run-if = !headless && (os == 'mac' || toolkit == 'android' || toolkit == 'gtk')
+[test_mq_prefers_reduced_motion_dynamic.html]
+run-if = !headless && (os == 'mac' || toolkit == 'android' || toolkit == 'gtk')
+[test_mql_event_listener_leaks.html]
+[test_namespace_rule.html]
+[test_non_content_accessible_env_vars.html]
+[test_non_content_accessible_properties.html]
+[test_non_content_accessible_pseudos.html]
+[test_non_content_accessible_values.html]
+[test_non_matching_sheet_media.html]
+[test_of_type_selectors.xhtml]
+[test_overscroll_behavior_pref.html]
+[test_page_parser.html]
+[test_parse_eof.html]
+[test_parse_ident.html]
+[test_parse_rule.html]
+[test_parse_url.html]
+[test_parser_diagnostics_unprintables.html]
+[test_pixel_lengths.html]
+[test_placeholder_restrictions.html]
+[test_pointer-events.html]
+[test_position_float_display.html]
+[test_position_sticky.html]
+[test_prefers_contrast_color_pairs.html]
+[test_priority_preservation.html]
+[test_property_database.html]
+[test_property_syntax_errors.html]
+[test_pseudo_display_fixup.html]
+[test_pseudoelement_parsing.html]
+[test_pseudoelement_state.html]
+skip-if = (verify && debug && (os == 'linux'))
+[test_query_container_for.html]
+[test_redundant_font_download.html]
+support-files = redundant_font_download.sjs
+[test_reframe_cb.html]
+[test_reframe_image_loading.html]
+[test_reframe_input.html]
+[test_reframe_pseudo_element.html]
+[test_rem_unit.html]
+[test_restyle_table_wrapper.html]
+[test_restyles_in_smil_animation.html]
+[test_revert.html]
+[test_root_node_display.html]
+[test_rule_insertion.html]
+[test_rule_serialization.html]
+[test_rules_out_of_sheets.html]
+[test_selectors.html]
+[test_setPropertyWithNull.html]
+skip-if = (xorigin && debug)
+[test_shape_outside_CORS.html]
+[test_shared_sheet_caching.html]
+support-files = file_shared_sheet_caching.css file_shared_sheet_caching.html
+fail-if = xorigin
+[test_shorthand_property_getters.html]
+[test_specified_value_serialization.html]
+support-files = file_specified_value_serialization_individual_transforms.html
+[test_style_attr_listener.html]
+[test_style_attribute_quirks.html]
+[test_style_attribute_standards.html]
+[test_style_struct_copy_constructors.html]
+[test_stylesheet_additions.html]
+[test_stylesheet_clone_font_face.html]
+[test_supports_rules.html]
+[test_system_font_serialization.html]
+[test_text_decoration_shorthands.html]
+[test_transitions.html]
+[test_transitions_and_reframes.html]
+[test_transitions_and_restyles.html]
+[test_transitions_and_zoom.html]
+[test_transitions_at_start.html]
+[test_transitions_bug537151.html]
+[test_transitions_cancel_near_end.html]
+[test_transitions_computed_value_combinations.html]
+[test_transitions_computed_values.html]
+[test_transitions_dynamic_changes.html]
+[test_transitions_events.html]
+[test_transitions_per_property.html]
+[test_transitions_replacement_on_busy_frame.html]
+[test_transitions_replacement_with_setKeyframes.html]
+[test_transitions_step_functions.html]
+[test_unclosed_parentheses.html]
+[test_unicode_range_loading.html]
+support-files = ../../reftests/fonts/markA.woff ../../reftests/fonts/markB.woff ../../reftests/fonts/markC.woff ../../reftests/fonts/markD.woff
+[test_units_angle.html]
+[test_units_frequency.html]
+[test_units_length.html]
+[test_units_time.html]
+[test_use_counters.html]
+skip-if = !nightly_build
+[test_user_sheet_shadow_dom.html]
+[test_value_cloning.html]
+# This test requires too much memory on TSan (bug 1612707)
+# See bug 775227 for android
+skip-if = (toolkit == 'android' || tsan)
+[test_value_computation.html]
+# This test requires too much memory on TSan (bug 1612707)
+skip-if = tsan
+[test_value_storage.html]
+[test_variable_serialization_computed.html]
+[test_variable_serialization_specified.html]
+[test_variables.html]
+support-files = support/external-variable-url.css
+skip-if =
+  http3
+[test_variables_loop.html]
+[test_variables_order.html]
+support-files = support/external-variable-url.css
+[test_video_object_fit.html]
+[test_viewport_scrollbar_causing_reflow.html]
+skip-if = (verify && (os == 'win' || os == 'mac'))
+[test_viewport_units.html]
+[test_visited_image_loading.html]
+skip-if = toolkit == 'android' # TIMED_OUT for android
+[test_visited_image_loading_empty.html]
+skip-if = toolkit == 'android' # TIMED_OUT for android
+[test_visited_lying.html]
+skip-if = toolkit == 'android' # TIMED_OUT for android
+fail-if = xorigin
+[test_visited_pref.html]
+skip-if = toolkit == 'android' # TIMED_OUT for android
+fail-if = xorigin
+[test_visited_reftests.html]
+skip-if = toolkit == 'android' # TIMED_OUT for android
+[test_webkit_device_pixel_ratio.html]
+skip-if = xorigin # process crash: Assertion failure: mInFlightProcessId == 0, at /builds/worker/checkouts/gecko/docshell/base/CanonicalBrowsingContext.cpp:110
+[test_webkit_flex_display.html]
+skip-if = xorigin # Crashes, Assertion failure: mInFlightProcessId == 0, at /builds/worker/checkouts/gecko/docshell/base/CanonicalBrowsingContext.cpp:110
diff --git a/layout/style/test/moz.build b/layout/style/test/moz.build
new file mode 100644
index 0000000000..ec3de85371
--- /dev/null
+++ b/layout/style/test/moz.build
@@ -0,0 +1,150 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# ** Note: The comment below along with the CPP_UNIT_TESTS and LIBS variables
+# ** were commented out in the original Makefile.in, and should be restored
+# ** some day, perhaps as a gtest.
+#
+# ParseCSS.cpp used to be built as a test program, but it was not
+# being used for anything, and recent changes to the CSS loader have
+# made it fail to link.  Further changes are planned which should make
+# it buildable again.
+
+DIRS += ["gtest"]
+
+HostSimplePrograms(
+    [
+        "host_ListCSSProperties",
+    ]
+)
+
+MOCHITEST_MANIFESTS += [
+    "mochitest.ini",
+]
+BROWSER_CHROME_MANIFESTS += ["browser.ini"]
+MOCHITEST_CHROME_MANIFESTS += ["chrome/chrome.ini"]
+
+TEST_HARNESS_FILES.testing.mochitest.tests.layout.style.test.chrome += [
+    "chrome/display_mode_reflow_iframe.html",
+    "chrome/moz_document_helper.html",
+    "media_queries_iframe.html",
+]
+
+TEST_HARNESS_FILES.testing.mochitest.tests.layout.style.test["css-visited"] += [
+    "/layout/reftests/css-visited/border-1-ref.html",
+    "/layout/reftests/css-visited/border-1.html",
+    "/layout/reftests/css-visited/border-2-ref.html",
+    "/layout/reftests/css-visited/border-2a.html",
+    "/layout/reftests/css-visited/border-2b.html",
+    "/layout/reftests/css-visited/border-collapse-1-ref.html",
+    "/layout/reftests/css-visited/border-collapse-1.html",
+    "/layout/reftests/css-visited/caret-color-on-visited-1-ref.html",
+    "/layout/reftests/css-visited/caret-color-on-visited-1.html",
+    "/layout/reftests/css-visited/color-choice-1-ref.html",
+    "/layout/reftests/css-visited/color-choice-1.html",
+    "/layout/reftests/css-visited/color-on-bullets-1-ref.html",
+    "/layout/reftests/css-visited/color-on-bullets-1.html",
+    "/layout/reftests/css-visited/color-on-link-1-ref.html",
+    "/layout/reftests/css-visited/color-on-link-1.html",
+    "/layout/reftests/css-visited/color-on-link-before-1.html",
+    "/layout/reftests/css-visited/color-on-text-decoration-1-ref.html",
+    "/layout/reftests/css-visited/color-on-text-decoration-1.html",
+    "/layout/reftests/css-visited/color-on-visited-1-ref.html",
+    "/layout/reftests/css-visited/color-on-visited-1.html",
+    "/layout/reftests/css-visited/color-on-visited-before-1.html",
+    "/layout/reftests/css-visited/color-on-visited-text-1-ref.html",
+    "/layout/reftests/css-visited/color-on-visited-text-1.html",
+    "/layout/reftests/css-visited/column-rule-1-notref.html",
+    "/layout/reftests/css-visited/column-rule-1-ref.html",
+    "/layout/reftests/css-visited/column-rule-1.html",
+    "/layout/reftests/css-visited/content-before-1-ref.html",
+    "/layout/reftests/css-visited/content-color-on-link-before-1-ref.html",
+    "/layout/reftests/css-visited/content-color-on-link-before-1.html",
+    "/layout/reftests/css-visited/content-color-on-visited-before-1-ref.html",
+    "/layout/reftests/css-visited/content-color-on-visited-before-1.html",
+    "/layout/reftests/css-visited/content-on-link-before-1.html",
+    "/layout/reftests/css-visited/content-on-visited-before-1.html",
+    "/layout/reftests/css-visited/first-line-1-ref.html",
+    "/layout/reftests/css-visited/first-line-1.html",
+    "/layout/reftests/css-visited/inherit-keyword-1-ref.html",
+    "/layout/reftests/css-visited/inherit-keyword-1.xhtml",
+    "/layout/reftests/css-visited/link-root-1-ref.xhtml",
+    "/layout/reftests/css-visited/link-root-1.xhtml",
+    "/layout/reftests/css-visited/logical-box-border-color-visited-link-001.html",
+    "/layout/reftests/css-visited/logical-box-border-color-visited-link-002.html",
+    "/layout/reftests/css-visited/logical-box-border-color-visited-link-003.html",
+    "/layout/reftests/css-visited/logical-box-border-color-visited-link-ref.html",
+    "/layout/reftests/css-visited/mathml-links-ref.html",
+    "/layout/reftests/css-visited/mathml-links.html",
+    "/layout/reftests/css-visited/outline-1-ref.html",
+    "/layout/reftests/css-visited/outline-1.html",
+    "/layout/reftests/css-visited/placeholder-1-ref.html",
+    "/layout/reftests/css-visited/placeholder-1.html",
+    "/layout/reftests/css-visited/selector-adj-sibling-1-ref.html",
+    "/layout/reftests/css-visited/selector-adj-sibling-1.html",
+    "/layout/reftests/css-visited/selector-adj-sibling-2-ref.html",
+    "/layout/reftests/css-visited/selector-adj-sibling-2.html",
+    "/layout/reftests/css-visited/selector-adj-sibling-3-ref.xhtml",
+    "/layout/reftests/css-visited/selector-adj-sibling-3.xhtml",
+    "/layout/reftests/css-visited/selector-any-sibling-1-ref.html",
+    "/layout/reftests/css-visited/selector-any-sibling-1.html",
+    "/layout/reftests/css-visited/selector-any-sibling-2-ref.html",
+    "/layout/reftests/css-visited/selector-any-sibling-2.html",
+    "/layout/reftests/css-visited/selector-child-1-ref.html",
+    "/layout/reftests/css-visited/selector-child-1.html",
+    "/layout/reftests/css-visited/selector-child-2-ref.xhtml",
+    "/layout/reftests/css-visited/selector-child-2.xhtml",
+    "/layout/reftests/css-visited/selector-descendant-1-ref.html",
+    "/layout/reftests/css-visited/selector-descendant-1.html",
+    "/layout/reftests/css-visited/selector-descendant-2-ref.xhtml",
+    "/layout/reftests/css-visited/selector-descendant-2.xhtml",
+    "/layout/reftests/css-visited/subject-of-selector-1-ref.html",
+    "/layout/reftests/css-visited/subject-of-selector-adj-sibling-1.html",
+    "/layout/reftests/css-visited/subject-of-selector-any-sibling-1.html",
+    "/layout/reftests/css-visited/subject-of-selector-child-1.html",
+    "/layout/reftests/css-visited/subject-of-selector-descendant-1.html",
+    "/layout/reftests/css-visited/subject-of-selector-descendant-2-ref.xhtml",
+    "/layout/reftests/css-visited/subject-of-selector-descendant-2.xhtml",
+    "/layout/reftests/css-visited/svg-paint-currentcolor-visited-ref.svg",
+    "/layout/reftests/css-visited/svg-paint-currentcolor-visited.svg",
+    "/layout/reftests/css-visited/transition-on-visited-ref.html",
+    "/layout/reftests/css-visited/transition-on-visited.html",
+    "/layout/reftests/css-visited/visited-inherit-1-ref.html",
+    "/layout/reftests/css-visited/visited-inherit-1.html",
+    "/layout/reftests/css-visited/visited-page.html",
+    "/layout/reftests/css-visited/white-to-transparent-1-ref.html",
+    "/layout/reftests/css-visited/white-to-transparent-1.html",
+    "/layout/reftests/css-visited/width-1-ref.html",
+    "/layout/reftests/css-visited/width-on-link-1.html",
+    "/layout/reftests/css-visited/width-on-visited-1.html",
+    "/layout/reftests/fonts/Ahem.ttf",
+    "/layout/reftests/svg/as-image/svg-image-visited-1-ref.html",
+    "/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg",
+    "/layout/reftests/svg/as-image/svg-image-visited-1a.html",
+    "/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg",
+    "/layout/reftests/svg/as-image/svg-image-visited-1b.html",
+    "/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg",
+    "/layout/reftests/svg/as-image/svg-image-visited-1c.html",
+    "/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg",
+    "/layout/reftests/svg/as-image/svg-image-visited-1d.html",
+    "/layout/reftests/svg/pseudo-classes-02-ref.svg",
+    "/layout/reftests/svg/pseudo-classes-02.svg",
+]
+
+DEFINES["MOZILLA_INTERNAL_API"] = True
+
+if CONFIG["COMPILE_ENVIRONMENT"]:
+    GeneratedFile(
+        "css_properties.js",
+        script="gen-css-properties.py",
+        inputs=[
+            "css_properties_like_longhand.js",
+            "!host_ListCSSProperties%s" % CONFIG["HOST_BIN_SUFFIX"],
+        ],
+    )
+    TEST_HARNESS_FILES.testing.mochitest.tests.layout.style.test += [
+        "!css_properties.js"
+    ]
diff --git a/layout/style/test/mq_changes_child.html b/layout/style/test/mq_changes_child.html
new file mode 100644
index 0000000000..f594e9f00d
--- /dev/null
+++ b/layout/style/test/mq_changes_child.html
@@ -0,0 +1,8 @@
+<script>
+const mql = matchMedia("(prefers-reduced-motion: reduce)");
+mql.addEventListener("change", event => {
+  parent.postMessage({ "matches": event.matches }, "*");
+});
+
+window.onload = () => { parent.postMessage("ready", "*"); };
+</script>
diff --git a/layout/style/test/neverending_font_load.sjs b/layout/style/test/neverending_font_load.sjs
new file mode 100644
index 0000000000..b02fc377a8
--- /dev/null
+++ b/layout/style/test/neverending_font_load.sjs
@@ -0,0 +1,5 @@
+function handleRequest(request, response) {
+  response.processAsync();
+  response.setHeader("Content-Type", "application/octet-stream", false);
+  response.write("");
+}
diff --git a/layout/style/test/neverending_stylesheet_load.sjs b/layout/style/test/neverending_stylesheet_load.sjs
new file mode 100644
index 0000000000..048263fe54
--- /dev/null
+++ b/layout/style/test/neverending_stylesheet_load.sjs
@@ -0,0 +1,5 @@
+function handleRequest(request, response) {
+  response.processAsync();
+  response.setHeader("Content-Type", "text/css", false);
+  response.write("");
+}
diff --git a/layout/style/test/post-redirect-1.css b/layout/style/test/post-redirect-1.css
new file mode 100644
index 0000000000..3620c9f377
--- /dev/null
+++ b/layout/style/test/post-redirect-1.css
@@ -0,0 +1 @@
+#one { color: green; background: url("?1"); }
diff --git a/layout/style/test/post-redirect-2.css b/layout/style/test/post-redirect-2.css
new file mode 100644
index 0000000000..3bdf3279d3
--- /dev/null
+++ b/layout/style/test/post-redirect-2.css
@@ -0,0 +1 @@
+#two { color: green; background: url("?1"); }
diff --git a/layout/style/test/post-redirect-3.css b/layout/style/test/post-redirect-3.css
new file mode 100644
index 0000000000..dd98be8e66
--- /dev/null
+++ b/layout/style/test/post-redirect-3.css
@@ -0,0 +1 @@
+#three { color: green; background: url("?1"); }
diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
new file mode 100644
index 0000000000..f50649c241
--- /dev/null
+++ b/layout/style/test/property_database.js
@@ -0,0 +1,13966 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* eslint-disable dot-notation */
+/* vim: set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Utility function. Returns true if the given boolean pref...
+//  (a) exists and (b) is set to true.
+// Otherwise, returns false.
+//
+// This function also reports a test failure if the pref isn't set at all. This
+// ensures that we remove pref-checks from mochitests (instead of accidentally
+// disabling the tests that are controlled by that check) when we remove a
+// mature feature's pref from the rest of the codebase.
+function IsCSSPropertyPrefEnabled(prefName) {
+  try {
+    if (SpecialPowers.getBoolPref(prefName)) {
+      return true;
+    }
+  } catch (ex) {
+    ok(
+      false,
+      "Failed to look up property-controlling pref '" +
+        prefName +
+        "' (" +
+        ex +
+        ")"
+    );
+  }
+
+  return false;
+}
+
+// True longhand properties.
+const CSS_TYPE_LONGHAND = 0;
+
+// True shorthand properties.
+const CSS_TYPE_TRUE_SHORTHAND = 1;
+
+// Properties that we handle as shorthands but were longhands either in
+// the current spec or earlier versions of the spec.
+const CSS_TYPE_SHORTHAND_AND_LONGHAND = 2;
+
+// Legacy shorthand properties, that behave mostly like an alias
+// (CSS_TYPE_SHORTHAND_AND_LONGHAND) but not quite because their syntax may not
+// match, plus they shouldn't serialize in cssText.
+const CSS_TYPE_LEGACY_SHORTHAND = 3;
+
+// Each property has the following fields:
+//   domProp: The name of the relevant member of nsIDOM[NS]CSS2Properties
+//   inherited: Whether the property is inherited by default (stated as
+//     yes or no in the property header in all CSS specs)
+//   type: see above
+//   alias_for: optional, indicates that the property is an alias for
+//     some other property that is the preferred serialization.  (Type
+//     must not be CSS_TYPE_LONGHAND.)
+//   logical: optional, indicates that the property is a logical directional
+//     property.  (Type must be CSS_TYPE_LONGHAND.)
+//   axis: optional, indicates that the property is an axis-related logical
+//     directional property.  (Type must be CSS_TYPE_LONGHAND and 'logical'
+//     must be true.)
+//   initial_values: Values whose computed value should be the same as the
+//     computed value for the property's initial value.
+//   other_values: Values whose computed value should be different from the
+//     computed value for the property's initial value.
+//   XXX Should have a third field for values whose computed value may or
+//     may not be the same as for the property's initial value.
+//   invalid_values: Things that are not values for the property and
+//     should be rejected, but which are balanced and should not absorb
+//     what follows
+//   quirks_values: Values that should be accepted in quirks mode only,
+//     mapped to the values they are equivalent to.
+//   unbalanced_values: Things that are not values for the property and
+//     should be rejected, and which also contain unbalanced constructs
+//     that should absorb what follows
+//
+// Note: By default, an alias is assumed to accept/reject the same values as
+// the property that it aliases, and to have the same prerequisites. So, if
+// "alias_for" is set, the "*_values" and "prerequisites" fields can simply
+// be omitted, and they'll be populated automatically to match the aliased
+// property's fields.
+
+// Helper functions used to construct gCSSProperties.
+
+function initial_font_family_is_sans_serif() {
+  // The initial value of 'font-family' might be 'serif' or
+  // 'sans-serif'.
+  const meta = document.createElement("meta");
+  meta.setAttribute("style", "font: initial;");
+  document.documentElement.appendChild(meta);
+  const family = getComputedStyle(meta).fontFamily;
+  meta.remove();
+  return family == "sans-serif";
+}
+
+var gInitialFontFamilyIsSansSerif = initial_font_family_is_sans_serif();
+
+// shared by background-image and border-image-source
+var validNonUrlImageValues = [
+  "-moz-element(#a)",
+  "-moz-element(  #a  )",
+  "-moz-element(#a-1)",
+  "-moz-element(#a\\:1)",
+  /* gradient torture test */
+  "linear-gradient(red, blue)",
+  "linear-gradient(red, yellow, blue)",
+  "linear-gradient(red 1px, yellow 20%, blue 24em, green)",
+  "linear-gradient(red, yellow, green, blue 50%)",
+  "linear-gradient(red -50%, yellow -25%, green, blue)",
+  "linear-gradient(red -99px, yellow, green, blue 120%)",
+  "linear-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
+  "linear-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
+  "linear-gradient(red, green calc(50% + 20px), blue)",
+  "linear-gradient(180deg, red, blue)",
+
+  "linear-gradient(to top, red, blue)",
+  "linear-gradient(to bottom, red, blue)",
+  "linear-gradient(to left, red, blue)",
+  "linear-gradient(to right, red, blue)",
+  "linear-gradient(to top left, red, blue)",
+  "linear-gradient(to top right, red, blue)",
+  "linear-gradient(to bottom left, red, blue)",
+  "linear-gradient(to bottom right, red, blue)",
+  "linear-gradient(to left top, red, blue)",
+  "linear-gradient(to left bottom, red, blue)",
+  "linear-gradient(to right top, red, blue)",
+  "linear-gradient(to right bottom, red, blue)",
+
+  "linear-gradient(-33deg, red, blue)",
+  "linear-gradient(30grad, red, blue)",
+  "linear-gradient(10deg, red, blue)",
+  "linear-gradient(1turn, red, blue)",
+  "linear-gradient(.414rad, red, blue)",
+
+  "linear-gradient(.414rad, red, 50%, blue)",
+  "linear-gradient(.414rad, red, 0%, blue)",
+  "linear-gradient(.414rad, red, 100%, blue)",
+
+  "linear-gradient(.414rad, red 50%, 50%, blue 50%)",
+  "linear-gradient(.414rad, red 50%, 20%, blue 50%)",
+  "linear-gradient(.414rad, red 50%, 30%, blue 10%)",
+  "linear-gradient(to right bottom, red, 20%, green 50%, 65%, blue)",
+  "linear-gradient(to right bottom, red, 20%, green 10%, blue)",
+  "linear-gradient(to right bottom, red, 50%, green 50%, 50%, blue)",
+  "linear-gradient(to right bottom, red, 0%, green 50%, 100%, blue)",
+
+  "linear-gradient(red 0% 100%)",
+  "linear-gradient(red 0% 50%, blue 50%)",
+  "linear-gradient(red 0% 50%, blue 50% 100%)",
+  "linear-gradient(red 0% 50%, 0%, blue 50%)",
+  "linear-gradient(red 0% 50%, 0%, blue 50% 100%)",
+
+  /* Unitless 0 is valid as an <angle> */
+  "linear-gradient(0, red, blue)",
+
+  "radial-gradient(red, blue)",
+  "radial-gradient(red, yellow, blue)",
+  "radial-gradient(red 1px, yellow 20%, blue 24em, green)",
+  "radial-gradient(red, yellow, green, blue 50%)",
+  "radial-gradient(red -50%, yellow -25%, green, blue)",
+  "radial-gradient(red -99px, yellow, green, blue 120%)",
+  "radial-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
+
+  "radial-gradient(0 0, red, blue)",
+  "radial-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
+
+  "radial-gradient(at top left, red, blue)",
+  "radial-gradient(at 20% bottom, red, blue)",
+  "radial-gradient(at center 20%, red, blue)",
+  "radial-gradient(at left 35px, red, blue)",
+  "radial-gradient(at 10% 10em, red, blue)",
+  "radial-gradient(at 44px top, red, blue)",
+  "radial-gradient(at 0 0, red, blue)",
+
+  "radial-gradient(farthest-corner, red, blue)",
+  "radial-gradient(circle, red, blue)",
+  "radial-gradient(ellipse closest-corner, red, blue)",
+  "radial-gradient(closest-corner ellipse, red, blue)",
+  "radial-gradient(farthest-side circle, red, blue)",
+
+  "radial-gradient(at 43px, red, blue)",
+  "radial-gradient(at 43px 43px, red, blue)",
+  "radial-gradient(at 50% 50%, red, blue)",
+  "radial-gradient(at 43px 50%, red, blue)",
+  "radial-gradient(at 50% 43px, red, blue)",
+  "radial-gradient(circle 43px, red, blue)",
+  "radial-gradient(43px circle, red, blue)",
+  "radial-gradient(ellipse 43px 43px, red, blue)",
+  "radial-gradient(ellipse 50% 50%, red, blue)",
+  "radial-gradient(ellipse 43px 50%, red, blue)",
+  "radial-gradient(ellipse 50% 43px, red, blue)",
+  "radial-gradient(50% 43px ellipse, red, blue)",
+
+  "radial-gradient(farthest-corner at top left, red, blue)",
+  "radial-gradient(ellipse closest-corner at 45px, red, blue)",
+  "radial-gradient(circle farthest-side at 45px, red, blue)",
+  "radial-gradient(closest-side ellipse at 50%, red, blue)",
+  "radial-gradient(farthest-corner circle at 4em, red, blue)",
+
+  "radial-gradient(30% 40% at top left, red, blue)",
+  "radial-gradient(50px 60px at 15% 20%, red, blue)",
+  "radial-gradient(7em 8em at 45px, red, blue)",
+
+  "radial-gradient(circle at 15% 20%, red, blue)",
+
+  "radial-gradient(red 0% 100%)",
+  "radial-gradient(red 0% 50%, blue 50%)",
+  "radial-gradient(red 0% 50%, blue 50% 100%)",
+  "radial-gradient(red 0% 50%, 0%, blue 50%)",
+  "radial-gradient(red 0% 50%, 0%, blue 50% 100%)",
+
+  "repeating-radial-gradient(red, blue)",
+  "repeating-radial-gradient(red, yellow, blue)",
+  "repeating-radial-gradient(red 1px, yellow 20%, blue 24em, green)",
+  "repeating-radial-gradient(red, yellow, green, blue 50%)",
+  "repeating-radial-gradient(red -50%, yellow -25%, green, blue)",
+  "repeating-radial-gradient(red -99px, yellow, green, blue 120%)",
+  "repeating-radial-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
+  "repeating-radial-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
+
+  "repeating-radial-gradient(at top left, red, blue)",
+  "repeating-radial-gradient(at 0 0, red, blue)",
+  "repeating-radial-gradient(at 20% bottom, red, blue)",
+  "repeating-radial-gradient(at center 20%, red, blue)",
+  "repeating-radial-gradient(at left 35px, red, blue)",
+  "repeating-radial-gradient(at 10% 10em, red, blue)",
+  "repeating-radial-gradient(at 44px top, red, blue)",
+
+  "repeating-radial-gradient(farthest-corner at top left, red, blue)",
+  "repeating-radial-gradient(closest-corner ellipse at 45px, red, blue)",
+  "repeating-radial-gradient(farthest-side circle at 45px, red, blue)",
+  "repeating-radial-gradient(ellipse closest-side at 50%, red, blue)",
+  "repeating-radial-gradient(circle farthest-corner at 4em, red, blue)",
+
+  "repeating-radial-gradient(30% 40% at top left, red, blue)",
+  "repeating-radial-gradient(50px 60px at 15% 20%, red, blue)",
+  "repeating-radial-gradient(7em 8em at 45px, red, blue)",
+
+  // When that happens this should be moved to the `invalid` list.
+  "repeating-radial-gradient(circle closest-side at left 0px bottom 7in, hsl(2,2%,5%), rgb(1,6,0))",
+
+  "-moz-image-rect(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), 2, 10, 10, 2)",
+  "-moz-image-rect(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), 10%, 50%, 30%, 0%)",
+  "-moz-image-rect(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), 10, 50%, 30%, 0)",
+
+  "radial-gradient(at calc(25%) top, red, blue)",
+  "radial-gradient(at left calc(25%), red, blue)",
+  "radial-gradient(at calc(25px) top, red, blue)",
+  "radial-gradient(at left calc(25px), red, blue)",
+  "radial-gradient(at calc(-25%) top, red, blue)",
+  "radial-gradient(at left calc(-25%), red, blue)",
+  "radial-gradient(at calc(-25px) top, red, blue)",
+  "radial-gradient(at left calc(-25px), red, blue)",
+  "radial-gradient(at calc(100px + -25%) top, red, blue)",
+  "radial-gradient(at left calc(100px + -25%), red, blue)",
+  "radial-gradient(at calc(100px + -25px) top, red, blue)",
+  "radial-gradient(at left calc(100px + -25px), red, blue)",
+
+  "image-set(linear-gradient(green, green) 1x, url(foobar.png) 2x)",
+  "image-set(linear-gradient(red, red), url(foobar.png) 2x)",
+  "image-set(url(foobar.png) 2x)",
+  "image-set(url(foobar.png) 1x, url(bar.png) 2x, url(baz.png) 3x)",
+  "image-set('foobar.png', 'bar.png' 2x, url(baz.png) 3x)",
+  "image-set(url(foobar.png) type('image/png'))",
+  "image-set(url(foobar.png) 1x type('image/png'))",
+  "image-set(url(foobar.png) type('image/png') 1x)",
+
+  ...(IsCSSPropertyPrefEnabled("layout.css.cross-fade.enabled")
+    ? [
+        "cross-fade(red, blue)",
+        "cross-fade(red)",
+        "cross-fade(red 50%)",
+        // see: <https://github.com/w3c/csswg-drafts/issues/5333>. This
+        // may become invalid depending on how discussion on that issue
+        // goes.
+        "cross-fade(red -50%, blue 150%)",
+        "cross-fade(red -50%, url(www.example.com))",
+
+        "cross-fade(url(http://placekitten.com/200/300), 55% linear-gradient(red, blue))",
+        "cross-fade(cross-fade(red, white), cross-fade(blue))",
+        "cross-fade(gold 77%, 60% blue)",
+
+        "cross-fade(url(http://placekitten.com/200/300), url(http://placekitten.com/200/300))",
+        "cross-fade(#F0F8FF, rgb(0, 0, 0), rgba(0, 255, 0, 1) 25%)",
+      ]
+    : []),
+
+  // Conic gradient
+  "conic-gradient(red, blue)",
+  "conic-gradient(red,blue,yellow)",
+  "conic-gradient(  red  ,  blue,   yellow)",
+  "conic-gradient(red 0, blue 50deg)",
+  "conic-gradient(red 10%, blue 50%)",
+  "conic-gradient(red -50deg, blue 50deg)",
+  "conic-gradient(red 50deg, blue 0.3turn, yellow 200grad, orange 60% 5rad)",
+
+  "conic-gradient(red 0 100%)",
+  "conic-gradient(red 0 50%, blue 50%)",
+  "conic-gradient(red 0 50deg, blue 50% 100%)",
+  "conic-gradient(red 0 50%, 0deg, blue 50%)",
+  "conic-gradient(red 0deg 50%, 0%, blue 50% 100%)",
+
+  "conic-gradient(from 0, red, blue)",
+  "conic-gradient(from 40deg, red, blue)",
+  "conic-gradient(from 0.4turn, red, blue)",
+  "conic-gradient(from 200grad, red, blue)",
+  "conic-gradient(from 5rad, red, blue)",
+
+  "conic-gradient(at top, red, blue)",
+  "conic-gradient(at top left, red, blue)",
+  "conic-gradient(at left top, red, blue)",
+  "conic-gradient(at center center, red, blue)",
+  "conic-gradient(at 20% bottom, red, blue)",
+  "conic-gradient(at center 20%, red, blue)",
+  "conic-gradient(at left 35px, red, blue)",
+  "conic-gradient(at 10% 10em, red, blue)",
+  "conic-gradient(at 44px top, red, blue)",
+  "conic-gradient(at 0 0, red, blue)",
+  "conic-gradient(at 10px, red, blue)",
+
+  "conic-gradient(at calc(25%) top, red, blue)",
+  "conic-gradient(at left calc(25%), red, blue)",
+  "conic-gradient(at calc(25px) top, red, blue)",
+  "conic-gradient(at left calc(25px), red, blue)",
+  "conic-gradient(at calc(-25%) top, red, blue)",
+  "conic-gradient(at left calc(-25%), red, blue)",
+  "conic-gradient(at calc(-25px) top, red, blue)",
+  "conic-gradient(at left calc(-25px), red, blue)",
+  "conic-gradient(at calc(100px + -25%) top, red, blue)",
+  "conic-gradient(at left calc(100px + -25%), red, blue)",
+  "conic-gradient(at calc(100px + -25px) top, red, blue)",
+  "conic-gradient(at left calc(100px + -25px), red, blue)",
+
+  "conic-gradient(from 0 at 0 0, red, blue)",
+  "conic-gradient(from 40deg at 50%, red, blue)",
+  "conic-gradient(from 0.4turn at left 30%, red, blue)",
+  "conic-gradient(from 200grad at calc(100px + -25%) top, red, blue)",
+  "conic-gradient(from 5rad at 10px, red, blue)",
+
+  "repeating-conic-gradient(red, blue)",
+  "repeating-conic-gradient(red, yellow, blue)",
+  "repeating-conic-gradient(red 1deg, yellow 20%, blue 5rad, green)",
+  "repeating-conic-gradient(red, yellow, green, blue 50%)",
+  "repeating-conic-gradient(red -50%, yellow -25%, green, blue)",
+  "repeating-conic-gradient(red -99deg, yellow, green, blue 120%)",
+  "repeating-conic-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
+  "repeating-conic-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
+
+  "repeating-conic-gradient(from 0, red, blue)",
+  "repeating-conic-gradient(from 40deg, red, blue)",
+  "repeating-conic-gradient(from 0.4turn, red, blue)",
+  "repeating-conic-gradient(from 200grad, red, blue)",
+  "repeating-conic-gradient(from 5rad, red, blue)",
+
+  "repeating-conic-gradient(at top left, red, blue)",
+  "repeating-conic-gradient(at 0 0, red, blue)",
+  "repeating-conic-gradient(at 20% bottom, red, blue)",
+  "repeating-conic-gradient(at center 20%, red, blue)",
+  "repeating-conic-gradient(at left 35px, red, blue)",
+  "repeating-conic-gradient(at 10% 10em, red, blue)",
+  "repeating-conic-gradient(at 44px top, red, blue)",
+
+  "repeating-conic-gradient(from 0 at 0 0, red, blue)",
+  "repeating-conic-gradient(from 40deg at 50%, red, blue)",
+  "repeating-conic-gradient(from 0.4turn at left 30%, red, blue)",
+  "repeating-conic-gradient(from 200grad at calc(100px + -25%) top, red, blue)",
+  "repeating-conic-gradient(from 5rad at 10px, red, blue)",
+
+  // 2008 GRADIENTS: -webkit-gradient()
+  // ----------------------------------
+  // linear w/ no color stops (valid) and a variety of position values:
+  "-webkit-gradient(linear, 1 2, 3 4)",
+  "-webkit-gradient(linear,1 2,3 4)", // (no extra space)
+  "-webkit-gradient(linear  ,  1   2  ,  3   4  )", // (lots of extra space)
+  "-webkit-gradient(linear, 1 10% , 0% 4)", // percentages
+  "-webkit-gradient(linear, +1.0 -2%, +5.3% -0)", // (+/- & decimals are valid)
+  "-webkit-gradient(linear, left top, right bottom)", // keywords
+  "-webkit-gradient(linear, right center, center top)",
+  "-webkit-gradient(linear, center center, center center)",
+  "-webkit-gradient(linear, center 5%, 30 top)", // keywords mixed w/ nums
+
+  // linear w/ just 1 color stop:
+  "-webkit-gradient(linear, 1 2, 3 4, from(lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, to(lime))",
+  // * testing the various allowable stop values (<number> & <percent>):
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(-0, lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(-30, lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(+9999, lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(-.1, lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0%, lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(100%, lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(9999%, lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(-.5%, lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(+0%, lime))",
+  // * testing the various color values:
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, transparent))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, rgb(1,2,3)))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, #00ff00))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, #00f))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, hsla(240, 30%, 50%, 0.8)))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, rgba(255, 230, 10, 0.5)))",
+
+  // linear w/ multiple color stops:
+  // * using from()/to() -- note that out-of-order is OK:
+  "-webkit-gradient(linear, 1 2, 3 4, from(lime), from(blue))",
+  "-webkit-gradient(linear, 1 2, 3 4, to(lime),   to(blue))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(lime), to(blue))",
+  "-webkit-gradient(linear, 1 2, 3 4, to(lime),   from(blue))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(lime), to(blue), from(purple))",
+  // * using color-stop():
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, lime), color-stop(30%, blue))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0, lime), color-stop(30%, blue), color-stop(100%, purple))",
+  // * using color-stop() intermixed with from()/to() functions:
+  "-webkit-gradient(linear, 1 2, 3 4, from(lime), color-stop(30%, blue))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(30%, blue), to(lime))",
+  // * overshooting endpoints (0 & 1.0)
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(-30%, lime), color-stop(.4, blue), color-stop(1.5, purple))",
+  // * repeating a stop position (valid)
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(30%, lime), color-stop(30%, blue))",
+  // * stops out of order (valid)
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(70%, lime), color-stop(20%, blue), color-stop(40%, purple))",
+
+  // radial w/ no color stops (valid) and a several different radius values:
+  "-webkit-gradient(radial, 1 2, 8, 3 4, 9)",
+  "-webkit-gradient(radial, 0 0, 10, 0 0, 5)",
+
+  // radial w/ color stops
+  // (mostly leaning on more-robust 'linear' tests above; just testing a few
+  // examples w/ radial as a sanity-check):
+  "-webkit-gradient(radial, 1 2, 8, 3 4, 9, from(lime))",
+  "-webkit-gradient(radial, 1 2, 8, 3 4, 9, to(blue))",
+  "-webkit-gradient(radial, 1 2, 8, 3 4, 9, color-stop(0.5, #00f), color-stop(0.8, rgba(100, 200, 0, 0.5)))",
+
+  // 2011 GRADIENTS: -webkit-linear-gradient(), -webkit-radial -gradient()
+  // ---------------------------------------------------------------------
+  // Basic linear-gradient syntax (valid when prefixed or unprefixed):
+  "-webkit-linear-gradient(red, green, blue)",
+
+  // Angled linear-gradients (valid when prefixed or unprefixed):
+  "-webkit-linear-gradient(135deg, red, blue)",
+  "-webkit-linear-gradient( 135deg  , red  , blue )",
+  "-webkit-linear-gradient(280deg, red 60%, blue)",
+
+  // Linear-gradient with unitless-0 <angle> (normally invalid for <angle>
+  // but accepted here for better webkit emulation):
+  "-webkit-linear-gradient(0, red, blue)",
+
+  // Linear-gradient with calc expression (bug 1363349)
+  "-webkit-gradient(linear, calc(5 + 5) top, calc(10 + 10) top, from(blue), to(lime))",
+  "-webkit-gradient(linear, calc(5 - 5) top, calc(10 + 10) top, from(blue), to(lime))",
+  "-webkit-gradient(linear, calc(5 * 5) top, calc(10 + 10) top, from(blue), to(lime))",
+  "-webkit-gradient(linear, calc(5 / 5) top, calc(10 + 10) top, from(blue), to(lime))",
+  "-webkit-gradient(linear, left calc(25% - 10%), right calc(75% + 10%), from(blue), to(lime))",
+  "-webkit-gradient(linear, calc(1) 2, 3 4)",
+
+  // Radial-gradient with calc expression (bug 1363349)
+  "-webkit-gradient(radial, 1 2, 0, 3 4, calc(1 + 5), from(blue), to(lime))",
+  "-webkit-gradient(radial, 1 2, calc(1 + 2), 3 4, calc(1 + 5), from(blue), to(lime))",
+  "-webkit-gradient(radial, 1 2, calc(1 - 2), 3 4, calc(1 + 5), from(blue), to(lime))",
+  "-webkit-gradient(radial, 1 2, calc(1 * 2), 3 4, calc(1 + 5), from(blue), to(lime))",
+  "-webkit-gradient(radial, 1 2, calc(1 / 2), 3 4, calc(1 + 5), from(blue), to(lime))",
+  "-webkit-gradient(radial, calc(0 + 1) calc(1 + 1), calc(1 + 2), calc(1 + 2) 4, calc(1 + 5), from(blue), to(lime))",
+  "-webkit-gradient(radial, 1 2, calc(8), 3 4, 9)",
+
+  // Basic radial-gradient syntax (valid when prefixed or unprefixed):
+  "-webkit-radial-gradient(circle, white, black)",
+  "-webkit-radial-gradient(circle, white, black)",
+  "-webkit-radial-gradient(ellipse closest-side, white, black)",
+  "-webkit-radial-gradient(circle farthest-corner, white, black)",
+
+  // Contain/cover keywords (valid only for -moz/-webkit prefixed):
+  "-webkit-radial-gradient(cover, red, blue)",
+  "-webkit-radial-gradient(cover circle, red, blue)",
+  "-webkit-radial-gradient(contain, red, blue)",
+  "-webkit-radial-gradient(contain ellipse, red, blue)",
+
+  // Initial side/corner/point (valid only for -moz/-webkit prefixed):
+  "-webkit-linear-gradient(top, red, blue)",
+  "-webkit-linear-gradient(left, red, blue)",
+  "-webkit-linear-gradient(bottom, red, blue)",
+  "-webkit-linear-gradient(right top, red, blue)",
+  "-webkit-linear-gradient(top right, red, blue)",
+  "-webkit-radial-gradient(right, red, blue)",
+  "-webkit-radial-gradient(left bottom, red, blue)",
+  "-webkit-radial-gradient(bottom left, red, blue)",
+  "-webkit-radial-gradient(center, red, blue)",
+  "-webkit-radial-gradient(center right, red, blue)",
+  "-webkit-radial-gradient(center center, red, blue)",
+  "-webkit-radial-gradient(center top, red, blue)",
+  "-webkit-radial-gradient(left 50%, red, blue)",
+  "-webkit-radial-gradient(20px top, red, blue)",
+  "-webkit-radial-gradient(20em 30%, red, blue)",
+
+  // Point + keyword-sized shape (valid only for -moz/-webkit prefixed):
+  "-webkit-radial-gradient(center, circle closest-corner, red, blue)",
+  "-webkit-radial-gradient(10px 20px, cover circle, red, blue)",
+  "-webkit-radial-gradient(5em 50%, ellipse contain, red, blue)",
+
+  // Repeating examples:
+  "-webkit-repeating-linear-gradient(red 10%, blue 30%)",
+  "-webkit-repeating-linear-gradient(30deg, pink 20px, orange 70px)",
+  "-webkit-repeating-linear-gradient(left, red, blue)",
+  "-webkit-repeating-linear-gradient(left, red 10%, blue 30%)",
+  "-webkit-repeating-radial-gradient(circle, red, blue 10%, red 20%)",
+  "-webkit-repeating-radial-gradient(circle farthest-corner, gray 10px, yellow 20px)",
+  "-webkit-repeating-radial-gradient(top left, circle, red, blue 4%, red 8%)",
+];
+var invalidNonUrlImageValues = [
+  "-moz-element(#a:1)",
+  "-moz-element(a#a)",
+  "-moz-element(#a a)",
+  "-moz-element(#a+a)",
+  "-moz-element(#a())",
+  /* no quirks mode colors */
+  "linear-gradient(red, ff00ff)",
+  /* no quirks mode colors */
+  "radial-gradient(at 10% bottom, ffffff, black) scroll no-repeat",
+  /* no quirks mode lengths */
+  "linear-gradient(red -99, yellow, green, blue 120%)",
+  /* Unitless nonzero numbers are valid as an <angle> */
+  "linear-gradient(30, red, blue)",
+  /* There must be a comma between gradient-line (e.g. <angle>) and colors */
+  "linear-gradient(30deg red, blue)",
+  "linear-gradient(to top left red, blue)",
+  "linear-gradient(to right red, blue)",
+  /* Invalid color, calc() or -moz-image-rect() function */
+  "linear-gradient(red, rgb(0, rubbish, 0) 50%, red)",
+  "linear-gradient(red, red calc(50% + rubbish), red)",
+  "linear-gradient(to top calc(50% + rubbish), red, blue)",
+
+  "radial-gradient(circle 175px 20px, black, white)",
+  "radial-gradient(175px 20px circle, black, white)",
+  "radial-gradient(ellipse 175px, black, white)",
+  "radial-gradient(175px ellipse, black, white)",
+  "radial-gradient(50%, red, blue)",
+  "radial-gradient(circle 50%, red, blue)",
+  "radial-gradient(50% circle, red, blue)",
+
+  /* Invalid units */
+  "conic-gradient(red, blue 50px, yellow 30px)",
+  "repeating-conic-gradient(red 1deg, yellow 20%, blue 24em, green)",
+  "conic-gradient(from 0%, black, white)",
+  "conic-gradient(from 60%, black, white)",
+  "conic-gradient(from 40px, black, white)",
+  "conic-gradient(from 50, black, white)",
+  "conic-gradient(at 50deg, black, white)",
+  "conic-gradient(from 40deg at 50deg, black, white)",
+  "conic-gradient(from 40deg at 50deg 60deg, black, white)",
+  /* Invalid keywords (or ordering) */
+  "conic-gradient(at 40% from 50deg, black, white)",
+  "conic-gradient(to 50deg, black, white)",
+
+  /* Used to be valid only when prefixed */
+  "linear-gradient(top left, red, blue)",
+  "linear-gradient(0 0, red, blue)",
+  "linear-gradient(20% bottom, red, blue)",
+  "linear-gradient(center 20%, red, blue)",
+  "linear-gradient(left 35px, red, blue)",
+  "linear-gradient(10% 10em, red, blue)",
+  "linear-gradient(44px top, red, blue)",
+
+  "linear-gradient(top left 45deg, red, blue)",
+  "linear-gradient(20% bottom -300deg, red, blue)",
+  "linear-gradient(center 20% 1.95929rad, red, blue)",
+  "linear-gradient(left 35px 30grad, red, blue)",
+  "linear-gradient(left 35px 0.1turn, red, blue)",
+  "linear-gradient(10% 10em 99999deg, red, blue)",
+  "linear-gradient(44px top -33deg, red, blue)",
+
+  "linear-gradient(30grad left 35px, red, blue)",
+  "linear-gradient(10deg 20px, red, blue)",
+  "linear-gradient(1turn 20px, red, blue)",
+  "linear-gradient(.414rad bottom, red, blue)",
+
+  "linear-gradient(to top, 0%, blue)",
+  "linear-gradient(to top, red, 100%)",
+  "linear-gradient(to top, red, 45%, 56%, blue)",
+  "linear-gradient(to top, red,, blue)",
+  "linear-gradient(to top, red, green 35%, 15%, 54%, blue)",
+
+  "linear-gradient(unset, 10px 10px, from(blue))",
+  "linear-gradient(unset, 10px 10px, blue 0)",
+  "repeating-linear-gradient(unset, 10px 10px, blue 0)",
+
+  "radial-gradient(top left 45deg, red, blue)",
+  "radial-gradient(20% bottom -300deg, red, blue)",
+  "radial-gradient(center 20% 1.95929rad, red, blue)",
+  "radial-gradient(left 35px 30grad, red, blue)",
+  "radial-gradient(10% 10em 99999deg, red, blue)",
+  "radial-gradient(44px top -33deg, red, blue)",
+
+  "radial-gradient(-33deg, red, blue)",
+  "radial-gradient(30grad left 35px, red, blue)",
+  "radial-gradient(10deg 20px, red, blue)",
+  "radial-gradient(.414rad bottom, red, blue)",
+
+  "radial-gradient(cover, red, blue)",
+  "radial-gradient(ellipse contain, red, blue)",
+  "radial-gradient(cover circle, red, blue)",
+
+  "radial-gradient(top left, cover, red, blue)",
+  "radial-gradient(15% 20%, circle, red, blue)",
+  "radial-gradient(45px, ellipse closest-corner, red, blue)",
+  "radial-gradient(45px, farthest-side circle, red, blue)",
+
+  "radial-gradient(99deg, cover, red, blue)",
+  "radial-gradient(-1.2345rad, circle, red, blue)",
+  "radial-gradient(399grad, ellipse closest-corner, red, blue)",
+  "radial-gradient(399grad, farthest-side circle, red, blue)",
+
+  "radial-gradient(top left 99deg, cover, red, blue)",
+  "radial-gradient(15% 20% -1.2345rad, circle, red, blue)",
+  "radial-gradient(45px 399grad, ellipse closest-corner, red, blue)",
+  "radial-gradient(45px 399grad, farthest-side circle, red, blue)",
+  "radial-gradient(circle red, blue)",
+
+  /* don't allow more than two positions with multi-position syntax */
+  "linear-gradient(red 0% 50% 100%)",
+  "linear-gradient(red 0% 50% 75%, blue 75%)",
+  "linear-gradient(to bottom, red 0% 50% 100%)",
+  "linear-gradient(to bottom, red 0% 50% 75%, blue 75%)",
+  "radial-gradient(red 0% 50% 100%)",
+  "radial-gradient(red 0% 50% 75%, blue 75%)",
+  "radial-gradient(center, red 0% 50% 100%)",
+  "radial-gradient(center, red 0% 50% 75%, blue 75%)",
+  "conic-gradient(red 0% 50% 100%)",
+  "conic-gradient(red 0% 50% 75%, blue 75%)",
+  "conic-gradient(center, red 0% 50% 100%)",
+  "conic-gradient(center, red 0% 50% 75%, blue 75%)",
+
+  // missing color in color stop
+  "conic-gradient(red 50deg, blue 0.3turn, yellow 200grad, orange 60%, 5rad)",
+
+  "-moz-linear-gradient(unset, 10px 10px, from(blue))",
+  "-moz-linear-gradient(unset, 10px 10px, blue 0)",
+  "-moz-repeating-linear-gradient(unset, 10px 10px, blue 0)",
+
+  // 2008 GRADIENTS: -webkit-gradient()
+  // https://www.webkit.org/blog/175/introducing-css-gradients/
+  // ----------------------------------
+  // Mostly-empty expressions (missing most required pieces):
+  "-webkit-gradient()",
+  "-webkit-gradient( )",
+  "-webkit-gradient(,)",
+  "-webkit-gradient(bogus)",
+  "-webkit-gradient(linear)",
+  "-webkit-gradient(linear,)",
+  "-webkit-gradient(,linear)",
+  "-webkit-gradient(radial)",
+  "-webkit-gradient(radial,)",
+
+  // linear w/ partial/missing <point> expression(s)
+  "-webkit-gradient(linear, 1)", // Incomplete <point>
+  "-webkit-gradient(linear, left)", // Incomplete <point>
+  "-webkit-gradient(linear, center)", // Incomplete <point>
+  "-webkit-gradient(linear, top)", // Incomplete <point>
+  "-webkit-gradient(linear, 5%)", // Incomplete <point>
+  "-webkit-gradient(linear, 1 2)", // Missing 2nd <point>
+  "-webkit-gradient(linear, 1, 3)", // 2 incomplete <point>s
+  "-webkit-gradient(linear, 1, 3 4)", // Incomplete 1st <point>
+  "-webkit-gradient(linear, 1 2, 3)", // Incomplete 2nd <point>
+  "-webkit-gradient(linear, 1 2, 3, 4)", // Comma inside <point>
+  "-webkit-gradient(linear, 1, 2, 3 4)", // Comma inside <point>
+  "-webkit-gradient(linear, 1, 2, 3, 4)", // Comma inside <point>
+
+  // linear w/ invalid units in <point> expression
+  "-webkit-gradient(linear, 1px 2, 3 4)",
+  "-webkit-gradient(linear, 1 2, 3 4px)",
+  "-webkit-gradient(linear, 1px 2px, 3px 4px)",
+  "-webkit-gradient(linear, 1 2em, 3 4)",
+
+  // linear w/ <radius> (only valid for radial)
+  "-webkit-gradient(linear, 1 2, 8, 3 4, 9)",
+
+  // linear w/ out-of-order position keywords in <point> expression
+  // (horizontal keyword is supposed to come first, for "x" coord)
+  "-webkit-gradient(linear, 0 0, top right)",
+  "-webkit-gradient(linear, bottom center, 0 0)",
+  "-webkit-gradient(linear, top bottom, 0 0)",
+  "-webkit-gradient(linear, bottom top, 0 0)",
+  "-webkit-gradient(linear, bottom top, 0 0)",
+
+  // linear w/ trailing comma (which implies missing color-stops):
+  "-webkit-gradient(linear, 1 2, 3 4,)",
+
+  // linear w/ invalid color values:
+  "-webkit-gradient(linear, 1 2, 3 4, from(invalidcolorname))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(inherit))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(initial))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(currentColor))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(00ff00))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(##00ff00))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(#00fff))", // wrong num hex digits
+  "-webkit-gradient(linear, 1 2, 3 4, from(xyz(0,0,0)))", // bogus color func
+  // Mixing <number> and <percentage> is invalid.
+  "-webkit-gradient(linear, 1 2, 3 4, from(rgb(100, 100%, 30)))",
+
+  // linear w/ color stops that have comma issues
+  "-webkit-gradient(linear, 1 2, 3 4 from(lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(lime,))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(lime),)",
+  "-webkit-gradient(linear, 1 2, 3 4, from(lime) to(blue))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(lime),, to(blue))",
+  "-webkit-gradient(linear, 1 2, 3 4, from(rbg(0, 0, 0,)))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0 lime))",
+  "-webkit-gradient(linear, 1 2, 3 4, color-stop(0,, lime))",
+
+  // radial w/ broken <point>/radius expression(s)
+  "-webkit-gradient(radial, 1)", // Incomplete <point>
+  "-webkit-gradient(radial, 1 2)", // Missing radius + 2nd <point>
+  "-webkit-gradient(radial, 1 2, 8)", // Missing 2nd <point>
+  "-webkit-gradient(radial, 1 2, 8, 3)", // Incomplete 2nd <point>
+  "-webkit-gradient(radial, 1 2, 8, 3 4)", // Missing 2nd radius
+  "-webkit-gradient(radial, 1 2, 3 4, 9)", // Missing 1st radius
+  "-webkit-gradient(radial, 1 2, -1.5, center center, +99999.9999)", // Negative radius
+
+  // radial w/ incorrect units on radius (invalid; expecting <number>)
+  "-webkit-gradient(radial, 1 2, 8%,      3 4, 9)",
+  "-webkit-gradient(radial, 1 2, 8px,     3 4, 9)",
+  "-webkit-gradient(radial, 1 2, 8em,     3 4, 9)",
+  "-webkit-gradient(radial, 1 2, top,     3 4, 9)",
+
+  // radial w/ trailing comma (which implies missing color-stops):
+  "-webkit-gradient(linear, 1 2, 8, 3 4, 9,)",
+
+  // radial w/ invalid color value (mostly leaning on 'linear' test above):
+  "-webkit-gradient(radial, 1 2, 8, 3 4, 9, from(invalidcolorname))",
+
+  // 2011 GRADIENTS: -webkit-linear-gradient(), -webkit-radial -gradient()
+  // ---------------------------------------------------------------------
+  // Syntax that's invalid for all types of gradients:
+  // * empty gradient expressions:
+  "-webkit-linear-gradient()",
+  "-webkit-radial-gradient()",
+  "-webkit-repeating-linear-gradient()",
+  "-webkit-repeating-radial-gradient()",
+
+  // * missing comma between <legacy-gradient-line> and color list:
+  "-webkit-linear-gradient(0 red, blue)",
+  "-webkit-linear-gradient(30deg red, blue)",
+  "-webkit-linear-gradient(top right red, blue)",
+  "-webkit-linear-gradient(bottom red, blue)",
+
+  // Linear-gradient with calc expression containing mixed units
+  // (bug 1363349)
+  "-webkit-gradient(linear, calc(5 + 5%) top, calc(10 + 10) top, from(blue), to(lime))",
+  "-webkit-gradient(linear, left calc(25 - 10%), right calc(75% + 10%), from(blue), to(lime))",
+
+  // Radial-gradient with calc expression containing mixed units, or a
+  // percentage in the radius (bug 1363349)
+  "-webkit-gradient(radial, 1 2, 0, 3 4, calc(1% + 5%), from(blue), to(lime))",
+  "-webkit-gradient(radial, 1 2, calc(1 + 2), 3 4, calc(1 + 5%), from(blue), to(lime))",
+  "-webkit-gradient(radial, calc(0 + 1) calc(1 + 1), calc(1% + 2%), calc(1 + 2) 4, calc(1 + 5), from(blue), to(lime))",
+
+  // Linear syntax that's invalid for both -webkit & unprefixed, but valid
+  // for -moz:
+  // * initial <legacy-gradient-line> which includes a length:
+  "-webkit-linear-gradient(10px, red, blue)",
+  "-webkit-linear-gradient(10px top, red, blue)",
+  // * initial <legacy-gradient-line> which includes a side *and* an angle:
+  "-webkit-linear-gradient(bottom 30deg, red, blue)",
+  "-webkit-linear-gradient(30deg bottom, red, blue)",
+  "-webkit-linear-gradient(10px top 50deg, red, blue)",
+  "-webkit-linear-gradient(50deg 10px top, red, blue)",
+  // * initial <legacy-gradient-line> which includes explicit "center":
+  "-webkit-linear-gradient(center, red, blue)",
+  "-webkit-linear-gradient(left center, red, blue)",
+  "-webkit-linear-gradient(top center, red, blue)",
+  "-webkit-linear-gradient(center top, red, blue)",
+
+  // Linear syntax that's invalid for -webkit, but valid for -moz & unprefixed:
+  // * "to" syntax:
+  "-webkit-linear-gradient(to top, red, blue)",
+
+  // * <shape> followed by angle:
+  "-webkit-radial-gradient(circle 10deg, red, blue)",
+
+  // Radial syntax that's invalid for both -webkit & -moz, but valid for
+  // unprefixed:
+  // * "<shape> at <position>" syntax:
+  "-webkit-radial-gradient(circle at left bottom, red, blue)",
+  // * explicitly-sized shape:
+  "-webkit-radial-gradient(circle 10px, red, blue)",
+  "-webkit-radial-gradient(ellipse 40px 20px, red, blue)",
+
+  // Radial syntax that's invalid for both -webkit & unprefixed, but valid
+  // for -moz:
+  // * initial angle
+  "-webkit-radial-gradient(30deg, red, blue)",
+  // * initial angle/position combo
+  "-webkit-radial-gradient(top 30deg, red, blue)",
+  "-webkit-radial-gradient(left top 30deg, red, blue)",
+  "-webkit-radial-gradient(10px 20px 30deg, red, blue)",
+
+  // Conic gradients should not support prefixed syntax
+  "-webkit-gradient(conic, 1 2, 3 4, color-stop(0, lime))",
+  "-webkit-conic-gradient(red, blue)",
+  "-moz-conic-gradient(red, blue)",
+  "-webkit-repeating-conic-gradient(red, blue)",
+  "-moz-repeating-conic-gradient(red, blue)",
+
+  "image-set(url(foobar.png) 1x, none)",
+  "image-set(garbage)",
+  "image-set(image-set('foobar.png', 'bar.png' 2x) 1x, url(baz.png) 3x)", // Nested image-sets should fail to parse
+  "image-set(image-set(garbage))",
+  "image-set()",
+  "image-set(type('image/png') url(foobar.png) 1x)",
+  "image-set(url(foobar.png) type('image/png') 1x type('image/png'))",
+  "image-set(url(foobar.png) type('image/png') type('image/png'))",
+  "image-set(url(foobar.png) type(image/png))",
+  "image-set(url(foobar.png) epyt('image/png'))",
+
+  ...(IsCSSPropertyPrefEnabled("layout.css.cross-fade.enabled")
+    ? [
+        "cross-fade(red blue)",
+        "cross-fade()",
+        "cross-fade(50%, blue 50%)",
+        // Old syntax
+        "cross-fade(red, white, 50%)",
+        // see: <https://github.com/w3c/csswg-drafts/issues/5333>. This
+        // may become invalid depending on how discussion on that issue
+        // goes.
+        "cross-fade(red, 150%, blue)",
+        "cross-fade(red auto, blue 10%)",
+
+        // nested invalidity should propagate.
+        "cross-fade(url(http://placekitten.com/200/300), 55% linear-gradient(center, red, blue))",
+        "cross-fade(cross-fade(red, white, 50%), cross-fade(blue))",
+
+        "cross-fade(url(http://placekitten.com/200/300) url(http://placekitten.com/200/300))",
+        "cross-fade(#F0F8FF, rgb(0, 0, 0), rgba(0, 255, 0, 1), 25%)",
+      ]
+    : []),
+];
+var unbalancedGradientAndElementValues = ["-moz-element(#a()"];
+
+var basicShapeSVGBoxValues = [
+  "fill-box",
+  "stroke-box",
+  "view-box",
+
+  "polygon(evenodd, 20pt 20cm) fill-box",
+  "polygon(evenodd, 20ex 20pc) stroke-box",
+  "polygon(evenodd, 20rem 20in) view-box",
+];
+
+var basicShapeOtherValues = [
+  "polygon(20px 20px)",
+  "polygon(20px 20%)",
+  "polygon(20% 20%)",
+  "polygon(20rem 20em)",
+  "polygon(20cm 20mm)",
+  "polygon(20px 20px, 30px 30px)",
+  "polygon(20px 20px, 30% 30%, 30px 30px)",
+  "polygon(nonzero, 20px 20px, 30% 30%, 30px 30px)",
+  "polygon(evenodd, 20px 20px, 30% 30%, 30px 30px)",
+
+  "content-box",
+  "padding-box",
+  "border-box",
+  "margin-box",
+
+  "polygon(0 0) content-box",
+  "border-box polygon(0 0)",
+  "padding-box    polygon(   0  20px ,  30px    20% )  ",
+  "polygon(evenodd, 20% 20em) content-box",
+  "polygon(evenodd, 20vh 20em) padding-box",
+  "polygon(evenodd, 20vh calc(20% + 20em)) border-box",
+  "polygon(evenodd, 20vh 20vw) margin-box",
+
+  "circle()",
+  "circle(at center)",
+  "circle(at top 0px left 20px)",
+  "circle(at bottom right)",
+  "circle(20%)",
+  "circle(300px)",
+  "circle(calc(20px + 30px))",
+  "circle(farthest-side)",
+  "circle(closest-side)",
+  "circle(closest-side at center)",
+  "circle(farthest-side at top)",
+  "circle(20px at top right)",
+  "circle(40% at 50% 100%)",
+  "circle(calc(20% + 20%) at right bottom)",
+  "circle() padding-box",
+
+  "ellipse()",
+  "ellipse(at center)",
+  "ellipse(at top 0px left 20px)",
+  "ellipse(at bottom right)",
+  "ellipse(20% 20%)",
+  "ellipse(300px 50%)",
+  "ellipse(calc(20px + 30px) 10%)",
+  "ellipse(farthest-side closest-side)",
+  "ellipse(closest-side farthest-side)",
+  "ellipse(farthest-side farthest-side)",
+  "ellipse(closest-side closest-side)",
+  "ellipse(closest-side closest-side at center)",
+  "ellipse(20% farthest-side at top)",
+  "ellipse(20px 50% at top right)",
+  "ellipse(closest-side 40% at 50% 100%)",
+  "ellipse(calc(20% + 20%) calc(20px + 20cm) at right bottom)",
+
+  "inset(1px)",
+  "inset(20% -20px)",
+  "inset(20em 4rem calc(20% + 20px))",
+  "inset(20vh 20vw 20pt 3%)",
+  "inset(5px round 3px)",
+  "inset(1px 2px round 3px / 3px)",
+  "inset(1px 2px 3px round 3px 2em / 20%)",
+  "inset(1px 2px 3px 4px round 3px 2vw 20% / 20px 3em 2vh 20%)",
+];
+
+var basicShapeInvalidValues = [
+  "url(#test) url(#tes2)",
+  "polygon (0 0)",
+  "polygon(20px, 40px)",
+  "border-box content-box",
+  "polygon(0 0) polygon(0 0)",
+  "polygon(nonzero 0 0)",
+  "polygon(evenodd 20px 20px)",
+  "polygon(20px 20px, evenodd)",
+  "polygon(20px 20px, nonzero)",
+  "polygon(0 0) conten-box content-box",
+  "content-box polygon(0 0) conten-box",
+  "padding-box polygon(0 0) conten-box",
+  "polygon(0 0) polygon(0 0) content-box",
+  "polygon(0 0) content-box polygon(0 0)",
+  "polygon(0 0), content-box",
+  "polygon(0 0), polygon(0 0)",
+  "content-box polygon(0 0) polygon(0 0)",
+  "content-box polygon(0 0) none",
+  "none content-box polygon(0 0)",
+  "inherit content-box polygon(0 0)",
+  "initial polygon(0 0)",
+  "polygon(0 0) farthest-side",
+  "farthest-corner polygon(0 0)",
+  "polygon(0 0) farthest-corner",
+  "polygon(0 0) conten-box",
+  "polygon(0 0) polygon(0 0) farthest-corner",
+  "polygon(0 0) polygon(0 0) polygon(0 0)",
+  "border-box polygon(0, 0)",
+  "border-box padding-box",
+  "margin-box farthest-side",
+  "nonsense() border-box",
+  "border-box nonsense()",
+
+  "circle(at)",
+  "circle(at 20% 20% 30%)",
+  "circle(20px 2px at center)",
+  "circle(2at center)",
+  "circle(closest-corner)",
+  "circle(at center top closest-side)",
+  "circle(-20px)",
+  "circle(farthest-side closest-side)",
+  "circle(20% 20%)",
+  "circle(at farthest-side)",
+  "circle(calc(20px + rubbish))",
+  "circle(at top left 20px)",
+
+  "ellipse(at)",
+  "ellipse(at 20% 20% 30%)",
+  "ellipse(20px at center)",
+  "ellipse(-20px 20px)",
+  "ellipse(closest-corner farthest-corner)",
+  "ellipse(20px -20px)",
+  "ellipse(-20px -20px)",
+  "ellipse(farthest-side)",
+  "ellipse(20%)",
+  "ellipse(at farthest-side farthest-side)",
+  "ellipse(at top left calc(20px + rubbish))",
+  "ellipse(at top left 20px)",
+
+  "polygon(at)",
+  "polygon(at 20% 20% 30%)",
+  "polygon(20px at center)",
+  "polygon(2px 2at center)",
+  "polygon(closest-corner farthest-corner)",
+  "polygon(at center top closest-side closest-side)",
+  "polygon(40% at 50% 100%)",
+  "polygon(40% farthest-side 20px at 50% 100%)",
+
+  "inset()",
+  "inset(round)",
+  "inset(round 3px)",
+  "inset(1px round 1px 2px 3px 4px 5px)",
+  "inset(1px 2px 3px 4px 5px)",
+  "inset(1px, round 3px)",
+  "inset(1px, 2px)",
+  "inset(1px 2px, 3px)",
+  "inset(1px at 3px)",
+  "inset(1px round 1px // 2px)",
+  "inset(1px round)",
+  "inset(1px calc(2px + rubbish))",
+  "inset(1px round 2px calc(3px + rubbish))",
+];
+
+var basicShapeUnbalancedValues = [
+  "polygon(30% 30%",
+  "polygon(nonzero, 20% 20px",
+  "polygon(evenodd, 20px 20px",
+
+  "circle(",
+  "circle(40% at 50% 100%",
+  "ellipse(",
+  "ellipse(40% at 50% 100%",
+
+  "inset(1px",
+  "inset(1px 2px",
+  "inset(1px 2px 3px",
+  "inset(1px 2px 3px 4px",
+  "inset(1px 2px 3px 4px round 5px",
+  "inset(1px 2px 3px 4px round 5px / 6px",
+];
+
+if (/* mozGradientsEnabled */ true) {
+  // Maybe one day :(
+  // Extend gradient lists with valid/invalid moz-prefixed expressions:
+  validNonUrlImageValues.push(
+    "-moz-linear-gradient(red, blue)",
+    "-moz-linear-gradient(red, yellow, blue)",
+    "-moz-linear-gradient(red 1px, yellow 20%, blue 24em, green)",
+    "-moz-linear-gradient(red, yellow, green, blue 50%)",
+    "-moz-linear-gradient(red -50%, yellow -25%, green, blue)",
+    "-moz-linear-gradient(red -99px, yellow, green, blue 120%)",
+    "-moz-linear-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
+    "-moz-linear-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
+
+    "-moz-linear-gradient(top, red, blue)",
+
+    "-moz-linear-gradient(to top, red, blue)",
+    "-moz-linear-gradient(to bottom, red, blue)",
+    "-moz-linear-gradient(to left, red, blue)",
+    "-moz-linear-gradient(to right, red, blue)",
+    "-moz-linear-gradient(to top left, red, blue)",
+    "-moz-linear-gradient(to top right, red, blue)",
+    "-moz-linear-gradient(to bottom left, red, blue)",
+    "-moz-linear-gradient(to bottom right, red, blue)",
+    "-moz-linear-gradient(to left top, red, blue)",
+    "-moz-linear-gradient(to left bottom, red, blue)",
+    "-moz-linear-gradient(to right top, red, blue)",
+    "-moz-linear-gradient(to right bottom, red, blue)",
+
+    "-moz-linear-gradient(top left, red, blue)",
+    "-moz-linear-gradient(left, red, blue)",
+    "-moz-linear-gradient(bottom, red, blue)",
+
+    "-moz-linear-gradient(0, red, blue)",
+
+    "-moz-linear-gradient(-33deg, red, blue)",
+
+    "-moz-linear-gradient(blue calc(0px) ,green calc(25%) ,red calc(40px) ,blue calc(60px) , yellow  calc(100px))",
+    "-moz-linear-gradient(-33deg, blue calc(-25%) ,red 40px)",
+    "-moz-linear-gradient(10deg, blue calc(100px + -25%),red calc(40px))",
+    "-moz-linear-gradient(10deg, blue calc(-25px),red calc(100%))",
+    "-moz-linear-gradient(.414rad, blue calc(100px + -25px) ,green calc(100px + -25px) ,red calc(100px + -25%) ,blue calc(-25px) , yellow  calc(-25px))",
+    "-moz-linear-gradient(1turn, blue calc(-25%) ,green calc(25px) ,red calc(25%),blue calc(0px),white 50px, yellow  calc(-25px))",
+
+    "-moz-radial-gradient(red, blue)",
+    "-moz-radial-gradient(red, yellow, blue)",
+    "-moz-radial-gradient(red 1px, yellow 20%, blue 24em, green)",
+    "-moz-radial-gradient(red, yellow, green, blue 50%)",
+    "-moz-radial-gradient(red -50%, yellow -25%, green, blue)",
+    "-moz-radial-gradient(red -99px, yellow, green, blue 120%)",
+    "-moz-radial-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
+
+    "-moz-radial-gradient(top left, red, blue)",
+    "-moz-radial-gradient(20% bottom, red, blue)",
+    "-moz-radial-gradient(center 20%, red, blue)",
+    "-moz-radial-gradient(left 35px, red, blue)",
+    "-moz-radial-gradient(10% 10em, red, blue)",
+    "-moz-radial-gradient(44px top, red, blue)",
+
+    "-moz-radial-gradient(0 0, red, blue)",
+    "-moz-radial-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
+
+    "-moz-radial-gradient(cover, red, blue)",
+    "-moz-radial-gradient(cover circle, red, blue)",
+    "-moz-radial-gradient(contain, red, blue)",
+    "-moz-radial-gradient(contain ellipse, red, blue)",
+    "-moz-radial-gradient(circle, red, blue)",
+    "-moz-radial-gradient(ellipse closest-corner, red, blue)",
+    "-moz-radial-gradient(farthest-side circle, red, blue)",
+
+    "-moz-radial-gradient(top left, cover, red, blue)",
+    "-moz-radial-gradient(15% 20%, circle, red, blue)",
+    "-moz-radial-gradient(45px, ellipse closest-corner, red, blue)",
+    "-moz-radial-gradient(45px, farthest-side circle, red, blue)",
+
+    "-moz-repeating-linear-gradient(red, blue)",
+    "-moz-repeating-linear-gradient(red, yellow, blue)",
+    "-moz-repeating-linear-gradient(red 1px, yellow 20%, blue 24em, green)",
+    "-moz-repeating-linear-gradient(red, yellow, green, blue 50%)",
+    "-moz-repeating-linear-gradient(red -50%, yellow -25%, green, blue)",
+    "-moz-repeating-linear-gradient(red -99px, yellow, green, blue 120%)",
+    "-moz-repeating-linear-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
+    "-moz-repeating-linear-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
+
+    "-moz-repeating-linear-gradient(to top, red, blue)",
+    "-moz-repeating-linear-gradient(to bottom, red, blue)",
+    "-moz-repeating-linear-gradient(to left, red, blue)",
+    "-moz-repeating-linear-gradient(to right, red, blue)",
+    "-moz-repeating-linear-gradient(to top left, red, blue)",
+    "-moz-repeating-linear-gradient(to top right, red, blue)",
+    "-moz-repeating-linear-gradient(to bottom left, red, blue)",
+    "-moz-repeating-linear-gradient(to bottom right, red, blue)",
+    "-moz-repeating-linear-gradient(to left top, red, blue)",
+    "-moz-repeating-linear-gradient(to left bottom, red, blue)",
+    "-moz-repeating-linear-gradient(to right top, red, blue)",
+    "-moz-repeating-linear-gradient(to right bottom, red, blue)",
+
+    "-moz-repeating-linear-gradient(top left, red, blue)",
+
+    "-moz-repeating-radial-gradient(red, blue)",
+    "-moz-repeating-radial-gradient(red, yellow, blue)",
+    "-moz-repeating-radial-gradient(red 1px, yellow 20%, blue 24em, green)",
+    "-moz-repeating-radial-gradient(red, yellow, green, blue 50%)",
+    "-moz-repeating-radial-gradient(red -50%, yellow -25%, green, blue)",
+    "-moz-repeating-radial-gradient(red -99px, yellow, green, blue 120%)",
+    "-moz-repeating-radial-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
+    "-moz-repeating-radial-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
+
+    "-moz-repeating-radial-gradient(farthest-corner, red, blue)",
+    "-moz-repeating-radial-gradient(circle, red, blue)",
+    "-moz-repeating-radial-gradient(ellipse closest-corner, red, blue)",
+
+    "-moz-radial-gradient(calc(25%) top, red, blue)",
+    "-moz-radial-gradient(left calc(25%), red, blue)",
+    "-moz-radial-gradient(calc(25px) top, red, blue)",
+    "-moz-radial-gradient(left calc(25px), red, blue)",
+    "-moz-radial-gradient(calc(-25%) top, red, blue)",
+    "-moz-radial-gradient(left calc(-25%), red, blue)",
+    "-moz-radial-gradient(calc(-25px) top, red, blue)",
+    "-moz-radial-gradient(left calc(-25px), red, blue)",
+    "-moz-radial-gradient(calc(100px + -25%) top, red, blue)",
+    "-moz-radial-gradient(left calc(100px + -25%), red, blue)",
+    "-moz-radial-gradient(calc(100px + -25px) top, red, blue)",
+    "-moz-radial-gradient(left calc(100px + -25px), red, blue)"
+  );
+
+  invalidNonUrlImageValues.push(
+    // The entries in this block used to be valid with the older more-complex
+    // -moz prefixed gradient syntax, but we've since simplified the syntax for
+    // consistency with -webkit prefixed gradients, in a way that makes these
+    // invalid now.
+    "-moz-linear-gradient(center 0%, red, blue)",
+    "-moz-linear-gradient(50% top, red, blue)",
+    "-moz-linear-gradient(50% 0%, red, blue)",
+    "-moz-linear-gradient(0 0, red, blue)",
+    "-moz-linear-gradient(20% bottom, red, blue)",
+    "-moz-linear-gradient(center 20%, red, blue)",
+    "-moz-linear-gradient(left 35px, red, blue)",
+    "-moz-linear-gradient(10% 10em, red, blue)",
+    "-moz-linear-gradient(44px top, red, blue)",
+    "-moz-linear-gradient(0px, red, blue)",
+    "-moz-linear-gradient(top left 45deg, red, blue)",
+    "-moz-linear-gradient(20% bottom -300deg, red, blue)",
+    "-moz-linear-gradient(center 20% 1.95929rad, red, blue)",
+    "-moz-linear-gradient(left 35px 30grad, red, blue)",
+    "-moz-linear-gradient(left 35px 0.1turn, red, blue)",
+    "-moz-linear-gradient(10% 10em 99999deg, red, blue)",
+    "-moz-linear-gradient(44px top -33deg, red, blue)",
+    "-moz-linear-gradient(30grad left 35px, red, blue)",
+    "-moz-linear-gradient(10deg 20px, red, blue)",
+    "-moz-linear-gradient(1turn 20px, red, blue)",
+    "-moz-linear-gradient(.414rad bottom, red, blue)",
+    "-moz-radial-gradient(top left 45deg, red, blue)",
+    "-moz-radial-gradient(20% bottom -300deg, red, blue)",
+    "-moz-radial-gradient(center 20% 1.95929rad, red, blue)",
+    "-moz-radial-gradient(left 35px 30grad, red, blue)",
+    "-moz-radial-gradient(10% 10em 99999deg, red, blue)",
+    "-moz-radial-gradient(44px top -33deg, red, blue)",
+    "-moz-radial-gradient(-33deg, red, blue)",
+    "-moz-radial-gradient(30grad left 35px, red, blue)",
+    "-moz-radial-gradient(10deg 20px, red, blue)",
+    "-moz-radial-gradient(.414rad bottom, red, blue)",
+    "-moz-radial-gradient(99deg, cover, red, blue)",
+    "-moz-radial-gradient(-1.2345rad, circle, red, blue)",
+    "-moz-radial-gradient(399grad, ellipse closest-corner, red, blue)",
+    "-moz-radial-gradient(399grad, farthest-side circle, red, blue)",
+    "-moz-radial-gradient(top left 99deg, cover, red, blue)",
+    "-moz-radial-gradient(15% 20% -1.2345rad, circle, red, blue)",
+    "-moz-radial-gradient(45px 399grad, ellipse closest-corner, red, blue)",
+    "-moz-radial-gradient(45px 399grad, farthest-side circle, red, blue)",
+    "-moz-repeating-linear-gradient(0 0, red, blue)",
+    "-moz-repeating-linear-gradient(20% bottom, red, blue)",
+    "-moz-repeating-linear-gradient(center 20%, red, blue)",
+    "-moz-repeating-linear-gradient(left 35px, red, blue)",
+    "-moz-repeating-linear-gradient(10% 10em, red, blue)",
+    "-moz-repeating-linear-gradient(44px top, red, blue)",
+    "-moz-repeating-linear-gradient(top left 45deg, red, blue)",
+    "-moz-repeating-linear-gradient(20% bottom -300deg, red, blue)",
+    "-moz-repeating-linear-gradient(center 20% 1.95929rad, red, blue)",
+    "-moz-repeating-linear-gradient(left 35px 30grad, red, blue)",
+    "-moz-repeating-linear-gradient(10% 10em 99999deg, red, blue)",
+    "-moz-repeating-linear-gradient(44px top -33deg, red, blue)",
+    "-moz-repeating-linear-gradient(30grad left 35px, red, blue)",
+    "-moz-repeating-linear-gradient(10deg 20px, red, blue)",
+    "-moz-repeating-linear-gradient(.414rad bottom, red, blue)",
+
+    /* Negative radii */
+    "-moz-radial-gradient(40%, -100px -10%, red, blue)",
+
+    /* no quirks mode colors */
+    "-moz-radial-gradient(10% bottom, ffffff, black) scroll no-repeat",
+    /* no quirks mode lengths */
+    "-moz-linear-gradient(10 10px -45deg, red, blue) repeat",
+    "-moz-linear-gradient(10px 10 -45deg, red, blue) repeat",
+    /* Unitless 0 is invalid as an <angle> */
+    "-moz-linear-gradient(top left 0, red, blue)",
+    "-moz-linear-gradient(5px 5px 0, red, blue)",
+    /* There must be a comma between gradient-line (e.g. <angle>) and colors */
+    "-moz-linear-gradient(30deg red, blue)",
+    "-moz-linear-gradient(5px 5px 30deg red, blue)",
+    "-moz-linear-gradient(5px 5px red, blue)",
+    "-moz-linear-gradient(top left 30deg red, blue)",
+
+    /* Old syntax */
+    "-moz-linear-gradient(10px 10px, 20px, 30px 30px, 40px, from(blue), to(red))",
+    "-moz-radial-gradient(20px 20px, 10px 10px, from(green), to(#ff00ff))",
+    "-moz-radial-gradient(10px 10px, 20%, 40px 40px, 10px, from(green), to(#ff00ff))",
+    "-moz-linear-gradient(10px, 20px, 30px, 40px, color-stop(0.5, #00ccff))",
+    "-moz-linear-gradient(20px 20px, from(blue), to(red))",
+    "-moz-linear-gradient(40px 40px, 10px 10px, from(blue) to(red) color-stop(10%, fuchsia))",
+    "-moz-linear-gradient(20px 20px 30px, 10px 10px, from(red), to(#ff0000))",
+    "-moz-radial-gradient(left top, center, 20px 20px, 10px, from(blue), to(red))",
+    "-moz-linear-gradient(left left, top top, from(blue))",
+    "-moz-linear-gradient(inherit, 10px 10px, from(blue))",
+    /* New syntax */
+    "-moz-linear-gradient(10px 10px, 20px, 30px 30px, 40px, blue 0, red 100%)",
+    "-moz-radial-gradient(20px 20px, 10px 10px, from(green), to(#ff00ff))",
+    "-moz-radial-gradient(10px 10px, 20%, 40px 40px, 10px, from(green), to(#ff00ff))",
+    "-moz-linear-gradient(10px, 20px, 30px, 40px, #00ccff 50%)",
+    "-moz-linear-gradient(40px 40px, 10px 10px, blue 0 fuchsia 10% red 100%)",
+    "-moz-linear-gradient(20px 20px 30px, 10px 10px, red 0, #ff0000 100%)",
+    "-moz-radial-gradient(left top, center, 20px 20px, 10px, from(blue), to(red))",
+    "-moz-linear-gradient(left left, top top, blue 0)",
+    "-moz-linear-gradient(inherit, 10px 10px, blue 0)",
+    "-moz-linear-gradient(left left blue red)",
+    "-moz-linear-gradient(left left blue, red)",
+    "-moz-linear-gradient()",
+    "-moz-linear-gradient(cover, red, blue)",
+    "-moz-linear-gradient(auto, red, blue)",
+    "-moz-linear-gradient(22 top, red, blue)",
+    "-moz-linear-gradient(10% red blue)",
+    "-moz-linear-gradient(10%, red blue)",
+    "-moz-linear-gradient(10%,, red, blue)",
+    "-moz-linear-gradient(45px, center, red, blue)",
+    "-moz-linear-gradient(45px, center red, blue)",
+    "-moz-radial-gradient(contain, ellipse, red, blue)",
+    "-moz-radial-gradient(10deg contain, red, blue)",
+    "-moz-radial-gradient(10deg, contain,, red, blue)",
+    "-moz-radial-gradient(contain contain, red, blue)",
+    "-moz-radial-gradient(ellipse circle, red, blue)",
+    "-moz-radial-gradient(to top left, red, blue)",
+    "-moz-radial-gradient(center, 10%, red, blue)",
+    "-moz-radial-gradient(5rad, 20px, red, blue)",
+
+    "-moz-radial-gradient(at top left to cover, red, blue)",
+    "-moz-radial-gradient(at 15% 20% circle, red, blue)",
+
+    "-moz-radial-gradient(to cover, red, blue)",
+    "-moz-radial-gradient(to contain, red, blue)",
+    "-moz-radial-gradient(to closest-side circle, red, blue)",
+    "-moz-radial-gradient(to farthest-corner ellipse, red, blue)",
+
+    "-moz-radial-gradient(ellipse at 45px closest-corner, red, blue)",
+    "-moz-radial-gradient(circle at 45px farthest-side, red, blue)",
+    "-moz-radial-gradient(ellipse 45px, closest-side, red, blue)",
+    "-moz-radial-gradient(circle 45px, farthest-corner, red, blue)",
+    "-moz-radial-gradient(ellipse, ellipse closest-side, red, blue)",
+    "-moz-radial-gradient(circle, circle farthest-corner, red, blue)",
+
+    "-moz-radial-gradient(99deg to farthest-corner, red, blue)",
+    "-moz-radial-gradient(-1.2345rad circle, red, blue)",
+    "-moz-radial-gradient(ellipse 399grad to closest-corner, red, blue)",
+    "-moz-radial-gradient(circle 399grad to farthest-side, red, blue)",
+
+    "-moz-radial-gradient(at top left 99deg, to farthest-corner, red, blue)",
+    "-moz-radial-gradient(circle at 15% 20% -1.2345rad, red, blue)",
+    "-moz-radial-gradient(to top left at 30% 40%, red, blue)",
+    "-moz-radial-gradient(ellipse at 45px 399grad, to closest-corner, red, blue)",
+    "-moz-radial-gradient(at 45px 399grad to farthest-side circle, red, blue)",
+
+    "-moz-radial-gradient(to 50%, red, blue)",
+    "-moz-radial-gradient(circle to 50%, red, blue)",
+    "-moz-radial-gradient(circle to 43px 43px, red, blue)",
+    "-moz-radial-gradient(circle to 50% 50%, red, blue)",
+    "-moz-radial-gradient(circle to 43px 50%, red, blue)",
+    "-moz-radial-gradient(circle to 50% 43px, red, blue)",
+    "-moz-radial-gradient(ellipse to 43px, red, blue)",
+    "-moz-radial-gradient(ellipse to 50%, red, blue)",
+
+    "-moz-linear-gradient(to 0 0, red, blue)",
+    "-moz-linear-gradient(to 20% bottom, red, blue)",
+    "-moz-linear-gradient(to center 20%, red, blue)",
+    "-moz-linear-gradient(to left 35px, red, blue)",
+    "-moz-linear-gradient(to 10% 10em, red, blue)",
+    "-moz-linear-gradient(to 44px top, red, blue)",
+    "-moz-linear-gradient(to top left 45deg, red, blue)",
+    "-moz-linear-gradient(to 20% bottom -300deg, red, blue)",
+    "-moz-linear-gradient(to center 20% 1.95929rad, red, blue)",
+    "-moz-linear-gradient(to left 35px 30grad, red, blue)",
+    "-moz-linear-gradient(to 10% 10em 99999deg, red, blue)",
+    "-moz-linear-gradient(to 44px top -33deg, red, blue)",
+    "-moz-linear-gradient(to -33deg, red, blue)",
+    "-moz-linear-gradient(to 30grad left 35px, red, blue)",
+    "-moz-linear-gradient(to 10deg 20px, red, blue)",
+    "-moz-linear-gradient(to .414rad bottom, red, blue)",
+
+    "-moz-linear-gradient(to top top, red, blue)",
+    "-moz-linear-gradient(to bottom bottom, red, blue)",
+    "-moz-linear-gradient(to left left, red, blue)",
+    "-moz-linear-gradient(to right right, red, blue)",
+
+    "-moz-repeating-linear-gradient(10px 10px, 20px, 30px 30px, 40px, blue 0, red 100%)",
+    "-moz-repeating-radial-gradient(20px 20px, 10px 10px, from(green), to(#ff00ff))",
+    "-moz-repeating-radial-gradient(10px 10px, 20%, 40px 40px, 10px, from(green), to(#ff00ff))",
+    "-moz-repeating-linear-gradient(10px, 20px, 30px, 40px, #00ccff 50%)",
+    "-moz-repeating-linear-gradient(40px 40px, 10px 10px, blue 0 fuchsia 10% red 100%)",
+    "-moz-repeating-linear-gradient(20px 20px 30px, 10px 10px, red 0, #ff0000 100%)",
+    "-moz-repeating-radial-gradient(left top, center, 20px 20px, 10px, from(blue), to(red))",
+    "-moz-repeating-linear-gradient(left left, top top, blue 0)",
+    "-moz-repeating-linear-gradient(inherit, 10px 10px, blue 0)",
+    "-moz-repeating-linear-gradient(left left blue red)",
+    "-moz-repeating-linear-gradient()",
+
+    "-moz-repeating-linear-gradient(to 0 0, red, blue)",
+    "-moz-repeating-linear-gradient(to 20% bottom, red, blue)",
+    "-moz-repeating-linear-gradient(to center 20%, red, blue)",
+    "-moz-repeating-linear-gradient(to left 35px, red, blue)",
+    "-moz-repeating-linear-gradient(to 10% 10em, red, blue)",
+    "-moz-repeating-linear-gradient(to 44px top, red, blue)",
+    "-moz-repeating-linear-gradient(to top left 45deg, red, blue)",
+    "-moz-repeating-linear-gradient(to 20% bottom -300deg, red, blue)",
+    "-moz-repeating-linear-gradient(to center 20% 1.95929rad, red, blue)",
+    "-moz-repeating-linear-gradient(to left 35px 30grad, red, blue)",
+    "-moz-repeating-linear-gradient(to 10% 10em 99999deg, red, blue)",
+    "-moz-repeating-linear-gradient(to 44px top -33deg, red, blue)",
+    "-moz-repeating-linear-gradient(to -33deg, red, blue)",
+    "-moz-repeating-linear-gradient(to 30grad left 35px, red, blue)",
+    "-moz-repeating-linear-gradient(to 10deg 20px, red, blue)",
+    "-moz-repeating-linear-gradient(to .414rad bottom, red, blue)",
+
+    "-moz-repeating-linear-gradient(to top top, red, blue)",
+    "-moz-repeating-linear-gradient(to bottom bottom, red, blue)",
+    "-moz-repeating-linear-gradient(to left left, red, blue)",
+    "-moz-repeating-linear-gradient(to right right, red, blue)",
+
+    "-moz-repeating-radial-gradient(to top left at 30% 40%, red, blue)",
+    "-moz-repeating-radial-gradient(ellipse at 45px closest-corner, red, blue)",
+    "-moz-repeating-radial-gradient(circle at 45px farthest-side, red, blue)",
+
+    /* Valid only when unprefixed */
+    "-moz-radial-gradient(at top left, red, blue)",
+    "-moz-radial-gradient(at 20% bottom, red, blue)",
+    "-moz-radial-gradient(at center 20%, red, blue)",
+    "-moz-radial-gradient(at left 35px, red, blue)",
+    "-moz-radial-gradient(at 10% 10em, red, blue)",
+    "-moz-radial-gradient(at 44px top, red, blue)",
+    "-moz-radial-gradient(at 0 0, red, blue)",
+
+    "-moz-radial-gradient(circle 43px, red, blue)",
+    "-moz-radial-gradient(ellipse 43px 43px, red, blue)",
+    "-moz-radial-gradient(ellipse 50% 50%, red, blue)",
+    "-moz-radial-gradient(ellipse 43px 50%, red, blue)",
+    "-moz-radial-gradient(ellipse 50% 43px, red, blue)",
+
+    "-moz-radial-gradient(farthest-corner at top left, red, blue)",
+    "-moz-radial-gradient(ellipse closest-corner at 45px, red, blue)",
+    "-moz-radial-gradient(circle farthest-side at 45px, red, blue)",
+    "-moz-radial-gradient(closest-side ellipse at 50%, red, blue)",
+    "-moz-radial-gradient(farthest-corner circle at 4em, red, blue)",
+
+    "-moz-radial-gradient(30% 40% at top left, red, blue)",
+    "-moz-radial-gradient(50px 60px at 15% 20%, red, blue)",
+    "-moz-radial-gradient(7em 8em at 45px, red, blue)"
+  );
+}
+
+const pathValues = {
+  other_values: [
+    "path('M 10 10 20 20 H 90 V 90 Z')",
+    "path('M10 10 20,20H90V90Z')",
+    "path('M 10 10 C 20 20, 40 20, 50 10')",
+    "path('M 10 80 C 40 10, 65 10, 95 80 S 1.5e2 150, 180 80')",
+    "path('M 10 80 Q 95 10 180 80')",
+    "path('M 10 80 Q 52.5 10, 95 80 T 180 80')",
+    "path('M 80 80 A 45 45, 0, 0, 0, 1.25e2 1.25e2 L 125 80 Z')",
+    "path('M100-200h20z')",
+    "path('M10,10L20.6.5z')",
+  ],
+  invalid_values: [
+    "path()",
+    "path(a)",
+    "path('M 10 Z')",
+    "path('M 10-10 20')",
+    "path('M 10 10 C 20 20 40 20')",
+  ],
+};
+
+var gCSSProperties = {
+  animation: {
+    domProp: "animation",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    applies_to_marker: true,
+    subproperties: [
+      "animation-name",
+      "animation-duration",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-direction",
+      "animation-fill-mode",
+      "animation-iteration-count",
+      "animation-play-state",
+    ],
+    initial_values: [
+      "none none 0s 0s ease normal running 1.0",
+      "none",
+      "0s",
+      "ease",
+      "normal",
+      "running",
+      "1.0",
+    ],
+    other_values: [
+      "none none 0s 0s cubic-bezier(0.25, 0.1, 0.25, 1.0) normal running 1.0",
+      "bounce 1s linear 2s",
+      "bounce 1s 2s linear",
+      "bounce linear 1s 2s",
+      "linear bounce 1s 2s",
+      "linear 1s bounce 2s",
+      "linear 1s 2s bounce",
+      "1s bounce linear 2s",
+      "1s bounce 2s linear",
+      "1s 2s bounce linear",
+      "1s linear bounce 2s",
+      "1s linear 2s bounce",
+      "1s 2s linear bounce",
+      "bounce linear 1s",
+      "bounce 1s linear",
+      "linear bounce 1s",
+      "linear 1s bounce",
+      "1s bounce linear",
+      "1s linear bounce",
+      "1s 2s bounce",
+      "1s bounce 2s",
+      "bounce 1s 2s",
+      "1s 2s linear",
+      "1s linear 2s",
+      "linear 1s 2s",
+      "bounce 1s",
+      "1s bounce",
+      "linear 1s",
+      "1s linear",
+      "1s 2s",
+      "2s 1s",
+      "bounce",
+      "linear",
+      "1s",
+      "height",
+      "2s",
+      "ease-in-out",
+      "2s ease-in",
+      "opacity linear",
+      "ease-out 2s",
+      "2s color, 1s bounce, 500ms height linear, 1s opacity 4s cubic-bezier(0.0, 0.1, 1.0, 1.0)",
+      "1s \\32bounce linear 2s",
+      "1s -bounce linear 2s",
+      "1s -\\32bounce linear 2s",
+      "1s \\32 0bounce linear 2s",
+      "1s -\\32 0bounce linear 2s",
+      "1s \\2bounce linear 2s",
+      "1s -\\2bounce linear 2s",
+      "2s, 1s bounce",
+      "1s bounce, 2s",
+      "2s all, 1s bounce",
+      "1s bounce, 2s all",
+      "1s bounce, 2s none",
+      "2s none, 1s bounce",
+      "2s bounce, 1s all",
+      "2s all, 1s bounce",
+    ],
+    invalid_values: [
+      "2s inherit",
+      "inherit 2s",
+      "2s bounce, 1s inherit",
+      "2s inherit, 1s bounce",
+      "2s initial",
+      "2s all,, 1s bounce",
+      "2s all, , 1s bounce",
+      "bounce 1s cubic-bezier(0, rubbish) 2s",
+      "bounce 1s steps(rubbish) 2s",
+      "2s unset",
+    ],
+  },
+  "animation-delay": {
+    domProp: "animationDelay",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["0s", "0ms"],
+    other_values: [
+      "1s",
+      "250ms",
+      "-100ms",
+      "-1s",
+      "1s, 250ms, 2.3s",
+      "calc(1s + 2ms)",
+    ],
+    invalid_values: ["0", "0px"],
+  },
+  "animation-direction": {
+    domProp: "animationDirection",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["normal"],
+    other_values: [
+      "alternate",
+      "normal, alternate",
+      "alternate, normal",
+      "normal, normal",
+      "normal, normal, normal",
+      "reverse",
+      "alternate-reverse",
+      "normal, reverse, alternate-reverse, alternate",
+    ],
+    invalid_values: [
+      "normal normal",
+      "inherit, normal",
+      "reverse-alternate",
+      "normal, unset",
+      "unset, normal",
+    ],
+  },
+  "animation-duration": {
+    domProp: "animationDuration",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0s", "0ms"],
+    applies_to_marker: true,
+    other_values: ["1s", "250ms", "1s, 250ms, 2.3s", "calc(1s + 2ms)"],
+    invalid_values: ["0", "0px", "-1ms", "-2s"],
+  },
+  "animation-fill-mode": {
+    domProp: "animationFillMode",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["none"],
+    other_values: [
+      "forwards",
+      "backwards",
+      "both",
+      "none, none",
+      "forwards, backwards",
+      "forwards, none",
+      "none, both",
+    ],
+    invalid_values: ["all"],
+  },
+  "animation-iteration-count": {
+    domProp: "animationIterationCount",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["1"],
+    other_values: [
+      "infinite",
+      "0",
+      "0.5",
+      "7.75",
+      "-0.0",
+      "1, 2, 3",
+      "infinite, 2",
+      "1, infinite",
+      "calc(1 + 2.0)",
+    ],
+    // negatives forbidden per
+    // http://lists.w3.org/Archives/Public/www-style/2011Mar/0355.html
+    invalid_values: ["none", "-1", "-0.5", "-1, infinite", "infinite, -3"],
+  },
+  "animation-name": {
+    domProp: "animationName",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["none"],
+    other_values: [
+      "all",
+      "ball",
+      "mall",
+      "color",
+      "bounce, bubble, opacity",
+      "foobar",
+      "auto",
+      "\\32bounce",
+      "-bounce",
+      "-\\32bounce",
+      "\\32 0bounce",
+      "-\\32 0bounce",
+      "\\2bounce",
+      "-\\2bounce",
+    ],
+    invalid_values: [
+      "bounce, initial",
+      "initial, bounce",
+      "bounce, inherit",
+      "inherit, bounce",
+      "bounce, unset",
+      "unset, bounce",
+    ],
+  },
+  "animation-play-state": {
+    domProp: "animationPlayState",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["running"],
+    other_values: [
+      "paused",
+      "running, running",
+      "paused, running",
+      "paused, paused",
+      "running, paused",
+      "paused, running, running, running, paused, running",
+    ],
+    invalid_values: ["0"],
+  },
+  "animation-timing-function": {
+    domProp: "animationTimingFunction",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["ease"],
+    other_values: [
+      "cubic-bezier(0.25, 0.1, 0.25, 1.0)",
+      "linear",
+      "ease-in",
+      "ease-out",
+      "ease-in-out",
+      "linear, ease-in, cubic-bezier(0.1, 0.2, 0.8, 0.9)",
+      "cubic-bezier(0.5, 0.5, 0.5, 0.5)",
+      "cubic-bezier(0.25, 1.5, 0.75, -0.5)",
+      "step-start",
+      "step-end",
+      "steps(1)",
+      "steps(2, start)",
+      "steps(386)",
+      "steps(3, end)",
+      "steps(calc(2 + 1))",
+    ],
+    invalid_values: [
+      "none",
+      "auto",
+      "cubic-bezier(0.25, 0.1, 0.25)",
+      "cubic-bezier(0.25, 0.1, 0.25, 0.25, 1.0)",
+      "cubic-bezier(-0.5, 0.5, 0.5, 0.5)",
+      "cubic-bezier(1.5, 0.5, 0.5, 0.5)",
+      "cubic-bezier(0.5, 0.5, -0.5, 0.5)",
+      "cubic-bezier(0.5, 0.5, 1.5, 0.5)",
+      "steps(2, step-end)",
+      "steps(0)",
+      "steps(-2)",
+      "steps(0, step-end, 1)",
+    ],
+  },
+  appearance: {
+    domProp: "appearance",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["auto", "radio", "menulist"],
+    invalid_values: [],
+  },
+  "-moz-appearance": {
+    domProp: "MozAppearance",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "appearance",
+    subproperties: ["appearance"],
+  },
+  "-webkit-appearance": {
+    domProp: "webkitAppearance",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "appearance",
+    subproperties: ["appearance"],
+  },
+  "aspect-ratio": {
+    domProp: "aspectRatio",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "1",
+      "1.0",
+      "1 / 2",
+      "1/2",
+      "16.2 / 9.5",
+      "1/0",
+      "0/1",
+      "0 / 0",
+      "auto 1",
+      "0 auto",
+    ],
+    invalid_values: ["none", "1 test", "1 / auto", "auto / 1"],
+  },
+  "border-inline": {
+    domProp: "borderInline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-inline-start-color",
+      "border-inline-start-style",
+      "border-inline-start-width",
+      "border-inline-end-color",
+      "border-inline-end-style",
+      "border-inline-end-width",
+    ],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "green",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "5px green none",
+    ],
+    invalid_values: ["5%", "5", "5 solid green"],
+  },
+  "border-inline-end": {
+    domProp: "borderInlineEnd",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-inline-end-color",
+      "border-inline-end-style",
+      "border-inline-end-width",
+    ],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "green",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "5px green none",
+    ],
+    invalid_values: ["5%", "5", "5 green none"],
+  },
+  "border-inline-color": {
+    domProp: "borderInlineColor",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["border-inline-start-color", "border-inline-end-color"],
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5) blue", "blue transparent"],
+    invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"],
+  },
+  "border-inline-end-color": {
+    domProp: "borderInlineEndColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5)", "transparent"],
+    invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"],
+  },
+  "border-inline-style": {
+    domProp: "borderInlineStyle",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["border-inline-start-style", "border-inline-end-style"],
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed solid",
+      "solid dotted",
+      "double double",
+      "inset outset",
+      "inset double",
+      "none groove",
+      "ridge none",
+    ],
+    invalid_values: [],
+  },
+  "border-inline-end-style": {
+    domProp: "borderInlineEndStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    /* XXX hidden is sometimes the same as initial */
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed",
+      "dotted",
+      "double",
+      "outset",
+      "inset",
+      "groove",
+      "ridge",
+    ],
+    invalid_values: [],
+  },
+  "border-inline-width": {
+    domProp: "borderInlineWidth",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["border-inline-start-width", "border-inline-end-width"],
+    prerequisites: { "border-style": "solid" },
+    initial_values: ["medium", "3px", "medium medium"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(2px) thin",
+      "calc(-2px)",
+      "calc(-2px) thick",
+      "calc(0em)",
+      "medium calc(0em)",
+      "calc(0px)",
+      "1px calc(0px)",
+      "calc(5em)",
+      "1em calc(5em)",
+    ],
+    invalid_values: ["5%", "5", "5 thin", "thin 5%", "blue", "solid"],
+  },
+  "border-inline-end-width": {
+    domProp: "borderInlineEndWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    prerequisites: { "border-inline-end-style": "solid" },
+    initial_values: ["medium", "3px", "calc(4px - 1px)"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0em)",
+      "calc(0px)",
+      "calc(5em)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 5em)",
+    ],
+    invalid_values: ["5%", "5"],
+  },
+  "border-image": {
+    domProp: "borderImage",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat",
+    ],
+    initial_values: ["none"],
+    other_values: [
+      "url('border.png') 27 27 27 27",
+      "url('border.png') 27",
+      "stretch url('border.png')",
+      "url('border.png') 27 fill",
+      "url('border.png') 27 27 27 27 repeat",
+      "repeat url('border.png') 27 27 27 27",
+      "url('border.png') repeat 27 27 27 27",
+      "url('border.png') fill 27 27 27 27 repeat",
+      "url('border.png') fill 27 27 27 27 repeat space",
+      "url('border.png') 27 27 27 27 / 1em",
+      "27 27 27 27 / 1em url('border.png') ",
+      "url('border.png') 27 27 27 27 / 10 10 10 / 10 10 repeat",
+      "repeat 27 27 27 27 / 10 10 10 / 10 10 url('border.png')",
+      "url('border.png') 27 27 27 27 / / 10 10 1em",
+      "fill 27 27 27 27 / / 10 10 1em url('border.png')",
+      "url('border.png') 27 27 27 27 / 1em 1em 1em 1em repeat",
+      "url('border.png') 27 27 27 27 / 1em 1em 1em 1em stretch round",
+    ],
+    invalid_values: [
+      "url('border.png') 27 27 27 27 27",
+      "url('border.png') 27 27 27 27 / 1em 1em 1em 1em 1em",
+      "url('border.png') 27 27 27 27 /",
+      "url('border.png') fill",
+      "url('border.png') fill repeat",
+      "fill repeat",
+      "url('border.png') fill / 1em",
+      "url('border.png') / repeat",
+      "url('border.png') 1 /",
+      "url('border.png') 1 / /",
+      "1 / url('border.png')",
+      "url('border.png') / 1",
+      "url('border.png') / / 1",
+    ],
+  },
+  "border-image-source": {
+    domProp: "borderImageSource",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["none"],
+    other_values: ["url('border.png')"].concat(validNonUrlImageValues),
+    invalid_values: ["url('border.png') url('border.png')"].concat(
+      invalidNonUrlImageValues
+    ),
+    unbalanced_values: [].concat(unbalancedGradientAndElementValues),
+  },
+  "border-image-slice": {
+    domProp: "borderImageSlice",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["100%", "100% 100% 100% 100%"],
+    other_values: [
+      "0%",
+      "10",
+      "10 100% 0 2",
+      "0 0 0 0",
+      "fill 10 10",
+      "10 10 fill",
+    ],
+    invalid_values: [
+      "-10%",
+      "-10",
+      "10 10 10 10 10",
+      "10 10 10 10 -10",
+      "10px",
+      "-10px",
+      "fill",
+      "fill fill 10px",
+      "10px fill fill",
+    ],
+  },
+  "border-image-width": {
+    domProp: "borderImageWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["1", "1 1 1 1"],
+    other_values: [
+      "0",
+      "0%",
+      "0px",
+      "auto auto auto auto",
+      "10 10% auto 15px",
+      "10px 10px 10px 10px",
+      "10",
+      "10 10",
+      "10 10 10",
+      "calc(10px)",
+      "calc(10px + 5%)",
+    ],
+    invalid_values: [
+      "-10",
+      "-10px",
+      "-10%",
+      "10 10 10 10 10",
+      "10 10 10 10 auto",
+      "auto auto auto auto auto",
+      "10px calc(nonsense)",
+      "1px red",
+    ],
+    unbalanced_values: ["10px calc("],
+  },
+  "border-image-outset": {
+    domProp: "borderImageOutset",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["0", "0 0 0 0"],
+    other_values: [
+      "10px",
+      "10",
+      "10 10",
+      "10 10 10",
+      "10 10 10 10",
+      "10px 10 10 10px",
+    ],
+    invalid_values: [
+      "-10",
+      "-10px",
+      "-10%",
+      "10%",
+      "10 10 10 10 10",
+      "10px calc(nonsense)",
+      "1px red",
+    ],
+    unbalanced_values: ["10px calc("],
+  },
+  "border-image-repeat": {
+    domProp: "borderImageRepeat",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["stretch", "stretch stretch"],
+    other_values: [
+      "round",
+      "repeat",
+      "stretch round",
+      "repeat round",
+      "stretch repeat",
+      "round round",
+      "repeat repeat",
+      "space",
+      "stretch space",
+      "repeat space",
+      "round space",
+      "space space",
+    ],
+    invalid_values: ["none", "stretch stretch stretch", "0", "10", "0%", "0px"],
+  },
+  "border-radius": {
+    domProp: "borderRadius",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    prerequisites: { width: "200px", height: "100px", display: "inline-block" },
+    subproperties: [
+      "border-bottom-left-radius",
+      "border-bottom-right-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+    ],
+    initial_values: [
+      "0",
+      "0px",
+      "0px 0 0 0px",
+      "calc(-2px)",
+      "calc(0px) calc(0pt)",
+      "calc(0px) calc(0pt) calc(0px) calc(0em)",
+    ],
+    other_values: [
+      "0%",
+      "3%",
+      "1px",
+      "2em",
+      "3em 2px",
+      "2pt 3% 4em",
+      "2px 2px 2px 2px", // circular
+      "3% / 2%",
+      "1px / 4px",
+      "2em / 1em",
+      "3em 2px / 2px 3em",
+      "2pt 3% 4em / 4pt 1% 5em",
+      "2px 2px 2px 2px / 4px 4px 4px 4px",
+      "1pt / 2pt 3pt",
+      "4pt 5pt / 3pt", // elliptical
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) 5px",
+      "5px calc(3*25px)",
+      "calc(20%) calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "2px 2px calc(2px + 1%) 2px",
+      "1px 2px 2px 2px / 2px 2px calc(2px + 1%) 2px",
+    ],
+    invalid_values: [
+      "2px -2px",
+      "inherit 2px",
+      "inherit / 2px",
+      "2px inherit",
+      "2px / inherit",
+      "2px 2px 2px 2px 2px",
+      "1px / 2px 2px 2px 2px 2px",
+      "2",
+      "2 2",
+      "2px 2px 2px 2px / 2px 2px 2 2px",
+      "2px calc(0px + rubbish)",
+      "unset 2px",
+      "unset / 2px",
+      "2px unset",
+      "2px / unset",
+    ],
+  },
+  "border-bottom-left-radius": {
+    domProp: "borderBottomLeftRadius",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { width: "200px", height: "100px", display: "inline-block" },
+    initial_values: ["0", "0px", "calc(-2px)"],
+    other_values: [
+      "0%",
+      "3%",
+      "1px",
+      "2em", // circular
+      "3% 2%",
+      "1px 4px",
+      "2em 2pt", // elliptical
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) 5px",
+      "5px calc(3*25px)",
+      "calc(20%) calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "-1px",
+      "4px -2px",
+      "inherit 2px",
+      "2px inherit",
+      "2",
+      "2px 2",
+      "2 2px",
+      "2px calc(0px + rubbish)",
+      "unset 2px",
+      "2px unset",
+    ],
+  },
+  "border-bottom-right-radius": {
+    domProp: "borderBottomRightRadius",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { width: "200px", height: "100px", display: "inline-block" },
+    initial_values: ["0", "0px", "calc(-2px)"],
+    other_values: [
+      "0%",
+      "3%",
+      "1px",
+      "2em", // circular
+      "3% 2%",
+      "1px 4px",
+      "2em 2pt", // elliptical
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) 5px",
+      "5px calc(3*25px)",
+      "calc(20%) calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "-1px",
+      "4px -2px",
+      "inherit 2px",
+      "2px inherit",
+      "2",
+      "2px 2",
+      "2 2px",
+      "2px calc(0px + rubbish)",
+      "unset 2px",
+      "2px unset",
+    ],
+  },
+  "border-top-left-radius": {
+    domProp: "borderTopLeftRadius",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { width: "200px", height: "100px", display: "inline-block" },
+    initial_values: ["0", "0px", "calc(-2px)"],
+    other_values: [
+      "0%",
+      "3%",
+      "1px",
+      "2em", // circular
+      "3% 2%",
+      "1px 4px",
+      "2em 2pt", // elliptical
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) 5px",
+      "5px calc(3*25px)",
+      "calc(20%) calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "-1px",
+      "4px -2px",
+      "inherit 2px",
+      "2px inherit",
+      "2",
+      "2px 2",
+      "2 2px",
+      "2px calc(0px + rubbish)",
+      "unset 2px",
+      "2px unset",
+    ],
+  },
+  "border-top-right-radius": {
+    domProp: "borderTopRightRadius",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { width: "200px", height: "100px", display: "inline-block" },
+    initial_values: ["0", "0px", "calc(-2px)"],
+    other_values: [
+      "0%",
+      "3%",
+      "1px",
+      "2em", // circular
+      "3% 2%",
+      "1px 4px",
+      "2em 2pt", // elliptical
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) 5px",
+      "5px calc(3*25px)",
+      "calc(20%) calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "-1px",
+      "4px -2px",
+      "inherit 2px",
+      "2px inherit",
+      "2",
+      "2px 2",
+      "2 2px",
+      "2px calc(0px + rubbish)",
+      "unset 2px",
+      "2px unset",
+    ],
+  },
+  "border-start-start-radius": {
+    domProp: "borderStartStartRadius",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    prerequisites: { width: "200px", height: "100px", display: "inline-block" },
+    initial_values: ["0", "0px", "calc(-2px)"],
+    other_values: [
+      "0%",
+      "3%",
+      "1px",
+      "2em", // circular
+      "3% 2%",
+      "1px 4px",
+      "2em 2pt", // elliptical
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) 5px",
+      "5px calc(3*25px)",
+      "calc(20%) calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "-1px",
+      "4px -2px",
+      "inherit 2px",
+      "2px inherit",
+      "2",
+      "2px 2",
+      "2 2px",
+      "2px calc(0px + rubbish)",
+      "unset 2px",
+      "2px unset",
+    ],
+  },
+  "border-start-end-radius": {
+    domProp: "borderStartEndRadius",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    prerequisites: { width: "200px", height: "100px", display: "inline-block" },
+    initial_values: ["0", "0px", "calc(-2px)"],
+    other_values: [
+      "0%",
+      "3%",
+      "1px",
+      "2em", // circular
+      "3% 2%",
+      "1px 4px",
+      "2em 2pt", // elliptical
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) 5px",
+      "5px calc(3*25px)",
+      "calc(20%) calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "-1px",
+      "4px -2px",
+      "inherit 2px",
+      "2px inherit",
+      "2",
+      "2px 2",
+      "2 2px",
+      "2px calc(0px + rubbish)",
+      "unset 2px",
+      "2px unset",
+    ],
+  },
+  "border-end-start-radius": {
+    domProp: "borderEndStartRadius",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    prerequisites: { width: "200px", height: "100px", display: "inline-block" },
+    initial_values: ["0", "0px", "calc(-2px)"],
+    other_values: [
+      "0%",
+      "3%",
+      "1px",
+      "2em", // circular
+      "3% 2%",
+      "1px 4px",
+      "2em 2pt", // elliptical
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) 5px",
+      "5px calc(3*25px)",
+      "calc(20%) calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "-1px",
+      "4px -2px",
+      "inherit 2px",
+      "2px inherit",
+      "2",
+      "2px 2",
+      "2 2px",
+      "2px calc(0px + rubbish)",
+      "unset 2px",
+      "2px unset",
+    ],
+  },
+  "border-end-end-radius": {
+    domProp: "borderEndEndRadius",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    prerequisites: { width: "200px", height: "100px", display: "inline-block" },
+    initial_values: ["0", "0px", "calc(-2px)"],
+    other_values: [
+      "0%",
+      "3%",
+      "1px",
+      "2em", // circular
+      "3% 2%",
+      "1px 4px",
+      "2em 2pt", // elliptical
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) 5px",
+      "5px calc(3*25px)",
+      "calc(20%) calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "-1px",
+      "4px -2px",
+      "inherit 2px",
+      "2px inherit",
+      "2",
+      "2px 2",
+      "2 2px",
+      "2px calc(0px + rubbish)",
+      "unset 2px",
+      "2px unset",
+    ],
+  },
+  "border-inline-start": {
+    domProp: "borderInlineStart",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-inline-start-color",
+      "border-inline-start-style",
+      "border-inline-start-width",
+    ],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "green",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "5px green none",
+    ],
+    invalid_values: ["5%", "5", "5 green solid"],
+  },
+  "border-inline-start-color": {
+    domProp: "borderInlineStartColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5)", "transparent"],
+    invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"],
+  },
+  "border-inline-start-style": {
+    domProp: "borderInlineStartStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    /* XXX hidden is sometimes the same as initial */
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed",
+      "dotted",
+      "double",
+      "outset",
+      "inset",
+      "groove",
+      "ridge",
+    ],
+    invalid_values: [],
+  },
+  "border-inline-start-width": {
+    domProp: "borderInlineStartWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    prerequisites: { "border-inline-start-style": "solid" },
+    initial_values: ["medium", "3px", "calc(4px - 1px)"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0em)",
+      "calc(0px)",
+      "calc(5em)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 5em)",
+    ],
+    invalid_values: ["5%", "5"],
+  },
+  "-moz-box-align": {
+    domProp: "MozBoxAlign",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["stretch"],
+    other_values: ["start", "center", "baseline", "end"],
+    invalid_values: [],
+  },
+  "-moz-box-direction": {
+    domProp: "MozBoxDirection",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: ["reverse"],
+    invalid_values: [],
+  },
+  "-moz-box-flex": {
+    domProp: "MozBoxFlex",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0", "0.0", "-0.0"],
+    other_values: ["1", "100", "0.1"],
+    invalid_values: ["10px", "-1"],
+  },
+  "-moz-box-ordinal-group": {
+    domProp: "MozBoxOrdinalGroup",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["1"],
+    other_values: ["2", "100", "0"],
+    invalid_values: ["1.0", "-1", "-1000"],
+  },
+  "-moz-box-orient": {
+    domProp: "MozBoxOrient",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["horizontal", "inline-axis"],
+    other_values: ["vertical", "block-axis"],
+    invalid_values: [],
+  },
+  "-moz-box-pack": {
+    domProp: "MozBoxPack",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["start"],
+    other_values: ["center", "end", "justify"],
+    invalid_values: [],
+  },
+  "box-decoration-break": {
+    domProp: "boxDecorationBreak",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["slice"],
+    other_values: ["clone"],
+    invalid_values: ["auto", "none", "1px"],
+  },
+  "box-sizing": {
+    domProp: "boxSizing",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["content-box"],
+    other_values: ["border-box"],
+    invalid_values: [
+      "padding-box",
+      "margin-box",
+      "content",
+      "padding",
+      "border",
+      "margin",
+    ],
+  },
+  "-moz-box-sizing": {
+    domProp: "MozBoxSizing",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "box-sizing",
+    subproperties: ["box-sizing"],
+  },
+  "print-color-adjust": {
+    domProp: "printColorAdjust",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["economy"],
+    other_values: ["exact"],
+    invalid_values: [],
+  },
+  "color-adjust": {
+    domProp: "colorAdjust",
+    inherited: true,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "print-color-adjust",
+    subproperties: ["print-color-adjust"],
+  },
+  columns: {
+    domProp: "columns",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["column-count", "column-width"],
+    initial_values: ["auto", "auto auto"],
+    other_values: [
+      "3",
+      "20px",
+      "2 10px",
+      "10px 2",
+      "2 auto",
+      "auto 2",
+      "auto 50px",
+      "50px auto",
+    ],
+    invalid_values: [
+      "5%",
+      "-1px",
+      "-1",
+      "3 5",
+      "10px 4px",
+      "10 2px 5in",
+      "30px -1",
+      "auto 3 5px",
+      "5 auto 20px",
+      "auto auto auto",
+      "calc(50px + rubbish) 2",
+    ],
+  },
+  "column-count": {
+    domProp: "columnCount",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["1", "17"],
+    // negative and zero invalid per editor's draft
+    invalid_values: ["-1", "0", "3px"],
+  },
+  "column-fill": {
+    domProp: "columnFill",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["balance"],
+    other_values: ["auto"],
+    invalid_values: ["2px", "dotted", "5em"],
+  },
+  "column-rule": {
+    domProp: "columnRule",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    prerequisites: { color: "green" },
+    subproperties: [
+      "column-rule-width",
+      "column-rule-style",
+      "column-rule-color",
+    ],
+    initial_values: [
+      "medium none currentColor",
+      "none",
+      "medium",
+      "currentColor",
+    ],
+    other_values: [
+      "2px blue solid",
+      "red dotted 1px",
+      "ridge 4px orange",
+      "5px solid",
+    ],
+    invalid_values: [
+      "2px 3px 4px red",
+      "dotted dashed",
+      "5px dashed green 3px",
+      "5 solid",
+      "5 green solid",
+    ],
+  },
+  "column-rule-width": {
+    domProp: "columnRuleWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { "column-rule-style": "solid" },
+    initial_values: ["medium", "3px", "calc(3px)", "calc(5em + 3px - 5em)"],
+    other_values: [
+      "thin",
+      "15px",
+      /* valid calc() values */
+      "calc(-2px)",
+      "calc(2px)",
+      "calc(3em)",
+      "calc(3em + 2px)",
+      "calc( 3em + 2px)",
+      "calc(3em + 2px )",
+      "calc( 3em + 2px )",
+      "calc(3*25px)",
+      "calc(3 *25px)",
+      "calc(3 * 25px)",
+      "calc(3* 25px)",
+      "calc(25px*3)",
+      "calc(25px *3)",
+      "calc(25px* 3)",
+      "calc(25px * 3)",
+      "calc(25px * 3 / 4)",
+      "calc((25px * 3) / 4)",
+      "calc(25px * (3 / 4))",
+      "calc(3 * 25px / 4)",
+      "calc((3 * 25px) / 4)",
+      "calc(3 * (25px / 4))",
+      "calc(3em + 25px * 3 / 4)",
+      "calc(3em + (25px * 3) / 4)",
+      "calc(3em + 25px * (3 / 4))",
+      "calc(25px * 3 / 4 + 3em)",
+      "calc((25px * 3) / 4 + 3em)",
+      "calc(25px * (3 / 4) + 3em)",
+      "calc(3em + (25px * 3 / 4))",
+      "calc(3em + ((25px * 3) / 4))",
+      "calc(3em + (25px * (3 / 4)))",
+      "calc((25px * 3 / 4) + 3em)",
+      "calc(((25px * 3) / 4) + 3em)",
+      "calc((25px * (3 / 4)) + 3em)",
+      "calc(3*25px + 1in)",
+      "calc(1in - 3em + 2px)",
+      "calc(1in - (3em + 2px))",
+      "calc((1in - 3em) + 2px)",
+      "calc(50px/2)",
+      "calc(50px/(2 - 1))",
+      "calc(-3px)",
+      /* numeric reduction cases */
+      "calc(5 * 3 * 2em)",
+      "calc(2em * 5 * 3)",
+      "calc((5 * 3) * 2em)",
+      "calc(2em * (5 * 3))",
+      "calc((5 + 3) * 2em)",
+      "calc(2em * (5 + 3))",
+      "calc(2em / (5 + 3))",
+      "calc(2em * (5*2 + 3))",
+      "calc(2em * ((5*2) + 3))",
+      "calc(2em * (5*(2 + 3)))",
+
+      "calc((5 + 7) * 3em)",
+      "calc((5em + 3em) - 2em)",
+      "calc((5em - 3em) + 2em)",
+      "calc(2em - (5em - 3em))",
+      "calc(2em + (5em - 3em))",
+      "calc(2em - (5em + 3em))",
+      "calc(2em + (5em + 3em))",
+      "calc(2em + 5em - 3em)",
+      "calc(2em - 5em - 3em)",
+      "calc(2em + 5em + 3em)",
+      "calc(2em - 5em + 3em)",
+
+      "calc(2em / 4 * 3)",
+      "calc(2em * 4 / 3)",
+      "calc(2em * 4 * 3)",
+      "calc(2em / 4 / 3)",
+      "calc(4 * 2em / 3)",
+      "calc(4 / 3 * 2em)",
+
+      "calc((2em / 4) * 3)",
+      "calc((2em * 4) / 3)",
+      "calc((2em * 4) * 3)",
+      "calc((2em / 4) / 3)",
+      "calc((4 * 2em) / 3)",
+      "calc((4 / 3) * 2em)",
+
+      "calc(2em / (4 * 3))",
+      "calc(2em * (4 / 3))",
+      "calc(2em * (4 * 3))",
+      "calc(2em / (4 / 3))",
+      "calc(4 * (2em / 3))",
+
+      "min(5px)",
+      "min(5px,2em)",
+
+      "max(5px)",
+      "max(5px,2em)",
+
+      "calc(min(5px))",
+      "calc(min(5px,2em))",
+
+      "calc(max(5px))",
+      "calc(max(5px,2em))",
+
+      // Valid cases with unitless zero (which is never
+      // a length).
+      "calc(0 * 2em)",
+      "calc(2em * 0)",
+      "calc(3em + 0 * 2em)",
+      "calc(3em + 2em * 0)",
+      "calc((0 + 2) * 2em)",
+      "calc((2 + 0) * 2em)",
+      // And test zero lengths while we're here.
+      "calc(2 * 0px)",
+      "calc(0 * 0px)",
+      "calc(2 * 0em)",
+      "calc(0 * 0em)",
+      "calc(0px * 0)",
+      "calc(0px * 2)",
+    ],
+    invalid_values: [
+      "20",
+      "-1px",
+      "red",
+      "50%",
+      /* invalid calc() values */
+      "calc(2em+ 2px)",
+      "calc(2em +2px)",
+      "calc(2em+2px)",
+      "calc(2em- 2px)",
+      "calc(2em -2px)",
+      "calc(2em-2px)",
+      "-moz-min()",
+      "calc(min())",
+      "-moz-max()",
+      "calc(max())",
+      "-moz-min(5px)",
+      "-moz-max(5px)",
+      "-moz-min(5px,2em)",
+      "-moz-max(5px,2em)",
+      "calc(5 + 5)",
+      "calc(5 * 5)",
+      "calc(5em * 5em)",
+      "calc(5em / 5em * 5em)",
+
+      "calc(4 * 3 / 2em)",
+      "calc((4 * 3) / 2em)",
+      "calc(4 * (3 / 2em))",
+      "calc(4 / (3 * 2em))",
+
+      // Tests for handling of unitless zero, which cannot
+      // be a length inside calc().
+      "calc(0)",
+      "calc(0 + 2em)",
+      "calc(2em + 0)",
+      "calc(0 * 2)",
+      "calc(2 * 0)",
+      "calc(1 * (2em + 0))",
+      "calc((2em + 0))",
+      "calc((2em + 0) * 1)",
+      "calc(1 * (0 + 2em))",
+      "calc((0 + 2em))",
+      "calc((0 + 2em) * 1)",
+    ],
+  },
+  "column-rule-style": {
+    domProp: "columnRuleStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "hidden",
+      "ridge",
+      "groove",
+      "inset",
+      "outset",
+      "double",
+      "dotted",
+      "dashed",
+    ],
+    invalid_values: ["20", "foo"],
+  },
+  "column-rule-color": {
+    domProp: "columnRuleColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { color: "green" },
+    initial_values: ["currentColor"],
+    other_values: ["red", "blue", "#ffff00"],
+    invalid_values: ["ffff00"],
+  },
+  "column-span": {
+    domProp: "columnSpan",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["all"],
+    invalid_values: ["-1", "0", "auto", "2px"],
+  },
+  "column-width": {
+    domProp: "columnWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "15px",
+      "calc(15px)",
+      "calc(30px - 3em)",
+      "calc(-15px)",
+      "0px",
+      "calc(0px)",
+    ],
+    invalid_values: ["20", "-1px", "50%"],
+  },
+  d: {
+    domProp: "d",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["path('')", "path(' ')"].concat(pathValues.other_values),
+    invalid_values: pathValues.invalid_values,
+  },
+  "-moz-float-edge": {
+    domProp: "MozFloatEdge",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["content-box"],
+    other_values: ["margin-box"],
+    invalid_values: ["content", "padding", "border", "margin"],
+  },
+  "-moz-force-broken-image-icon": {
+    domProp: "MozForceBrokenImageIcon",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0"],
+    other_values: ["1"],
+    invalid_values: [],
+  },
+  "margin-inline": {
+    domProp: "marginInline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["margin-inline-start", "margin-inline-end"],
+    initial_values: ["0", "0px 0em"],
+    other_values: [
+      "1px",
+      "3em 1%",
+      "5%",
+      "calc(2px) 1%",
+      "calc(-2px) 1%",
+      "calc(50%) 1%",
+      "calc(3*25px) calc(2px)",
+      "calc(25px*3) 1em",
+      "calc(3*25px + 50%) calc(3*25px - 50%)",
+    ],
+    invalid_values: [
+      "5",
+      "..25px",
+      ".+5px",
+      ".px",
+      "-.px",
+      "++5px",
+      "-+4px",
+      "+-3px",
+      "--7px",
+      "+-.6px",
+      "-+.5px",
+      "++.7px",
+      "--.4px",
+    ],
+  },
+  "margin-inline-end": {
+    domProp: "marginInlineEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    /* no subproperties */
+    /* auto may or may not be initial */
+    initial_values: [
+      "0",
+      "0px",
+      "0%",
+      "0em",
+      "0ex",
+      "calc(0pt)",
+      "calc(0% + 0px)",
+    ],
+    other_values: [
+      "1px",
+      "3em",
+      "5%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "5",
+      "..25px",
+      ".+5px",
+      ".px",
+      "-.px",
+      "++5px",
+      "-+4px",
+      "+-3px",
+      "--7px",
+      "+-.6px",
+      "-+.5px",
+      "++.7px",
+      "--.4px",
+    ],
+  },
+  "margin-inline-start": {
+    domProp: "marginInlineStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    /* no subproperties */
+    /* auto may or may not be initial */
+    initial_values: [
+      "0",
+      "0px",
+      "0%",
+      "0em",
+      "0ex",
+      "calc(0pt)",
+      "calc(0% + 0px)",
+    ],
+    other_values: [
+      "1px",
+      "3em",
+      "5%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "5",
+      "..25px",
+      ".+5px",
+      ".px",
+      "-.px",
+      "++5px",
+      "-+4px",
+      "+-3px",
+      "--7px",
+      "+-.6px",
+      "-+.5px",
+      "++.7px",
+      "--.4px",
+    ],
+  },
+  mask: {
+    domProp: "mask",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    /* FIXME: All mask-border-* should be added when we implement them. */
+    subproperties: [
+      "mask-clip",
+      "mask-image",
+      "mask-mode",
+      "mask-origin",
+      "mask-position-x",
+      "mask-position-y",
+      "mask-repeat",
+      "mask-size",
+      "mask-composite",
+    ],
+    initial_values: [
+      "match-source",
+      "none",
+      "repeat",
+      "add",
+      "0% 0%",
+      "top left",
+      "0% 0% / auto",
+      "top left / auto",
+      "left top / auto",
+      "0% 0% / auto auto",
+      "top left none",
+      "left top none",
+      "none left top",
+      "none top left",
+      "none 0% 0%",
+      "top left / auto none",
+      "left top / auto none",
+      "top left / auto auto none",
+      "match-source none repeat add top left",
+      "top left repeat none add",
+      "none repeat add top left / auto",
+      "top left / auto repeat none add match-source",
+      "none repeat add 0% 0% / auto auto match-source",
+      "border-box",
+      "border-box border-box",
+    ],
+    other_values: [
+      "none alpha repeat add left top",
+      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
+      "no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==') alpha left top add",
+      "repeat-x",
+      "repeat-y",
+      "no-repeat",
+      "none repeat-y alpha add 0% 0%",
+      "subtract",
+      "0% top subtract alpha repeat none",
+      "top",
+      "left",
+      "50% 50%",
+      "center",
+      "top / 100px",
+      "left / contain",
+      "left / cover",
+      "10px / 10%",
+      "10em / calc(20px)",
+      "top left / 100px 100px",
+      "top left / 100px auto",
+      "top left / 100px 10%",
+      "top left / 100px calc(20px)",
+      "bottom right add none alpha repeat",
+      "50% alpha",
+      "alpha 50%",
+      "50%",
+      "url(#mymask)",
+      "radial-gradient(at 10% bottom, #ffffff, black) add no-repeat",
+      "repeating-radial-gradient(at 10% bottom, #ffffff, black) no-repeat",
+      "-moz-element(#test) alpha",
+      /* multiple mask-image */
+      "url(404.png), url(404.png)",
+      "repeat-x, subtract, none",
+      "0% top url(404.png), url(404.png) 50% top",
+      "subtract repeat-y top left url(404.png), repeat-x alpha",
+      "top left / contain, bottom right / cover",
+      /* test cases with clip+origin in the shorthand */
+      "url(404.png) alpha padding-box",
+      "url(404.png) border-box alpha",
+      "content-box url(404.png)",
+      "url(404.png) alpha padding-box padding-box",
+      "url(404.png) alpha padding-box border-box",
+      "content-box border-box url(404.png)",
+      "alpha padding-box url(404.png) border-box",
+      "alpha padding-box url(404.png) padding-box",
+    ],
+    invalid_values: [
+      /* mixes with keywords have to be in correct order */
+      "50% left",
+      "top 50%",
+      /* no quirks mode colors */
+      "radial-gradient(at 10% bottom, ffffff, black) add no-repeat",
+      /* no quirks mode lengths */
+      "linear-gradient(red -99, yellow, green, blue 120%)",
+      /* bug 258080: don't accept background-position separated */
+      "left url(404.png) top",
+      "top url(404.png) left",
+      "-moz-element(#a rubbish)",
+      "left top / match-source",
+    ],
+  },
+  "mask-clip": {
+    domProp: "maskClip",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["border-box"],
+    other_values: [
+      "content-box",
+      "fill-box",
+      "stroke-box",
+      "view-box",
+      "no-clip",
+      "padding-box",
+      "border-box, padding-box",
+      "padding-box, padding-box, padding-box",
+      "border-box, border-box",
+    ],
+    invalid_values: ["content-box content-box", "margin-box"],
+  },
+  "mask-composite": {
+    domProp: "maskComposite",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["add"],
+    other_values: [
+      "subtract",
+      "intersect",
+      "exclude",
+      "add, add",
+      "subtract, intersect",
+      "subtract, subtract, add",
+    ],
+    invalid_values: ["add subtract", "intersect exclude"],
+  },
+  "mask-image": {
+    domProp: "maskImage",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
+      "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')",
+      'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
+      "none, none",
+      "none, none, none, none, none",
+      "url(#mymask)",
+      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none",
+      "none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none",
+      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
+    ].concat(validNonUrlImageValues),
+    invalid_values: [].concat(invalidNonUrlImageValues),
+    unbalanced_values: [].concat(unbalancedGradientAndElementValues),
+  },
+  "mask-mode": {
+    domProp: "maskMode",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["match-source"],
+    other_values: [
+      "alpha",
+      "luminance",
+      "match-source, match-source",
+      "match-source, alpha",
+      "alpha, luminance, match-source",
+    ],
+    invalid_values: ["match-source match-source", "alpha match-source"],
+  },
+  "mask-origin": {
+    domProp: "maskOrigin",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["border-box"],
+    other_values: [
+      "padding-box",
+      "content-box",
+      "fill-box",
+      "stroke-box",
+      "view-box",
+      "border-box, padding-box",
+      "padding-box, padding-box, padding-box",
+      "border-box, border-box",
+    ],
+    invalid_values: ["padding-box padding-box", "no-clip", "margin-box"],
+  },
+  "mask-position": {
+    domProp: "maskPosition",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    initial_values: [
+      "top 0% left 0%",
+      "top left",
+      "left top",
+      "0% 0%",
+      "0% top",
+      "left 0%",
+    ],
+    other_values: [
+      "top",
+      "left",
+      "right",
+      "bottom",
+      "center",
+      "center bottom",
+      "bottom center",
+      "center right",
+      "right center",
+      "center top",
+      "top center",
+      "center left",
+      "left center",
+      "right bottom",
+      "bottom right",
+      "50%",
+      "top left, top left",
+      "top left, top right",
+      "top right, top left",
+      "left top, 0% 0%",
+      "10% 20%, 30%, 40%",
+      "top left, bottom right",
+      "right bottom, left top",
+      "0%",
+      "0px",
+      "30px",
+      "0%, 10%, 20%, 30%",
+      "top, top, top, top, top",
+      "calc(20px)",
+      "calc(20px) 10px",
+      "10px calc(20px)",
+      "calc(20px) 25%",
+      "25% calc(20px)",
+      "calc(20px) calc(20px)",
+      "calc(20px + 1em) calc(20px / 2)",
+      "calc(20px + 50%) calc(50% - 10px)",
+      "calc(-20px) calc(-50%)",
+      "calc(-20%) calc(-50%)",
+      "0px 0px",
+      "right 20px top 60px",
+      "right 20px bottom 60px",
+      "left 20px top 60px",
+      "left 20px bottom 60px",
+      "right -50px top -50px",
+      "left -50px bottom -50px",
+      "right 20px top -50px",
+      "right -20px top 50px",
+      "right 3em bottom 10px",
+      "bottom 3em right 10px",
+      "top 3em right 10px",
+      "left 15px",
+      "10px top",
+      "left 20%",
+      "right 20%",
+    ],
+    subproperties: ["mask-position-x", "mask-position-y"],
+    invalid_values: [
+      "center 10px center 4px",
+      "center 10px center",
+      "top 20%",
+      "bottom 20%",
+      "50% left",
+      "top 50%",
+      "50% bottom 10%",
+      "right 10% 50%",
+      "left right",
+      "top bottom",
+      "left 10% right",
+      "top 20px bottom 20px",
+      "left left",
+      "0px calc(0px + rubbish)",
+      "left top 15px",
+      "left 10px top",
+    ],
+  },
+  "mask-position-x": {
+    domProp: "maskPositionX",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["left", "0%"],
+    other_values: [
+      "right",
+      "center",
+      "50%",
+      "center, center",
+      "center, right",
+      "right, center",
+      "center, 50%",
+      "10%, 20%, 40%",
+      "1px",
+      "30px",
+      "50%, 10%, 20%, 30%",
+      "center, center, center, center, center",
+      "calc(20px)",
+      "calc(20px + 1em)",
+      "calc(20px / 2)",
+      "calc(20px + 50%)",
+      "calc(50% - 10px)",
+      "calc(-20px)",
+      "calc(-50%)",
+      "calc(-20%)",
+      "right 20px",
+      "left 20px",
+      "right -50px",
+      "left -50px",
+      "right 20px",
+      "right 3em",
+    ],
+    invalid_values: [
+      "center 10px",
+      "right 10% 50%",
+      "left right",
+      "left left",
+      "bottom 20px",
+      "top 10%",
+      "bottom 3em",
+      "top",
+      "bottom",
+      "top, top",
+      "top, bottom",
+      "bottom, top",
+      "top, 0%",
+      "top, top, top, top, top",
+      "calc(0px + rubbish)",
+      "center 0%",
+    ],
+  },
+  "mask-position-y": {
+    domProp: "maskPositionY",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["top", "0%"],
+    other_values: [
+      "bottom",
+      "center",
+      "50%",
+      "center, center",
+      "center, bottom",
+      "bottom, center",
+      "center, 0%",
+      "10%, 20%, 40%",
+      "1px",
+      "30px",
+      "50%, 10%, 20%, 30%",
+      "center, center, center, center, center",
+      "calc(20px)",
+      "calc(20px + 1em)",
+      "calc(20px / 2)",
+      "calc(20px + 50%)",
+      "calc(50% - 10px)",
+      "calc(-20px)",
+      "calc(-50%)",
+      "calc(-20%)",
+      "bottom 20px",
+      "top 20px",
+      "bottom -50px",
+      "top -50px",
+      "bottom 20px",
+      "bottom 3em",
+    ],
+    invalid_values: [
+      "center 10px",
+      "bottom 10% 50%",
+      "top bottom",
+      "top top",
+      "right 20px",
+      "left 10%",
+      "right 3em",
+      "left",
+      "right",
+      "left, left",
+      "left, right",
+      "right, left",
+      "left, 0%",
+      "left, left, left, left, left",
+      "calc(0px + rubbish)",
+      "center 0%",
+    ],
+  },
+  "mask-repeat": {
+    domProp: "maskRepeat",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["repeat", "repeat repeat"],
+    other_values: [
+      "repeat-x",
+      "repeat-y",
+      "no-repeat",
+      "repeat-x, repeat-x",
+      "repeat, no-repeat",
+      "repeat-y, no-repeat, repeat-y",
+      "repeat, repeat, repeat",
+      "repeat no-repeat",
+      "no-repeat repeat",
+      "no-repeat no-repeat",
+      "repeat no-repeat",
+      "no-repeat no-repeat, no-repeat no-repeat",
+    ],
+    invalid_values: [
+      "repeat repeat repeat",
+      "repeat-x repeat-y",
+      "repeat repeat-x",
+      "repeat repeat-y",
+      "repeat-x repeat",
+      "repeat-y repeat",
+    ],
+  },
+  "mask-size": {
+    domProp: "maskSize",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto", "auto auto"],
+    other_values: [
+      "contain",
+      "cover",
+      "100px auto",
+      "auto 100px",
+      "100% auto",
+      "auto 100%",
+      "25% 50px",
+      "3em 40%",
+      "calc(20px)",
+      "calc(20px) 10px",
+      "10px calc(20px)",
+      "calc(20px) 25%",
+      "25% calc(20px)",
+      "calc(20px) calc(20px)",
+      "calc(20px + 1em) calc(20px / 2)",
+      "calc(20px + 50%) calc(50% - 10px)",
+      "calc(-20px) calc(-50%)",
+      "calc(-20%) calc(-50%)",
+    ],
+    invalid_values: [
+      "contain contain",
+      "cover cover",
+      "cover auto",
+      "auto cover",
+      "contain cover",
+      "cover contain",
+      "-5px 3px",
+      "3px -5px",
+      "auto -5px",
+      "-5px auto",
+      "5 3",
+      "10px calc(10px + rubbish)",
+    ],
+  },
+  "mask-type": {
+    domProp: "maskType",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["luminance"],
+    other_values: ["alpha"],
+    invalid_values: [],
+  },
+  "padding-inline-end": {
+    domProp: "paddingInlineEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    logical: true,
+    /* no subproperties */
+    initial_values: [
+      "0",
+      "0px",
+      "0%",
+      "0em",
+      "0ex",
+      "calc(0pt)",
+      "calc(0% + 0px)",
+      "calc(-3px)",
+      "calc(-1%)",
+    ],
+    other_values: [
+      "1px",
+      "3em",
+      "5%",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: ["5"],
+  },
+  "padding-inline-start": {
+    domProp: "paddingInlineStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    logical: true,
+    /* no subproperties */
+    initial_values: [
+      "0",
+      "0px",
+      "0%",
+      "0em",
+      "0ex",
+      "calc(0pt)",
+      "calc(0% + 0px)",
+      "calc(-3px)",
+      "calc(-1%)",
+    ],
+    other_values: [
+      "1px",
+      "3em",
+      "5%",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: ["5"],
+  },
+  resize: {
+    domProp: "resize",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    prerequisites: { display: "block", overflow: "auto" },
+    initial_values: ["none"],
+    other_values: ["both", "horizontal", "vertical", "inline", "block"],
+    invalid_values: [],
+  },
+  "tab-size": {
+    domProp: "tabSize",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["8"],
+    other_values: [
+      "0",
+      "2.5",
+      "3",
+      "99",
+      "12000",
+      "0px",
+      "1em",
+      "calc(1px + 1em)",
+      "calc(1px - 2px)",
+      "calc(1 + 1)",
+      "calc(-2.5)",
+    ],
+    invalid_values: [
+      "9%",
+      "calc(9% + 1px)",
+      "calc(1 + 1em)",
+      "-1",
+      "-808",
+      "auto",
+    ],
+  },
+  "-moz-text-size-adjust": {
+    domProp: "MozTextSizeAdjust",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["none"],
+    invalid_values: ["-5%", "0", "100", "0%", "50%", "100%", "220.3%"],
+  },
+  transform: {
+    domProp: "transform",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { width: "300px", height: "50px" },
+    initial_values: ["none"],
+    other_values: [
+      "translatex(1px)",
+      "translatex(4em)",
+      "translatex(-4px)",
+      "translatex(3px)",
+      "translatex(0px) translatex(1px) translatex(2px) translatex(3px) translatex(4px)",
+      "translatey(4em)",
+      "translate(3px)",
+      "translate(10px, -3px)",
+      "rotate(45deg)",
+      "rotate(45grad)",
+      "rotate(45rad)",
+      "rotate(0.25turn)",
+      "rotate(0)",
+      "scalex(10)",
+      "scalex(10%)",
+      "scalex(-10)",
+      "scalex(-10%)",
+      "scaley(10)",
+      "scaley(10%)",
+      "scaley(-10)",
+      "scaley(-10%)",
+      "scale(10)",
+      "scale(10%)",
+      "scale(10, 20)",
+      "scale(10%, 20%)",
+      "scale(-10)",
+      "scale(-10%)",
+      "scale(-10, 20)",
+      "scale(10%, -20%)",
+      "scale(10, 20%)",
+      "scale(-10, 20%)",
+      "skewx(30deg)",
+      "skewx(0)",
+      "skewy(0)",
+      "skewx(30grad)",
+      "skewx(30rad)",
+      "skewx(0.08turn)",
+      "skewy(30deg)",
+      "skewy(30grad)",
+      "skewy(30rad)",
+      "skewy(0.08turn)",
+      "rotate(45deg) scale(2, 1)",
+      "skewx(45deg) skewx(-50grad)",
+      "translate(0, 0) scale(1, 1) skewx(0) skewy(0) matrix(1, 0, 0, 1, 0, 0)",
+      "translatex(50%)",
+      "translatey(50%)",
+      "translate(50%)",
+      "translate(3%, 5px)",
+      "translate(5px, 3%)",
+      "matrix(1, 2, 3, 4, 5, 6)",
+      /* valid calc() values */
+      "translatex(calc(5px + 10%))",
+      "translatey(calc(0.25 * 5px + 10% / 3))",
+      "translate(calc(5px - 10% * 3))",
+      "translate(calc(5px - 3 * 10%), 50px)",
+      "translate(-50px, calc(5px - 10% * 3))",
+      "translate(10px, calc(min(5px,10%)))",
+      "translate(calc(max(5px,10%)), 10%)",
+      "translate(max(5px,10%), 10%)",
+      "translatez(1px)",
+      "translatez(4em)",
+      "translatez(-4px)",
+      "translatez(0px)",
+      "translatez(2px) translatez(5px)",
+      "translate3d(3px, 4px, 5px)",
+      "translate3d(2em, 3px, 1em)",
+      "translatex(2px) translate3d(4px, 5px, 6px) translatey(1px)",
+      "scale3d(4, 4, 4)",
+      "scale3d(4%, 4%, 4%)",
+      "scale3d(-2, 3, -7)",
+      "scale3d(-2%, 3%, -7%)",
+      "scalez(4)",
+      "scalez(4%)",
+      "scalez(-6)",
+      "scalez(-6%)",
+      "rotate3d(2, 3, 4, 45deg)",
+      "rotate3d(-3, 7, 0, 12rad)",
+      "rotatex(15deg)",
+      "rotatey(-12grad)",
+      "rotatez(72rad)",
+      "rotatex(0.125turn)",
+      "rotate3d(0, 0, 0, 0rad)",
+      "perspective(0px)",
+      "perspective(1000px)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)",
+    ],
+    invalid_values: [
+      "1px",
+      "#0000ff",
+      "red",
+      "auto",
+      "translatex(1)",
+      "translatey(1)",
+      "translate(2)",
+      "translate(-3, -4)",
+      "translatex(1px 1px)",
+      "translatex(translatex(1px))",
+      "translatex(#0000ff)",
+      "translatex(red)",
+      "translatey()",
+      "matrix(1px, 2px, 3px, 4px, 5px, 6px)",
+      "skewx(red)",
+      "matrix(1%, 0, 0, 0, 0px, 0px)",
+      "matrix(0, 1%, 2, 3, 4px,5px)",
+      "matrix(0, 1, 2%, 3, 4px, 5px)",
+      "matrix(0, 1, 2, 3%, 4%, 5%)",
+      "matrix(1, 2, 3, 4, 5px, 6%)",
+      "matrix(1, 2, 3, 4, 5%, 6px)",
+      "matrix(1, 2, 3, 4, 5%, 6%)",
+      "matrix(1, 2, 3, 4, 5px, 6em)",
+      /* invalid calc() values */
+      "translatey(-moz-min(5px,10%))",
+      "translatex(-moz-max(5px,10%))",
+      "matrix(1, 0, 0, 1, max(5px * 3), calc(10% - 3px))",
+      "perspective(-10px)",
+      "matrix3d(dinosaur)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15%, 16)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16px)",
+      "rotatey(words)",
+      "rotatex(7)",
+      "translate3d(3px, 4px, 1px, 7px)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13px, 14em, 15px, 16)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 20%, 10%, 15, 16)",
+    ],
+  },
+  "transform-box": {
+    domProp: "transformBox",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["border-box"],
+    other_values: ["fill-box", "view-box"],
+    invalid_values: ["content-box", "padding-box", "stroke-box", "margin-box"],
+  },
+  "transform-origin": {
+    domProp: "transformOrigin",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    /* no subproperties */
+    prerequisites: { width: "10px", height: "10px", display: "block" },
+    initial_values: ["50% 50%", "center", "center center"],
+    other_values: [
+      "25% 25%",
+      "6px 5px",
+      "20% 3em",
+      "0 0",
+      "0in 1in",
+      "top",
+      "bottom",
+      "top left",
+      "top right",
+      "top center",
+      "center left",
+      "center right",
+      "bottom left",
+      "bottom right",
+      "bottom center",
+      "20% center",
+      "6px center",
+      "13in bottom",
+      "left 50px",
+      "right 13%",
+      "center 40px",
+      "calc(20px)",
+      "calc(20px) 10px",
+      "10px calc(20px)",
+      "calc(20px) 25%",
+      "25% calc(20px)",
+      "calc(20px) calc(20px)",
+      "calc(20px + 1em) calc(20px / 2)",
+      "calc(20px + 50%) calc(50% - 10px)",
+      "calc(-20px) calc(-50%)",
+      "calc(-20%) calc(-50%)",
+      "6px 5px 5px",
+      "top center 10px",
+    ],
+    invalid_values: [
+      "red",
+      "auto",
+      "none",
+      "0.5 0.5",
+      "40px #0000ff",
+      "border",
+      "center red",
+      "right diagonal",
+      "#00ffff bottom",
+      "0px calc(0px + rubbish)",
+      "0px 0px calc(0px + rubbish)",
+    ],
+  },
+  "perspective-origin": {
+    domProp: "perspectiveOrigin",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    /* no subproperties */
+    prerequisites: { width: "10px", height: "10px", display: "block" },
+    initial_values: ["50% 50%", "center", "center center"],
+    other_values: [
+      "25% 25%",
+      "6px 5px",
+      "20% 3em",
+      "0 0",
+      "0in 1in",
+      "top",
+      "bottom",
+      "top left",
+      "top right",
+      "top center",
+      "center left",
+      "center right",
+      "bottom left",
+      "bottom right",
+      "bottom center",
+      "20% center",
+      "6px center",
+      "13in bottom",
+      "left 50px",
+      "right 13%",
+      "center 40px",
+      "calc(20px)",
+      "calc(20px) 10px",
+      "10px calc(20px)",
+      "calc(20px) 25%",
+      "25% calc(20px)",
+      "calc(20px) calc(20px)",
+      "calc(20px + 1em) calc(20px / 2)",
+      "calc(20px + 50%) calc(50% - 10px)",
+      "calc(-20px) calc(-50%)",
+      "calc(-20%) calc(-50%)",
+    ],
+    invalid_values: [
+      "red",
+      "auto",
+      "none",
+      "0.5 0.5",
+      "40px #0000ff",
+      "border",
+      "center red",
+      "right diagonal",
+      "#00ffff bottom",
+    ],
+  },
+  perspective: {
+    domProp: "perspective",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["1000px", "500.2px", "0", "0px"],
+    invalid_values: ["pants", "200", "-100px", "-27.2em"],
+  },
+  "backface-visibility": {
+    domProp: "backfaceVisibility",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["visible"],
+    other_values: ["hidden"],
+    invalid_values: ["collapse"],
+  },
+  "transform-style": {
+    domProp: "transformStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["flat"],
+    other_values: ["preserve-3d"],
+    invalid_values: [],
+  },
+  "-moz-user-focus": {
+    domProp: "MozUserFocus",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "normal",
+      "ignore",
+      "select-all",
+      "select-before",
+      "select-after",
+      "select-same",
+      "select-menu",
+    ],
+    invalid_values: [],
+  },
+  "-moz-user-input": {
+    domProp: "MozUserInput",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["none"],
+    invalid_values: [],
+  },
+  "-moz-user-modify": {
+    domProp: "MozUserModify",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["read-only"],
+    other_values: ["read-write", "write-only"],
+    invalid_values: [],
+  },
+  "-moz-user-select": {
+    domProp: "MozUserSelect",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "user-select",
+    subproperties: ["user-select"],
+  },
+  "user-select": {
+    domProp: "userSelect",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["none", "text", "all", "-moz-none"],
+    invalid_values: [],
+  },
+  background: {
+    domProp: "background",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "background-attachment",
+      "background-color",
+      "background-image",
+      "background-position-x",
+      "background-position-y",
+      "background-repeat",
+      "background-clip",
+      "background-origin",
+      "background-size",
+    ],
+    initial_values: [
+      "transparent",
+      "none",
+      "repeat",
+      "scroll",
+      "0% 0%",
+      "top left",
+      "left top",
+      "0% 0% / auto",
+      "top left / auto",
+      "left top / auto",
+      "0% 0% / auto auto",
+      "transparent none",
+      "top left none",
+      "left top none",
+      "none left top",
+      "none top left",
+      "none 0% 0%",
+      "left top / auto none",
+      "left top / auto auto none",
+      "transparent none repeat scroll top left",
+      "left top repeat none scroll transparent",
+      "transparent none repeat scroll top left / auto",
+      "left top / auto repeat none scroll transparent",
+      "none repeat scroll 0% 0% / auto auto transparent",
+      "padding-box border-box",
+    ],
+    other_values: [
+      /* without multiple backgrounds */
+      "green",
+      "none green repeat scroll left top",
+      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
+      "repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==') transparent left top scroll",
+      "repeat-x",
+      "repeat-y",
+      "no-repeat",
+      "none repeat-y transparent scroll 0% 0%",
+      "fixed",
+      "0% top transparent fixed repeat none",
+      "top",
+      "left",
+      "50% 50%",
+      "center",
+      "top / 100px",
+      "left / contain",
+      "left / cover",
+      "10px / 10%",
+      "10em / calc(20px)",
+      "top left / 100px 100px",
+      "top left / 100px auto",
+      "top left / 100px 10%",
+      "top left / 100px calc(20px)",
+      "bottom right 8px scroll none transparent repeat",
+      "50% transparent",
+      "transparent 50%",
+      "50%",
+      "radial-gradient(at 10% bottom, #ffffff, black) scroll no-repeat",
+      "repeating-radial-gradient(at 10% bottom, #ffffff, black) scroll no-repeat",
+      "-moz-element(#test) lime",
+      /* multiple backgrounds */
+      "url(404.png), url(404.png)",
+      "url(404.png), url(404.png) transparent",
+      "url(404.png), url(404.png) red",
+      "repeat-x, fixed, none",
+      "0% top url(404.png), url(404.png) 0% top",
+      "fixed repeat-y top left url(404.png), repeat-x green",
+      "top left / contain, bottom right / cover",
+      /* test cases with clip+origin in the shorthand */
+      "url(404.png) green padding-box",
+      "url(404.png) border-box transparent",
+      "content-box url(404.png) blue",
+      "url(404.png) green padding-box padding-box",
+      "url(404.png) green padding-box border-box",
+      "content-box border-box url(404.png) blue",
+      "url(404.png) green padding-box text",
+      "content-box text url(404.png) blue",
+      /* clip and origin separated in the shorthand */
+      "url(404.png) padding-box green border-box",
+      "url(404.png) padding-box green padding-box",
+      "transparent padding-box url(404.png) border-box",
+      "transparent padding-box url(404.png) padding-box",
+      /* text */
+      "text",
+      "text border-box",
+    ],
+    invalid_values: [
+      /* mixes with keywords have to be in correct order */
+      "50% left",
+      "top 50%",
+      /* no quirks mode colors */
+      "radial-gradient(at 10% bottom, ffffff, black) scroll no-repeat",
+      /* no quirks mode lengths */
+      "linear-gradient(red -99, yellow, green, blue 120%)",
+      /* bug 258080: don't accept background-position separated */
+      "left url(404.png) top",
+      "top url(404.png) left",
+      /* not allowed to have color in non-bottom layer */
+      "url(404.png) transparent, url(404.png)",
+      "url(404.png) red, url(404.png)",
+      "url(404.png) transparent, url(404.png) transparent",
+      "url(404.png) transparent red, url(404.png) transparent red",
+      "url(404.png) red, url(404.png) red",
+      "url(404.png) rgba(0, 0, 0, 0), url(404.png)",
+      "url(404.png) rgb(255, 0, 0), url(404.png)",
+      "url(404.png) rgba(0, 0, 0, 0), url(404.png) rgba(0, 0, 0, 0)",
+      "url(404.png) rgba(0, 0, 0, 0) rgb(255, 0, 0), url(404.png) rgba(0, 0, 0, 0) rgb(255, 0, 0)",
+      "url(404.png) rgb(255, 0, 0), url(404.png) rgb(255, 0, 0)",
+      /* error inside functions */
+      "-moz-image-rect(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), rubbish, 50%, 30%, 0) transparent",
+      "-moz-element(#a rubbish) black",
+      "content-box text text",
+      "padding-box text url(404.png) text",
+    ],
+  },
+  "background-attachment": {
+    domProp: "backgroundAttachment",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["scroll"],
+    other_values: [
+      "fixed",
+      "local",
+      "scroll,scroll",
+      "fixed, scroll",
+      "scroll, fixed, local, scroll",
+      "fixed, fixed",
+    ],
+    invalid_values: [],
+  },
+  "background-blend-mode": {
+    domProp: "backgroundBlendMode",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: [
+      "multiply",
+      "screen",
+      "overlay",
+      "darken",
+      "lighten",
+      "color-dodge",
+      "color-burn",
+      "hard-light",
+      "soft-light",
+      "difference",
+      "exclusion",
+      "hue",
+      "saturation",
+      "color",
+      "luminosity",
+    ],
+    invalid_values: ["none", "10px", "multiply multiply", "plus-lighter"],
+  },
+  "background-clip": {
+    /*
+     * When we rename this to 'background-clip', we also
+     * need to rename the values to match the spec.
+     */
+    domProp: "backgroundClip",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["border-box"],
+    other_values: [
+      "content-box",
+      "padding-box",
+      "border-box, padding-box",
+      "padding-box, padding-box, padding-box",
+      "border-box, border-box",
+      "text",
+      "content-box, text",
+      "text, border-box",
+      "text, text",
+    ],
+    invalid_values: [
+      "margin-box",
+      "border-box border-box",
+      "fill-box",
+      "stroke-box",
+      "view-box",
+      "no-clip",
+    ],
+  },
+  "background-color": {
+    domProp: "backgroundColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["transparent", "rgba(0, 0, 0, 0)"],
+    other_values: [
+      "green",
+      "rgb(255, 0, 128)",
+      "#fc2",
+      "#96ed2a",
+      "black",
+      "rgba(255,255,0,3)",
+      "hsl(240, 50%, 50%)",
+      "rgb(50%, 50%, 50%)",
+      "-moz-default-background-color",
+      "rgb(100, 100.0, 100)",
+      "rgba(255, 127, 15, 0)",
+      "hsla(240, 97%, 50%, 0.0)",
+      "rgba(255,255,255,-3.7)",
+    ],
+    invalid_values: [
+      "#0",
+      "#00",
+      "#00000",
+      "#0000000",
+      "#000000000",
+      "rgb(100, 100%, 100)",
+    ],
+    quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" },
+  },
+  "background-image": {
+    domProp: "backgroundImage",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["none"],
+    other_values: [
+      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
+      "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')",
+      'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
+      "none, none",
+      "none, none, none, none, none",
+      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none",
+      "none, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), none",
+      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
+    ].concat(validNonUrlImageValues),
+    invalid_values: [].concat(invalidNonUrlImageValues),
+    unbalanced_values: [].concat(unbalancedGradientAndElementValues),
+  },
+  "background-origin": {
+    domProp: "backgroundOrigin",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["padding-box"],
+    other_values: [
+      "border-box",
+      "content-box",
+      "border-box, padding-box",
+      "padding-box, padding-box, padding-box",
+      "border-box, border-box",
+    ],
+    invalid_values: [
+      "margin-box",
+      "padding-box padding-box",
+      "fill-box",
+      "stroke-box",
+      "view-box",
+      "no-clip",
+    ],
+  },
+  "background-position": {
+    domProp: "backgroundPosition",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: [
+      "top 0% left 0%",
+      "top 0% left",
+      "top left",
+      "left top",
+      "0% 0%",
+      "0% top",
+      "left 0%",
+    ],
+    other_values: [
+      "top",
+      "left",
+      "right",
+      "bottom",
+      "center",
+      "center bottom",
+      "bottom center",
+      "center right",
+      "right center",
+      "center top",
+      "top center",
+      "center left",
+      "left center",
+      "right bottom",
+      "bottom right",
+      "50%",
+      "top left, top left",
+      "top left, top right",
+      "top right, top left",
+      "left top, 0% 0%",
+      "10% 20%, 30%, 40%",
+      "top left, bottom right",
+      "right bottom, left top",
+      "0%",
+      "0px",
+      "30px",
+      "0%, 10%, 20%, 30%",
+      "top, top, top, top, top",
+      "calc(20px)",
+      "calc(20px) 10px",
+      "10px calc(20px)",
+      "calc(20px) 25%",
+      "25% calc(20px)",
+      "calc(20px) calc(20px)",
+      "calc(20px + 1em) calc(20px / 2)",
+      "calc(20px + 50%) calc(50% - 10px)",
+      "calc(-20px) calc(-50%)",
+      "calc(-20%) calc(-50%)",
+      "0px 0px",
+      "right 20px top 60px",
+      "right 20px bottom 60px",
+      "left 20px top 60px",
+      "left 20px bottom 60px",
+      "right -50px top -50px",
+      "left -50px bottom -50px",
+      "right 20px top -50px",
+      "right -20px top 50px",
+      "right 3em bottom 10px",
+      "bottom 3em right 10px",
+      "top 3em right 10px",
+      "left 15px",
+      "10px top",
+      "left top 15px",
+      "left 10px top",
+      "left 20%",
+      "right 20%",
+    ],
+    subproperties: ["background-position-x", "background-position-y"],
+    invalid_values: [
+      "center 10px center 4px",
+      "center 10px center",
+      "top 20%",
+      "bottom 20%",
+      "50% left",
+      "top 50%",
+      "50% bottom 10%",
+      "right 10% 50%",
+      "left right",
+      "top bottom",
+      "left 10% right",
+      "top 20px bottom 20px",
+      "left left",
+      "0px calc(0px + rubbish)",
+    ],
+    quirks_values: {
+      "20 20": "20px 20px",
+      "10 5px": "10px 5px",
+      "7px 2": "7px 2px",
+    },
+  },
+  "background-position-x": {
+    domProp: "backgroundPositionX",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["left 0%", "left", "0%"],
+    other_values: [
+      "right",
+      "center",
+      "50%",
+      "left, left",
+      "left, right",
+      "right, left",
+      "left, 0%",
+      "10%, 20%, 40%",
+      "0px",
+      "30px",
+      "0%, 10%, 20%, 30%",
+      "left, left, left, left, left",
+      "calc(20px)",
+      "calc(20px + 1em)",
+      "calc(20px / 2)",
+      "calc(20px + 50%)",
+      "calc(50% - 10px)",
+      "calc(-20px)",
+      "calc(-50%)",
+      "calc(-20%)",
+      "right 20px",
+      "left 20px",
+      "right -50px",
+      "left -50px",
+      "right 20px",
+      "right 3em",
+    ],
+    invalid_values: [
+      "center 10px",
+      "right 10% 50%",
+      "left right",
+      "left left",
+      "bottom 20px",
+      "top 10%",
+      "bottom 3em",
+      "top",
+      "bottom",
+      "top, top",
+      "top, bottom",
+      "bottom, top",
+      "top, 0%",
+      "top, top, top, top, top",
+      "calc(0px + rubbish)",
+    ],
+  },
+  "background-position-y": {
+    domProp: "backgroundPositionY",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["top 0%", "top", "0%"],
+    other_values: [
+      "bottom",
+      "center",
+      "50%",
+      "top, top",
+      "top, bottom",
+      "bottom, top",
+      "top, 0%",
+      "10%, 20%, 40%",
+      "0px",
+      "30px",
+      "0%, 10%, 20%, 30%",
+      "top, top, top, top, top",
+      "calc(20px)",
+      "calc(20px + 1em)",
+      "calc(20px / 2)",
+      "calc(20px + 50%)",
+      "calc(50% - 10px)",
+      "calc(-20px)",
+      "calc(-50%)",
+      "calc(-20%)",
+      "bottom 20px",
+      "top 20px",
+      "bottom -50px",
+      "top -50px",
+      "bottom 20px",
+      "bottom 3em",
+    ],
+    invalid_values: [
+      "center 10px",
+      "bottom 10% 50%",
+      "top bottom",
+      "top top",
+      "right 20px",
+      "left 10%",
+      "right 3em",
+      "left",
+      "right",
+      "left, left",
+      "left, right",
+      "right, left",
+      "left, 0%",
+      "left, left, left, left, left",
+      "calc(0px + rubbish)",
+    ],
+  },
+  "background-repeat": {
+    domProp: "backgroundRepeat",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["repeat", "repeat repeat"],
+    other_values: [
+      "repeat-x",
+      "repeat-y",
+      "no-repeat",
+      "repeat-x, repeat-x",
+      "repeat, no-repeat",
+      "repeat-y, no-repeat, repeat-y",
+      "repeat, repeat, repeat",
+      "repeat no-repeat",
+      "no-repeat repeat",
+      "no-repeat no-repeat",
+      "repeat repeat, repeat repeat",
+      "round, repeat",
+      "round repeat, repeat-x",
+      "round no-repeat, repeat-y",
+      "round round",
+      "space, repeat",
+      "space repeat, repeat-x",
+      "space no-repeat, repeat-y",
+      "space space",
+      "space round",
+    ],
+    invalid_values: [
+      "repeat repeat repeat",
+      "repeat-x repeat-y",
+      "repeat repeat-x",
+      "repeat repeat-y",
+      "repeat-x repeat",
+      "repeat-y repeat",
+      "round round round",
+      "repeat-x round",
+      "round repeat-x",
+      "repeat-y round",
+      "round repeat-y",
+      "space space space",
+      "repeat-x space",
+      "space repeat-x",
+      "repeat-y space",
+      "space repeat-y",
+    ],
+  },
+  "background-size": {
+    domProp: "backgroundSize",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["auto", "auto auto"],
+    other_values: [
+      "contain",
+      "cover",
+      "100px auto",
+      "auto 100px",
+      "100% auto",
+      "auto 100%",
+      "25% 50px",
+      "3em 40%",
+      "calc(20px)",
+      "calc(20px) 10px",
+      "10px calc(20px)",
+      "calc(20px) 25%",
+      "25% calc(20px)",
+      "calc(20px) calc(20px)",
+      "calc(20px + 1em) calc(20px / 2)",
+      "calc(20px + 50%) calc(50% - 10px)",
+      "calc(-20px) calc(-50%)",
+      "calc(-20%) calc(-50%)",
+    ],
+    invalid_values: [
+      "contain contain",
+      "cover cover",
+      "cover auto",
+      "auto cover",
+      "contain cover",
+      "cover contain",
+      "-5px 3px",
+      "3px -5px",
+      "auto -5px",
+      "-5px auto",
+      "5 3",
+      "10px calc(10px + rubbish)",
+    ],
+  },
+  border: {
+    domProp: "border",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-bottom-color",
+      "border-bottom-style",
+      "border-bottom-width",
+      "border-left-color",
+      "border-left-style",
+      "border-left-width",
+      "border-right-color",
+      "border-right-style",
+      "border-right-width",
+      "border-top-color",
+      "border-top-style",
+      "border-top-width",
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat",
+    ],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+      "calc(4px - 1px) none",
+    ],
+    other_values: [
+      "solid",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "calc(2px) solid blue",
+    ],
+    invalid_values: ["5%", "medium solid ff00ff", "5 solid green"],
+  },
+  "border-bottom": {
+    domProp: "borderBottom",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-bottom-color",
+      "border-bottom-style",
+      "border-bottom-width",
+    ],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "green",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "5px green none",
+    ],
+    invalid_values: ["5%", "5", "5 solid green"],
+  },
+  "border-bottom-color": {
+    domProp: "borderBottomColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { color: "black" },
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5)", "transparent"],
+    invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000"],
+    quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" },
+  },
+  "border-bottom-style": {
+    domProp: "borderBottomStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    /* XXX hidden is sometimes the same as initial */
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed",
+      "dotted",
+      "double",
+      "outset",
+      "inset",
+      "groove",
+      "ridge",
+    ],
+    invalid_values: [],
+  },
+  "border-bottom-width": {
+    domProp: "borderBottomWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { "border-bottom-style": "solid" },
+    initial_values: ["medium", "3px", "calc(4px - 1px)"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0em)",
+      "calc(0px)",
+      "calc(5em)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 5em)",
+    ],
+    invalid_values: ["5%"],
+    quirks_values: { 5: "5px" },
+  },
+  "border-collapse": {
+    domProp: "borderCollapse",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["separate"],
+    other_values: ["collapse"],
+    invalid_values: [],
+  },
+  "border-color": {
+    domProp: "borderColor",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-top-color",
+      "border-right-color",
+      "border-bottom-color",
+      "border-left-color",
+    ],
+    initial_values: [
+      "currentColor",
+      "currentColor currentColor",
+      "currentColor currentColor currentColor",
+      "currentColor currentColor currentcolor CURRENTcolor",
+    ],
+    other_values: [
+      "green",
+      "currentColor green",
+      "currentColor currentColor green",
+      "currentColor currentColor currentColor green",
+      "rgba(255,128,0,0.5)",
+      "transparent",
+    ],
+    invalid_values: [
+      "#0",
+      "#00",
+      "#00000",
+      "#0000000",
+      "#000000000",
+      "red rgb(nonsense)",
+      "red 1px",
+    ],
+    unbalanced_values: ["red rgb("],
+    quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" },
+  },
+  "border-left": {
+    domProp: "borderLeft",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-left-color",
+      "border-left-style",
+      "border-left-width",
+    ],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "green",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "5px green none",
+    ],
+    invalid_values: [
+      "5%",
+      "5",
+      "5 solid green",
+      "calc(5px + rubbish) green solid",
+      "5px rgb(0, rubbish, 0) solid",
+    ],
+  },
+  "border-left-color": {
+    domProp: "borderLeftColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { color: "black" },
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5)", "transparent"],
+    invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000"],
+    quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" },
+  },
+  "border-left-style": {
+    domProp: "borderLeftStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    /* XXX hidden is sometimes the same as initial */
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed",
+      "dotted",
+      "double",
+      "outset",
+      "inset",
+      "groove",
+      "ridge",
+    ],
+    invalid_values: [],
+  },
+  "border-left-width": {
+    domProp: "borderLeftWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { "border-left-style": "solid" },
+    initial_values: ["medium", "3px", "calc(4px - 1px)"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0em)",
+      "calc(0px)",
+      "calc(5em)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 5em)",
+    ],
+    invalid_values: ["5%"],
+    quirks_values: { 5: "5px" },
+  },
+  "border-right": {
+    domProp: "borderRight",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-right-color",
+      "border-right-style",
+      "border-right-width",
+    ],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "green",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "5px green none",
+    ],
+    invalid_values: ["5%", "5", "5 solid green"],
+  },
+  "border-right-color": {
+    domProp: "borderRightColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { color: "black" },
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5)", "transparent"],
+    invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000"],
+    quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" },
+  },
+  "border-right-style": {
+    domProp: "borderRightStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    /* XXX hidden is sometimes the same as initial */
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed",
+      "dotted",
+      "double",
+      "outset",
+      "inset",
+      "groove",
+      "ridge",
+    ],
+    invalid_values: [],
+  },
+  "border-right-width": {
+    domProp: "borderRightWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { "border-right-style": "solid" },
+    initial_values: ["medium", "3px", "calc(4px - 1px)"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0em)",
+      "calc(0px)",
+      "calc(5em)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 5em)",
+    ],
+    invalid_values: ["5%"],
+    quirks_values: { 5: "5px" },
+  },
+  "border-spacing": {
+    domProp: "borderSpacing",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [
+      "0",
+      "0 0",
+      "0px",
+      "0 0px",
+      "calc(0px)",
+      "calc(0px) calc(0em)",
+      "calc(2em - 2em) calc(3px + 7px - 10px)",
+      "calc(-5px)",
+      "calc(-5px) calc(-5px)",
+    ],
+    other_values: [
+      "3px",
+      "4em 2px",
+      "4em 0",
+      "0px 2px",
+      "calc(7px)",
+      "0 calc(7px)",
+      "calc(7px) 0",
+      "calc(0px) calc(7px)",
+      "calc(7px) calc(0px)",
+      "7px calc(0px)",
+      "calc(0px) 7px",
+      "7px calc(0px)",
+      "3px calc(2em)",
+    ],
+    invalid_values: [
+      "0%",
+      "0 0%",
+      "-5px",
+      "-5px -5px",
+      "0 -5px",
+      "-5px 0",
+      "0 calc(0px + rubbish)",
+    ],
+    quirks_values: {
+      "2px 5": "2px 5px",
+      7: "7px",
+      "3 4px": "3px 4px",
+    },
+  },
+  "border-style": {
+    domProp: "borderStyle",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-top-style",
+      "border-right-style",
+      "border-bottom-style",
+      "border-left-style",
+    ],
+    /* XXX hidden is sometimes the same as initial */
+    initial_values: [
+      "none",
+      "none none",
+      "none none none",
+      "none none none none",
+    ],
+    other_values: [
+      "solid",
+      "dashed",
+      "dotted",
+      "double",
+      "outset",
+      "inset",
+      "groove",
+      "ridge",
+      "none solid",
+      "none none solid",
+      "none none none solid",
+      "groove none none none",
+      "none ridge none none",
+      "none none double none",
+      "none none none dotted",
+    ],
+    invalid_values: [],
+  },
+  "border-top": {
+    domProp: "borderTop",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["border-top-color", "border-top-style", "border-top-width"],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "green",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "5px green none",
+    ],
+    invalid_values: ["5%", "5", "5 solid green"],
+  },
+  "border-top-color": {
+    domProp: "borderTopColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { color: "black" },
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5)", "transparent"],
+    invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000"],
+    quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" },
+  },
+  "border-top-style": {
+    domProp: "borderTopStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    /* XXX hidden is sometimes the same as initial */
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed",
+      "dotted",
+      "double",
+      "outset",
+      "inset",
+      "groove",
+      "ridge",
+    ],
+    invalid_values: [],
+  },
+  "border-top-width": {
+    domProp: "borderTopWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    prerequisites: { "border-top-style": "solid" },
+    initial_values: ["medium", "3px", "calc(4px - 1px)"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0em)",
+      "calc(0px)",
+      "calc(5em)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 5em)",
+    ],
+    invalid_values: ["5%"],
+    quirks_values: { 5: "5px" },
+  },
+  "border-width": {
+    domProp: "borderWidth",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-top-width",
+      "border-right-width",
+      "border-bottom-width",
+      "border-left-width",
+    ],
+    prerequisites: { "border-style": "solid" },
+    initial_values: [
+      "medium",
+      "3px",
+      "medium medium",
+      "3px medium medium",
+      "medium 3px medium medium",
+      "calc(3px) 3px calc(5px - 2px) calc(2px - -1px)",
+    ],
+    other_values: ["thin", "thick", "1px", "2em", "2px 0 0px 1em", "calc(2em)"],
+    invalid_values: ["5%", "1px calc(nonsense)", "1px red"],
+    unbalanced_values: ["1px calc("],
+    quirks_values: { 5: "5px" },
+  },
+  bottom: {
+    domProp: "bottom",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: ["auto"],
+    other_values: [
+      "32px",
+      "-3em",
+      "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "box-shadow": {
+    domProp: "boxShadow",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["none"],
+    prerequisites: { color: "blue" },
+    other_values: [
+      "2px 2px",
+      "2px 2px 1px",
+      "2px 2px 2px 2px",
+      "blue 3px 2px",
+      "2px 2px 1px 5px green",
+      "2px 2px red",
+      "green 2px 2px 1px",
+      "green 2px 2px, blue 1px 3px 4px",
+      "currentColor 3px 3px",
+      "blue 2px 2px, currentColor 1px 2px, 1px 2px 3px 2px orange",
+      "3px 0 0 0",
+      "inset 2px 2px 3px 4px black",
+      "2px -2px green inset, 4px 4px 3px blue, inset 2px 2px",
+      /* calc() values */
+      "2px 2px calc(-5px)" /* clamped */,
+      "calc(3em - 2px) 2px green",
+      "green calc(3em - 2px) 2px",
+      "2px calc(2px + 0.2em)",
+      "blue 2px calc(2px + 0.2em)",
+      "2px calc(2px + 0.2em) blue",
+      "calc(-2px) calc(-2px)",
+      "-2px -2px",
+      "calc(2px) calc(2px)",
+      "calc(2px) calc(2px) calc(2px)",
+      "calc(2px) calc(2px) calc(2px) calc(2px)",
+    ],
+    invalid_values: [
+      "3% 3%",
+      "1px 1px 1px 1px 1px",
+      "2px 2px, none",
+      "red 2px 2px blue",
+      "inherit, 2px 2px",
+      "2px 2px, inherit",
+      "2px 2px -5px",
+      "inset 4px 4px black inset",
+      "inset inherit",
+      "inset none",
+      "3 3",
+      "3px 3",
+      "3 3px",
+      "3px 3px 3",
+      "3px 3px 3px 3",
+      "3px calc(3px + rubbish)",
+      "3px 3px calc(3px + rubbish)",
+      "3px 3px 3px calc(3px + rubbish)",
+      "3px 3px 3px 3px rgb(0, rubbish, 0)",
+      "unset, 2px 2px",
+      "2px 2px, unset",
+      "inset unset",
+    ],
+  },
+  "caption-side": {
+    domProp: "captionSide",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["top"],
+    other_values: ["bottom"],
+    invalid_values: ["right", "left", "top-outside", "bottom-outside"],
+  },
+  "caret-color": {
+    domProp: "caretColor",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { color: "black" },
+    // Though "auto" is an independent computed-value time keyword value,
+    // it is not distinguishable from currentcolor because getComputedStyle
+    // always returns used value for <color>.
+    initial_values: ["auto", "currentcolor", "black", "rgb(0,0,0)"],
+    other_values: ["green", "transparent", "rgba(128,128,128,.5)", "#123"],
+    invalid_values: ["#0", "#00", "#00000", "cc00ff"],
+  },
+  clear: {
+    domProp: "clear",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["left", "right", "both", "inline-start", "inline-end"],
+    invalid_values: [],
+  },
+  clip: {
+    domProp: "clip",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "rect(0 0 0 0)",
+      "rect(auto,auto,auto,auto)",
+      "rect(3px, 4px, 4em, 0)",
+      "rect(auto, 3em, 4pt, 2px)",
+      "rect(2px 3px 4px 5px)",
+    ],
+    invalid_values: ["rect(auto, 3em, 2%, 5px)"],
+    quirks_values: { "rect(1, 2, 3, 4)": "rect(1px, 2px, 3px, 4px)" },
+  },
+  color: {
+    domProp: "color",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    /* XXX should test currentColor, but may or may not be initial */
+    initial_values: [
+      "black",
+      "#000",
+      "#000f",
+      "#000000ff",
+      "-moz-default-color",
+      "rgb(0, 0, 0)",
+      "rgb(0%, 0%, 0%)",
+      /* css-color-4: */
+      /* rgb() and rgba() are aliases of each other. */
+      "rgb(0, 0, 0)",
+      "rgba(0, 0, 0)",
+      "rgb(0, 0, 0, 1)",
+      "rgba(0, 0, 0, 1)",
+      /* hsl() and hsla() are aliases of each other. */
+      "hsl(0, 0%, 0%)",
+      "hsla(0, 0%, 0%)",
+      "hsl(0, 0%, 0%, 1)",
+      "hsla(0, 0%, 0%, 1)",
+      /* rgb() and rgba() functions now accept <number> rather than <integer>. */
+      "rgb(0.0, 0.0, 0.0)",
+      "rgba(0.0, 0.0, 0.0)",
+      "rgb(0.0, 0.0, 0.0, 1)",
+      "rgba(0.0, 0.0, 0.0, 1)",
+      /* <alpha-value> now accepts <percentage> as well as <number> in rgba() and hsla(). */
+      "rgb(0.0, 0.0, 0.0, 100%)",
+      "hsl(0, 0%, 0%, 100%)",
+      /* rgb() and hsl() now support comma-less expression. */
+      "rgb(0 0 0)",
+      "rgb(0 0 0 / 1)",
+      "rgb(0/* comment */0/* comment */0)",
+      "rgb(0/* comment */0/* comment*/0/1.0)",
+      "hsl(0 0% 0%)",
+      "hsl(0 0% 0% / 1)",
+      "hsl(0/* comment */0%/* comment */0%)",
+      "hsl(0/* comment */0%/* comment */0%/1)",
+      /* Support <angle> for hsl() hue component. */
+      "hsl(0deg, 0%, 0%)",
+      "hsl(360deg, 0%, 0%)",
+      "hsl(0grad, 0%, 0%)",
+      "hsl(400grad, 0%, 0%)",
+      "hsl(0rad, 0%, 0%)",
+      "hsl(0turn, 0%, 0%)",
+      "hsl(1turn, 0%, 0%)",
+      /* CSS4 System Colors */
+      "canvastext",
+      /* Preserve previously available specially prefixed colors */
+      "-moz-default-color",
+    ],
+    other_values: [
+      "green",
+      "#f3c",
+      "#fed292",
+      "rgba(45,300,12,2)",
+      "transparent",
+      "-moz-nativehyperlinktext",
+      "rgba(255,128,0,0.5)",
+      "#e0fc",
+      "#10fcee72",
+      /* css-color-4: */
+      "rgb(100, 100.0, 100)",
+      "rgb(300 300 300 / 200%)",
+      "rgb(300.0 300.0 300.0 / 2.0)",
+      "hsl(720, 200%, 200%, 2.0)",
+      "hsla(720 200% 200% / 200%)",
+      "hsl(480deg, 20%, 30%, 0.3)",
+      "hsl(55grad, 400%, 30%)",
+      "hsl(0.5grad 400% 500% / 9.0)",
+      "hsl(33rad 100% 90% / 4)",
+      "hsl(0.33turn, 40%, 40%, 10%)",
+      "hsl(63e292, 41%, 34%)",
+      /* CSS4 System Colors */
+      "canvas",
+      "linktext",
+      "visitedtext",
+      "activetext",
+      "buttonface",
+      "field",
+      "highlight",
+      "graytext",
+      /* Preserve previously available specially prefixed colors */
+      "-moz-activehyperlinktext",
+      "-moz-default-background-color",
+      "-moz-hyperlinktext",
+      "-moz-visitedhyperlinktext",
+    ],
+    invalid_values: [
+      "#f",
+      "#ff",
+      "#fffff",
+      "#fffffff",
+      "#fffffffff",
+      "rgb(100%, 0, 100%)",
+      "rgba(100, 0, 100%, 30%)",
+      "hsl(0, 0, 0%)",
+      "hsla(0%, 0%, 0%, 0.1)",
+      /* trailing commas */
+      "rgb(0, 0, 0,)",
+      "rgba(0, 0, 0, 0,)",
+      "hsl(0, 0%, 0%,)",
+      "hsla(0, 0%, 0%, 1,)",
+      /* css-color-4: */
+      /* comma and comma-less expressions should not mix together. */
+      "rgb(0, 0, 0 / 1)",
+      "rgb(0 0 0, 1)",
+      "rgb(0, 0 0, 1)",
+      "rgb(0 0, 0 / 1)",
+      "hsl(0, 0%, 0% / 1)",
+      "hsl(0 0% 0%, 1)",
+      "hsl(0 0% 0%, 1)",
+      "hsl(0 0%, 0% / 1)",
+      /* trailing slash */
+      "rgb(0 0 0 /)",
+      "rgb(0, 0, 0 /)",
+      "hsl(0 0% 0% /)",
+      "hsl(0, 0%, 0% /)",
+    ],
+    quirks_values: {
+      "000000": "#000000",
+      "96ed2a": "#96ed2a",
+      fff: "#ffffff",
+      ffffff: "#ffffff",
+    },
+  },
+  content: {
+    domProp: "content",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    // XXX This really depends on pseudo-element-ness.
+    initial_values: ["normal", "none"],
+    other_values: [
+      '""',
+      "''",
+      '"hello"',
+      "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==)",
+      "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==')",
+      'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
+      "counter(foo)",
+      "counter(bar, upper-roman)",
+      'counters(foo, ".")',
+      "counters(bar, '-', lower-greek)",
+      "'-' counter(foo) '.'",
+      "attr(title)",
+      "open-quote",
+      "close-quote",
+      "no-open-quote",
+      "no-close-quote",
+      "close-quote attr(title) counters(foo, '.', upper-alpha)",
+      "attr(\\32)",
+      "attr(\\2)",
+      "attr(-\\2)",
+      "attr(-\\32)",
+      "counter(\\2)",
+      "counters(\\32, '.')",
+      "counter(-\\32, upper-roman)",
+      "counters(-\\2, '-', lower-greek)",
+      "counter(\\()",
+      "counters(a\\+b, '.')",
+      "counter(\\}, upper-alpha)",
+      "-moz-alt-content",
+      "counter(foo, symbols('*'))",
+      "counter(foo, symbols(numeric '0' '1'))",
+      "counters(foo, '.', symbols('*'))",
+      "counters(foo, '.', symbols(numeric '0' '1'))",
+      "image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==))",
+    ].concat(validNonUrlImageValues),
+    invalid_values: [
+      "counter(foo, none)",
+      "counters(bar, '.', none)",
+      "counters(foo)",
+      'counter(foo, ".")',
+      'attr("title")',
+      "attr('title')",
+      "attr(2)",
+      "attr(-2)",
+      "counter(2)",
+      "counters(-2, '.')",
+      "-moz-alt-content 'foo'",
+      "'foo' -moz-alt-content",
+      "counter(one, two, three) 'foo'",
+    ].concat(invalidNonUrlImageValues),
+  },
+  "counter-increment": {
+    domProp: "counterIncrement",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "foo 1",
+      "bar",
+      "foo 3 bar baz 2",
+      "\\32  1",
+      "-\\32  1",
+      "-c 1",
+      "\\32 1",
+      "-\\32 1",
+      "\\2  1",
+      "-\\2  1",
+      "-c 1",
+      "\\2 1",
+      "-\\2 1",
+      "-\\7f \\9e 1",
+    ],
+    invalid_values: ["none foo", "none foo 3", "foo none", "foo 3 none"],
+    unbalanced_values: ["foo 1 ("],
+  },
+  "counter-reset": {
+    domProp: "counterReset",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "foo 1",
+      "bar",
+      "foo 3 bar baz 2",
+      "\\32  1",
+      "-\\32  1",
+      "-c 1",
+      "\\32 1",
+      "-\\32 1",
+      "\\2  1",
+      "-\\2  1",
+      "-c 1",
+      "\\2 1",
+      "-\\2 1",
+      "-\\7f \\9e 1",
+    ],
+    invalid_values: ["none foo", "none foo 3", "foo none", "foo 3 none"],
+  },
+  "counter-set": {
+    domProp: "counterSet",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "foo 1",
+      "bar",
+      "foo 3 bar baz 2",
+      "\\32  1",
+      "-\\32  1",
+      "-c 1",
+      "\\32 1",
+      "-\\32 1",
+      "\\2  1",
+      "-\\2  1",
+      "-c 1",
+      "\\2 1",
+      "-\\2 1",
+      "-\\7f \\9e 1",
+    ],
+    invalid_values: ["none foo", "none foo 3", "foo none", "foo 3 none"],
+  },
+  cursor: {
+    domProp: "cursor",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "crosshair",
+      "default",
+      "pointer",
+      "move",
+      "e-resize",
+      "ne-resize",
+      "nw-resize",
+      "n-resize",
+      "se-resize",
+      "sw-resize",
+      "s-resize",
+      "w-resize",
+      "text",
+      "wait",
+      "help",
+      "progress",
+      "copy",
+      "alias",
+      "context-menu",
+      "cell",
+      "not-allowed",
+      "col-resize",
+      "row-resize",
+      "no-drop",
+      "vertical-text",
+      "all-scroll",
+      "nesw-resize",
+      "nwse-resize",
+      "ns-resize",
+      "ew-resize",
+      "none",
+      "grab",
+      "grabbing",
+      "zoom-in",
+      "zoom-out",
+      "-moz-grab",
+      "-moz-grabbing",
+      "-moz-zoom-in",
+      "-moz-zoom-out",
+      "url(foo.png), move",
+      "url(foo.png) 5 7, move",
+      "url(foo.png) 12 3, url(bar.png), no-drop",
+      "url(foo.png), url(bar.png) 7 2, wait",
+      "url(foo.png) 3 2, url(bar.png) 7 9, pointer",
+      "url(foo.png) calc(1 + 2) calc(3), pointer",
+      "image-set(url(foo.png)), auto",
+    ],
+    invalid_values: [
+      "url(foo.png)",
+      "url(foo.png) 5 5",
+      "image-set(linear-gradient(red, blue)), auto",
+      // Gradients are supported per spec, but we don't have support for it yet
+      "linear-gradient(red, blue), auto",
+    ],
+  },
+  direction: {
+    domProp: "direction",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["ltr"],
+    other_values: ["rtl"],
+    invalid_values: [],
+  },
+  display: {
+    domProp: "display",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    initial_values: ["inline"],
+    /* XXX none will really mess with other properties */
+    prerequisites: { float: "none", position: "static", contain: "none" },
+    other_values: [
+      "block",
+      "flex",
+      "inline-flex",
+      "list-item",
+      "inline list-item",
+      "inline flow-root list-item",
+      "inline-block",
+      "table",
+      "inline-table",
+      "table-row-group",
+      "table-header-group",
+      "table-footer-group",
+      "table-row",
+      "table-column-group",
+      "table-column",
+      "table-cell",
+      "table-caption",
+      "block ruby",
+      "ruby",
+      "ruby-base",
+      "ruby-base-container",
+      "ruby-text",
+      "ruby-text-container",
+      "contents",
+      "none",
+    ],
+    invalid_values: [],
+  },
+  "empty-cells": {
+    domProp: "emptyCells",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["show"],
+    other_values: ["hide"],
+    invalid_values: [],
+  },
+  float: {
+    domProp: "cssFloat",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["none"],
+    other_values: ["left", "right", "inline-start", "inline-end"],
+    invalid_values: [],
+  },
+  font: {
+    domProp: "font",
+    inherited: true,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    prerequisites: { "writing-mode": "initial" },
+    subproperties: [
+      "font-style",
+      "font-variant",
+      "font-weight",
+      "font-size",
+      "line-height",
+      "font-family",
+      "font-stretch",
+      "font-size-adjust",
+      "font-feature-settings",
+      "font-language-override",
+      "font-kerning",
+      "font-variant-alternates",
+      "font-variant-caps",
+      "font-variant-east-asian",
+      "font-variant-ligatures",
+      "font-variant-numeric",
+      "font-variant-position",
+    ],
+    initial_values: [
+      gInitialFontFamilyIsSansSerif ? "medium sans-serif" : "medium serif",
+    ],
+    other_values: [
+      "large serif",
+      "9px fantasy",
+      "condensed bold italic small-caps 24px/1.4 Times New Roman, serif",
+      "small inherit roman",
+      "small roman inherit",
+      // system fonts
+      "caption",
+      "icon",
+      "menu",
+      "message-box",
+      "small-caption",
+      "status-bar",
+      // line-height with calc()
+      "condensed bold italic small-caps 24px/calc(2px) Times New Roman, serif",
+      "condensed bold italic small-caps 24px/calc(50%) Times New Roman, serif",
+      "condensed bold italic small-caps 24px/calc(3*25px) Times New Roman, serif",
+      "condensed bold italic small-caps 24px/calc(25px*3) Times New Roman, serif",
+      "condensed bold italic small-caps 24px/calc(3*25px + 50%) Times New Roman, serif",
+      "condensed bold italic small-caps 24px/calc(1 + 2*3/4) Times New Roman, serif",
+    ],
+    invalid_values: [
+      "9 fantasy",
+      "-2px fantasy",
+      // line-height with calc()
+      "condensed bold italic small-caps 24px/calc(1 + 2px) Times New Roman, serif",
+      "condensed bold italic small-caps 24px/calc(100% + 0.1) Times New Roman, serif",
+    ],
+  },
+  "font-family": {
+    domProp: "fontFamily",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: [gInitialFontFamilyIsSansSerif ? "sans-serif" : "serif"],
+    other_values: [
+      gInitialFontFamilyIsSansSerif ? "serif" : "sans-serif",
+      "Times New Roman, serif",
+      "'Times New Roman', serif",
+      "cursive",
+      "fantasy",
+      '\\"Times New Roman',
+      '"Times New Roman"',
+      'Times, \\"Times New Roman',
+      'Times, "Times New Roman"',
+      "-no-such-font-installed",
+      "inherit roman",
+      "roman inherit",
+      "Times, inherit roman",
+      "inherit roman, Times",
+      "roman inherit, Times",
+      "Times, roman inherit",
+    ],
+    invalid_values: [
+      '"Times New" Roman',
+      '"Times New Roman\n',
+      'Times, "Times New Roman\n',
+    ],
+  },
+  "font-feature-settings": {
+    domProp: "fontFeatureSettings",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: [
+      "'liga' on",
+      "'liga'",
+      '"liga" 1',
+      "'liga', 'clig' 1",
+      '"liga" off',
+      '"liga" 0',
+      '"cv01" 3, "cv02" 4',
+      '"cswh", "smcp" off, "salt" 4',
+      '"cswh" 1, "smcp" off, "salt" 4',
+      '"cswh" 0, \'blah\', "liga", "smcp" off, "salt" 4',
+      '"liga"        ,"smcp" 0         , "blah"',
+      '"ab\\"c"',
+      '"ab\\\\c"',
+      "'vert' calc(2)",
+    ],
+    invalid_values: [
+      "liga",
+      "liga 1",
+      "liga normal",
+      '"liga" normal',
+      "normal liga",
+      'normal "liga"',
+      'normal, "liga"',
+      '"liga=1"',
+      "'foobar' on",
+      '"blahblah" 0',
+      '"liga" 3.14',
+      '"liga" 1 3.14',
+      '"liga" 1 normal',
+      '"liga" 1 off',
+      '"liga" on off',
+      '"liga" , 0 "smcp"',
+      '"liga" "smcp"',
+    ],
+  },
+  "font-kerning": {
+    domProp: "fontKerning",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["auto"],
+    other_values: ["normal", "none"],
+    invalid_values: ["on"],
+  },
+  "font-language-override": {
+    domProp: "fontLanguageOverride",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: ["'ENG'", "'TRK'", '"TRK"', "'N\\'Ko'"],
+    invalid_values: ["TRK", "ja"],
+  },
+  "font-size": {
+    domProp: "fontSize",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: [
+      "medium",
+      "1rem",
+      "calc(1rem)",
+      "calc(0.75rem + 200% - 125% + 0.25rem - 75%)",
+    ],
+    other_values: [
+      "large",
+      "2em",
+      "50%",
+      "xx-small",
+      "xxx-large",
+      "36pt",
+      "8px",
+      "larger",
+      "smaller",
+      "0px",
+      "0%",
+      "calc(2em)",
+      "calc(36pt + 75% + (30% + 2em + 2px))",
+      "calc(-2em)",
+      "calc(-50%)",
+      "calc(-1px)",
+    ],
+    invalid_values: ["-2em", "-50%", "-1px"],
+    quirks_values: { 5: "5px" },
+  },
+  "font-size-adjust": {
+    domProp: "fontSizeAdjust",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["none"],
+    other_values: ["0.3", "0.5", "0.7", "0.0", "0", "3"],
+    invalid_values: ["-0.3", "-1"],
+  },
+  "font-stretch": {
+    domProp: "fontStretch",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: [
+      "ultra-condensed",
+      "extra-condensed",
+      "condensed",
+      "semi-condensed",
+      "semi-expanded",
+      "expanded",
+      "extra-expanded",
+      "ultra-expanded",
+    ],
+    invalid_values: ["narrower", "wider"],
+  },
+  "font-style": {
+    domProp: "fontStyle",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: ["italic", "oblique"],
+    invalid_values: [],
+  },
+  "font-synthesis": {
+    domProp: "fontSynthesis",
+    inherited: true,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    subproperties: [
+      "font-synthesis-weight",
+      "font-synthesis-style",
+      "font-synthesis-small-caps",
+    ],
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: [
+      "weight style small-caps",
+      "weight small-caps style",
+      "small-caps weight style",
+      "small-caps style weight",
+      "style weight small-caps",
+      "style small-caps weight",
+    ],
+    other_values: [
+      "none",
+      "weight",
+      "style",
+      "small-caps",
+      "weight style",
+      "style weight",
+      "weight small-caps",
+      "small-caps weight",
+      "style small-caps",
+      "small-caps style",
+    ],
+    invalid_values: [
+      "10px",
+      "weight none",
+      "style none",
+      "none style",
+      "none 10px",
+      "weight 10px",
+      "weight weight",
+      "style style",
+      "small-caps none",
+      "small-caps small-caps",
+    ],
+  },
+  "font-synthesis-weight": {
+    domProp: "fontSynthesisWeight",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["auto"],
+    other_values: ["none"],
+    invalid_values: ["auto none", "weight", "normal", "0"],
+  },
+  "font-synthesis-style": {
+    domProp: "fontSynthesisStyle",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["auto"],
+    other_values: ["none"],
+    invalid_values: ["auto none", "style", "normal", "0"],
+  },
+  "font-synthesis-small-caps": {
+    domProp: "fontSynthesisSmallCaps",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["auto"],
+    other_values: ["none"],
+    invalid_values: ["auto none", "small-caps", "normal", "0"],
+  },
+  "font-variant": {
+    domProp: "fontVariant",
+    inherited: true,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "font-variant-alternates",
+      "font-variant-caps",
+      "font-variant-east-asian",
+      "font-variant-ligatures",
+      "font-variant-numeric",
+      "font-variant-position",
+    ],
+    initial_values: ["normal"],
+    other_values: [
+      "small-caps",
+      "none",
+      "traditional oldstyle-nums",
+      "all-small-caps",
+      "common-ligatures no-discretionary-ligatures",
+      "proportional-nums oldstyle-nums",
+      "proportional-nums slashed-zero diagonal-fractions oldstyle-nums ordinal",
+      "traditional historical-forms styleset(ok-alt-a, ok-alt-b)",
+      "styleset(potato)",
+    ],
+    invalid_values: [
+      "small-caps normal",
+      "small-caps small-caps",
+      "none common-ligatures",
+      "common-ligatures none",
+      "small-caps potato",
+      "small-caps jis83 all-small-caps",
+      "super historical-ligatures sub",
+      "stacked-fractions diagonal-fractions historical-ligatures",
+      "common-ligatures traditional common-ligatures",
+      "lining-nums traditional slashed-zero ordinal normal",
+      "traditional historical-forms styleset(ok-alt-a, ok-alt-b) historical-forms",
+      "historical-forms styleset(ok-alt-a, ok-alt-b) traditional styleset(potato)",
+      "annotation(a,b,c)",
+    ],
+  },
+  "font-variant-alternates": {
+    domProp: "fontVariantAlternates",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: [
+      "historical-forms",
+      "styleset(alt-a, alt-b)",
+      "character-variant(a, b, c)",
+      "annotation(circled)",
+      "swash(squishy)",
+      "styleset(complex\\ blob, a)",
+      "annotation(\\62 lah)",
+    ],
+    invalid_values: [
+      "historical-forms normal",
+      "historical-forms historical-forms",
+      "swash",
+      "swash(3)",
+      "annotation(a, b)",
+      "ornaments(a,b)",
+      "styleset(1234blah)",
+      "annotation(a), annotation(b)",
+      "annotation(a) normal",
+    ],
+  },
+  "font-variant-caps": {
+    domProp: "fontVariantCaps",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: [
+      "small-caps",
+      "all-small-caps",
+      "petite-caps",
+      "all-petite-caps",
+      "titling-caps",
+      "unicase",
+    ],
+    invalid_values: [
+      "normal small-caps",
+      "petite-caps normal",
+      "unicase unicase",
+    ],
+  },
+  "font-variant-east-asian": {
+    domProp: "fontVariantEastAsian",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: [
+      "jis78",
+      "jis83",
+      "jis90",
+      "jis04",
+      "simplified",
+      "traditional",
+      "full-width",
+      "proportional-width",
+      "ruby",
+      "jis78 full-width",
+      "jis78 full-width ruby",
+      "simplified proportional-width",
+      "ruby simplified",
+    ],
+    invalid_values: [
+      "jis78 normal",
+      "jis90 jis04",
+      "simplified traditional",
+      "full-width proportional-width",
+      "ruby simplified ruby",
+      "jis78 ruby simplified",
+    ],
+  },
+  "font-variant-ligatures": {
+    domProp: "fontVariantLigatures",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: [
+      "none",
+      "common-ligatures",
+      "no-common-ligatures",
+      "discretionary-ligatures",
+      "no-discretionary-ligatures",
+      "historical-ligatures",
+      "no-historical-ligatures",
+      "contextual",
+      "no-contextual",
+      "common-ligatures no-discretionary-ligatures",
+      "contextual no-discretionary-ligatures",
+      "historical-ligatures no-common-ligatures",
+      "no-historical-ligatures discretionary-ligatures",
+      "common-ligatures no-discretionary-ligatures historical-ligatures no-contextual",
+    ],
+    invalid_values: [
+      "common-ligatures normal",
+      "common-ligatures no-common-ligatures",
+      "common-ligatures common-ligatures",
+      "no-historical-ligatures historical-ligatures",
+      "no-discretionary-ligatures discretionary-ligatures",
+      "no-contextual contextual",
+      "common-ligatures no-discretionary-ligatures no-common-ligatures",
+      "common-ligatures none",
+      "no-discretionary-ligatures none",
+      "none common-ligatures",
+    ],
+  },
+  "font-variant-numeric": {
+    domProp: "fontVariantNumeric",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: [
+      "lining-nums",
+      "oldstyle-nums",
+      "proportional-nums",
+      "tabular-nums",
+      "diagonal-fractions",
+      "stacked-fractions",
+      "slashed-zero",
+      "ordinal",
+      "lining-nums diagonal-fractions",
+      "tabular-nums stacked-fractions",
+      "tabular-nums slashed-zero stacked-fractions",
+      "proportional-nums slashed-zero diagonal-fractions oldstyle-nums ordinal",
+    ],
+    invalid_values: [
+      "lining-nums normal",
+      "lining-nums oldstyle-nums",
+      "lining-nums normal slashed-zero ordinal",
+      "proportional-nums tabular-nums",
+      "diagonal-fractions stacked-fractions",
+      "slashed-zero diagonal-fractions slashed-zero",
+      "lining-nums slashed-zero diagonal-fractions oldstyle-nums",
+      "diagonal-fractions diagonal-fractions",
+    ],
+  },
+  "font-variant-position": {
+    domProp: "fontVariantPosition",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: ["super", "sub"],
+    invalid_values: ["normal sub", "super sub"],
+  },
+  "font-weight": {
+    domProp: "fontWeight",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal", "400"],
+    other_values: [
+      "bold",
+      "100",
+      "200",
+      "300",
+      "500",
+      "600",
+      "700",
+      "800",
+      "900",
+      "bolder",
+      "lighter",
+      "10.5",
+      "calc(10 + 10)",
+      "calc(10 - 99)",
+      "100.0",
+      "107",
+      "399",
+      "401",
+      "699",
+      "710",
+      "1000",
+    ],
+    invalid_values: ["0", "1001", "calc(10%)"],
+  },
+  height: {
+    domProp: "height",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    /* FIXME: test zero, and test calc clamping */
+    initial_values: [" auto"],
+    /* computed value tests for height test more with display:block */
+    prerequisites: { display: "block" },
+    other_values: [
+      "15px",
+      "3em",
+      "15%",
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      "-moz-available",
+      // these two keywords are the aliases of above first two.
+      "-moz-max-content",
+      "-moz-min-content",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["none"],
+    quirks_values: { 5: "5px" },
+  },
+  "ime-mode": {
+    domProp: "imeMode",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["normal", "disabled", "active", "inactive"],
+    invalid_values: ["none", "enabled", "1px"],
+  },
+  left: {
+    domProp: "left",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: ["auto"],
+    other_values: [
+      "32px",
+      "-3em",
+      "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "letter-spacing": {
+    domProp: "letterSpacing",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    initial_values: ["normal", "0", "0px", "calc(0px)"],
+    other_values: [
+      "1em",
+      "2px",
+      "-3px",
+      "calc(1em)",
+      "calc(1em + 3px)",
+      "calc(15px / 2)",
+      "calc(15px/2)",
+      "calc(-3px)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "line-break": {
+    domProp: "lineBreak",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["loose", "normal", "strict", "anywhere"],
+    invalid_values: [],
+  },
+  "line-height": {
+    domProp: "lineHeight",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    /*
+     * Inheritance tests require consistent font size, since
+     * getComputedStyle (which uses the CSS2 computed value, or
+     * CSS2.1 used value) doesn't match what the CSS2.1 computed
+     * value is.  And they even require consistent font metrics for
+     * computation of 'normal'.
+     */
+    prerequisites: {
+      "font-size": "19px",
+      "font-size-adjust": "none",
+      "font-family": "serif",
+      "font-weight": "normal",
+      "font-style": "normal",
+      height: "18px",
+      display: "block",
+      "writing-mode": "initial",
+    },
+
+    initial_values: ["normal"],
+    other_values: [
+      "1.0",
+      "1",
+      "1em",
+      "47px",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "calc(1 + 2*3/4)",
+    ],
+    invalid_values: ["calc(1 + 2px)", "calc(100% + 0.1)"],
+  },
+  "list-style": {
+    domProp: "listStyle",
+    inherited: true,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "list-style-type",
+      "list-style-position",
+      "list-style-image",
+    ],
+    initial_values: [
+      "outside",
+      "disc",
+      "disc outside",
+      "outside disc",
+      "disc none",
+      "none disc",
+      "none disc outside",
+      "none outside disc",
+      "disc none outside",
+      "disc outside none",
+      "outside none disc",
+      "outside disc none",
+    ],
+    other_values: [
+      "inside none",
+      "none inside",
+      "none none inside",
+      "square",
+      "none",
+      "none none",
+      "outside none none",
+      "none outside none",
+      "none none outside",
+      "none outside",
+      "outside none",
+      "outside outside",
+      "outside inside",
+      "\\32 style",
+      "\\32 style inside",
+      '"-"',
+      "'-'",
+      "inside '-'",
+      "'-' outside",
+      "none '-'",
+      "inside none '-'",
+      'symbols("*" "\\2020" "\\2021" "\\A7")',
+      'symbols(cyclic "*" "\\2020" "\\2021" "\\A7")',
+      'inside symbols("*" "\\2020" "\\2021" "\\A7")',
+      'symbols("*" "\\2020" "\\2021" "\\A7") outside',
+      'none symbols("*" "\\2020" "\\2021" "\\A7")',
+      'inside none symbols("*" "\\2020" "\\2021" "\\A7")',
+      'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
+      'none url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
+      'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") none',
+      'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") outside',
+      'outside url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
+      'outside none url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
+      'outside url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") none',
+      'none url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") outside',
+      'none outside url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
+      'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") outside none',
+      'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") none outside',
+    ],
+    invalid_values: [
+      "disc disc",
+      "unknown value",
+      "none none none",
+      "none disc url(404.png)",
+      "none url(404.png) disc",
+      "disc none url(404.png)",
+      "disc url(404.png) none",
+      "url(404.png) none disc",
+      "url(404.png) disc none",
+      "none disc outside url(404.png)",
+    ],
+  },
+  "list-style-image": {
+    domProp: "listStyleImage",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")',
+      // Add some tests for interesting url() values here to test serialization, etc.
+      "url('data:text/plain,\"')",
+      'url("data:text/plain,\'")',
+      "url('data:text/plain,\\'')",
+      'url("data:text/plain,\\"")',
+      "url('data:text/plain,\\\"')",
+      'url("data:text/plain,\\\'")',
+      "url(data:text/plain,\\\\)",
+    ].concat(validNonUrlImageValues),
+    invalid_values: ["url('border.png') url('border.png')"].concat(
+      invalidNonUrlImageValues
+    ),
+    unbalanced_values: [].concat(unbalancedGradientAndElementValues),
+  },
+  "list-style-position": {
+    domProp: "listStylePosition",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["outside"],
+    other_values: ["inside"],
+    invalid_values: [],
+  },
+  "list-style-type": {
+    domProp: "listStyleType",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["disc"],
+    other_values: [
+      "none",
+      "circle",
+      "square",
+      "disclosure-closed",
+      "disclosure-open",
+      "decimal",
+      "decimal-leading-zero",
+      "lower-roman",
+      "upper-roman",
+      "lower-greek",
+      "lower-alpha",
+      "lower-latin",
+      "upper-alpha",
+      "upper-latin",
+      "hebrew",
+      "armenian",
+      "georgian",
+      "cjk-decimal",
+      "cjk-ideographic",
+      "hiragana",
+      "katakana",
+      "hiragana-iroha",
+      "katakana-iroha",
+      "japanese-informal",
+      "japanese-formal",
+      "korean-hangul-formal",
+      "korean-hanja-informal",
+      "korean-hanja-formal",
+      "simp-chinese-informal",
+      "simp-chinese-formal",
+      "trad-chinese-informal",
+      "trad-chinese-formal",
+      "ethiopic-numeric",
+      "-moz-cjk-heavenly-stem",
+      "-moz-cjk-earthly-branch",
+      "-moz-trad-chinese-informal",
+      "-moz-trad-chinese-formal",
+      "-moz-simp-chinese-informal",
+      "-moz-simp-chinese-formal",
+      "-moz-japanese-informal",
+      "-moz-japanese-formal",
+      "-moz-arabic-indic",
+      "-moz-persian",
+      "-moz-urdu",
+      "-moz-devanagari",
+      "-moz-gurmukhi",
+      "-moz-gujarati",
+      "-moz-oriya",
+      "-moz-kannada",
+      "-moz-malayalam",
+      "-moz-bengali",
+      "-moz-tamil",
+      "-moz-telugu",
+      "-moz-thai",
+      "-moz-lao",
+      "-moz-myanmar",
+      "-moz-khmer",
+      "-moz-hangul",
+      "-moz-hangul-consonant",
+      "-moz-ethiopic-halehame",
+      "-moz-ethiopic-numeric",
+      "-moz-ethiopic-halehame-am",
+      "-moz-ethiopic-halehame-ti-er",
+      "-moz-ethiopic-halehame-ti-et",
+      "other-style",
+      "inside",
+      "outside",
+      "\\32 style",
+      '"-"',
+      "'-'",
+      'symbols("*" "\\2020" "\\2021" "\\A7")',
+      "symbols(cyclic '*' '\\2020' '\\2021' '\\A7')",
+    ],
+    invalid_values: [],
+  },
+  margin: {
+    domProp: "margin",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+    ],
+    initial_values: ["0", "0px 0 0em", "0% 0px 0em 0pt"],
+    other_values: [
+      "3px 0",
+      "2em 4px 2pt",
+      "1em 2em 3px 4px",
+      "1em calc(2em + 3px) 4ex 5cm",
+    ],
+    invalid_values: ["1px calc(nonsense)", "1px red"],
+    unbalanced_values: ["1px calc("],
+    quirks_values: { 5: "5px", "3px 6px 2 5px": "3px 6px 2px 5px" },
+  },
+  "margin-bottom": {
+    domProp: "marginBottom",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    /* XXX testing auto has prerequisites */
+    initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "margin-left": {
+    domProp: "marginLeft",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    /* XXX testing auto has prerequisites */
+    initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      ".5px",
+      "+32px",
+      "+.789px",
+      "-.328px",
+      "+0.56px",
+      "-0.974px",
+      "237px",
+      "-289px",
+      "-056px",
+      "1987.45px",
+      "-84.32px",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "..25px",
+      ".+5px",
+      ".px",
+      "-.px",
+      "++5px",
+      "-+4px",
+      "+-3px",
+      "--7px",
+      "+-.6px",
+      "-+.5px",
+      "++.7px",
+      "--.4px",
+    ],
+    quirks_values: { 5: "5px" },
+  },
+  "margin-right": {
+    domProp: "marginRight",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    /* XXX testing auto has prerequisites */
+    initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "margin-top": {
+    domProp: "marginTop",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    /* XXX testing auto has prerequisites */
+    initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "max-height": {
+    domProp: "maxHeight",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { display: "block" },
+    initial_values: ["none"],
+    other_values: [
+      "30px",
+      "50%",
+      "0",
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      "-moz-available",
+      // these two keywords are the aliases of above first two.
+      "-moz-max-content",
+      "-moz-min-content",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["auto"],
+    quirks_values: { 5: "5px" },
+  },
+  "max-width": {
+    domProp: "maxWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { display: "block" },
+    initial_values: ["none"],
+    other_values: [
+      "30px",
+      "50%",
+      "0",
+      // these four keywords compute to the initial value only when the
+      // writing mode is vertical, and we're testing with a horizontal
+      // writing mode
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      "-moz-available",
+      // these two keywords are the aliases of above first two.
+      "-moz-max-content",
+      "-moz-min-content",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["auto"],
+    quirks_values: { 5: "5px" },
+  },
+  "min-height": {
+    domProp: "minHeight",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { display: "block" },
+    initial_values: ["auto", "0", "calc(0em)", "calc(-2px)"],
+    other_values: [
+      "30px",
+      "50%",
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      "-moz-available",
+      // these two keywords are the aliases of above first two.
+      "-moz-max-content",
+      "-moz-min-content",
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["none"],
+    quirks_values: { 5: "5px" },
+  },
+  "min-width": {
+    domProp: "minWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { display: "block" },
+    initial_values: ["auto", "0", "calc(0em)", "calc(-2px)"],
+    other_values: [
+      "30px",
+      "50%",
+      // these four keywords compute to the initial value only when the
+      // writing mode is vertical, and we're testing with a horizontal
+      // writing mode
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      "-moz-available",
+      // these two keywords are the aliases of above first two.
+      "-moz-max-content",
+      "-moz-min-content",
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["none"],
+    quirks_values: { 5: "5px" },
+  },
+  "object-fit": {
+    domProp: "objectFit",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["fill"],
+    other_values: ["contain", "cover", "none", "scale-down"],
+    invalid_values: ["auto", "5px", "100%"],
+  },
+  "object-position": {
+    domProp: "objectPosition",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["50% 50%", "50%", "center", "center center"],
+    other_values: [
+      "calc(20px)",
+      "calc(20px) 10px",
+      "10px calc(20px)",
+      "calc(20px) 25%",
+      "25% calc(20px)",
+      "calc(20px) calc(20px)",
+      "calc(20px + 1em) calc(20px / 2)",
+      "calc(20px + 50%) calc(50% - 10px)",
+      "calc(-20px) calc(-50%)",
+      "calc(-20%) calc(-50%)",
+      "0px 0px",
+      "right 20px top 60px",
+      "right 20px bottom 60px",
+      "left 20px top 60px",
+      "left 20px bottom 60px",
+      "right -50px top -50px",
+      "left -50px bottom -50px",
+      "right 20px top -50px",
+      "right -20px top 50px",
+      "right 3em bottom 10px",
+      "bottom 3em right 10px",
+      "top 3em right 10px",
+      "left 15px",
+      "10px top",
+      "left 20%",
+      "right 20%",
+    ],
+    invalid_values: [
+      "center 10px center 4px",
+      "center 10px center",
+      "top 20%",
+      "bottom 20%",
+      "50% left",
+      "top 50%",
+      "50% bottom 10%",
+      "right 10% 50%",
+      "left right",
+      "top bottom",
+      "left 10% right",
+      "top 20px bottom 20px",
+      "left left",
+      "20 20",
+      "left top 15px",
+      "left 10px top",
+    ],
+  },
+  opacity: {
+    domProp: "opacity",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: [
+      "1",
+      "17",
+      "397.376",
+      "3e1",
+      "3e+1",
+      "3e0",
+      "3e+0",
+      "3e-0",
+      "300%",
+    ],
+    other_values: ["0", "0.4", "0.0000", "-3", "3e-1", "-100%", "50%"],
+    invalid_values: ["0px", "1px"],
+  },
+  "-moz-orient": {
+    domProp: "MozOrient",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["inline"],
+    other_values: ["horizontal", "vertical", "block"],
+    invalid_values: ["none"],
+  },
+  outline: {
+    domProp: "outline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["outline-color", "outline-style", "outline-width"],
+    initial_values: [
+      "none",
+      "medium",
+      "thin",
+      // XXX Should be invert, but currently currentcolor.
+      //"invert", "none medium invert"
+      "currentColor",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+    ],
+    invalid_values: ["5%", "5", "5 solid green"],
+  },
+  "outline-color": {
+    domProp: "outlineColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_cue: true,
+    prerequisites: { color: "black" },
+    initial_values: ["currentColor"], // XXX should be invert
+    other_values: ["green", "rgba(255,128,0,0.5)", "transparent"],
+    invalid_values: [
+      "#0",
+      "#00",
+      "#00000",
+      "#0000000",
+      "#000000000",
+      "000000",
+      "cc00ff",
+    ],
+  },
+  "outline-offset": {
+    domProp: "outlineOffset",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [
+      "0",
+      "0px",
+      "-0",
+      "calc(0px)",
+      "calc(3em + 2px - 2px - 3em)",
+      "calc(-0em)",
+    ],
+    other_values: [
+      "-3px",
+      "1em",
+      "calc(3em)",
+      "calc(7pt + 3 * 2em)",
+      "calc(-3px)",
+    ],
+    invalid_values: ["5%"],
+  },
+  "outline-style": {
+    domProp: "outlineStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_cue: true,
+    // XXX Should 'hidden' be the same as initial?
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed",
+      "dotted",
+      "double",
+      "outset",
+      "inset",
+      "groove",
+      "ridge",
+      "auto",
+    ],
+    invalid_values: [],
+  },
+  "outline-width": {
+    domProp: "outlineWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_cue: true,
+    prerequisites: { "outline-style": "solid" },
+    initial_values: ["medium", "3px", "calc(4px - 1px)"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0px)",
+      "calc(0px)",
+      "calc(5em)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 5em)",
+    ],
+    invalid_values: ["5%", "5"],
+  },
+  overflow: {
+    domProp: "overflow",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    prerequisites: { display: "block", contain: "none" },
+    subproperties: ["overflow-x", "overflow-y"],
+    initial_values: ["visible"],
+    other_values: [
+      "auto",
+      "scroll",
+      "hidden",
+      "clip",
+      "auto auto",
+      "auto scroll",
+      "hidden scroll",
+      "auto hidden",
+      "clip clip",
+    ],
+    invalid_values: [
+      "clip -moz-scrollbars-none",
+      "-moz-scrollbars-none",
+      "-moz-scrollbars-horizontal",
+      "-moz-scrollbars-vertical",
+    ],
+  },
+  "overflow-x": {
+    domProp: "overflowX",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    prerequisites: {
+      display: "block",
+      "overflow-y": "visible",
+      contain: "none",
+    },
+    initial_values: ["visible"],
+    other_values: ["auto", "scroll", "hidden", "clip"],
+    invalid_values: [],
+  },
+  "overflow-y": {
+    domProp: "overflowY",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    prerequisites: {
+      display: "block",
+      "overflow-x": "visible",
+      contain: "none",
+    },
+    initial_values: ["visible"],
+    other_values: ["auto", "scroll", "hidden", "clip"],
+    invalid_values: [],
+  },
+  "overflow-inline": {
+    domProp: "overflowInline",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    prerequisites: {
+      display: "block",
+      "overflow-block": "visible",
+      contain: "none",
+    },
+    initial_values: ["visible"],
+    other_values: ["auto", "scroll", "hidden", "clip"],
+    invalid_values: [],
+  },
+  "overflow-block": {
+    domProp: "overflowBlock",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    prerequisites: {
+      display: "block",
+      "overflow-inline": "visible",
+      contain: "none",
+    },
+    initial_values: ["visible"],
+    other_values: ["auto", "scroll", "hidden", "clip"],
+    invalid_values: [],
+  },
+  "overflow-clip-margin": {
+    domProp: "overflowClipMargin",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0px"],
+    other_values: ["1px", "2em", "calc(10px + 1vh)"],
+    invalid_values: ["-10px"],
+  },
+  padding: {
+    domProp: "padding",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+    ],
+    initial_values: [
+      "0",
+      "0px 0 0em",
+      "0% 0px 0em 0pt",
+      "calc(0px) calc(0em) calc(-2px) calc(-1%)",
+    ],
+    other_values: ["3px 0", "2em 4px 2pt", "1em 2em 3px 4px"],
+    invalid_values: ["1px calc(nonsense)", "1px red", "-1px"],
+    unbalanced_values: ["1px calc("],
+    quirks_values: { 5: "5px", "3px 6px 2 5px": "3px 6px 2px 5px" },
+  },
+  "padding-block": {
+    domProp: "paddingBlock",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["padding-block-start", "padding-block-end"],
+    initial_values: ["0", "0px 0em"],
+    other_values: ["3px 0", "2% 4px", "1em", "calc(1px) calc(-1%)"],
+    invalid_values: ["1px calc(nonsense)", "1px red", "-1px", "auto", "none"],
+    unbalanced_values: ["1px calc("],
+  },
+  "padding-inline": {
+    domProp: "paddingInline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["padding-inline-start", "padding-inline-end"],
+    initial_values: ["0", "0px 0em"],
+    other_values: ["3px 0", "2% 4px", "1em", "calc(1px) calc(-1%)"],
+    invalid_values: ["1px calc(nonsense)", "1px red", "-1px", "auto", "none"],
+    unbalanced_values: ["1px calc("],
+  },
+  "padding-bottom": {
+    domProp: "paddingBottom",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    initial_values: [
+      "0",
+      "0px",
+      "0%",
+      "calc(0pt)",
+      "calc(0% + 0px)",
+      "calc(-3px)",
+      "calc(-1%)",
+    ],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "padding-left": {
+    domProp: "paddingLeft",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    initial_values: [
+      "0",
+      "0px",
+      "0%",
+      "calc(0pt)",
+      "calc(0% + 0px)",
+      "calc(-3px)",
+      "calc(-1%)",
+    ],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "padding-right": {
+    domProp: "paddingRight",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    initial_values: [
+      "0",
+      "0px",
+      "0%",
+      "calc(0pt)",
+      "calc(0% + 0px)",
+      "calc(-3px)",
+      "calc(-1%)",
+    ],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "padding-top": {
+    domProp: "paddingTop",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    initial_values: [
+      "0",
+      "0px",
+      "0%",
+      "calc(0pt)",
+      "calc(0% + 0px)",
+      "calc(-3px)",
+      "calc(-1%)",
+    ],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "page-break-after": {
+    domProp: "pageBreakAfter",
+    inherited: false,
+    type: CSS_TYPE_LEGACY_SHORTHAND,
+    alias_for: "break-after",
+    subproperties: ["break-after"],
+    initial_values: ["auto"],
+    other_values: ["always", "avoid", "left", "right"],
+    legacy_mapping: {
+      always: "page",
+    },
+    invalid_values: ["page", "column"],
+  },
+  "page-break-before": {
+    domProp: "pageBreakBefore",
+    inherited: false,
+    type: CSS_TYPE_LEGACY_SHORTHAND,
+    alias_for: "break-before",
+    subproperties: ["break-before"],
+    initial_values: ["auto"],
+    other_values: ["always", "avoid", "left", "right"],
+    legacy_mapping: {
+      always: "page",
+    },
+    invalid_values: ["page", "column"],
+  },
+  "break-after": {
+    domProp: "breakAfter",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["always", "page", "avoid", "left", "right"],
+    invalid_values: [],
+  },
+  "break-before": {
+    domProp: "breakBefore",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["always", "page", "avoid", "left", "right"],
+    invalid_values: [],
+  },
+  "break-inside": {
+    domProp: "breakInside",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["avoid", "avoid-page", "avoid-column"],
+    invalid_values: ["left", "right", "always"],
+  },
+  "page-break-inside": {
+    domProp: "pageBreakInside",
+    inherited: false,
+    type: CSS_TYPE_LEGACY_SHORTHAND,
+    alias_for: "break-inside",
+    subproperties: ["break-inside"],
+    initial_values: ["auto"],
+    other_values: ["avoid"],
+    invalid_values: ["avoid-page", "avoid-column"],
+  },
+  "paint-order": {
+    domProp: "paintOrder",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: [
+      "fill",
+      "fill stroke",
+      "fill stroke markers",
+      "stroke markers fill",
+    ],
+    invalid_values: ["fill stroke markers fill", "fill normal"],
+  },
+  "pointer-events": {
+    domProp: "pointerEvents",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    initial_values: ["auto"],
+    other_values: [
+      "visiblePainted",
+      "visibleFill",
+      "visibleStroke",
+      "visible",
+      "painted",
+      "fill",
+      "stroke",
+      "all",
+      "none",
+    ],
+    invalid_values: [],
+  },
+  position: {
+    domProp: "position",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["static"],
+    other_values: ["relative", "absolute", "fixed", "sticky"],
+    invalid_values: [],
+  },
+  quotes: {
+    domProp: "quotes",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "none",
+      "'\"' '\"'",
+      "'' ''",
+      '"\u201C" "\u201D" "\u2018" "\u2019"',
+      '"\\201C" "\\201D" "\\2018" "\\2019"',
+    ],
+    invalid_values: ["'\"'", '"" "" ""'],
+  },
+  right: {
+    domProp: "right",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: ["auto"],
+    other_values: [
+      "32px",
+      "-3em",
+      "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "ruby-align": {
+    domProp: "rubyAlign",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["space-around"],
+    other_values: ["start", "center", "space-between"],
+    invalid_values: ["end", "1", "10px", "50%", "start center"],
+  },
+  "ruby-position": {
+    domProp: "rubyPosition",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_cue: true,
+    initial_values: ["alternate", "alternate over", "over alternate"],
+    other_values: ["over", "under", "alternate under", "under alternate"],
+    invalid_values: [
+      "left",
+      "right",
+      "auto",
+      "none",
+      "not_a_position",
+      "over left",
+      "right under",
+      "over under",
+      "alternate alternate",
+      "0",
+      "100px",
+      "50%",
+    ],
+  },
+  "scroll-behavior": {
+    domProp: "scrollBehavior",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["smooth"],
+    invalid_values: ["none", "1px"],
+  },
+  "scroll-snap-stop": {
+    domProp: "scrollSnapStop",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: ["always"],
+    invalid_values: ["auto", "none", "1px"],
+  },
+  "scroll-snap-type": {
+    domProp: "scrollSnapType",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "both mandatory",
+      "y mandatory",
+      "inline proximity",
+      "both",
+      "x",
+      "y",
+      "block",
+      "inline",
+    ],
+    invalid_values: [
+      "auto",
+      "1px",
+      "x y",
+      "block mandatory inline",
+      "mandatory",
+      "proximity",
+      "mandatory inline",
+      "proximity both",
+      "mandatory x",
+      "proximity y",
+      "mandatory block",
+      "proximity mandatory",
+    ],
+  },
+  "scroll-snap-align": {
+    domProp: "scrollSnapAlign",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "start",
+      "end",
+      "center",
+      "start none",
+      "center end",
+      "start start",
+    ],
+    invalid_values: ["auto", "start invalid", "start end center"],
+  },
+  "scroll-margin": {
+    domProp: "scrollMargin",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "scroll-margin-top",
+      "scroll-margin-right",
+      "scroll-margin-bottom",
+      "scroll-margin-left",
+    ],
+    initial_values: ["0"],
+    other_values: [
+      "-10px",
+      "calc(2em + 3ex)",
+      "1px 2px",
+      "1px 2px 3px",
+      "1px 2px 3px 4px",
+    ],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px 3px 4px 5px"],
+  },
+  "scroll-margin-top": {
+    domProp: "scrollMarginTop",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0"],
+    other_values: ["-10px", "calc(2em + 3ex)"],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px"],
+  },
+  "scroll-margin-right": {
+    domProp: "scrollMarginRight",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0"],
+    other_values: ["-10px", "calc(2em + 3ex)"],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px"],
+  },
+  "scroll-margin-bottom": {
+    domProp: "scrollMarginBottom",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0"],
+    other_values: ["-10px", "calc(2em + 3ex)"],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px"],
+  },
+  "scroll-margin-left": {
+    domProp: "scrollMarginLeft",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0"],
+    other_values: ["-10px", "calc(2em + 3ex)"],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px"],
+  },
+  "scroll-margin-inline": {
+    domProp: "scrollMarginInline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["scroll-margin-inline-start", "scroll-margin-inline-end"],
+    initial_values: ["0"],
+    other_values: ["-10px", "calc(2em + 3ex)", "1px 2px"],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px 3px"],
+  },
+  "scroll-margin-inline-start": {
+    domProp: "scrollMarginInlineStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    initial_values: ["0"],
+    other_values: ["-10px", "calc(2em + 3ex)"],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px"],
+  },
+  "scroll-margin-inline-end": {
+    domProp: "scrollMarginInlineEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    initial_values: ["0"],
+    other_values: ["-10px", "calc(2em + 3ex)"],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px"],
+  },
+  "scroll-margin-block": {
+    domProp: "scrollMarginBlock",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["scroll-margin-block-start", "scroll-margin-block-end"],
+    initial_values: ["0"],
+    other_values: ["-10px", "calc(2em + 3ex)", "1px 2px"],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px 3px"],
+  },
+  "scroll-margin-block-start": {
+    domProp: "scrollMarginBlockStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    initial_values: ["0"],
+    other_values: ["-10px", "calc(2em + 3ex)"],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px"],
+  },
+  "scroll-margin-block-end": {
+    domProp: "scrollMarginBlockEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    initial_values: ["0"],
+    other_values: ["-10px", "calc(2em + 3ex)"],
+    invalid_values: ["auto", "20%", "-30%", "1px 2px"],
+  },
+  "scroll-padding": {
+    domProp: "scrollPadding",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "scroll-padding-top",
+      "scroll-padding-right",
+      "scroll-padding-bottom",
+      "scroll-padding-left",
+    ],
+    initial_values: ["auto"],
+    other_values: [
+      "10px",
+      "0",
+      "20%",
+      "calc(2em + 3ex)",
+      "1px 2px",
+      "1px 2px 3%",
+      "1px 2px 3% 4px",
+      "1px auto",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "scroll-padding-top": {
+    domProp: "scrollPaddingTop",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "0",
+      "10px",
+      "20%",
+      "calc(2em + 3ex)",
+      "calc(50% + 60px)",
+      "calc(-50px)",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "scroll-padding-right": {
+    domProp: "scrollPaddingRight",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "0",
+      "10px",
+      "20%",
+      "calc(2em + 3ex)",
+      "calc(50% + 60px)",
+      "calc(-50px)",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "scroll-padding-bottom": {
+    domProp: "scrollPaddingBottom",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "0",
+      "10px",
+      "20%",
+      "calc(2em + 3ex)",
+      "calc(50% + 60px)",
+      "calc(-50px)",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "scroll-padding-left": {
+    domProp: "scrollPaddingLeft",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "0",
+      "10px",
+      "20%",
+      "calc(2em + 3ex)",
+      "calc(50% + 60px)",
+      "calc(-50px)",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "scroll-padding-inline": {
+    domProp: "scrollPaddingInline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["scroll-padding-inline-start", "scroll-padding-inline-end"],
+    initial_values: ["auto", "auto auto"],
+    other_values: [
+      "10px",
+      "0",
+      "20%",
+      "calc(2em + 3ex)",
+      "1px 2px",
+      "1px auto",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "scroll-padding-inline-start": {
+    domProp: "scrollPaddingInlineStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    initial_values: ["auto"],
+    other_values: [
+      "0",
+      "10px",
+      "20%",
+      "calc(2em + 3ex)",
+      "calc(50% + 60px)",
+      "calc(-50px)",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "scroll-padding-inline-end": {
+    domProp: "scrollPaddingInlineEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    initial_values: ["auto"],
+    other_values: [
+      "0",
+      "10px",
+      "20%",
+      "calc(2em + 3ex)",
+      "calc(50% + 60px)",
+      "calc(-50px)",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "scroll-padding-block": {
+    domProp: "scrollPaddingBlock",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["scroll-padding-block-start", "scroll-padding-block-end"],
+    initial_values: ["auto", "auto auto"],
+    other_values: [
+      "10px",
+      "0",
+      "20%",
+      "calc(2em + 3ex)",
+      "1px 2px",
+      "1px auto",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "scroll-padding-block-start": {
+    domProp: "scrollPaddingBlockStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    initial_values: ["auto"],
+    other_values: [
+      "0",
+      "10px",
+      "20%",
+      "calc(2em + 3ex)",
+      "calc(50% + 60px)",
+      "calc(-50px)",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "scroll-padding-block-end": {
+    domProp: "scrollPaddingBlockEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    initial_values: ["auto"],
+    other_values: [
+      "0",
+      "10px",
+      "20%",
+      "calc(2em + 3ex)",
+      "calc(50% + 60px)",
+      "calc(-50px)",
+    ],
+    invalid_values: ["20", "-20px"],
+  },
+  "table-layout": {
+    domProp: "tableLayout",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["fixed"],
+    invalid_values: [],
+  },
+  "text-align": {
+    domProp: "textAlign",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_placeholder: true,
+    // don't know whether left and right are same as start
+    initial_values: ["start"],
+    other_values: ["center", "justify", "end", "match-parent"],
+    invalid_values: [
+      "true",
+      "true true",
+      "char",
+      "-moz-center-or-inherit",
+      "true left",
+      "unsafe left",
+    ],
+  },
+  "text-align-last": {
+    domProp: "textAlignLast",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["center", "justify", "start", "end", "left", "right"],
+    invalid_values: [],
+  },
+  "text-combine-upright": {
+    domProp: "textCombineUpright",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_cue: true,
+    applies_to_marker: true,
+    initial_values: ["none"],
+    other_values: ["all"],
+    invalid_values: [
+      "auto",
+      "all 2",
+      "none all",
+      "digits -3",
+      "digits 0",
+      "digits 12",
+      "none 3",
+      "digits 3.1415",
+      "digits3",
+      "digits 1",
+      "digits 3 all",
+      "digits foo",
+      "digits all",
+      "digits 3.0",
+    ],
+  },
+  "text-decoration": {
+    domProp: "textDecoration",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    subproperties: [
+      "text-decoration-color",
+      "text-decoration-line",
+      "text-decoration-style",
+      "text-decoration-thickness",
+    ],
+    initial_values: ["none"],
+    other_values: [
+      "underline",
+      "overline",
+      "line-through",
+      "blink",
+      "blink line-through underline",
+      "underline overline line-through blink",
+      "underline red solid",
+      "underline #ff0000",
+      "solid underline",
+      "red underline",
+      "#ff0000 underline",
+      "dotted underline",
+      "solid underline 50px",
+      "underline 50px blue",
+      "50px dotted line-through purple",
+      "overline 2em",
+      "underline from-font",
+      "red from-font overline",
+      "5% underline blue",
+      "dotted line-through 25%",
+    ],
+    invalid_values: [
+      "none none",
+      "underline none",
+      "none underline",
+      "blink none",
+      "none blink",
+      "line-through blink line-through",
+      "underline overline line-through blink none",
+      "underline overline line-throuh blink blink",
+      "rgb(0, rubbish, 0) underline",
+      "from font blue underline",
+    ],
+  },
+  "text-decoration-color": {
+    domProp: "textDecorationColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    prerequisites: { color: "black" },
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5)", "transparent"],
+    invalid_values: [
+      "#0",
+      "#00",
+      "#00000",
+      "#0000000",
+      "#000000000",
+      "000000",
+      "ff00ff",
+    ],
+  },
+  "text-decoration-line": {
+    domProp: "textDecorationLine",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["none"],
+    other_values: [
+      "underline",
+      "overline",
+      "line-through",
+      "blink",
+      "blink line-through underline",
+      "underline overline line-through blink",
+    ],
+    invalid_values: [
+      "none none",
+      "underline none",
+      "none underline",
+      "line-through blink line-through",
+      "underline overline line-through blink none",
+      "underline overline line-throuh blink blink",
+    ],
+  },
+  "text-decoration-style": {
+    domProp: "textDecorationStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["solid"],
+    other_values: ["double", "dotted", "dashed", "wavy", "-moz-none"],
+    invalid_values: [
+      "none",
+      "groove",
+      "ridge",
+      "inset",
+      "outset",
+      "solid dashed",
+      "wave",
+    ],
+  },
+  "text-decoration-thickness": {
+    domProp: "textDecorationThickness",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["auto"],
+    other_values: [
+      "from-font",
+      "0",
+      "-14px",
+      "25px",
+      "100em",
+      "-45em",
+      "43%",
+      "-10%",
+    ],
+    invalid_values: ["13", "-25", "rubbish", ",./!@#$", "from font"],
+  },
+  "text-decoration-skip-ink": {
+    domProp: "textDecorationSkipInk",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    initial_values: ["auto"],
+    other_values: ["none", "all"],
+    invalid_values: [
+      "13",
+      "15%",
+      "-1",
+      "0",
+      "otto",
+      "trash",
+      "non",
+      "nada",
+      "!@#$%^",
+      "none auto",
+      "auto none",
+    ],
+  },
+  "text-underline-offset": {
+    domProp: "textUnderlineOffset",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    initial_values: ["auto"],
+    other_values: ["0", "-14px", "25px", "100em", "-45em", "43%", "-10%"],
+    invalid_values: [
+      "13",
+      "-25",
+      "rubbish",
+      ",./!@#$",
+      "from-font",
+      "from font",
+    ],
+  },
+  "text-underline-position": {
+    domProp: "textUnderlinePosition",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    initial_values: ["auto"],
+    other_values: [
+      "under",
+      "left",
+      "right",
+      "left under",
+      "under left",
+      "right under",
+      "under right",
+      "from-font",
+      "from-font left",
+      "from-font right",
+      "left from-font",
+      "right from-font",
+    ],
+    invalid_values: [
+      "none",
+      "auto from-font",
+      "auto under",
+      "under from-font",
+      "left right",
+      "right auto",
+      "0",
+      "1px",
+      "10%",
+      "from font",
+    ],
+  },
+  "text-emphasis": {
+    domProp: "textEmphasis",
+    inherited: true,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    prerequisites: { color: "black" },
+    subproperties: ["text-emphasis-style", "text-emphasis-color"],
+    initial_values: [
+      "none currentColor",
+      "currentColor none",
+      "none",
+      "currentColor",
+      "none black",
+    ],
+    other_values: [
+      "filled dot black",
+      "#f00 circle open",
+      "sesame filled rgba(0,0,255,0.5)",
+      "red",
+      "green none",
+      "currentColor filled",
+      "currentColor open",
+    ],
+    invalid_values: [
+      "filled black dot",
+      "filled filled red",
+      "open open circle #000",
+      "circle dot #f00",
+      "rubbish",
+    ],
+  },
+  "text-emphasis-color": {
+    domProp: "textEmphasisColor",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { color: "black" },
+    initial_values: ["currentColor", "black", "rgb(0,0,0)"],
+    other_values: ["red", "rgba(255,255,255,0.5)", "transparent"],
+    invalid_values: [
+      "#0",
+      "#00",
+      "#00000",
+      "#0000000",
+      "#000000000",
+      "000000",
+      "ff00ff",
+      "rgb(255,xxx,255)",
+    ],
+  },
+  "text-emphasis-position": {
+    domProp: "textEmphasisPosition",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["over right", "right over", "over"],
+    other_values: [
+      "over left",
+      "left over",
+      "under left",
+      "left under",
+      "under right",
+      "right under",
+      "under",
+    ],
+    invalid_values: [
+      "over over",
+      "left left",
+      "over right left",
+      "rubbish left",
+      "over rubbish",
+    ],
+  },
+  "text-emphasis-style": {
+    domProp: "textEmphasisStyle",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "filled",
+      "open",
+      "dot",
+      "circle",
+      "double-circle",
+      "triangle",
+      "sesame",
+      "'#'",
+      "filled dot",
+      "filled circle",
+      "filled double-circle",
+      "filled triangle",
+      "filled sesame",
+      "dot filled",
+      "circle filled",
+      "double-circle filled",
+      "triangle filled",
+      "sesame filled",
+      "dot open",
+      "circle open",
+      "double-circle open",
+      "triangle open",
+      "sesame open",
+    ],
+    invalid_values: [
+      "rubbish",
+      "dot rubbish",
+      "rubbish dot",
+      "open rubbish",
+      "rubbish open",
+      "open filled",
+      "dot circle",
+      "open '#'",
+      "'#' filled",
+      "dot '#'",
+      "'#' circle",
+      "1",
+      "1 open",
+      "open 1",
+    ],
+  },
+  "text-indent": {
+    domProp: "textIndent",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0", "calc(3em - 5em + 2px + 2em - 2px)"],
+    other_values: [
+      "2em",
+      "5%",
+      "-10px",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "text-overflow": {
+    domProp: "textOverflow",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_placeholder: true,
+    initial_values: ["clip"],
+    other_values: [
+      "ellipsis",
+      '""',
+      "''",
+      '"hello"',
+      "clip clip",
+      "ellipsis ellipsis",
+      "clip ellipsis",
+      'clip ""',
+      '"hello" ""',
+      '"" ellipsis',
+    ],
+    invalid_values: [
+      "none",
+      "auto",
+      '"hello" inherit',
+      'inherit "hello"',
+      "clip initial",
+      "initial clip",
+      "initial inherit",
+      "inherit initial",
+      "inherit none",
+      '"hello" unset',
+      'unset "hello"',
+      "clip unset",
+      "unset clip",
+      "unset inherit",
+      "unset none",
+      "initial unset",
+    ],
+  },
+  "text-shadow": {
+    domProp: "textShadow",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    prerequisites: { color: "blue" },
+    initial_values: ["none"],
+    other_values: [
+      "2px 2px",
+      "2px 2px 1px",
+      "2px 2px green",
+      "2px 2px 1px green",
+      "green 2px 2px",
+      "green 2px 2px 1px",
+      "green 2px 2px, blue 1px 3px 4px",
+      "currentColor 3px 3px",
+      "blue 2px 2px, currentColor 1px 2px",
+      /* calc() values */
+      "2px 2px calc(-5px)" /* clamped */,
+      "calc(3em - 2px) 2px green",
+      "green calc(3em - 2px) 2px",
+      "2px calc(2px + 0.2em)",
+      "blue 2px calc(2px + 0.2em)",
+      "2px calc(2px + 0.2em) blue",
+      "calc(-2px) calc(-2px)",
+      "-2px -2px",
+      "calc(2px) calc(2px)",
+      "calc(2px) calc(2px) calc(2px)",
+    ],
+    invalid_values: [
+      "3% 3%",
+      "2px 2px -5px",
+      "2px 2px 2px 2px",
+      "2px 2px, none",
+      "none, 2px 2px",
+      "inherit, 2px 2px",
+      "2px 2px, inherit",
+      "2 2px",
+      "2px 2",
+      "2px 2px 2",
+      "2px 2px 2px 2",
+      "calc(2px) calc(2px) calc(2px) calc(2px)",
+      "3px 3px calc(3px + rubbish)",
+      "unset, 2px 2px",
+      "2px 2px, unset",
+    ],
+  },
+  "text-transform": {
+    domProp: "textTransform",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_marker: true,
+    initial_values: ["none"],
+    other_values: [
+      "capitalize",
+      "uppercase",
+      "lowercase",
+      "full-width",
+      "full-size-kana",
+      "uppercase full-width",
+      "full-size-kana capitalize",
+      "full-width lowercase full-size-kana",
+    ],
+    invalid_values: [
+      "none none",
+      "none uppercase",
+      "full-width none",
+      "uppercase lowercase",
+      "full-width capitalize full-width",
+      "uppercase full-width lowercase",
+    ],
+  },
+  top: {
+    domProp: "top",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: ["auto"],
+    other_values: [
+      "32px",
+      "-3em",
+      "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  transition: {
+    domProp: "transition",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    applies_to_marker: true,
+    subproperties: [
+      "transition-property",
+      "transition-duration",
+      "transition-timing-function",
+      "transition-delay",
+    ],
+    initial_values: ["all 0s ease 0s", "all", "0s", "0s 0s", "ease"],
+    other_values: [
+      "all 0s cubic-bezier(0.25, 0.1, 0.25, 1.0) 0s",
+      "width 1s linear 2s",
+      "width 1s 2s linear",
+      "width linear 1s 2s",
+      "linear width 1s 2s",
+      "linear 1s width 2s",
+      "linear 1s 2s width",
+      "1s width linear 2s",
+      "1s width 2s linear",
+      "1s 2s width linear",
+      "1s linear width 2s",
+      "1s linear 2s width",
+      "1s 2s linear width",
+      "width linear 1s",
+      "width 1s linear",
+      "linear width 1s",
+      "linear 1s width",
+      "1s width linear",
+      "1s linear width",
+      "1s 2s width",
+      "1s width 2s",
+      "width 1s 2s",
+      "1s 2s linear",
+      "1s linear 2s",
+      "linear 1s 2s",
+      "width 1s",
+      "1s width",
+      "linear 1s",
+      "1s linear",
+      "1s 2s",
+      "2s 1s",
+      "width",
+      "linear",
+      "1s",
+      "height",
+      "2s",
+      "ease-in-out",
+      "2s ease-in",
+      "opacity linear",
+      "ease-out 2s",
+      "2s color, 1s width, 500ms height linear, 1s opacity 4s cubic-bezier(0.0, 0.1, 1.0, 1.0)",
+      "1s \\32width linear 2s",
+      "1s -width linear 2s",
+      "1s -\\32width linear 2s",
+      "1s \\32 0width linear 2s",
+      "1s -\\32 0width linear 2s",
+      "1s \\2width linear 2s",
+      "1s -\\2width linear 2s",
+      "2s, 1s width",
+      "1s width, 2s",
+      "2s all, 1s width",
+      "1s width, 2s all",
+      "2s all, 1s width",
+      "2s width, 1s all",
+      "3s --my-color",
+      "none",
+      "none 2s linear 2s",
+    ],
+    invalid_values: [
+      "1s width, 2s none",
+      "2s none, 1s width",
+      "2s inherit",
+      "inherit 2s",
+      "2s width, 1s inherit",
+      "2s inherit, 1s width",
+      "2s initial",
+      "1s width,,2s color",
+      "1s width, ,2s color",
+      "bounce 1s cubic-bezier(0, rubbish) 2s",
+      "bounce 1s steps(rubbish) 2s",
+      "2s unset",
+    ],
+  },
+  "transition-delay": {
+    domProp: "transitionDelay",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["0s", "0ms"],
+    other_values: ["1s", "250ms", "-100ms", "-1s", "1s, 250ms, 2.3s"],
+    invalid_values: ["0", "0px"],
+  },
+  "transition-duration": {
+    domProp: "transitionDuration",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["0s", "0ms"],
+    other_values: ["1s", "250ms", "1s, 250ms, 2.3s"],
+    invalid_values: ["0", "0px", "-1ms", "-2s"],
+  },
+  "transition-property": {
+    domProp: "transitionProperty",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["all"],
+    other_values: [
+      "none",
+      "left",
+      "top",
+      "color",
+      "width, height, opacity",
+      "foobar",
+      "auto",
+      "\\32width",
+      "-width",
+      "-\\32width",
+      "\\32 0width",
+      "-\\32 0width",
+      "\\2width",
+      "-\\2width",
+      "all, all",
+      "all, color",
+      "color, all",
+      "--my-color",
+    ],
+    invalid_values: [
+      "none, none",
+      "color, none",
+      "none, color",
+      "inherit, color",
+      "color, inherit",
+      "initial, color",
+      "color, initial",
+      "none, color",
+      "color, none",
+      "unset, color",
+      "color, unset",
+    ],
+  },
+  "transition-timing-function": {
+    domProp: "transitionTimingFunction",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["ease"],
+    other_values: [
+      "cubic-bezier(0.25, 0.1, 0.25, 1.0)",
+      "linear",
+      "ease-in",
+      "ease-out",
+      "ease-in-out",
+      "linear, ease-in, cubic-bezier(0.1, 0.2, 0.8, 0.9)",
+      "cubic-bezier(0.5, 0.5, 0.5, 0.5)",
+      "cubic-bezier(0.25, 1.5, 0.75, -0.5)",
+      "step-start",
+      "step-end",
+      "steps(1)",
+      "steps(2, start)",
+      "steps(386)",
+      "steps(3, end)",
+    ],
+    invalid_values: [
+      "none",
+      "auto",
+      "cubic-bezier(0.25, 0.1, 0.25)",
+      "cubic-bezier(0.25, 0.1, 0.25, 0.25, 1.0)",
+      "cubic-bezier(-0.5, 0.5, 0.5, 0.5)",
+      "cubic-bezier(1.5, 0.5, 0.5, 0.5)",
+      "cubic-bezier(0.5, 0.5, -0.5, 0.5)",
+      "cubic-bezier(0.5, 0.5, 1.5, 0.5)",
+      "steps(2, step-end)",
+      "steps(0)",
+      "steps(-2)",
+      "steps(0, step-end, 1)",
+    ],
+  },
+  "unicode-bidi": {
+    domProp: "unicodeBidi",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["normal"],
+    other_values: [
+      "embed",
+      "bidi-override",
+      "isolate",
+      "plaintext",
+      "isolate-override",
+    ],
+    invalid_values: [
+      "auto",
+      "none",
+      "-moz-isolate",
+      "-moz-plaintext",
+      "-moz-isolate-override",
+    ],
+  },
+  "vertical-align": {
+    domProp: "verticalAlign",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    initial_values: ["baseline"],
+    other_values: [
+      "sub",
+      "super",
+      "top",
+      "text-top",
+      "middle",
+      "bottom",
+      "text-bottom",
+      "-moz-middle-with-baseline",
+      "15%",
+      "3px",
+      "0.2em",
+      "-5px",
+      "-3%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "baseline-source": {
+    domProp: "baselineSource",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    initial_values: ["auto"],
+    other_values: ["first", "last"],
+    invalid_values: [],
+  },
+  visibility: {
+    domProp: "visibility",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_cue: true,
+    initial_values: ["visible"],
+    other_values: ["hidden", "collapse"],
+    invalid_values: [],
+  },
+  "white-space": {
+    domProp: "whiteSpace",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    applies_to_marker: true,
+    initial_values: ["normal"],
+    other_values: [
+      "pre",
+      "nowrap",
+      "pre-wrap",
+      "pre-line",
+      "-moz-pre-space",
+      "break-spaces",
+    ],
+    invalid_values: [],
+  },
+  width: {
+    domProp: "width",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: {
+      // computed value tests for width test more with display:block
+      display: "block",
+      // add some margin to avoid the initial "auto" value getting
+      // resolved to the same length as the parent element.
+      "margin-left": "5px",
+    },
+    initial_values: [" auto"],
+    /* XXX these have prerequisites */
+    other_values: [
+      "15px",
+      "3em",
+      "15%",
+      // these three keywords compute to the initial value only when the
+      // writing mode is vertical, and we're testing with a horizontal
+      // writing mode
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      // these two keywords are the aliases of above first two.
+      "-moz-max-content",
+      "-moz-min-content",
+      // whether -moz-available computes to the initial value depends on
+      // the container size, and for the container size we're testing
+      // with, it does
+      // "-moz-available",
+      "3e1px",
+      "3e+1px",
+      "3e0px",
+      "3e+0px",
+      "3e-0px",
+      "3e-1px",
+      "3.2e1px",
+      "3.2e+1px",
+      "3.2e0px",
+      "3.2e+0px",
+      "3.2e-0px",
+      "3.2e-1px",
+      "3e1%",
+      "3e+1%",
+      "3e0%",
+      "3e+0%",
+      "3e-0%",
+      "3e-1%",
+      "3.2e1%",
+      "3.2e+1%",
+      "3.2e0%",
+      "3.2e+0%",
+      "3.2e-0%",
+      "3.2e-1%",
+      /* valid calc() values */
+      "calc(-2px)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(50% + 2px)",
+      "calc( 50% + 2px)",
+      "calc(50% + 2px )",
+      "calc( 50% + 2px )",
+      "calc(50% - -2px)",
+      "calc(2px - -50%)",
+      "calc(3*25px)",
+      "calc(3 *25px)",
+      "calc(3 * 25px)",
+      "calc(3* 25px)",
+      "calc(25px*3)",
+      "calc(25px *3)",
+      "calc(25px* 3)",
+      "calc(25px * 3)",
+      "calc(3*25px + 50%)",
+      "calc(50% - 3em + 2px)",
+      "calc(50% - (3em + 2px))",
+      "calc((50% - 3em) + 2px)",
+      "calc(2em)",
+      "calc(50%)",
+      "calc(50px/2)",
+      "calc(50px/(2 - 1))",
+      "calc(min(5px))",
+      "calc(min(5px,2em))",
+      "calc(max(5px))",
+      "calc(max(5px,2em))",
+      "min(5px)",
+      "min(5px,2em)",
+      "max(5px)",
+      "max(5px,2em)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: [
+      "none",
+      "-2px",
+      "content" /* (valid for 'flex-basis' but not 'width') */,
+      /* invalid calc() values */
+      "calc(50%+ 2px)",
+      "calc(50% +2px)",
+      "calc(50%+2px)",
+      "-moz-min()",
+      "calc(min())",
+      "-moz-max()",
+      "calc(max())",
+      "-moz-min(5px)",
+      "-moz-max(5px)",
+      "-moz-min(5px,2em)",
+      "-moz-max(5px,2em)",
+      /* If we ever support division by values, which is
+       * complicated for the reasons described in
+       * http://lists.w3.org/Archives/Public/www-style/2010Jan/0007.html
+       * , we should support all 4 of these as described in
+       * http://lists.w3.org/Archives/Public/www-style/2009Dec/0296.html
+       */
+      "calc((3em / 100%) * 3em)",
+      "calc(3em / 100% * 3em)",
+      "calc(3em * (3em / 100%))",
+      "calc(3em * 3em / 100%)",
+    ],
+    quirks_values: { 5: "5px" },
+  },
+  "will-change": {
+    domProp: "willChange",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "scroll-position",
+      "contents",
+      "transform",
+      "opacity",
+      "scroll-position, transform",
+      "transform, opacity",
+      "contents, transform",
+      "property-that-doesnt-exist-yet",
+    ],
+    invalid_values: [
+      "none",
+      "all",
+      "default",
+      "auto, scroll-position",
+      "scroll-position, auto",
+      "transform scroll-position",
+      ",",
+      "trailing,",
+      "will-change",
+      "transform, will-change",
+    ],
+  },
+  "word-break": {
+    domProp: "wordBreak",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: ["break-all", "keep-all"],
+    invalid_values: [],
+  },
+  "word-spacing": {
+    domProp: "wordSpacing",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    initial_values: ["normal", "0", "0px", "-0em", "calc(-0px)", "calc(0em)"],
+    other_values: [
+      "1em",
+      "2px",
+      "-3px",
+      "0%",
+      "50%",
+      "-120%",
+      "calc(1em)",
+      "calc(1em + 3px)",
+      "calc(15px / 2)",
+      "calc(15px/2)",
+      "calc(-2em)",
+      "calc(0% + 0px)",
+      "calc(-10%/2 - 1em)",
+    ],
+    invalid_values: [],
+    quirks_values: { 5: "5px" },
+  },
+  "overflow-wrap": {
+    domProp: "overflowWrap",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: ["break-word"],
+    invalid_values: [],
+  },
+  hyphens: {
+    domProp: "hyphens",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["manual"],
+    other_values: ["none", "auto"],
+    invalid_values: [],
+  },
+  "z-index": {
+    domProp: "zIndex",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    /* XXX requires position */
+    initial_values: ["auto"],
+    other_values: ["0", "3", "-7000", "12000"],
+    invalid_values: ["3.0", "17.5", "3e1"],
+  },
+  "clip-path": {
+    domProp: "clipPath",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "path(nonzero, 'M 10 10 h 100 v 100 h-100 v-100 z')",
+      "path(evenodd, 'M 10 10 h 100 v 100 h-100 v-100 z')",
+      "path('M10,30A20,20 0,0,1 50,30A20,20 0,0,1 90,30Q90,60 50,90Q10,60 10,30z')",
+      "url(#mypath)",
+      "url('404.svg#mypath')",
+      "url(#my-clip-path)",
+    ]
+      .concat(basicShapeSVGBoxValues)
+      .concat(basicShapeOtherValues),
+    invalid_values: [
+      "path(nonzero)",
+      "path(abs, 'M 10 10 L 10 10 z')",
+      "path(evenodd, '')",
+      "path('')",
+    ].concat(basicShapeInvalidValues),
+    unbalanced_values: basicShapeUnbalancedValues,
+  },
+  "clip-rule": {
+    domProp: "clipRule",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["nonzero"],
+    other_values: ["evenodd"],
+    invalid_values: [],
+  },
+  "color-interpolation": {
+    domProp: "colorInterpolation",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["sRGB"],
+    other_values: ["auto", "linearRGB"],
+    invalid_values: [],
+  },
+  "color-interpolation-filters": {
+    domProp: "colorInterpolationFilters",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["linearRGB"],
+    other_values: ["sRGB", "auto"],
+    invalid_values: [],
+  },
+  "dominant-baseline": {
+    domProp: "dominantBaseline",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "ideographic",
+      "alphabetic",
+      "hanging",
+      "mathematical",
+      "central",
+      "middle",
+      "text-after-edge",
+      "text-before-edge",
+    ],
+    invalid_values: [],
+  },
+  fill: {
+    domProp: "fill",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { color: "blue" },
+    initial_values: ["black", "#000", "#000000", "rgb(0,0,0)", "rgba(0,0,0,1)"],
+    other_values: [
+      "green",
+      "#fc3",
+      "url('#myserver')",
+      "url(foo.svg#myserver)",
+      'url("#myserver") green',
+      "none",
+      "currentColor",
+      "context-fill",
+      "context-stroke",
+    ],
+    invalid_values: ["000000", "ff00ff", "url('#myserver') rgb(0, rubbish, 0)"],
+  },
+  "fill-opacity": {
+    domProp: "fillOpacity",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["1", "2.8", "1.000", "300%"],
+    other_values: [
+      "0",
+      "0.3",
+      "-7.3",
+      "-100%",
+      "50%",
+      "context-fill-opacity",
+      "context-stroke-opacity",
+    ],
+    invalid_values: [],
+  },
+  "fill-rule": {
+    domProp: "fillRule",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["nonzero"],
+    other_values: ["evenodd"],
+    invalid_values: [],
+  },
+  filter: {
+    domProp: "filter",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      // SVG reference filters
+      "url(#my-filter)",
+      "url(#my-filter-1) url(#my-filter-2)",
+
+      // Filter functions
+      "opacity(50%) saturate(1.0)",
+      "invert(50%) sepia(0.1) brightness(90%)",
+
+      // Mixed SVG reference filters and filter functions
+      "grayscale(1) url(#my-filter-1)",
+      "url(#my-filter-1) brightness(50%) contrast(0.9)",
+
+      // Bad URLs
+      "url('badscheme:badurl')",
+      "blur(3px) url('badscheme:badurl') grayscale(50%)",
+
+      "blur()",
+      "blur(0)",
+      "blur(0px)",
+      "blur(0.5px)",
+      "blur(3px)",
+      "blur(100px)",
+      "blur(0.1em)",
+      "blur(calc(-1px))", // Parses and becomes blur(0px).
+      "blur(calc(0px))",
+      "blur(calc(5px))",
+      "blur(calc(2 * 5px))",
+
+      "brightness()",
+      "brightness(0)",
+      "brightness(50%)",
+      "brightness(1)",
+      "brightness(1.0)",
+      "brightness(2)",
+      "brightness(350%)",
+      "brightness(4.567)",
+
+      "contrast()",
+      "contrast(0)",
+      "contrast(50%)",
+      "contrast(1)",
+      "contrast(1.0)",
+      "contrast(2)",
+      "contrast(350%)",
+      "contrast(4.567)",
+
+      "drop-shadow(2px 2px)",
+      "drop-shadow(2px 2px 1px)",
+      "drop-shadow(2px 2px green)",
+      "drop-shadow(2px 2px 1px green)",
+      "drop-shadow(green 2px 2px)",
+      "drop-shadow(green 2px 2px 1px)",
+      "drop-shadow(currentColor 3px 3px)",
+      "drop-shadow(2px 2px calc(-5px))" /* clamped */,
+      "drop-shadow(calc(3em - 2px) 2px green)",
+      "drop-shadow(green calc(3em - 2px) 2px)",
+      "drop-shadow(2px calc(2px + 0.2em))",
+      "drop-shadow(blue 2px calc(2px + 0.2em))",
+      "drop-shadow(2px calc(2px + 0.2em) blue)",
+      "drop-shadow(calc(-2px) calc(-2px))",
+      "drop-shadow(-2px -2px)",
+      "drop-shadow(calc(2px) calc(2px))",
+      "drop-shadow(calc(2px) calc(2px) calc(2px))",
+
+      "grayscale()",
+      "grayscale(0)",
+      "grayscale(50%)",
+      "grayscale(1)",
+      "grayscale(1.0)",
+      "grayscale(2)",
+      "grayscale(350%)",
+      "grayscale(4.567)",
+
+      "hue-rotate()",
+      "hue-rotate(0)",
+      "hue-rotate(0deg)",
+      "hue-rotate(90deg)",
+      "hue-rotate(540deg)",
+      "hue-rotate(-90deg)",
+      "hue-rotate(10grad)",
+      "hue-rotate(1.6rad)",
+      "hue-rotate(-1.6rad)",
+      "hue-rotate(0.5turn)",
+      "hue-rotate(-2turn)",
+
+      "invert()",
+      "invert(0)",
+      "invert(50%)",
+      "invert(1)",
+      "invert(1.0)",
+      "invert(2)",
+      "invert(350%)",
+      "invert(4.567)",
+
+      "opacity()",
+      "opacity(0)",
+      "opacity(50%)",
+      "opacity(1)",
+      "opacity(1.0)",
+      "opacity(2)",
+      "opacity(350%)",
+      "opacity(4.567)",
+
+      "saturate()",
+      "saturate(0)",
+      "saturate(50%)",
+      "saturate(1)",
+      "saturate(1.0)",
+      "saturate(2)",
+      "saturate(350%)",
+      "saturate(4.567)",
+
+      "sepia()",
+      "sepia(0)",
+      "sepia(50%)",
+      "sepia(1)",
+      "sepia(1.0)",
+      "sepia(2)",
+      "sepia(350%)",
+      "sepia(4.567)",
+    ],
+    invalid_values: [
+      // none
+      "none none",
+      "url(#my-filter) none",
+      "none url(#my-filter)",
+      "blur(2px) none url(#my-filter)",
+
+      // Nested filters
+      "grayscale(invert(1.0))",
+
+      // Comma delimited filters
+      "url(#my-filter),",
+      "invert(50%), url(#my-filter), brightness(90%)",
+
+      // Test the following situations for each filter function:
+      // - Invalid number of arguments
+      // - Comma delimited arguments
+      // - Wrong argument type
+      // - Argument value out of range
+      "blur(3px 5px)",
+      "blur(3px,)",
+      "blur(3px, 5px)",
+      "blur(#my-filter)",
+      "blur(0.5)",
+      "blur(50%)",
+      "blur(calc(0))", // Unitless zero in calc is not a valid length.
+      "blur(calc(0.1))",
+      "blur(calc(10%))",
+      "blur(calc(20px - 5%))",
+      "blur(-3px)",
+
+      "brightness(0.5 0.5)",
+      "brightness(0.5,)",
+      "brightness(0.5, 0.5)",
+      "brightness(#my-filter)",
+      "brightness(10px)",
+      "brightness(-1)",
+
+      "contrast(0.5 0.5)",
+      "contrast(0.5,)",
+      "contrast(0.5, 0.5)",
+      "contrast(#my-filter)",
+      "contrast(10px)",
+      "contrast(-1)",
+
+      "drop-shadow()",
+      "drop-shadow(3% 3%)",
+      "drop-shadow(2px 2px -5px)",
+      "drop-shadow(2px 2px 2px 2px)",
+      "drop-shadow(2px 2px, none)",
+      "drop-shadow(none, 2px 2px)",
+      "drop-shadow(inherit, 2px 2px)",
+      "drop-shadow(2px 2px, inherit)",
+      "drop-shadow(2 2px)",
+      "drop-shadow(2px 2)",
+      "drop-shadow(2px 2px 2)",
+      "drop-shadow(2px 2px 2px 2)",
+      "drop-shadow(calc(2px) calc(2px) calc(2px) calc(2px))",
+      "drop-shadow(green 2px 2px, blue 1px 3px 4px)",
+      "drop-shadow(blue 2px 2px, currentColor 1px 2px)",
+      "drop-shadow(unset, 2px 2px)",
+      "drop-shadow(2px 2px, unset)",
+
+      "grayscale(0.5 0.5)",
+      "grayscale(0.5,)",
+      "grayscale(0.5, 0.5)",
+      "grayscale(#my-filter)",
+      "grayscale(10px)",
+      "grayscale(-1)",
+
+      "hue-rotate(0.5 0.5)",
+      "hue-rotate(0.5,)",
+      "hue-rotate(0.5, 0.5)",
+      "hue-rotate(#my-filter)",
+      "hue-rotate(10px)",
+      "hue-rotate(-1)",
+      "hue-rotate(45deg,)",
+
+      "invert(0.5 0.5)",
+      "invert(0.5,)",
+      "invert(0.5, 0.5)",
+      "invert(#my-filter)",
+      "invert(10px)",
+      "invert(-1)",
+
+      "opacity(0.5 0.5)",
+      "opacity(0.5,)",
+      "opacity(0.5, 0.5)",
+      "opacity(#my-filter)",
+      "opacity(10px)",
+      "opacity(-1)",
+
+      "saturate(0.5 0.5)",
+      "saturate(0.5,)",
+      "saturate(0.5, 0.5)",
+      "saturate(#my-filter)",
+      "saturate(10px)",
+      "saturate(-1)",
+
+      "sepia(0.5 0.5)",
+      "sepia(0.5,)",
+      "sepia(0.5, 0.5)",
+      "sepia(#my-filter)",
+      "sepia(10px)",
+      "sepia(-1)",
+    ],
+  },
+  "flood-color": {
+    domProp: "floodColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { color: "blue" },
+    initial_values: ["black", "#000", "#000000", "rgb(0,0,0)", "rgba(0,0,0,1)"],
+    other_values: ["green", "#fc3", "currentColor"],
+    invalid_values: [
+      "url('#myserver')",
+      "url(foo.svg#myserver)",
+      'url("#myserver") green',
+      "000000",
+      "ff00ff",
+    ],
+  },
+  "flood-opacity": {
+    domProp: "floodOpacity",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["1", "2.8", "1.000", "300%"],
+    other_values: ["0", "0.3", "-7.3", "-100%", "50%"],
+    invalid_values: [],
+  },
+  "image-orientation": {
+    domProp: "imageOrientation",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["from-image"],
+    other_values: ["none"],
+    invalid_values: ["0", "0deg"],
+  },
+  "image-rendering": {
+    domProp: "imageRendering",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "optimizeSpeed",
+      "optimizeQuality",
+      "-moz-crisp-edges",
+      "crisp-edges",
+      "smooth",
+      "pixelated",
+    ],
+    invalid_values: [],
+  },
+  isolation: {
+    domProp: "isolation",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["isolate"],
+    invalid_values: [],
+  },
+  "lighting-color": {
+    domProp: "lightingColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { color: "blue" },
+    initial_values: [
+      "white",
+      "#fff",
+      "#ffffff",
+      "rgb(255,255,255)",
+      "rgba(255,255,255,1.0)",
+      "rgba(255,255,255,42.0)",
+    ],
+    other_values: ["green", "#fc3", "currentColor"],
+    invalid_values: [
+      "url('#myserver')",
+      "url(foo.svg#myserver)",
+      'url("#myserver") green',
+      "000000",
+      "ff00ff",
+    ],
+  },
+  marker: {
+    domProp: "marker",
+    inherited: true,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["marker-start", "marker-mid", "marker-end"],
+    initial_values: ["none"],
+    other_values: ["url(#mysym)"],
+    invalid_values: [
+      "none none",
+      "url(#mysym) url(#mysym)",
+      "none url(#mysym)",
+      "url(#mysym) none",
+    ],
+  },
+  "marker-end": {
+    domProp: "markerEnd",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["url(#mysym)"],
+    invalid_values: [],
+  },
+  "marker-mid": {
+    domProp: "markerMid",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["url(#mysym)"],
+    invalid_values: [],
+  },
+  "marker-start": {
+    domProp: "markerStart",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["url(#mysym)"],
+    invalid_values: [],
+  },
+  "mix-blend-mode": {
+    domProp: "mixBlendMode",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: [
+      "multiply",
+      "screen",
+      "overlay",
+      "darken",
+      "lighten",
+      "color-dodge",
+      "color-burn",
+      "hard-light",
+      "soft-light",
+      "difference",
+      "exclusion",
+      "hue",
+      "saturation",
+      "color",
+      "luminosity",
+      "plus-lighter",
+    ],
+    invalid_values: [],
+  },
+  "shape-image-threshold": {
+    domProp: "shapeImageThreshold",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["0", "0.0000", "-3", "0%", "-100%"],
+    other_values: [
+      "0.4",
+      "1",
+      "17",
+      "397.376",
+      "3e1",
+      "3e+1",
+      "3e-1",
+      "3e0",
+      "3e+0",
+      "3e-0",
+      "50%",
+      "300%",
+    ],
+    invalid_values: ["0px", "1px", "default", "auto"],
+  },
+  "shape-margin": {
+    domProp: "shapeMargin",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["0"],
+    other_values: ["2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)"],
+    invalid_values: ["-1px", "auto", "none", "1px 1px", "-1%"],
+  },
+  "shape-outside": {
+    domProp: "shapeOutside",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["none"],
+    other_values: ["url(#my-shape-outside)"].concat(
+      basicShapeOtherValues,
+      validNonUrlImageValues
+    ),
+    invalid_values: [].concat(
+      basicShapeSVGBoxValues,
+      basicShapeInvalidValues,
+      invalidNonUrlImageValues
+    ),
+    unbalanced_values: [].concat(
+      basicShapeUnbalancedValues,
+      unbalancedGradientAndElementValues
+    ),
+  },
+  "shape-rendering": {
+    domProp: "shapeRendering",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["optimizeSpeed", "crispEdges", "geometricPrecision"],
+    invalid_values: [],
+  },
+  "stop-color": {
+    domProp: "stopColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { color: "blue" },
+    initial_values: ["black", "#000", "#000000", "rgb(0,0,0)", "rgba(0,0,0,1)"],
+    other_values: ["green", "#fc3", "currentColor"],
+    invalid_values: [
+      "url('#myserver')",
+      "url(foo.svg#myserver)",
+      'url("#myserver") green',
+      "000000",
+      "ff00ff",
+    ],
+  },
+  "stop-opacity": {
+    domProp: "stopOpacity",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["1", "2.8", "1.000", "300%"],
+    other_values: ["0", "0.3", "-7.3", "-100%", "50%"],
+    invalid_values: [],
+  },
+  stroke: {
+    domProp: "stroke",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "black",
+      "#000",
+      "#000000",
+      "rgb(0,0,0)",
+      "rgba(0,0,0,1)",
+      "green",
+      "#fc3",
+      "url('#myserver')",
+      "url(foo.svg#myserver)",
+      'url("#myserver") green',
+      "currentColor",
+      "context-fill",
+      "context-stroke",
+    ],
+    invalid_values: ["000000", "ff00ff"],
+  },
+  "stroke-dasharray": {
+    domProp: "strokeDasharray",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "5px,3px,2px",
+      "5px 3px 2px",
+      "  5px ,3px\t, 2px ",
+      "1px",
+      "5%",
+      "3em",
+      "0.0002",
+      "context-value",
+    ],
+    invalid_values: ["-5px,3px,2px", "5px,3px,-2px"],
+  },
+  "stroke-dashoffset": {
+    domProp: "strokeDashoffset",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0", "-0px", "0em"],
+    other_values: ["3px", "3%", "1em", "0.0002", "context-value"],
+    invalid_values: [],
+  },
+  "stroke-linecap": {
+    domProp: "strokeLinecap",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["butt"],
+    other_values: ["round", "square"],
+    invalid_values: [],
+  },
+  "stroke-linejoin": {
+    domProp: "strokeLinejoin",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["miter"],
+    other_values: ["round", "bevel"],
+    invalid_values: [],
+  },
+  "stroke-miterlimit": {
+    domProp: "strokeMiterlimit",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["4"],
+    other_values: ["0", "0.9", "1", "7", "5000", "1.1"],
+    invalid_values: ["-1", "3px", "-0.3"],
+  },
+  "stroke-opacity": {
+    domProp: "strokeOpacity",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["1", "2.8", "1.000", "300%"],
+    other_values: [
+      "0",
+      "0.3",
+      "-7.3",
+      "-100%",
+      "50%",
+      "context-fill-opacity",
+      "context-stroke-opacity",
+    ],
+    invalid_values: [],
+  },
+  "stroke-width": {
+    domProp: "strokeWidth",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["1px"],
+    other_values: [
+      "0",
+      "0px",
+      "-0em",
+      "17px",
+      "0.2em",
+      "0.0002",
+      "context-value",
+    ],
+    invalid_values: ["-0.1px", "-3px"],
+  },
+  x: {
+    domProp: "x",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0px"],
+    other_values: ["-1em", "17px", "0.2em", "23.4%"],
+    invalid_values: ["auto", "context-value", "0.0002"],
+  },
+  y: {
+    domProp: "y",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0px"],
+    other_values: ["-1em", "17px", "0.2em", "23.4%"],
+    invalid_values: ["auto", "context-value", "0.0002"],
+  },
+  cx: {
+    domProp: "cx",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0px"],
+    other_values: ["-1em", "17px", "0.2em", "23.4%"],
+    invalid_values: ["auto", "context-value", "0.0002"],
+  },
+  cy: {
+    domProp: "cy",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0px"],
+    other_values: ["-1em", "17px", "0.2em", "23.4%"],
+    invalid_values: ["auto", "context-value", "0.0002"],
+  },
+  r: {
+    domProp: "r",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0px"],
+    other_values: ["17px", "0.2em", "23.4%"],
+    invalid_values: ["auto", "-1", "-1.5px", "0.0002"],
+  },
+  rx: {
+    domProp: "rx",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["17px", "0.2em", "23.4%"],
+    invalid_values: ["hello", "-12px", "0.0002"],
+  },
+  ry: {
+    domProp: "ry",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["17px", "0.2em", "23.4%"],
+    invalid_values: ["hello", "-1.3px", "0.0002"],
+  },
+  "text-anchor": {
+    domProp: "textAnchor",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["start"],
+    other_values: ["middle", "end"],
+    invalid_values: [],
+  },
+  "text-rendering": {
+    domProp: "textRendering",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["optimizeSpeed", "optimizeLegibility", "geometricPrecision"],
+    invalid_values: [],
+  },
+  "vector-effect": {
+    domProp: "vectorEffect",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["non-scaling-stroke"],
+    invalid_values: [],
+  },
+  "-moz-window-dragging": {
+    domProp: "MozWindowDragging",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["default"],
+    other_values: ["drag", "no-drag"],
+    invalid_values: ["none"],
+  },
+  "accent-color": {
+    domProp: "accentColor",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { color: "black" },
+    initial_values: ["auto"],
+    other_values: [
+      "currentcolor",
+      "black",
+      "green",
+      "transparent",
+      "rgba(128,128,128,.5)",
+      "#123",
+    ],
+    invalid_values: ["#0", "#00", "#00000", "cc00ff"],
+  },
+  "align-content": {
+    domProp: "alignContent",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: [
+      "start",
+      "end",
+      "flex-start",
+      "flex-end",
+      "center",
+      "space-between",
+      "space-around",
+      "space-evenly",
+      "first baseline",
+      "last baseline",
+      "baseline",
+      "stretch",
+      "safe start",
+      "unsafe end",
+      "safe end",
+    ],
+    invalid_values: [
+      "none",
+      "5",
+      "self-end",
+      "safe",
+      "normal unsafe",
+      "unsafe safe",
+      "safe baseline",
+      "baseline unsafe",
+      "baseline end",
+      "end normal",
+      "safe end unsafe start",
+      "safe end unsafe",
+      "normal safe start",
+      "unsafe end start",
+      "end start safe",
+      "space-between unsafe",
+      "stretch safe",
+      "auto",
+      "first",
+      "last",
+      "left",
+      "right",
+    ],
+  },
+  "align-items": {
+    domProp: "alignItems",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: [
+      "end",
+      "flex-start",
+      "flex-end",
+      "self-start",
+      "self-end",
+      "center",
+      "stretch",
+      "first baseline",
+      "last baseline",
+      "baseline",
+      "start",
+      "unsafe center",
+      "safe center",
+    ],
+    invalid_values: [
+      "space-between",
+      "abc",
+      "5%",
+      "legacy",
+      "legacy end",
+      "end legacy",
+      "unsafe",
+      "unsafe baseline",
+      "normal unsafe",
+      "safe left unsafe",
+      "safe stretch",
+      "end end",
+      "auto",
+      "left",
+      "right",
+    ],
+  },
+  "align-self": {
+    domProp: "alignSelf",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "normal",
+      "start",
+      "flex-start",
+      "flex-end",
+      "center",
+      "stretch",
+      "first baseline",
+      "last baseline",
+      "baseline",
+      "unsafe center",
+      "self-start",
+      "safe self-end",
+    ],
+    invalid_values: [
+      "space-between",
+      "abc",
+      "30px",
+      "stretch safe",
+      "safe",
+      "left",
+      "right",
+    ],
+  },
+  "justify-content": {
+    domProp: "justifyContent",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: [
+      "start",
+      "end",
+      "flex-start",
+      "flex-end",
+      "center",
+      "left",
+      "right",
+      "space-between",
+      "space-around",
+      "space-evenly",
+      "stretch",
+      "safe start",
+      "unsafe end",
+      "safe end",
+    ],
+    invalid_values: [
+      "30px",
+      "5%",
+      "self-end",
+      "safe",
+      "normal unsafe",
+      "unsafe safe",
+      "safe baseline",
+      "baseline unsafe",
+      "baseline end",
+      "normal end",
+      "safe end unsafe start",
+      "safe end unsafe",
+      "normal safe start",
+      "unsafe end start",
+      "end start safe",
+      "space-around unsafe",
+      "safe stretch",
+      "auto",
+      "first",
+      "last",
+    ],
+  },
+  "justify-items": {
+    domProp: "justifyItems",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["legacy", "normal"],
+    other_values: [
+      "end",
+      "flex-start",
+      "flex-end",
+      "self-start",
+      "self-end",
+      "center",
+      "left",
+      "right",
+      "stretch",
+      "start",
+      "legacy left",
+      "right legacy",
+      "legacy center",
+      "unsafe right",
+      "unsafe left",
+      "safe right",
+      "safe center",
+    ],
+    invalid_values: [
+      "auto",
+      "space-between",
+      "abc",
+      "30px",
+      "legacy start",
+      "end legacy",
+      "legacy baseline",
+      "legacy legacy",
+      "unsafe",
+      "safe legacy left",
+      "legacy left safe",
+      "legacy safe left",
+      "safe left legacy",
+      "legacy left legacy",
+      "baseline unsafe",
+      "safe unsafe",
+      "safe left unsafe",
+      "safe stretch",
+      "last",
+    ],
+  },
+  "justify-self": {
+    domProp: "justifySelf",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "normal",
+      "start",
+      "end",
+      "flex-start",
+      "flex-end",
+      "self-start",
+      "self-end",
+      "center",
+      "left",
+      "right",
+      "stretch",
+      "unsafe left",
+      "baseline",
+      "last baseline",
+      "first baseline",
+      "unsafe right",
+      "safe right",
+      "safe center",
+    ],
+    invalid_values: [
+      "space-between",
+      "abc",
+      "30px",
+      "none",
+      "first",
+      "last",
+      "legacy left",
+      "right legacy",
+      "baseline first",
+      "baseline last",
+    ],
+  },
+  "place-content": {
+    domProp: "placeContent",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["align-content", "justify-content"],
+    initial_values: ["normal"],
+    other_values: [
+      "normal start",
+      "baseline end",
+      "end end",
+      "space-between flex-end",
+      "last baseline start",
+      "space-evenly",
+      "flex-start",
+      "end",
+      "unsafe start",
+      "safe center",
+      "baseline",
+      "last baseline",
+    ],
+    invalid_values: [
+      "none",
+      "center safe",
+      "right / end",
+      "left",
+      "right",
+      "left left",
+      "right right",
+    ],
+  },
+  "place-items": {
+    domProp: "placeItems",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["align-items", "justify-items"],
+    initial_values: ["normal"],
+    other_values: [
+      "normal center",
+      "baseline end",
+      "end legacy",
+      "end",
+      "flex-end left",
+      "last baseline start",
+      "stretch",
+      "safe center",
+      "end legacy left",
+    ],
+    invalid_values: [
+      "space-between",
+      "start space-evenly",
+      "none",
+      "end/end",
+      "center safe",
+      "auto start",
+      "left",
+      "right",
+      "left left",
+      "right right",
+    ],
+  },
+  "place-self": {
+    domProp: "placeSelf",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["align-self", "justify-self"],
+    initial_values: ["auto"],
+    other_values: [
+      "normal start",
+      "first baseline end",
+      "end auto",
+      "end",
+      "normal",
+      "baseline start",
+      "baseline",
+      "start baseline",
+      "self-end left",
+      "last baseline start",
+      "stretch",
+    ],
+    invalid_values: [
+      "space-between",
+      "start space-evenly",
+      "none",
+      "end safe",
+      "auto legacy left",
+      "legacy left",
+      "auto/auto",
+      "left",
+      "right",
+      "left left",
+      "right right",
+    ],
+  },
+  flex: {
+    domProp: "flex",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["flex-grow", "flex-shrink", "flex-basis"],
+    initial_values: ["0 1 auto", "auto 0 1", "0 auto", "auto 0"],
+    other_values: [
+      "none",
+      "1",
+      "0",
+      "0 1",
+      "0.5",
+      "1.2 3.4",
+      "0 0 0",
+      "0 0 0px",
+      "0px 0 0",
+      "5px 0 0",
+      "2 auto",
+      "auto 4",
+      "auto 5.6 7.8",
+      "max-content",
+      "1 max-content",
+      "1 2 max-content",
+      "max-content 1",
+      "max-content 1 2",
+      "-0",
+    ],
+    invalid_values: [
+      "1 2px 3",
+      "1 auto 3",
+      "1px 2 3px",
+      "1px 2 3 4px",
+      "-1",
+      "1 -1",
+      "0 1 calc(0px + rubbish)",
+    ],
+  },
+  "flex-basis": {
+    domProp: "flexBasis",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [" auto"],
+    // NOTE: Besides "content", this is cribbed directly from the "width"
+    // chunk, since this property takes the exact same values as width
+    // (plus 'content' & with different semantics on 'auto').
+    // XXXdholbert (Maybe these should get separated out into
+    // a reusable array defined at the top of this file?)
+    other_values: [
+      "content",
+      "15px",
+      "3em",
+      "15%",
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-max-content",
+      "-moz-min-content",
+      "-moz-fit-content",
+      "-moz-available",
+      // valid calc() values
+      "calc(-2px)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(50% + 2px)",
+      "calc( 50% + 2px)",
+      "calc(50% + 2px )",
+      "calc( 50% + 2px )",
+      "calc(50% - -2px)",
+      "calc(2px - -50%)",
+      "calc(3*25px)",
+      "calc(3 *25px)",
+      "calc(3 * 25px)",
+      "calc(3* 25px)",
+      "calc(25px*3)",
+      "calc(25px *3)",
+      "calc(25px* 3)",
+      "calc(25px * 3)",
+      "calc(3*25px + 50%)",
+      "calc(50% - 3em + 2px)",
+      "calc(50% - (3em + 2px))",
+      "calc((50% - 3em) + 2px)",
+      "calc(2em)",
+      "calc(50%)",
+      "calc(50px/2)",
+      "calc(50px/(2 - 1))",
+      "calc(min(5px))",
+      "calc(min(5px,2em))",
+      "calc(max(5px))",
+      "calc(max(5px,2em))",
+      "min(5px)",
+      "min(5px,2em)",
+      "max(5px)",
+      "max(5px,2em)",
+    ],
+    invalid_values: [
+      "none",
+      "-2px",
+      // invalid calc() values
+      "calc(50%+ 2px)",
+      "calc(50% +2px)",
+      "calc(50%+2px)",
+      "-moz-min()",
+      "calc(min())",
+      "-moz-max()",
+      "calc(max())",
+      "-moz-min(5px)",
+      "-moz-max(5px)",
+      "-moz-min(5px,2em)",
+      "-moz-max(5px,2em)",
+      // If we ever support division by values, which is
+      // complicated for the reasons described in
+      // http://lists.w3.org/Archives/Public/www-style/2010Jan/0007.html
+      // , we should support all 4 of these as described in
+      // http://lists.w3.org/Archives/Public/www-style/2009Dec/0296.html
+      "calc((3em / 100%) * 3em)",
+      "calc(3em / 100% * 3em)",
+      "calc(3em * (3em / 100%))",
+      "calc(3em * 3em / 100%)",
+    ],
+  },
+  "flex-direction": {
+    domProp: "flexDirection",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["row"],
+    other_values: ["row-reverse", "column", "column-reverse"],
+    invalid_values: ["10px", "30%", "justify", "column wrap"],
+  },
+  "flex-flow": {
+    domProp: "flexFlow",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["flex-direction", "flex-wrap"],
+    initial_values: ["row nowrap", "nowrap row", "row", "nowrap"],
+    other_values: [
+      // only specifying one property:
+      "column",
+      "wrap",
+      "wrap-reverse",
+      // specifying both properties, 'flex-direction' first:
+      "row wrap",
+      "row wrap-reverse",
+      "column wrap",
+      "column wrap-reverse",
+      // specifying both properties, 'flex-wrap' first:
+      "wrap row",
+      "wrap column",
+      "wrap-reverse row",
+      "wrap-reverse column",
+    ],
+    invalid_values: [
+      // specifying flex-direction twice (invalid):
+      "row column",
+      "row column nowrap",
+      "row nowrap column",
+      "nowrap row column",
+      // specifying flex-wrap twice (invalid):
+      "nowrap wrap-reverse",
+      "nowrap wrap-reverse row",
+      "nowrap row wrap-reverse",
+      "row nowrap wrap-reverse",
+      // Invalid data-type / invalid keyword type:
+      "1px",
+      "5%",
+      "justify",
+      "none",
+    ],
+  },
+  "flex-grow": {
+    domProp: "flexGrow",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0"],
+    other_values: ["3", "1", "1.0", "2.5", "123"],
+    invalid_values: ["0px", "-5", "1%", "3em", "stretch", "auto"],
+  },
+  "flex-shrink": {
+    domProp: "flexShrink",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["1"],
+    other_values: ["3", "0", "0.0", "2.5", "123"],
+    invalid_values: ["0px", "-5", "1%", "3em", "stretch", "auto"],
+  },
+  "flex-wrap": {
+    domProp: "flexWrap",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["nowrap"],
+    other_values: ["wrap", "wrap-reverse"],
+    invalid_values: ["10px", "30%", "justify", "column wrap", "auto"],
+  },
+  order: {
+    domProp: "order",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0"],
+    other_values: ["1", "99999", "-1", "-50"],
+    invalid_values: ["0px", "1.0", "1.", "1%", "0.2", "3em", "stretch"],
+  },
+
+  // Aliases
+  "word-wrap": {
+    domProp: "wordWrap",
+    inherited: true,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "overflow-wrap",
+    subproperties: ["overflow-wrap"],
+  },
+  "-moz-tab-size": {
+    domProp: "MozTabSize",
+    inherited: true,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "tab-size",
+    subproperties: ["tab-size"],
+  },
+  "-moz-transform": {
+    domProp: "MozTransform",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "transform",
+    subproperties: ["transform"],
+  },
+  "-moz-transform-origin": {
+    domProp: "MozTransformOrigin",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "transform-origin",
+    subproperties: ["transform-origin"],
+  },
+  "-moz-perspective-origin": {
+    domProp: "MozPerspectiveOrigin",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "perspective-origin",
+    subproperties: ["perspective-origin"],
+  },
+  "-moz-perspective": {
+    domProp: "MozPerspective",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "perspective",
+    subproperties: ["perspective"],
+  },
+  "-moz-backface-visibility": {
+    domProp: "MozBackfaceVisibility",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "backface-visibility",
+    subproperties: ["backface-visibility"],
+  },
+  "-moz-transform-style": {
+    domProp: "MozTransformStyle",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "transform-style",
+    subproperties: ["transform-style"],
+  },
+  "-moz-border-image": {
+    domProp: "MozBorderImage",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    alias_for: "border-image",
+    subproperties: [
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat",
+    ],
+  },
+  "-moz-transition": {
+    domProp: "MozTransition",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    applies_to_marker: true,
+    alias_for: "transition",
+    subproperties: [
+      "transition-property",
+      "transition-duration",
+      "transition-timing-function",
+      "transition-delay",
+    ],
+  },
+  "-moz-transition-delay": {
+    domProp: "MozTransitionDelay",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "transition-delay",
+    subproperties: ["transition-delay"],
+  },
+  "-moz-transition-duration": {
+    domProp: "MozTransitionDuration",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "transition-duration",
+    subproperties: ["transition-duration"],
+  },
+  "-moz-transition-property": {
+    domProp: "MozTransitionProperty",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "transition-property",
+    subproperties: ["transition-property"],
+  },
+  "-moz-transition-timing-function": {
+    domProp: "MozTransitionTimingFunction",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "transition-timing-function",
+    subproperties: ["transition-timing-function"],
+  },
+  "-moz-animation": {
+    domProp: "MozAnimation",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    applies_to_marker: true,
+    alias_for: "animation",
+    subproperties: [
+      "animation-name",
+      "animation-duration",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-direction",
+      "animation-fill-mode",
+      "animation-iteration-count",
+      "animation-play-state",
+    ],
+  },
+  "-moz-animation-delay": {
+    domProp: "MozAnimationDelay",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-delay",
+    subproperties: ["animation-delay"],
+  },
+  "-moz-animation-direction": {
+    domProp: "MozAnimationDirection",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-direction",
+    subproperties: ["animation-direction"],
+  },
+  "-moz-animation-duration": {
+    domProp: "MozAnimationDuration",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-duration",
+    subproperties: ["animation-duration"],
+  },
+  "-moz-animation-fill-mode": {
+    domProp: "MozAnimationFillMode",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-fill-mode",
+    subproperties: ["animation-fill-mode"],
+  },
+  "-moz-animation-iteration-count": {
+    domProp: "MozAnimationIterationCount",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-iteration-count",
+    subproperties: ["animation-iteration-count"],
+  },
+  "-moz-animation-name": {
+    domProp: "MozAnimationName",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-name",
+    subproperties: ["animation-name"],
+  },
+  "-moz-animation-play-state": {
+    domProp: "MozAnimationPlayState",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-play-state",
+    subproperties: ["animation-play-state"],
+  },
+  "-moz-animation-timing-function": {
+    domProp: "MozAnimationTimingFunction",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-timing-function",
+    subproperties: ["animation-timing-function"],
+  },
+  "-moz-font-feature-settings": {
+    domProp: "MozFontFeatureSettings",
+    inherited: true,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    alias_for: "font-feature-settings",
+    subproperties: ["font-feature-settings"],
+  },
+  "-moz-font-language-override": {
+    domProp: "MozFontLanguageOverride",
+    inherited: true,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    alias_for: "font-language-override",
+    subproperties: ["font-language-override"],
+  },
+  "-moz-hyphens": {
+    domProp: "MozHyphens",
+    inherited: true,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "hyphens",
+    subproperties: ["hyphens"],
+  },
+  // vertical text properties
+  "writing-mode": {
+    domProp: "writingMode",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["horizontal-tb", "lr", "lr-tb", "rl", "rl-tb"],
+    other_values: [
+      "vertical-lr",
+      "vertical-rl",
+      "sideways-rl",
+      "sideways-lr",
+      "tb",
+      "tb-rl",
+    ],
+    invalid_values: ["10px", "30%", "justify", "auto", "1em"],
+  },
+  "text-orientation": {
+    domProp: "textOrientation",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["mixed"],
+    other_values: [
+      "upright",
+      "sideways",
+      "sideways-right",
+    ] /* sideways-right alias for backward compatibility */,
+    invalid_values: [
+      "none",
+      "3em",
+      "sideways-left",
+    ] /* sideways-left removed from CSS Writing Modes */,
+  },
+  "block-size": {
+    domProp: "blockSize",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    axis: true,
+    /* XXX testing auto has prerequisites */
+    initial_values: ["auto"],
+    prerequisites: { display: "block" },
+    other_values: [
+      "15px",
+      "3em",
+      "15%",
+      // These keywords are treated as initial value.
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      "-moz-available",
+      "-moz-max-content",
+      "-moz-min-content",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["none"],
+  },
+  "border-block": {
+    domProp: "borderBlock",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-block-start-color",
+      "border-block-start-style",
+      "border-block-start-width",
+      "border-block-end-color",
+      "border-block-end-style",
+      "border-block-end-width",
+    ],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "green",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "5px green none",
+    ],
+    invalid_values: ["5%", "5", "5 solid green"],
+  },
+  "border-block-end": {
+    domProp: "borderBlockEnd",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-block-end-color",
+      "border-block-end-style",
+      "border-block-end-width",
+    ],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "green",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "5px green none",
+    ],
+    invalid_values: ["5%", "5", "5 solid green"],
+  },
+  "border-block-color": {
+    domProp: "borderBlockColor",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["border-block-start-color", "border-block-end-color"],
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5) blue", "blue transparent"],
+    invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"],
+  },
+  "border-block-end-color": {
+    domProp: "borderBlockEndColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5)", "transparent"],
+    invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"],
+  },
+  "border-block-style": {
+    domProp: "borderBlockStyle",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["border-block-start-style", "border-block-end-style"],
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed solid",
+      "solid dotted",
+      "double double",
+      "inset outset",
+      "inset double",
+      "none groove",
+      "ridge none",
+    ],
+    invalid_values: [],
+  },
+  "border-block-end-style": {
+    domProp: "borderBlockEndStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    /* XXX hidden is sometimes the same as initial */
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed",
+      "dotted",
+      "double",
+      "outset",
+      "inset",
+      "groove",
+      "ridge",
+    ],
+    invalid_values: [],
+  },
+  "border-block-width": {
+    domProp: "borderBlockWidth",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["border-block-start-width", "border-block-end-width"],
+    prerequisites: { "border-style": "solid" },
+    initial_values: ["medium", "3px", "medium medium"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(2px) thin",
+      "calc(-2px)",
+      "calc(-2px) thick",
+      "calc(0em)",
+      "medium calc(0em)",
+      "calc(0px)",
+      "1px calc(0px)",
+      "calc(5em)",
+      "1em calc(5em)",
+    ],
+    invalid_values: ["5%", "5", "5 thin", "thin 5%", "blue", "solid"],
+  },
+  "border-block-end-width": {
+    domProp: "borderBlockEndWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    prerequisites: { "border-block-end-style": "solid" },
+    initial_values: ["medium", "3px", "calc(4px - 1px)"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0em)",
+      "calc(0px)",
+      "calc(5em)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 5em)",
+    ],
+    invalid_values: ["5%", "5"],
+  },
+  "border-block-start": {
+    domProp: "borderBlockStart",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "border-block-start-color",
+      "border-block-start-style",
+      "border-block-start-width",
+    ],
+    initial_values: [
+      "none",
+      "medium",
+      "currentColor",
+      "thin",
+      "none medium currentcolor",
+    ],
+    other_values: [
+      "solid",
+      "green",
+      "medium solid",
+      "green solid",
+      "10px solid",
+      "thick solid",
+      "5px green none",
+    ],
+    invalid_values: ["5%", "5", "5 solid green"],
+  },
+  "border-block-start-color": {
+    domProp: "borderBlockStartColor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    initial_values: ["currentColor"],
+    other_values: ["green", "rgba(255,128,0,0.5)", "transparent"],
+    invalid_values: ["#0", "#00", "#00000", "#0000000", "#000000000", "000000"],
+  },
+  "border-block-start-style": {
+    domProp: "borderBlockStartStyle",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    /* XXX hidden is sometimes the same as initial */
+    initial_values: ["none"],
+    other_values: [
+      "solid",
+      "dashed",
+      "dotted",
+      "double",
+      "outset",
+      "inset",
+      "groove",
+      "ridge",
+    ],
+    invalid_values: [],
+  },
+  "border-block-start-width": {
+    domProp: "borderBlockStartWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    prerequisites: { "border-block-start-style": "solid" },
+    initial_values: ["medium", "3px", "calc(4px - 1px)"],
+    other_values: [
+      "thin",
+      "thick",
+      "1px",
+      "2em",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(0em)",
+      "calc(0px)",
+      "calc(5em)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 5em)",
+    ],
+    invalid_values: ["5%", "5"],
+  },
+  "-moz-border-end": {
+    domProp: "MozBorderEnd",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    alias_for: "border-inline-end",
+    subproperties: [
+      "-moz-border-end-color",
+      "-moz-border-end-style",
+      "-moz-border-end-width",
+    ],
+  },
+  "-moz-border-end-color": {
+    domProp: "MozBorderEndColor",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "border-inline-end-color",
+    subproperties: ["border-inline-end-color"],
+  },
+  "-moz-border-end-style": {
+    domProp: "MozBorderEndStyle",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "border-inline-end-style",
+    subproperties: ["border-inline-end-style"],
+  },
+  "-moz-border-end-width": {
+    domProp: "MozBorderEndWidth",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "border-inline-end-width",
+    subproperties: ["border-inline-end-width"],
+  },
+  "-moz-border-start": {
+    domProp: "MozBorderStart",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    alias_for: "border-inline-start",
+    subproperties: [
+      "-moz-border-start-color",
+      "-moz-border-start-style",
+      "-moz-border-start-width",
+    ],
+  },
+  "-moz-border-start-color": {
+    domProp: "MozBorderStartColor",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "border-inline-start-color",
+    subproperties: ["border-inline-start-color"],
+  },
+  "-moz-border-start-style": {
+    domProp: "MozBorderStartStyle",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "border-inline-start-style",
+    subproperties: ["border-inline-start-style"],
+  },
+  "-moz-border-start-width": {
+    domProp: "MozBorderStartWidth",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "border-inline-start-width",
+    subproperties: ["border-inline-start-width"],
+  },
+  "inline-size": {
+    domProp: "inlineSize",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    axis: true,
+    /* XXX testing auto has prerequisites */
+    initial_values: ["auto"],
+    prerequisites: {
+      display: "block",
+      // add some margin to avoid the initial "auto" value getting
+      // resolved to the same length as the parent element.
+      "margin-left": "5px",
+    },
+    other_values: [
+      "15px",
+      "3em",
+      "15%",
+      // these three keywords compute to the initial value only when the
+      // writing mode is vertical, and we're testing with a horizontal
+      // writing mode
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      // these two keywords are the aliases of above first two.
+      "-moz-max-content",
+      "-moz-min-content",
+      // whether -moz-available computes to the initial value depends on
+      // the container size, and for the container size we're testing
+      // with, it does
+      // "-moz-available",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["none"],
+  },
+  "margin-block": {
+    domProp: "marginBlock",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["margin-block-start", "margin-block-end"],
+    initial_values: ["0", "0px 0em"],
+    other_values: [
+      "1px",
+      "3em 1%",
+      "5%",
+      "calc(2px) 1%",
+      "calc(-2px) 1%",
+      "calc(50%) 1%",
+      "calc(3*25px) calc(2px)",
+      "calc(25px*3) 1em",
+      "calc(3*25px + 50%) calc(3*25px - 50%)",
+    ],
+    invalid_values: [
+      "5",
+      "..25px",
+      ".+5px",
+      ".px",
+      "-.px",
+      "++5px",
+      "-+4px",
+      "+-3px",
+      "--7px",
+      "+-.6px",
+      "-+.5px",
+      "++.7px",
+      "--.4px",
+    ],
+  },
+  "margin-block-end": {
+    domProp: "marginBlockEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    /* XXX testing auto has prerequisites */
+    initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "..25px",
+      ".+5px",
+      ".px",
+      "-.px",
+      "++5px",
+      "-+4px",
+      "+-3px",
+      "--7px",
+      "+-.6px",
+      "-+.5px",
+      "++.7px",
+      "--.4px",
+    ],
+  },
+  "margin-block-start": {
+    domProp: "marginBlockStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    logical: true,
+    /* XXX testing auto has prerequisites */
+    initial_values: ["0", "0px", "0%", "calc(0pt)", "calc(0% + 0px)"],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [
+      "..25px",
+      ".+5px",
+      ".px",
+      "-.px",
+      "++5px",
+      "-+4px",
+      "+-3px",
+      "--7px",
+      "+-.6px",
+      "-+.5px",
+      "++.7px",
+      "--.4px",
+    ],
+  },
+  "-moz-margin-end": {
+    domProp: "MozMarginEnd",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "margin-inline-end",
+    subproperties: ["margin-inline-end"],
+  },
+  "-moz-margin-start": {
+    domProp: "MozMarginStart",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "margin-inline-start",
+    subproperties: ["margin-inline-start"],
+  },
+  "max-block-size": {
+    domProp: "maxBlockSize",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    axis: true,
+    prerequisites: { display: "block" },
+    initial_values: ["none"],
+    other_values: [
+      "30px",
+      "50%",
+      // These keywords are treated as initial value.
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      "-moz-available",
+      "-moz-max-content",
+      "-moz-min-content",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["auto", "5"],
+  },
+  "max-inline-size": {
+    domProp: "maxInlineSize",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    axis: true,
+    prerequisites: { display: "block" },
+    initial_values: ["none"],
+    other_values: [
+      "30px",
+      "50%",
+      // these four keywords compute to the initial value only when the
+      // writing mode is vertical, and we're testing with a horizontal
+      // writing mode
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      "-moz-available",
+      // these two keywords are the aliases of above first two.
+      "-moz-max-content",
+      "-moz-min-content",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["auto", "5"],
+  },
+  "min-block-size": {
+    domProp: "minBlockSize",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    axis: true,
+    prerequisites: { display: "block" },
+    initial_values: ["auto", "0", "calc(0em)", "calc(-2px)"],
+    other_values: [
+      "30px",
+      "50%",
+      // These keywords are treated as initial value.
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      "-moz-available",
+      "-moz-max-content",
+      "-moz-min-content",
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["none", "5"],
+  },
+  "min-inline-size": {
+    domProp: "minInlineSize",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    axis: true,
+    prerequisites: { display: "block" },
+    initial_values: ["auto", "0", "calc(0em)", "calc(-2px)"],
+    other_values: [
+      "30px",
+      "50%",
+      // these four keywords compute to the initial value only when the
+      // writing mode is vertical, and we're testing with a horizontal
+      // writing mode
+      "max-content",
+      "min-content",
+      "fit-content",
+      "-moz-fit-content",
+      "-moz-available",
+      // these two keywords are the aliases of above first two.
+      "-moz-max-content",
+      "-moz-min-content",
+      "calc(-1%)",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
+    ],
+    invalid_values: ["none", "5"],
+  },
+  inset: {
+    domProp: "inset",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["top", "right", "bottom", "left"],
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    initial_values: ["auto"],
+    other_values: [
+      "3px 0",
+      "2em 4px 2pt",
+      "1em 2em 3px 4px",
+      "1em calc(2em + 3px) 4ex 5cm",
+    ],
+    invalid_values: ["1px calc(nonsense)", "1px red", "3"],
+    unbalanced_values: ["1px calc("],
+  },
+  "inset-block": {
+    domProp: "insetBlock",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["inset-block-start", "inset-block-end"],
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    initial_values: ["auto", "auto auto"],
+    other_values: [
+      "32px",
+      "-3em",
+      "12%",
+      "32px auto",
+      "auto -3em",
+      "12% auto",
+      "calc(2px)",
+      "calc(2px) auto",
+      "calc(-2px)",
+      "auto calc(-2px)",
+      "calc(50%)",
+      "auto calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) auto",
+      "calc(25px*3)",
+      "auto calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "auto calc(3*25px + 50%)",
+    ],
+    invalid_values: ["none"],
+  },
+  "inset-block-end": {
+    domProp: "insetBlockEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: ["auto"],
+    other_values: [
+      "32px",
+      "-3em",
+      "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+  },
+  "inset-block-start": {
+    domProp: "insetBlockStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: ["auto"],
+    other_values: [
+      "32px",
+      "-3em",
+      "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+  },
+  "inset-inline": {
+    domProp: "insetInline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["inset-inline-start", "inset-inline-end"],
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    initial_values: ["auto", "auto auto"],
+    other_values: [
+      "32px",
+      "-3em",
+      "12%",
+      "32px auto",
+      "auto -3em",
+      "12% auto",
+      "calc(2px)",
+      "calc(2px) auto",
+      "calc(-2px)",
+      "auto calc(-2px)",
+      "calc(50%)",
+      "auto calc(50%)",
+      "calc(3*25px)",
+      "calc(3*25px) auto",
+      "calc(25px*3)",
+      "auto calc(25px*3)",
+      "calc(3*25px + 50%)",
+      "auto calc(3*25px + 50%)",
+    ],
+    invalid_values: ["none"],
+  },
+  "inset-inline-end": {
+    domProp: "insetInlineEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: ["auto"],
+    other_values: [
+      "32px",
+      "-3em",
+      "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+  },
+  "inset-inline-start": {
+    domProp: "insetInlineStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { position: "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: ["auto"],
+    other_values: [
+      "32px",
+      "-3em",
+      "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+  },
+  "padding-block-end": {
+    domProp: "paddingBlockEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    logical: true,
+    initial_values: [
+      "0",
+      "0px",
+      "0%",
+      "calc(0pt)",
+      "calc(0% + 0px)",
+      "calc(-3px)",
+      "calc(-1%)",
+    ],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+  },
+  "padding-block-start": {
+    domProp: "paddingBlockStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    // No applies_to_placeholder because we have a !important rule in forms.css.
+    logical: true,
+    initial_values: [
+      "0",
+      "0px",
+      "0%",
+      "calc(0pt)",
+      "calc(0% + 0px)",
+      "calc(-3px)",
+      "calc(-1%)",
+    ],
+    other_values: [
+      "1px",
+      "2em",
+      "5%",
+      "calc(2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: [],
+  },
+  "-moz-padding-end": {
+    domProp: "MozPaddingEnd",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "padding-inline-end",
+    subproperties: ["padding-inline-end"],
+  },
+  "-moz-padding-start": {
+    domProp: "MozPaddingStart",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "padding-inline-start",
+    subproperties: ["padding-inline-start"],
+  },
+  "-webkit-animation": {
+    domProp: "webkitAnimation",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    applies_to_marker: true,
+    alias_for: "animation",
+    subproperties: [
+      "animation-name",
+      "animation-duration",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-direction",
+      "animation-fill-mode",
+      "animation-iteration-count",
+      "animation-play-state",
+    ],
+  },
+  "-webkit-animation-delay": {
+    domProp: "webkitAnimationDelay",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-delay",
+    subproperties: ["animation-delay"],
+  },
+  "-webkit-animation-direction": {
+    domProp: "webkitAnimationDirection",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-direction",
+    subproperties: ["animation-direction"],
+  },
+  "-webkit-animation-duration": {
+    domProp: "webkitAnimationDuration",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-duration",
+    subproperties: ["animation-duration"],
+  },
+  "-webkit-animation-fill-mode": {
+    domProp: "webkitAnimationFillMode",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-fill-mode",
+    subproperties: ["animation-fill-mode"],
+  },
+  "-webkit-animation-iteration-count": {
+    domProp: "webkitAnimationIterationCount",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-iteration-count",
+    subproperties: ["animation-iteration-count"],
+  },
+  "-webkit-animation-name": {
+    domProp: "webkitAnimationName",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-name",
+    subproperties: ["animation-name"],
+  },
+  "-webkit-animation-play-state": {
+    domProp: "webkitAnimationPlayState",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-play-state",
+    subproperties: ["animation-play-state"],
+  },
+  "-webkit-animation-timing-function": {
+    domProp: "webkitAnimationTimingFunction",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "animation-timing-function",
+    subproperties: ["animation-timing-function"],
+  },
+  "-webkit-clip-path": {
+    domProp: "webkitClipPath",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "clip-path",
+    subproperties: ["clip-path"],
+  },
+  "-webkit-filter": {
+    domProp: "webkitFilter",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "filter",
+    subproperties: ["filter"],
+  },
+  "-webkit-text-security": {
+    domProp: "webkitTextSecurity",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    initial_values: ["none"],
+    other_values: ["circle", "disc", "square"],
+    invalid_values: ["0", "auto", "true", "'*'"],
+  },
+  "-webkit-text-fill-color": {
+    domProp: "webkitTextFillColor",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    prerequisites: { color: "black" },
+    initial_values: ["currentColor", "black", "#000", "#000000", "rgb(0,0,0)"],
+    other_values: ["red", "rgba(255,255,255,0.5)", "transparent"],
+    invalid_values: [
+      "#0",
+      "#00",
+      "#00000",
+      "#0000000",
+      "#000000000",
+      "000000",
+      "ff00ff",
+      "rgb(255,xxx,255)",
+    ],
+  },
+  "-webkit-text-stroke": {
+    domProp: "webkitTextStroke",
+    inherited: true,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    prerequisites: { color: "black" },
+    subproperties: ["-webkit-text-stroke-width", "-webkit-text-stroke-color"],
+    initial_values: [
+      "0 currentColor",
+      "currentColor 0px",
+      "0",
+      "currentColor",
+      "0px black",
+    ],
+    other_values: [
+      "thin black",
+      "#f00 medium",
+      "thick rgba(0,0,255,0.5)",
+      "calc(4px - 8px) green",
+      "2px",
+      "green 0",
+      "currentColor 4em",
+      "currentColor calc(5px - 1px)",
+    ],
+    invalid_values: ["-3px black", "calc(50%+ 2px) #000", "30% #f00"],
+  },
+  "-webkit-text-stroke-color": {
+    domProp: "webkitTextStrokeColor",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    prerequisites: { color: "black" },
+    initial_values: ["currentColor", "black", "#000", "#000000", "rgb(0,0,0)"],
+    other_values: ["red", "rgba(255,255,255,0.5)", "transparent"],
+    invalid_values: [
+      "#0",
+      "#00",
+      "#00000",
+      "#0000000",
+      "#000000000",
+      "000000",
+      "ff00ff",
+      "rgb(255,xxx,255)",
+    ],
+  },
+  "-webkit-text-stroke-width": {
+    domProp: "webkitTextStrokeWidth",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    initial_values: ["0", "0px", "0em", "0ex", "calc(0pt)", "calc(4px - 8px)"],
+    other_values: [
+      "thin",
+      "medium",
+      "thick",
+      "17px",
+      "0.2em",
+      "calc(3*25px + 5em)",
+      "calc(5px - 1px)",
+    ],
+    invalid_values: [
+      "5%",
+      "1px calc(nonsense)",
+      "1px red",
+      "-0.1px",
+      "-3px",
+      "30%",
+    ],
+  },
+  "-webkit-text-size-adjust": {
+    domProp: "webkitTextSizeAdjust",
+    inherited: true,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "-moz-text-size-adjust",
+    subproperties: ["-moz-text-size-adjust"],
+  },
+  "-webkit-transform": {
+    domProp: "webkitTransform",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "transform",
+    subproperties: ["transform"],
+  },
+  "-webkit-transform-origin": {
+    domProp: "webkitTransformOrigin",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "transform-origin",
+    subproperties: ["transform-origin"],
+  },
+  "-webkit-transform-style": {
+    domProp: "webkitTransformStyle",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "transform-style",
+    subproperties: ["transform-style"],
+  },
+  "-webkit-backface-visibility": {
+    domProp: "webkitBackfaceVisibility",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "backface-visibility",
+    subproperties: ["backface-visibility"],
+  },
+  "-webkit-perspective": {
+    domProp: "webkitPerspective",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "perspective",
+    subproperties: ["perspective"],
+  },
+  "-webkit-perspective-origin": {
+    domProp: "webkitPerspectiveOrigin",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "perspective-origin",
+    subproperties: ["perspective-origin"],
+  },
+  "-webkit-transition": {
+    domProp: "webkitTransition",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    applies_to_marker: true,
+    alias_for: "transition",
+    subproperties: [
+      "transition-property",
+      "transition-duration",
+      "transition-timing-function",
+      "transition-delay",
+    ],
+  },
+  "-webkit-transition-delay": {
+    domProp: "webkitTransitionDelay",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "transition-delay",
+    subproperties: ["transition-delay"],
+  },
+  "-webkit-transition-duration": {
+    domProp: "webkitTransitionDuration",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "transition-duration",
+    subproperties: ["transition-duration"],
+  },
+  "-webkit-transition-property": {
+    domProp: "webkitTransitionProperty",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "transition-property",
+    subproperties: ["transition-property"],
+  },
+  "-webkit-transition-timing-function": {
+    domProp: "webkitTransitionTimingFunction",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_marker: true,
+    alias_for: "transition-timing-function",
+    subproperties: ["transition-timing-function"],
+  },
+  "-webkit-border-radius": {
+    domProp: "webkitBorderRadius",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    alias_for: "border-radius",
+    subproperties: [
+      "border-bottom-left-radius",
+      "border-bottom-right-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+    ],
+  },
+  "-webkit-border-top-left-radius": {
+    domProp: "webkitBorderTopLeftRadius",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "border-top-left-radius",
+    subproperties: ["border-top-left-radius"],
+  },
+  "-webkit-border-top-right-radius": {
+    domProp: "webkitBorderTopRightRadius",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "border-top-right-radius",
+    subproperties: ["border-top-right-radius"],
+  },
+  "-webkit-border-bottom-left-radius": {
+    domProp: "webkitBorderBottomLeftRadius",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "border-bottom-left-radius",
+    subproperties: ["border-bottom-left-radius"],
+  },
+  "-webkit-border-bottom-right-radius": {
+    domProp: "webkitBorderBottomRightRadius",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "border-bottom-right-radius",
+    subproperties: ["border-bottom-right-radius"],
+  },
+  "-webkit-background-clip": {
+    domProp: "webkitBackgroundClip",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    alias_for: "background-clip",
+    subproperties: ["background-clip"],
+  },
+  "-webkit-background-origin": {
+    domProp: "webkitBackgroundOrigin",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    alias_for: "background-origin",
+    subproperties: ["background-origin"],
+  },
+  "-webkit-background-size": {
+    domProp: "webkitBackgroundSize",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    alias_for: "background-size",
+    subproperties: ["background-size"],
+  },
+  "-webkit-border-image": {
+    domProp: "webkitBorderImage",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    alias_for: "border-image",
+    subproperties: [
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat",
+    ],
+  },
+  "-webkit-box-shadow": {
+    domProp: "webkitBoxShadow",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    applies_to_first_letter: true,
+    alias_for: "box-shadow",
+    subproperties: ["box-shadow"],
+  },
+  "-webkit-box-sizing": {
+    domProp: "webkitBoxSizing",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "box-sizing",
+    subproperties: ["box-sizing"],
+  },
+  "-webkit-box-flex": {
+    domProp: "webkitBoxFlex",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "-moz-box-flex",
+    subproperties: ["-moz-box-flex"],
+  },
+  "-webkit-box-ordinal-group": {
+    domProp: "webkitBoxOrdinalGroup",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "-moz-box-ordinal-group",
+    subproperties: ["-moz-box-ordinal-group"],
+  },
+  "-webkit-box-orient": {
+    domProp: "webkitBoxOrient",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "-moz-box-orient",
+    subproperties: ["-moz-box-orient"],
+  },
+  "-webkit-box-direction": {
+    domProp: "webkitBoxDirection",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "-moz-box-direction",
+    subproperties: ["-moz-box-direction"],
+  },
+  "-webkit-box-align": {
+    domProp: "webkitBoxAlign",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "-moz-box-align",
+    subproperties: ["-moz-box-align"],
+  },
+  "-webkit-box-pack": {
+    domProp: "webkitBoxPack",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "-moz-box-pack",
+    subproperties: ["-moz-box-pack"],
+  },
+  "-webkit-flex-direction": {
+    domProp: "webkitFlexDirection",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "flex-direction",
+    subproperties: ["flex-direction"],
+  },
+  "-webkit-flex-wrap": {
+    domProp: "webkitFlexWrap",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "flex-wrap",
+    subproperties: ["flex-wrap"],
+  },
+  "-webkit-flex-flow": {
+    domProp: "webkitFlexFlow",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    alias_for: "flex-flow",
+    subproperties: ["flex-direction", "flex-wrap"],
+  },
+  "-webkit-line-clamp": {
+    domProp: "webkitLineClamp",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["1", "2"],
+    invalid_values: ["auto", "0", "-1"],
+  },
+  "-webkit-order": {
+    domProp: "webkitOrder",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "order",
+    subproperties: ["order"],
+  },
+  "-webkit-flex": {
+    domProp: "webkitFlex",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    alias_for: "flex",
+    subproperties: ["flex-grow", "flex-shrink", "flex-basis"],
+  },
+  "-webkit-flex-grow": {
+    domProp: "webkitFlexGrow",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "flex-grow",
+    subproperties: ["flex-grow"],
+  },
+  "-webkit-flex-shrink": {
+    domProp: "webkitFlexShrink",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "flex-shrink",
+    subproperties: ["flex-shrink"],
+  },
+  "-webkit-flex-basis": {
+    domProp: "webkitFlexBasis",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "flex-basis",
+    subproperties: ["flex-basis"],
+  },
+  "-webkit-justify-content": {
+    domProp: "webkitJustifyContent",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "justify-content",
+    subproperties: ["justify-content"],
+  },
+  "-webkit-align-items": {
+    domProp: "webkitAlignItems",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "align-items",
+    subproperties: ["align-items"],
+  },
+  "-webkit-align-self": {
+    domProp: "webkitAlignSelf",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "align-self",
+    subproperties: ["align-self"],
+  },
+  "-webkit-align-content": {
+    domProp: "webkitAlignContent",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "align-content",
+    subproperties: ["align-content"],
+  },
+  "-webkit-user-select": {
+    domProp: "webkitUserSelect",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "user-select",
+    subproperties: ["user-select"],
+  },
+  "-webkit-mask": {
+    domProp: "webkitMask",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    alias_for: "mask",
+    subproperties: [
+      "mask-clip",
+      "mask-image",
+      "mask-mode",
+      "mask-origin",
+      "mask-position",
+      "mask-repeat",
+      "mask-size",
+      "mask-composite",
+    ],
+  },
+  "-webkit-mask-clip": {
+    domProp: "webkitMaskClip",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-clip",
+    subproperties: ["mask-clip"],
+  },
+
+  "-webkit-mask-composite": {
+    domProp: "webkitMaskComposite",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-composite",
+    subproperties: ["mask-composite"],
+  },
+
+  "-webkit-mask-image": {
+    domProp: "webkitMaskImage",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-image",
+    subproperties: ["mask-image"],
+  },
+  "-webkit-mask-origin": {
+    domProp: "webkitMaskOrigin",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-origin",
+    subproperties: ["mask-origin"],
+  },
+  "-webkit-mask-position": {
+    domProp: "webkitMaskPosition",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-position",
+    subproperties: ["mask-position"],
+  },
+  "-webkit-mask-position-x": {
+    domProp: "webkitMaskPositionX",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-position-x",
+    subproperties: ["mask-position-x"],
+  },
+  "-webkit-mask-position-y": {
+    domProp: "webkitMaskPositionY",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-position-y",
+    subproperties: ["mask-position-y"],
+  },
+  "-webkit-mask-repeat": {
+    domProp: "webkitMaskRepeat",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-repeat",
+    subproperties: ["mask-repeat"],
+  },
+  "-webkit-mask-size": {
+    domProp: "webkitMaskSize",
+    inherited: false,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+    alias_for: "mask-size",
+    subproperties: ["mask-size"],
+  },
+}; // end of gCSSProperties
+
+// Get the computed value for a property.  For shorthands, return the
+// computed values of all the subproperties, delimited by " ; ".
+function get_computed_value(cs, property) {
+  var info = gCSSProperties[property];
+  if (
+    info.type == CSS_TYPE_TRUE_SHORTHAND ||
+    info.type == CSS_TYPE_LEGACY_SHORTHAND ||
+    (info.type == CSS_TYPE_SHORTHAND_AND_LONGHAND &&
+      (property == "text-decoration" || property == "mask"))
+  ) {
+    var results = [];
+    for (var idx in info.subproperties) {
+      var subprop = info.subproperties[idx];
+      results.push(get_computed_value(cs, subprop));
+    }
+    return results.join(" ; ");
+  }
+  return cs.getPropertyValue(property);
+}
+
+{
+  const mozHiddenUnscrollableEnabled = IsCSSPropertyPrefEnabled(
+    "layout.css.overflow-moz-hidden-unscrollable.enabled"
+  );
+  const overlayEnabled = IsCSSPropertyPrefEnabled(
+    "layout.css.overflow-overlay.enabled"
+  );
+  for (let p of ["overflow", "overflow-x", "overflow-y"]) {
+    let prop = gCSSProperties[p];
+    let mozHiddenUnscrollableValues = mozHiddenUnscrollableEnabled
+      ? prop.other_values
+      : prop.invalid_values;
+    let overlayValues = overlayEnabled
+      ? prop.other_values
+      : prop.invalid_values;
+    mozHiddenUnscrollableValues.push("-moz-hidden-unscrollable");
+    overlayValues.push("overlay");
+    if (p == "overflow") {
+      mozHiddenUnscrollableValues.push(
+        "-moz-hidden-unscrollable -moz-hidden-unscrollable"
+      );
+      overlayValues.push("overlay overlay");
+    }
+  }
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.individual-transform.enabled")) {
+  gCSSProperties.rotate = {
+    domProp: "rotate",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "45deg",
+      "45grad",
+      "72rad",
+      "0.25turn",
+      ".57rad",
+      "0 0 0 0rad",
+      "0 0 1 45deg",
+      "0 0 1 0rad",
+      "0rad 0 0 1",
+      "10rad 10 20 30",
+      "x 10rad",
+      "y 10rad",
+      "z 10rad",
+      "10rad x",
+      "10rad y",
+      "10rad z",
+      /* valid calc() values */
+      "calc(1) 0 0 calc(45deg + 5rad)",
+      "0 1 0 calc(400grad + 1rad)",
+      "calc(0.5turn + 10deg)",
+    ],
+    invalid_values: [
+      "0",
+      "7",
+      "0, 0, 1, 45deg",
+      "0 0 45deg",
+      "0 0 20rad",
+      "0 0 0 0",
+      "x x 10rad",
+      "x y 10rad",
+      "0 0 1 10rad z",
+      "0 0 1 z 10rad",
+      "z 0 0 1 10rad",
+      "0 0 z 1 10rad",
+      /* invalid calc() values */
+      "0.5 1 0 calc(45deg + 10)",
+      "calc(0.5turn + 10%)",
+    ],
+  };
+
+  gCSSProperties.translate = {
+    domProp: "translate",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { width: "10px", height: "10px", display: "block" },
+    initial_values: ["none"],
+    other_values: [
+      "-4px",
+      "3px",
+      "4em",
+      "50%",
+      "4px 5px 6px",
+      "4px 5px",
+      "50% 5px 6px",
+      "50% 10% 6em",
+      /* valid calc() values */
+      "calc(5px + 10%)",
+      "calc(0.25 * 5px + 10% / 3)",
+      "calc(5px - 10% * 3)",
+      "calc(5px - 3 * 10%) 50px",
+      "-50px calc(5px - 10% * 3)",
+      "10px calc(min(5px,10%))",
+    ],
+    invalid_values: [
+      "1",
+      "-moz-min(5px,10%)",
+      "4px, 5px, 6px",
+      "3px 4px 1px 7px",
+      "4px 5px 10%",
+      /* invalid calc() values */
+      "calc(max(5px,10%) 10%)",
+      "calc(nonsense)",
+    ],
+  };
+  gCSSProperties.scale = {
+    domProp: "scale",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "10",
+      "10%",
+      "10 20",
+      "10% 20%",
+      "10 20 30",
+      "10% 20% 30%",
+      "10 20% 30",
+      "-10",
+      "-10%",
+      "-10 20",
+      "-10% 20%",
+      "-10 20 -30",
+      "-10% 20% -30%",
+      "-10 20% -30",
+      "0 2.0",
+      /* valid calc() values */
+      "calc(1 + 2)",
+      "calc(10) calc(20) 30",
+    ],
+    invalid_values: [
+      "10px",
+      "10deg",
+      "10, 20, 30",
+      /* invalid calc() values */
+      "calc(1 + 20%)",
+      "10 calc(1 + 10px)",
+    ],
+  };
+}
+
+gCSSProperties["touch-action"] = {
+  domProp: "touchAction",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["auto"],
+  other_values: [
+    "none",
+    "pan-x",
+    "pan-y",
+    "pinch-zoom",
+    "pan-x pan-y",
+    "pan-y pan-x",
+    "pinch-zoom pan-x",
+    "pinch-zoom pan-y",
+    "pan-x pinch-zoom",
+    "pan-y pinch-zoom",
+    "pinch-zoom pan-x pan-y",
+    "pinch-zoom pan-y pan-x",
+    "pan-x pinch-zoom pan-y",
+    "pan-y pinch-zoom pan-x",
+    "pan-x pan-y pinch-zoom",
+    "pan-y pan-x pinch-zoom",
+    "manipulation",
+  ],
+  invalid_values: [
+    "zoom",
+    "pinch",
+    "tap",
+    "10px",
+    "2",
+    "auto pan-x",
+    "pan-x auto",
+    "none pan-x",
+    "pan-x none",
+    "auto pan-y",
+    "pan-y auto",
+    "none pan-y",
+    "pan-y none",
+    "pan-x pan-x",
+    "pan-y pan-y",
+    "auto pinch-zoom",
+    "pinch-zoom auto",
+    "none pinch-zoom",
+    "pinch-zoom none",
+    "pinch-zoom pinch-zoom",
+    "pan-x pan-y none",
+    "pan-x none pan-y",
+    "none pan-x pan-y",
+    "pan-y pan-x none",
+    "pan-y none pan-x",
+    "none pan-y pan-x",
+    "pan-x pinch-zoom none",
+    "pan-x none pinch-zoom",
+    "none pan-x pinch-zoom",
+    "pinch-zoom pan-x none",
+    "pinch-zoom none pan-x",
+    "none pinch-zoom pan-x",
+    "pinch-zoom pan-y none",
+    "pinch-zoom none pan-y",
+    "none pinch-zoom pan-y",
+    "pan-y pinch-zoom none",
+    "pan-y none pinch-zoom",
+    "none pan-y pinch-zoom",
+    "pan-x pan-y auto",
+    "pan-x auto pan-y",
+    "auto pan-x pan-y",
+    "pan-y pan-x auto",
+    "pan-y auto pan-x",
+    "auto pan-y pan-x",
+    "pan-x pinch-zoom auto",
+    "pan-x auto pinch-zoom",
+    "auto pan-x pinch-zoom",
+    "pinch-zoom pan-x auto",
+    "pinch-zoom auto pan-x",
+    "auto pinch-zoom pan-x",
+    "pinch-zoom pan-y auto",
+    "pinch-zoom auto pan-y",
+    "auto pinch-zoom pan-y",
+    "pan-y pinch-zoom auto",
+    "pan-y auto pinch-zoom",
+    "auto pan-y pinch-zoom",
+    "pan-x pan-y zoom",
+    "pan-x zoom pan-y",
+    "zoom pan-x pan-y",
+    "pan-y pan-x zoom",
+    "pan-y zoom pan-x",
+    "zoom pan-y pan-x",
+    "pinch-zoom pan-y zoom",
+    "pinch-zoom zoom pan-y",
+    "zoom pinch-zoom pan-y",
+    "pan-y pinch-zoom zoom",
+    "pan-y zoom pinch-zoom",
+    "zoom pan-y pinch-zoom",
+    "pan-x pinch-zoom zoom",
+    "pan-x zoom pinch-zoom",
+    "zoom pan-x pinch-zoom",
+    "pinch-zoom pan-x zoom",
+    "pinch-zoom zoom pan-x",
+    "zoom pinch-zoom pan-x",
+    "pan-x pan-y pan-x",
+    "pan-x pan-x pan-y",
+    "pan-y pan-x pan-x",
+    "pan-y pan-x pan-y",
+    "pan-y pan-y pan-x",
+    "pan-x pan-y pan-y",
+    "pan-x pinch-zoom pan-x",
+    "pan-x pan-x pinch-zoom",
+    "pinch-zoom pan-x pan-x",
+    "pinch-zoom pan-x pinch-zoom",
+    "pinch-zoom pinch-zoom pan-x",
+    "pan-x pinch-zoom pinch-zoom",
+    "pinch-zoom pan-y pinch-zoom",
+    "pinch-zoom pinch-zoom pan-y",
+    "pan-y pinch-zoom pinch-zoom",
+    "pan-y pinch-zoom pan-y",
+    "pan-y pan-y pinch-zoom",
+    "pinch-zoom pan-y pan-y",
+    "manipulation none",
+    "none manipulation",
+    "manipulation auto",
+    "auto manipulation",
+    "manipulation zoom",
+    "zoom manipulation",
+    "manipulation manipulation",
+    "manipulation pan-x",
+    "pan-x manipulation",
+    "manipulation pan-y",
+    "pan-y manipulation",
+    "manipulation pinch-zoom",
+    "pinch-zoom manipulation",
+    "manipulation pan-x pan-y",
+    "pan-x manipulation pan-y",
+    "pan-x pan-y manipulation",
+    "manipulation pan-y pan-x",
+    "pan-y manipulation pan-x",
+    "pan-y pan-x manipulation",
+    "manipulation pinch-zoom pan-y",
+    "pinch-zoom manipulation pan-y",
+    "pinch-zoom pan-y manipulation",
+    "manipulation pan-y pinch-zoom",
+    "pan-y manipulation pinch-zoom",
+    "pan-y pinch-zoom manipulation",
+    "manipulation pan-x pinch-zoom",
+    "pan-x manipulation pinch-zoom",
+    "pan-x pinch-zoom manipulation",
+    "manipulation pinch-zoom pan-x",
+    "pinch-zoom manipulation pan-x",
+    "pinch-zoom pan-x manipulation",
+  ],
+};
+
+gCSSProperties["page"] = {
+  domProp: "page",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["auto"],
+  other_values: ["page", "small_page", "large_page", "A4"],
+  invalid_values: ["page1 page2", "auto page", "1cm"],
+};
+
+gCSSProperties["text-justify"] = {
+  domProp: "textJustify",
+  inherited: true,
+  type: CSS_TYPE_LONGHAND,
+  applies_to_placeholder: true,
+  initial_values: ["auto"],
+  other_values: ["none", "inter-word", "inter-character", "distribute"],
+  invalid_values: [],
+};
+
+if (IsCSSPropertyPrefEnabled("layout.css.font-variations.enabled")) {
+  gCSSProperties["font-variation-settings"] = {
+    domProp: "fontVariationSettings",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_marker: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: [
+      "'wdth' 0",
+      "'wdth' -.1",
+      '"wdth" 1',
+      "'wdth' 2, 'wght' 3",
+      '"XXXX" 0',
+    ],
+    invalid_values: [
+      "wdth",
+      "wdth 1", // unquoted tags
+      "'wdth'",
+      "'wdth' 'wght'",
+      "'wdth', 'wght'", // missing values
+      "'' 1",
+      "'wid' 1",
+      "'width' 1", // incorrect tag lengths
+      "'wd\th' 1", // non-graphic character in tag
+      "'wdth' 1 'wght' 2", // missing comma between pairs
+      "'wdth' 1,", // trailing comma
+      "'wdth' 1 , , 'wght' 2", // extra comma
+      "'wdth', 1", // comma within pair
+    ],
+    unbalanced_values: [
+      "'wdth\" 1",
+      "\"wdth' 1", // mismatched quotes
+    ],
+  };
+  gCSSProperties["font"].subproperties.push("font-variation-settings");
+  gCSSProperties["font-optical-sizing"] = {
+    domProp: "fontOpticalSizing",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_marker: true,
+    applies_to_cue: true,
+    initial_values: ["auto"],
+    other_values: ["none"],
+    invalid_values: ["on"],
+  };
+  gCSSProperties["font"].subproperties.push("font-optical-sizing");
+  gCSSProperties["font-variation-settings"].other_values.push(
+    "'vert' calc(2.5)"
+  );
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.font-palette.enabled")) {
+  gCSSProperties["font-palette"] = {
+    domProp: "fontPalette",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    initial_values: ["normal"],
+    other_values: ["light", "dark", "--custom"],
+    invalid_values: ["custom"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.font-variant-emoji.enabled")) {
+  gCSSProperties["font"].subproperties.push("font-variant-emoji");
+  gCSSProperties["font-variant"].subproperties.push("font-variant-emoji");
+  gCSSProperties["font-variant-emoji"] = {
+    domProp: "fontVariantEmoji",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_marker: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    initial_values: ["normal"],
+    other_values: ["text", "emoji", "unicode"],
+    invalid_values: [
+      "none",
+      "auto",
+      "text emoji",
+      "auto text",
+      "normal, unicode",
+    ],
+  };
+}
+
+var isGridTemplateMasonryValueEnabled = IsCSSPropertyPrefEnabled(
+  "layout.css.grid-template-masonry-value.enabled"
+);
+
+if (isGridTemplateMasonryValueEnabled) {
+  gCSSProperties["masonry-auto-flow"] = {
+    domProp: "masonryAutoFlow",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["pack"],
+    other_values: ["pack ordered", "ordered next", "next definite-first"],
+    invalid_values: ["auto", "none", "10px", "row", "dense"],
+  };
+
+  let alignTracks = { ...gCSSProperties["align-content"] };
+  alignTracks.domProp = "alignTracks";
+  gCSSProperties["align-tracks"] = alignTracks;
+
+  let justifyTracks = { ...gCSSProperties["justify-content"] };
+  justifyTracks.domProp = "justifyTracks";
+  gCSSProperties["justify-tracks"] = justifyTracks;
+}
+
+gCSSProperties["display"].other_values.push("grid", "inline-grid");
+gCSSProperties["grid-auto-flow"] = {
+  domProp: "gridAutoFlow",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["row"],
+  other_values: [
+    "column",
+    "column dense",
+    "row dense",
+    "dense column",
+    "dense row",
+    "dense",
+  ],
+  invalid_values: ["", "auto", "none", "10px", "column row", "dense row dense"],
+};
+
+gCSSProperties["grid-auto-columns"] = {
+  domProp: "gridAutoColumns",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["auto"],
+  other_values: [
+    "40px",
+    "2em",
+    "2.5fr",
+    "12%",
+    "min-content",
+    "max-content",
+    "calc(2px - 99%)",
+    "minmax(20px, max-content)",
+    "minmax(min-content, auto)",
+    "minmax(auto, max-content)",
+    "m\\69nmax(20px, 4Fr)",
+    "MinMax(min-content, calc(20px + 10%))",
+    "fit-content(1px)",
+    "fit-content(calc(1px - 99%))",
+    "fit-content(10%)",
+    "40px 12%",
+    "2.5fr min-content fit-content(1px)",
+  ],
+  invalid_values: [
+    "",
+    "normal",
+    "40ms",
+    "-40px",
+    "-12%",
+    "-2em",
+    "-2.5fr",
+    "minmax()",
+    "minmax(20px)",
+    "mİnmax(20px, 100px)",
+    "minmax(20px, 100px, 200px)",
+    "maxmin(100px, 20px)",
+    "minmax(min-content, minmax(30px, max-content))",
+    "fit-content(-1px)",
+    "fit-content(auto)",
+    "fit-content(min-content)",
+    "1px [a] 1px",
+  ],
+};
+gCSSProperties["grid-auto-rows"] = {
+  domProp: "gridAutoRows",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: gCSSProperties["grid-auto-columns"].initial_values,
+  other_values: gCSSProperties["grid-auto-columns"].other_values,
+  invalid_values: gCSSProperties["grid-auto-columns"].invalid_values,
+};
+
+gCSSProperties["grid-template-columns"] = {
+  domProp: "gridTemplateColumns",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["none"],
+  other_values: [
+    "auto",
+    "40px",
+    "2.5fr",
+    "[normal] 40px [] auto [ ] 12%",
+    "[foo] 40px min-content [ bar ] calc(2px - 99%) max-content",
+    "40px min-content calc(20px + 10%) max-content",
+    "minmax(min-content, auto)",
+    "minmax(auto, max-content)",
+    "m\\69nmax(20px, 4Fr)",
+    "40px MinMax(min-content, calc(20px + 10%)) max-content",
+    "40px 2em",
+    "[] 40px [-foo] 2em [bar baz This is one ident]",
+    // TODO bug 978478: "[a] repeat(3, [b] 20px [c] 40px [d]) [e]",
+    "repeat(1, 20px)",
+    "repeat(1, [a] 20px)",
+    "[a] Repeat(4, [a] 20px [] auto [b c]) [d]",
+    "[a] 2.5fr Repeat(4, [a] 20px [] auto [b c]) [d]",
+    "[a] 2.5fr [z] Repeat(4, [a] 20px [] auto [b c]) [d]",
+    "[a] 2.5fr [z] Repeat(4, [a] 20px [] auto) [d]",
+    "[a] 2.5fr [z] Repeat(4, 20px [b c] auto [b c]) [d]",
+    "[a] 2.5fr [z] Repeat(4, 20px auto) [d]",
+    "repeat(auto-fill, 0)",
+    "[a] repeat( Auto-fill,1%)",
+    "minmax(auto,0) [a] repeat(Auto-fit, 0) minmax(0,auto)",
+    "minmax(calc(1% + 1px),auto) repeat(Auto-fit,[] 1%) minmax(auto,1%)",
+    "[a] repeat( auto-fit,[a b] minmax(0,0) )",
+    "[a] 40px repeat(auto-fit,[a b] minmax(1px, 0) [])",
+    "[a] calc(1px - 99%) [b] repeat(auto-fit,[a b] minmax(1mm, 1%) [c]) [c]",
+    "repeat(auto-fill, 0 0)",
+    "repeat(auto-fill, 0 [] 0)",
+    "repeat(auto-fill,minmax(1%,auto))",
+    "repeat(auto-fill,minmax(1em,min-content)) minmax(min-content,0)",
+    "repeat(auto-fill,minmax(max-content,1mm))",
+    "repeat(2, fit-content(1px))",
+    "fit-content(1px) 1fr",
+    "[a] fit-content(calc(1px - 99%)) [b]",
+    "[a] fit-content(10%) [b c] fit-content(1em)",
+    // See https://bugzilla.mozilla.org/show_bug.cgi?id=981300
+    "[none subgrid min-content max-content foo] 40px",
+    "subgrid",
+    "subgrid [] [foo bar]",
+    "subgrid repeat(1, [])",
+    "subgrid Repeat(4, [a] [b c] [] [d])",
+    "subgrid repeat(auto-fill, [])",
+    "subgrid repeat(Auto-fill, [a b c]) [a] []",
+    "subgrid [x] repeat( Auto-fill, [a b c]) []",
+    "subgrid [x] repeat( auto-fill , [a b] [c]) [y]",
+    "subgrid repeat(auto-fill, [a] [b] [c]) [d]",
+    "subgrid repeat(Auto-fill, [a] [b c] [] [d])",
+    "subgrid [x y] [x] repeat(auto-fill, [a b] [c] [d] [d]) [x] [x]",
+    "subgrid [x] repeat(auto-fill, []) [y z]",
+    "subgrid [x] repeat(auto-fill, [y]) [z] [] repeat(2, [a] [b]) [y] []",
+    "subgrid [x] repeat(auto-fill, []) [x y] [z] [] []",
+  ],
+  invalid_values: [
+    "",
+    "normal",
+    "40ms",
+    "-40px",
+    "-12%",
+    "-2fr",
+    "[foo]",
+    "[inherit] 40px",
+    "[initial] 40px",
+    "[unset] 40px",
+    "[default] 40px",
+    "[span] 40px",
+    "[6%] 40px",
+    "[5th] 40px",
+    "[foo[] bar] 40px",
+    "[foo]] 40px",
+    "(foo) 40px",
+    "[foo] [bar] 40px",
+    "40px [foo] [bar]",
+    "minmax()",
+    "minmax(20px)",
+    "mİnmax(20px, 100px)",
+    "minmax(20px, 100px, 200px)",
+    "maxmin(100px, 20px)",
+    "minmax(min-content, minmax(30px, max-content))",
+    "repeat(0, 20px)",
+    "repeat(-3, 20px)",
+    "rêpeat(1, 20px)",
+    "repeat(1)",
+    "repeat(1, )",
+    "repeat(3px, 20px)",
+    "repeat(2.0, 20px)",
+    "repeat(2.5, 20px)",
+    "repeat(2, (foo))",
+    "repeat(2, foo)",
+    "40px calc(0px + rubbish)",
+    "repeat(1, repeat(1, 20px))",
+    "repeat(auto-fill, auto)",
+    "repeat(auto-fit,auto)",
+    "repeat(auto-fill, fit-content(1px))",
+    "repeat(auto-fit, fit-content(1px))",
+    "repeat(auto-fit,[])",
+    "repeat(auto-fill, 0) repeat(auto-fit, 0) ",
+    "repeat(auto-fit, 0) repeat(auto-fill, 0) ",
+    "[a] repeat(auto-fit, 0) repeat(auto-fit, 0) ",
+    "[a] repeat(auto-fill, 0) [a] repeat(auto-fill, 0) ",
+    "repeat(auto-fill, min-content)",
+    "repeat(auto-fit,max-content)",
+    "repeat(auto-fit,1fr)",
+    "repeat(auto-fit,minmax(auto,auto))",
+    "repeat(auto-fit,minmax(min-content,1fr))",
+    "repeat(auto-fit,minmax(1fr,auto))",
+    "repeat(auto-fill,minmax(1fr,1em))",
+    "repeat(auto-fill, 10px) auto",
+    "auto repeat(auto-fit, 10px)",
+    "minmax(min-content,max-content) repeat(auto-fit, 0)",
+    "10px [a] 10px [b a] 1fr [b] repeat(auto-fill, 0)",
+    "fit-content(-1px)",
+    "fit-content(auto)",
+    "fit-content(min-content)",
+    "fit-content(1px) repeat(auto-fit, 1px)",
+    "fit-content(1px) repeat(auto-fill, 1px)",
+    "subgrid [inherit]",
+    "subgrid [initial]",
+    "subgrid [unset]",
+    "subgrid [default]",
+    "subgrid [span]",
+    "subgrid [foo] 40px",
+    "subgrid [foo 40px]",
+    "[foo] subgrid",
+    "subgrid rêpeat(1, [])",
+    "subgrid repeat(0, [])",
+    "subgrid repeat(-3, [])",
+    "subgrid repeat(2.0, [])",
+    "subgrid repeat(2.5, [])",
+    "subgrid repeat(3px, [])",
+    "subgrid repeat(1)",
+    "subgrid repeat(1, )",
+    "subgrid repeat(2, [40px])",
+    "subgrid repeat(2, foo)",
+    "subgrid repeat(1, repeat(1, []))",
+    "subgrid repeat(auto-fill)",
+    "subgrid repeat(auto-fill) [a]",
+    "subgrid repeat(auto-fill) []",
+    "subgrid [a] repeat(auto-fill)",
+    "subgrid repeat(auto-fill,)",
+    "subgrid repeat(auto-fill,)",
+    "subgrid repeat(auto-fill,) [a]",
+    "subgrid repeat(auto-fill,) []",
+    "subgrid [a] repeat(auto-fill,)",
+    "subgrid repeat(auto-fit,[])",
+    "subgrid [] repeat(auto-fit,[])",
+    "subgrid [a] repeat(auto-fit,[])",
+    "subgrid repeat(auto-fill, 1px)",
+    "subgrid repeat(auto-fill, 1px [])",
+    "subgrid repeat(auto-fill, []) repeat(auto-fill, [])",
+  ],
+  unbalanced_values: ["(foo] 40px"],
+};
+if (isGridTemplateMasonryValueEnabled) {
+  gCSSProperties["grid-template-columns"].other_values.push("masonry");
+  gCSSProperties["grid-template-columns"].invalid_values.push(
+    "masonry []",
+    "masonry [foo] 40px",
+    "masonry 40px",
+    "[foo] masonry",
+    "0px masonry",
+    "masonry masonry",
+    "subgrid masonry",
+    "masonry subgrid",
+    "masonry repeat(1, [])"
+  );
+}
+gCSSProperties["grid-template-rows"] = {
+  domProp: "gridTemplateRows",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: gCSSProperties["grid-template-columns"].initial_values,
+  other_values: gCSSProperties["grid-template-columns"].other_values,
+  invalid_values: gCSSProperties["grid-template-columns"].invalid_values,
+};
+gCSSProperties["grid-template-areas"] = {
+  domProp: "gridTemplateAreas",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["none"],
+  other_values: [
+    "'1a-é_ .' \"b .\"",
+    "' Z\t\\aZ' 'Z Z'",
+    " '. . a b'  '. .a b' ",
+    "'a.b' '. . .'",
+    "'.' '..'",
+    "'...' '.'",
+    "'...-blah' '. .'",
+    "'.. ..' '.. ...'",
+  ],
+  invalid_values: [
+    "''",
+    "' '",
+    "'' ''",
+    "'a b' 'a/b'",
+    "'a . a'",
+    "'. a a' 'a a a'",
+    "'a a .' 'a a a'",
+    "'a a' 'a .'",
+    "'a a'\n'..'\n'a a'",
+  ],
+};
+
+gCSSProperties["grid-template"] = {
+  domProp: "gridTemplate",
+  inherited: false,
+  type: CSS_TYPE_TRUE_SHORTHAND,
+  subproperties: [
+    "grid-template-areas",
+    "grid-template-rows",
+    "grid-template-columns",
+  ],
+  initial_values: ["none", "none / none"],
+  other_values: [
+    // <'grid-template-rows'> / <'grid-template-columns'>
+    "40px / 100px",
+    "[foo] 40px [bar] / [baz] repeat(auto-fill,100px) [fizz]",
+    " none/100px",
+    "40px/none",
+    // [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
+    "'fizz'",
+    "[bar] 'fizz'",
+    "'fizz' / [foo] 40px",
+    "[bar] 'fizz' / [foo] 40px",
+    "'fizz' 100px / [foo] 40px",
+    "[bar] 'fizz' 100px / [foo] 40px",
+    "[bar] 'fizz' 100px [buzz] / [foo] 40px",
+    "[bar] 'fizz' 100px [buzz] \n [a] '.' 200px [b] / [foo] 40px",
+    "subgrid / subgrid",
+    "subgrid/40px 20px",
+    "subgrid [foo] [] [bar baz] / 40px 20px",
+    "40px 20px/subgrid",
+    "40px 20px/subgrid  [foo] [] repeat(3, [a] [b]) [bar baz]",
+    "subgrid/subgrid",
+    "subgrid [foo] [] [bar baz]/subgrid [foo] [] [bar baz]",
+  ],
+  invalid_values: [
+    "'fizz' / repeat(1, 100px)",
+    "'fizz' repeat(1, 100px) / 0px",
+    "[foo] [bar] 40px / 100px",
+    "[fizz] [buzz] 100px / 40px",
+    "[fizz] [buzz] 'foo' / 40px",
+    "'foo' / none",
+    "subgrid",
+    "subgrid []",
+    "subgrid [] / 'fizz'",
+    "subgrid / 'fizz'",
+  ],
+};
+if (isGridTemplateMasonryValueEnabled) {
+  gCSSProperties["grid-template"].other_values.push(
+    "masonry / subgrid",
+    "subgrid / masonry",
+    "masonry / masonry" /* valid but behaves as 'masonry / none' */,
+    "masonry/40px 20px",
+    "subgrid [foo] [] [bar baz] / masonry",
+    "40px 20px/masonry",
+    "masonry/subgrid  [foo] [] repeat(3, [a] [b]) [bar baz]",
+    "subgrid [foo] [] [bar baz]/masonry"
+  );
+  gCSSProperties["grid-template"].invalid_values.push(
+    "masonry",
+    "masonry / 'fizz'"
+  );
+}
+
+gCSSProperties["grid"] = {
+  domProp: "grid",
+  inherited: false,
+  type: CSS_TYPE_TRUE_SHORTHAND,
+  subproperties: [
+    "grid-template-areas",
+    "grid-template-rows",
+    "grid-template-columns",
+    "grid-auto-flow",
+    "grid-auto-rows",
+    "grid-auto-columns",
+  ],
+  initial_values: ["none", "none / none"],
+  other_values: [
+    "auto-flow 40px / none",
+    "auto-flow 40px 100px / 0",
+    "auto-flow / 40px",
+    "auto-flow dense auto / auto",
+    "dense auto-flow minmax(min-content, 2fr) / auto",
+    "dense auto-flow / 100px",
+    "none / auto-flow 40px",
+    "40px / auto-flow",
+    "none / dense auto-flow auto",
+  ].concat(gCSSProperties["grid-template"].other_values),
+  invalid_values: [
+    "auto-flow",
+    " / auto-flow",
+    "dense 0 / 0",
+    "dense dense 40px / 0",
+    "auto-flow / auto-flow",
+    "auto-flow / dense",
+    "auto-flow [a] 0 / 0",
+    "0 / auto-flow [a] 0",
+    "auto-flow -20px / 0",
+    "auto-flow 200ms / 0",
+    "auto-flow 1px [a] 1px / 0",
+  ].concat(
+    gCSSProperties["grid-template"].invalid_values,
+    gCSSProperties["grid-auto-flow"].other_values,
+    gCSSProperties["grid-auto-flow"].invalid_values.filter(v => v != "none")
+  ),
+};
+
+var gridLineOtherValues = [
+  "foo",
+  "2",
+  "2 foo",
+  "foo 2",
+  "-3",
+  "-3 bar",
+  "bar -3",
+  "span 2",
+  "2 span",
+  "span foo",
+  "foo span",
+  "span 2 foo",
+  "span foo 2",
+  "2 foo span",
+  "foo 2 span",
+];
+var gridLineInvalidValues = [
+  "",
+  "4th",
+  "span",
+  "inherit 2",
+  "2 inherit",
+  "20px",
+  "2 3",
+  "2.5",
+  "2.0",
+  "0",
+  "0 foo",
+  "span 0",
+  "2 foo 3",
+  "foo 2 foo",
+  "2 span foo",
+  "foo span 2",
+  "span -3",
+  "span -3 bar",
+  "span 2 span",
+  "span foo span",
+  "span 2 foo span",
+];
+
+gCSSProperties["grid-column-start"] = {
+  domProp: "gridColumnStart",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["auto"],
+  other_values: gridLineOtherValues,
+  invalid_values: gridLineInvalidValues,
+};
+gCSSProperties["grid-column-end"] = {
+  domProp: "gridColumnEnd",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["auto"],
+  other_values: gridLineOtherValues,
+  invalid_values: gridLineInvalidValues,
+};
+gCSSProperties["grid-row-start"] = {
+  domProp: "gridRowStart",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["auto"],
+  other_values: gridLineOtherValues,
+  invalid_values: gridLineInvalidValues,
+};
+gCSSProperties["grid-row-end"] = {
+  domProp: "gridRowEnd",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["auto"],
+  other_values: gridLineOtherValues,
+  invalid_values: gridLineInvalidValues,
+};
+
+// The grid-column and grid-row shorthands take values of the form
+//   <grid-line> [ / <grid-line> ]?
+var gridColumnRowOtherValues = [].concat(gridLineOtherValues);
+gridLineOtherValues.concat(["auto"]).forEach(function (val) {
+  gridColumnRowOtherValues.push(" foo / " + val);
+  gridColumnRowOtherValues.push(val + "/2");
+});
+var gridColumnRowInvalidValues = ["foo, bar", "foo / bar / baz"].concat(
+  gridLineInvalidValues
+);
+gridLineInvalidValues.forEach(function (val) {
+  gridColumnRowInvalidValues.push("span 3 / " + val);
+  gridColumnRowInvalidValues.push(val + " / foo");
+});
+gCSSProperties["grid-column"] = {
+  domProp: "gridColumn",
+  inherited: false,
+  type: CSS_TYPE_TRUE_SHORTHAND,
+  subproperties: ["grid-column-start", "grid-column-end"],
+  initial_values: ["auto", "auto / auto"],
+  other_values: gridColumnRowOtherValues,
+  invalid_values: gridColumnRowInvalidValues,
+};
+gCSSProperties["grid-row"] = {
+  domProp: "gridRow",
+  inherited: false,
+  type: CSS_TYPE_TRUE_SHORTHAND,
+  subproperties: ["grid-row-start", "grid-row-end"],
+  initial_values: ["auto", "auto / auto"],
+  other_values: gridColumnRowOtherValues,
+  invalid_values: gridColumnRowInvalidValues,
+};
+
+var gridAreaOtherValues = gridLineOtherValues.slice();
+gridLineOtherValues.forEach(function (val) {
+  gridAreaOtherValues.push("foo / " + val);
+  gridAreaOtherValues.push(val + "/2/3");
+  gridAreaOtherValues.push("foo / bar / " + val + " / baz");
+});
+var gridAreaInvalidValues = [
+  "foo, bar",
+  "foo / bar / baz / fizz / buzz",
+  "default / foo / bar / baz",
+  "foo / initial / bar / baz",
+  "foo / bar / inherit / baz",
+  "foo / bar / baz / unset",
+].concat(gridLineInvalidValues);
+gridLineInvalidValues.forEach(function (val) {
+  gridAreaInvalidValues.push("foo / " + val);
+  gridAreaInvalidValues.push("foo / bar / " + val);
+  gridAreaInvalidValues.push("foo / 4 / bar / " + val);
+});
+
+gCSSProperties["grid-area"] = {
+  domProp: "gridArea",
+  inherited: false,
+  type: CSS_TYPE_TRUE_SHORTHAND,
+  subproperties: [
+    "grid-row-start",
+    "grid-column-start",
+    "grid-row-end",
+    "grid-column-end",
+  ],
+  initial_values: [
+    "auto",
+    "auto / auto",
+    "auto / auto / auto",
+    "auto / auto / auto / auto",
+  ],
+  other_values: gridAreaOtherValues,
+  invalid_values: gridAreaInvalidValues,
+};
+
+gCSSProperties["column-gap"] = {
+  domProp: "columnGap",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["normal"],
+  other_values: [
+    "2px",
+    "2%",
+    "1em",
+    "calc(1px + 1em)",
+    "calc(1%)",
+    "calc(1% + 1ch)",
+    "calc(1px - 99%)",
+  ],
+  invalid_values: [
+    "-1px",
+    "auto",
+    "none",
+    "1px 1px",
+    "-1%",
+    "fit-content(1px)",
+  ],
+};
+gCSSProperties["grid-column-gap"] = {
+  domProp: "gridColumnGap",
+  inherited: false,
+  type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+  alias_for: "column-gap",
+  subproperties: ["column-gap"],
+};
+gCSSProperties["row-gap"] = {
+  domProp: "rowGap",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["normal"],
+  other_values: [
+    "2px",
+    "2%",
+    "1em",
+    "calc(1px + 1em)",
+    "calc(1%)",
+    "calc(1% + 1ch)",
+    "calc(1px - 99%)",
+  ],
+  invalid_values: ["-1px", "auto", "none", "1px 1px", "-1%", "min-content"],
+};
+gCSSProperties["grid-row-gap"] = {
+  domProp: "gridRowGap",
+  inherited: false,
+  type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
+  alias_for: "row-gap",
+  subproperties: ["row-gap"],
+};
+gCSSProperties["gap"] = {
+  domProp: "gap",
+  inherited: false,
+  type: CSS_TYPE_TRUE_SHORTHAND,
+  subproperties: ["column-gap", "row-gap"],
+  initial_values: ["normal", "normal normal"],
+  other_values: [
+    "1ch 0",
+    "1px 1%",
+    "1em 1px",
+    "calc(1px) calc(1%)",
+    "normal 0",
+    "1% normal",
+  ],
+  invalid_values: [
+    "-1px",
+    "1px -1px",
+    "1px 1px 1px",
+    "inherit 1px",
+    "1px auto",
+  ],
+};
+gCSSProperties["grid-gap"] = {
+  domProp: "gridGap",
+  inherited: false,
+  type: CSS_TYPE_TRUE_SHORTHAND,
+  alias_for: "gap",
+  subproperties: ["column-gap", "row-gap"],
+};
+
+gCSSProperties["contain"] = {
+  domProp: "contain",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["none"],
+  other_values: [
+    "strict",
+    "layout",
+    "size",
+    "content",
+    "paint",
+    "layout paint",
+    "paint layout",
+    "size layout",
+    "paint size",
+    "layout size paint",
+    "layout paint size",
+    "size paint layout",
+    "paint size layout",
+  ],
+  invalid_values: [
+    "none strict",
+    "none size",
+    "strict layout",
+    "strict layout size",
+    "layout strict",
+    "layout content",
+    "strict content",
+    "layout size strict",
+    "layout size paint strict",
+    "paint strict",
+    "size strict",
+    "paint paint",
+    "content content",
+    "size content",
+    "content strict size",
+    "paint layout content",
+    "layout size content",
+    "size size",
+    "strict strict",
+    "auto",
+    "10px",
+    "0",
+  ],
+};
+
+if (IsCSSPropertyPrefEnabled("layout.css.initial-letter.enabled")) {
+  gCSSProperties["initial-letter"] = {
+    domProp: "initialLetter",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: ["normal"],
+    other_values: ["2", "2.5", "3.7 2", "4 3"],
+    invalid_values: ["-3", "3.7 -2", "25%", "16px", "1 0", "0", "0 1"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.osx-font-smoothing.enabled")) {
+  gCSSProperties["-moz-osx-font-smoothing"] = {
+    domProp: "MozOsxFontSmoothing",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    applies_to_marker: true,
+    initial_values: ["auto"],
+    other_values: ["grayscale"],
+    invalid_values: ["none", "subpixel-antialiased", "antialiased"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.scroll-anchoring.enabled")) {
+  gCSSProperties["overflow-anchor"] = {
+    domProp: "overflowAnchor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["none"],
+    invalid_values: [],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.overflow-clip-box.enabled")) {
+  gCSSProperties["overflow-clip-box-block"] = {
+    domProp: "overflowClipBoxBlock",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_placeholder: true,
+    initial_values: ["padding-box"],
+    other_values: ["content-box"],
+    invalid_values: ["auto", "border-box", "0", "padding-box padding-box"],
+  };
+  gCSSProperties["overflow-clip-box-inline"] = {
+    domProp: "overflowClipBoxInline",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_placeholder: true,
+    initial_values: ["padding-box"],
+    other_values: ["content-box"],
+    invalid_values: ["none", "border-box", "0", "content-box content-box"],
+  };
+  gCSSProperties["overflow-clip-box"] = {
+    domProp: "overflowClipBox",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["overflow-clip-box-block", "overflow-clip-box-inline"],
+    initial_values: ["padding-box"],
+    other_values: [
+      "content-box",
+      "padding-box content-box",
+      "content-box padding-box",
+      "content-box content-box",
+    ],
+    invalid_values: [
+      "none",
+      "auto",
+      "content-box none",
+      "border-box",
+      "0",
+      "content-box, content-box",
+    ],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.overscroll-behavior.enabled")) {
+  gCSSProperties["overscroll-behavior-x"] = {
+    domProp: "overscrollBehaviorX",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["contain", "none"],
+    invalid_values: ["left", "1px"],
+  };
+  gCSSProperties["overscroll-behavior-y"] = {
+    domProp: "overscrollBehaviorY",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["contain", "none"],
+    invalid_values: ["left", "1px"],
+  };
+  gCSSProperties["overscroll-behavior-inline"] = {
+    domProp: "overscrollBehaviorInline",
+    inherited: false,
+    logical: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["contain", "none"],
+    invalid_values: ["left", "1px"],
+  };
+  gCSSProperties["overscroll-behavior-block"] = {
+    domProp: "overscrollBehaviorBlock",
+    inherited: false,
+    logical: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["contain", "none"],
+    invalid_values: ["left", "1px"],
+  };
+  gCSSProperties["overscroll-behavior"] = {
+    domProp: "overscrollBehavior",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["overscroll-behavior-x", "overscroll-behavior-y"],
+    initial_values: ["auto"],
+    other_values: [
+      "contain",
+      "none",
+      "contain contain",
+      "contain auto",
+      "none contain",
+    ],
+    invalid_values: ["left", "1px", "contain auto none", "contain nonsense"],
+  };
+}
+
+{
+  const patterns = {
+    background: [
+      "{} scroll no-repeat",
+      "{} repeat",
+      "url(404.png), {}, -moz-element(#a) black",
+    ],
+    mask: [
+      "{} add no-repeat",
+      "{} repeat",
+      "url(404.png), {}, -moz-element(#a) alpha",
+    ],
+  };
+
+  for (const prop of ["background", "mask"]) {
+    let i = 0;
+    const p = patterns[prop];
+    for (const v of invalidNonUrlImageValues) {
+      gCSSProperties[prop].invalid_values.push(
+        p[i++ % p.length].replace("{}", v)
+      );
+    }
+    for (const v of validNonUrlImageValues) {
+      gCSSProperties[prop].other_values.push(
+        p[i++ % p.length].replace("{}", v)
+      );
+    }
+  }
+}
+
+gCSSProperties["display"].other_values.push("flow-root");
+
+if (IsCSSPropertyPrefEnabled("layout.css.hyphenate-character.enabled")) {
+  gCSSProperties["hyphenate-character"] = {
+    domProp: "hyphenateCharacter",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    applies_to_first_line: true,
+    applies_to_placeholder: true,
+    initial_values: ["auto"],
+    other_values: ['"="', '"/-/"', '"\1400"', '""'],
+    invalid_values: ["none", "auto auto", "1400", "U+1400"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.content-visibility.enabled")) {
+  gCSSProperties["content-visibility"] = {
+    domProp: "contentVisibility",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["visible"],
+    other_values: ["auto", "hidden"],
+    invalid_values: [
+      "invisible",
+      "partially-visible",
+      "auto auto",
+      "visible hidden",
+    ],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.contain-intrinsic-size.enabled")) {
+  gCSSProperties["contain-intrinsic-width"] = {
+    domProp: "containIntrinsicWidth",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["1em", "1px", "auto 1px"],
+    invalid_values: ["auto auto", "auto none", "auto", "-1px"],
+  };
+  gCSSProperties["contain-intrinsic-height"] = {
+    domProp: "containIntrinsicHeight",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["1em", "1px", "auto 1px"],
+    invalid_values: ["auto auto", "auto none", "auto", "-1px"],
+  };
+  gCSSProperties["contain-intrinsic-block-size"] = {
+    domProp: "containIntrinsicBlockSize",
+    inherited: false,
+    logical: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["1em", "1px", "auto 1px"],
+    invalid_values: ["auto auto", "auto none", "auto", "-1px"],
+  };
+  gCSSProperties["contain-intrinsic-inline-size"] = {
+    domProp: "containIntrinsicInlineSize",
+    inherited: false,
+    logical: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["1em", "1px", "auto 1px"],
+    invalid_values: ["auto auto", "auto none", "auto", "-1px"],
+  };
+
+  gCSSProperties["contain-intrinsic-size"] = {
+    domProp: "containIntrinsicSize",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["contain-intrinsic-width", "contain-intrinsic-height"],
+    initial_values: ["none"],
+    other_values: ["1em 1em", "1px 1px", "auto 1px auto 1px", "1px auto 1px"],
+    invalid_values: ["auto auto", "-1px -1px", "1px, auto none"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.container-queries.enabled")) {
+  gCSSProperties["container-type"] = {
+    domProp: "containerType",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: ["inline-size", "size"],
+    invalid_values: [
+      "none style",
+      "none inline-size",
+      "inline-size none",
+      "style none",
+      "style style",
+      "inline-size style inline-size",
+      "inline-size block-size",
+      "block-size",
+      "block-size style",
+      "size inline-size",
+      "size block-size",
+    ],
+  };
+  gCSSProperties["container-name"] = {
+    domProp: "containerName",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: ["foo bar", "foo", "baz bazz", "foo foo"],
+    invalid_values: ["foo unset", "none bar", "foo initial", "initial foo"],
+  };
+  gCSSProperties["container"] = {
+    domProp: "container",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["container-type", "container-name"],
+    initial_values: ["none"],
+    other_values: ["foo / size", "foo bar / size", "foo / inline-size", "foo"],
+    invalid_values: ["size / foo", "size / foo bar"],
+  };
+}
+
+if (false) {
+  // TODO These properties are chrome-only, and are not exposed via CSSOM.
+  // We may still want to find a way to test them. See bug 1206999.
+  gCSSProperties["-moz-window-shadow"] = {
+    //domProp: "MozWindowShadow",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["default"],
+    other_values: ["none", "menu", "tooltip", "sheet", "cliprounded"],
+    invalid_values: [],
+  };
+
+  gCSSProperties["-moz-window-opacity"] = {
+    // domProp: "MozWindowOpacity",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: [
+      "1",
+      "17",
+      "397.376",
+      "3e1",
+      "3e+1",
+      "3e0",
+      "3e+0",
+      "3e-0",
+      "300%",
+    ],
+    other_values: ["0", "0.4", "0.0000", "-3", "3e-1", "-100%", "50%"],
+    invalid_values: ["0px", "1px", "20%", "default", "auto"],
+  };
+
+  gCSSProperties["-moz-window-transform"] = {
+    // domProp: "MozWindowTransform",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    prerequisites: { width: "300px", height: "50px" },
+    initial_values: ["none"],
+    other_values: [
+      "translatex(1px)",
+      "translatex(4em)",
+      "translatex(-4px)",
+      "translatex(3px)",
+      "translatex(0px) translatex(1px) translatex(2px) translatex(3px) translatex(4px)",
+      "translatey(4em)",
+      "translate(3px)",
+      "translate(10px, -3px)",
+      "rotate(45deg)",
+      "rotate(45grad)",
+      "rotate(45rad)",
+      "rotate(0.25turn)",
+      "rotate(0)",
+      "scalex(10)",
+      "scalex(10%)",
+      "scalex(-10)",
+      "scalex(-10%)",
+      "scaley(10)",
+      "scaley(10%)",
+      "scaley(-10)",
+      "scaley(-10%)",
+      "scale(10)",
+      "scale(10%)",
+      "scale(10, 20)",
+      "scale(10%, 20%)",
+      "scale(-10)",
+      "scale(-10%)",
+      "scale(-10, 20)",
+      "scale(10%, -20%)",
+      "scale(10, 20%)",
+      "scale(-10, 20%)",
+      "skewx(30deg)",
+      "skewx(0)",
+      "skewy(0)",
+      "skewx(30grad)",
+      "skewx(30rad)",
+      "skewx(0.08turn)",
+      "skewy(30deg)",
+      "skewy(30grad)",
+      "skewy(30rad)",
+      "skewy(0.08turn)",
+      "rotate(45deg) scale(2, 1)",
+      "skewx(45deg) skewx(-50grad)",
+      "translate(0, 0) scale(1, 1) skewx(0) skewy(0) matrix(1, 0, 0, 1, 0, 0)",
+      "translatex(50%)",
+      "translatey(50%)",
+      "translate(50%)",
+      "translate(3%, 5px)",
+      "translate(5px, 3%)",
+      "matrix(1, 2, 3, 4, 5, 6)",
+      /* valid calc() values */
+      "translatex(calc(5px + 10%))",
+      "translatey(calc(0.25 * 5px + 10% / 3))",
+      "translate(calc(5px - 10% * 3))",
+      "translate(calc(5px - 3 * 10%), 50px)",
+      "translate(-50px, calc(5px - 10% * 3))",
+      "translatez(1px)",
+      "translatez(4em)",
+      "translatez(-4px)",
+      "translatez(0px)",
+      "translatez(2px) translatez(5px)",
+      "translate3d(3px, 4px, 5px)",
+      "translate3d(2em, 3px, 1em)",
+      "translatex(2px) translate3d(4px, 5px, 6px) translatey(1px)",
+      "scale3d(4, 4, 4)",
+      "scale3d(4%, 4%, 4%)",
+      "scale3d(-2, 3, -7)",
+      "scale3d(-2%, 3%, -7%)",
+      "scalez(4)",
+      "scalez(4%)",
+      "scalez(-6)",
+      "scalez(-6%)",
+      "rotate3d(2, 3, 4, 45deg)",
+      "rotate3d(-3, 7, 0, 12rad)",
+      "rotatex(15deg)",
+      "rotatey(-12grad)",
+      "rotatez(72rad)",
+      "rotatex(0.125turn)",
+      "perspective(0px)",
+      "perspective(1000px)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)",
+      "translate(10px, calc(min(5px,10%)))",
+      "translate(calc(max(5px,10%)), 10%)",
+      "translate(max(5px,10%), 10%)",
+    ],
+    invalid_values: [
+      "1px",
+      "#0000ff",
+      "red",
+      "auto",
+      "translatex(1)",
+      "translatey(1)",
+      "translate(2)",
+      "translate(-3, -4)",
+      "translatex(1px 1px)",
+      "translatex(translatex(1px))",
+      "translatex(#0000ff)",
+      "translatex(red)",
+      "translatey()",
+      "matrix(1px, 2px, 3px, 4px, 5px, 6px)",
+      "skewx(red)",
+      "matrix(1%, 0, 0, 0, 0px, 0px)",
+      "matrix(0, 1%, 2, 3, 4px,5px)",
+      "matrix(0, 1, 2%, 3, 4px, 5px)",
+      "matrix(0, 1, 2, 3%, 4%, 5%)",
+      "matrix(1, 2, 3, 4, 5px, 6%)",
+      "matrix(1, 2, 3, 4, 5%, 6px)",
+      "matrix(1, 2, 3, 4, 5%, 6%)",
+      "matrix(1, 2, 3, 4, 5px, 6em)",
+      /* invalid calc() values */
+      "translatey(-moz-min(5px,10%))",
+      "translatex(-moz-max(5px,10%))",
+      "matrix(1, 0, 0, 1, max(5px * 3), calc(10% - 3px))",
+      "perspective(-10px)",
+      "matrix3d(dinosaur)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15%, 16)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16px)",
+      "rotatey(words)",
+      "rotatex(7)",
+      "translate3d(3px, 4px, 1px, 7px)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13px, 14em, 15px, 16)",
+      "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 20%, 10%, 15, 16)",
+    ],
+  };
+
+  gCSSProperties["-moz-window-transform-origin"] = {
+    // domProp: "MozWindowTransformOrigin",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    /* no subproperties */
+    prerequisites: { width: "10px", height: "10px", display: "block" },
+    initial_values: ["50% 50%", "center", "center center"],
+    other_values: [
+      "25% 25%",
+      "6px 5px",
+      "20% 3em",
+      "0 0",
+      "0in 1in",
+      "top",
+      "bottom",
+      "top left",
+      "top right",
+      "top center",
+      "center left",
+      "center right",
+      "bottom left",
+      "bottom right",
+      "bottom center",
+      "20% center",
+      "6px center",
+      "13in bottom",
+      "left 50px",
+      "right 13%",
+      "center 40px",
+      "calc(20px)",
+      "calc(20px) 10px",
+      "10px calc(20px)",
+      "calc(20px) 25%",
+      "25% calc(20px)",
+      "calc(20px) calc(20px)",
+      "calc(20px + 1em) calc(20px / 2)",
+      "calc(20px + 50%) calc(50% - 10px)",
+      "calc(-20px) calc(-50%)",
+      "calc(-20%) calc(-50%)",
+    ],
+    invalid_values: [
+      "red",
+      "auto",
+      "none",
+      "0.5 0.5",
+      "40px #0000ff",
+      "border",
+      "center red",
+      "right diagonal",
+      "#00ffff bottom",
+      "0px calc(0px + rubbish)",
+      "0px 0px calc(0px + rubbish)",
+      "6px 5px 5px",
+      "top center 10px",
+    ],
+  };
+
+  gCSSProperties["-moz-context-properties"] = {
+    //domProp: "MozContextProperties",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "fill",
+      "stroke",
+      "fill, stroke",
+      "fill, stroke, fill",
+      "fill, foo",
+      "foo",
+    ],
+    invalid_values: [
+      "default",
+      "fill, auto",
+      "all, stroke",
+      "none, fill",
+      "fill, none",
+      "fill, default",
+      "2px",
+    ],
+  };
+
+  gCSSProperties["-moz-font-smoothing-background-color"] = {
+    // domProp: "MozFontSmoothingBackgroundColor",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["transparent"],
+    other_values: ["green", "#fc3"],
+    invalid_values: ["000000", "ff00ff"],
+  };
+}
+
+gCSSProperties["scrollbar-color"] = {
+  domProp: "scrollbarColor",
+  inherited: true,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["auto"],
+  other_values: ["red green", "blue yellow", "#ffff00 white"],
+  invalid_values: ["ffff00 red", "auto red", "red auto", "green"],
+};
+
+gCSSProperties["scrollbar-width"] = {
+  domProp: "scrollbarWidth",
+  inherited: false,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["auto"],
+  other_values: ["none", "thin"],
+  invalid_values: ["1px"],
+};
+
+if (IsCSSPropertyPrefEnabled("layout.css.motion-path.enabled")) {
+  gCSSProperties["offset"] = {
+    domProp: "offset",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: [
+      "offset-path",
+      "offset-distance",
+      "offset-rotate",
+      "offset-anchor",
+    ],
+    initial_values: ["none"],
+    other_values: [
+      "none 30deg reverse",
+      "none 50px reverse 30deg",
+      "none calc(10px + 20%) auto",
+      "none reverse",
+      "none / left center",
+      "path('M 0 0 H 1') -200% auto",
+      "path('M 0 0 H 1') -200%",
+      "path('M 0 0 H 1') 50px",
+      "path('M 0 0 H 1') auto",
+      "path('M 0 0 H 1') reverse 30deg 50px",
+      "path('M 0 0 H 1')",
+      "path('m 20 0 h 100') -7rad 8px / auto",
+      "path('m 0 30 v 100') -7rad 8px / left top",
+      "path('m 0 0 h 100') -7rad 8px",
+      "path('M 0 0 H 100') 100px 0deg",
+    ],
+    invalid_values: [
+      "100px 0deg path('m 0 0 h 100')",
+      "30deg",
+      "auto 30deg 100px",
+      "auto / none",
+      "none /",
+      "none / 100px 20px 30deg",
+      "path('M 20 30 A 60 70 80') bottom",
+      "path('M 20 30 A 60 70 80') bottom top",
+      "path('M 20 30 A 60 70 80') 100px 200px",
+      "path('M 20 30 A 60 70 80') reverse auto",
+      "path('M 20 30 A 60 70 80') reverse 10px 30deg",
+      "path('M 20 30 A 60 70 80') /",
+    ],
+  };
+
+  gCSSProperties["offset-path"] = {
+    domProp: "offsetPath",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [...pathValues.other_values],
+    invalid_values: ["path('')"].concat(pathValues.invalid_values),
+  };
+
+  if (IsCSSPropertyPrefEnabled("layout.css.motion-path-ray.enabled")) {
+    gCSSProperties["offset-path"]["other_values"].push(
+      "ray(0deg)",
+      "ray(45deg closest-side)",
+      "ray(0rad farthest-side)",
+      "ray(0.5turn closest-corner contain)",
+      "ray(200grad farthest-corner)",
+      "ray(sides 180deg)",
+      "ray(contain farthest-side 180deg)",
+      "ray(calc(180deg - 45deg) farthest-side)"
+    );
+
+    gCSSProperties["offset-path"]["invalid_values"].push(
+      "ray(closest-side)",
+      "ray(0deg, closest-side)",
+      "ray(contain 0deg closest-side contain)"
+    );
+  }
+
+  gCSSProperties["offset-distance"] = {
+    domProp: "offsetDistance",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0"],
+    other_values: ["10px", "10%", "190%", "-280%", "calc(30px + 40%)"],
+    invalid_values: ["none", "45deg"],
+  };
+
+  gCSSProperties["offset-rotate"] = {
+    domProp: "offsetRotate",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["reverse", "0deg", "0rad reverse", "-45deg", "5turn auto"],
+    invalid_values: ["none", "10px", "reverse 0deg reverse", "reverse auto"],
+  };
+
+  gCSSProperties["offset-anchor"] = {
+    domProp: "offsetAnchor",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "left bottom",
+      "center center",
+      "calc(20% + 10px) center",
+      "right 30em",
+      "10px 20%",
+      "left -10px top -20%",
+      "right 10% bottom 20em",
+    ],
+    invalid_values: ["none", "10deg", "left 10% top"],
+  };
+}
+
+if (
+  IsCSSPropertyPrefEnabled("layout.css.motion-path-offset-position.enabled")
+) {
+  if (IsCSSPropertyPrefEnabled("layout.css.motion-path.enabled")) {
+    gCSSProperties["offset"]["subproperties"].push("offset-position");
+    gCSSProperties["offset"]["other_values"].push("top right / top left");
+
+    if (IsCSSPropertyPrefEnabled("layout.css.motion-path-ray.enabled")) {
+      gCSSProperties["offset"]["other_values"].push(
+        "top right ray(45deg closest-side)",
+        "50% 50% ray(0rad farthest-side)"
+      );
+    }
+  }
+
+  gCSSProperties["offset-position"] = {
+    domProp: "offsetPosition",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: [
+      "normal",
+      "left bottom",
+      "center center",
+      "calc(20% + 10px) center",
+      "right 30em",
+      "10px 20%",
+      "left -10px top -20%",
+      "right 10% bottom 20em",
+    ],
+    invalid_values: ["none", "10deg", "left 10% top"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.step-position-jump.enabled")) {
+  gCSSProperties["animation-timing-function"].other_values.push(
+    "steps(1, jump-start)",
+    "steps(1, jump-end)",
+    "steps(2, jump-none)",
+    "steps(1, jump-both)"
+  );
+  gCSSProperties["animation-timing-function"].invalid_values.push(
+    "steps(0, jump-start)",
+    "steps(0, jump-end)",
+    "steps(1, jump-none)",
+    "steps(0, jump-both)"
+  );
+
+  gCSSProperties["transition-timing-function"].other_values.push(
+    "steps(1, jump-start)",
+    "steps(1, jump-end)",
+    "steps(2, jump-none)",
+    "steps(1, jump-both)"
+  );
+  gCSSProperties["transition-timing-function"].invalid_values.push(
+    "steps(0, jump-start)",
+    "steps(0, jump-end)",
+    "steps(1, jump-none)",
+    "steps(0, jump-both)"
+  );
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.linear-easing-function.enabled")) {
+  let linear_function_other_values = [
+    "linear(0, 1)",
+    "linear(0 0% 50%, 1 50% 100%)",
+  ];
+
+  let linear_function_invalid_values = [
+    "linear()",
+    "linear(0.5)",
+    "linear(0% 0 100%)",
+    "linear(0,)",
+  ];
+  gCSSProperties["animation-timing-function"].other_values.push(
+    ...linear_function_other_values
+  );
+  gCSSProperties["animation-timing-function"].invalid_values.push(
+    ...linear_function_invalid_values
+  );
+
+  gCSSProperties["transition-timing-function"].other_values.push(
+    ...linear_function_other_values
+  );
+  gCSSProperties["transition-timing-function"].invalid_values.push(
+    ...linear_function_invalid_values
+  );
+
+  gCSSProperties["animation"].other_values.push(
+    "1s 2s linear(0, 1) bounce",
+    "4s linear(0, 0.5 25% 75%, 1 100% 100%)"
+  );
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.backdrop-filter.enabled")) {
+  gCSSProperties["backdrop-filter"] = {
+    domProp: "backdropFilter",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: gCSSProperties["filter"].other_values,
+    invalid_values: gCSSProperties["filter"].invalid_values,
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.zoom-transform-hack.enabled")) {
+  gCSSProperties["zoom"] = {
+    domProp: "zoom",
+    inherited: false,
+    type: CSS_TYPE_LEGACY_SHORTHAND,
+    subproperties: ["transform", "transform-origin"],
+    initial_values: ["normal", "1.0", "0", "0%", "100%"],
+    other_values: ["10%", "2", "2.5"],
+    invalid_values: ["0 0", "foo", "10px"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.math-depth.enabled")) {
+  gCSSProperties["math-depth"] = {
+    domProp: "mathDepth",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["0"],
+    other_values: [
+      "auto-add",
+      "123",
+      "-123",
+      "add(123)",
+      "add(-123)",
+      "calc(1 + 2*3)",
+      "add(calc(1 - 2/3))",
+    ],
+    invalid_values: ["auto", "1,23", "1.23", "add(1,23)", "add(1.23)"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.math-style.enabled")) {
+  gCSSProperties["math-style"] = {
+    domProp: "mathStyle",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: ["compact"],
+    invalid_values: [],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.color-mix.enabled")) {
+  gCSSProperties.color.other_values.push(
+    "color-mix(in srgb, red, blue)",
+    "color-mix(in srgb, highlight, rgba(0, 0, 0, .5))",
+    "color-mix(in srgb, color-mix(in srgb, red 10%, blue), green)",
+    "color-mix(in srgb, blue, red 80%)",
+    "color-mix(in srgb, rgba(0, 200, 32, .5) 90%, red 50%)",
+    "color-mix(in srgb, currentColor, red)"
+  );
+
+  gCSSProperties.color.invalid_values.push(
+    "color-mix(red, blue)",
+    "color-mix(red blue)",
+    "color-mix(in srgb, red blue)",
+    "color-mix(in srgb, red 10% blue)"
+  );
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.color-scheme.enabled")) {
+  gCSSProperties["color-scheme"] = {
+    domProp: "colorScheme",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["normal"],
+    other_values: [
+      "light",
+      "dark",
+      "light dark",
+      "light dark purple",
+      "light light dark",
+      "only light",
+      "only light dark",
+      "only light dark purple",
+      "light only",
+    ],
+    invalid_values: ["only normal", "normal only", "only light only"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.forced-color-adjust.enabled")) {
+  gCSSProperties["forced-color-adjust"] = {
+    domProp: "forcedColorAdjust",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["none"],
+    invalid_values: [],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.animation-composition.enabled")) {
+  gCSSProperties["animation-composition"] = {
+    domProp: "animationComposition",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["replace"],
+    other_values: [
+      "add",
+      "accumulate",
+      "replace, add",
+      "add, accumulate",
+      "replace, add, accumulate",
+    ],
+    invalid_values: ["all", "none"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.scroll-driven-animations.enabled")) {
+  // Basically, web-platform-tests should cover most cases, so here we only
+  // put some basic test cases.
+  gCSSProperties["animation"].subproperties.push("animation-timeline");
+  gCSSProperties["animation"].initial_values.push(
+    "none none 0s 0s ease normal running 1.0 auto",
+    "none none auto"
+  );
+  gCSSProperties["animation"].other_values.push(
+    "none none 0s 0s cubic-bezier(0.25, 0.1, 0.25, 1.0) normal running 1.0 auto",
+    "bounce 1s linear 2s timeline",
+    "bounce 1s 2s linear none",
+    "bounce timeline",
+    "2s, 1s bounce timeline",
+    "1s bounce timeline, 2s",
+    "1s bounce none, 2s none auto"
+  );
+
+  gCSSProperties["-moz-animation"].subproperties.push("animation-timeline");
+  gCSSProperties["-webkit-animation"].subproperties.push("animation-timeline");
+
+  gCSSProperties["animation-timeline"] = {
+    domProp: "animationTimeline",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_marker: true,
+    initial_values: ["auto"],
+    other_values: [
+      "none",
+      "all",
+      "ball",
+      "mall",
+      "color",
+      "bounce, bubble, opacity",
+      "foobar",
+      "\\32bounce",
+      "-bounce",
+      "-\\32bounce",
+      "\\32 0bounce",
+      "-\\32 0bounce",
+      "\\2bounce",
+      "-\\2bounce",
+      "scroll()",
+      "scroll(block)",
+      "scroll(inline)",
+      "scroll(horizontal)",
+      "scroll(vertical)",
+      "scroll(root)",
+      "scroll(nearest)",
+      "scroll(inline nearest)",
+      "scroll(vertical root)",
+      "scroll(root horizontal)",
+      "view()",
+      "view(inline)",
+      "view(auto)",
+      "view(auto 1px)",
+      "view(inline auto)",
+      "view(vertical auto auto)",
+      "view(horizontal 1px 1%)",
+      "view(1px 1% block)",
+    ],
+    invalid_values: [
+      "bounce, initial",
+      "initial, bounce",
+      "bounce, inherit",
+      "inherit, bounce",
+      "bounce, unset",
+      "unset, bounce",
+    ],
+  };
+
+  gCSSProperties["scroll-timeline-name"] = {
+    domProp: "scrollTimelineName",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "all",
+      "auto",
+      "ball",
+      "mall",
+      "color",
+      "foobar",
+      "\\32bounce",
+      "-bounce",
+      "-\\32bounce",
+      "\\32 0bounce",
+      "-\\32 0bounce",
+      "\\2bounce",
+      "-\\2bounce",
+    ],
+    invalid_values: ["abc bounce", "10px", "rgb(1, 2, 3)"],
+  };
+
+  gCSSProperties["scroll-timeline-axis"] = {
+    domProp: "scrollTimelineAxis",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["block"],
+    other_values: ["inline", "vertical", "horizontal"],
+    invalid_values: ["auto", "none", "abc"],
+  };
+
+  gCSSProperties["scroll-timeline"] = {
+    domProp: "scrollTimeline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["scroll-timeline-name", "scroll-timeline-axis"],
+    initial_values: ["none block", "none"],
+    other_values: [
+      "auto inline",
+      "bounce inline",
+      "bounce vertical",
+      "\\32bounce inline",
+      "-bounce block",
+      "\\32 0bounce vertical",
+      "-\\32 0bounce horizontal",
+      "a, b, c",
+      "a block, b inline, c vertical",
+    ],
+    invalid_values: ["", "bounce bounce", "horizontal a", "block abc"],
+  };
+
+  gCSSProperties["view-timeline-name"] = {
+    domProp: "viewTimelineName",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["none"],
+    other_values: [
+      "all",
+      "auto",
+      "ball",
+      "mall",
+      "color",
+      "foobar",
+      "\\32bounce",
+      "-bounce",
+      "-\\32bounce",
+      "\\32 0bounce",
+      "-\\32 0bounce",
+      "\\2bounce",
+      "-\\2bounce",
+      "bounce, abc",
+      "none, none",
+    ],
+    invalid_values: ["abc bounce", "10px", "rgb(1, 2, 3)"],
+  };
+
+  gCSSProperties["view-timeline-axis"] = {
+    domProp: "viewTimelineAxis",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["block"],
+    other_values: ["inline", "vertical", "horizontal", "inline, block"],
+    invalid_values: ["auto", "none", "abc", "inline block"],
+  };
+
+  gCSSProperties["view-timeline-inset"] = {
+    domProp: "viewTimelineInset",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["0px", "1%", "1px 1%", "0px 0%", "calc(0px) auto"],
+    invalid_values: ["none", "rgb(1, 2, 3)", "foo bar", "1px 2px 3px"],
+  };
+
+  gCSSProperties["view-timeline"] = {
+    domProp: "viewTimeline",
+    inherited: false,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["view-timeline-name", "view-timeline-axis"],
+    initial_values: ["none block", "none"],
+    other_values: [
+      "auto inline",
+      "bounce inline",
+      "bounce vertical",
+      "\\32bounce inline",
+      "-bounce block",
+      "\\32 0bounce vertical",
+      "-\\32 0bounce horizontal",
+      "a, b, c",
+      "a block, b inline, c vertical",
+    ],
+    invalid_values: ["", ",", "abc abc", "horizontal a", "block abc"],
+  };
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.scrollbar-gutter.enabled")) {
+  gCSSProperties["scrollbar-gutter"] = {
+    domProp: "scrollbarGutter",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["auto"],
+    other_values: ["stable", "stable both-edges", "both-edges stable"],
+    invalid_values: [
+      "auto stable",
+      "auto both-edges",
+      "both-edges",
+      "stable mirror",
+      // The following values are from scrollbar-gutter extension in CSS
+      // Overflow 4 https://drafts.csswg.org/css-overflow-4/#sbg-ext.
+      "always",
+      "always both-edges",
+      "always force",
+      "always both-edges force",
+      "stable both-edges force",
+      "match-parent",
+    ],
+  };
+}
+
+// Copy aliased properties' fields from their alias targets. Keep this logic
+// at the bottom of this file to ensure all the aliased properties are
+// processed.
+for (var prop in gCSSProperties) {
+  var entry = gCSSProperties[prop];
+  if (entry.alias_for) {
+    var aliasTargetEntry = gCSSProperties[entry.alias_for];
+    if (!aliasTargetEntry) {
+      ok(
+        false,
+        "Alias '" +
+          prop +
+          "' alias_for field, '" +
+          entry.alias_for +
+          "', " +
+          "must be set to a recognized CSS property in gCSSProperties"
+      );
+    } else {
+      // Copy 'values' fields & 'prerequisites' field from aliasTargetEntry:
+      var fieldsToCopy = [
+        "initial_values",
+        "other_values",
+        "invalid_values",
+        "quirks_values",
+        "unbalanced_values",
+        "prerequisites",
+      ];
+
+      fieldsToCopy.forEach(function (fieldName) {
+        // (Don't copy the field if the alias already has something there,
+        // or if the aliased property doesn't have anything to copy.)
+        if (!(fieldName in entry) && fieldName in aliasTargetEntry) {
+          entry[fieldName] = aliasTargetEntry[fieldName];
+        }
+      });
+    }
+  }
+}
diff --git a/layout/style/test/redirect.sjs b/layout/style/test/redirect.sjs
new file mode 100644
index 0000000000..43fec90b5a
--- /dev/null
+++ b/layout/style/test/redirect.sjs
@@ -0,0 +1,4 @@
+function handleRequest(request, response) {
+  response.setStatusLine(request.httpVersion, 301, "Moved Permanently");
+  response.setHeader("Location", request.queryString, false);
+}
diff --git a/layout/style/test/redundant_font_download.sjs b/layout/style/test/redundant_font_download.sjs
new file mode 100644
index 0000000000..09236563de
--- /dev/null
+++ b/layout/style/test/redundant_font_download.sjs
@@ -0,0 +1,63 @@
+"use strict";
+
+const BinaryOutputStream = Components.Constructor(
+  "@mozilla.org/binaryoutputstream;1",
+  "nsIBinaryOutputStream",
+  "setOutputStream"
+);
+
+// this is simply a hex dump of a red square .PNG image
+// prettier-ignore
+const RED_SQUARE =
+  [
+    0x89,  0x50,  0x4E,  0x47,  0x0D,  0x0A,  0x1A,  0x0A,  0x00,  0x00,
+    0x00,  0x0D,  0x49,  0x48,  0x44,  0x52,  0x00,  0x00,  0x00,  0x20,
+    0x00,  0x00,  0x00,  0x20,  0x08,  0x02,  0x00,  0x00,  0x00,  0xFC,
+    0x18,  0xED,  0xA3,  0x00,  0x00,  0x00,  0x01,  0x73,  0x52,  0x47,
+    0x42,  0x00,  0xAE,  0xCE,  0x1C,  0xE9,  0x00,  0x00,  0x00,  0x28,
+    0x49,  0x44,  0x41,  0x54,  0x48,  0xC7,  0xED,  0xCD,  0x41,  0x0D,
+    0x00,  0x00,  0x08,  0x04,  0xA0,  0xD3,  0xFE,  0x9D,  0x35,  0x85,
+    0x0F,  0x37,  0x28,  0x40,  0x4D,  0x6E,  0x75,  0x04,  0x02,  0x81,
+    0x40,  0x20,  0x10,  0x08,  0x04,  0x02,  0xC1,  0x93,  0x60,  0x01,
+    0xA3,  0xC4,  0x01,  0x3F,  0x58,  0x1D,  0xEF,  0x27,  0x00,  0x00,
+    0x00,  0x00,  0x49,  0x45,  0x4E,  0x44,  0xAE,  0x42,  0x60,  0x82
+  ];
+
+function handleRequest(request, response) {
+  let query = {};
+  request.queryString.split("&").forEach(function (val) {
+    let [name, value] = val.split("=");
+    query[name] = unescape(value);
+  });
+
+  response.setHeader("Cache-Control", "no-cache");
+
+  response.setStatusLine(request.httpVersion, 200, "OK");
+  response.setHeader("Content-Type", "text/plain", false);
+
+  let log = getState("bug-879963-request-log") || "";
+
+  let stream = new BinaryOutputStream(response.bodyOutputStream);
+
+  if (query.q == "init") {
+    log = "init"; // initialize the log, and return a PNG image
+    response.setHeader("Content-Type", "image/png", false);
+    stream.writeByteArray(RED_SQUARE);
+  } else if (query.q == "image") {
+    log = log + ";" + query.q;
+    response.setHeader("Content-Type", "image/png", false);
+    stream.writeByteArray(RED_SQUARE);
+  } else if (query.q == "font") {
+    log = log + ";" + query.q;
+    // we don't provide a real font; that's ok, OTS will just reject it
+    response.write("Junk");
+  } else if (query.q == "report") {
+    // don't include the actual "report" request in the log we return
+    response.write(log);
+  } else {
+    log = log + ";" + query.q;
+    response.setStatusLine(request.httpVersion, 404, "Not Found");
+  }
+
+  setState("bug-879963-request-log", log);
+}
diff --git a/layout/style/test/slow_broken_sheet.sjs b/layout/style/test/slow_broken_sheet.sjs
new file mode 100644
index 0000000000..6af03ee4c6
--- /dev/null
+++ b/layout/style/test/slow_broken_sheet.sjs
@@ -0,0 +1,19 @@
+// Make sure our timer stays alive.
+let gTimer;
+
+function handleRequest(request, response) {
+  response.setHeader("Content-Type", "text/html", false);
+  response.setStatusLine("1.1", 404, "Not Found");
+  response.processAsync();
+
+  gTimer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
+  // Wait for 1s before responding; this should usually make sure this load comes in last.
+  gTimer.init(
+    () => {
+      response.write("<h1>Hello</h1>");
+      response.finish();
+    },
+    1000,
+    Ci.nsITimer.TYPE_ONE_SHOT
+  );
+}
diff --git a/layout/style/test/slow_load.sjs b/layout/style/test/slow_load.sjs
new file mode 100644
index 0000000000..3873f466ce
--- /dev/null
+++ b/layout/style/test/slow_load.sjs
@@ -0,0 +1,29 @@
+// Make sure our timer stays alive.
+let gTimer;
+
+function handleRequest(request, response) {
+  let isCss = request.queryString.indexOf("css") != -1;
+
+  response.setHeader("Content-Type", isCss ? "text/css" : "text/plain", false);
+  response.setStatusLine("1.1", 200, "OK");
+  response.processAsync();
+
+  let time = Date.now();
+
+  gTimer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
+  // Wait for 1s before responding; this should usually make sure this load comes in last.
+  gTimer.init(
+    () => {
+      if (isCss) {
+        // FIXME(emilio): This clamps the date to the 32-bit integer range which
+        // is what we use to store the z-index... We don't seem to store f64s
+        // anywhere in the specified values...
+        time = time % (Math.pow(2, 31) - 1);
+        response.write(":root { z-index: " + time + "}");
+      }
+      response.finish();
+    },
+    1000,
+    Ci.nsITimer.TYPE_ONE_SHOT
+  );
+}
diff --git a/layout/style/test/slow_ok_sheet.sjs b/layout/style/test/slow_ok_sheet.sjs
new file mode 100644
index 0000000000..5673bb2be8
--- /dev/null
+++ b/layout/style/test/slow_ok_sheet.sjs
@@ -0,0 +1,21 @@
+// Make sure our timer stays alive.
+let gTimer;
+
+function handleRequest(request, response) {
+  response.setHeader("Content-Type", "text/css", false);
+  response.setStatusLine("1.1", 200, "OK");
+  response.processAsync();
+
+  gTimer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
+  // Wait for 1s before responding; this should usually make sure this load comes in last.
+  gTimer.init(
+    () => {
+      // This sheet _does_ still get applied even though its importing link
+      // overall reports failure...
+      response.write("nosuchelement { background: red }");
+      response.finish();
+    },
+    1000,
+    Ci.nsITimer.TYPE_ONE_SHOT
+  );
+}
diff --git a/layout/style/test/sourcemap_css.html b/layout/style/test/sourcemap_css.html
new file mode 100644
index 0000000000..1f29a38d5f
--- /dev/null
+++ b/layout/style/test/sourcemap_css.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Test for bug 1306887</title>
+    <link rel="stylesheet" type="text/css" href="mapped.css"/>
+    <link rel="stylesheet" type="text/css" href="mapped2.css"/>
+  </head>
+  <body>
+    <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1306887">Mozilla Bug 1306887</a>
+  </body>
+</html>
diff --git a/layout/style/test/style_attribute_tests.js b/layout/style/test/style_attribute_tests.js
new file mode 100644
index 0000000000..243ec3380d
--- /dev/null
+++ b/layout/style/test/style_attribute_tests.js
@@ -0,0 +1,25 @@
+SimpleTest.waitForExplicitFinish();
+
+window.addEventListener("load", runTests);
+
+function runTests(event) {
+  if (event.target != document) {
+    return;
+  }
+
+  var elt = document.getElementById("content");
+
+  elt.setAttribute("style", "color: blue; background-color: fuchsia");
+  is(elt.style.color, "blue", "setting correct style attribute (color)");
+  is(
+    elt.style.backgroundColor,
+    "fuchsia",
+    "setting correct style attribute (color)"
+  );
+
+  elt.setAttribute("style", "{color: blue; background-color: fuchsia}");
+  is(elt.style.color, "", "setting braced style attribute (color)");
+  is(elt.style.backgroundColor, "", "setting braced style attribute (color)");
+
+  SimpleTest.finish();
+}
diff --git a/layout/style/test/support/1x1-transparent.png b/layout/style/test/support/1x1-transparent.png
new file mode 100644
index 0000000000..56cd9eb930
--- /dev/null
+++ b/layout/style/test/support/1x1-transparent.png
diff --git a/layout/style/test/support/blue-100x100.png b/layout/style/test/support/blue-100x100.png
new file mode 100644
index 0000000000..3b72d5ce53
--- /dev/null
+++ b/layout/style/test/support/blue-100x100.png
diff --git a/layout/style/test/support/external-variable-url.css b/layout/style/test/support/external-variable-url.css
new file mode 100644
index 0000000000..d730ac0cea
--- /dev/null
+++ b/layout/style/test/support/external-variable-url.css
@@ -0,0 +1,3 @@
+#t4 {
+  --a: url('image.png');
+}
diff --git a/layout/style/test/test_acid3_test46.html b/layout/style/test/test_acid3_test46.html
new file mode 100644
index 0000000000..4ec50cfddc
--- /dev/null
+++ b/layout/style/test/test_acid3_test46.html
@@ -0,0 +1,140 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=156716
+-->
+<!--
+
+This is test 46 from the Acid3 test, http://acid3.acidtests.org/
+extracted from the test framework there and put into Mochitest.
+
+(from irc.mozilla.org, developers)
+[2008-05-14 18:07:38] <Hixie> dbaron: I hereby grant all files available from the server http://acid3.acidtests.org/ under the following license: (c) copyright 2008 Ian Hickson. These documents may be used under the terms of any of the following licenses: MPL. GPL. LGPL. BSD.
+
+-->
+<head>
+  <title>Test for Bug 156716</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <style type="text/css">
+  iframe#selectors { width: 0; height: 0; }
+  </style>
+  <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=156716">Mozilla Bug 156716</a>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 156716 **/
+SimpleTest.waitForExplicitFinish();
+function runTest() {
+
+  function getTestDocument() {
+    var iframe = document.getElementById("selectors");
+    var doc = iframe.contentDocument;
+    for (var i = doc.documentElement.childNodes.length-1; i >= 0; i -= 1)
+      doc.documentElement.removeChild(doc.documentElement.childNodes[i]);
+    doc.documentElement.appendChild(doc.createElement('head'));
+    doc.documentElement.firstChild.appendChild(doc.createElement('title'));
+    doc.documentElement.appendChild(doc.createElement('body'));
+    return doc;
+  }
+
+  // test 46: media queries
+  var doc = getTestDocument();
+  var style = doc.createElement('style');
+  style.setAttribute('type', 'text/css');
+  style.appendChild(doc.createTextNode('@media all and (min-color: 0) { #a { text-transform: uppercase; } }'));                         // matches
+  style.appendChild(doc.createTextNode('@media not all and (min-color: 0) { #b { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media only all and (min-color: 0) { #c { text-transform: uppercase; } }'));                    // matches
+  style.appendChild(doc.createTextNode('@media (bogus) { #d { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media all and (bogus) { #e { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media not all and (bogus) { #f { text-transform: uppercase; } }'));                            // matches
+  style.appendChild(doc.createTextNode('@media only all and (bogus) { #g { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media (bogus), all { #h { text-transform: uppercase; } }'));                                   // matches
+  style.appendChild(doc.createTextNode('@media all and (bogus), all { #i { text-transform: uppercase; } }'));                           // matches
+  style.appendChild(doc.createTextNode('@media not all and (bogus), all { #j { text-transform: uppercase; } }'));                       // matches
+  style.appendChild(doc.createTextNode('@media only all and (bogus), all { #k { text-transform: uppercase; } }'));                      // matches
+  style.appendChild(doc.createTextNode('@media all, (bogus) { #l { text-transform: uppercase; } }'));                                   // matches
+  style.appendChild(doc.createTextNode('@media all, all and (bogus) { #m { text-transform: uppercase; } }'));                           // matches
+  style.appendChild(doc.createTextNode('@media all, not all and (bogus) { #n { text-transform: uppercase; } }'));                       // matches
+  style.appendChild(doc.createTextNode('@media all, only all and (bogus) { #o { text-transform: uppercase; } }'));                      // matches
+  style.appendChild(doc.createTextNode('@media all and color { #p { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media all and min-color: 0 { #q { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media all, all and color { #r { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media all, all and min-color: 0 { #s { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media all and min-color: 0, all { #t { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media (max-color: 0) and (max-monochrome: 0) { #u { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media (min-color: 1), (min-monochrome: 1) { #v { text-transform: uppercase; } }'));            // matches
+  style.appendChild(doc.createTextNode('@media all and (min-color: 0) and (min-monochrome: 0) { #w { text-transform: uppercase; } }')); // matches
+  style.appendChild(doc.createTextNode('@media not all and (min-color: 1), not all and (min-monochrome: 1) { #x { text-transform: uppercase; } }')); // matches
+  style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (min-width: 1em) { #y1 { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (min-width: 1em) { #y2 { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (max-width: 1em) { #y3 { text-transform: uppercase; } }'));
+  style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (max-width: 1em) { #y4 { text-transform: uppercase; } }')); // matches
+  doc.getElementsByTagName('head')[0].appendChild(style);
+  var names = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y1', 'y2', 'y3', 'y4'];
+  for (var i in names) {
+	let p = doc.createElement('p');
+	p.id = names[i];
+	doc.body.appendChild(p);
+  }
+  var count = 0;
+  var check = function (c, e) {
+	count += 1;
+	let p = doc.getElementById(c);
+	is(doc.defaultView.getComputedStyle(p).textTransform, e ? 'uppercase' : 'none', "case " + c + " failed (index " + count + ")");
+  }
+  check('a', true); // 1
+  check('b', false);
+  check('c', true);
+  check('d', false);
+  check('e', false);
+  check('f', false); // true in old spec; commented out in real Acid3
+  check('g', false);
+  check('h', true);
+  check('i', true);
+  check('j', true); // 10
+  check('k', true);
+  check('l', true);
+  check('m', true);
+  check('n', true);
+  check('o', true);
+  check('p', false);
+  check('q', false);
+  check('r', true); // false in old spec
+  check('s', true); // false in old spec
+  check('t', true); // 20 - false in old spec
+  check('u', false);
+  check('v', true);
+  check('w', true);
+  check('x', true);
+  // here the viewport is 0x0
+  check('y1', false); // 25
+  check('y2', false);
+  check('y3', false);
+  check('y4', true);
+  document.getElementById("selectors").setAttribute("style", "height: 100px; width: 100px");
+  // now the viewport is more than 1em by 1em
+  check('y1', true); // 29
+  check('y2', false);
+  check('y3', false);
+  check('y4', false);
+  document.getElementById("selectors").removeAttribute("style");
+  // here the viewport is 0x0 again
+  check('y1', false); // 33
+  check('y2', false);
+  check('y3', false);
+  check('y4', true);
+  SimpleTest.finish();
+}
+</script>
+</pre>
+<p id="display">
+  <iframe src="empty.html" id="selectors" onload="runTest()"></iframe>
+</p>
+</body>
+</html>
diff --git a/layout/style/test/test_addSheet.html b/layout/style/test/test_addSheet.html
new file mode 100644
index 0000000000..06f9f93fc3
--- /dev/null
+++ b/layout/style/test/test_addSheet.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for addSheet</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1024707">Mozilla Bug 1024707</a>
+
+<iframe id="iframe1" src="additional_sheets_helper.html"></iframe>
+<iframe id="iframe2" src="additional_sheets_helper.html"></iframe>
+
+<pre id="test">
+<script type="application/javascript">
+
+let gIOService = SpecialPowers.Cc["@mozilla.org/network/io-service;1"]
+  .getService(SpecialPowers.Ci.nsIIOService);
+
+let gSSService = SpecialPowers.Cc["@mozilla.org/content/style-sheet-service;1"]
+  .getService(SpecialPowers.Ci.nsIStyleSheetService);
+
+function test(win, sheet) {
+    let cs = win.getComputedStyle(win.document.body);
+    is(cs.getPropertyValue('color'), "rgb(0, 0, 0)", "should have default color");
+    var windowUtils = SpecialPowers.getDOMWindowUtils(win);
+    windowUtils.addSheet(sheet, SpecialPowers.Ci.nsIDOMWindowUtils.USER_SHEET);
+    is(cs.getPropertyValue('color'), "rgb(255, 0, 0)", "should have changed color to red");
+}
+
+function run() {
+    var uri = gIOService.newURI("data:text/css,body{color:red;}");
+    let sheet = gSSService.preloadSheet(uri, SpecialPowers.Ci.nsIStyleSheetService.USER_SHEET);
+
+    test(document.getElementById("iframe1").contentWindow, sheet);
+    test(document.getElementById("iframe2").contentWindow, sheet);
+
+    SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_additional_sheets.html b/layout/style/test/test_additional_sheets.html
new file mode 100644
index 0000000000..8cd8ffd93a
--- /dev/null
+++ b/layout/style/test/test_additional_sheets.html
@@ -0,0 +1,310 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for additional sheets</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=737003">Mozilla Bug 737003</a>
+<iframe id="iframe" src="additional_sheets_helper.html"></iframe>
+<pre id="test">
+<script type="application/javascript">
+
+var gIOService = SpecialPowers.Cc["@mozilla.org/network/io-service;1"]
+  .getService(SpecialPowers.Ci.nsIIOService)
+
+var gSSService = SpecialPowers.Cc["@mozilla.org/content/style-sheet-service;1"]
+  .getService(SpecialPowers.Ci.nsIStyleSheetService);
+
+function getUri(style)
+{
+  return "data:text/css," + style;
+}
+
+function getStyle(color, swapped)
+{
+  return "body {color: " + color +  (swapped ? " !important" : "") +
+    "; background-color: " + color + (swapped ? "" : " !important;") + ";}";
+}
+
+function loadUserSheet(win, style)
+{
+  loadSheet(win, style, "USER_SHEET");
+}
+
+function loadAgentSheet(win, style)
+{
+  loadSheet(win, style, "AGENT_SHEET");
+}
+
+function loadAuthorSheet(win, style)
+{
+  loadSheet(win, style, "AUTHOR_SHEET");
+}
+
+function removeUserSheet(win, style)
+{
+  removeSheet(win, style, "USER_SHEET");
+}
+
+function removeAgentSheet(win, style)
+{
+  removeSheet(win, style, "AGENT_SHEET");
+}
+
+function removeAuthorSheet(win, style)
+{
+  removeSheet(win, style, "AUTHOR_SHEET");
+}
+
+function loadSheet(win, style, type)
+{
+  var uri = gIOService.newURI(getUri(style));
+  var windowUtils = SpecialPowers.getDOMWindowUtils(win);
+  windowUtils.loadSheet(uri, windowUtils[type]);
+}
+
+function removeSheet(win, style, type)
+{
+  var uri = gIOService.newURI(getUri(style));
+  var windowUtils = SpecialPowers.getDOMWindowUtils(win);
+  windowUtils.removeSheet(uri, windowUtils[type]);
+}
+
+function loadAndRegisterUserSheet(win, style)
+{
+  loadAndRegisterSheet(win, style, "USER_SHEET");
+}
+
+function loadAndRegisterAgentSheet(win, style)
+{
+  loadAndRegisterSheet(win, style, "AGENT_SHEET");
+}
+
+function loadAndRegisterAuthorSheet(win, style)
+{
+  loadAndRegisterSheet(win, style, "AUTHOR_SHEET");
+}
+
+function unregisterUserSheet(win, style)
+{
+  unregisterSheet(win, style, "USER_SHEET");
+}
+
+function unregisterAgentSheet(win, style)
+{
+  unregisterSheet(win, style, "AGENT_SHEET");
+}
+
+function unregisterAuthorSheet(win, style)
+{
+  unregisterSheet(win, style, "AUTHOR_SHEET");
+}
+
+function loadAndRegisterSheet(win, style, type)
+{
+  uri = gIOService.newURI(getUri(style));
+  gSSService.loadAndRegisterSheet(uri, gSSService[type]);
+  is(gSSService.sheetRegistered(uri, gSSService[type]), true);
+}
+
+function unregisterSheet(win, style, type)
+{
+  var uri = gIOService.newURI(getUri(style));
+  gSSService.unregisterSheet(uri, gSSService[type]);
+  is(gSSService.sheetRegistered(uri, gSSService[type]), false);
+}
+
+function setDocSheet(win, style)
+{
+  var subdoc = win.document;
+  var headID = subdoc.getElementsByTagName("head")[0];
+  var cssNode = subdoc.createElement('style');
+  cssNode.type = 'text/css';
+  cssNode.innerHTML = style;
+  cssNode.id = 'docsheet';
+  headID.appendChild(cssNode);
+}
+
+function removeDocSheet(win)
+{
+  var subdoc = win.document;
+  var node = subdoc.getElementById('docsheet');
+  node.remove();
+}
+
+var agent = {
+  type: 'agent',
+  color: 'rgb(255, 0, 0)',
+  addRules: loadAndRegisterAgentSheet,
+  removeRules: unregisterAgentSheet
+};
+
+var user = {
+  type: 'user',
+  color: 'rgb(0, 255, 0)',
+  addRules: loadAndRegisterUserSheet,
+  removeRules: unregisterUserSheet
+};
+
+var additionalAgent = {
+  type: 'additionalAgent',
+  color: 'rgb(0, 0, 255)',
+  addRules: loadAgentSheet,
+  removeRules: removeAgentSheet
+};
+
+var additionalUser = {
+  type: 'additionalUser',
+  color: 'rgb(255, 255, 0)',
+  addRules: loadUserSheet,
+  removeRules: removeUserSheet
+};
+
+var additionalAuthor = {
+  type: 'additionalAuthor',
+  color: 'rgb(255, 255, 0)',
+  addRules: loadAuthorSheet,
+  removeRules: removeAuthorSheet
+};
+
+var doc = {
+  type: 'doc',
+  color: 'rgb(0, 255, 255)',
+  addRules: setDocSheet,
+  removeRules: removeDocSheet
+};
+
+var author = {
+  type: 'author',
+  color: 'rgb(255, 0, 255)',
+  addRules: loadAndRegisterAuthorSheet,
+  removeRules: unregisterAuthorSheet
+};
+
+function loadAndCheck(win, firstType, secondType, swap, result1, result2)
+{
+  var firstStyle = getStyle(firstType.color, false);
+  var secondStyle = getStyle(secondType.color, swap);
+
+  firstType.addRules(win, firstStyle);
+  secondType.addRules(win, secondStyle);
+
+  var cs = win.getComputedStyle(win.document.body);
+  is(cs.getPropertyValue('color'), result1,
+    firstType.type + "(normal)" + " vs " + secondType.type + (swap ? "(important)" : "(normal)" ) + " 1");
+  is(cs.getPropertyValue('background-color'), result2,
+    firstType.type + "(important)" + " vs " + secondType.type + (swap ? "(normal)" : "(important)" ) + " 2");
+
+  firstType.removeRules(win, firstStyle);
+  secondType.removeRules(win, secondStyle);
+
+  is(cs.getPropertyValue('color'), 'rgb(0, 0, 0)', firstType.type + " vs " + secondType.type + " 3");
+  is(cs.getPropertyValue('background-color'), 'rgba(0, 0, 0, 0)', firstType.type + " vs " + secondType.type + " 4");
+}
+
+// There are 8 cases. Regular against regular, regular against important, important
+// against regular, important against important. We can load style from typeA first
+// then typeB or the other way around so that's 4*2=8 cases.
+
+function testStyleVsStyle(win, typeA, typeB, results)
+{
+  function color(res)
+  {
+    return res ? typeB.color : typeA.color;
+  }
+
+  loadAndCheck(win, typeA, typeB, false, color(results.AB.rr), color(results.AB.ii));
+  loadAndCheck(win, typeB, typeA, false, color(results.BA.rr), color(results.BA.ii));
+
+  loadAndCheck(win, typeA, typeB, true, color(results.AB.ri), color(results.AB.ir));
+  loadAndCheck(win, typeB, typeA, true, color(results.BA.ir), color(results.BA.ri));
+}
+
+// 5 user agent normal declarations
+// 4 user normal declarations
+// 3 author normal declarations
+// 2 author important declarations
+// 1 user important declarations
+// 0 user agent important declarations
+
+function run()
+{
+  var iframe = document.getElementById("iframe");
+  var win = iframe.contentWindow;
+
+// Some explanation how to interpret this result table...
+// in case of loading the agent style first and the user style later (AB)
+// if there is an important rule in both for let's say color (ii)
+// the rule specified in the agent style will lead (AB.ii == 0)
+// If both rules would be just regular rules the one specified in the user style
+// would lead. (AB.rr == 1). If we would load/add the rules in reverse order that
+// would not change that (BA.rr == 1)
+  testStyleVsStyle(win, agent, user,
+                   {AB:{rr:1, ii:0, ri:1, ir:0}, BA:{rr:1, ii:0, ri:1, ir:0}});
+
+  testStyleVsStyle(win, agent, doc,
+                   {AB:{rr:1, ii:0, ri:1, ir:0}, BA:{rr:1, ii:0, ri:1, ir:0}});
+
+
+  testStyleVsStyle(win, additionalUser, agent,
+                   {AB:{rr:0, ii:1, ri:1, ir:0}, BA:{rr:0, ii:1, ri:1, ir:0}});
+
+  testStyleVsStyle(win, additionalUser, doc,
+                   {AB:{rr:1, ii:0, ri:1, ir:0}, BA:{rr:1, ii:0, ri:1, ir:0}});
+
+  testStyleVsStyle(win, additionalAgent, user,
+                   {AB:{rr:1, ii:0, ri:1, ir:0}, BA:{rr:1, ii:0, ri:1, ir:0}});
+
+  testStyleVsStyle(win, additionalAgent, doc,
+                   {AB:{rr:1, ii:0, ri:1, ir:0}, BA:{rr:1, ii:0, ri:1, ir:0}});
+
+
+  testStyleVsStyle(win, additionalAgent, additionalUser,
+                   {AB:{rr:1, ii:0, ri:1, ir:0}, BA:{rr:1, ii:0, ri:1, ir:0}});
+
+  testStyleVsStyle(win, author, doc,
+                   {AB:{rr:0, ii:0, ri:1, ir:0}, BA:{rr:0, ii:0, ri:1, ir:0}});
+
+  testStyleVsStyle(win, author, user,
+                   {AB:{rr:0, ii:1, ri:1, ir:0}, BA:{rr:0, ii:1, ri:1, ir:0}});
+
+  testStyleVsStyle(win, author, agent,
+                   {AB:{rr:0, ii:1, ri:1, ir:0}, BA:{rr:0, ii:1, ri:1, ir:0}});
+
+  testStyleVsStyle(win, author, additionalUser,
+                   {AB:{rr:0, ii:1, ri:1, ir:0}, BA:{rr:0, ii:1, ri:1, ir:0}});
+
+  testStyleVsStyle(win, additionalAuthor, doc,
+                   {AB:{rr:0, ii:0, ri:1, ir:0}, BA:{rr:0, ii:0, ri:1, ir:0}});
+
+  testStyleVsStyle(win, additionalAuthor, author,
+                   {AB:{rr:0, ii:0, ri:1, ir:0}, BA:{rr:0, ii:0, ri:1, ir:0}});
+
+  testStyleVsStyle(win, additionalAuthor, user,
+                     {AB:{rr:0, ii:1, ri:1, ir:0}, BA:{rr:0, ii:1, ri:1, ir:0}});
+
+  testStyleVsStyle(win, additionalAuthor, agent,
+                     {AB:{rr:0, ii:1, ri:1, ir:0}, BA:{rr:0, ii:1, ri:1, ir:0}});
+
+  testStyleVsStyle(win, additionalAuthor, additionalUser,
+                   {AB:{rr:0, ii:1, ri:1, ir:0}, BA:{rr:0, ii:1, ri:1, ir:0}});
+
+  // Bug 1228542
+  var url = getStyle('rgb(255, 0, 0)');
+  loadAndRegisterAuthorSheet(win, url);
+  // Avoiding security exception...
+  (new win.Function("document.open()"))();
+  (new win.Function("document.close()"))();
+  unregisterAuthorSheet(win, url);
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_align_justify_computed_values.html b/layout/style/test/test_align_justify_computed_values.html
new file mode 100644
index 0000000000..aa13762cb7
--- /dev/null
+++ b/layout/style/test/test_align_justify_computed_values.html
@@ -0,0 +1,484 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=696253
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test align/justify-items/self/content computed values</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body style="position:relative">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
+<style>
+#flexContainer, #flexContainerGrid { display: flex; position:relative; }
+#gridContainer, #gridContainerFlex { display: grid; position:relative; }
+#display b, #absChild { position:absolute; }
+</style>
+<div id="display">
+  <div id="myDiv"></div>
+  <div id="flexContainer"><a></a><b></b></div>
+  <div id="gridContainer"><a></a><b></b></div>
+  <div id="flexContainerGrid"><a style="diplay:grid"></a><b style="diplay:grid"></b></div>
+  <div id="gridContainerFlex"><a style="diplay:flex"></a><b style="diplay:flex"></b></div>
+</div>
+<div id="absChild"></div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+/*
+ * Utility function for getting computed style of "align-self":
+ */
+function getComputedAlignSelf(elem) {
+  return window.getComputedStyle(elem).alignSelf;
+}
+function getComputedAlignItems(elem) {
+  return window.getComputedStyle(elem).alignItems;
+}
+function getComputedAlignContent(elem) {
+  return window.getComputedStyle(elem).alignContent;
+}
+function getComputedJustifySelf(elem) {
+  return window.getComputedStyle(elem).justifySelf;
+}
+function getComputedJustifyItems(elem) {
+  return window.getComputedStyle(elem).justifyItems;
+}
+function getComputedJustifyContent(elem) {
+  return window.getComputedStyle(elem).justifyContent;
+}
+
+/**
+ * Test behavior of 'align-self:auto' (Bug 696253 and Bug 1304012)
+ * ===============================================
+ *
+ * In a previous revision of the CSS Alignment spec, align-self:auto
+ * was required to actually *compute* to the parent's align-items value --
+ * but now, the spec says it simply computes to itself, and it should
+ * only get converted into the parent's align-items value when it's used
+ * in layout.  This test verifies that we do indeed have it compute to
+ * itself, regardless of the parent's align-items value.
+ */
+
+/*
+ * Tests for a block node with a parent node:
+ */
+function testGeneralNode(elem) {
+  // Test initial computed style
+  // (Initial value should be 'auto', which should compute to itself)
+  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+     "initial computed value of 'align-self' should be 'auto'");
+
+  // Test value after setting align-self explicitly to "auto"
+  elem.style.alignSelf = "auto";
+  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+     "computed value of 'align-self: auto' should be 'auto'");
+  elem.style.alignSelf = ""; // clean up
+
+  // Test value after setting align-self explicitly to "inherit"
+  elem.style.alignSelf = "inherit";
+  if (elem.parentNode && elem.parentNode.style) {
+    is(getComputedAlignSelf(elem), getComputedAlignSelf(elem.parentNode),
+       elem.tagName + ": computed value of 'align-self: inherit' " +
+       "should match the value on the parent");
+  } else {
+    is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+       "computed value of 'align-self: inherit' should be 'auto', " +
+       "when there is no parent");
+  }
+  elem.style.alignSelf = ""; // clean up
+}
+
+/*
+ * Tests that depend on us having a parent node:
+ */
+function testNodeThatHasParent(elem) {
+  // Sanity-check that we actually do have a styleable parent:
+  ok(elem.parentNode && elem.parentNode.style, elem.tagName + ": " +
+     "bug in test -- expecting caller to pass us a node with a parent");
+
+  // Test initial computed style when "align-items" has been set on our parent.
+  // (elem's initial "align-self" value should be "auto", which should compute
+  // to its parent's "align-items" value, which in this case is "center".)
+  elem.parentNode.style.alignItems = "center";
+  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+     "initial computed value of 'align-self' should be 'auto', even " +
+     "after changing parent's 'align-items' value");
+
+  // ...and now test computed style after setting "align-self" explicitly to
+  // "auto" (with parent "align-items" still at "center")
+  elem.style.alignSelf = "auto";
+  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+     "computed value of 'align-self: auto' should remain 'auto', after " +
+     "being explicitly set");
+
+  elem.style.alignSelf = ""; // clean up
+  elem.parentNode.style.alignItems = ""; // clean up
+
+  // Finally: test computed style after setting "align-self" to "inherit"
+  // and leaving parent at its initial value which should be "auto".
+  elem.style.alignSelf = "inherit";
+  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+     "computed value of 'align-self: inherit' should take parent's " +
+     "computed 'align-self' value (which should be 'auto', " +
+     "if we haven't explicitly set any other style");
+  elem.style.alignSelf = ""; // clean up
+ }
+
+/*
+ * Main test function
+ */
+function main() {
+  // Test the root node
+  // ==================
+  // (It's special because it has no parent ComputedStyle.)
+
+  var rootNode = document.documentElement;
+
+  // Sanity-check that we actually have the root node, as far as CSS is concerned.
+  // (Note: rootNode.parentNode is a HTMLDocument object -- not an element that
+  // we inherit style from.)
+  ok(!rootNode.parentNode.style,
+     "expecting root node to have no node to inherit style from");
+
+  testGeneralNode(rootNode);
+
+  // Test the body node
+  // ==================
+  // (It's special because it has no grandparent ComputedStyle.)
+
+  var body = document.getElementsByTagName("body")[0];
+  is(body.parentNode, document.documentElement,
+     "expecting body element's parent to be the root node");
+
+  testGeneralNode(body);
+  testNodeThatHasParent(body);
+
+  //
+  // align-items/self tests:
+  //
+  //// Block tests
+  var element = document.body;
+  var child = document.getElementById("display");
+  var absChild = document.getElementById("absChild");
+  is(getComputedAlignItems(element), 'normal', "default align-items value for block container");
+  is(getComputedAlignSelf(child), 'auto', "default align-self value for block child");
+  is(getComputedAlignSelf(absChild), 'auto', "default align-self value for block container abs.pos. child");
+  element.style.alignItems = "end";
+  is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child");
+  is(getComputedAlignSelf(absChild), 'auto', "align-self:auto value persists for block container abs.pos. child");
+  element.style.alignItems = "left";
+  is(getComputedAlignItems(element), 'end', "align-items:left is an invalid declaration");
+  is(getComputedAlignSelf(child), 'auto', "align-self:auto persists for block child");
+  is(getComputedAlignSelf(absChild), 'auto', "align-self:auto value persists for block container abs.pos. child");
+  element.style.alignItems = "right";
+  is(getComputedAlignItems(element), 'end', "align-items:right is an invalid declaration");
+  is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child");
+  is(getComputedAlignSelf(absChild), 'auto', "align-self:auto value persists for block container abs.pos. child");
+
+  //// Flexbox tests
+  function testFlexAlignItemsSelf(elem) {
+    var item = elem.firstChild;
+    var abs = elem.children[1];
+    is(getComputedAlignItems(elem), 'normal', "default align-items value for flex container");
+    is(getComputedAlignSelf(item), 'auto', "default align-self value for flex item");
+    is(getComputedAlignSelf(abs), 'auto', "default align-self value for flex container abs.pos. child");
+    elem.style.alignItems = "flex-end";
+    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for flex container child");
+    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for flex container abs.pos. child");
+    elem.style.alignItems = "left";
+    is(getComputedAlignItems(elem), 'flex-end', "align-items:left is an invalid declaration");
+    elem.style.alignItems = "";
+  }
+  testFlexAlignItemsSelf(document.getElementById("flexContainer"));
+  testFlexAlignItemsSelf(document.getElementById("flexContainerGrid"));
+
+  //// Grid tests
+  function testGridAlignItemsSelf(elem) {
+    var item = elem.firstChild;
+    var abs = elem.children[1];
+    is(getComputedAlignItems(elem), 'normal', "default align-items value for grid container");
+    is(getComputedAlignSelf(item), 'auto', "default align-self value for grid item");
+    is(getComputedAlignSelf(abs), 'auto', "default align-self value for grid container abs.pos. child");
+    elem.style.alignItems = "end";
+    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
+    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child");
+
+    elem.style.alignItems = "left";
+    is(getComputedAlignItems(elem), 'end', "align-items:left is an invalid declaration");
+    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
+    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child");
+    elem.style.alignItems = "right";
+    is(getComputedAlignItems(elem), 'end', "align-items:right is an invalid declaration");
+    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
+    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child");
+
+    item.style.alignSelf = "";
+    abs.style.alignSelf = "";
+    elem.style.alignItems = "";
+    item.style.alignSelf = "";
+  }
+  testGridAlignItemsSelf(document.getElementById("gridContainer"));
+  testGridAlignItemsSelf(document.getElementById("gridContainerFlex"));
+
+  //
+  // justify-items/self tests:
+  //
+  //// Block tests
+  element = document.body;
+  child = document.getElementById("display");
+  absChild = document.getElementById("absChild");
+  is(getComputedJustifyItems(element), 'normal', "default justify-items value for block container");
+  is(getComputedJustifySelf(child), 'auto', "default justify-self value for block container child");
+  is(getComputedJustifySelf(absChild), 'auto', "default justify-self value for block container abs.pos. child");
+  element.style.justifyItems = "end";
+  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
+  is(getComputedJustifySelf(absChild), 'auto', "justify-self:auto value persists for block container abs.pos. child");
+  element.style.justifyItems = "left";
+  is(getComputedJustifyItems(element), 'left', "justify-items:left computes to itself on a block");
+  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
+  is(getComputedJustifySelf(absChild), 'auto', "justify-self:auto value persists for block container abs.pos. child");
+  element.style.justifyItems = "right";
+  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
+  is(getComputedJustifySelf(absChild), 'auto', "justify-self:auto value persists for block container abs.pos. child");
+  element.style.justifyItems = "safe right";
+  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
+  element.style.justifyItems = "";
+  child.style.justifySelf = "left";
+  is(getComputedJustifySelf(child), 'left', "justify-self:left computes to left on block child");
+  child.style.justifySelf = "right";
+  is(getComputedJustifySelf(child), 'right', "justify-self:right computes to right on block child");
+  child.style.justifySelf = "";
+  absChild.style.justifySelf = "right";
+  is(getComputedJustifySelf(absChild), 'right', "justify-self:right computes to right on block container abs.pos. child");
+
+  //// Flexbox tests
+  function testFlexJustifyItemsSelf(elem) {
+    var item = elem.firstChild;
+    var abs = elem.children[1];
+    is(getComputedJustifyItems(elem), 'normal', "default justify-items value for flex container");
+    is(getComputedJustifySelf(item), 'auto', "default justify-self value for flex item");
+    is(getComputedJustifySelf(abs), 'auto', "default justify-self value for flex container abs.pos. child");
+    elem.style.justifyItems = "flex-end";
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for flex container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for flex container abs.pos. child");
+    elem.style.justifyItems = "left";
+    is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself for flex container");
+    elem.style.justifyItems = "safe right";
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for flex container child");
+    // XXX TODO: add left/right tests (bug 1221565)
+    elem.style.justifyItems = "";
+  }
+  testFlexJustifyItemsSelf(document.getElementById("flexContainer"));
+  testFlexJustifyItemsSelf(document.getElementById("flexContainerGrid"));
+
+  //// Grid tests
+  function testGridJustifyItemsSelf(elem) {
+    var item = elem.firstChild;
+    var abs = elem.children[1];
+    is(getComputedJustifyItems(elem), 'normal', "default justify-items value for grid container");
+    is(getComputedJustifySelf(item), 'auto', "default justify-self value for grid item");
+    is(getComputedJustifySelf(abs), 'auto', "default justify-self value for grid container abs.pos. child");
+    elem.style.justifyItems = "end";
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
+    elem.style.justifyItems = "left";
+    is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself for grid container");
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
+    elem.style.justifyItems = "legacy left";
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
+    elem.style.justifyItems = "right";
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
+    elem.style.justifyItems = "safe right";
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    elem.style.justifyItems = "legacy right";
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
+    elem.style.justifyItems = "legacy center";
+    item.style.justifyItems = "inherit";
+    abs.style.justifyItems = "inherit";
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
+    is(getComputedJustifyItems(elem), 'legacy center', "justify-items computes to itself grid container");
+    is(getComputedJustifyItems(item), 'legacy center', "justify-items inherits including legacy keyword to grid item");
+    is(getComputedJustifyItems(abs), 'legacy center', "justify-items inherits including legacy keyword to grid container abs.pos. child");
+    elem.style.justifyItems = "";
+    item.style.justifySelf = "left";
+    is(getComputedJustifySelf(item), 'left', "justify-self:left computes to left on grid item");
+    item.style.justifySelf = "right";
+    is(getComputedJustifySelf(item), 'right', "justify-self:right computes to right on grid item");
+    item.style.justifySelf = "safe right";
+    is(getComputedJustifySelf(item), 'safe right', "justify-self:'safe right' computes to 'safe right' on grid item");
+    item.style.justifySelf = "";
+    abs.style.justifySelf = "right";
+    is(getComputedJustifySelf(abs), 'right', "justify-self:right computes to right on grid container abs.pos. child");
+    abs.style.justifySelf = "";
+    elem.style.justifyItems = "";
+    item.style.justifySelf = "";
+  }
+  testGridJustifyItemsSelf(document.getElementById("gridContainer"));
+  testGridJustifyItemsSelf(document.getElementById("gridContainerFlex"));
+
+  //
+  // align-content tests:
+  //
+  //// Block tests
+  element = document.body;
+  child = document.getElementById("display");
+  absChild = document.getElementById("absChild");
+  is(getComputedAlignContent(element), 'normal', "default align-content value for block container");
+  is(getComputedAlignContent(child), 'normal', "default align-content value for block child");
+  is(getComputedAlignContent(absChild), 'normal', "default align-content value for block container abs.pos. child");
+  element.style.alignContent = "end";
+  is(getComputedAlignContent(child), 'normal', "default align-content isn't affected by parent align-content value for in-flow child");
+  is(getComputedAlignContent(absChild), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
+  element.style.alignContent = "left";
+  is(getComputedAlignContent(element), 'end', "align-content:left isn't a valid declaration");
+  is(getComputedAlignContent(absChild), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
+  element.style.alignContent = "right";
+  is(getComputedAlignContent(element), 'end', "align-content:right isn't a valid declaration");
+  is(getComputedAlignContent(absChild), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
+  element.style.alignContent = "";
+
+  //// Flexbox tests
+  function testFlexAlignContent(elem) {
+    var item = elem.firstChild;
+    var abs = elem.children[1];
+    is(getComputedAlignContent(elem), 'normal', "default align-content value for flex container");
+    is(getComputedAlignContent(item), 'normal', "default align-content value for flex item");
+    is(getComputedAlignContent(abs), 'normal', "default align-content value for flex container abs.pos. child");
+    elem.style.alignContent = "safe end";
+    is(getComputedAlignContent(elem), 'safe end', "align-content:'safe end' computes to itself for flex container");
+    is(getComputedAlignContent(item), 'normal', "default align-content isn't affected by parent align-content value for flex item");
+    is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for flex container abs.pos. child");
+    elem.style.alignContent = "";
+  }
+  testFlexAlignContent(document.getElementById("flexContainer"));
+  testFlexAlignContent(document.getElementById("flexContainerGrid"));
+
+  //// Grid tests
+  function testGridAlignContent(elem) {
+    var item = elem.firstChild;
+    var abs = elem.children[1];
+    is(getComputedAlignContent(elem), 'normal', "default align-content value for grid container");
+    is(getComputedAlignContent(item), 'normal', "default align-content value for grid item");
+    is(getComputedAlignContent(abs), 'normal', "default align-content value for grid container abs.pos. child");
+    elem.style.alignContent = "safe end";
+    is(getComputedAlignContent(elem), 'safe end', "align-content:'safe end' computes to itself on grid container");
+    is(getComputedAlignContent(item), 'normal', "default align-content isn't affected by parent align-content value for grid item");
+    is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for grid container abs.pos. child");
+    elem.style.alignContent = "safe end";
+    item.style.alignContent = "inherit";
+    abs.style.alignContent = "inherit";
+    is(getComputedAlignContent(elem), 'safe end', "align-content:'safe end' computes to 'align-content:safe end' on grid container");
+    is(getComputedAlignContent(item), 'safe end', "align-content:'safe end' inherits as 'align-content:safe end' to grid item");
+    is(getComputedAlignContent(abs), 'safe end', "align-content:'safe end' inherits as 'align-content:safe end' to grid container abs.pos. child");
+    item.style.alignContent = "";
+    abs.style.alignContent = "";
+    elem.style.alignContent = "";
+    item.style.alignContent = "";
+  }
+  testGridAlignContent(document.getElementById("gridContainer"));
+  testGridAlignContent(document.getElementById("gridContainerFlex"));
+
+
+  //
+  // justify-content tests:
+  //
+  //// Block tests
+  element = document.body;
+  child = document.getElementById("display");
+  absChild = document.getElementById("absChild");
+  is(getComputedJustifyContent(element), 'normal', "default justify-content value for block container");
+  is(getComputedJustifyContent(child), 'normal', "default justify-content value for block child");
+  is(getComputedJustifyContent(absChild), 'normal', "default justify-content value for block container abs.pos. child");
+  element.style.justifyContent = "end";
+  is(getComputedJustifyContent(child), 'normal', "default justify-content isn't affected by parent justify-content value for in-flow child");
+  is(getComputedJustifyContent(absChild), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
+  element.style.justifyContent = "left";
+  is(getComputedJustifyContent(element), 'left', "justify-content:left computes to left on block child");
+  is(getComputedJustifyContent(absChild), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
+  element.style.justifyContent = "right";
+  is(getComputedJustifyContent(element), 'right', "justify-content:right computes to right on block child");
+  is(getComputedJustifyContent(absChild), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
+  element.style.justifyContent = "safe right";
+  is(getComputedJustifyContent(element), 'safe right', "justify-content:'safe right' computes to 'justify-content:safe right'");
+  element.style.justifyContent = "";
+  child.style.justifyContent = "left";
+  is(getComputedJustifyContent(child), 'left', "justify-content:left computes to left on block child");
+  child.style.justifyContent = "right";
+  is(getComputedJustifyContent(child), 'right', "justify-content:right computes to right on block child");
+  child.style.justifyContent = "safe left";
+  is(getComputedJustifyContent(child), 'safe left', "justify-content:safe left computes to 'safe left' on block child");
+  child.style.justifyContent = "";
+  absChild.style.justifyContent = "right";
+  is(getComputedJustifyContent(absChild), 'right', "justify-content:right computes to right on block container abs.pos. child");
+  absChild.style.justifyContent = "";
+
+  //// Flexbox tests
+  function testFlexJustifyContent(elem) {
+    var item = elem.firstChild;
+    var abs = elem.children[1];
+    is(getComputedJustifyContent(elem), 'normal', "default justify-content value for flex container");
+    is(getComputedJustifyContent(item), 'normal', "default justify-content value for flex item");
+    is(getComputedJustifyContent(abs), 'normal', "default justify-content value for flex container abs.pos. child");
+    elem.style.justifyContent = "safe end";
+    is(getComputedJustifyContent(elem), 'safe end', "justify-content:'safe end' computes to itself for flex container");
+    is(getComputedJustifyContent(item), 'normal', "default justify-content isn't affected by parent justify-content value for flex item");
+    is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for flex container abs.pos. child");
+    // XXX TODO: add left/right tests (bug 1221565)
+    elem.style.justifyContent = "";
+  }
+  testFlexJustifyContent(document.getElementById("flexContainer"));
+  testFlexJustifyContent(document.getElementById("flexContainerGrid"));
+
+  //// Grid tests
+  function testGridJustifyContent(elem) {
+    var item = elem.firstChild;
+    var abs = elem.children[1];
+    is(getComputedJustifyContent(elem), 'normal', "default justify-content value for grid container");
+    is(getComputedJustifyContent(item), 'normal', "default justify-content value for grid item");
+    is(getComputedJustifyContent(abs), 'normal', "default justify-content value for grid container abs.pos. child");
+    elem.style.justifyContent = "safe end";
+    is(getComputedJustifyContent(elem), 'safe end', "justify-content:'safe end' computes to itself on grid container");
+    is(getComputedJustifyContent(item), 'normal', "default justify-content isn't affected by parent justify-content value for grid item");
+    is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child");
+    elem.style.justifyContent = "left";
+    is(getComputedJustifyContent(elem), 'left', "justify-content:left computes to left on grid container");
+    is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child");
+    elem.style.justifyContent = "right";
+    is(getComputedJustifyContent(elem), 'right', "justify-content:right computes to right on grid container");
+    is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child");
+    elem.style.justifyContent = "safe right";
+    item.style.justifyContent = "inherit";
+    abs.style.justifyContent = "inherit";
+    is(getComputedJustifyContent(elem), 'safe right', "justify-content:'safe right' computes to 'justify-content:safe right' on grid container");
+    is(getComputedJustifyContent(item), 'safe right', "justify-content:'safe right' inherits as 'justify-content:safe right' to grid item");
+    is(getComputedJustifyContent(abs), 'safe right', "justify-content:'safe right' inherits as 'justify-content:safe right' to grid container abs.pos. child");
+    item.style.justifyContent = "left";
+    is(getComputedJustifyContent(item), 'left', "justify-content:left computes to left on grid item");
+    item.style.justifyContent = "right";
+    is(getComputedJustifyContent(item), 'right', "justify-content:right computes to right on grid item");
+    item.style.justifyContent = "safe right";
+    is(getComputedJustifyContent(item), 'safe right', "justify-content:'safe right' computes to 'safe right' on grid item");
+    item.style.justifyContent = "";
+    abs.style.justifyContent = "right";
+    is(getComputedJustifyContent(abs), 'right', "justify-content:right computes to right on grid container abs.pos. child");
+    abs.style.justifyContent = "";
+    elem.style.justifyContent = "";
+    item.style.justifyContent = "";
+  }
+  testGridJustifyContent(document.getElementById("gridContainer"));
+  testGridJustifyContent(document.getElementById("gridContainerFlex"));
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_all_shorthand.html b/layout/style/test/test_all_shorthand.html
new file mode 100644
index 0000000000..0a3bfd29fd
--- /dev/null
+++ b/layout/style/test/test_all_shorthand.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<title>Test the 'all' shorthand property</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="property_database.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+<body onload="runTest()">
+
+<style id="stylesheet">
+#parent { }
+#child { }
+#child { }
+</style>
+
+<div style="display: none">
+  <div id="parent">
+    <div id="child"></div>
+  </div>
+</div>
+
+<script>
+function runTest() {
+  var sheet = document.getElementById("stylesheet").sheet;
+  var parentRule = sheet.cssRules[0];
+  var childRule1 = sheet.cssRules[1];
+  var childRule2 = sheet.cssRules[2];
+  var parent = document.getElementById("parent");
+  var child = document.getElementById("child");
+
+  // Longhand properties that are NOT considered to be subproperties of the 'all'
+  // shorthand.
+  var excludedSubproperties = ["direction", "unicode-bidi"];
+  var excludedSubpropertiesSet = new Set(excludedSubproperties);
+
+  // Longhand properties that are considered to be subproperties of the 'all'
+  // shorthand.
+  var includedSubproperties = Object.keys(gCSSProperties).filter(function(prop) {
+    var info = gCSSProperties[prop];
+    return info.type == CSS_TYPE_LONGHAND &&
+           !excludedSubpropertiesSet.has(prop);
+  });
+
+  // All longhand properties to be tested.
+  var allSubproperties = includedSubproperties.concat(excludedSubproperties);
+
+
+  // First, get the computed value for the initial value and one other value of
+  // each property.
+  var initialComputedValues = new Map();
+  var otherComputedValues = new Map();
+
+  allSubproperties.forEach(function(prop) {
+    parentRule.style.setProperty(prop, "initial", "");
+    initialComputedValues.set(prop, getComputedStyle(parent, "").getPropertyValue(prop));
+    parentRule.style.cssText = "";
+  });
+
+  allSubproperties.forEach(function(prop) {
+    var info = gCSSProperties[prop];
+    parentRule.style.setProperty(prop, info.other_values[0], "");
+    otherComputedValues.set(prop, getComputedStyle(parent, "").getPropertyValue(prop));
+    parentRule.style.cssText = "";
+  });
+
+
+  // Test setting all:inherit through setProperty.
+  includedSubproperties.forEach(function(prop) {
+    var info = gCSSProperties[prop];
+    parentRule.style.setProperty(prop, info.other_values[0], "");
+    childRule1.style.setProperty(prop, "initial");
+    childRule2.style.setProperty("all", "inherit");
+    is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
+       "computed value for " + prop + " when 'all:inherit' set with setProperty");
+    parentRule.style.cssText = "";
+    childRule1.style.cssText = "";
+    childRule2.style.cssText = "";
+  });
+  excludedSubproperties.forEach(function(prop) {
+    var info = gCSSProperties[prop];
+    parentRule.style.setProperty(prop, info.other_values[0], "");
+    childRule1.style.setProperty(prop, "initial");
+    childRule2.style.setProperty("all", "inherit");
+    is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
+       "computed value for excluded subproperty " + prop + " when 'all:inherit' set with setProperty");
+    parentRule.style.cssText = "";
+    childRule1.style.cssText = "";
+    childRule2.style.cssText = "";
+  });
+
+  // Test setting all:initial through setProperty.
+  includedSubproperties.forEach(function(prop) {
+    var info = gCSSProperties[prop];
+    parentRule.style.setProperty(prop, info.other_values[0], "");
+    childRule1.style.setProperty(prop, "inherit");
+    childRule2.style.setProperty("all", "initial");
+    is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
+       "computed value for " + prop + " when 'all:initial' set with setProperty");
+    parentRule.style.cssText = "";
+    childRule1.style.cssText = "";
+    childRule2.style.cssText = "";
+  });
+  excludedSubproperties.forEach(function(prop) {
+    var info = gCSSProperties[prop];
+    parentRule.style.setProperty(prop, info.other_values[0], "");
+    childRule1.style.setProperty(prop, info.other_values[0], "");
+    childRule2.style.setProperty("all", "initial");
+    is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
+       "computed value for excluded subproperty " + prop + " when 'all:initial' set with setProperty");
+    parentRule.style.cssText = "";
+    childRule1.style.cssText = "";
+    childRule2.style.cssText = "";
+  });
+
+  // Test setting all:unset through setProperty.
+  includedSubproperties.forEach(function(prop) {
+    var info = gCSSProperties[prop];
+    if (info.inherited) {
+      parentRule.style.setProperty(prop, info.other_values[0], "");
+      childRule1.style.setProperty(prop, "initial", "");
+      childRule2.style.setProperty("all", "unset");
+      is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
+         "computed value for " + prop + " when 'all:unset' set with setProperty");
+    } else {
+      parentRule.style.setProperty(prop, info.other_values[0], "");
+      childRule1.style.setProperty(prop, info.other_values[0], "");
+      childRule2.style.setProperty("all", "unset");
+      is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
+         "computed value for " + prop + " when 'all:unset' set with setProperty");
+    }
+    parentRule.style.cssText = "";
+    childRule1.style.cssText = "";
+    childRule2.style.cssText = "";
+  });
+  excludedSubproperties.forEach(function(prop) {
+    var info = gCSSProperties[prop];
+    if (info.inherited) {
+      parentRule.style.setProperty(prop, info.other_values[0], "");
+      childRule1.style.setProperty(prop, "initial", "");
+      childRule2.style.setProperty("all", "unset");
+      is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
+         "computed value for excluded subproperty " + prop + " when 'all:unset' set with setProperty");
+    } else {
+      parentRule.style.setProperty(prop, info.other_values[0], "");
+      childRule1.style.setProperty(prop, info.other_values[0], "");
+      childRule2.style.setProperty("all", "unset");
+      is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
+         "computed value for excluded subproperty " + prop + " when 'all:unset' set with setProperty");
+    }
+    parentRule.style.cssText = "";
+    childRule1.style.cssText = "";
+    childRule2.style.cssText = "";
+  });
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+</script>
diff --git a/layout/style/test/test_animations.html b/layout/style/test/test_animations.html
new file mode 100644
index 0000000000..05319219bb
--- /dev/null
+++ b/layout/style/test/test_animations.html
@@ -0,0 +1,2105 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=435442
+-->
+<!--
+
+ ====== PLEASE KEEP THIS IN SYNC WITH test_animations_omta.html =======
+
+ test_animations_omta.html mimicks the content of this file but with
+ extra machinery for testing animation values on the compositor thread.
+
+ If you are making changes to this file or to test_animations_omta.html, please
+ try to keep them consistent where appropriate.
+
+-->
+<head>
+  <title>Test for css3-animations (Bug 435442)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+  @keyframes anim1 {
+     0% { margin-left: 0px }
+     50% { margin-left: 80px }
+     100% { margin-left: 100px }
+  }
+  @keyframes anim2 {
+    from { margin-right: 0 } to { margin-right: 100px }
+  }
+  @keyframes anim3 {
+    from { margin-top: 0 } to { margin-top: 100px }
+  }
+  @keyframes anim4 {
+    from { margin-bottom: 0 } to { margin-bottom: 100px }
+  }
+  @keyframes anim5 {
+    from { margin-left: 0 } to { margin-left: 100px }
+  }
+
+  @keyframes kf1 {
+    50% { margin-top: 50px }
+    to { margin-top: 150px }
+  }
+  @keyframes kf2 {
+    from { margin-top: 150px }
+    50% { margin-top: 50px }
+  }
+  @keyframes kf3 {
+    25% { margin-top: 100px }
+  }
+  @keyframes kf4 {
+    to, from { display: none; margin-top: 37px }
+  }
+  @keyframes kf_cascade1 {
+    from { padding-top: 50px }
+    50%, from { padding-top: 30px }      /* wins: 0% */
+    75%, 85%, 50% { padding-top: 20px }  /* wins: 75%, 50% */
+    100%, 85% { padding-top: 70px }      /* wins: 100% */
+    85.1% { padding-top: 60px }          /* wins: 85.1% */
+    85% { padding-top: 30px }            /* wins: 85% */
+  }
+  @keyframes kf_cascade2 { from, to { margin-top: 100px } }
+  @keyframes kf_cascade2 { from, to { margin-left: 200px } }
+  @keyframes kf_cascade2 { from, to { margin-left: 300px } }
+  @keyframes kf_tf1 {
+    0%   { padding-bottom: 20px; animation-timing-function: ease }
+    25%  { padding-bottom: 60px; }
+    50%  { padding-bottom: 160px; animation-timing-function: steps(5) }
+    75%  { padding-bottom: 120px; animation-timing-function: linear }
+    100% { padding-bottom: 20px; animation-timing-function: ease-out }
+  }
+
+  @keyframes always_fifty {
+    from, to { margin-left: 50px }
+  }
+
+  #withbefore::before, #withafter::after {
+    content: "";
+    animation: anim2 1s linear alternate 3;
+  }
+
+  @keyframes multiprop {
+    0% {
+      padding-top: 10px; padding-left: 30px;
+      animation-timing-function: ease;
+    }
+    25% {
+      padding-left: 50px;
+      animation-timing-function: ease-out;
+    }
+    50% {
+      padding-top: 40px;
+    }
+    75% {
+      padding-top: 80px; padding-left: 60px;
+      animation-timing-function: ease-in;
+    }
+  }
+
+  @keyframes uaoverride {
+    0%, 100% { line-height: 3; margin-top: 20px }
+    50% { margin-top: 120px }
+  }
+
+  @keyframes cascade {
+    0%, 25%, 100% { top: 0 }
+    50%, 75% { top: 100px }
+    0%, 75%, 100% { left: 0 }
+    25%, 50% { left: 100px }
+  }
+  @keyframes cascade2 {
+    0% { text-indent: 0 }
+    25% { text-indent: 30px; animation-timing-function: ease-in } /* beaten by rule below */
+    50% { text-indent: 0 }
+    25% { text-indent: 50px }
+    100% { text-indent: 100px }
+  }
+
+  @keyframes primitives1 {
+    from { -moz-transform: rotate(0deg) translateX(0px) scaleX(1)
+      translate(0px) scale3d(1, 1, 1); }
+    to { -moz-transform: rotate(270deg) translate3d(0px, 0px, 0px) scale(1)
+      translateY(0px) scaleY(1); }
+  }
+
+  @keyframes important1 {
+    from { margin-top: 50px; }
+    50%  { margin-top: 150px !important; } /* ignored */
+    to   { margin-top: 100px; }
+  }
+
+  @keyframes important2 {
+    from { margin-top: 50px;
+           margin-bottom: 100px; }
+    to   { margin-top: 150px !important; /* ignored */
+           margin-bottom: 50px; }
+  }
+
+  @keyframes empty { }
+  @keyframes nearlyempty { to { margin-left: 100px; } }
+
+  @keyframes lowerpriority {
+    0% {
+      top: 0px;
+      left: 0px;
+    }
+    100% {
+      top: 100px;
+      left: 100px;
+    }
+  }
+
+  @keyframes overrideleft {
+    0%, 100% { left: 0px }
+  }
+
+  @keyframes overridetop {
+    0%, 100% { top: 0px }
+  }
+
+  @keyframes opacitymid {
+    0% { opacity: 0.2 }
+    100% { opacity: 0.8 }
+  }
+
+  @keyframes "string name 1" { /* using string for keyframes name */
+    0%, 100% { left: 1px }
+  }
+
+  @keyframes "string name 2" {
+    0%, 100% { left: 2px }
+  }
+
+  @keyframes custom\ ident\ 1 {
+    0%, 100% { left: 3px }
+  }
+
+  @keyframes custom\ ident\ 2 {
+    0%, 100% { left: 4px }
+  }
+
+  @keyframes "initial" {
+    0%, 100% { left: 5px }
+  }
+
+  @keyframes initial { /* illegal as an identifier, should be dropped */
+    0%, 100% { left: 6px }
+  }
+
+  @keyframes "none" {
+    0%, 100% { left: 7px }
+  }
+
+  @keyframes none { /* illegal as an identifier, should be dropped */
+    0%, 100% { left: 8px }
+  }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=435442">Mozilla Bug 435442</a>
+<div id="display"></div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test for css3-animations (Bug 435442) **/
+
+var e = new AnimationEvent("foo",
+                            {
+                              bubbles: true,
+                              cancelable: true,
+                              animationName: "name",
+                              elapsedTime: 0.5,
+                              pseudoElement: "pseudo"
+                            });
+is(e.bubbles, true);
+is(e.cancelable, true);
+is(e.animationName, "name");
+is(e.elapsedTime, 0.5);
+is(e.pseudoElement, "pseudo");
+is(e.isTrusted, false)
+
+// Shortcut new_div to update div, cs
+var div, cs;
+var originalNewDiv = window.new_div;
+window.new_div = function(style) {
+  [ div, cs ] = originalNewDiv(style);
+};
+
+// take over the refresh driver right from the start.
+advance_clock(0);
+
+SimpleTest.registerCleanupFunction(() => {
+  SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
+});
+
+/*
+ * css3-animations:  2. Animations
+ * http://dev.w3.org/csswg/css3-animations/#animations
+ */
+
+// Test that animations don't affect the computed value before the
+// start of the animation or after its end.  Test without
+// animation-fill-mode, but then repeat the test with all the values of
+// animation-fill-mode.
+function test_fill_mode(fill_mode, fills_backwards, fills_forwards)
+{
+  var style = "margin-left: 30px; animation: 10s 3s anim1 linear";
+  var desc;
+  if (fill_mode.length > 0) {
+    style += " " + fill_mode;
+    desc = "fill mode " + fill_mode + ": ";
+  } else {
+    desc = "default fill mode: ";
+  }
+  new_div(style);
+  listen();
+  if (fills_backwards)
+    is(cs.marginLeft, "0px", desc + "does affect value during delay (0s)");
+  else
+    is(cs.marginLeft, "30px", desc + "doesn't affect value during delay (0s)");
+  advance_clock(2000);
+  if (fills_backwards)
+    is(cs.marginLeft, "0px", desc + "does affect value during delay (2s)");
+  else
+    is(cs.marginLeft, "30px", desc + "doesn't affect value during delay (2s)");
+  check_events([], "before start in test_fill_mode");
+  advance_clock(1000);
+  check_events([{ type: 'animationstart', target: div,
+                  bubbles: true, cancelable: false,
+                  animationName: 'anim1', elapsedTime: 0.0,
+                  pseudoElement: "" }],
+               "right after start in test_fill_mode");
+  if (fills_backwards)
+    is(cs.marginLeft, "0px", desc + "affects value at start of animation");
+  advance_clock(125);
+  is(cs.marginLeft, "2px", desc + "affects value during animation");
+  advance_clock(2375);
+  is(cs.marginLeft, "40px", desc + "affects value during animation");
+  advance_clock(2500);
+  is(cs.marginLeft, "80px", desc + "affects value during animation");
+  advance_clock(2500);
+  is(cs.marginLeft, "90px", desc + "affects value during animation");
+  advance_clock(2375);
+  is(cs.marginLeft, "99.5px", desc + "affects value during animation");
+  check_events([], "before end in test_fill_mode");
+  advance_clock(125);
+  check_events([{ type: 'animationend', target: div,
+                  bubbles: true, cancelable: false,
+                  animationName: 'anim1', elapsedTime: 10.0,
+                  pseudoElement: "" }],
+               "right after end in test_fill_mode");
+  if (fills_forwards)
+    is(cs.marginLeft, "100px", desc + "affects value at end of animation");
+  advance_clock(10);
+  if (fills_forwards)
+    is(cs.marginLeft, "100px", desc + "does affect value after animation");
+  else
+    is(cs.marginLeft, "30px", desc + "does not affect value after animation");
+  done_div();
+}
+test_fill_mode("", false, false);
+test_fill_mode("none", false, false);
+test_fill_mode("forwards", false, true);
+test_fill_mode("backwards", true, false);
+test_fill_mode("both", true, true);
+
+// Test that animations continue running when the animation name
+// list is changed.
+new_div("animation: anim1 linear 10s");
+  is(cs.getPropertyValue("margin-top"), "0px",
+     "just anim1, margin-top at start");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "just anim1, margin-right at start");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "just anim1, margin-bottom at start");
+  is(cs.getPropertyValue("margin-left"), "0px",
+     "just anim1, margin-left at start");
+advance_clock(1000);
+  is(cs.getPropertyValue("margin-top"), "0px",
+     "just anim1, margin-top at 1s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "just anim1, margin-right at 1s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "just anim1, margin-bottom at 1s");
+  is(cs.getPropertyValue("margin-left"), "16px",
+     "just anim1, margin-left at 1s");
+// append anim2
+div.style.animation = "anim1 linear 10s, anim2 linear 10s";
+  is(cs.getPropertyValue("margin-top"), "0px",
+     "anim1 + anim2, margin-top at 1s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim1 + anim2, margin-right at 1s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim1 + anim2, margin-bottom at 1s");
+  is(cs.getPropertyValue("margin-left"), "16px",
+     "anim1 + anim2, margin-left at 1s");
+advance_clock(1000);
+  is(cs.getPropertyValue("margin-top"), "0px",
+     "anim1 + anim2, margin-top at 2s");
+  is(cs.getPropertyValue("margin-right"), "10px",
+     "anim1 + anim2, margin-right at 2s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim1 + anim2, margin-bottom at 2s");
+  is(cs.getPropertyValue("margin-left"), "32px",
+     "anim1 + anim2, margin-left at 2s");
+// prepend anim3
+div.style.animation = "anim3 linear 10s, anim1 linear 10s, anim2 linear 10s";
+  is(cs.getPropertyValue("margin-top"), "0px",
+     "anim3 + anim1 + anim2, margin-top at 2s");
+  is(cs.getPropertyValue("margin-right"), "10px",
+     "anim3 + anim1 + anim2, margin-right at 2s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim3 + anim1 + anim2, margin-bottom at 2s");
+  is(cs.getPropertyValue("margin-left"), "32px",
+     "anim3 + anim1 + anim2, margin-left at 2s");
+advance_clock(1000);
+  is(cs.getPropertyValue("margin-top"), "10px",
+     "anim3 + anim1 + anim2, margin-top at 3s");
+  is(cs.getPropertyValue("margin-right"), "20px",
+     "anim3 + anim1 + anim2, margin-right at 3s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim3 + anim1 + anim2, margin-bottom at 3s");
+  is(cs.getPropertyValue("margin-left"), "48px",
+     "anim3 + anim1 + anim2, margin-left at 3s");
+// remove anim2 from end
+div.style.animation = "anim3 linear 10s, anim1 linear 10s";
+  is(cs.getPropertyValue("margin-top"), "10px",
+     "anim3 + anim1, margin-top at 3s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim3 + anim1, margin-right at 3s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim3 + anim1, margin-bottom at 3s");
+  is(cs.getPropertyValue("margin-left"), "48px",
+     "anim3 + anim1, margin-left at 3s");
+advance_clock(1000);
+  is(cs.getPropertyValue("margin-top"), "20px",
+     "anim3 + anim1, margin-top at 4s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim3 + anim1, margin-right at 4s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim3 + anim1, margin-bottom at 4s");
+  is(cs.getPropertyValue("margin-left"), "64px",
+     "anim3 + anim1, margin-left at 4s");
+// swap anim1 and anim3, change duration of anim3
+div.style.animation = "anim1 linear 10s, anim3 linear 5s";
+  is(cs.getPropertyValue("margin-top"), "40px",
+     "anim1 + anim3, margin-top at 4s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim1 + anim3, margin-right at 4s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim1 + anim3, margin-bottom at 4s");
+  is(cs.getPropertyValue("margin-left"), "64px",
+     "anim1 + anim3, margin-left at 4s");
+advance_clock(1000);
+  is(cs.getPropertyValue("margin-top"), "60px",
+     "anim1 + anim3, margin-top at 5s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim1 + anim3, margin-right at 5s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim1 + anim3, margin-bottom at 5s");
+  is(cs.getPropertyValue("margin-left"), "80px",
+     "anim1 + anim3, margin-left at 5s");
+// list anim1 twice, last duration wins, original start time still applies
+div.style.animation = "anim1 linear 10s, anim3 linear 5s, anim1 linear 20s";
+  is(cs.getPropertyValue("margin-top"), "60px",
+     "anim1 + anim3 + anim1, margin-top at 5s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim1 + anim3 + anim1, margin-right at 5s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim1 + anim3 + anim1, margin-bottom at 5s");
+  is(cs.getPropertyValue("margin-left"), "40px",
+     "anim1 + anim3 + anim1, margin-left at 5s");
+// drop one of the anim1, and list anim5 as well, which animates
+// the same property as anim1
+div.style.animation = "anim3 linear 5s, anim1 linear 20s, anim5 linear 10s";
+  is(cs.getPropertyValue("margin-top"), "60px",
+     "anim3 + anim1 + anim5, margin-top at 5s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim3 + anim1 + anim5, margin-right at 5s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim3 + anim1 + anim5, margin-bottom at 5s");
+  is(cs.getPropertyValue("margin-left"), "0px",
+     "anim3 + anim1 + anim5, margin-left at 5s");
+advance_clock(1000);
+  is(cs.getPropertyValue("margin-top"), "80px",
+     "anim3 + anim1 + anim5, margin-top at 6s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim3 + anim1 + anim5, margin-right at 6s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim3 + anim1 + anim5, margin-bottom at 6s");
+  is(cs.getPropertyValue("margin-left"), "10px",
+     "anim3 + anim1 + anim5, margin-left at 6s");
+// now swap the anim5 and anim1 order
+div.style.animation = "anim3 linear 5s, anim5 linear 10s, anim1 linear 20s";
+  is(cs.getPropertyValue("margin-top"), "80px",
+     "anim3 + anim1 + anim5, margin-top at 6s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim3 + anim1 + anim5, margin-right at 6s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim3 + anim1 + anim5, margin-bottom at 6s");
+  is(cs.getPropertyValue("margin-left"), "48px",
+     "anim3 + anim1 + anim5, margin-left at 6s");
+advance_clock(1000);
+  is(cs.getPropertyValue("margin-top"), "0px",
+     "anim3 + anim1 + anim5, margin-top at 7s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim3 + anim1 + anim5, margin-right at 7s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim3 + anim1 + anim5, margin-bottom at 7s");
+  is(cs.getPropertyValue("margin-left"), "56px",
+     "anim3 + anim1 + anim5, margin-left at 7s");
+// swap anim1 and anim5 back
+div.style.animation = "anim3 linear 5s, anim1 linear 20s, anim5 linear 10s";
+  is(cs.getPropertyValue("margin-top"), "0px",
+     "anim3 + anim1 + anim5, margin-top at 7s");
+  is(cs.getPropertyValue("margin-right"), "0px",
+     "anim3 + anim1 + anim5, margin-right at 7s");
+  is(cs.getPropertyValue("margin-bottom"), "0px",
+     "anim3 + anim1 + anim5, margin-bottom at 7s");
+  is(cs.getPropertyValue("margin-left"), "20px",
+     "anim3 + anim1 + anim5, margin-left at 7s");
+advance_clock(100);
+  is(cs.getPropertyValue("margin-top"), "0px",
+     "anim3 + anim1 + anim5, margin-top at 7.1s");
+// Change the animation fill mode on the completed animation.
+div.style.animation = "anim3 linear 5s forwards, anim1 linear 20s, anim5 linear 10s";
+  is(cs.getPropertyValue("margin-top"), "100px",
+     "anim3 + anim1 + anim5, margin-top at 7.1s, with fill mode");
+advance_clock(900);
+  is(cs.getPropertyValue("margin-top"), "100px",
+     "anim3 + anim1 + anim5, margin-top at 8s, with fill mode");
+// Change the animation duration on the completed animation, so it is
+// no longer completed.
+div.style.animation = "anim3 linear 10s, anim1 linear 20s, anim5 linear 10s";
+  is(cs.getPropertyValue("margin-top"), "60px",
+     "anim3 + anim1 + anim5, margin-top at 8s, with fill mode");
+  is(cs.getPropertyValue("margin-left"), "30px",
+     "anim3 + anim1 + anim5, margin-left at 8s");
+done_div();
+
+/*
+ * css3-animations:  3. Keyframes
+ * http://dev.w3.org/csswg/css3-animations/#keyframes
+ *
+ * Also see test_keyframes_rules.html .
+ */
+
+// Test the rules on keyframes that lack a 0% or 100% rule:
+// (simultaneously, test that reverse animations have their keyframes
+// run backwards)
+
+// 100px at 0%, 50px at 50%, 150px at 100%
+new_div("margin-top: 100px; animation: kf1 ease 1s alternate infinite");
+is(cs.marginTop, "100px", "no-0% at 0.0s");
+advance_clock(100);
+is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.2), 0.01,
+          "no-0% at 0.1s");
+advance_clock(200);
+is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.6), 0.01,
+          "no-0% at 0.3s");
+advance_clock(200);
+is(cs.marginTop, "50px", "no-0% at 0.5s");
+advance_clock(200);
+is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.4), 0.01,
+          "no-0% at 0.7s");
+advance_clock(200);
+is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.8), 0.01,
+          "no-0% at 0.9s");
+advance_clock(100);
+is(cs.marginTop, "150px", "no-0% at 1.0s");
+advance_clock(100);
+is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.8), 0.01,
+          "no-0% at 1.1s");
+advance_clock(300);
+is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.2), 0.01,
+          "no-0% at 1.4s");
+advance_clock(300);
+is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.6), 0.01,
+          "no-0% at 1.7s");
+advance_clock(200);
+is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.2), 0.01,
+          "no-0% at 1.9s");
+advance_clock(100);
+is(cs.marginTop, "100px", "no-0% at 2.0s");
+done_div();
+
+// 150px at 0%, 50px at 50%, 100px at 100%
+new_div("margin-top: 100px; animation: kf2 ease-in 1s alternate infinite");
+is(cs.marginTop, "150px", "no-100% at 0.0s");
+advance_clock(100);
+is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.2), 0.01,
+          "no-100% at 0.1s");
+advance_clock(200);
+is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.6), 0.01,
+          "no-100% at 0.3s");
+advance_clock(200);
+is(cs.marginTop, "50px", "no-100% at 0.5s");
+advance_clock(200);
+is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.4), 0.01,
+          "no-100% at 0.7s");
+advance_clock(200);
+is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.8), 0.01,
+          "no-100% at 0.9s");
+advance_clock(100);
+is(cs.marginTop, "100px", "no-100% at 1.0s");
+advance_clock(100);
+is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.8), 0.01,
+          "no-100% at 1.1s");
+advance_clock(300);
+is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.2), 0.01,
+          "no-100% at 1.4s");
+advance_clock(300);
+is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.6), 0.01,
+          "no-100% at 1.7s");
+advance_clock(200);
+is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.2), 0.01,
+          "no-100% at 1.9s");
+advance_clock(100);
+is(cs.marginTop, "150px", "no-100% at 2.0s");
+done_div();
+
+
+// 50px at 0%, 100px at 25%, 50px at 100%
+new_div("margin-top: 50px; animation: kf3 ease-out 1s alternate infinite");
+is(cs.marginTop, "50px", "no-0%-no-100% at 0.0s");
+advance_clock(50);
+is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.2), 0.01,
+          "no-0%-no-100% at 0.05s");
+advance_clock(100);
+is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.6), 0.01,
+          "no-0%-no-100% at 0.15s");
+advance_clock(100);
+is(cs.marginTop, "100px", "no-0%-no-100% at 0.25s");
+advance_clock(300);
+is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.4), 0.01,
+          "no-0%-no-100% at 0.55s");
+advance_clock(300);
+is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.8), 0.01,
+          "no-0%-no-100% at 0.85s");
+advance_clock(150);
+is(cs.marginTop, "50px", "no-0%-no-100% at 1.0s");
+advance_clock(150);
+is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.8), 0.01,
+          "no-0%-no-100% at 1.15s");
+advance_clock(450);
+is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.2), 0.01,
+          "no-0%-no-100% at 1.6s");
+advance_clock(250);
+is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.6), 0.01,
+          "no-0%-no-100% at 1.85s");
+advance_clock(100);
+is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.2), 0.01,
+          "no-0%-no-100% at 1.95s");
+advance_clock(50);
+is(cs.marginTop, "50px", "no-0%-no-100% at 2.0s");
+done_div();
+
+// Test that non-animatable properties are ignored.
+// Simultaneously, test that the block is still honored, and that
+// we still override the value when two consecutive keyframes have
+// the same value.
+new_div("animation: kf4 ease 10s");
+is(cs.display, "block",
+   "non-animatable properties should be ignored (linear, 0s)");
+is(cs.marginTop, "37px",
+   "animatable properties should still apply (linear, 0s)");
+advance_clock(1000);
+is(cs.display, "block",
+   "non-animatable properties should be ignored (linear, 1s)");
+is(cs.marginTop, "37px",
+   "animatable properties should still apply (linear, 1s)");
+done_div();
+new_div("animation: kf4 step-start 10s");
+is(cs.display, "block",
+   "non-animatable properties should be ignored (step-start, 0s)");
+is(cs.marginTop, "37px",
+   "animatable properties should still apply (step-start, 0s)");
+advance_clock(1000);
+is(cs.display, "block",
+   "non-animatable properties should be ignored (step-start, 1s)");
+is(cs.marginTop, "37px",
+   "animatable properties should still apply (step-start, 1s)");
+done_div();
+
+// Test cascading of the keyframes within an @keyframes rule.
+new_div("animation: kf_cascade1 linear 10s");
+//   0%: 30px
+//  50%: 20px
+//  75%: 20px
+//  85%: 30px
+//  85.1%: 60px
+// 100%: 70px
+is(cs.paddingTop, "30px", "kf_cascade1 at 0s");
+advance_clock(2500);
+is(cs.paddingTop, "25px", "kf_cascade1 at 2.5s");
+advance_clock(2500);
+is(cs.paddingTop, "20px", "kf_cascade1 at 5s");
+advance_clock(2000);
+is(cs.paddingTop, "20px", "kf_cascade1 at 7s");
+advance_clock(500);
+is(cs.paddingTop, "20px", "kf_cascade1 at 7.5s");
+advance_clock(500);
+is(cs.paddingTop, "25px", "kf_cascade1 at 8s");
+advance_clock(500);
+is(cs.paddingTop, "30px", "kf_cascade1 at 8.5s");
+advance_clock(10);
+is_approx(px_to_num(cs.paddingTop), 60, 0.001, "kf_cascade1 at 8.51s");
+advance_clock(745);
+is(cs.paddingTop, "65px", "kf_cascade1 at 9.2505s");
+done_div();
+
+// Test cascading of the @keyframes rules themselves.
+new_div("animation: kf_cascade2 linear 10s");
+is(cs.marginTop, "0px", "@keyframes rule with margin-top should be ignored");
+is(cs.marginLeft, "300px", "last @keyframes rule with margin-left should win");
+done_div();
+
+/*
+ * css3-animations:  3.1. Timing functions for keyframes
+ * http://dev.w3.org/csswg/css3-animations/#timing-functions-for-keyframes-
+ */
+new_div("animation: kf_tf1 ease-in 10s alternate infinite");
+is(cs.paddingBottom, "20px",
+   "keyframe timing functions test at 0s (test needed for flush)");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.4), 0.01,
+          "keyframe timing functions test at 1s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.8), 0.01,
+          "keyframe timing functions test at 2s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.2), 0.01,
+          "keyframe timing functions test at 3s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.6), 0.01,
+          "keyframe timing functions test at 4s");
+advance_clock(1000);
+is(cs.paddingBottom, "160px",
+   "keyframe timing functions test at 5s");
+advance_clock(1001); // avoid floating-point error
+is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.4), 0.01,
+          "keyframe timing functions test at 6s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.8), 0.01,
+          "keyframe timing functions test at 7s");
+advance_clock(999);
+is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.2), 0.01,
+          "keyframe timing functions test at 8s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.6), 0.01,
+          "keyframe timing functions test at 9s");
+advance_clock(1000);
+is(cs.paddingBottom, "20px",
+   "keyframe timing functions test at 10s");
+advance_clock(20000);
+is(cs.paddingBottom, "20px",
+   "keyframe timing functions test at 30s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.6), 0.01,
+          "keyframe timing functions test at 31s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.2), 0.01,
+          "keyframe timing functions test at 32s");
+advance_clock(999); // avoid floating-point error
+is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.8), 0.01,
+          "keyframe timing functions test at 33s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.4), 0.01,
+          "keyframe timing functions test at 34s");
+advance_clock(1001);
+is(cs.paddingBottom, "160px",
+   "keyframe timing functions test at 35s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.6), 0.01,
+          "keyframe timing functions test at 36s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.2), 0.01,
+          "keyframe timing functions test at 37s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.8), 0.01,
+          "keyframe timing functions test at 38s");
+advance_clock(1000);
+is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.4), 0.01,
+          "keyframe timing functions test at 39s");
+advance_clock(1000);
+is(cs.paddingBottom, "20px",
+   "keyframe timing functions test at 40s");
+done_div();
+
+// spot-check the same thing without alternate
+new_div("animation: kf_tf1 ease-in 10s infinite");
+is(cs.paddingBottom, "20px",
+   "keyframe timing functions test at 0s (test needed for flush)");
+advance_clock(11000);
+is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.4), 0.01,
+          "keyframe timing functions test at 11s");
+advance_clock(3000);
+is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.6), 0.01,
+          "keyframe timing functions test at 14s");
+advance_clock(2001); // avoid floating-point error
+is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.4), 0.01,
+          "keyframe timing functions test at 16s");
+advance_clock(1999);
+is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.2), 0.01,
+          "keyframe timing functions test at 18s");
+done_div();
+
+/*
+ * css3-animations:  3.2. The 'animation-name' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-name-property-
+ */
+
+// animation-name is reasonably well-tested up in the tests for Section
+// 2, particularly the tests that "Test that animations continue running
+// when the animation name list is changed."
+
+// Test that 'animation-name: none' steps the animation, and setting
+// it again starts a new one.
+
+new_div("");
+div.style.animation = "anim2 ease-in-out 10s";
+is(cs.marginRight, "0px", "after setting animation-name to anim2");
+advance_clock(1000);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in_out(0.1), 0.01,
+          "before changing animation-name to none");
+div.style.animationName = "none";
+is(cs.marginRight, "0px", "after changing animation-name to none");
+advance_clock(1000);
+is(cs.marginRight, "0px", "after changing animation-name to none plus 1s");
+div.style.animationName = "anim2";
+is(cs.marginRight, "0px", "after changing animation-name to anim2");
+advance_clock(1000);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in_out(0.1), 0.01,
+          "at 1s in animation when animation-name no longer none again");
+div.style.animationName = "none";
+is(cs.marginRight, "0px", "after changing animation-name to none");
+advance_clock(1000);
+is(cs.marginRight, "0px", "after changing animation-name to none plus 1s");
+done_div();
+
+/*
+ * css3-animations:  3.3. The 'animation-duration' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-duration-property-
+ */
+
+// FIXME: test animation-duration of 0 (quite a bit, including interaction
+// with fill-mode, count, and reversing), once I know what the right
+// behavior is.
+
+/*
+ * css3-animations:  3.4. The 'animation-timing-function' Property
+ * http://dev.w3.org/csswg/css3-animations/#animation-timing-function_tag
+ */
+
+// tested in tests for section 3.1
+
+/*
+ * css3-animations:  3.5. The 'animation-iteration-count' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-iteration-count-property-
+ */
+new_div("animation: anim2 ease-in 10s 0.3 forwards");
+is(cs.marginRight, "0px", "animation-iteration-count test 1 at 0s");
+advance_clock(2000);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
+          "animation-iteration-count test 1 at 2s");
+advance_clock(900);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.29), 0.01,
+          "animation-iteration-count test 1 at 2.9s");
+advance_clock(100);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
+          "animation-iteration-count test 1 at 3s");
+advance_clock(100);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
+          "animation-iteration-count test 1 at 3.1s");
+advance_clock(5000);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
+          "animation-iteration-count test 1 at 8.1s");
+done_div();
+
+new_div("animation: anim2 ease-in 10s 0.3"
+        + ", anim3 ease-out 20s 1.2 alternate forwards"
+        + ", anim4 ease-in-out 5s 1.6 forwards");
+is(cs.marginRight, "0px", "animation-iteration-count test 2 at 0s");
+is(cs.marginTop, "0px", "animation-iteration-count test 3 at 0s");
+is(cs.marginBottom, "0px", "animation-iteration-count test 4 at 0s");
+advance_clock(2000);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
+          "animation-iteration-count test 2 at 2s");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.1), 0.01,
+          "animation-iteration-count test 3 at 2s");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.4), 0.01,
+          "animation-iteration-count test 4 at 2s");
+advance_clock(900);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.29), 0.01,
+          "animation-iteration-count test 2 at 2.9s");
+advance_clock(200);
+is(cs.marginRight, "0px", "animation-iteration-count test 2 at 3.1s");
+advance_clock(1800);
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.98), 0.01,
+          "animation-iteration-count test 4 at 4.9s");
+advance_clock(200);
+is(cs.marginRight, "0px", "animation-iteration-count test 2 at 5.1s");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.02), 0.01,
+          "animation-iteration-count test 4 at 5.1s");
+advance_clock(2800);
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.58), 0.01,
+          "animation-iteration-count test 4 at 7.9s");
+advance_clock(100);
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
+          "animation-iteration-count test 4 at 8s");
+advance_clock(100);
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
+          "animation-iteration-count test 4 at 8.1s");
+advance_clock(11700);
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.99), 0.01,
+          "animation-iteration-count test 3 at 19.8s");
+advance_clock(200);
+is(cs.marginTop, "100px", "animation-iteration-count test 3 at 20s");
+advance_clock(200);
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.99), 0.01,
+          "animation-iteration-count test 3 at 20.2s");
+advance_clock(3600);
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.81), 0.01,
+          "animation-iteration-count test 3 at 23.8s");
+advance_clock(200);
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.8), 0.01,
+          "animation-iteration-count test 3 at 24s");
+advance_clock(200);
+is(cs.marginRight, "0px", "animation-iteration-count test 2 at 25s");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.8), 0.01,
+          "animation-iteration-count test 3 at 25s");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
+          "animation-iteration-count test 4 at 25s");
+done_div();
+
+/*
+ * css3-animations:  3.6. The 'animation-direction' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-direction-property-
+ */
+
+// Tested in tests for sections 3.1 and 3.5.
+
+new_div("animation: anim2 ease-in 10s infinite");
+div.style.animationDirection = "normal";
+is(cs.marginRight, "0px", "animation-direction test 1 (normal) at 0s");
+div.style.animationDirection = "reverse";
+is(cs.marginRight, "100px", "animation-direction test 1 (reverse) at 0s");
+div.style.animationDirection = "alternate";
+is(cs.marginRight, "0px", "animation-direction test 1 (alternate) at 0s");
+div.style.animationDirection = "alternate-reverse";
+is(cs.marginRight, "100px", "animation-direction test 1 (alternate-reverse) at 0s");
+advance_clock(2000);
+div.style.animationDirection = "normal";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
+          "animation-direction test 1 (normal) at 2s");
+div.style.animationDirection = "reverse";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
+          "animation-direction test 1 (reverse) at 2s");
+div.style.animationDirection = "alternate";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
+          "animation-direction test 1 (alternate) at 2s");
+div.style.animationDirection = "alternate-reverse";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
+          "animation-direction test 1 (alternate-reverse) at 2s");
+advance_clock(5000);
+div.style.animationDirection = "normal";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.7), 0.01,
+          "animation-direction test 1 (normal) at 7s");
+div.style.animationDirection = "reverse";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
+          "animation-direction test 1 (reverse) at 7s");
+div.style.animationDirection = "alternate";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.7), 0.01,
+          "animation-direction test 1 (alternate) at 7s");
+div.style.animationDirection = "alternate-reverse";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
+          "animation-direction test 1 (alternate-reverse) at 7s");
+advance_clock(5000);
+div.style.animationDirection = "normal";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
+          "animation-direction test 1 (normal) at 12s");
+div.style.animationDirection = "reverse";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
+          "animation-direction test 1 (reverse) at 12s");
+div.style.animationDirection = "alternate";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
+          "animation-direction test 1 (alternate) at 12s");
+div.style.animationDirection = "alternate-reverse";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
+          "animation-direction test 1 (alternate-reverse) at 12s");
+advance_clock(10000);
+div.style.animationDirection = "normal";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
+          "animation-direction test 1 (normal) at 22s");
+div.style.animationDirection = "reverse";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
+          "animation-direction test 1 (reverse) at 22s");
+div.style.animationDirection = "alternate";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
+          "animation-direction test 1 (alternate) at 22s");
+div.style.animationDirection = "alternate-reverse";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
+          "animation-direction test 1 (alternate-reverse) at 22s");
+advance_clock(30000);
+div.style.animationDirection = "normal";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
+          "animation-direction test 1 (normal) at 52s");
+div.style.animationDirection = "reverse";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
+          "animation-direction test 1 (reverse) at 52s");
+div.style.animationDirection = "alternate";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
+          "animation-direction test 1 (alternate) at 52s");
+div.style.animationDirection = "alternate-reverse";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
+          "animation-direction test 1 (alternate-reverse) at 52s");
+done_div();
+
+/*
+ * css3-animations:  3.7. The 'animation-play-state' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-
+ */
+
+// simple test with just one animation
+new_div("");
+div.style.animationTimingFunction = "ease";
+div.style.animationName = "anim1";
+div.style.animationDuration = "1s";
+div.style.animationDirection = "alternate";
+div.style.animationIterationCount = "2";
+is(cs.marginLeft, "0px", "animation-play-state test 1, at 0s");
+advance_clock(250);
+is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 at 250ms");
+div.style.animationPlayState = "paused";
+is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 at 250ms");
+advance_clock(250);
+is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 still at 500ms");
+div.style.animationPlayState = "running";
+is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 still at 500ms");
+advance_clock(500);
+is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 at 1000ms");
+advance_clock(250);
+is(cs.marginLeft, "100px", "animation-play-state test 1 at 1250ms");
+advance_clock(250);
+is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 at 1500ms");
+div.style.animationPlayState = "paused";
+is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 at 1500ms");
+advance_clock(2000);
+is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 at 3500ms");
+advance_clock(500);
+is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 at 4000ms");
+div.style.animationPlayState = "";
+is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 at 4000ms");
+advance_clock(500);
+is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
+          "animation-play-state test 1 at 4500ms");
+advance_clock(250);
+is(cs.marginLeft, "0px", "animation-play-state test 1, at 4750ms");
+advance_clock(250);
+is(cs.marginLeft, "0px", "animation-play-state test 1, at 5000ms");
+done_div();
+
+// more complicated test with multiple animations (and different directions
+// and iteration counts)
+new_div("");
+div.style.animationTimingFunction = "ease-out, ease-in, ease-in-out";
+div.style.animationName = "anim2, anim3, anim4";
+div.style.animationDuration = "1s, 2s, 1s";
+div.style.animationDirection = "alternate, normal, normal";
+div.style.animationIterationCount = "4, 2, infinite";
+is(cs.marginRight, "0px", "animation-play-state test 2, at 0s");
+is(cs.marginTop, "0px", "animation-play-state test 3, at 0s");
+is(cs.marginBottom, "0px", "animation-play-state test 4, at 0s");
+advance_clock(250);
+div.style.animationPlayState = "paused, running"; // pause 1 and 3
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
+          "animation-play-state test 2 at 250ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.125), 0.01,
+          "animation-play-state test 3 at 250ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.25), 0.01,
+          "animation-play-state test 4 at 250ms");
+advance_clock(250);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
+          "animation-play-state test 2 at 500ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.25), 0.01,
+          "animation-play-state test 3 at 500ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.25), 0.01,
+          "animation-play-state test 4 at 500ms");
+div.style.animationPlayState = "paused, running, running"; // unpause 3
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
+          "animation-play-state test 2 at 500ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.25), 0.01,
+          "animation-play-state test 3 at 500ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.25), 0.01,
+          "animation-play-state test 4 at 500ms");
+advance_clock(250);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
+          "animation-play-state test 2 at 750ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
+          "animation-play-state test 3 at 750ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.5), 0.01,
+          "animation-play-state test 4 at 750ms");
+div.style.animationPlayState = "running, paused"; // unpause 1, pause 2
+advance_clock(0); // notify refresh observers
+advance_clock(250);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.5), 0.01,
+          "animation-play-state test 2 at 1000ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
+          "animation-play-state test 3 at 1000ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.75), 0.01,
+          "animation-play-state test 4 at 1000ms");
+div.style.animationPlayState = "paused"; // pause all
+advance_clock(0); // notify refresh observers
+advance_clock(3000);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.5), 0.01,
+          "animation-play-state test 2 at 4000ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
+          "animation-play-state test 3 at 4000ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.75), 0.01,
+          "animation-play-state test 4 at 4000ms");
+div.style.animationPlayState = "running, paused"; // pause 2
+advance_clock(0); // notify refresh observers
+advance_clock(850);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.65), 0.01,
+          "animation-play-state test 2 at 4850ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
+          "animation-play-state test 3 at 4850ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
+          "animation-play-state test 4 at 4850ms");
+advance_clock(300);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.35), 0.01,
+          "animation-play-state test 2 at 5150ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
+          "animation-play-state test 3 at 5150ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.9), 0.01,
+          "animation-play-state test 4 at 5150ms");
+advance_clock(2300);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.05), 0.01,
+          "animation-play-state test 2 at 7450ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
+          "animation-play-state test 3 at 7450ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.2), 0.01,
+          "animation-play-state test 4 at 7450ms");
+advance_clock(100);
+is(cs.marginRight, "0px", "animation-play-state test 2 at 7550ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
+          "animation-play-state test 3 at 7550ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.3), 0.01,
+          "animation-play-state test 4 at 7550ms");
+div.style.animationPlayState = "running"; // unpause 2
+advance_clock(0); // notify refresh observers
+advance_clock(1000);
+is(cs.marginRight, "0px", "animation-play-state test 2 at 7550ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.875), 0.01,
+          "animation-play-state test 3 at 7550ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.3), 0.01,
+          "animation-play-state test 4 at 7550ms");
+advance_clock(500);
+is(cs.marginRight, "0px", "animation-play-state test 2 at 8050ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.125), 0.01,
+          "animation-play-state test 3 at 8050ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.8), 0.01,
+          "animation-play-state test 4 at 8050ms");
+advance_clock(1000);
+is(cs.marginRight, "0px", "animation-play-state test 2 at 9050ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.625), 0.01,
+          "animation-play-state test 3 at 9050ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.8), 0.01,
+          "animation-play-state test 4 at 9050ms");
+advance_clock(500);
+is(cs.marginRight, "0px", "animation-play-state test 2 at 9550ms");
+is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.875), 0.01,
+          "animation-play-state test 3 at 9550ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.3), 0.01,
+          "animation-play-state test 4 at 9550ms");
+advance_clock(500);
+is(cs.marginRight, "0px", "animation-play-state test 2 at 10050ms");
+is(cs.marginTop, "0px", "animation-play-state test 3 at 10050ms");
+is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.8), 0.01,
+          "animation-play-state test 4 at 10050ms");
+done_div();
+
+// an initially paused animation (bug 1063992)
+new_div("animation: anim1 1s paused both");
+is(cs.marginLeft, "0px", "animation-play-state test 5, at 0s");
+advance_clock(500);
+is(cs.marginLeft, "0px", "animation-play-state test 5, at 0.5s");
+div.style.animationPlayState = "running";
+is(cs.marginLeft, "0px",
+   "animation-play-state test 5, at 0.5s after unpausing");
+advance_clock(500);
+is(cs.marginLeft, "80px",
+   "animation-play-state test 5, at 1s after unpaused");
+done_div();
+
+/*
+ * css3-animations:  3.8. The 'animation-delay' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-delay-property-
+ */
+
+// test positive delay
+new_div("animation: anim2 1s 0.5s ease-out");
+is(cs.marginRight, "0px", "positive delay test at 0ms");
+advance_clock(400);
+is(cs.marginRight, "0px", "positive delay test at 400ms");
+advance_clock(100);
+is(cs.marginRight, "0px", "positive delay test at 500ms");
+advance_clock(100);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.1), 0.01,
+          "positive delay test at 500ms");
+done_div();
+
+// test dynamic changes to delay (i.e., that we preserve the start time
+// that's before the delay)
+new_div("animation: anim2 1s 0.5s ease-out both");
+is(cs.marginRight, "0px", "dynamic delay delay test at 0ms");
+advance_clock(400);
+is(cs.marginRight, "0px", "dynamic delay delay test at 400ms (1)");
+div.style.animationDelay = "0.2s";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.2), 0.01,
+          "dynamic delay delay test at 400ms (2)");
+div.style.animationDelay = "0.6s";
+advance_clock(0);
+advance_clock(200);
+is(cs.marginRight, "0px", "dynamic delay delay test at 600ms");
+advance_clock(200);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.2), 0.01,
+          "dynamic delay delay test at 800ms");
+advance_clock(1000);
+is(cs.marginRight, "100px", "dynamic delay delay test at 1800ms (1)");
+div.style.animationDelay = "1.5s";
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.3), 0.01,
+          "dynamic delay delay test at 1800ms (2)");
+div.style.animationDelay = "2s";
+is(cs.marginRight, "0px", "dynamic delay delay test at 1800ms (3)");
+done_div();
+
+// test delay and play-state interaction
+new_div("animation: anim2 1s 0.5s ease-out");
+is(cs.marginRight, "0px", "delay and play-state delay test at 0ms");
+advance_clock(400);
+is(cs.marginRight, "0px", "delay and play-state delay test at 400ms");
+div.style.animationPlayState = "paused";
+advance_clock(0);
+advance_clock(100);
+is(cs.marginRight, "0px", "delay and play-state delay test at 500ms");
+advance_clock(500);
+is(cs.marginRight, "0px", "delay and play-state delay test at 1000ms");
+div.style.animationPlayState = "running";
+advance_clock(0);
+advance_clock(100);
+is(cs.marginRight, "0px", "delay and play-state delay test at 1100ms");
+advance_clock(100);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.1), 0.01,
+          "delay and play-state delay test at 1200ms");
+div.style.animationPlayState = "paused";
+advance_clock(0);
+advance_clock(100);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.1), 0.01,
+          "delay and play-state delay test at 1300ms");
+done_div();
+
+// test negative delay and implicit starting values
+new_div("margin-top: 1000px");
+advance_clock(300);
+div.style.marginTop = "100px";
+div.style.animation = "kf1 1s -0.1s ease-in";
+is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_in(0.2), 0.01,
+          "delay and implicit starting values test");
+done_div();
+
+// test large negative delay that causes the animation to start
+// in the fourth iteration
+new_div("animation: anim2 1s -3.6s ease-in 5 alternate forwards");
+listen(); // rely on no flush having happened yet
+cs.animationName; // flush styles so animation is created
+advance_clock(0); // complete pending animation start
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.4), 0.01,
+          "large negative delay test at 0ms");
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'anim2', elapsedTime: 3.6,
+                pseudoElement: "" }],
+             "right after start in large negative delay test");
+advance_clock(380);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.02), 0.01,
+          "large negative delay test at 380ms");
+check_events([]);
+advance_clock(20);
+is(cs.marginRight, "0px", "large negative delay test at 400ms");
+check_events([{ type: 'animationiteration', target: div,
+                animationName: 'anim2', elapsedTime: 4.0,
+                pseudoElement: "" }],
+             "large negative delay test at 400ms");
+advance_clock(800);
+is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
+          "large negative delay test at 1200ms");
+check_events([]);
+advance_clock(200);
+is(cs.marginRight, "100px", "large negative delay test at 1400ms");
+check_events([{ type: 'animationend', target: div,
+                animationName: 'anim2', elapsedTime: 5.0,
+                pseudoElement: "" }],
+             "large negative delay test at 1400ms");
+done_div();
+
+/*
+ * css3-animations:  3.9. The 'animation-fill-mode' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
+ */
+
+// animation-fill-mode is tested in the tests for section (2).
+
+/*
+ * css3-animations:  3.10. The 'animation' Shorthand Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-shorthand-property-
+ */
+
+// shorthand vs. longhand is adequately tested by the
+// property_database.js-based tests.
+
+/**
+ * Basic tests of animations on pseudo-elements
+ */
+new_div("");
+listen();
+div.id = "withbefore";
+var cs_before = getComputedStyle(div, ":before");
+is(cs_before.marginRight, "0px", ":before test at 0ms");
+advance_clock(400);
+is(cs_before.marginRight, "40px", ":before test at 400ms");
+advance_clock(800);
+is(cs_before.marginRight, "80px", ":before test at 1200ms");
+is(cs.marginRight, "0px", ":before animation should not affect element");
+advance_clock(800);
+is(cs_before.marginRight, "0px", ":before test at 2000ms");
+advance_clock(300);
+is(cs_before.marginRight, "30px", ":before test at 2300ms");
+advance_clock(700);
+check_events([ { type: "animationstart", animationName: "anim2", elapsedTime: 0, pseudoElement: "::before" },
+               { type: "animationiteration", animationName: "anim2", elapsedTime: 1, pseudoElement: "::before" },
+               { type: "animationiteration", animationName: "anim2", elapsedTime: 2, pseudoElement: "::before" },
+               { type: "animationend", animationName: "anim2", elapsedTime: 3, pseudoElement: "::before" }]);
+done_div();
+
+new_div("");
+listen();
+div.id = "withafter";
+var cs_after = getComputedStyle(div, ":after");
+is(cs_after.marginRight, "0px", ":after test at 0ms");
+advance_clock(400);
+is(cs_after.marginRight, "40px", ":after test at 400ms");
+advance_clock(800);
+is(cs_after.marginRight, "80px", ":after test at 1200ms");
+is(cs.marginRight, "0px", ":after animation should not affect element");
+advance_clock(800);
+is(cs_after.marginRight, "0px", ":after test at 2000ms");
+advance_clock(300);
+is(cs_after.marginRight, "30px", ":after test at 2300ms");
+advance_clock(700);
+check_events([ { type: "animationstart", animationName: "anim2", elapsedTime: 0, pseudoElement: "::after" },
+               { type: "animationiteration", animationName: "anim2", elapsedTime: 1, pseudoElement: "::after" },
+               { type: "animationiteration", animationName: "anim2", elapsedTime: 2, pseudoElement: "::after" },
+               { type: "animationend", animationName: "anim2", elapsedTime: 3, pseudoElement: "::after" }]);
+done_div();
+
+/**
+ * Test handling of properties that are present in only some of the
+ * keyframes.
+ */
+new_div("animation: multiprop 1s ease-in-out alternate infinite");
+is(cs.paddingTop, "10px", "multiprop top at 0ms");
+is(cs.paddingLeft, "30px", "multiprop top at 0ms");
+advance_clock(100);
+is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.2), 0.01,
+          "multiprop top at 100ms");
+is_approx(px_to_num(cs.paddingLeft), 30 + 20 * gTF.ease(0.4), 0.01,
+          "multiprop left at 100ms");
+advance_clock(200);
+is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.6), 0.01,
+          "multiprop top at 300ms");
+is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.1), 0.01,
+          "multiprop left at 300ms");
+advance_clock(300);
+is_approx(px_to_num(cs.paddingTop), 40 + 40 * gTF.ease_in_out(0.4), 0.01,
+          "multiprop top at 600ms");
+is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.7), 0.01,
+          "multiprop left at 600ms");
+advance_clock(200);
+is_approx(px_to_num(cs.paddingTop), 80 - 80 * gTF.ease_in(0.2), 0.01,
+          "multiprop top at 800ms");
+is_approx(px_to_num(cs.paddingLeft), 60 - 60 * gTF.ease_in(0.2), 0.01,
+          "multiprop left at 800ms");
+advance_clock(400);
+is_approx(px_to_num(cs.paddingTop), 80 - 80 * gTF.ease_in(0.2), 0.01,
+          "multiprop top at 1200ms");
+is_approx(px_to_num(cs.paddingLeft), 60 - 60 * gTF.ease_in(0.2), 0.01,
+          "multiprop left at 1200ms");
+advance_clock(200);
+is_approx(px_to_num(cs.paddingTop), 40 + 40 * gTF.ease_in_out(0.4), 0.01,
+          "multiprop top at 1400ms");
+is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.7), 0.01,
+          "multiprop left at 1400ms");
+advance_clock(300);
+is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.6), 0.01,
+          "multiprop top at 1700ms");
+is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.1), 0.01,
+          "multiprop left at 1700ms");
+advance_clock(200);
+is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.2), 0.01,
+          "multiprop top at 1900ms");
+is_approx(px_to_num(cs.paddingLeft), 30 + 20 * gTF.ease(0.4), 0.01,
+          "multiprop left at 1900ms");
+done_div();
+
+// Test for https://bugzilla.mozilla.org/show_bug.cgi?id=651456 -- make
+// sure that refreshing of animations doesn't break when we get two
+// refreshes with the same timestamp.
+new_div("animation: anim2 1s linear");
+is(cs.marginRight, "0px", "bug 651456 at 0ms");
+advance_clock(100);
+is(cs.marginRight, "10px", "bug 651456 at 100ms (1)");
+advance_clock(0); // still forces a refresh
+is(cs.marginRight, "10px", "bug 651456 at 100ms (2)");
+advance_clock(100);
+is(cs.marginRight, "20px", "bug 651456 at 200ms");
+done_div();
+
+// Test that UA !important rules override animations.
+// This test depends on forms.css having a rule
+//   option { line-height: !important }
+// If that rule changes, we should rewrite it to depend on a different rule.
+var option;
+[ option, cs ] = new_element("option", "");
+var default_line_height = cs.lineHeight;
+done_element();
+[ option, cs ] = new_element("option",
+                             "animation: uaoverride 2s linear infinite");
+is(cs.lineHeight, default_line_height,
+   "animations should not override UA !important at 0ms");
+is(cs.marginTop, "20px",
+   "rest of animation should still work when UA !important present at 0ms");
+advance_clock(200);
+is(cs.lineHeight, default_line_height,
+   "animations should not override UA !important at 200ms");
+is(cs.marginTop, "40px",
+   "rest of animation should still work when UA !important present at 200ms");
+done_element();
+
+// Test that author !important rules override animations, but
+// that animations override regular author rules.
+new_div("animation: always_fifty 1s linear infinite; margin-left: 200px");
+is(cs.marginLeft, "50px", "animations override regular author rules");
+done_div();
+new_div("animation: always_fifty 1s linear infinite;"
+        + " margin-left: 200px ! important;");
+is(cs.marginLeft, "200px", "important author rules override animations");
+done_div();
+
+// Test interaction of animations and restyling (Bug 686656).
+// This test depends on kf3 getting its 0% and 100% values from the
+// rules below it in the cascade; we're checking that the animation
+// isn't rebuilt when the restyles happen.
+new_div("animation: kf3 1s linear forwards");
+is(cs.marginTop, "0px", "bug 686656 test 1 at 0ms");
+advance_clock(250);
+display.style.color = "blue";
+is(cs.marginTop, "100px", "bug 686656 test 1 at 250ms");
+advance_clock(375);
+is(cs.marginTop, "50px", "bug 686656 test 1 at 625ms");
+advance_clock(375);
+is(cs.marginTop, "0px", "bug 686656 test 1 at 1000ms");
+done_div();
+display.style.color = "";
+
+// Test interaction of animations and restyling (Bug 686656),
+// with reframing.
+// This test depends on kf3 getting its 0% and 100% values from the
+// rules below it in the cascade; we're checking that the animation
+// isn't rebuilt when the restyles happen.
+new_div("animation: kf3 1s linear forwards");
+is(cs.marginTop, "0px", "bug 686656 test 2 at 0ms");
+advance_clock(250);
+display.style.overflow = "scroll";
+is(cs.marginTop, "100px", "bug 686656 test 2 at 250ms");
+advance_clock(375);
+is(cs.marginTop, "50px", "bug 686656 test 2 at 625ms");
+advance_clock(375);
+is(cs.marginTop, "0px", "bug 686656 test 2 at 1000ms");
+done_div();
+display.style.overflow = "";
+
+// Test that cascading between keyframes rules is per-property rather
+// than per-rule (bug ), and that the timing function isn't taken from a
+// rule that's skipped.  (Bug 738003)
+new_div("animation: cascade 1s linear forwards; position: relative");
+is(cs.top, "0px", "cascade test (top) at 0ms");
+is(cs.left, "0px", "cascade test (top) at 0ms");
+advance_clock(125);
+is(cs.top, "0px", "cascade test (top) at 125ms");
+is(cs.left, "50px", "cascade test (top) at 125ms");
+advance_clock(125);
+is(cs.top, "0px", "cascade test (top) at 250ms");
+is(cs.left, "100px", "cascade test (top) at 250ms");
+advance_clock(125);
+is(cs.top, "50px", "cascade test (top) at 375ms");
+is(cs.left, "100px", "cascade test (top) at 375ms");
+advance_clock(125);
+is(cs.top, "100px", "cascade test (top) at 500ms");
+is(cs.left, "100px", "cascade test (top) at 500ms");
+advance_clock(125);
+is(cs.top, "100px", "cascade test (top) at 625ms");
+is(cs.left, "50px", "cascade test (top) at 625ms");
+advance_clock(125);
+is(cs.top, "100px", "cascade test (top) at 750ms");
+is(cs.left, "0px", "cascade test (top) at 750ms");
+advance_clock(125);
+is(cs.top, "50px", "cascade test (top) at 875ms");
+is(cs.left, "0px", "cascade test (top) at 875ms");
+advance_clock(125);
+is(cs.top, "0px", "cascade test (top) at 1000ms");
+is(cs.left, "0px", "cascade test (top) at 1000ms");
+done_div();
+
+new_div("animation: cascade2 8s linear forwards");
+is(cs.textIndent, "0px", "cascade2 test at 0s");
+advance_clock(1000);
+is(cs.textIndent, "25px", "cascade2 test at 1s");
+advance_clock(1000);
+is(cs.textIndent, "50px", "cascade2 test at 2s");
+advance_clock(1000);
+is(cs.textIndent, "25px", "cascade2 test at 3s");
+advance_clock(1000);
+is(cs.textIndent, "0px", "cascade2 test at 4s");
+advance_clock(3000);
+is(cs.textIndent, "75px", "cascade2 test at 7s");
+advance_clock(1000);
+is(cs.textIndent, "100px", "cascade2 test at 8s");
+done_div();
+
+new_div("-moz-animation: primitives1 2s linear forwards");
+is(cs.getPropertyValue("-moz-transform"), "matrix(1, 0, 0, 1, 0, 0)",
+    "primitives1 at 0s");
+advance_clock(1000);
+is(cs.getPropertyValue("-moz-transform"),
+   "matrix(-0.707107, 0.707107, -0.707107, -0.707107, 0, 0)",
+   "primitives1 at 1s");
+advance_clock(1000);
+is(cs.getPropertyValue("-moz-transform"), "matrix(0, -1, 1, 0, 0, 0)",
+    "primitives1 at 0s");
+done_div();
+
+new_div("animation: important1 1s linear forwards");
+is(cs.marginTop, "50px", "important1 test at 0s");
+advance_clock(500);
+is(cs.marginTop, "75px", "important1 test at 0.5s");
+advance_clock(500);
+is(cs.marginTop, "100px", "important1 test at 1s");
+done_div();
+
+new_div("animation: important2 1s linear forwards");
+is(cs.marginTop, "50px", "important2 (margin-top) test at 0s");
+is(cs.marginBottom, "100px", "important2 (margin-bottom) test at 0s");
+advance_clock(1000);
+is(cs.marginTop, "0px", "important2 (margin-top) test at 1s");
+is(cs.marginBottom, "50px", "important2 (margin-bottom) test at 1s");
+done_div();
+
+// Test that it's the length of the 'animation-name' list that's used to
+// start animations.
+// note: anim2 animates margin-right from 0 to 100px
+// note: anim3 animates margin-top from 0 to 100px
+new_div("animation-name: anim2, anim3;"
+        + " animation-duration: 1s;"
+        + " animation-timing-function: linear;"
+        + " animation-delay: -250ms, -250ms, -750ms, -500ms;");
+is(cs.marginRight, "25px", "animation-name list length is the length that matters");
+is(cs.marginTop, "25px", "animation-name list length is the length that matters");
+done_div();
+new_div("animation-name: anim2, anim3, anim2;"
+        + " animation-duration: 1s;"
+        + " animation-timing-function: linear;"
+        + " animation-delay: -250ms, -250ms, -750ms, -500ms;");
+is(cs.marginRight, "75px", "animation-name list length is the length that matters, and the last occurrence of a name wins");
+is(cs.marginTop, "25px", "animation-name list length is the length that matters");
+done_div();
+
+var dyn_sheet_elt = document.createElement("style");
+document.head.appendChild(dyn_sheet_elt);
+var dyn_sheet = dyn_sheet_elt.sheet;
+dyn_sheet.insertRule("@keyframes dyn1 { from { margin-left: 0 } 50% { margin-left: 50px } to { margin-left: 100px } }", 0);
+dyn_sheet.insertRule("@keyframes dyn2 { from { margin-left: 100px } to { margin-left: 200px } }", 1);
+var dyn1 = dyn_sheet.cssRules[0];
+var dyn2 = dyn_sheet.cssRules[1];
+new_div("animation: dyn1 1s linear");
+is(cs.marginLeft, "0px", "dynamic rule change test, initial state");
+advance_clock(250);
+is(cs.marginLeft, "25px", "dynamic rule change test, 250ms");
+dyn2.name = "dyn1";
+is(cs.marginLeft, "125px", "dynamic rule change test, change in @keyframes name applies");
+dyn2.appendRule("50% { margin-left: 0px }");
+is(cs.marginLeft, "50px", "dynamic rule change test, @keyframes appendRule");
+var dyn2_kf1 = dyn2.cssRules[0]; // currently 0% { margin-left: 100px }
+dyn2_kf1.style.marginLeft = "-100px";
+is(cs.marginLeft, "-50px", "dynamic rule change test, keyframe style set");
+dyn2.name = "dyn2";
+is(cs.marginLeft, "25px", "dynamic rule change test, change in @keyframes name applies (second time)");
+var dyn1_kf2 = dyn1.cssRules[1]; // currently 50% { margin-left: 50px }
+dyn1_kf2.keyText = "25%";
+is(cs.marginLeft, "50px", "dynamic rule change test, change in keyframe keyText");
+dyn1.deleteRule("25%");
+is(cs.marginLeft, "25px", "dynamic rule change test, @keyframes deleteRule");
+done_div();
+dyn_sheet_elt.remove();
+dyn_sheet_elt = null;
+dyn_sheet = null;
+
+/*
+ * Bug 1004361 - CSS animations with short duration sometimes don't dispatch
+ * a start event
+ */
+new_div("animation: anim2 1s 0.1s");
+listen();
+advance_clock(0); // Trigger animation
+advance_clock(1200); // Skip past end of animation's entire active duration
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" },
+              { type: 'animationend', target: div,
+                animationName: 'anim2', elapsedTime: 1,
+                pseudoElement: "" }],
+             "events after skipping over animation interval");
+done_div();
+
+/*
+ * Bug 1007513 - AnimationEvent.elapsedTime should be animation time
+ */
+new_div("animation: anim2 1s 2");
+listen();
+advance_clock(0); // Trigger animation
+advance_clock(500); // Jump to middle of first interval
+advance_clock(1000); // Jump to middle of second interval
+advance_clock(1000); // Jump past end of last interval
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" },
+              { type: 'animationiteration', target: div,
+                animationName: 'anim2', elapsedTime: 1,
+                pseudoElement: "" },
+              { type: 'animationend', target: div,
+                animationName: 'anim2', elapsedTime: 2,
+                pseudoElement: "" }],
+             "events after skipping past event moments");
+done_div();
+
+new_div("animation: anim2 1s -2s");
+listen();
+cs.animationName; // build animation
+advance_clock(0); // finish pending
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'anim2', elapsedTime: 1,
+                pseudoElement: "" },
+              { type: 'animationend', target: div,
+                animationName: 'anim2', elapsedTime: 1,
+                pseudoElement: "" }],
+             "events after skipping over animation with negative delay");
+done_div();
+
+/*
+ * Bug 1004365 - zero-duration animations
+ */
+
+new_div("margin-right: 200px; animation: anim2 0s 1s both");
+listen();
+advance_clock(0);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during backwards fill of zero-duration animation");
+advance_clock(2000); // Skip over animation
+is(cs.getPropertyValue("margin-right"), "100px",
+   "margin-right during forwards fill of zero-duration animation");
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" },
+              { type: 'animationend', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" }],
+             "events after skipping over zero-duration animation");
+done_div();
+
+new_div("margin-right: 200px; animation: anim2 0s 1s both");
+listen();
+advance_clock(0);
+// Seek to just before the animation starts and stops
+advance_clock(999);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right at exact end of zero-duration animation");
+check_events([]);
+// Seek to exactly the point where the animation starts and stops
+advance_clock(1);
+is(cs.getPropertyValue("margin-right"), "100px",
+   "margin-right at exact end of zero-duration animation");
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" },
+              { type: 'animationend', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" }],
+             "events after seeking to end of zero-duration animation");
+// Check no further events are dispatched
+advance_clock(0);
+advance_clock(100);
+check_events([]);
+done_div();
+
+// Test with animation-direction reverse
+new_div("margin-right: 200px;"
+                      + " animation: anim2 0s 1s both reverse");
+advance_clock(0);
+is(cs.getPropertyValue("margin-right"), "100px",
+   "margin-right during backwards fill of reversed zero-duration animation");
+advance_clock(2000);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during forwards fill of reversed zero-duration animation");
+done_div();
+
+// Test with animation-direction alternate
+new_div("margin-right: 200px; animation: anim2 0s 1s both alternate 2");
+listen();
+advance_clock(0);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during backwards fill of alternating zero-duration animation");
+advance_clock(2000);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during forwards fill of alternating zero-duration animation");
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" },
+              { type: 'animationend', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" }],
+             "events after seeking to end of zero-duration animation"
+             + " that repeats twice");
+done_div();
+
+// Test with animation-direction alternate and odd number of iterations
+new_div("margin-right: 200px; animation: anim2 0s 1s both alternate 3");
+advance_clock(0);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during backwards fill of alternating zero-duration " +
+   "animation with odd number of iterations");
+advance_clock(2000);
+is(cs.getPropertyValue("margin-right"), "100px",
+   "margin-right during forwards fill of alternating zero-duration " +
+   "animation with odd number of iterations");
+done_div();
+
+// Test with animation-direction alternate and non-integral number of iterations
+new_div("margin-right: 200px;"
+        + " animation: anim2 0s 1s both alternate 7.3 linear");
+advance_clock(0);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during backwards fill of alternating zero-duration " +
+   "animation with non-integral number of iterations");
+advance_clock(2000);
+is(cs.getPropertyValue("margin-right"), "70px",
+   "margin-right during forwards fill of alternating zero-duration " +
+   "animation with non-integral number of iterations");
+done_div();
+
+// Test with infinite iteration count
+// CSS Animations doesn't actually define what the behavior is in this case
+// (and many many other similar cases) so we follow the behavior defined in Web
+// Animations which is that the zero-duration "wins".
+new_div("margin-right: 200px; animation: anim2 0s 1s both infinite");
+listen();
+advance_clock(0);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during backwards fill of infinitely repeating " +
+   "zero-duration animation");
+advance_clock(2000);
+is(cs.getPropertyValue("margin-right"), "100px",
+   "margin-right during forwards fill of infinitely repeating " +
+   "zero-duration animation");
+// Check we don't get infinite iteration events :)
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" },
+              { type: 'animationend', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" }],
+             "events after seeking to end of infinitely repeating " +
+             "zero-duration animation");
+done_div();
+
+// Test with infinite iteration count and alternating direction
+new_div("margin-right: 200px; animation: anim2 0s 1s alternate both infinite");
+advance_clock(0);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during backwards fill of infinitely repeating and " +
+   "alternating zero-duration animation");
+advance_clock(2000);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during forwards fill of infinitely repeating and " +
+   "alternating zero-duration animation");
+done_div();
+
+// Test with infinite iteration count and alternate-reverse direction
+new_div("margin-right: 200px;"
+        + " animation: anim2 0s 1s alternate-reverse infinite both");
+advance_clock(0);
+is(cs.getPropertyValue("margin-right"), "100px",
+   "margin-right during backwards fill of infinitely repeating and " +
+   "alternate-reverse zero-duration animation");
+advance_clock(2000);
+is(cs.getPropertyValue("margin-right"), "100px",
+   "margin-right during forwards fill of infinitely repeating and " +
+   "alternate-reverse zero-duration animation");
+done_div();
+
+// Test with negative delay
+new_div("margin-right: 200px;"
+        + " animation: anim2 0s -1s both reverse 12.7 linear");
+listen();
+cs.animationName; // build animation
+advance_clock(0); // finish pending
+is(cs.getPropertyValue("margin-right"), "30px",
+   "margin-right during forwards fill of reversed and repeated " +
+   "zero-duration animation with negative delay");
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" },
+              { type: 'animationend', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" }],
+             "events after skipping over zero-duration animation " +
+             "with negative delay");
+done_div();
+
+// Test zero duration with zero iteration count
+new_div("margin-right: 200px; animation: anim2 0s 1s both 0");
+listen();
+advance_clock(0);
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during backwards fill of zero-duration animation");
+advance_clock(2000); // Skip over animation
+is(cs.getPropertyValue("margin-right"), "0px",
+   "margin-right during forwards fill of zero-duration animation");
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" },
+              { type: 'animationend', target: div,
+                animationName: 'anim2', elapsedTime: 0,
+                pseudoElement: "" }],
+             "events after skipping over zero-duration, zero iteration count"
+             + " animation");
+done_div();
+
+/*
+ * Bug 1004377 - Animations with empty keyframes rule
+ */
+
+new_div("margin-right: 200px; animation: empty 2s 1s both");
+listen();
+advance_clock(0);
+check_events([], "events during delay");
+advance_clock(2000); // Skip to middle of animation
+div.clientTop; // Trigger events
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'empty', elapsedTime: 0,
+                pseudoElement: "" }],
+             "middle of animation with empty keyframes rule");
+advance_clock(1000); // Skip to end of animation
+div.clientTop; // Trigger events
+check_events([{ type: 'animationend', target: div,
+                animationName: 'empty', elapsedTime: 2,
+                pseudoElement: "" }],
+             "end of animation with empty keyframes rule");
+done_div();
+
+// Test with a zero-duration animation and empty @keyframes rule
+new_div("margin-right: 200px; animation: empty 0s 1s both");
+listen();
+advance_clock(0);
+advance_clock(1000);
+div.clientTop; // Trigger events
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'empty', elapsedTime: 0,
+                pseudoElement: "" },
+              { type: 'animationend', target: div,
+                animationName: 'empty', elapsedTime: 0,
+                pseudoElement: "" }],
+             "end of zero-duration animation with empty keyframes rule");
+done_div();
+
+// Test with a keyframes rule that becomes empty
+new_div("animation: nearlyempty 1s both linear");
+advance_clock(0);
+advance_clock(500);
+is(cs.getPropertyValue("margin-left"), "50px",
+   "margin-left for animation that is about to be emptied");
+listen();
+findKeyframesRule("nearlyempty").deleteRule("to");
+is(cs.getPropertyValue("margin-left"), "0px",
+   "margin-left for animation with (now) empty keyframes rule");
+check_events([], "events after emptying keyframes rule");
+advance_clock(500);
+div.clientTop; // Trigger events
+check_events([{ type: 'animationend', target: div,
+                animationName: 'nearlyempty', elapsedTime: 1,
+                pseudoElement: "" }],
+             "events at end of animation with newly " +
+             "empty keyframes rule");
+done_div();
+
+// Test when we update to point to an empty animation
+new_div("animation: always_fifty 1s both linear");
+advance_clock(0);
+advance_clock(500);
+is(cs.getPropertyValue("margin-left"), "50px",
+   "margin-left for animation that will soon point to an empty keyframes rule");
+listen();
+div.style.animationName = "empty";
+is(cs.getPropertyValue("margin-left"), "0px",
+   "margin-left for animation now points to empty keyframes rule");
+advance_clock(500);
+div.clientTop; // Trigger events
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'empty', elapsedTime: 0,
+                pseudoElement: "" }],
+             "events at start of animation updated to use " +
+             "empty keyframes rule");
+done_div();
+
+/*
+ * Bug 1031319 - 'none' animations
+ *
+ * The code under test here is run entirely on the main thread so there is no
+ * OMTA version of these tests in test_animations_omta.html.
+ */
+
+// Setting "animation: none" after animations have finished should not trigger
+// animation events
+new_div("animation: always_fifty 1s");
+listen();
+advance_clock(0);
+advance_clock(1000);
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'always_fifty', elapsedTime: 0,
+                pseudoElement: '' },
+              { type: 'animationend', target: div,
+                animationName: 'always_fifty', elapsedTime: 1,
+                pseudoElement: '' }],
+             "events after running initial animation");
+div.style.animation = "none";
+div.clientTop; // Trigger events
+check_events([], "events after setting animation to 'none'");
+done_div();
+
+// Setting "animation: " after animations have finished should not trigger
+// animation events
+new_div("animation: always_fifty 1s");
+listen();
+advance_clock(0);
+advance_clock(1000);
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'always_fifty', elapsedTime: 0,
+                pseudoElement: '' },
+              { type: 'animationend', target: div,
+                animationName: 'always_fifty', elapsedTime: 1,
+                pseudoElement: '' }],
+             "events after running initial animation");
+div.style.animation = "";
+div.clientTop; // Trigger events
+check_events([], "events after setting animation to ''");
+done_div();
+
+// Setting "animation: none 1s" should not trigger events
+new_div("animation: none 1s");
+listen();
+advance_clock(0);
+advance_clock(1000);
+check_events([], "events after setting animation to 'none 1s'");
+done_div();
+
+// Setting "animation: 1s" should not trigger events
+new_div("animation: 1s");
+listen();
+advance_clock(0);
+advance_clock(1000);
+check_events([], "events after setting animation to '1s'");
+done_div();
+
+// Setting animation-name: none among other animations should cause only that
+// animation to be skipped
+new_div("animation-name: always_fifty, none, always_fifty;"
+        + " animation-duration: 1s");
+listen();
+advance_clock(0);
+advance_clock(500);
+advance_clock(500);
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'always_fifty', elapsedTime: 0,
+                pseudoElement: '' },
+              { type: 'animationstart', target: div,
+                animationName: 'always_fifty', elapsedTime: 0,
+                pseudoElement: '' },
+              { type: 'animationend', target: div,
+                animationName: 'always_fifty', elapsedTime: 1,
+                pseudoElement: '' },
+              { type: 'animationend', target: div,
+                animationName: 'always_fifty', elapsedTime: 1,
+                pseudoElement: '' }],
+             "events for animation-name: a, none, a");
+done_div();
+
+/*
+ * Bug 1033881 - Non-matching animation-name
+ *
+ * The code under test here is run entirely on the main thread so there is no
+ * OMTA version of these tests in test_animations_omta.html.
+ */
+
+new_div("animation-name: non_existent, always_fifty; animation-duration: 1s");
+listen();
+advance_clock(0);
+advance_clock(500);
+advance_clock(500);
+check_events([{ type: 'animationstart', target: div,
+                animationName: 'always_fifty', elapsedTime: 0,
+                pseudoElement: '' },
+              { type: 'animationend', target: div,
+                animationName: 'always_fifty', elapsedTime: 1,
+                pseudoElement: '' }],
+             "events for animation-name: non_existent, always_fifty");
+done_div();
+
+/*
+ * Bug 1038032 - Infinite repetition and delay causes overflow
+ */
+new_div("animation: always_fifty 10s 1s infinite");
+advance_clock(0);
+advance_clock(2000);
+is(cs.marginLeft, "50px",
+   "infinitely repeating animation with positive delay takes effect"
+   + " (does not overflow)");
+done_div();
+
+/*
+ * Bug 1140134 - A property in a CSS animation being overridden by later
+ * animation causes later properties in that animation to be skipped
+ */
+new_div("position: relative; animation: lowerpriority 1s linear infinite alternate, overridetop 1s linear infinite alternate");
+advance_clock(0);
+advance_clock(500);
+is(cs.getPropertyValue("left"), "50px", "left is animating");
+is(cs.getPropertyValue("top"), "0px", "top is not animating");
+done_div();
+
+new_div("position: relative; animation: lowerpriority 1s linear infinite alternate, overrideleft 1s linear infinite alternate");
+advance_clock(0);
+advance_clock(500);
+is(cs.getPropertyValue("left"), "0px", "left is not animating");
+is(cs.getPropertyValue("top"), "50px", "top is animating");
+done_div();
+
+/*
+ * Bug 962594 - Turn off CSS animations when the element is display:none, or
+ * is in a display:none subtree.
+ */
+
+// Helper function for the two tests below
+function testDisplayNoneTurnsOffAnimations(aTestName, aElementToDisplayNone) {
+  is(cs.getPropertyValue("margin-right"), "0px",
+    aTestName + "margin-right at 0s");
+  advance_clock(1000);
+  is(cs.getPropertyValue("margin-right"), "10px",
+    aTestName + "margin-right at 1s");
+  aElementToDisplayNone.style.display = "none";
+  is(cs.getPropertyValue("margin-right"), "0px",
+    aTestName + "margin-right after display:none");
+  advance_clock(1000);
+  is(cs.getPropertyValue("margin-right"), "0px",
+    aTestName + "margin-right 1s after display:none");
+  aElementToDisplayNone.style.display = "";
+  is(cs.getPropertyValue("margin-right"), "0px",
+    aTestName + "margin-right after display:block");
+  advance_clock(1000);
+  is(cs.getPropertyValue("margin-right"), "10px",
+    aTestName + "margin-right 1s after display:block");
+}
+
+// Check that it works if the animated element itself becomes display:none
+new_div("animation: anim2 linear 10s");
+testDisplayNoneTurnsOffAnimations("AnimatedElement ", div);
+done_div();
+
+// Check that it works if an ancestor of the animated element becomes display:none
+new_div("animation: anim2 linear 10s");
+var ancestor = document.createElement("div");
+div.parentNode.insertBefore(ancestor, div);
+ancestor.appendChild(div);
+testDisplayNoneTurnsOffAnimations("AncestorElement ", ancestor);
+ancestor.parentNode.insertBefore(div, ancestor);
+ancestor.remove();
+done_div();
+
+
+/*
+ * Bug 1125455 - Transitions should not run when animations are running.
+ */
+new_div("transition: opacity 2s linear; opacity: 0.8");
+advance_clock(0);
+is(cs.getPropertyValue("opacity"), "0.8", "initial opacity");
+div.style.opacity = "0.2";
+is(cs.getPropertyValue("opacity"), "0.8", "opacity transition at 0s");
+advance_clock(500);
+is(cs.getPropertyValue("opacity"), "0.65", "opacity transition at 0.5s");
+div.style.animation = "opacitymid 2s linear";
+is(cs.getPropertyValue("opacity"), "0.2", "opacity animation overriding transition at 0s");
+advance_clock(500);
+is(cs.getPropertyValue("opacity"), "0.35", "opacity animation overriding transition at 0.5s");
+done_div();
+
+
+/*
+ * Bug 1320474 - keyframes-name may be a string, allows names that would otherwise be excluded
+ */
+new_div("position: relative; animation: \"string name 1\" 1s linear");
+advance_clock(0);
+is(cs.getPropertyValue("left"), "1px", "animation name as a string");
+div.style.animation = "string\\ name\\ 2 1s linear";
+is(cs.getPropertyValue("left"), "2px", "animation name specified as string, referenced using custom ident");
+div.style.animation = "custom\\ ident\\ 1 1s linear";
+is(cs.getPropertyValue("left"), "3px", "animation name specified as custom-ident");
+div.style.animation = "\"custom ident 2\" 1s linear";
+is(cs.getPropertyValue("left"), "4px", "animation name specified as custom-ident, referenced using string");
+div.style.animation = "unset";
+div.style.animation = "initial 1s linear";
+is(cs.getPropertyValue("left"), "0px", "animation name 'initial' as identifier is ignored");
+div.style.animation = "unset";
+div.style.animation = "\"initial\" 1s linear";
+is(cs.getPropertyValue("left"), "5px", "animation name 'initial' as string is accepted");
+div.style.animation = "unset";
+div.style.animation = "none 1s linear";
+is(cs.getPropertyValue("left"), "0px", "animation name 'none' as identifier is ignored");
+div.style.animation = "unset";
+div.style.animation = "\"none\" 1s linear";
+is(cs.getPropertyValue("left"), "7px", "animation name 'none' as string is accepted");
+done_div();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_async_tests.html b/layout/style/test/test_animations_async_tests.html
new file mode 100644
index 0000000000..efe23caa7f
--- /dev/null
+++ b/layout/style/test/test_animations_async_tests.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1086937</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  SimpleTest.waitForExplicitFinish();
+
+  function run() {
+    SpecialPowers.pushPrefEnv(
+      {"set": [['layout.css.font-loading-api.enabled', true]]},
+      function() { window.open("file_animations_async_tests.html"); });
+  }
+  </script>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1086937">Mozilla Bug 1086937</a>
+<div id="display"></div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_dynamic_changes.html b/layout/style/test/test_animations_dynamic_changes.html
new file mode 100644
index 0000000000..1863d08829
--- /dev/null
+++ b/layout/style/test/test_animations_dynamic_changes.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=978833
+-->
+<head>
+  <title>Test for Bug 978833</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style id="style">
+  @keyframes a {
+    from, to {
+      /* a non-inherited property, so it's cached in the rule tree */
+      margin-left: 50px;
+    }
+  }
+  .alwaysa {
+    animation: a linear 1s infinite;
+  }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=978833">Mozilla Bug 978833</a>
+<p id="display"></p>
+<pre id="test">
+<script type="application/javascript">
+
+var p = document.getElementById("display");
+var cs = getComputedStyle(p, "");
+var style = document.getElementById("style").sheet;
+
+/** Test for Bug 978833 **/
+function test_bug978833() {
+  var kfs = style.cssRules[0];
+  var kf = kfs.cssRules[0];
+  is(kf.style.marginLeft, "50px", "we found the right keyframe rule");
+
+  p.classList.add("alwaysa");
+  is(cs.marginLeft, "50px", "p margin-left should be 50px");
+
+  // Temporarily remove the animation style, since we resolve keyframes
+  // on top of current animation styles (although maybe we shouldn't),
+  // so we need to remove those styles to hit the rule tree cache.
+  p.classList.remove("alwaysa");
+  is(cs.marginLeft, "0px", "p margin-left should be 0px without animation");
+
+  p.classList.add("alwaysa");
+  kf.style.marginLeft = "100px";
+  is(cs.marginLeft, "100px", "p margin-left should be 100px after change");
+
+  // Try the same thing a second time, just to make sure it works again.
+  p.classList.remove("alwaysa");
+  is(cs.marginLeft, "0px", "p margin-left should be 0px without animation");
+  p.classList.add("alwaysa");
+  kf.style.marginLeft = "150px";
+  is(cs.marginLeft, "150px", "p margin-left should be 150px after second change");
+
+  p.style.animation = "";
+}
+test_bug978833();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_effect_timing_duration.html b/layout/style/test/test_animations_effect_timing_duration.html
new file mode 100644
index 0000000000..7b3c443669
--- /dev/null
+++ b/layout/style/test/test_animations_effect_timing_duration.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Test for animation.effect.updateTiming({ duration }) on compositor
+    animations
+  </title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style type="text/css">
+    @keyframes anim {
+      0% { transform: translate(0px) }
+      100% { transform: translate(100px) }
+    }
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: white;
+    }
+  </style>
+</head>
+<body>
+<div id="display"></div>
+<script type="application/javascript">
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+runOMTATest(function() {
+  runAllAsyncAnimTests().then(SimpleTest.finish);
+}, SimpleTest.finish, SpecialPowers);
+
+addAsyncAnimTest(async function() {
+  var [ div ] = new_div("");
+  var animation = div.animate(
+    [ { transform: 'translate(0px)', easing: "steps(2, start)" },
+      { transform: 'translate(100px)' } ], 4000);
+  await waitForPaints();
+
+  advance_clock(500);
+  omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
+          "Animation is running on compositor");
+  animation.effect.updateTiming({ duration: 2000 });
+  // Setter of timing option should set up the changes to animations for the
+  // next layer transaction but it won't schedule a paint immediately so we need
+  // to tick the refresh driver before we can wait on the next paint.
+  advance_clock(0);
+
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
+          "Animation remains on compositor");
+
+  advance_clock(1000);
+  omta_is(div, "transform", { tx: 100 }, RunningOn.Compositor,
+          "Animation is updated on compositor");
+
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  var [ div ] = new_div("");
+  var animation = div.animate(
+    [ { transform: 'translate(0px)', easing: "steps(2, end)" },
+      { transform: 'translate(100px)' } ], 4000);
+  await waitForPaints();
+
+  advance_clock(1000);
+  animation.effect.updateTiming({ duration: 2000 });
+  advance_clock(0);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
+          "Animation is running on compositor");
+  done_div();
+})
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_effect_timing_enddelay.html b/layout/style/test/test_animations_effect_timing_enddelay.html
new file mode 100644
index 0000000000..ad018f6373
--- /dev/null
+++ b/layout/style/test/test_animations_effect_timing_enddelay.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Test for animation.effect.updateTiming({ endDelay }) on compositor
+    animations
+  </title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style type="text/css">
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: white;
+    }
+  </style>
+</head>
+<body>
+<div id="display"></div>
+<script type="application/javascript">
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+runOMTATest(function() {
+  runAllAsyncAnimTests().then(SimpleTest.finish);
+}, SimpleTest.finish, SpecialPowers);
+
+addAsyncAnimTest(async function() {
+  var [ div ] = new_div("");
+  var animation = div.animate(
+    [ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
+    { duration: 1000, fill: 'none' });
+  await waitForPaints();
+
+  advance_clock(100);
+  omta_is(div, "transform", { tx: 10 }, RunningOn.Compositor,
+          "Animation is running on compositor");
+  animation.effect.updateTiming({ endDelay: 1000 });
+
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 10 }, RunningOn.Compositor,
+          "Animation remains on compositor when endDelay is changed");
+
+  advance_clock(1000);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
+          "Animation is updated on main thread");
+
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  var [ div ] = new_div("");
+  var animation = div.animate(
+    [ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
+    { duration: 1000, endDelay: -500, fill: 'none' });
+  await waitForPaints();
+
+  advance_clock(400);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 40 }, RunningOn.Compositor,
+          "Animation is updated on compositor " +
+          "duration 1000, endDelay -500, fill none, current time 400");
+
+  advance_clock(100);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
+          "Animation is updated on main thread " +
+          "duration 1000, endDelay -500, fill none, current time 500");
+
+  advance_clock(400);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
+          "Animation is updated on main thread " +
+          "duration 1000, endDelay -500, fill none, current time 900");
+
+  advance_clock(100);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
+          "Animation is updated on main thread " +
+          "duration 1000, endDelay -500, fill none, current time 1000");
+
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  var [ div ] = new_div("");
+  var animation = div.animate(
+    [ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
+    { duration: 1000, endDelay: 1000, fill: 'forwards' });
+  await waitForPaints();
+
+  advance_clock(1500);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 100 }, RunningOn.Compositor,
+          "The end delay is performed on the compositor thread");
+
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  var [ div ] = new_div("");
+  var animation = div.animate(
+    [ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
+    { duration: 1000, endDelay: -500, fill: 'forwards' });
+  await waitForPaints();
+
+  advance_clock(400);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 40 }, RunningOn.Compositor,
+          "Animation is updated on compositor " +
+          "duration 1000, endDelay -500, fill forwards, current time 400");
+
+  advance_clock(100);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
+          "Animation is updated on main thread " +
+          "duration 1000, endDelay -500, fill forwards, current time 500");
+
+  advance_clock(400);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
+          "Animation is updated on main thread " +
+          "duration 1000, endDelay -500, fill forwards, current time 900");
+
+  advance_clock(100);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
+          "Animation is updated on main thread " +
+          "duration 1000, endDelay -500, fill forwards, current time 1000");
+
+  done_div();
+});
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_effect_timing_iterations.html b/layout/style/test/test_animations_effect_timing_iterations.html
new file mode 100644
index 0000000000..380cab1763
--- /dev/null
+++ b/layout/style/test/test_animations_effect_timing_iterations.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Test for Animation.effect.updateTiming({ iterations }) on compositor
+    animations
+  </title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style type="text/css">
+    @keyframes anim {
+      0% { transform: translate(0px) }
+      100% { transform: translate(100px) }
+    }
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: white;
+    }
+  </style>
+</head>
+<body>
+<div id="display"></div>
+<script type="application/javascript">
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+runOMTATest(function() {
+  runAllAsyncAnimTests().then(SimpleTest.finish);
+}, SimpleTest.finish, SpecialPowers);
+
+addAsyncAnimTest(async function() {
+  var [ div ] = new_div("");
+  var animation = div.animate(
+    [ { transform: 'translate(0px)' },
+      { transform: 'translate(100px)' } ],
+      { duration: 4000,
+        iterations: 2
+      });
+  await waitForPaints();
+
+  advance_clock(6000);
+  omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
+          "Animation is running on compositor");
+  animation.effect.updateTiming({ iterations: 1 });
+  advance_clock(0);
+
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
+          "Animation is on MainThread");
+
+  animation.effect.updateTiming({ iterations: 3 });
+
+  advance_clock(0);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor,
+          "Animation is running again on compositor");
+
+  done_div();
+});
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_event_handler_attribute.html b/layout/style/test/test_animations_event_handler_attribute.html
new file mode 100644
index 0000000000..7a9da1809c
--- /dev/null
+++ b/layout/style/test/test_animations_event_handler_attribute.html
@@ -0,0 +1,204 @@
+<!doctype html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=911987
+-->
+<head>
+  <meta charset=utf-8>
+  <title>Test for CSS Animation and Transition event handler
+         attributes. (Bug 911987)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+  @keyframes anim  { to { margin-left: 100px } }
+  </style>
+</head>
+<body>
+<a target="_blank"
+  href="https://bugzilla.mozilla.org/show_bug.cgi?id=911987">Mozilla Bug
+  911987</a>
+<div id="display"></div>
+<pre id="test">
+<script type="application/javascript">
+'use strict';
+
+// Create the div element with event handlers.
+// We need two elements: one with the content attribute speficied and one
+// with the IDL attribute specified since we can't set these independently.
+function createAndRegisterTargets(eventAttributes) {
+  var displayElement = document.getElementById('display');
+  var contentAttributeElement = document.createElement("div");
+  var idlAttributeElement     = document.createElement("div");
+  displayElement.appendChild(contentAttributeElement);
+  displayElement.appendChild(idlAttributeElement);
+
+  // Add handlers
+  eventAttributes.forEach(event => {
+    contentAttributeElement.setAttribute(event, 'handleEvent(event);');
+    contentAttributeElement.handlerType = 'content attribute';
+    idlAttributeElement[event] = handleEvent;
+    idlAttributeElement.handlerType = 'IDL attribute';
+  });
+
+  return [contentAttributeElement, idlAttributeElement];
+}
+
+function handleEvent(event) {
+  if (event.target.receivedEventType) {
+    ok(false, `Received ${event.type} event, but this element have previous `
+              `received event '${event.target.receivedEventType}'.`);
+    return;
+  }
+  event.target.receivedEventType = event.type;
+}
+
+function checkReceivedEvents(eventType, elements) {
+  elements.forEach(element => {
+    is(element.receivedEventType, eventType,
+       `Expected to receive '${eventType}', got
+        '${element.receivedEventType}', for event handler registered
+        using ${element.handlerType}`);
+    element.receivedEventType = undefined;
+  });
+}
+
+// Take over the refresh driver right from the start.
+advance_clock(0);
+
+// 1a. Test CSS Animation event handlers (without animationcancel)
+
+var targets = createAndRegisterTargets([ 'onanimationstart',
+                                         'onanimationiteration',
+                                         'onanimationend',
+                                         'onanimationcancel']);
+targets.forEach(div => {
+  div.setAttribute('style', 'animation: anim 100ms 2');
+  getComputedStyle(div).animationName;  // flush
+});
+
+advance_clock(0);
+checkReceivedEvents("animationstart", targets);
+
+advance_clock(100);
+checkReceivedEvents("animationiteration", targets);
+
+advance_clock(200);
+checkReceivedEvents("animationend", targets);
+
+targets.forEach(div => { div.remove(); });
+
+// 1b. Test CSS Animation cancel event handler
+var targets = createAndRegisterTargets([ 'onanimationcancel' ]);
+
+targets.forEach(div => {
+  div.setAttribute('style', 'animation: anim 100ms 2 200ms');
+  getComputedStyle(div).animationName;  // flush
+});
+
+advance_clock(200);
+
+targets.forEach(div => {
+  div.style.display = "none"
+  getComputedStyle(div).display; // flush
+});
+
+advance_clock(0);
+checkReceivedEvents("animationcancel", targets);
+
+advance_clock(200);
+
+targets.forEach(div => { div.remove(); });
+
+
+// 2a. Test CSS Transition event handlers (without transitioncancel)
+
+var targets = createAndRegisterTargets([ 'ontransitionrun',
+                                         'ontransitionstart',
+                                         'ontransitionend',
+                                         'ontransitioncancel' ]);
+targets.forEach(div => {
+  div.style.transition = 'margin-left 100ms 200ms';
+  getComputedStyle(div).marginLeft; // flush
+  div.style.marginLeft = "200px";
+  getComputedStyle(div).marginLeft; // flush
+});
+
+advance_clock(0);
+checkReceivedEvents("transitionrun", targets);
+
+advance_clock(200);
+checkReceivedEvents("transitionstart", targets);
+
+advance_clock(100);
+checkReceivedEvents("transitionend", targets);
+
+targets.forEach(div => { div.remove(); });
+
+// 2b. Test CSS Transition cancel event handler.
+
+var targets = createAndRegisterTargets([ 'ontransitioncancel' ]);
+targets.forEach(div => {
+  div.style.transition = 'margin-left 100ms 200ms';
+  getComputedStyle(div).marginLeft; // flush
+  div.style.marginLeft = "200px";
+  getComputedStyle(div).marginLeft; // flush
+});
+
+advance_clock(200);
+
+targets.forEach(div => {
+  div.style.display = "none"
+});
+getComputedStyle(targets[0]).display; // flush
+
+advance_clock(0);
+checkReceivedEvents("transitioncancel", targets);
+
+advance_clock(100);
+targets.forEach( div => { is(div.receivedEventType, undefined); });
+
+targets.forEach(div => { div.remove(); });
+
+// 3. Test prefixed CSS Animation event handlers.
+
+var targets = createAndRegisterTargets([ 'onwebkitanimationstart',
+                                         'onwebkitanimationiteration',
+                                         'onwebkitanimationend' ]);
+targets.forEach(div => {
+  div.setAttribute('style', 'animation: anim 100ms 2');
+  getComputedStyle(div).animationName;  // flush
+});
+
+advance_clock(0);
+checkReceivedEvents("webkitAnimationStart", targets);
+
+advance_clock(100);
+checkReceivedEvents("webkitAnimationIteration", targets);
+
+advance_clock(200);
+checkReceivedEvents("webkitAnimationEnd", targets);
+
+targets.forEach(div => { div.remove(); });
+
+// 4. Test prefixed CSS Transition event handlers.
+
+advance_clock(0);
+var targets = createAndRegisterTargets([ 'onwebkittransitionend' ]);
+targets.forEach(div => {
+  div.style.transition = 'margin-left 100ms';
+  getComputedStyle(div).marginLeft; // flush
+  div.style.marginLeft = "200px";
+  getComputedStyle(div).marginLeft; // flush
+});
+
+advance_clock(100);
+checkReceivedEvents("webkitTransitionEnd", targets);
+
+targets.forEach(div => { div.remove(); });
+
+SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_event_order.html b/layout/style/test/test_animations_event_order.html
new file mode 100644
index 0000000000..7caee2bdcb
--- /dev/null
+++ b/layout/style/test/test_animations_event_order.html
@@ -0,0 +1,710 @@
+<!doctype html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1183461
+-->
+<!--
+  This test is similar to those in test_animations.html with the exception
+  that those tests interact with a single element at a time. The tests in this
+  file are specifically concerned with testing the ordering of events between
+  elements for which most of the utilities in animation_utils.js are not
+  suited.
+-->
+<head>
+  <meta charset=utf-8>
+  <title>Test for CSS Animation and Transition event ordering
+         (Bug 1183461)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <!-- We still need animation_utils.js for advance_clock -->
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+  @keyframes anim  { to { margin-left: 100px } }
+  @keyframes animA { to { margin-left: 100px } }
+  @keyframes animB { to { margin-left: 100px } }
+  @keyframes animC { to { margin-left: 100px } }
+  </style>
+</head>
+<body>
+<a target="_blank"
+  href="https://bugzilla.mozilla.org/show_bug.cgi?id=1183461">Mozilla Bug
+  1183461</a>
+<div id="display"></div>
+<pre id="test">
+<script type="application/javascript">
+'use strict';
+
+/* eslint-disable no-shadow */
+
+// Take over the refresh driver right from the start.
+advance_clock(0);
+
+// Common test scaffolding
+
+var gEventsReceived = [];
+var gDisplay = document.getElementById('display');
+
+[ 'animationstart',
+  'animationiteration',
+  'animationend',
+  'animationcancel',
+  'transitionrun',
+  'transitionstart',
+  'transitionend',
+  'transitioncancel' ]
+  .forEach(event =>
+             gDisplay.addEventListener(event,
+                                       event => gEventsReceived.push(event)));
+
+function checkEventOrder(...args) {
+  // Argument format:
+  // Arguments     = ExpectedEvent*, desc
+  // ExpectedEvent =
+  //       [ target|animationName|transitionProperty, (pseudo,) message ]
+  var expectedEvents  = args.slice(0, -1);
+  var desc            = args[args.length - 1];
+  var isTestingNameOrProperty = expectedEvents.length &&
+                                typeof expectedEvents[0][0] == 'string';
+
+  var formatEvent = (target, nameOrProperty, pseudo, message) =>
+    isTestingNameOrProperty ?
+    `${nameOrProperty}${pseudo}:${message}` :
+    `${target.id}${pseudo}:${message}`;
+
+  var actual = gEventsReceived.map(
+      event => formatEvent(event.target,
+                           event.animationName || event.propertyName,
+                           event.pseudoElement, event.type)
+    ).join(';');
+  var expected = expectedEvents.map(
+      event => event.length == 3 ?
+               formatEvent(event[0], event[0], event[1], event[2]) :
+               formatEvent(event[0], event[0], '', event[1])
+    ).join(';');
+  is(actual, expected, desc);
+  gEventsReceived = [];
+}
+
+// 1. TESTS FOR SORTING BY TREE ORDER
+
+// 1a. Test that simultaneous events are sorted by tree order (siblings)
+
+var divs = [ document.createElement('div'),
+             document.createElement('div'),
+             document.createElement('div') ];
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.setAttribute('style', 'animation: anim 10s');
+  div.setAttribute('id', 'div' + i);
+  getComputedStyle(div).animationName; // trigger building of animation
+});
+
+advance_clock(0);
+checkEventOrder([ divs[0], 'animationstart' ],
+                [ divs[1], 'animationstart' ],
+                [ divs[2], 'animationstart' ],
+                'Simultaneous start on siblings');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+// 1b. Test that simultaneous events are sorted by tree order (children)
+
+divs = [ document.createElement('div'),
+         document.createElement('div'),
+         document.createElement('div') ];
+
+// Create the following arrangement:
+//
+//      display
+//       /   \
+//    div[0] div[1]
+//     /
+//   div[2]
+
+gDisplay.appendChild(divs[0]);
+gDisplay.appendChild(divs[1]);
+divs[0].appendChild(divs[2]);
+
+divs.forEach((div, i) => {
+  div.setAttribute('style', 'animation: anim 10s');
+  div.setAttribute('id', 'div' + i);
+  getComputedStyle(div).animationName; // trigger building of animation
+});
+
+advance_clock(0);
+checkEventOrder([ divs[0], 'animationstart' ],
+                [ divs[2], 'animationstart' ],
+                [ divs[1], 'animationstart' ],
+                'Simultaneous start on children');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+// 1c. Test that simultaneous events are sorted by tree order (pseudos)
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+
+// Create the following arrangement:
+//
+//      display
+//         |
+//       div[0]
+//     ::before,
+//     ::after
+//        |
+//      div[1]
+
+gDisplay.appendChild(divs[0]);
+divs[0].appendChild(divs[1]);
+
+divs.forEach((div, i) => {
+  div.setAttribute('style', 'animation: anim 10s');
+  div.setAttribute('id', 'div' + i);
+});
+
+var extraStyle = document.createElement('style');
+document.head.appendChild(extraStyle);
+var sheet = extraStyle.sheet;
+sheet.insertRule('#div0::after { animation: anim 10s }', 0);
+sheet.insertRule('#div0::before { animation: anim 10s }', 1);
+sheet.insertRule('#div0::after, #div0::before { ' +
+                 ' content: " " }', 2);
+getComputedStyle(divs[0]).animationName; // build animation
+getComputedStyle(divs[1]).animationName; // build animation
+
+advance_clock(0);
+checkEventOrder([ divs[0], 'animationstart' ],
+                [ divs[0], '::before', 'animationstart' ],
+                [ divs[0], '::after', 'animationstart' ],
+                [ divs[1], 'animationstart' ],
+                'Simultaneous start on pseudo-elements');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+sheet = undefined;
+extraStyle.remove();
+extraStyle = undefined;
+
+// 2. TESTS FOR SORTING BY TIME
+
+// 2a. Test that events are sorted by time
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.setAttribute('style', 'animation: anim 10s');
+  div.setAttribute('id', 'div' + i);
+});
+
+divs[0].style.animationDelay = '5s';
+
+advance_clock(0);
+advance_clock(20000);
+
+checkEventOrder([ divs[1], 'animationstart' ],
+                [ divs[0], 'animationstart' ],
+                [ divs[1], 'animationend' ],
+                [ divs[0], 'animationend' ],
+                'Sorting of start and end events by time');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+// 2b. Test different events within the one element
+
+var div = document.createElement('div');
+gDisplay.appendChild(div);
+div.style.animation = 'anim 4s 2, ' +   // Repeat at t=4s
+                      'anim 10s 5s, ' + // Start at t=5s
+                      'anim 3s';        // End at t=3s
+div.setAttribute('id', 'div');
+getComputedStyle(div).animationName; // build animation
+
+advance_clock(0);
+advance_clock(5000);
+
+checkEventOrder([ div, 'animationstart' ],
+                [ div, 'animationstart' ],
+                [ div, 'animationend' ],
+                [ div, 'animationiteration' ],
+                [ div, 'animationstart' ],
+                'Sorting of different events by time within an element');
+
+div.remove();
+div = undefined;
+
+// 2c. Test negative delay is sorted equal to zero delay but before
+//     positive delay
+
+divs = [ document.createElement('div'),
+         document.createElement('div'),
+         document.createElement('div') ];
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.setAttribute('id', 'div' + i);
+});
+
+divs[0].style.animation = 'anim 20s 5s';  // Positive delay, sorts last
+divs[1].style.animation = 'anim 20s';     // 0s delay
+divs[2].style.animation = 'anim 20s -5s'; // Negative delay, sorts same as
+                                          // 0s delay, i.e. use document
+                                          // position
+
+advance_clock(0);
+advance_clock(5000);
+checkEventOrder([ divs[1], 'animationstart' ],
+                [ divs[2], 'animationstart' ],
+                [ divs[0], 'animationstart' ],
+                'Sorting of events including negative delay');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+// 3. TESTS FOR SORTING BY animation-name POSITION
+
+// 3a. Test animation-name position
+
+div = document.createElement('div');
+gDisplay.appendChild(div);
+div.style.animation = 'animA 10s, animB 5s, animC 5s 2';
+div.setAttribute('id', 'div');
+getComputedStyle(div).animationName; // build animation
+
+advance_clock(0);
+
+checkEventOrder([ 'animA', 'animationstart' ],
+                [ 'animB', 'animationstart' ],
+                [ 'animC', 'animationstart' ],
+                'Sorting of simultaneous animationstart events by ' +
+                'animation-name');
+
+advance_clock(5000);
+
+checkEventOrder([ 'animB', 'animationend' ],
+                [ 'animC', 'animationiteration' ],
+                'Sorting of different types of events by animation-name');
+
+div.remove();
+div = undefined;
+
+// 3b. Test time trumps animation-name position
+
+div = document.createElement('div');
+gDisplay.appendChild(div);
+div.style.animation = 'animA 10s 2s, animB 10s 1s';
+div.setAttribute('id', 'div');
+
+advance_clock(0);
+advance_clock(3000);
+
+checkEventOrder([ 'animB', 'animationstart' ],
+                [ 'animA', 'animationstart' ],
+                'Events are sorted by time first, before animation-position');
+
+div.remove();
+div = undefined;
+
+// 4. TESTS FOR TRANSITIONS
+
+// 4a. Test sorting transitions by document position
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.style.marginLeft = '0px';
+  div.style.transition = 'margin-left 10s';
+  div.setAttribute('id', 'div' + i);
+});
+
+getComputedStyle(divs[0]).marginLeft;
+divs.forEach(div => div.style.marginLeft = '100px');
+getComputedStyle(divs[0]).marginLeft;
+
+advance_clock(0);
+advance_clock(10000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
+                [ divs[1], 'transitionend' ],
+                'Simultaneous transitionrun/start/end on siblings');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+// 4b. Test sorting transitions by document position (children)
+
+divs = [ document.createElement('div'),
+         document.createElement('div'),
+         document.createElement('div') ];
+
+// Create the following arrangement:
+//
+//      display
+//       /   \
+//    div[0] div[1]
+//     /
+//   div[2]
+
+gDisplay.appendChild(divs[0]);
+gDisplay.appendChild(divs[1]);
+divs[0].appendChild(divs[2]);
+
+divs.forEach((div, i) => {
+  div.style.marginLeft = '0px';
+  div.style.transition = 'margin-left 10s';
+  div.setAttribute('id', 'div' + i);
+});
+
+getComputedStyle(divs[0]).marginLeft;
+divs.forEach(div => div.style.marginLeft = '100px');
+getComputedStyle(divs[0]).marginLeft;
+
+advance_clock(0);
+advance_clock(10000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[2], 'transitionrun' ],
+                [ divs[2], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
+                [ divs[2], 'transitionend' ],
+                [ divs[1], 'transitionend' ],
+                'Simultaneous transitionrun/start/end on children');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+// 4c. Test sorting transitions by document position (pseudos)
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+
+// Create the following arrangement:
+//
+//      display
+//         |
+//       div[0]
+//     ::before,
+//     ::after
+//        |
+//      div[1]
+
+gDisplay.appendChild(divs[0]);
+divs[0].appendChild(divs[1]);
+
+divs.forEach((div, i) => {
+  div.setAttribute('id', 'div' + i);
+});
+
+extraStyle = document.createElement('style');
+document.head.appendChild(extraStyle);
+sheet = extraStyle.sheet;
+sheet.insertRule('div, #div0::after, #div0::before { ' +
+                 ' transition: margin-left 10s; ' +
+                 ' margin-left: 0px }', 0);
+sheet.insertRule('div.active, #div0.active::after, #div0.active::before { ' +
+                 ' margin-left: 100px }', 1);
+sheet.insertRule('#div0::after, #div0::before { ' +
+                 ' content: " " }', 2);
+
+getComputedStyle(divs[0]).marginLeft;
+divs.forEach(div => div.classList.add('active'));
+getComputedStyle(divs[0]).marginLeft;
+
+advance_clock(0);
+advance_clock(10000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[0], '::before', 'transitionrun' ],
+                [ divs[0], '::before', 'transitionstart' ],
+                [ divs[0], '::after', 'transitionrun' ],
+                [ divs[0], '::after', 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
+                [ divs[0], '::before', 'transitionend' ],
+                [ divs[0], '::after', 'transitionend' ],
+                [ divs[1], 'transitionend' ],
+                'Simultaneous transitionrun/start/end on pseudo-elements');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+sheet = undefined;
+extraStyle.remove();
+extraStyle = undefined;
+
+// 4d. Test sorting transitions by time
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.style.marginLeft = '0px';
+  div.setAttribute('id', 'div' + i);
+});
+
+divs[0].style.transition = 'margin-left 10s';
+divs[1].style.transition = 'margin-left 5s';
+
+getComputedStyle(divs[0]).marginLeft;
+divs.forEach(div => div.style.marginLeft = '100px');
+getComputedStyle(divs[0]).marginLeft;
+
+advance_clock(0);
+advance_clock(10000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[1], 'transitionend' ],
+                [ divs[0], 'transitionend' ],
+                'Sorting of transitionrun/start/end events by time');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+// 4e. Test sorting transitions by time (with delay)
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.style.marginLeft = '0px';
+  div.setAttribute('id', 'div' + i);
+});
+
+divs[0].style.transition = 'margin-left 5s 5s';
+divs[1].style.transition = 'margin-left 5s';
+
+getComputedStyle(divs[0]).marginLeft;
+divs.forEach(div => div.style.marginLeft = '100px');
+getComputedStyle(divs[0]).marginLeft;
+
+advance_clock(0);
+advance_clock(10 * 1000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionend' ],
+                [ divs[0], 'transitionend' ],
+                'Sorting of transitionrun/start/end events by time' +
+                '(including delay)');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+// 4f. Test sorting transitions by transition-property
+
+div = document.createElement('div');
+gDisplay.appendChild(div);
+div.style.opacity = '0';
+div.style.marginLeft = '0px';
+div.style.transition = 'all 5s';
+
+getComputedStyle(div).marginLeft;
+div.style.opacity = '1';
+div.style.marginLeft = '100px';
+getComputedStyle(div).marginLeft;
+
+advance_clock(0);
+advance_clock(10000);
+
+checkEventOrder([ 'margin-left', 'transitionrun' ],
+                [ 'margin-left', 'transitionstart' ],
+                [ 'opacity', 'transitionrun' ],
+                [ 'opacity', 'transitionstart' ],
+                [ 'margin-left', 'transitionend' ],
+                [ 'opacity', 'transitionend' ],
+                'Sorting of transitionrun/start/end events by ' +
+                'transition-property')
+
+div.remove();
+div = undefined;
+
+// 4g. Test document position beats transition-property
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.style.marginLeft = '0px';
+  div.style.opacity = '0';
+  div.style.transition = 'all 10s';
+  div.setAttribute('id', 'div' + i);
+});
+
+getComputedStyle(divs[0]).marginLeft;
+divs[0].style.opacity = '1';
+divs[1].style.marginLeft = '100px';
+getComputedStyle(divs[0]).marginLeft;
+
+advance_clock(0);
+advance_clock(10000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionend' ],
+                [ divs[1], 'transitionend' ],
+                'Transition events are sorted by document position first, ' +
+                'before transition-property');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+// 4h. Test time beats transition-property
+
+div = document.createElement('div');
+gDisplay.appendChild(div);
+div.style.opacity = '0';
+div.style.marginLeft = '0px';
+div.style.transition = 'margin-left 10s, opacity 5s';
+
+getComputedStyle(div).marginLeft;
+div.style.opacity = '1';
+div.style.marginLeft = '100px';
+getComputedStyle(div).marginLeft;
+
+advance_clock(0);
+advance_clock(10000);
+
+checkEventOrder([ 'margin-left', 'transitionrun' ],
+                [ 'margin-left', 'transitionstart' ],
+                [ 'opacity', 'transitionrun' ],
+                [ 'opacity', 'transitionstart' ],
+                [ 'opacity', 'transitionend' ],
+                [ 'margin-left', 'transitionend' ],
+                'Transition events are sorted by time first, before ' +
+                'transition-property');
+
+div.remove();
+div = undefined;
+
+// 4i. Test sorting transitions by document position (negative delay)
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.style.marginLeft = '0px';
+  div.setAttribute('id', 'div' + i);
+});
+
+divs[0].style.transition = 'margin-left 10s 5s';
+divs[1].style.transition = 'margin-left 10s';
+
+getComputedStyle(divs[0]).marginLeft;
+divs.forEach(div => div.style.marginLeft = '100px');
+getComputedStyle(divs[0]).marginLeft;
+
+advance_clock(0);
+advance_clock(15 * 1000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[1], 'transitionend' ],
+                [ divs[0], 'transitionend' ],
+                'Simultaneous transitionrun/start/end on siblings');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+// 4j. Test sorting transitions with cancel
+// The order of transitioncancel is based on StyleManager.
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.style.marginLeft = '0px';
+  div.setAttribute('id', 'div' + i);
+});
+
+divs[0].style.transition = 'margin-left 10s 5s';
+divs[1].style.transition = 'margin-left 10s';
+
+getComputedStyle(divs[0]).marginLeft;
+divs.forEach(div => div.style.marginLeft = '100px');
+getComputedStyle(divs[0]).marginLeft;
+
+advance_clock(0);
+advance_clock(5 * 1000);
+divs.forEach(div =>  {
+  div.style.display = 'none';
+  // The transitioncancel event order is not absolute when firing siblings
+  // transitioncancel on same elapsed time.
+  // Force to flush style for the element so that the transition on the element
+  // iscancelled and corresponding cancel event is queued respectively.
+  getComputedStyle(div).display;
+});
+advance_clock(10 * 1000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+                [ divs[1], 'transitionrun' ],
+                [ divs[1], 'transitionstart' ],
+                [ divs[0], 'transitionstart' ],
+                [ divs[0], 'transitioncancel' ],
+                [ divs[1], 'transitioncancel' ],
+                'Simultaneous transitionrun/start/cancel on siblings');
+
+divs.forEach(div => div.remove());
+divs = [];
+
+
+// 4k. Test sorting animations with cancel
+
+divs = [ document.createElement('div'),
+         document.createElement('div') ];
+
+divs.forEach((div, i) => {
+  gDisplay.appendChild(div);
+  div.style.marginLeft = '0px';
+  div.setAttribute('id', 'div' + i);
+});
+
+divs[0].style.animation = 'anim 10s 5s';
+divs[1].style.animation = 'anim 10s';
+
+getComputedStyle(divs[0]).animation; // flush
+
+advance_clock(0);  // divs[1]'s animation start
+advance_clock(5 * 1000);  // divs[0]'s animation start
+divs.forEach(div => {
+  div.style.display = 'none';
+  // The animationcancel event order is not absolute when firing siblings
+  // animationcancel on same elapsed time.
+  // Force to flush style for the element so that the transition on the element
+  // iscancelled and corresponding cancel event is queued respectively.
+  getComputedStyle(div).display;
+});
+advance_clock(10 * 1000);
+
+checkEventOrder([ divs[1], 'animationstart' ],
+                [ divs[0], 'animationstart' ],
+                [ divs[0], 'animationcancel' ],
+                [ divs[1], 'animationcancel' ],
+                'Simultaneous animationcancel on siblings');
+
+SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_iterationstart.html b/layout/style/test/test_animations_iterationstart.html
new file mode 100644
index 0000000000..dbca9490e4
--- /dev/null
+++ b/layout/style/test/test_animations_iterationstart.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Test for Animation.effect.timing.iterationStart on compositor animations
+  </title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style type="text/css">
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: white;
+    }
+  </style>
+</head>
+<body>
+<div id="display"></div>
+<script type="application/javascript">
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+runOMTATest(function() {
+  runAllAsyncAnimTests().then(SimpleTest.finish);
+}, SimpleTest.finish, SpecialPowers);
+
+addAsyncAnimTest(async function() {
+  var [ div ] = new_div("test");
+  var animation = div.animate(
+    { transform: ["translate(0px)", "translate(100px)"] },
+    { iterationStart: 0.5, duration: 10000, fill: "both"}
+  );
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 50 }, RunningOn.Compositor, "Start of Animation");
+
+  advance_clock(4000);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 90 }, RunningOn.Compositor, "40% of Animation");
+
+  advance_clock(6000);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread, "End of Animation");
+
+  done_div();
+});
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_omta.html b/layout/style/test/test_animations_omta.html
new file mode 100644
index 0000000000..f5d22e005a
--- /dev/null
+++ b/layout/style/test/test_animations_omta.html
@@ -0,0 +1,2849 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=964646
+-->
+<!--
+
+ ========= PLEASE KEEP THIS IN SYNC WITH test_animations.html =========
+
+ This test mimicks the content of test_animations.html but performs tests
+ specific to animations that run on the compositor thread since they require
+ special (asynchronous) handling. Furthermore, these tests check that
+ animations that are expected to run on the compositor thread, are actually
+ doing so.
+
+ If you are making changes to this file or to test_animations.html, please
+ try to keep them consistent where appropriate.
+
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for css3-animations running on the compositor thread (Bug
+         964646)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+    @keyframes transform-anim {
+      to {
+        transform: translate(100px);
+      }
+    }
+    @keyframes anim1 {
+       0% { transform: translate(0px) }
+       50% { transform: translate(80px) }
+       100% { transform: translate(100px) }
+    }
+    @keyframes anim2 {
+      from { opacity: 0 } to { opacity: 1 }
+    }
+    @keyframes anim3 {
+      from { opacity: 0 } to { opacity: 1 }
+    }
+    @keyframes anim4 {
+      from { transform: translate(0px, 0px) }
+      to { transform: translate(0px, 100px) }
+    }
+
+    @keyframes kf1 {
+      50% { transform: translate(50px) }
+      to { transform: translate(150px) }
+    }
+    @keyframes kf2 {
+      from { transform: translate(150px) }
+      50% { transform: translate(50px) }
+    }
+    @keyframes kf3 {
+      25% { transform: translate(100px) }
+    }
+    @keyframes kf4 {
+      to, from { display: none; transform: translate(37px) }
+    }
+    @keyframes kf_cascade1 {
+      from { transform: translate(50px) }
+      50%, from { transform: translate(30px) }      /* wins: 0% */
+      75%, 85%, 50% { transform: translate(20px) }  /* wins: 75%, 50% */
+      100%, 85% { transform: translate(70px) }      /* wins: 100% */
+      85.1% { transform: translate(60px) }          /* wins: 85.1% */
+      85% { transform: translate(30px) }            /* wins: 85% */
+    }
+    @keyframes kf_cascade2 { from, to { opacity: 0.3 } }
+    @keyframes kf_cascade2 { from, to { transform: translate(50px) } }
+    @keyframes kf_cascade2 { from, to { transform: translate(100px) } }
+    @keyframes kf_tf1 {
+      0%   { transform: translate(20px); animation-timing-function: ease }
+      25%  { transform: translate(60px); }
+      50%  { transform: translate(160px); animation-timing-function: steps(5) }
+      75%  { transform: translate(120px); animation-timing-function: linear }
+      100% { transform: translate(20px); animation-timing-function: ease-out }
+    }
+    @keyframes kf_scale {
+      to { scale: 2.25 2.25; }
+    }
+
+    @keyframes always_fifty {
+      from, to { transform: translate(50px) }
+    }
+
+    #withbefore::before, #withafter::after {
+      content: "test";
+      animation: anim4 1s linear alternate 3;
+      display:block;
+    }
+
+    @keyframes multiprop {
+      0% {
+        transform: translate(10px); opacity: 0.3;
+        animation-timing-function: ease;
+      }
+      25% {
+        opacity: 0.5;
+        animation-timing-function: ease-out;
+      }
+      50% {
+        transform: translate(40px);
+      }
+      75% {
+        transform: translate(80px); opacity: 0.6;
+        animation-timing-function: ease-in;
+      }
+    }
+
+    @keyframes cascade {
+      0%, 25%, 100% { transform: translate(0px) }
+      50%, 75% { transform: translate(100px) }
+      0%, 75%, 100% { opacity: 0 }
+      25%, 50% { opacity: 1 }
+    }
+    @keyframes cascade2 {
+      0% { transform: translate(0px) }
+      25% { transform: translate(30px);
+            animation-timing-function: ease-in } /* beaten by rule below */
+      50% { transform: translate(0px) }
+      25% { transform: translate(50px) }
+      100% { transform: translate(100px) }
+    }
+
+    @keyframes primitives1 {
+      from { transform: rotate(0deg) translateX(0px) scaleX(1)
+        translate(0px) scale3d(1, 1, 1); }
+      to { transform: rotate(270deg) translate3d(0px, 0px, 0px) scale(1)
+        translateY(0px) scaleY(1); }
+    }
+
+    @keyframes important1 {
+      from { opacity: 0.5; }
+      50%  { opacity: 1 !important; } /* ignored */
+      to   { opacity: 0.8; }
+    }
+    @keyframes important2 {
+      from { opacity: 0.5;
+             transform: translate(100px); }
+      to   { opacity: 0.2 !important; /* ignored */
+             transform: translate(50px); }
+    }
+
+    @keyframes empty { }
+    @keyframes nearlyempty {
+      to {
+        transform: translate(100px);
+      }
+    }
+
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: white;
+    }
+
+    .visitedLink:link { background-color: yellow }
+    .visitedLink:visited { background-color: blue }
+
+    @keyframes opacitymid {
+      0% { opacity: 0.2 }
+      100% { opacity: 0.8 }
+    }
+
+    @keyframes transformnone {
+      0%, 100% { transform: translateX(50px) }
+      25%, 75% { transform: none }
+    }
+  </style>
+</head>
+<body>
+<a target="_blank"
+  href="https://bugzilla.mozilla.org/show_bug.cgi?id=964646">Mozilla Bug
+  964646</a>
+<div id="display"></div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+const { AppConstants } = SpecialPowers.ChromeUtils.import(
+  "resource://gre/modules/AppConstants.jsm"
+);
+/** Test for css3-animations running on the compositor thread (Bug 964646) **/
+ 
+// Global state
+var gDisplay = document.getElementById("display")
+  , gDiv     = null;
+
+// Shortcut omta_is and friends by filling in the initial 'elem' argument
+// with gDiv.
+[ 'omta_is', 'omta_todo_is', 'omta_is_approx' ].forEach(function(fn) {
+  var origFn = window[fn];
+  window[fn] = function() {
+    var args = Array.from(arguments);
+    if (!(args[0] instanceof Element)) {
+      args.unshift(gDiv);
+    }
+    return origFn.apply(window, args);
+  };
+});
+
+// Shortcut new_div and done_div to update gDiv
+var originalNewDiv = window.new_div;
+window.new_div = function(style) {
+  [ gDiv ] = originalNewDiv(style);
+};
+var originalDoneDiv = window.done_div;
+window.done_div = function() {
+  originalDoneDiv();
+  gDiv = null;
+};
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(2);
+runOMTATest(function() {
+  var onAbort = function() {
+    if (gDiv) {
+      done_div();
+    }
+  };
+  runAllAsyncAnimTests(onAbort).then(function() {
+    SimpleTest.finish();
+  });
+}, SimpleTest.finish);
+
+//----------------------------------------------------------------------
+//
+// Test cases
+//
+//----------------------------------------------------------------------
+
+// This test is not in test_animations.html but is here to test that
+// transform animations are actually run on the compositor thread as expected.
+addAsyncAnimTest(async function() {
+  new_div("animation: transform-anim linear 300s");
+
+  await waitForPaintsFlushed();
+
+  advance_clock(200000);
+  omta_is("transform", { tx: 100 * 2 / 3 }, RunningOn.Compositor,
+          "OMTA animation is animating as expected");
+  done_div();
+});
+
+async function testFillMode(fillMode, fillsBackwards, fillsForwards)
+{
+  var style = "transform: translate(30px); animation: 10s 3s anim1 linear";
+  var desc;
+  if (fillMode.length > 0) {
+    style += " " + fillMode;
+    desc = "fill mode " + fillMode + ": ";
+  } else {
+    desc = "default fill mode: ";
+  }
+  new_div(style);
+  listen();
+
+  await waitForPaintsFlushed();
+
+  if (fillsBackwards)
+    omta_is("transform", { tx: 0 }, RunningOn.Compositor,
+            desc + "does affect value during delay (0s)");
+  else
+    omta_is("transform", { tx: 30 }, RunningOn.MainThread,
+            desc + "doesn't affect value during delay (0s)");
+
+  advance_clock(2000);
+  if (fillsBackwards)
+    omta_is("transform", { tx: 0 }, RunningOn.Compositor,
+            desc + "does affect value during delay (0s)");
+  else
+    omta_is("transform", { tx: 30 }, RunningOn.MainThread,
+            desc + "does affect value during delay (0s)");
+
+  check_events([], "before start in testFillMode");
+  advance_clock(1000);
+  check_events([{ type: "animationstart", target: gDiv,
+                  bubbles: true, cancelable: false,
+                  animationName: "anim1", elapsedTime: 0.0,
+                  pseudoElement: "" }],
+               "right after start in testFillMode");
+
+  // If we have a backwards fill then at the start of the animation we will end
+  // up applying the same value as the fill value. Various optimizations in
+  // RestyleManager may filter out this meaning that the animation doesn't get
+  // added to the compositor thread until the first time the value changes.
+  //
+  // As a result we look for this first sample on either the compositor or the
+  // computed style
+  await waitForPaints();
+  omta_is("transform", { tx: 0 }, RunningOn.Either,
+          desc + "affects value at start of animation");
+  advance_clock(125);
+  // We might not add the animation to compositor until the second sample (due
+  // to the optimizations mentioned above) so we should wait for paints before
+  // proceeding
+  await waitForPaints();
+  omta_is("transform", { tx: 2 }, RunningOn.Compositor,
+          desc + "affects value during animation");
+  advance_clock(2375);
+  omta_is("transform", { tx: 40 }, RunningOn.Compositor,
+          desc + "affects value during animation");
+  advance_clock(2500);
+  omta_is("transform", { tx: 80 }, RunningOn.Compositor,
+          desc + "affects value during animation");
+  advance_clock(2500);
+  omta_is("transform", { tx: 90 }, RunningOn.Compositor,
+          desc + "affects value during animation");
+  advance_clock(2375);
+  omta_is("transform", { tx: 99.5 }, RunningOn.Compositor,
+          desc + "affects value during animation");
+  check_events([], "before end in testFillMode");
+  advance_clock(125);
+  check_events([{ type: "animationend", target: gDiv,
+                  bubbles: true, cancelable: false,
+                  animationName: "anim1", elapsedTime: 10.0,
+                  pseudoElement: "" }],
+               "right after end in testFillMode");
+  
+  // Currently the compositor will apply a forwards fill until it gets told by
+  // the main thread to clear the animation. As a result we should wait for
+  // paints to be flushed before checking that the animated value does *not*
+  // appear on the compositor thread.
+  await waitForPaints();
+  if (fillsForwards)
+    omta_is("transform", { tx: 100 }, RunningOn.MainThread,
+            desc + "affects value at end of animation");
+  advance_clock(10);
+  if (fillsForwards)
+    omta_is("transform", { tx: 100 }, RunningOn.MainThread,
+            desc + "affects value after animation");
+  else
+    omta_is("transform", { tx: 30 }, RunningOn.MainThread,
+            desc + "does not affect value after animation");
+
+  done_div();
+}
+
+addAsyncAnimTest(function() { return testFillMode("", false, false); });
+addAsyncAnimTest(function() { return testFillMode("none", false, false); });
+addAsyncAnimTest(function() { return testFillMode("forwards", false, true); });
+addAsyncAnimTest(function() { return testFillMode("backwards", true, false); });
+addAsyncAnimTest(function() { return testFillMode("both", true, true); });
+
+// Test that animations continue running when the animation name
+// list is changed.
+//
+// test_animations.html combines all these tests into one block but this is
+// difficult for OMTA because currently there are only two properties to which
+// we apply OMTA. Instead we break the test down into a few independent pieces
+// in order to exercise the same functionality.
+
+// Append to list
+addAsyncAnimTest(async function() {
+  new_div("animation: anim1 linear 10s");
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 0 }, RunningOn.Either,
+            "just anim1, translate at start");
+  advance_clock(1000);
+    omta_is("transform", { tx: 16 }, RunningOn.Compositor,
+            "just anim1, translate at 1s");
+  // append anim2
+  gDiv.style.animation = "anim1 linear 10s, anim2 linear 10s";
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 16 }, RunningOn.Compositor,
+            "anim1 + anim2, translate at 1s");
+    omta_is("opacity", 0, RunningOn.Compositor,
+            "anim1 + anim2, opacity at 1s");
+  advance_clock(1000);
+    omta_is("transform", { tx: 32 }, RunningOn.Compositor,
+            "anim1 + anim2, translate at 2s");
+    omta_is("opacity", 0.1, RunningOn.Compositor,
+            "anim1 + anim2, opacity at 2s");
+  done_div();
+});
+
+// Prepend to list; delete from list
+addAsyncAnimTest(async function() {
+  new_div("animation: anim1 linear 10s");
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 0 }, RunningOn.Either,
+            "just anim1, translate at start");
+  advance_clock(1000);
+    omta_is("transform", { tx: 16 }, RunningOn.Compositor,
+                     "just anim1, translate at 1s");
+  // prepend anim2
+  gDiv.style.animation = "anim2 linear 10s, anim1 linear 10s";
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 16 }, RunningOn.Compositor,
+            "anim2 + anim1, translate at 1s");
+    omta_is("opacity", 0, RunningOn.Compositor,
+            "anim2 + anim1, opacity at 1s");
+  advance_clock(1000);
+    omta_is("transform", { tx: 32 }, RunningOn.Compositor,
+            "anim2 + anim1, translate at 2s");
+    omta_is("opacity", 0.1, RunningOn.Compositor,
+            "anim2 + anim1, opacity at 2s");
+  // remove anim2 from list
+  gDiv.style.animation = "anim1 linear 10s";
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 32 }, RunningOn.Compositor,
+            "just anim1, translate at 2s");
+    omta_is("opacity", 1, RunningOn.MainThread, "just anim1, opacity at 2s");
+  advance_clock(1000);
+    omta_is("transform", { tx: 48 }, RunningOn.Compositor,
+            "just anim1, translate at 3s");
+    omta_is("opacity", 1, RunningOn.MainThread, "just anim1, opacity at 3s");
+  done_div();
+});
+
+// Swap elements
+addAsyncAnimTest(async function() {
+  new_div("animation: anim1 linear 10s, anim2 linear 10s");
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 0 }, RunningOn.Either,
+            "anim1 + anim2, translate at start");
+    omta_is("opacity", 0, RunningOn.Compositor,
+            "anim1 + anim2, opacity at start");
+  advance_clock(1000);
+    omta_is("transform", { tx: 16 }, RunningOn.Compositor,
+            "anim1 + anim2, translate at 1s");
+    omta_is("opacity", 0.1, RunningOn.Compositor,
+            "anim1 + anim2, opacity at 1s");
+  // swap anim1 and anim2, change duration of anim2
+  gDiv.style.animation = "anim2 linear 5s, anim1 linear 10s";
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 16 }, RunningOn.Compositor,
+            "anim2 + anim1, translate at 1s");
+    omta_is("opacity", 0.2, RunningOn.Compositor,
+            "anim2 + anim1, opacity at 1s");
+  advance_clock(1000);
+    omta_is("transform", { tx: 32 }, RunningOn.Compositor,
+            "anim2 + anim1, translate at 2s");
+    omta_is("opacity", 0.4, RunningOn.Compositor,
+            "anim2 + anim1, opacity at 2s");
+  // list anim2 twice, last duration wins, original start time still applies
+  gDiv.style.animation = "anim2 linear 5s, anim1 linear 10s, anim2 linear 20s";
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 32 }, RunningOn.Compositor,
+            "anim2 + anim1 + anim2, translate at 2s");
+    is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.1",
+       "anim2 + anim1 + anim2, opacity at 2s");
+  // drop one of the anim2, and list anim3 as well, which animates
+  // the same property as anim2
+  gDiv.style.animation = "anim1 linear 10s, anim2 linear 20s, anim3 linear 10s";
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 32 }, RunningOn.Compositor,
+            "anim1 + anim2 + anim3, translate at 2s");
+    is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0",
+       "anim1 + anim2 + anim3, opacity at 2s");
+  advance_clock(1000);
+    omta_is("transform", { tx: 48 }, RunningOn.Compositor,
+            "anim1 + anim2 + anim3, translate at 3s");
+    is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.1",
+       "anim1 + anim2 + anim3, opacity at 3s");
+  // now swap the anim3 and anim2 order
+  gDiv.style.animation = "anim1 linear 10s, anim3 linear 10s, anim2 linear 20s";
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 48 }, RunningOn.Compositor,
+            "anim1 + anim3 + anim2, translate at 3s");
+    is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.15",
+       "anim1 + anim3 + anim2, opacity at 3s");
+  advance_clock(2000); // (unlike test_animations.html, we seek 2s forwards here
+                       // since at 4s anim2 and anim3 produce the same result so
+                       // we can't tell which won.)
+    omta_is("transform", { tx: 80 }, RunningOn.Compositor,
+            "anim1 + anim3 + anim2, translate at 5s");
+    is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.25",
+       "anim1 + anim3 + anim2, opacity at 5s");
+  // swap anim3 and anim2 back
+  gDiv.style.animation = "anim1 linear 10s, anim2 linear 20s, anim3 linear 10s";
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 80 }, RunningOn.Compositor,
+            "anim1 + anim2 + anim3, translate at 5s");
+    is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.3",
+       "anim1 + anim2 + anim3, opacity at 5s");
+  // seek past end of anim1
+  advance_clock(5100);
+  await waitForPaints();
+    omta_is("transform", { tx: 0 }, RunningOn.MainThread,
+            "anim1 + anim2 + anim3, translate at 10.1s");
+  // Change the animation fill mode on the completed animation.
+  gDiv.style.animation =
+    "anim1 linear 10s forwards, anim2 linear 20s, anim3 linear 10s";
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 100 }, RunningOn.MainThread,
+            "anim1 + anim2 + anim3, translate at 10.1s with fill mode");
+  advance_clock(900);
+    omta_is("transform", { tx: 100 }, RunningOn.MainThread,
+            "anim1 + anim2 + anim3, translate at 11s with fill mode");
+  // Change the animation duration on the completed animation, so it is
+  // no longer completed.
+  // XXX Not sure about this---there seems to be a bug in test_animations.html
+  // in that it drops the fill mode but the test comment says it has a fill mode
+  gDiv.style.animation = "anim1 linear 20s, anim2 linear 20s, anim3 linear 10s";
+  await waitForPaintsFlushed();
+    omta_is("transform", { tx: 82 }, RunningOn.Compositor,
+            "anim1 + anim2 + anim3, translate at 11s with fill mode");
+    is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.9",
+       "anim1 + anim2 + anim3, opacity at 11s");
+  done_div();
+});
+
+/*
+ * css3-animations:  3. Keyframes
+ * http://dev.w3.org/csswg/css3-animations/#keyframes
+ */
+
+// Test the rules on keyframes that lack a 0% or 100% rule:
+// (simultaneously, test that reverse animations have their keyframes
+// run backwards)
+
+addAsyncAnimTest(async function() {
+  // 100px at 0%, 50px at 50%, 150px at 100%
+  new_div("transform: translate(100px); " +
+          "animation: kf1 ease 1s alternate infinite");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor, "no-0% at 0.0s");
+  advance_clock(100);
+  omta_is_approx("transform", { tx: 100 - 50 * gTF.ease(0.2) }, 0.01,
+                 RunningOn.Compositor, "no-0% at 0.1s");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 100 - 50 * gTF.ease(0.6) }, 0.01,
+                 RunningOn.Compositor, "no-0% at 0.3s");
+  advance_clock(200);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor, "no-0% at 0.5s");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 50 + 100 * gTF.ease(0.4) }, 0.01,
+                 RunningOn.Compositor, "no-0% at 0.7s");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 50 + 100 * gTF.ease(0.8) }, 0.01,
+                 RunningOn.Compositor, "no-0% at 0.9s");
+  advance_clock(100);
+  omta_is("transform", { tx: 150 }, RunningOn.Compositor, "no-0% at 1.0s");
+  advance_clock(100);
+  omta_is_approx("transform", { tx: 50 + 100 * gTF.ease(0.8) }, 0.01,
+                 RunningOn.Compositor, "no-0% at 1.1s");
+  advance_clock(300);
+  omta_is_approx("transform", { tx: 50 + 100 * gTF.ease(0.2) }, 0.01,
+                 RunningOn.Compositor, "no-0% at 1.4s");
+  advance_clock(300);
+  omta_is_approx("transform", { tx: 100 - 50 * gTF.ease(0.6) }, 0.01,
+                 RunningOn.Compositor, "no-0% at 1.7s");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 100 - 50 * gTF.ease(0.2) }, 0.01,
+                 RunningOn.Compositor, "no-0% at 1.9s");
+  advance_clock(100);
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor, "no-0% at 2.0s");
+  done_div();
+
+  // 150px at 0%, 50px at 50%, 100px at 100%
+  new_div("transform: translate(100px); " +
+          "animation: kf2 ease-in 1s alternate infinite");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 150 }, RunningOn.Compositor, "no-100% at 0.0s");
+  advance_clock(100);
+  omta_is_approx("transform", { tx: 150 - 100 * gTF.ease_in(0.2) }, 0.01,
+                 RunningOn.Compositor, "no-100% at 0.1s");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 150 - 100 * gTF.ease_in(0.6) }, 0.01,
+                 RunningOn.Compositor, "no-100% at 0.3s");
+  advance_clock(200);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor, "no-100% at 0.5s");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 50 + 50 * gTF.ease_in(0.4) }, 0.01,
+                 RunningOn.Compositor, "no-100% at 0.7s");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 50 + 50 * gTF.ease_in(0.8) }, 0.01,
+                 RunningOn.Compositor, "no-100% at 0.9s");
+  advance_clock(100);
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor, "no-100% at 1.0s");
+  advance_clock(100);
+  omta_is_approx("transform", { tx: 50 + 50 * gTF.ease_in(0.8) }, 0.01,
+                 RunningOn.Compositor, "no-100% at 1.1s");
+  advance_clock(300);
+  omta_is_approx("transform", { tx: 50 + 50 * gTF.ease_in(0.2) }, 0.01,
+                 RunningOn.Compositor, "no-100% at 1.4s");
+  advance_clock(300);
+  omta_is_approx("transform", { tx: 150 - 100 * gTF.ease_in(0.6) }, 0.01,
+                 RunningOn.Compositor, "no-100% at 1.7s");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 150 - 100 * gTF.ease_in(0.2) }, 0.01,
+                 RunningOn.Compositor, "no-100% at 1.9s");
+  advance_clock(100);
+  omta_is("transform", { tx: 150 }, RunningOn.Compositor, "no-100% at 2.0s");
+  done_div();
+
+  // 50px at 0%, 100px at 25%, 50px at 100%
+  new_div("transform: translate(50px); " +
+          "animation: kf3 ease-out 1s alternate infinite");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "no-0%-no-100% at 0.0s");
+  advance_clock(50);
+  omta_is_approx("transform", { tx: 50 + 50 * gTF.ease_out(0.2) }, 0.01,
+                 RunningOn.Compositor, "no-0%-no-100% at 0.05s");
+  advance_clock(100);
+  omta_is_approx("transform", { tx: 50 + 50 * gTF.ease_out(0.6) }, 0.01,
+                 RunningOn.Compositor, "no-0%-no-100% at 0.15s");
+  advance_clock(100);
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor,
+          "no-0%-no-100% at 0.25s");
+  advance_clock(300);
+  omta_is_approx("transform", { tx: 100 - 50 * gTF.ease_out(0.4) }, 0.01,
+                 RunningOn.Compositor, "no-0%-no-100% at 0.55s");
+  advance_clock(300);
+  omta_is_approx("transform", { tx: 100 - 50 * gTF.ease_out(0.8) }, 0.01,
+                 RunningOn.Compositor, "no-0%-no-100% at 0.85s");
+  advance_clock(150);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "no-0%-no-100% at 1.0s");
+  advance_clock(150);
+  omta_is_approx("transform", { tx: 100 - 50 * gTF.ease_out(0.8) }, 0.01,
+                 RunningOn.Compositor, "no-0%-no-100% at 1.15s");
+  advance_clock(450);
+  omta_is_approx("transform", { tx: 100 - 50 * gTF.ease_out(0.2) }, 0.01,
+                 RunningOn.Compositor, "no-0%-no-100% at 1.6s");
+  advance_clock(250);
+  omta_is_approx("transform", { tx: 50 + 50 * gTF.ease_out(0.6) }, 0.01,
+                 RunningOn.Compositor, "no-0%-no-100% at 1.85s");
+  advance_clock(100);
+  omta_is_approx("transform", { tx: 50 + 50 * gTF.ease_out(0.2) }, 0.01,
+                 RunningOn.Compositor, "no-0%-no-100% at 1.95s");
+  advance_clock(50);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "no-0%-no-100% at 2.0s");
+  done_div();
+
+  // Test that non-animatable properties are ignored.
+  // Simultaneously, test that the block is still honored, and that
+  // we still override the value when two consecutive keyframes have
+  // the same value.
+  new_div("animation: kf4 ease 10s");
+  await waitForPaintsFlushed();
+  var cs = window.getComputedStyle(gDiv);
+  is(cs.display, "block",
+     "non-animatable properties should be ignored (linear, 0s)");
+  omta_is("transform", { tx: 37 }, RunningOn.Compositor,
+          "animatable properties should still apply (linear, 0s)");
+  advance_clock(1000);
+  is(cs.display, "block",
+     "non-animatable properties should be ignored (linear, 1s)");
+  omta_is("transform", { tx: 37 }, RunningOn.Compositor,
+          "animatable properties should still apply (linear, 1s)");
+  done_div();
+  new_div("animation: kf4 step-start 10s");
+  await waitForPaintsFlushed();
+  cs = window.getComputedStyle(gDiv);
+  is(cs.display, "block",
+     "non-animatable properties should be ignored (step-start, 0s)");
+  omta_is("transform", { tx: 37 }, RunningOn.Compositor,
+          "animatable properties should still apply (step-start, 0s)");
+  advance_clock(1000);
+  is(cs.display, "block",
+     "non-animatable properties should be ignored (step-start, 1s)");
+  omta_is("transform", { tx: 37 }, RunningOn.Compositor,
+          "animatable properties should still apply (step-start, 1s)");
+  done_div();
+
+  // Test cascading of the keyframes within an @keyframes rule.
+  new_div("animation: kf_cascade1 linear 10s");
+  await waitForPaintsFlushed();
+  //    0%: 30px
+  //   50%: 20px
+  //   75%: 20px
+  //   85%: 30px
+  // 85.1%: 60px
+  //  100%: 70px
+  omta_is("transform", { tx: 30 }, RunningOn.Compositor, "kf_cascade1 at 0s");
+  advance_clock(2500);
+  omta_is("transform", { tx: 25 }, RunningOn.Compositor, "kf_cascade1 at 2.5s");
+  advance_clock(2500);
+  omta_is("transform", { tx: 20 }, RunningOn.Compositor, "kf_cascade1 at 5s");
+  advance_clock(2000);
+  omta_is("transform", { tx: 20 }, RunningOn.Compositor, "kf_cascade1 at 7s");
+  advance_clock(500);
+  omta_is("transform", { tx: 20 }, RunningOn.Compositor, "kf_cascade1 at 7.5s");
+  advance_clock(500);
+  omta_is("transform", { tx: 25 }, RunningOn.Compositor, "kf_cascade1 at 8s");
+  advance_clock(500);
+  omta_is("transform", { tx: 30 }, RunningOn.Compositor, "kf_cascade1 at 8.5s");
+  advance_clock(10);
+  // For some reason we get an error of 0.0003 for this test only
+  omta_is_approx("transform", { tx: 60 }, 0.001, RunningOn.Compositor,
+                 "kf_cascade1 at 8.51s");
+  advance_clock(745);
+  omta_is("transform", { tx: 65 }, RunningOn.Compositor,
+          "kf_cascade1 at 9.2505s");
+  done_div();
+
+  // Test cascading of the @keyframes rules themselves.
+  new_div("animation: kf_cascade2 linear 10s");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 1, RunningOn.MainThread,
+          "last @keyframes rule with transform should win");
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor,
+          "last @keyframes rule with transform should win");
+  done_div();
+});
+
+/*
+ * css3-animations:  3.1. Timing functions for keyframes
+ * http://dev.w3.org/csswg/css3-animations/#timing-functions-for-keyframes-
+ */
+
+addAsyncAnimTest(async function() {
+  new_div("animation: kf_tf1 ease-in 10s alternate infinite");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 20 }, RunningOn.Compositor,
+          "keyframe timing functions test at 0s (test needed for flush)");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 20 + 40 * gTF.ease(0.4) }, 0.01,
+                 RunningOn.Compositor, "keyframe timing functions test at 1s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 20 + 40 * gTF.ease(0.8) }, 0.01,
+                 RunningOn.Compositor, "keyframe timing functions test at 2s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 60 + 100 * gTF.ease_in(0.2) }, 0.01,
+                 RunningOn.Compositor, "keyframe timing functions test at 3s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 60 + 100 * gTF.ease_in(0.6) }, 0.01,
+                 RunningOn.Compositor, "keyframe timing functions test at 4s");
+  advance_clock(1000);
+  omta_is("transform", { tx: 160 }, RunningOn.Compositor,
+          "keyframe timing functions test at 5s");
+  advance_clock(1010); // avoid floating-point error
+  omta_is_approx("transform", { tx: 160 - 40 * step_end(5)(0.4) }, 0.01,
+                 RunningOn.Compositor, "keyframe timing functions test at 6s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 160 - 40 * step_end(5)(0.8) }, 0.01,
+                 RunningOn.Compositor, "keyframe timing functions test at 7s");
+  advance_clock(990);
+  omta_is_approx("transform", { tx: 120 - 100 * gTF.linear(0.2) }, 0.01,
+                 RunningOn.Compositor, "keyframe timing functions test at 8s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 120 - 100 * gTF.linear(0.6) }, 0.01,
+                 RunningOn.Compositor, "keyframe timing functions test at 9s");
+  advance_clock(1000);
+  omta_is("transform", { tx: 20 }, RunningOn.Compositor,
+          "keyframe timing functions test at 10s");
+  advance_clock(20000);
+  omta_is("transform", { tx: 20 }, RunningOn.Compositor,
+          "keyframe timing functions test at 30s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 120 - 100 * gTF.linear(0.6) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 31s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 120 - 100 * gTF.linear(0.2) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 32s");
+  advance_clock(990); // avoid floating-point error
+  omta_is_approx("transform", { tx: 160 - 40 * step_end(5)(0.8) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 33s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 160 - 40 * step_end(5)(0.4) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 34s");
+  advance_clock(1010);
+  omta_is("transform", { tx: 160 }, RunningOn.Compositor,
+          "keyframe timing functions test at 35s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 60 + 100 * gTF.ease_in(0.6) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 36s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 60 + 100 * gTF.ease_in(0.2) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 37s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 20 + 40 * gTF.ease(0.8) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 38s");
+  advance_clock(1000);
+  omta_is_approx("transform", { tx: 20 + 40 * gTF.ease(0.4) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 39s");
+  advance_clock(1000);
+  omta_is("transform", { tx: 20 }, RunningOn.Compositor,
+          "keyframe timing functions test at 40s");
+  done_div();
+
+  // spot-check the same thing without alternate
+  new_div("animation: kf_tf1 ease-in 10s infinite");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 20 }, RunningOn.Compositor,
+          "keyframe timing functions test at 0s (test needed for flush)");
+  advance_clock(11000);
+  omta_is_approx("transform", { tx: 20 + 40 * gTF.ease(0.4) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 11s");
+  advance_clock(3000);
+  omta_is_approx("transform", { tx: 60 + 100 * gTF.ease_in(0.6) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 14s");
+  advance_clock(2010); // avoid floating-point error
+  omta_is_approx("transform", { tx: 160 - 40 * step_end(5)(0.4) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 16s");
+  advance_clock(1990);
+  omta_is_approx("transform", { tx: 120 - 100 * gTF.linear(0.2) }, 0.01,
+                 RunningOn.Compositor,
+                 "keyframe timing functions test at 18s");
+  done_div();
+});
+
+/*
+ * css3-animations:  3.2. The 'animation-name' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-name-property-
+ */
+
+// animation-name is reasonably well-tested up in the tests for Section
+// 2, particularly the tests that "Test that animations continue running
+// when the animation name list is changed."
+
+// Test that 'animation-name: none' stops the animation, and setting
+// it again starts a new one.
+
+addAsyncAnimTest(async function() {
+  new_div("animation: anim2 ease-in-out 10s");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "after setting animation-name to anim2");
+  advance_clock(1000);
+  omta_is_approx("opacity", gTF.ease_in_out(0.1), 0.01, RunningOn.Compositor,
+                 "before changing animation-name to none");
+  gDiv.style.animationName = "none";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 1, RunningOn.MainThread,
+          "after changing animation-name to none");
+  advance_clock(1000);
+  omta_is("opacity", 1, RunningOn.MainThread,
+          "after changing animation-name to none plus 1s");
+  gDiv.style.animationName = "anim2";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "after changing animation-name to anim2");
+  advance_clock(1000);
+  omta_is_approx("opacity", gTF.ease_in_out(0.1), 0.01, RunningOn.Compositor,
+                 "at 1s in animation when animation-name no longer none again");
+  gDiv.style.animationName = "none";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 1, RunningOn.MainThread,
+          "after changing animation-name to none");
+  advance_clock(1000);
+  omta_is("opacity", 1, RunningOn.MainThread,
+          "after changing animation-name to none plus 1s");
+  done_div();
+});
+
+/*
+ * css3-animations:  3.3. The 'animation-duration' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-duration-property-
+ */
+
+// FIXME: test animation-duration of 0 (quite a bit, including interaction
+// with fill-mode, count, and reversing), once I know what the right
+// behavior is.
+
+/*
+ * css3-animations:  3.4. The 'animation-timing-function' Property
+ * http://dev.w3.org/csswg/css3-animations/#animation-timing-function_tag
+ */
+
+// tested in tests for section 3.1
+
+/*
+ * css3-animations:  3.5. The 'animation-iteration-count' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-iteration-count-property-
+ */
+addAsyncAnimTest(async function() {
+  new_div("animation: anim2 ease-in 10s 0.3 forwards");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "animation-iteration-count test 1 at 0s");
+  advance_clock(2000);
+  omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor,
+                 "animation-iteration-count test 1 at 2s");
+  advance_clock(900);
+  omta_is_approx("opacity", gTF.ease_in(0.29), 0.01, RunningOn.Compositor,
+                 "animation-iteration-count test 1 at 2.9s");
+  advance_clock(100);
+  // Animation has reached the end so allow it to be cleared from the compositor
+  await waitForPaints();
+  // For transform animations we can tell whether a transform on the compositor
+  // thread was set by animation or not since there is a special flag for it.
+  //
+  // For opacity animations, however, there is no such flag so we'll get an
+  // "OMTA" opacity even when it wasn't set by animation. When we pause an
+  // opacity animation we don't worry about where it is reported to be running
+  // (main thread or compositor) so long as the result is correct, hence we
+  // check for "either" below.
+  omta_is_approx("opacity", gTF.ease_in(0.3), 0.01, RunningOn.Either,
+                 "animation-iteration-count test 1 at 3s");
+  advance_clock(100);
+  omta_is_approx("opacity", gTF.ease_in(0.3), 0.01, RunningOn.Either,
+                 "animation-iteration-count test 1 at 3.1s");
+  advance_clock(5000);
+  omta_is_approx("opacity", gTF.ease_in(0.3), 0.01, RunningOn.Either,
+                 "animation-iteration-count test 1 at 8.1s");
+  done_div();
+
+  // The corresponding test in test_animations.html runs three animations in
+  // parallel but since we only have two properties that are OMTA-enabled at
+  // this time and no additive animation we split this test into two parts.
+  new_div("animation: anim2 ease-in 10s 0.3, " +
+          "anim4 ease-out 20s 1.2 alternate forwards");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "animation-iteration-count test 2 at 0s");
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          "animation-iteration-count test 3 at 0s");
+  advance_clock(2000);
+  omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor,
+                 "animation-iteration-count test 2 at 2s");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_out(0.1) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-iteration-count test 3 at 2s");
+  advance_clock(900);
+  omta_is_approx("opacity", gTF.ease_in(0.29), 0.01, RunningOn.Compositor,
+                 "animation-iteration-count test 2 at 2.9s");
+  advance_clock(200);
+  await waitForPaints();
+  omta_is("opacity", 1, RunningOn.Either,
+          "animation-iteration-count test 2 at 3.1s");
+  advance_clock(2000);
+  omta_is("opacity", 1, RunningOn.Either,
+          "animation-iteration-count test 2 at 5.1s");
+  advance_clock(14700);
+  omta_is_approx("transform", { ty: 100 * gTF.ease_out(0.99) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-iteration-count test 3 at 19.8s");
+  advance_clock(200);
+  omta_is("transform", { ty: 100 }, RunningOn.Compositor,
+          "animation-iteration-count test 3 at 20s");
+  advance_clock(200);
+  omta_is_approx("transform", { ty: 100 * gTF.ease_out(0.99) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-iteration-count test 3 at 20.2s");
+  advance_clock(3600);
+  omta_is_approx("transform", { ty: 100 * gTF.ease_out(0.81) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-iteration-count test 3 at 23.8s");
+  advance_clock(200);
+  omta_is_approx("transform", { ty: 100 * gTF.ease_out(0.8) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-iteration-count test 3 at 24s");
+  advance_clock(200);
+  await waitForPaints();
+  omta_is("opacity", 1, RunningOn.Either,
+          "animation-iteration-count test 2 at 25s");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_out(0.8) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-iteration-count test 3 at 25s");
+  done_div();
+
+  new_div("animation: anim4 ease-in-out 5s 1.6 forwards");
+  await waitForPaintsFlushed();
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          "animation-iteration-count test 4 at 0s");
+  advance_clock(2000);
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in_out(0.4) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-iteration-count test 4 at 2s");
+  advance_clock(2900);
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in_out(0.98) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-iteration-count test 4 at 4.9s");
+  advance_clock(200);
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in_out(0.02) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-iteration-count test 4 at 5.1s");
+  advance_clock(2800);
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in_out(0.58) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-iteration-count test 4 at 7.9s");
+  advance_clock(100);
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in_out(0.6) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-iteration-count test 4 at 8s");
+  advance_clock(100);
+  await waitForPaints();
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in_out(0.6) }, 0.01,
+                 RunningOn.Either,
+                 "animation-iteration-count test 4 at 8.1s");
+  advance_clock(16100);
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in_out(0.6) }, 0.01,
+                 RunningOn.Either,
+                 "animation-iteration-count test 4 at 25s");
+  done_div();
+});
+
+/*
+ * css3-animations:  3.6. The 'animation-direction' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-direction-property-
+ */
+
+// Tested in tests for sections 3.1 and 3.5.
+
+addAsyncAnimTest(async function() {
+  new_div("animation: anim2 ease-in 10s infinite");
+  gDiv.style.animationDirection = "normal";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "animation-direction test 1 (normal) at 0s");
+  gDiv.style.animationDirection = "reverse";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 1, RunningOn.Compositor,
+          "animation-direction test 1 (reverse) at 0s");
+  gDiv.style.animationDirection = "alternate";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "animation-direction test 1 (alternate) at 0s");
+  gDiv.style.animationDirection = "alternate-reverse";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 1, RunningOn.Compositor,
+          "animation-direction test 1 (alternate-reverse) at 0s");
+  advance_clock(2000);
+  gDiv.style.animationDirection = "normal";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (normal) at 2s");
+  gDiv.style.animationDirection = "reverse";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (reverse) at 2s");
+  gDiv.style.animationDirection = "alternate";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (alternate) at 2s");
+  gDiv.style.animationDirection = "alternate-reverse";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (alternate-reverse) at 2s");
+  advance_clock(5000);
+  gDiv.style.animationDirection = "normal";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.7), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (normal) at 7s");
+  gDiv.style.animationDirection = "reverse";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.3), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (reverse) at 7s");
+  gDiv.style.animationDirection = "alternate";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.7), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (alternate) at 7s");
+  gDiv.style.animationDirection = "alternate-reverse";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.3), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (alternate-reverse) at 7s");
+  advance_clock(5000);
+  gDiv.style.animationDirection = "normal";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (normal) at 12s");
+  gDiv.style.animationDirection = "reverse";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (reverse) at 12s");
+  gDiv.style.animationDirection = "alternate";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (alternate) at 12s");
+  gDiv.style.animationDirection = "alternate-reverse";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (alternate-reverse) at 12s");
+  advance_clock(10000);
+  gDiv.style.animationDirection = "normal";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (normal) at 22s");
+  gDiv.style.animationDirection = "reverse";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (reverse) at 22s");
+  gDiv.style.animationDirection = "alternate";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (alternate) at 22s");
+  gDiv.style.animationDirection = "alternate-reverse";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (alternate-reverse) at 22s");
+  advance_clock(30000);
+  gDiv.style.animationDirection = "normal";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (normal) at 52s");
+  gDiv.style.animationDirection = "reverse";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (reverse) at 52s");
+  gDiv.style.animationDirection = "alternate";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (alternate) at 52s");
+  gDiv.style.animationDirection = "alternate-reverse";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor,
+                 "animation-direction test 1 (alternate-reverse) at 52s");
+  done_div();
+});
+
+/*
+ * css3-animations:  3.7. The 'animation-play-state' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-
+ */
+
+addAsyncAnimTest(async function() {
+  // simple test with just one animation
+  new_div("");
+  gDiv.style.animationTimingFunction = "ease";
+  gDiv.style.animationName = "anim1";
+  gDiv.style.animationDuration = "1s";
+  gDiv.style.animationDirection = "alternate";
+  gDiv.style.animationIterationCount = "2";
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 0 }, RunningOn.Compositor,
+          "animation-play-state test 1, at 0s");
+  advance_clock(250);
+  omta_is_approx("transform", { tx: 80 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 1 at 250ms");
+  gDiv.style.animationPlayState = "paused";
+  await waitForPaintsFlushed();
+  omta_is_approx("transform", { tx: 80 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 1 at 250ms");
+  advance_clock(250);
+  omta_is_approx("transform", { tx: 80 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 1 still at 500ms");
+  gDiv.style.animationPlayState = "running";
+  await waitForPaintsFlushed();
+  omta_is_approx("transform", { tx: 80 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 1 still at 500ms");
+  advance_clock(500);
+  omta_is_approx("transform", { tx: 80 + 20 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 1 at 1000ms");
+  advance_clock(250);
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor,
+          "animation-play-state test 1 at 1250ms");
+  advance_clock(250);
+  omta_is_approx("transform", { tx: 80 + 20 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 1 at 1500ms");
+  gDiv.style.animationPlayState = "paused";
+  await waitForPaintsFlushed();
+  omta_is_approx("transform", { tx: 80 + 20 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 1 at 1500ms");
+  advance_clock(2000);
+  omta_is_approx("transform", { tx: 80 + 20 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 1 at 3500ms");
+  advance_clock(500);
+  omta_is_approx("transform", { tx: 80 + 20 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 1 at 4000ms");
+  gDiv.style.animationPlayState = "";
+  await waitForPaintsFlushed();
+  omta_is_approx("transform", { tx: 80 + 20 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 1 at 4000ms");
+  advance_clock(500);
+  omta_is_approx("transform", { tx: 80 * gTF.ease(0.5) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 1 at 4500ms");
+  advance_clock(250);
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 0 }, RunningOn.MainThread,
+          "animation-play-state test 1, at 4750ms");
+  advance_clock(250);
+  omta_is("transform", { tx: 0 }, RunningOn.MainThread,
+          "animation-play-state test 1, at 5000ms");
+  done_div();
+
+  // The corresponding test in test_animations.html tests various cases of
+  // pausing individual animations in a list of three different animations 
+  // but since there are only two OMTA properties we can animate
+  // independently this test is substantially simpler.
+  new_div("");
+  gDiv.style.animationTimingFunction = "ease-out, ease-in";
+  gDiv.style.animationName = "anim2, anim4";
+  gDiv.style.animationDuration = "1s, 2s";
+  gDiv.style.animationDirection = "alternate, normal";
+  gDiv.style.animationIterationCount = "4, 2";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "animation-play-state test 2, at 0s");
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          "animation-play-state test 3, at 0s");
+  advance_clock(250);
+  gDiv.style.animationPlayState = "paused, running"; // pause 1
+  await waitForPaintsFlushed();
+  // As noted with the tests for animation-iteration-count, for opacity
+  // animations we don't strictly check the finished animation is being animated
+  // on the main thread, but simply that it is producing the correct result.
+  omta_is_approx("opacity", gTF.ease_out(0.25), 0.01, RunningOn.MainThread,
+                 "animation-play-state test 2 at 250ms"); // paused
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.125) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 3 at 250ms");
+  advance_clock(250);
+  omta_is_approx("opacity", gTF.ease_out(0.25), 0.01, RunningOn.MainThread,
+                 "animation-play-state test 2 at 500ms"); // paused
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.25) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 3 at 500ms");
+  advance_clock(250);
+  gDiv.style.animationPlayState = "running, paused"; // unpause 1, pause 2
+  await waitForPaintsFlushed();
+  advance_clock(250);
+  omta_is_approx("opacity", gTF.ease_out(0.5), 0.01, RunningOn.Compositor,
+                 "animation-play-state test 2 at 1000ms");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 3 at 1000ms"); // paused
+  gDiv.style.animationPlayState = "paused"; // pause all
+  await waitForPaintsFlushed();
+  advance_clock(3000);
+  omta_is_approx("opacity", gTF.ease_out(0.5), 0.01, RunningOn.MainThread,
+                 "animation-play-state test 2 at 4000ms"); // paused
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 3 at 4000ms"); // paused
+  gDiv.style.animationPlayState = "running, paused"; // pause 2
+  await waitForPaintsFlushed();
+  advance_clock(850);
+  omta_is_approx("opacity", gTF.ease_out(0.65), 0.01, RunningOn.Compositor,
+                 "animation-play-state test 2 at 4850ms");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 3 at 4850ms");
+  advance_clock(300);
+  omta_is_approx("opacity", gTF.ease_out(0.35), 0.01, RunningOn.Compositor,
+                 "animation-play-state test 2 at 5150ms");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 3 at 5150ms");
+  advance_clock(2300);
+  omta_is_approx("opacity", gTF.ease_out(0.05), 0.01, RunningOn.Compositor,
+                 "animation-play-state test 2 at 7450ms");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 3 at 7450ms");
+  advance_clock(100);
+  // test 2 has finished so wait for it to be removed from the
+  // compositor (otherwise it will fill forwards)
+  await waitForPaints();
+  omta_is("opacity", 1, RunningOn.Either,
+          "animation-play-state test 2 at 7550ms");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01,
+                 RunningOn.MainThread,
+                 "animation-play-state test 3 at 7550ms");
+  gDiv.style.animationPlayState = "running"; // unpause 2
+  await waitForPaintsFlushed();
+  advance_clock(1000);
+  omta_is("opacity", 1, RunningOn.Either,
+          "animation-play-state test 2 at 7550ms");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.875) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 3 at 7550ms");
+  advance_clock(500);
+  omta_is("opacity", 1, RunningOn.Either,
+          "animation-play-state test 2 at 8050ms");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.125) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 3 at 8050ms");
+  advance_clock(1000);
+  omta_is("opacity", 1, RunningOn.Either,
+          "animation-play-state test 2 at 9050ms");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.625) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 3 at 9050ms");
+  advance_clock(500);
+  omta_is("opacity", 1, RunningOn.Either,
+          "animation-play-state test 2 at 9550ms");
+  omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.875) }, 0.01,
+                 RunningOn.Compositor,
+                 "animation-play-state test 3 at 9550ms");
+  advance_clock(500);
+  await waitForPaints();
+  omta_is("opacity", 1, RunningOn.Either,
+          "animation-play-state test 2 at 10050ms");
+  omta_is("transform", { ty: 0 }, RunningOn.MainThread,
+          "animation-play-state test 3 at 10050ms");
+  done_div();
+});
+
+/*
+ * css3-animations:  3.8. The 'animation-delay' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-delay-property-
+ */
+
+addAsyncAnimTest(async function() {
+  // test positive delay
+  new_div("animation: anim2 1s 0.5s ease-out");
+  await waitForPaintsFlushed();
+  // NOTE: getOMTAStyle() can't detect the animation is running on the
+  // compositor or not during the delay phase, since no opacity style is
+  // applied during the delay phase.
+  omta_is("opacity", 1, RunningOn.Either, "positive delay test at 0ms");
+  advance_clock(400);
+  omta_is("opacity", 1, RunningOn.Either, "positive delay test at 400ms");
+  advance_clock(100);
+  await waitForPaints();
+  omta_is("opacity", 0, RunningOn.Compositor, "positive delay test at 500ms");
+  advance_clock(100);
+  omta_is_approx("opacity", gTF.ease_out(0.1), 0.01, RunningOn.Compositor,
+                 "positive delay test at 500ms");
+  done_div();
+
+  // test dynamic changes to delay (i.e., that we preserve the start time
+  // that's before the delay)
+  new_div("animation: anim2 1s 0.5s ease-out both");
+  await waitForPaintsFlushed();
+  // NOTE: As noted above, getOMTAStyle() can't detect the animation is running
+  // on the compositor during the delay phase.
+  omta_is("opacity", 0, RunningOn.Either, "dynamic delay delay test at 0ms");
+  advance_clock(400);
+  omta_is("opacity", 0, RunningOn.Either,
+          "dynamic delay delay test at 400ms (1)");
+  gDiv.style.animationDelay = "0.2s";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_out(0.2), 0.01, RunningOn.Compositor,
+                 "dynamic delay delay test at 400ms (2)");
+  gDiv.style.animationDelay = "0.6s";
+  await waitForPaintsFlushed();
+  advance_clock(200);
+  omta_is("opacity", 0, RunningOn.Either, "dynamic delay delay test at 600ms");
+  advance_clock(200);
+  await waitForPaints();
+  omta_is_approx("opacity", gTF.ease_out(0.2), 0.01, RunningOn.Compositor,
+                 "dynamic delay delay test at 800ms");
+  advance_clock(1000);
+  await waitForPaints();
+  omta_is("opacity", 1, RunningOn.Either,
+          "dynamic delay delay test at 1800ms (1)");
+  gDiv.style.animationDelay = "1.5s";
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_out(0.3), 0.01, RunningOn.Compositor,
+                 "dynamic delay delay test at 1800ms (2)");
+  gDiv.style.animationDelay = "2s";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Either,
+          "dynamic delay delay test at 1800ms (3)");
+  done_div();
+
+  // test delay and play-state interaction
+  new_div("animation: anim2 1s 0.5s ease-out");
+  await waitForPaintsFlushed();
+  // NOTE: As noted above, getOMTAStyle() can't detect the animation is running
+  // on the compositor during the delay phase.
+  omta_is("opacity", 1, RunningOn.Either,
+          "delay and play-state delay test at 0ms");
+  advance_clock(400);
+  omta_is("opacity", 1, RunningOn.Either,
+          "delay and play-state delay test at 400ms");
+  gDiv.style.animationPlayState = "paused";
+  await waitForPaintsFlushed();
+  advance_clock(100);
+  omta_is("opacity", 1, RunningOn.MainThread, // paused
+          "delay and play-state delay test at 500ms");
+  advance_clock(500);
+  omta_is("opacity", 1, RunningOn.MainThread, // paused
+          "delay and play-state delay test at 1000ms");
+  gDiv.style.animationPlayState = "running";
+  await waitForPaintsFlushed();
+  advance_clock(100);
+  await waitForPaints();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "delay and play-state delay test at 1100ms");
+  advance_clock(100);
+  omta_is_approx("opacity", gTF.ease_out(0.1), 0.01, RunningOn.Compositor,
+                 "delay and play-state delay test at 1200ms");
+  gDiv.style.animationPlayState = "paused";
+  await waitForPaintsFlushed();
+  advance_clock(100);
+  omta_is_approx("opacity", gTF.ease_out(0.1), 0.01, RunningOn.Either,
+                 "delay and play-state delay test at 1300ms");
+  done_div();
+
+  // test negative delay and implicit starting values
+  new_div("transform: translate(1000px)");
+  await waitForPaintsFlushed();
+  advance_clock(300);
+  gDiv.style.transform = "translate(100px)";
+  gDiv.style.animation = "kf1 1s -0.1s ease-in";
+  await waitForPaintsFlushed();
+  omta_is_approx("transform", { tx: 100 - 50 * gTF.ease_in(0.2) },
+                 0.01, RunningOn.Compositor,
+                 "delay and implicit starting values test");
+  done_div();
+
+  // test large negative delay that causes the animation to start
+  // in the fourth iteration
+  new_div("animation: anim2 1s -3.6s ease-in 5 alternate forwards");
+  listen();
+  await waitForPaintsFlushed();
+  omta_is_approx("opacity", gTF.ease_in(0.4), 0.01, RunningOn.Compositor,
+                 "large negative delay test at 0ms");
+  check_events([{ type: 'animationstart', target: gDiv,
+                  animationName: 'anim2', elapsedTime: 3.6,
+                  pseudoElement: "" }],
+               "right after start in large negative delay test");
+  advance_clock(380);
+  omta_is_approx("opacity", gTF.ease_in(0.02), 0.01, RunningOn.Compositor,
+                 "large negative delay test at 380ms");
+  check_events([]);
+  advance_clock(20);
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "large negative delay test at 400ms");
+  check_events([{ type: 'animationiteration', target: gDiv,
+                  animationName: 'anim2', elapsedTime: 4.0,
+                  pseudoElement: "" }],
+               "right after start in large negative delay test");
+  advance_clock(800);
+  omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor,
+                 "large negative delay test at 1200ms");
+  check_events([]);
+  advance_clock(200);
+  omta_is("opacity", 1, RunningOn.Either,
+          "large negative delay test at 1400ms");
+  check_events([{ type: 'animationend', target: gDiv,
+                  animationName: 'anim2', elapsedTime: 5.0,
+                  pseudoElement: "" }],
+               "right after start in large negative delay test");
+  done_div();
+});
+
+/*
+ * css3-animations:  3.9. The 'animation-fill-mode' Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
+ */
+
+// animation-fill-mode is tested in the tests for section (2).
+
+/*
+ * css3-animations:  3.10. The 'animation' Shorthand Property
+ * http://dev.w3.org/csswg/css3-animations/#the-animation-shorthand-property-
+ */
+
+/**
+ * Basic tests of animations on pseudo-elements
+ */
+addAsyncAnimTest(async function() {
+  new_div("");
+  listen();
+  gDiv.id = "withbefore";
+  await waitForPaintsFlushed();
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          ":before test at 0ms", "::before");
+  advance_clock(400);
+  omta_is("transform", { ty: 40 }, RunningOn.Compositor,
+          ":before test at 400ms", "::before");
+  advance_clock(800);
+  omta_is("transform", { ty: 80 }, RunningOn.Compositor,
+          ":before test at 1200ms", "::before");
+  omta_is("transform", { ty: 0 }, RunningOn.MainThread,
+          ":before animation should not affect element");
+  advance_clock(800);
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          ":before test at 2000ms", "::before");
+  advance_clock(300);
+  omta_is("transform", { ty: 30 }, RunningOn.Compositor,
+          ":before test at 2300ms", "::before");
+  advance_clock(700);
+  check_events([ { type: "animationstart", animationName: "anim4",
+                   elapsedTime: 0, pseudoElement: "::before" },
+                 { type: "animationiteration", animationName: "anim4",
+                   elapsedTime: 1, pseudoElement: "::before" },
+                 { type: "animationiteration", animationName: "anim4",
+                   elapsedTime: 2, pseudoElement: "::before" },
+                 { type: "animationend", animationName: "anim4",
+                   elapsedTime: 3, pseudoElement: "::before" }]);
+  done_div();
+
+  new_div("");
+  listen();
+  gDiv.id = "withafter";
+  await waitForPaintsFlushed();
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          ":after test at 0ms", "::after");
+  advance_clock(400);
+  omta_is("transform", { ty: 40 }, RunningOn.Compositor,
+          ":after test at 400ms", "::after");
+  advance_clock(800);
+  omta_is("transform", { ty: 80 }, RunningOn.Compositor,
+          ":after test at 1200ms", "::after");
+  omta_is("transform", { ty: 0 }, RunningOn.MainThread,
+          ":before animation should not affect element");
+  advance_clock(800);
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          ":after test at 2000ms", "::after");
+  advance_clock(300);
+  omta_is("transform", { ty: 30 }, RunningOn.Compositor,
+          ":after test at 2300ms", "::after");
+  advance_clock(700);
+  check_events([ { type: "animationstart", animationName: "anim4",
+                   elapsedTime: 0, pseudoElement: "::after" },
+                 { type: "animationiteration", animationName: "anim4",
+                   elapsedTime: 1, pseudoElement: "::after" },
+                 { type: "animationiteration", animationName: "anim4",
+                   elapsedTime: 2, pseudoElement: "::after" },
+                 { type: "animationend", animationName: "anim4",
+                   elapsedTime: 3, pseudoElement: "::after" }]);
+  done_div();
+});
+
+/**
+ * Test handling of properties that are present in only some of the
+ * keyframes.
+ */
+addAsyncAnimTest(async function() {
+  new_div("animation: multiprop 1s ease-in-out alternate infinite");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 10 }, RunningOn.Compositor,
+          "multiprop transform at 0ms");
+  omta_is("opacity", 0.3, RunningOn.Compositor, "multiprop opacity at 0ms");
+  advance_clock(100);
+  omta_is_approx("transform", { tx: 10 + 30 * gTF.ease(0.2) }, 0.01,
+                 RunningOn.Compositor, "multiprop transform at 100ms");
+  omta_is_approx("opacity", 0.3 + 0.2 * gTF.ease(0.4), 0.01,
+                 RunningOn.Compositor, "multiprop opacity at 100ms");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 10 + 30 * gTF.ease(0.6) }, 0.01,
+                 RunningOn.Compositor, "multiprop transform at 300ms");
+  omta_is_approx("opacity", 0.5 + 0.1 * gTF.ease_out(0.1), 0.01,
+                 RunningOn.Compositor, "multiprop opacity at 300ms");
+  advance_clock(300);
+  omta_is_approx("transform", { tx: 40 + 40 * gTF.ease_in_out(0.4) }, 0.01,
+                 RunningOn.Compositor, "multiprop transform at 600ms");
+  omta_is_approx("opacity", 0.5 + 0.1 * gTF.ease_out(0.7), 0.01,
+                 RunningOn.Compositor, "multiprop opacity at 600ms");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 80 - 80 * gTF.ease_in(0.2) }, 0.01,
+                 RunningOn.Compositor, "multiprop transform at 800ms");
+  omta_is_approx("opacity", 0.6 + 0.4 * gTF.ease_in(0.2), 0.01,
+                 RunningOn.Compositor, "multiprop opacity at 800ms");
+  advance_clock(400);
+  omta_is_approx("transform", { tx: 80 - 80 * gTF.ease_in(0.2) }, 0.01,
+                 RunningOn.Compositor, "multiprop transform at 1200ms");
+  omta_is_approx("opacity", 0.6 + 0.4 * gTF.ease_in(0.2), 0.01,
+                 RunningOn.Compositor, "multiprop opacity at 1200ms");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 40 + 40 * gTF.ease_in_out(0.4) }, 0.01,
+                 RunningOn.Compositor, "multiprop transform at 1400ms");
+  omta_is_approx("opacity", 0.5 + 0.1 * gTF.ease_out(0.7), 0.01,
+                 RunningOn.Compositor, "multiprop opacity at 1400ms");
+  advance_clock(300);
+  omta_is_approx("transform", { tx: 10 + 30 * gTF.ease(0.6) }, 0.01,
+                 RunningOn.Compositor, "multiprop transform at 1700ms");
+  omta_is_approx("opacity", 0.5 + 0.1 * gTF.ease_out(0.1), 0.01,
+                 RunningOn.Compositor, "multiprop opacity at 1700ms");
+  advance_clock(200);
+  omta_is_approx("transform", { tx: 10 + 30 * gTF.ease(0.2) }, 0.01,
+                 RunningOn.Compositor, "multiprop transform at 1900ms");
+  omta_is_approx("opacity", 0.3 + 0.2 * gTF.ease(0.4), 0.01,
+                 RunningOn.Compositor, "multiprop opacity at 1900ms");
+  done_div();
+});
+
+// Test for https://bugzilla.mozilla.org/show_bug.cgi?id=651456 -- make
+// sure that refreshing of animations doesn't break when we get two
+// refreshes with the same timestamp.
+addAsyncAnimTest(async function() {
+  new_div("animation: anim2 1s linear");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor, "bug 651456 at 0ms");
+  advance_clock(100);
+  omta_is("opacity", 0.1, RunningOn.Compositor, "bug 651456 at 100ms (1)");
+  advance_clock(0); // still forces a refresh
+  omta_is("opacity", 0.1, RunningOn.Compositor, "bug 651456 at 100ms (2)");
+  advance_clock(100);
+  omta_is("opacity", 0.2, RunningOn.Compositor, "bug 651456 at 200ms");
+  done_div();
+});
+
+// test_animations.html includes a test that UA !important rules override
+// animations. Unfortunately, there do not appear to be any UA !important rules
+// for opacity or transform except for one targetting a pseudo-element and
+// pseudo elements are not animated on the compositor. As a result we cannot
+// currently test this behavior.
+
+// Test that author !important rules override animations, but
+// that animations override regular author rules.
+addAsyncAnimTest(async function() {
+  new_div("animation: always_fifty 1s linear infinite; " +
+          "transform: translate(200px)");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "animations override regular author rules");
+  done_div();
+  new_div("animation: always_fifty 1s linear infinite; " +
+          "transform: translate(200px) ! important;");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 200 }, RunningOn.MainThread,
+          "important author rules override animations");
+  done_div();
+});
+
+// Test interaction of animations and restyling (Bug 686656).
+// This test depends on kf3 getting its 0% and 100% values from the
+// rules below it in the cascade; we're checking that the animation
+// isn't rebuilt when the restyles happen.
+addAsyncAnimTest(async function() {
+  new_div("animation: kf3 1s linear forwards");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 0 }, RunningOn.Compositor,
+          "bug 686656 test 1 at 0ms");
+  advance_clock(250);
+  gDisplay.style.color = "blue";
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor,
+          "bug 686656 test 1 at 250ms");
+  advance_clock(375);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "bug 686656 test 1 at 625ms");
+  advance_clock(375);
+  await waitForPaints();
+  omta_is("transform", { tx: 0 }, RunningOn.MainThread,
+          "bug 686656 test 1 at 1000ms");
+  done_div();
+  gDisplay.style.color = "";
+});
+
+// Test interaction of animations and restyling (Bug 686656),
+// with reframing.
+// This test depends on kf3 getting its 0% and 100% values from the
+// rules below it in the cascade; we're checking that the animation
+// isn't rebuilt when the restyles happen.
+addAsyncAnimTest(async function() {
+  new_div("animation: kf3 1s linear forwards");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 0 }, RunningOn.Compositor,
+          "bug 686656 test 2 at 0ms");
+  advance_clock(250);
+  gDisplay.style.overflow = "scroll";
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor,
+          "bug 686656 test 2 at 250ms");
+  advance_clock(375);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "bug 686656 test 2 at 625ms");
+  advance_clock(375);
+  await waitForPaints();
+  omta_is("transform", { tx: 0 }, RunningOn.MainThread,
+          "bug 686656 test 2 at 1000ms");
+  done_div();
+  gDisplay.style.overflow = "";
+});
+
+// Test that cascading between keyframes rules is per-property rather
+// than per-rule (bug ), and that the timing function isn't taken from a
+// rule that's skipped.  (Bug 738003)
+addAsyncAnimTest(async function() {
+  new_div("animation: cascade 1s linear forwards; position: relative");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 0 }, RunningOn.Compositor,
+          "cascade test (transform) at 0ms");
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "cascade test (opacity) at 0ms");
+  advance_clock(125);
+  omta_is("transform", { tx: 0 }, RunningOn.Compositor,
+          "cascade test (transform) at 125ms");
+  omta_is("opacity", 0.5, RunningOn.Compositor,
+          "cascade test (opacity) at 125ms");
+  advance_clock(125);
+  omta_is("transform", { tx: 0 }, RunningOn.Compositor,
+          "cascade test (transform) at 250ms");
+  omta_is("opacity", 1, RunningOn.Compositor,
+          "cascade test (opacity) at 250ms");
+  advance_clock(125);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "cascade test (transform) at 375ms");
+  omta_is("opacity", 1, RunningOn.Compositor,
+          "cascade test (opacity) at 375ms");
+  advance_clock(125);
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor,
+          "cascade test (transform) at 500ms");
+  omta_is("opacity", 1, RunningOn.Compositor,
+          "cascade test (opacity) at 500ms");
+  advance_clock(125);
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor,
+          "cascade test (transform) at 625ms");
+  omta_is("opacity", 0.5, RunningOn.Compositor,
+          "cascade test (opacity) at 625ms");
+  advance_clock(125);
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor,
+          "cascade test (transform) at 750ms");
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "cascade test (opacity) at 750ms");
+  advance_clock(125);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "cascade test (transform) at 875ms");
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "cascade test (opacity) at 875ms");
+  advance_clock(125);
+  await waitForPaints();
+  omta_is("transform", { tx: 0 }, RunningOn.MainThread,
+          "cascade test (transform) at 1000ms");
+  omta_is("opacity", 0, RunningOn.Either,
+          "cascade test (opacity) at 1000ms");
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  new_div("animation: cascade2 8s linear forwards");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 0 }, RunningOn.Compositor, "cascade2 test at 0s");
+  advance_clock(1000);
+  omta_is("transform", { tx: 25 }, RunningOn.Compositor, "cascade2 test at 1s");
+  advance_clock(1000);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor, "cascade2 test at 2s");
+  advance_clock(1000);
+  omta_is("transform", { tx: 25 }, RunningOn.Compositor, "cascade2 test at 3s");
+  advance_clock(1000);
+  omta_is("transform", { tx: 0 }, RunningOn.Compositor, "cascade2 test at 4s");
+  advance_clock(3000);
+  omta_is("transform", { tx: 75 }, RunningOn.Compositor, "cascade2 test at 7s");
+  advance_clock(1000);
+  await waitForPaints();
+  omta_is("transform", { tx: 100 }, RunningOn.MainThread,
+          "cascade2 test at 8s");
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  new_div("animation: primitives1 2s linear forwards");
+  await waitForPaintsFlushed();
+  omta_is("transform", { }, RunningOn.Compositor, "primitives1 at 0s");
+  advance_clock(1000);
+  omta_is("transform", [ -0.707107, 0.707107, -0.707107, -0.707107, 0, 0 ],
+          RunningOn.Compositor, "primitives1 at 1s");
+  advance_clock(1000);
+  await waitForPaints();
+  omta_is("transform", [ 0, -1, 1, 0, 0, 0 ], RunningOn.MainThread,
+          "primitives1 at 0s");
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  new_div("animation: important1 1s linear forwards");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0.5, RunningOn.Compositor, "important1 test at 0s");
+  advance_clock(500);
+  omta_is("opacity", 0.65, RunningOn.Compositor, "important1 test at 0.5s");
+  advance_clock(500);
+  await waitForPaints();
+  omta_is("opacity", 0.8, RunningOn.Either, "important1 test at 1s");
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  new_div("animation: important2 1s linear forwards");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0.5, RunningOn.Compositor,
+          "important2 (opacity) test at 0s");
+  omta_is("transform", { tx: 100 }, RunningOn.Compositor,
+          "important2 (transform) test at 0s");
+  advance_clock(1000);
+  await waitForPaints();
+  omta_is("opacity", 1, RunningOn.Either,
+          "important2 (opacity) test at 1s");
+  omta_is("transform", { tx: 50 }, RunningOn.MainThread,
+          "important2 (transform) test at 1s");
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  // Test that it's the length of the 'animation-name' list that's used to
+  // start animations.
+  // note: anim2 animates opacity from 0 to 1
+  // note: anim4 animates transform's y translation component from 0 to 100px
+  new_div("animation-name: anim2, anim4; " +
+          "animation-duration: 1s; " +
+          "animation-timing-function: linear; " +
+          "animation-delay: -250ms, -250ms, -750ms, -500ms;");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0.25, RunningOn.Compositor,
+          "animation-name list length is the length that matters");
+  omta_is("transform", { ty: 25 }, RunningOn.Compositor,
+          "animation-name list length is the length that matters");
+  done_div();
+  new_div("animation-name: anim2, anim4, anim2; " +
+          "animation-duration: 1s; " +
+          "animation-timing-function: linear; " +
+          "animation-delay: -250ms, -250ms, -750ms, -500ms;");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0.75, RunningOn.Compositor,
+          "animation-name list length is the length that matters, " +
+          "and the last occurrence of a name wins");
+  omta_is("transform", { ty: 25 }, RunningOn.Compositor,
+          "animation-name list length is the length that matters");
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  var dyn_sheet_elt = document.createElement("style");
+  document.head.appendChild(dyn_sheet_elt);
+  var dyn_sheet = dyn_sheet_elt.sheet;
+  dyn_sheet.insertRule(
+    "@keyframes dyn1 { from { transform: translate(0px) } " +
+    "50% { transform: translate(50px) } " +
+    "to { transform: translate(100px) } }", 0);
+  dyn_sheet.insertRule(
+    "@keyframes dyn2 { from { transform: translate(100px) } " +
+    "to { transform: translate(200px) } }", 1);
+  var dyn1 = dyn_sheet.cssRules[0];
+  var dyn2 = dyn_sheet.cssRules[1];
+  new_div("animation: dyn1 1s linear");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 0 }, RunningOn.Compositor,
+          "dynamic rule change test, initial state");
+  advance_clock(250);
+  omta_is("transform", { tx: 25 }, RunningOn.Compositor,
+          "dynamic rule change test, 250ms");
+  dyn2.name = "dyn1";
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 125 }, RunningOn.Compositor,
+          "dynamic rule change test, change in @keyframes name applies");
+  dyn2.appendRule("50% { transform: translate(0px) }");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "dynamic rule change test, @keyframes appendRule");
+  // currently 0% { transform: translate(100px) }
+  var dyn2_kf1 = dyn2.cssRules[0];
+  dyn2_kf1.style.transform = "translate(-100px)";
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: -50 }, RunningOn.Compositor,
+          "dynamic rule change test, keyframe style set");
+  dyn2.name = "dyn2";
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 25 }, RunningOn.Compositor,
+          "dynamic rule change test, " +
+          "change in @keyframes name applies (second time)");
+  // currently 50% { transform: translate(50px) }
+  var dyn1_kf2 = dyn1.cssRules[1];
+  dyn1_kf2.keyText = "25%";
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "dynamic rule change test, change in keyframe keyText");
+  dyn1.deleteRule("25%");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 25 }, RunningOn.Compositor,
+          "dynamic rule change test, @keyframes deleteRule");
+  done_div();
+  dyn_sheet_elt.remove();
+  dyn_sheet_elt = null;
+  dyn_sheet = null;
+});
+
+/*
+ * Bug 1004361 - CSS animations with short duration sometimes don't dispatch
+ * a start event
+ */
+addAsyncAnimTest(async function() {
+  new_div("animation: anim2 1s 0.1s");
+  listen();
+  await waitForPaintsFlushed();
+  advance_clock(1200); // Skip past end of animation's entire active duration
+  check_events([{ type: 'animationstart', target: gDiv,
+                  animationName: 'anim2', elapsedTime: 0,
+                  pseudoElement: "" },
+                { type: 'animationend', target: gDiv,
+                  animationName: 'anim2', elapsedTime: 1,
+                  pseudoElement: "" }],
+               "events after skipping over animation interval");
+  done_div();
+});
+
+/*
+ * Bug 1007513 - AnimationEvent.elapsedTime should be animation time
+ *
+ * There is no OMTA-version of this test since it is specific to the
+ * contents of animation events which are dispatched on the main thread.
+ *
+ * We *do* provide an OMTA-version of some tests regarding the *dispatch* of
+ * events to catch possible regressions if in future event dispatch is tied
+ * to animation throttling.
+ */
+
+/*
+ * Bug 1004365 - zero-duration animations
+ */
+
+addAsyncAnimTest(async function() {
+  new_div("transform: translate(0, 200px); animation: anim4 0s 1s both");
+  listen();
+  await waitForPaintsFlushed();
+  advance_clock(0);
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          "transform during backwards fill of zero-duration animation");
+  advance_clock(2000); // Skip over animation
+  await waitForPaints();
+  omta_is("transform", { ty: 100 }, RunningOn.MainThread,
+          "transform during backwards fill of zero-duration animation");
+  check_events([{ type: 'animationstart', target: gDiv,
+                  animationName: 'anim4', elapsedTime: 0,
+                  pseudoElement: "" },
+                { type: 'animationend', target: gDiv,
+                  animationName: 'anim4', elapsedTime: 0,
+                  pseudoElement: "" }],
+               "events after skipping over zero-duration animation");
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  new_div("transform: translate(0, 200px); animation: anim4 0s 1s both");
+  listen();
+  await waitForPaintsFlushed();
+  advance_clock(0);
+  // Seek to exactly the point where the animation starts and stops
+  advance_clock(1000);
+  await waitForPaints();
+  omta_is("transform", { ty: 100 }, RunningOn.MainThread,
+          "transform during backwards fill of zero-duration animation");
+  check_events([{ type: 'animationstart', target: gDiv,
+                  animationName: 'anim4', elapsedTime: 0,
+                  pseudoElement: "" },
+                { type: 'animationend', target: gDiv,
+                  animationName: 'anim4', elapsedTime: 0,
+                  pseudoElement: "" }],
+               "events after seeking to end of zero-duration animation");
+  // Check no further events are dispatched
+  advance_clock(0);
+  advance_clock(100);
+  check_events([]);
+  done_div();
+});
+
+// We don't need to include all the animation-direction related tests
+// found in test_animations.html. We have already asserted above that
+// these zero-length animations do in fact run on the main thread and
+// we have checked that they dispatch events correctly.
+// The actual calculation of values on the main thread is covered by
+// test_animations.html
+
+// We do however still want to test with an infinite repeat count and zero
+// duration to ensure this does not confuse the screening of OMTA animations.
+addAsyncAnimTest(async function() {
+  new_div("transform: translate(0, 200px); " +
+          "animation: anim4 0s 1s both infinite");
+  listen();
+  await waitForPaintsFlushed();
+  advance_clock(0);
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          "transform during backwards fill of infinitely repeating " +
+          "zero-duration animation");
+  advance_clock(2000);
+  await waitForPaints();
+  omta_is("transform", { ty: 100 }, RunningOn.MainThread,
+          "transform during forwards fill of infinitely repeating " +
+          "zero-duration animation");
+  check_events([{ type: 'animationstart', target: gDiv,
+                  animationName: 'anim4', elapsedTime: 0,
+                  pseudoElement: "" },
+                { type: 'animationend', target: gDiv,
+                  animationName: 'anim4', elapsedTime: 0,
+                  pseudoElement: "" }],
+               "events after seeking to end of infinitely repeating " +
+               "zero-duration animation");
+  done_div();
+});
+
+// Test with negative delay
+addAsyncAnimTest(async function() {
+  new_div("transform: translate(0, 200px); " +
+          "animation: anim4 0s -1s both reverse 12.7 linear");
+  listen();
+  await waitForPaintsFlushed();
+  advance_clock(0);
+  omta_is("transform", { ty: 30 }, RunningOn.MainThread,
+          "transform during forwards fill of reversed and repeated " +
+          "zero-duration animation with negative delay");
+  check_events([{ type: 'animationstart', target: gDiv,
+                  animationName: 'anim4', elapsedTime: 0,
+                  pseudoElement: "" },
+                { type: 'animationend', target: gDiv,
+                  animationName: 'anim4', elapsedTime: 0,
+                  pseudoElement: "" }],
+               "events after skipping over zero-duration animation " +
+               "with negative delay");
+  done_div();
+});
+
+/*
+ * Bug 1004377 - Animations with empty keyframes rule
+ */
+
+addAsyncAnimTest(async function() {
+  new_div("margin-right: 200px; animation: empty 2s 1s both");
+  listen();
+  advance_clock(0);
+  await waitForPaintsFlushed();
+  check_events([], "events during delay");
+  advance_clock(2000); // Skip to middle of animation
+  gDiv.clientTop; // Trigger events
+  check_events([{ type: 'animationstart', target: gDiv,
+                  animationName: 'empty', elapsedTime: 0,
+                  pseudoElement: "" }],
+               "events during middle of animation with empty keyframes rule");
+  advance_clock(1000); // Skip to end of animation
+  gDiv.clientTop; // Trigger events
+  check_events([{ type: 'animationend', target: gDiv,
+                  animationName: 'empty', elapsedTime: 2,
+                  pseudoElement: "" }],
+               "events at end of animation with empty keyframes rule");
+  done_div();
+});
+
+// Test with a zero-duration animation and empty @keyframes rule
+addAsyncAnimTest(async function() {
+  new_div("margin-right: 200px; animation: empty 0s 1s both");
+  listen();
+  await waitForPaintsFlushed();
+  advance_clock(1000);
+  gDiv.clientTop; // Trigger events
+  check_events([{ type: 'animationstart', target: gDiv,
+                  animationName: 'empty', elapsedTime: 0,
+                  pseudoElement: "" },
+                { type: 'animationend', target: gDiv,
+                  animationName: 'empty', elapsedTime: 0,
+                  pseudoElement: "" }],
+               "events at end of zero-duration animation with " +
+               "empty keyframes rule");
+  done_div();
+});
+
+// Test with a keyframes rule that becomes empty
+addAsyncAnimTest(async function() {
+  new_div("animation: nearlyempty 1s both linear");
+  await waitForPaintsFlushed();
+  advance_clock(500);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "Animation is animating on compositor");
+
+  // Update keyframes rule and check the result gets removed
+  listen();
+  findKeyframesRule("nearlyempty").deleteRule("to");
+  await waitForPaintsFlushed();
+  omta_is("transform", { }, RunningOn.MainThread,
+          "Animation with (now) empty keyframes rule is cleared " +
+          "from compositor");
+
+  // Check we still dispatch the end event however
+  advance_clock(500);
+  gDiv.clientTop; // Trigger events
+  check_events([{ type: 'animationend', target: gDiv,
+                  animationName: 'nearlyempty', elapsedTime: 1,
+                  pseudoElement: "" }],
+               "events at end of animation with newly " +
+               "empty keyframes rule");
+
+  done_div();
+});
+
+// Test when we update to point to an empty animation
+addAsyncAnimTest(async function() {
+  new_div("animation: always_fifty 1s both linear");
+  await waitForPaintsFlushed();
+  advance_clock(500);
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "Animation is animating on compositor");
+
+  // Update animation name
+  listen();
+  gDiv.style.animationName = "empty";
+  await waitForPaintsFlushed();
+  omta_is("transform", { }, RunningOn.MainThread,
+          "Animation updated to use empty keyframes rule is cleared " +
+          "from compositor");
+
+  // Check events
+  advance_clock(500);
+  gDiv.clientTop; // Trigger events
+  check_events([{ type: 'animationstart', target: gDiv,
+                  animationName: 'empty', elapsedTime: 0,
+                  pseudoElement: "" }],
+               "events at start of animation updated to use " +
+               "empty keyframes rule");
+
+  done_div();
+});
+
+// Bug 996796 patch 12 - test for correct visited styles during
+// animation-only style flush.
+addAsyncAnimTest(async function() {
+  if (AppConstants.platform === "android") {
+    todo(false, "no global history on GeckoView; can't run test");
+    return;
+  }
+
+  var div1 = document.createElement("div");
+  div1.classList.add("target");
+  div1.style.height = "10px";
+  div1.style.animation = "anim2 linear 1s";
+
+  const topLocation =
+    await SpecialPowers.spawnChrome([], () => browsingContext.top.currentURI.spec);
+
+  var visitedLink = document.createElement("a");
+  visitedLink.setAttribute("href", topLocation);
+  visitedLink.classList.add("visitedLink");
+  visitedLink.classList.add("target");
+  visitedLink.style.display = "block";
+  visitedLink.style.height = "10px";
+  visitedLink.style.animation = "anim2 linear 1s";
+
+  var refVisitedLink = document.createElement("a");
+  refVisitedLink.setAttribute("href", topLocation);
+  refVisitedLink.classList.add("visitedLink");
+
+  gDisplay.appendChild(div1);
+  gDisplay.appendChild(visitedLink);
+  gDisplay.appendChild(refVisitedLink);
+
+  // Wait for visited link coloring.
+  await waitForVisitedLinkColoring(refVisitedLink,
+                                   "background-color", "rgb(0, 0, 255)");
+
+  // Wait for animations to start.
+  await waitForPaintsFlushed();
+
+  var bgColor = SpecialPowers.DOMWindowUtils
+    .getVisitedDependentComputedStyle(visitedLink, "", "background-color");
+  is(bgColor, "rgb(0, 0, 255)", "initial visited link background color");
+
+  advance_clock(250);
+
+  // Trigger a style change on div1 that will force us to do a miniflush,
+  // but which will not trigger a style change on visitedLink.
+  div1.style.color = "blue";
+  advance_clock(250);
+
+  bgColor = SpecialPowers.DOMWindowUtils
+    .getVisitedDependentComputedStyle(visitedLink, "", "background-color");
+
+  is(bgColor, "rgb(0, 0, 255)",
+     "visited link background color after animation-only flush");
+
+  div1.remove();
+  visitedLink.remove();
+  refVisitedLink.remove();
+});
+
+/*
+ * Bug 962594 - Turn off CSS animations when the element is display:none, or
+ * is in a display:none subtree.
+ */
+
+// Check that it works if the animated element itself becomes display:none
+addAsyncAnimTest(async function() {
+  new_div("animation: anim4 linear 10s");
+  await waitForPaintsFlushed();
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          "transform animation is running on compositor");
+  advance_clock(1000);
+  omta_is("transform", { ty: 10 }, RunningOn.Compositor,
+          "transform animation is at 1s on compositor");
+  gDiv.style.display = "none";
+  await waitForPaintsFlushed();
+  omta_is("transform", "none", RunningOn.MainThread,
+          "transform animation stopped on compositor");
+  advance_clock(1000);
+  omta_is("transform", "none", RunningOn.MainThread,
+          "transform animation 1s after display:none");
+  gDiv.style.display = "";
+  await waitForPaintsFlushed();
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          "transform animation after display:block");
+  advance_clock(1000);
+  omta_is("transform", { ty: 10 }, RunningOn.Compositor,
+          "transform animation 1s after display:block");
+  done_div();
+});
+
+// Check that it works if an ancestor of the animated element becomes display:none
+addAsyncAnimTest(async function() {
+  new_div("animation: anim4 linear 10s");
+  var ancestor = document.createElement("div");
+  gDiv.parentNode.insertBefore(ancestor, gDiv);
+  ancestor.appendChild(gDiv);
+  await waitForPaintsFlushed();
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          "transform animation is running on compositor");
+  advance_clock(1000);
+  omta_is("transform", { ty: 10 }, RunningOn.Compositor,
+          "transform animation is at 1s on compositor");
+  gDiv.style.display = "none";
+  await waitForPaintsFlushed();
+  omta_is("transform", "none", RunningOn.MainThread,
+          "transform animation stopped on compositor");
+  advance_clock(1000);
+  omta_is("transform", "none", RunningOn.MainThread,
+          "transform animation 1s after display:none");
+  gDiv.style.display = "";
+  await waitForPaintsFlushed();
+  omta_is("transform", { ty: 0 }, RunningOn.Compositor,
+          "transform animation after display:block");
+  advance_clock(1000);
+  omta_is("transform", { ty: 10 }, RunningOn.Compositor,
+          "transform animation 1s after display:block");
+  ancestor.parentNode.insertBefore(gDiv, ancestor);
+  ancestor.remove();
+  done_div();
+});
+
+// Bug 1125455 - Transitions should not run when animations are running.
+addAsyncAnimTest(async function() {
+  new_div("transition: opacity 2s linear; opacity: 0.8");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0.8, RunningOn.MainThread,
+          "initial opacity");
+  gDiv.style.opacity = "0.2";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0.8, RunningOn.Compositor,
+          "opacity transition at 0s");
+  advance_clock(500);
+  omta_is("opacity", 0.65, RunningOn.Compositor,
+          "opacity transition at 0.5s");
+  gDiv.style.animation = "opacitymid 2s linear";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0.2, RunningOn.Compositor,
+          "opacity animation overriding transition at 0s");
+  advance_clock(500);
+  omta_is("opacity", 0.35, RunningOn.Compositor,
+          "opacity animation overriding transition at 0.5s");
+  done_div();
+});
+
+// Bug 1320474 - keyframes-name may be a string, allows names that would
+// otherwise be excluded.
+// These tests don't need to be duplicated here as they relate purely to
+// the animation setup which is common to both main-thread and compositor
+// animations.
+
+// Bug 847287 - Test that changes of when an animation is dynamically
+// overridden work correctly.
+addAsyncAnimTest(async function() {
+  // anim2 and anim3 are both animations from opacity 0 to 1
+
+  new_div("animation: anim2 1s linear forwards; opacity: 0.5 ! important");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0.5, RunningOn.MainThread,
+          "opacity overriding animation at start (0s)");
+  advance_clock(750);
+  omta_is("opacity", 0.5, RunningOn.MainThread,
+          "opacity overriding animation while running (750ms)");
+  advance_clock(1000);
+  omta_is("opacity", 0.5, RunningOn.MainThread,
+          "opacity overriding animation while filling (1750ms)");
+  done_div();
+
+  new_div("animation: anim2 1s linear; opacity: 0.5 ! important");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0.5, RunningOn.MainThread,
+          "opacity overriding animation at start (0s)");
+  advance_clock(750);
+  omta_is("opacity", 0.5, RunningOn.MainThread,
+          "opacity overriding animation while running (750ms)");
+  advance_clock(1000);
+  omta_is("opacity", 0.5, RunningOn.MainThread,
+          "opacity overriding animation after complete (1750ms)");
+  done_div();
+
+  // One animation overriding another, and then not.
+  new_div("animation: anim2 1s linear, anim3 500ms linear reverse");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 1, RunningOn.Compositor,
+          "anim3 overriding anim2 at start (0s)");
+  advance_clock(400);
+  omta_is("opacity", 0.2, RunningOn.Compositor,
+          "anim3 overriding anim2 at 400ms");
+  advance_clock(200);
+  // Wait for paints because we're resending animations to the
+  // compositor via an UpdateOpacityLayer hint, which does the resending
+  // via painting.
+  await waitForPaints();
+  omta_is("opacity", 0.6, RunningOn.Compositor,
+          "anim2 at 600ms");
+  done_div();
+
+  // One animation overriding another, and then not, but without a
+  // restyle when the overriding one ends.
+  new_div("animation: anim2 1s steps(8, end)");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "anim2 at start (0s)");
+  advance_clock(300);
+  omta_is("opacity", 0.25, RunningOn.Compositor,
+          "anim2 at 300ms");
+  gDiv.style.animation = "anim2 1s steps(8, end), anim3 500ms steps(4, end)";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "anim3 overriding anim2 at 300ms");
+  advance_clock(475);
+  omta_is("opacity", 0.75, RunningOn.Compositor,
+          "anim3 the same as anim2 at 775ms");
+  advance_clock(50);
+  // Wait for paints because we're resending animations to the
+  // compositor via an UpdateOpacityLayer hint, which does the resending
+  // via painting.
+  await waitForPaints();
+  omta_is("opacity", 0.75, RunningOn.Compositor,
+          "anim2 at 825ms");
+  advance_clock(75);
+  omta_is("opacity", 0.875, RunningOn.Compositor,
+          "anim2 at 900ms");
+  done_div();
+
+  // Exactly the same as the previous test, except with an extra
+  // waitForPaintsFlushed(), since that extra one exposes other bugs.
+  new_div("animation: anim2 1s steps(8, end)");
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "anim2 at start (0s)");
+  advance_clock(300);
+  omta_is("opacity", 0.25, RunningOn.Compositor,
+          "anim2 at 300ms");
+  gDiv.style.animation = "anim2 1s steps(8, end), anim3 500ms steps(4, end)";
+  await waitForPaintsFlushed();
+  omta_is("opacity", 0, RunningOn.Compositor,
+          "anim3 overriding anim2 at 300ms");
+  advance_clock(475);
+  omta_is("opacity", 0.75, RunningOn.Compositor,
+          "anim3 the same as anim2 at 775ms");
+  // Extra waitForPaintsFlushed to expose bugs.
+  await waitForPaintsFlushed();
+  advance_clock(50);
+  // Wait for paints because we're resending animations to the
+  // compositor via an UpdateOpacityLayer hint, which does the resending
+  // via painting.
+  await waitForPaints();
+  omta_is("opacity", 0.75, RunningOn.Compositor,
+          "anim2 at 825ms");
+  advance_clock(75);
+  omta_is("opacity", 0.875, RunningOn.Compositor,
+          "anim2 at 900ms");
+  done_div();
+
+  // Test that an interpolation that produces transform: none doesn't
+  // crash.
+  new_div("animation: transformnone 1s linear");
+  await waitForPaintsFlushed();
+  omta_is("transform", { tx: 50 }, RunningOn.Compositor,
+          "transformnone animation at 0ms");
+  advance_clock(500);
+  omta_is("transform", { tx: 0 }, RunningOn.Compositor,
+          "transformnone animation at 500ms, interpolating none values");
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  new_div("transform: translate(100px); transition: transform 10s 5s linear");
+  await waitForPaintsFlushed();
+  gDiv.style.transform = "translate(200px)";
+  await waitForPaintsFlushed();
+  // NOTE: As noted above, getOMTAStyle() can't detect the animation is running
+  // on the compositor during the delay phase.
+  omta_is("transform", { tx: 100 }, RunningOn.Either,
+          "transition runs on compositor thread during delay");
+  // At the *very* start of the transition the start value of the transition
+  // will match the underlying transform value. Various optimizations in
+  // RestyleManager may recognize this a "no change" and filter out the
+  // transition meaning that the animation doesn't get added to the compositor
+  // thread until the first time the value changes. As a result, we fast-forward
+  // a little past the beginning and then wait for the animation to be sent
+  // to the compositor.
+  advance_clock(5100);
+  await waitForPaints();
+  omta_is("transform", { tx: 101 }, RunningOn.Compositor,
+          "transition runs on compositor at start of active interval");
+  advance_clock(4900);
+  omta_is("transform", { tx: 150 }, RunningOn.Compositor,
+          "transition runs on compositor at during active interval");
+  advance_clock(5000);
+  // Currently the compositor will apply a forwards fill until it gets told by
+  // the main thread to clear the animation. As a result we should wait for
+  // paints before checking that the animated value does *not* appear on the
+  // compositor thread.
+  await waitForPaints();
+  omta_is("transform", { tx: 200 }, RunningOn.MainThread,
+          "transition runs on main thread at end of active interval");
+
+  done_div();
+});
+
+// Normal background-color animation.
+addAsyncAnimTest(async function() {
+  new_div("background-color: rgb(255, 0, 0); " +
+          "transition: background-color 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.backgroundColor = "rgb(0, 255, 0)";
+  await waitForPaintsFlushed();
+
+  omta_is("background-color", "rgb(255, 0, 0)", RunningOn.Compositor,
+          "background-color transition runs on compositor thread");
+
+  advance_clock(5000);
+  omta_is("background-color", "rgb(128, 128, 0)", RunningOn.Compositor,
+          "background-color on compositor at 5s");
+
+  done_div();
+});
+
+// background-color animation with currentColor.
+addAsyncAnimTest(async function() {
+  new_div("color: rgb(255, 0, 0); " +
+          "background-color: currentColor; " +
+          "transition: background-color 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.backgroundColor = "rgb(0, 255, 0)";
+  await waitForPaintsFlushed();
+
+  omta_todo_is("background-color", "rgb(255, 0, 0)", RunningOn.TodoCompositor,
+          "background-color transition starting with current-color runs on " +
+          "compositor thread");
+
+  advance_clock(5000);
+  omta_todo_is("background-color", "rgb(128, 128, 0)", RunningOn.TodoCompositor,
+          "background-color on compositor at 5s");
+
+  done_div();
+});
+
+// Tests that a background-color animation from inherited currentColor to
+// a normal color on the compositor is updated when the parent color is
+// changed.
+addAsyncAnimTest(async function() {
+  new_div("");
+  const parent = document.createElement("div");
+  gDiv.parentNode.insertBefore(parent, gDiv);
+  parent.style.color = "rgb(255, 0, 0)";
+  parent.appendChild(gDiv);
+
+  gDiv.animate({ backgroundColor: [ "currentColor", "rgb(0, 255, 0)" ] }, 1000);
+
+  await waitForPaintsFlushed();
+
+  omta_todo_is("background-color", "rgb(255, 0, 0)", RunningOn.TodoCompositor,
+          "background-color animation starting with current-color runs on " +
+          "compositor thread");
+
+  advance_clock(500);
+
+  omta_todo_is("background-color", "rgb(128, 128, 0)", RunningOn.TodoCompositor,
+          "background-color on compositor at 5s");
+
+  // Change the parent's color in the middle of the animation.
+  parent.style.color = "rgb(0, 0, 255)";
+  await waitForPaintsFlushed();
+
+  omta_todo_is("background-color", "rgb(0, 128, 128)", RunningOn.TodoCompositor,
+          "background-color on compositor is reflected by the parent's " +
+          "color change");
+
+  done_div();
+  parent.remove();
+});
+
+// Tests that a background-color animation from currentColor to a normal color
+// on <a> element is updated when the link is visited.
+addAsyncAnimTest(async function() {
+  if (AppConstants.platform === "android") {
+    todo(false, "no global history on GeckoView; can't run test");
+    return;
+  }
+
+  [ gDiv ] = new_element("a", "display: block");
+  gDiv.setAttribute("href", "not-exist.html");
+  gDiv.classList.add("visited");
+
+  const extraStyle = document.createElement('style');
+  document.head.appendChild(extraStyle);
+  extraStyle.sheet.insertRule(".visited:visited { color: rgb(0, 0, 255); }", 0);
+  extraStyle.sheet.insertRule(".visited:link { color: rgb(255, 0, 0); }", 1);
+
+  gDiv.animate({ backgroundColor: [ "currentColor", "rgb(0, 255, 0)" ] }, 1000);
+  await waitForPaintsFlushed();
+
+  omta_todo_is("background-color", "rgb(255, 0, 0)", RunningOn.TodoCompositor,
+          "background-color animation starting with current-color runs on " +
+          "compositor thread");
+
+  advance_clock(500);
+
+  omta_todo_is("background-color", "rgb(128, 128, 0)", RunningOn.TodoCompositor,
+          "background-color on compositor at 5s");
+
+  const topLocation =
+    await SpecialPowers.spawnChrome([], () => browsingContext.top.currentURI.spec);
+  gDiv.setAttribute("href", topLocation);
+  await waitForVisitedLinkColoring(gDiv, "color", "rgb(0, 0, 255)");
+  await waitForPaintsFlushed();
+
+  // `omta_is` checks that the result on the compositor equals to the value by
+  // getComputedValue() but getComputedValue lies for visited link values so
+  // we use getOMTAStyle directly instead.
+  todo_is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "background-color"),
+     "rgb(0, 128, 128)",
+     "background-color on <a> element after the link is visited");
+
+  extraStyle.remove();
+  done_element();
+  gDiv = null;
+});
+
+// Normal translate animation.
+addAsyncAnimTest(async function() {
+  new_div("translate: 100px; " +
+          "transition: translate 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.translate = "200px";
+  await waitForPaintsFlushed();
+
+  omta_is("translate", { compositorValue: { tx: 100 }, computed: "100px" },
+          RunningOn.Compositor,
+          "translate transition runs on compositor thread");
+
+  advance_clock(5000);
+  omta_is("translate", { compositorValue: { tx: 150 }, computed: "150px" },
+          RunningOn.Compositor, "translate on compositor at 5s");
+
+  done_div();
+});
+
+// Normal rotate animation.
+addAsyncAnimTest(async function() {
+  new_div("rotate: 0deg; " +
+          "transition: rotate 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.rotate = "90deg";
+  await waitForPaintsFlushed();
+
+  omta_is("rotate", { compositorValue: [ 1, 0, 0, 1, 0, 0 ], computed: "0deg"},
+          RunningOn.Compositor, "rotate transition runs on compositor thread");
+
+  advance_clock(5000);
+  omta_is("rotate",
+          { compositorValue: [ Math.cos(Math.PI / 4), Math.sin(Math.PI / 4),
+                              -Math.sin(Math.PI / 4), Math.cos(Math.PI / 4),
+                               0, 0 ],
+            computed: "45deg" }, RunningOn.Compositor,
+          "rotate on compositor at 5s");
+
+  done_div();
+});
+
+// Normal scale animation.
+addAsyncAnimTest(async function() {
+  new_div("scale: 1 1; " +
+          "transition: scale 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.scale = "2 2";
+  await waitForPaintsFlushed();
+
+  omta_is("scale", { compositorValue: [ 1, 0, 0, 1, 0, 0 ], computed: "1" },
+          RunningOn.Compositor, "scale transition runs on compositor thread");
+
+  advance_clock(5000);
+  omta_is("scale",
+          { compositorValue: [ 1.5, 0, 0, 1.5, 0, 0 ], computed: "1.5" },
+          RunningOn.Compositor, "scale on compositor at 5s");
+
+  done_div();
+});
+
+// Normal multiple transform-like properties animation.
+addAsyncAnimTest(async function() {
+  new_div("translate: 100px; " +
+          "scale: 1 1; " +
+          "transform: translate(200px); " +
+          "transition: all 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.translate = "200px";
+  gDiv.style.scale = "2 2";
+  gDiv.style.transform = "translate(100px)";
+  await waitForPaintsFlushed();
+
+  omta_is("transform", { compositorValue: { tx: 300 },
+                         usesMultipleProperties: true },
+          RunningOn.Compositor,
+          "transform-like properties transition runs on compositor thread");
+
+  advance_clock(5000);
+
+  omta_is("transform",
+          // The order is: translate, scale, transform.
+          // So the translate() in transform should be multiplied by 1.5.
+          { compositorValue: [ 1.5, 0, 0, 1.5, (150 + 150*1.5), 0 ],
+            usesMultipleProperties: true },
+          RunningOn.Compositor,
+          "transform-like properties on compositor at 5s");
+
+  done_div();
+});
+
+// Multiple transform-like properties animation. The non-animating properties
+// shouldn't be overridden by animating ones.
+addAsyncAnimTest(async function() {
+  new_div("translate: 100px; " +
+          "scale: 1 1; " +
+          "transform: translate(200px); " +
+          "transition: all 10s linear");
+  await waitForPaintsFlushed();
+
+  // No transition on transform property.
+  gDiv.style.translate = "200px";
+  gDiv.style.scale = "2 2";
+  await waitForPaintsFlushed();
+
+  omta_is("transform", { compositorValue: { tx: 300 },
+                         usesMultipleProperties: true },
+          RunningOn.Compositor,
+          "transform-like properties transition runs on compositor thread");
+
+  advance_clock(5000);
+
+  omta_is("transform",
+          // The order is: translate, scale, transform.
+          // So the translate() in transform should be multiplied by 1.5.
+          { compositorValue: [ 1.5, 0, 0, 1.5, (150 + 200*1.5), 0 ],
+            usesMultipleProperties: true },
+          RunningOn.Compositor,
+          "transform-like properties on compositor at 5s");
+
+  done_div();
+});
+
+// Multiple transform-like properties animation with delay. The delayed
+// animating properties shouldn't be overridden.
+//
+// Note:
+// In delay phase, the SampleResult should be None, even though there is
+// an non-animating property which is also sent to the compositor.
+// If the SampleResult is Sampled in this case, we may get an incorrect result
+// ("scale" would be "1" because the final matrix is calculated by a default
+// scale value which overrides the scale css style).
+// That's why we shouldn't take non-animating properties into account on
+// SampleResult.
+addAsyncAnimTest(async function() {
+  new_div("translate: 100px; " +
+          "scale: 1.25 1.25; " +
+          "animation: kf_scale 10s 2.5s linear");
+  await waitForPaintsFlushed();
+
+  // All transform-like properties use DisplayItemType::TYPE_TRANSFORM,
+  // so using "transform" is enough.
+  var compositorStr =
+    SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "transform");
+  ok(compositorStr === "",
+     "transform-like properties should not run on the compositor at 0s " +
+     "(in delay phase)");
+  var computedStr = window.getComputedStyle(gDiv).translate;
+  ok(computedStr === "100px",
+     "The computed value of translate property should be equal to 100px " +
+     "in delay phase, got " + computedStr);
+  computedStr = window.getComputedStyle(gDiv).scale;
+  ok(computedStr === "1.25",
+     "The computed value of scale property should be equal to 1.25 " +
+     "in delay phase, got " + computedStr);
+
+  advance_clock(2500);
+
+  omta_is("transform", { compositorValue: [ 1.25, 0, 0, 1.25, 100, 0 ],
+                         usesMultipleProperties: true },
+          RunningOn.Compositor,
+          "transform-like properties on compositor at 2.5s");
+
+  advance_clock(5000);
+
+  omta_is("transform",
+          { compositorValue: [ 1.75, 0, 0, 1.75, 100, 0 ],
+            usesMultipleProperties: true },
+          RunningOn.Compositor,
+          "transform-like properties on compositor at 7.5s");
+
+  done_div();
+});
+
+// Normal offset-path animation with path().
+addAsyncAnimTest(async function() {
+  new_div("offset-path: path('M50 50L100 100'); " +
+          "offset-distance: 50%; " +
+          "offset-rotate: 0deg; " +
+          "transition: offset-path 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.offsetPath = "path('M50 50L200 200')";
+  await waitForPaintsFlushed();
+
+  omta_is("offset-path",
+          { compositorValue: { tx: 25, ty: 25 },
+            computed: 'path("M 50 50 L 100 100")' },
+          RunningOn.Compositor,
+          "offset-path transition runs on compositor thread");
+
+  advance_clock(5000);
+
+  omta_is("offset-path",
+          { compositorValue: { tx: 50, ty: 50 },
+            computed: 'path("M 50 50 L 150 150")' },
+          RunningOn.Compositor,
+          "offset-path on compositor at 5s");
+
+  done_div();
+});
+
+// FIXME: Add test for ray() after we fix Bug 1590542.
+
+// Normal offset-distance animation.
+addAsyncAnimTest(async function() {
+  new_div("offset-path: path('M50 50v100'); " +
+          "offset-distance: 0%; " +
+          "offset-rotate: 0deg; " +
+          "transition: offset-distance 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.offsetDistance = "100%";
+  await waitForPaintsFlushed();
+
+  omta_is("offset-distance",
+          { compositorValue: { ty: 0 }, computed: '0%' },
+          RunningOn.Compositor,
+          "offset-distance transition runs on compositor thread");
+
+  advance_clock(5000);
+
+  omta_is("offset-distance",
+          { compositorValue: { ty: 50 }, computed: '50%' },
+          RunningOn.Compositor,
+          "offset-distance on compositor at 5s");
+
+  done_div();
+});
+
+// Normal offset-rotate animation.
+addAsyncAnimTest(async function() {
+  new_div("offset-path: path('M50 50v100'); " +
+          "offset-rotate: auto; " +
+          "transition: offset-rotate 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.offsetRotate = "auto 90deg";
+  await waitForPaintsFlushed();
+
+  // The direction vector is 90deg (because the path go from top to bottom), and
+  // offset-rotate is auto 0deg, so the entire rotation is 90deg.
+  // The matrix is [cos(pi/2), sin(pi/2), -sin(pi/2), cos(pi/2), 0, 0].
+  omta_is("offset-rotate",
+          { compositorValue: [ 0, 1, -1, 0, 0, 0 ], computed: 'auto' },
+          RunningOn.Compositor,
+          "offset-rotate transition runs on compositor thread");
+
+  advance_clock(5000);
+
+  // At 50%, offset-rotate is auto 45deg, so the entire rotation is 135deg
+  // (= 90deg + 45deg = pi * 3/4), so the matrix is
+  // [cos(pi * 3/4), sin(pi * 3/4), -sin(pi * 3/4), cos(pi * 3/4), 0, 0]
+  omta_is("offset-rotate",
+          {
+            compositorValue: [
+              Math.cos(Math.PI * 3/4), Math.sin(Math.PI * 3/4),
+             -Math.sin(Math.PI * 3/4), Math.cos(Math.PI * 3/4),
+              0, 0
+            ],
+            computed: 'auto 45deg',
+          },
+          RunningOn.Compositor,
+          "offset-rotate on compositor at 5s");
+
+  done_div();
+});
+
+// Normal offset-anchor animation.
+addAsyncAnimTest(async function() {
+  new_div("offset-path: path('M50 50v100'); " +
+          "offset-rotate: 0deg; " +
+          "offset-anchor: 0% 0%; " +
+          "transition: offset-anchor 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.offsetAnchor = "100% 100%";
+  await waitForPaintsFlushed();
+
+  omta_is("offset-anchor",
+          { compositorValue: { tx: 50, ty: 50 }, computed: '0% 0%' },
+          RunningOn.Compositor,
+          "offset-anchor transition runs on compositor thread");
+
+  advance_clock(5000);
+
+  omta_is("offset-anchor",
+          { compositorValue: { tx: 0, ty: 0 }, computed: '50% 50%' },
+          RunningOn.Compositor,
+          "offset-anchor on compositor at 5s");
+
+  done_div();
+});
+
+// Normal multiple transform-like properties animation (including motion-path).
+addAsyncAnimTest(async function() {
+  new_div("translate: 0px; " +
+          "offset-path: path('M50 50v100');" +
+          "offset-distance: 0%;" +
+          "transform: translateX(0px); " +
+          "transition: all 10s linear");
+  await waitForPaintsFlushed();
+
+  gDiv.style.translate = "0px 100px";
+  gDiv.style.transform = "translateX(-100px)";
+  gDiv.style.offsetDistance = "100%";
+  await waitForPaintsFlushed();
+
+  omta_is("transform", { compositorValue: [ 0, 1, -1, 0, 0, 0 ],
+                         usesMultipleProperties: true },
+          RunningOn.Compositor,
+          "transform-like properties transition runs on compositor thread");
+
+  advance_clock(5000);
+
+  omta_is("transform", { compositorValue: [ 0, 1, -1, 0, 0, 50 ],
+                         usesMultipleProperties: true },
+          RunningOn.Compositor,
+          "transform-like properties transition runs on compositor thread");
+
+  done_div();
+});
+
+</script>
+</html>
diff --git a/layout/style/test/test_animations_omta_scroll.html b/layout/style/test/test_animations_omta_scroll.html
new file mode 100644
index 0000000000..324264c3e7
--- /dev/null
+++ b/layout/style/test/test_animations_omta_scroll.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+  <title>Test for css-animations running on the compositor thread with
+    scroll-timeline</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=1676780">Scroll-driven
+   animations generated by CSS</a>
+<pre id="test"></pre>
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+// Open a new window to make sure we test this with scrolling attribute.
+window.open('file_animations_omta_scroll.html');
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_omta_scroll_rtl.html b/layout/style/test/test_animations_omta_scroll_rtl.html
new file mode 100644
index 0000000000..73339211c5
--- /dev/null
+++ b/layout/style/test/test_animations_omta_scroll_rtl.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+  <title>Test for css-animations running on the compositor thread with
+    scroll-timeline with right to left writing mode</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=1676780">Scroll-driven
+   animations generated by CSS</a>
+<pre id="test"></pre>
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+// Open a new window to make sure we test this with scrolling attribute.
+window.open('file_animations_omta_scroll_rtl.html');
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_omta_start.html b/layout/style/test/test_animations_omta_start.html
new file mode 100644
index 0000000000..92423bf67d
--- /dev/null
+++ b/layout/style/test/test_animations_omta_start.html
@@ -0,0 +1,187 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=975261
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test OMTA animations start correctly (Bug 975261)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+    @keyframes anim-opacity {
+       0% { opacity: 0.5 }
+       100% { opacity: 0.5 }
+    }
+    @keyframes anim-opacity-2 {
+       0% { opacity: 0.0 }
+       100% { opacity: 1.0 }
+    }
+    @keyframes anim-transform {
+       0% { transform: translate(50px); }
+       100% { transform: translate(50px); }
+    }
+    @keyframes anim-transform-2 {
+       0% { transform: translate(0px); }
+       100% { transform: translate(100px); }
+    }
+    .target {
+      /* These two lines are needed so that an opacity/transform layer
+       * already exists when the animation is applied. */
+      opacity: 0.99;
+      transform: translate(99px);
+
+      /* Element needs geometry in order to be animated on the
+       * compositor. */
+      width: 100px;
+      height: 100px;
+      background-color: white;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank"
+  href="https://bugzilla.mozilla.org/show_bug.cgi?id=975261">Mozilla Bug
+  975261</a>
+<div id="display"></div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+var gUtils = SpecialPowers.DOMWindowUtils;
+
+SimpleTest.waitForExplicitFinish();
+runOMTATest(testDelay, SimpleTest.finish);
+
+function newTarget() {
+  var target = document.createElement("div");
+  target.classList.add("target");
+  document.getElementById("display").appendChild(target);
+  return target;
+}
+
+function testDelay() {
+  gUtils.advanceTimeAndRefresh(0);
+
+  var target = newTarget();
+  target.setAttribute("style", "animation: 10s 10s anim-opacity linear");
+  gUtils.advanceTimeAndRefresh(0);
+
+  waitForAllPaints(function() {
+    gUtils.advanceTimeAndRefresh(10100);
+    waitForAllPaints(function() {
+      var opacity = gUtils.getOMTAStyle(target, "opacity");
+      is(opacity, "0.5",
+         "opacity is set on compositor thread after delayed start");
+      target.removeAttribute("style");
+      gUtils.restoreNormalRefresh();
+      testTransform();
+    });
+  });
+}
+
+function testTransform() {
+  gUtils.advanceTimeAndRefresh(0);
+
+  var target = newTarget();
+  target.setAttribute("style", "animation: 10s 10s anim-transform linear");
+  gUtils.advanceTimeAndRefresh(0);
+
+  waitForAllPaints(function() {
+    gUtils.advanceTimeAndRefresh(10100);
+    waitForAllPaints(function() {
+      var transform = gUtils.getOMTAStyle(target, "transform");
+      ok(matricesRoughlyEqual(convertTo3dMatrix(transform),
+                              convertTo3dMatrix("matrix(1, 0, 0, 1, 50, 0)")),
+         "transform is set on compositor thread after delayed start");
+      target.remove();
+      gUtils.restoreNormalRefresh();
+      testBackwardsFill();
+    });
+  });
+}
+
+function testBackwardsFill() {
+  gUtils.advanceTimeAndRefresh(0);
+
+  var target = newTarget();
+  target.setAttribute("style",
+    "transform: translate(30px); " +
+    "animation: 10s 10s anim-transform-2 linear backwards");
+
+  gUtils.advanceTimeAndRefresh(0);
+  waitForAllPaints(function() {
+    gUtils.advanceTimeAndRefresh(10000);
+    waitForAllPaints(function() {
+      gUtils.advanceTimeAndRefresh(100);
+      waitForAllPaints(function() {
+        var transform = gUtils.getOMTAStyle(target, "transform");
+        ok(matricesRoughlyEqual(convertTo3dMatrix(transform),
+                                convertTo3dMatrix("matrix(1, 0, 0, 1, 1, 0)")),
+           "transform is set on compositor thread after delayed start " +
+           "with backwards fill");
+        target.remove();
+        gUtils.restoreNormalRefresh();
+        testTransitionTakingOver();
+      });
+    });
+  });
+}
+
+function testTransitionTakingOver() {
+  gUtils.advanceTimeAndRefresh(0);
+
+  var parent = newTarget();
+  var child = newTarget();
+  parent.appendChild(child);
+  parent.style.opacity = "0.0";
+  parent.style.animation = "10s anim-opacity-2 linear";
+  child.style.opacity = "inherit";
+  child.style.transition = "10s opacity linear";
+
+  var childCS = getComputedStyle(child, "");
+
+  gUtils.advanceTimeAndRefresh(0);
+  waitForAllPaints(function() {
+    gUtils.advanceTimeAndRefresh(4000);
+    waitForAllPaints(function() {
+      child.style.opacity = "1.0";
+      var opacity = gUtils.getOMTAStyle(child, "opacity");
+      // FIXME Bug 1039799 (or lower priority followup): Animations
+      // inherited from an animating parent element don't get shipped to
+      // the compositor thread.
+      todo_is(opacity, "0.4",
+         "transition that interrupted animation is correct");
+
+      // Trigger to start the transition, without this the transition will
+      // be pending in advanceTimeAndRefresh(0) so the transition will not
+      // be sent to the compositor until we call advanceTimeAndRefresh with
+      // a positive time value.
+      getComputedStyle(child).opacity;
+      gUtils.advanceTimeAndRefresh(0);
+      waitForAllPaints(function() {
+        opacity = gUtils.getOMTAStyle(child, "opacity");
+        is(opacity, "0.4",
+           "transition that interrupted animation is correct");
+        gUtils.advanceTimeAndRefresh(5000);
+        waitForAllPaints(function() {
+          opacity = gUtils.getOMTAStyle(child, "opacity");
+          is(opacity, "0.7",
+             "transition that interrupted animation is correct");
+          is(childCS.opacity, "0.7",
+             "transition that interrupted animation is correct");
+          parent.remove();
+          gUtils.restoreNormalRefresh();
+          SimpleTest.finish();
+        });
+      });
+    });
+  });
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_pausing.html b/layout/style/test/test_animations_pausing.html
new file mode 100644
index 0000000000..8aba46b5e8
--- /dev/null
+++ b/layout/style/test/test_animations_pausing.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Test for Animation.play() and Animation.pause() on compositor animations
+  </title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style type="text/css">
+    @keyframes anim {
+      0% { transform: translate(0px) }
+      100% { transform: translate(100px) }
+    }
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: white;
+    }
+  </style>
+</head>
+<body>
+<div id="display"></div>
+<script type="application/javascript">
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+runOMTATest(function() {
+  runAllAsyncAnimTests().then(SimpleTest.finish);
+}, SimpleTest.finish, SpecialPowers);
+
+addAsyncAnimTest(async function() {
+  var [ div, cs ] = new_div("animation: anim 10s 2 linear alternate");
+
+  // Animation is initially running on compositor
+  await waitForPaintsFlushed();
+  advance_clock(1000);
+  omta_is(div, "transform", { tx: 10 }, RunningOn.Compositor,
+          "Animation is initally animating on compositor");
+
+  // pause() means it is no longer on the compositor
+  var animation = div.getAnimations()[0];
+  animation.pause();
+  // pause() should set up the changes to animations for the next layer
+  // transaction but it won't schedule a paint immediately so we need to tick
+  // the refresh driver before we can wait on the next paint.
+  advance_clock(0);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 10 }, RunningOn.MainThread,
+          "After pausing, animation is removed from compositor");
+
+  // Animation remains paused
+  advance_clock(1000);
+  omta_is(div, "transform", { tx: 10 }, RunningOn.MainThread,
+          "Animation remains paused");
+
+  // play() puts the animation back on the compositor
+  animation.play();
+  // As with pause(), play() will set up pending animations for the next layer
+  // transaction but won't schedule a paint so we need to tick the refresh
+  // driver before waiting on the next paint.
+  advance_clock(0);
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 10 }, RunningOn.Compositor,
+          "After playing, animation is sent to compositor");
+
+  // Where it continues to run
+  advance_clock(1000);
+  omta_is(div, "transform", { tx: 20 }, RunningOn.Compositor,
+          "Animation continues playing on compositor");
+
+  done_div();
+});
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_playbackrate.html b/layout/style/test/test_animations_playbackrate.html
new file mode 100644
index 0000000000..8ecfdb6f28
--- /dev/null
+++ b/layout/style/test/test_animations_playbackrate.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test for Animation.playbackRate on compositor animations</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style type="text/css">
+    @keyframes anim {
+      0% { transform: translate(0px) }
+      100% { transform: translate(100px) }
+    }
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: white;
+    }
+  </style>
+</head>
+<body>
+<div id="display"></div>
+<script type="application/javascript">
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+runOMTATest(function() {
+  runAllAsyncAnimTests().then(SimpleTest.finish);
+}, SimpleTest.finish, SpecialPowers);
+
+addAsyncAnimTest(async function() {
+  var [ div, cs ] = new_div("animation: anim 10s 1 linear forwards");
+  var animation = div.getAnimations()[0];
+  animation.playbackRate = 10;
+
+  advance_clock(300);
+
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 30 }, RunningOn.Compositor,
+          "at 300ms");
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  var [ div, cs ] = new_div("animation: anim 10s 1 linear forwards");
+  var animation = div.getAnimations()[0];
+  advance_clock(300);
+  await waitForPaints();
+
+  animation.playbackRate = 0;
+
+  await waitForPaintsFlushed();
+
+  omta_is(div, "transform", { tx: 3 }, RunningOn.MainThread,
+          "animation with zero playback rate should stay in the " +
+          "same position and be running on the main thread");
+
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  var [ div, cs ] = new_div("animation: anim 10s 1s");
+  var animation = div.getAnimations()[0];
+  animation.playbackRate = 0.5;
+
+  advance_clock(2000); // 1s * (1 / playbackRate)
+
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 0 }, RunningOn.Compositor,
+          "animation with positive delay and playbackRate > 1 should " +
+          "start from the initial position at the beginning of the " +
+          "active duration");
+  done_div();
+});
+
+addAsyncAnimTest(async function() {
+  var [ div, cs ] = new_div("animation: anim 10s 1s");
+  var animation = div.getAnimations()[0];
+  animation.playbackRate = 2.0;
+
+  advance_clock(500); // 1s * (1 / playbackRate)
+
+  await waitForPaints();
+  omta_is(div, "transform", { tx: 0 }, RunningOn.Compositor,
+          "animation with positive delay and playbackRate < 1 should " +
+          "start from the initial position at the beginning of the " +
+          "active duration");
+  done_div();
+});
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_reverse.html b/layout/style/test/test_animations_reverse.html
new file mode 100644
index 0000000000..93ff8c37a9
--- /dev/null
+++ b/layout/style/test/test_animations_reverse.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>Test for Animation.reverse() on compositor animations</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style type="text/css">
+    @keyframes anim {
+      0% { transform: translate(0px) }
+      100% { transform: translate(100px) }
+    }
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: white;
+    }
+  </style>
+</head>
+<body>
+<div id="display"></div>
+<script type="application/javascript">
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+runOMTATest(function() {
+  runAllAsyncAnimTests().then(SimpleTest.finish);
+}, SimpleTest.finish, SpecialPowers);
+
+addAsyncAnimTest(async function() {
+  var [ div, cs ] = new_div("animation: anim 10s linear");
+  const animation = div.getAnimations()[0];
+
+  // Animation is initially running on compositor
+  await waitForPaintsFlushed();
+  advance_clock(5000);
+  omta_is(div, 'transform', { tx: 50 }, RunningOn.Compositor,
+          'Animation is initally animating on compositor');
+
+  // Reverse animation
+  animation.reverse();
+
+  // At this point the playbackRate has changed but the transform will
+  // not have changed.
+  await waitForPaints();
+  omta_is(div, 'transform', { tx: 50 }, RunningOn.Compositor,
+          'Animation value does not change after being reversed');
+
+  // However, we should still have sent a layer transaction to update the
+  // playbackRate on the compositor so that on the next tick we advance
+  // in the right direction.
+  advance_clock(1000);
+  omta_is(div, 'transform', { tx: 40 }, RunningOn.Compositor,
+          'Animation proceeds in reverse direction');
+
+  done_div();
+});
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_styles_on_event.html b/layout/style/test/test_animations_styles_on_event.html
new file mode 100644
index 0000000000..0e96711530
--- /dev/null
+++ b/layout/style/test/test_animations_styles_on_event.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>
+    Test that mouse movement immediately after finish() should involve
+    restyling for finished state (Bug 1228137)
+  </title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script type="application/javascript"
+    src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style type="text/css">
+    @keyframes anim {
+      0% { transform: translateX(0px) }
+      100% { transform: translateX(100px) }
+    }
+    .target {
+      /* The animation target needs geometry in order to qualify for OMTA */
+      width: 100px;
+      height: 100px;
+      background-color: white;
+    }
+  </style>
+</head>
+<body>
+<div id="display"></div>
+<script type="application/javascript">
+SimpleTest.waitForExplicitFinish();
+
+window.onload = function () {
+  // To avoid the effect that newly created element's styles are
+  // not updated immediately, we need to add an element without
+  // animation properties first.
+  var [ div ] = new_div("");
+  div.setAttribute("id", "bug1228137");
+
+  waitForPaints().then(function() {
+    var initialRect = div.getBoundingClientRect();
+
+    // Now we can set animation properties.
+    div.style.animation = "anim 100s linear forwards";
+
+    div.addEventListener("mousemove", function(event) {
+      is(event.target.id, "bug1228137",
+         "The target of the animation should receive the mouse move event " +
+         "on the position of the animation's effect end.");
+      done_div();
+      SimpleTest.finish();
+    });
+
+    var animation = div.getAnimations()[0];
+    animation.finish();
+
+    // Mouse over where the animation is positioned at finished state.
+    // We can't use synthesizeMouse here since synthesizeMouse causes
+    // layout flush. We need to check the position without explicit flushes.
+    synthesizeMouseAtPoint(initialRect.left + initialRect.width / 2 + 100,
+                           initialRect.top + initialRect.height / 2,
+                           { type: "mousemove" }, window);
+  });
+};
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_animations_variable_changes.html b/layout/style/test/test_animations_variable_changes.html
new file mode 100644
index 0000000000..ac254e1136
--- /dev/null
+++ b/layout/style/test/test_animations_variable_changes.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Tests that animations respond to changes to variables</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
+<style>
+:root {
+  --width: 100px;
+}
+.wider {
+  --width: 200px;
+}
+@keyframes widen {
+  to { margin-left: var(--width) }
+}
+</style>
+<body>
+<div id="log"></div>
+<script>
+
+test(() => {
+  const div = document.createElement('div');
+  document.body.append(div);
+
+  div.style.animation = 'widen step-start 100s';
+  assert_equals(getComputedStyle(div).marginLeft, '100px',
+                'Animation value before updating CSS variable');
+
+  div.classList.add('wider');
+
+  assert_equals(getComputedStyle(div).marginLeft, '200px',
+                'Animation value after updating CSS variable');
+
+  div.remove();
+}, 'Animation reflects changes to custom properties');
+
+test(() => {
+  const parent = document.createElement('div');
+  const child = document.createElement('div');
+  parent.append(child);
+  document.body.append(parent);
+
+  child.style.animation = 'widen step-start 100s';
+  assert_equals(getComputedStyle(child).marginLeft, '100px',
+                'Animation value before updating CSS variable');
+
+  parent.classList.add('wider');
+
+  assert_equals(getComputedStyle(child).marginLeft, '200px',
+                'Animation value after updating CSS variable');
+
+  parent.remove();
+  child.remove();
+}, 'Animation reflect changes to custom properties on parent');
+
+</script>
+</body>
diff --git a/layout/style/test/test_animations_with_disabled_properties.html b/layout/style/test/test_animations_with_disabled_properties.html
new file mode 100644
index 0000000000..9eb395003f
--- /dev/null
+++ b/layout/style/test/test_animations_with_disabled_properties.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1265611
+-->
+<head>
+  <title>Test CSS animations ignore disabled properties (Bug 1265611)</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=1265611">Mozilla Bug
+   1265611</a>
+<pre id="test">
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+/*
+ * This test relies on the fact that the overflow-clip-box property
+ * is disabled by the layout.css.overflow-clip-box.enabled pref. If we ever
+ * remove that pref we will need to substitute some other pref:property
+ * combination.
+ */
+SpecialPowers.pushPrefEnv(
+  { 'set': [[ 'layout.css.overflow-clip-box.enabled', false ]] },
+  () => window.open('file_animations_with_disabled_properties.html'));
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_any_dynamic.html b/layout/style/test/test_any_dynamic.html
new file mode 100644
index 0000000000..9c9a9e2a3f
--- /dev/null
+++ b/layout/style/test/test_any_dynamic.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=544834
+-->
+<head>
+  <title>Test for Bug 544834</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+  :-moz-any(#display, #display2) { text-decoration-line: underline }
+  p:-moz-any([foo], [bar]) { z-index: 17 }
+
+  </style>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=544834">Mozilla Bug 544834</a>
+<p id="display" style="position:absolute"></p>
+<pre id="test">
+<script type="application/javascript">
+
+/**
+ * Test for Bug 544834
+ *
+ * In particular, test that we go through :-moz-any() in AddRule.
+ */
+
+function run()
+{
+  var p = document.getElementById("display");
+  var cs = getComputedStyle(p, "");
+  is(cs.textDecorationLine, "underline", "should match first rule");
+  is(cs.zIndex, "auto", "should not match second rule");
+  p.removeAttribute("id");
+  is(cs.textDecorationLine, "none", "should not match first rule");
+  is(cs.zIndex, "auto", "should not match second rule");
+  p.setAttribute("foo", "v");
+  is(cs.textDecorationLine, "none", "should not match first rule");
+  is(cs.zIndex, "17", "should match second rule");
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_area_url_cursor.html b/layout/style/test/test_area_url_cursor.html
new file mode 100644
index 0000000000..cbc5efed74
--- /dev/null
+++ b/layout/style/test/test_area_url_cursor.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>cursor: url() doesn't assert for area elements</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<style>
+area {
+  /* Doesn't matter to trigger the assert */
+  cursor: url(invalid.cur), auto;
+}
+</style>
+<img width="300" height="98" usemap="#map">
+<map name="map" id="map">
+  <area class="url" shape="rect" coords="0,0,300,98" href="https://mozilla.org"></area>
+</map>
+<div></div>
+<script>
+SimpleTest.waitForExplicitFinish();
+SimpleTest.waitForFocus(() => {
+
+  let checked = false;
+  document.querySelector("area").addEventListener("mousemove", function() {
+    setTimeout(() => {
+      if (checked) {
+        return;
+      }
+      checked = true;
+      ok(true, "Didn't assert");
+      SimpleTest.finish()
+    }, 0);
+  });
+
+  synthesizeMouseAtCenter(document.querySelector("img"), { type: "mousemove" });
+});
+</script>
diff --git a/layout/style/test/test_asyncopen.html b/layout/style/test/test_asyncopen.html
new file mode 100644
index 0000000000..9a52ea37eb
--- /dev/null
+++ b/layout/style/test/test_asyncopen.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1195173
+-->
+<head>
+  <title>Bug 1195173 - Test asyncOpen security exception</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+
+  <!-- Note: the following stylesheet does not exist -->
+  <link rel="stylesheet" id="myCSS" type="text/css" href="file:///home/foo/bar.css">
+
+</head>
+<body onload="checkCSS()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1195173">Mozilla Bug 1195173</a>
+<p id="display"></p>
+<div id="content" style="display: none"></div>
+
+<script type="application/javascript">
+/*
+ * Description of the test:
+ * Accessing a stylesheet that got blocked by asyncOpen should
+ * throw an exception.
+ */
+
+SimpleTest.waitForExplicitFinish();
+
+function checkCSS()
+{
+  try {
+    // accessing tests/SimpleTest/test.css should not throw
+    var goodCSS = document.styleSheets[0].cssRules
+    ok(true, "accessing test.css should be allowed");
+  }
+  catch(e) {
+    ok(false, "accessing test.css should be allowed");
+  }
+
+  try {
+    // accessing file:///home/foo/bar.css should throw
+    var badCSS = document.styleSheets[1].cssRules
+    ok(false, "accessing bar.css should throw");
+  }
+  catch(e) {
+    ok(true, "accessing bar.css should throw");
+  }
+
+  SimpleTest.finish();
+}
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_at_rule_parse_serialize.html b/layout/style/test/test_at_rule_parse_serialize.html
new file mode 100644
index 0000000000..2c6f2e2d5c
--- /dev/null
+++ b/layout/style/test/test_at_rule_parse_serialize.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=478160
+-->
+<head>
+  <title>Test for Bug 478160</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style id="style" type="text/css"></style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=478160">Mozilla Bug 478160</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 478160 **/
+
+var style_element = document.getElementById("style");
+var style_text = document.createTextNode("");
+style_element.appendChild(style_text);
+
+function test_at_rule(str) {
+    style_text.data = str;
+    is(style_element.sheet.cssRules.length, 1,
+       "should have one rule from " + str);
+    var ser1 = style_element.sheet.cssRules[0].cssText;
+    isnot(ser1, "", "should have non-empty rule from " + str);
+    style_text.data = ser1;
+    var ser2 = style_element.sheet.cssRules[0].cssText;
+    is(ser2, ser1, "parse+serialize should be idempotent for " + str);
+}
+
+test_at_rule("@namespace 'a b'");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_attribute_selector_eof_behavior.html b/layout/style/test/test_attribute_selector_eof_behavior.html
new file mode 100644
index 0000000000..76635f9ed0
--- /dev/null
+++ b/layout/style/test/test_attribute_selector_eof_behavior.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for EOF behavior of attribute selectors in selectors API</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+test(function() {
+  assert_equals(document.querySelector("[id"),
+                document.getElementById("log"),
+                "We only have one element with an id");
+}, "']' should be implied if EOF after attribute name");
+test(function() {
+  assert_equals(document.querySelector('[id="log"'),
+                document.getElementById("log"),
+                "We should find the element with id=log");
+}, "']' should be implied if EOF after attribute value");
+</script>
diff --git a/layout/style/test/test_backdrop_filter_enabled_state.html b/layout/style/test/test_backdrop_filter_enabled_state.html
new file mode 100644
index 0000000000..f8f2995b28
--- /dev/null
+++ b/layout/style/test/test_backdrop_filter_enabled_state.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<head>
+  <meta charset=utf-8>
+  <title>Test Backdrop-Filter Enabled State</title>
+  <link rel="author" title="Erik Nordin" href="mailto:nordzilla@mozilla.com">
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+</head>
+<script>
+SimpleTest.waitForExplicitFinish();
+
+(async function() {
+  for (let enabled of [true, false]) {
+    await SpecialPowers.pushPrefEnv({"set": [["layout.css.backdrop-filter.enabled", enabled]]});
+    is(enabled, CSS.supports("backdrop-filter: initial"),
+      "backdrop-filter is available only if backdrop-filter pref is set");
+  }
+  SimpleTest.finish();
+}());
+
+</script>
+
diff --git a/layout/style/test/test_background_blend_mode.html b/layout/style/test/test_background_blend_mode.html
new file mode 100644
index 0000000000..23551ebda9
--- /dev/null
+++ b/layout/style/test/test_background_blend_mode.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for miscellaneous computed style issues</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=">Mozilla Bug </a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for miscellaneous computed style issues **/
+
+var frame_container = document.getElementById("display");
+var noframe_container = document.getElementById("content");
+
+function test_bug_841601() {
+  // Test handling of background-blend-mode
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+
+  frame_container.appendChild(p);
+  is(cs.backgroundBlendMode, "normal",
+     "default value of background-blend-mode");
+
+  p.setAttribute("style", "background-blend-mode: normal, invalid");
+  cs = getComputedStyle(p, "");
+  is(cs.backgroundBlendMode, "normal",
+     "set invalid blendmode");
+
+  p.setAttribute("style", "background-blend-mode: normal, normal");
+  cs = getComputedStyle(p, "");
+  is(cs.backgroundBlendMode, "normal, normal",
+     "set normal blendmode twice");
+
+  p.setAttribute("style", "background-blend-mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity");
+  cs = getComputedStyle(p, "");
+  is(cs.backgroundBlendMode, "normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity",
+     "set all blendmodes");
+
+  p.remove();
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+test_bug_841601();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_border_device_pixel_rounding_initial_style.html b/layout/style/test/test_border_device_pixel_rounding_initial_style.html
new file mode 100644
index 0000000000..a8b5b0546d
--- /dev/null
+++ b/layout/style/test/test_border_device_pixel_rounding_initial_style.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css">
+<iframe id="frame"></iframe>
+<script>
+SimpleTest.waitForExplicitFinish();
+SpecialPowers.pushPrefEnv({ "set": [["layout.css.devPixelsPerPx", "1.25"]] },
+  function() {
+    is(window.devicePixelRatio, 1.25, "devPixelsPerPx should work");
+    const frame = document.getElementById("frame");
+    frame.addEventListener("load", function() {
+      let doc = frame.contentDocument;
+      let win = frame.contentWindow;
+      is(win.devicePixelRatio, 1.25, "devPixelsPerPx should work inside the frame");
+      is(win.getComputedStyle(doc.querySelector("div")).borderTopWidth, "0.8px", "Shouldn't incorrectly round with 60 app units after getting the initial style");
+      SimpleTest.finish();
+    });
+    frame.srcdoc = "<div style='border: 1px solid; display: none;'></div>";
+  });
+</script>
diff --git a/layout/style/test/test_box_size_keywords.html b/layout/style/test/test_box_size_keywords.html
new file mode 100644
index 0000000000..c4074c7d8f
--- /dev/null
+++ b/layout/style/test/test_box_size_keywords.html
@@ -0,0 +1,170 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for keywords on box sizing properties</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script 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=1122253">Mozilla Bug 1122253</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1496558">Mozilla Bug 1496558</a>
+
+<style>
+#outer {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+}
+#horizontal, #vertical {
+  background-color: #ccc;
+  line-height: 1px;
+}
+#vertical {
+  writing-mode: vertical-rl;
+  position: relative;
+  top: 10px;
+}
+.small, .big {
+  display: inline-block;
+  block-size: 10px;
+}
+.small {
+  background-image: linear-gradient(to bottom right, black, fuchsia);
+  inline-size: 10px;
+}
+.big {
+  background-image: linear-gradient(to bottom right, black, cyan);
+  inline-size: 90px;
+}
+</style>
+
+<div id=outer>
+  <div id=horizontal><span class=small></span><span class=big></span><span class=big></span><span class=big></span></div>
+  <div id=vertical><span class=small></span><span class=big></span><span class=big></span><span class=big></span></div>
+</div>
+
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 1122253 and Bug 1496558 **/
+
+// Test that the -moz-available, min-content, max-content, and
+// fit-content keywords are usable only on width, when the writing
+// mode is horizontal, or height, when the writing mode is vertical,
+// and that they are always available on inline-size and never on
+// block-size.  When used on the wrong properties, they should be
+// equivalent to unset.
+//
+// Also test the corresponding min-* and max-* properties.
+
+var gTests = [
+  { orientation: "horizontal", property: "width", specified_value: "-moz-available", computed_value: "200px", },
+  { orientation: "horizontal", property: "width", specified_value: "min-content", computed_value: "90px", },
+  { orientation: "horizontal", property: "width", specified_value: "max-content", computed_value: "280px", },
+  { orientation: "horizontal", property: "width", specified_value: "fit-content", computed_value: "200px", },
+  { orientation: "horizontal", property: "inline-size", specified_value: "-moz-available", computed_value: "200px", },
+  { orientation: "horizontal", property: "inline-size", specified_value: "min-content", computed_value: "90px", },
+  { orientation: "horizontal", property: "inline-size", specified_value: "max-content", computed_value: "280px", },
+  { orientation: "horizontal", property: "inline-size", specified_value: "fit-content", computed_value: "200px", },
+  { orientation: "horizontal", property: "min-width", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "horizontal", property: "min-width", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "horizontal", property: "min-width", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "horizontal", property: "min-width", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "horizontal", property: "min-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "horizontal", property: "min-inline-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "horizontal", property: "min-inline-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "horizontal", property: "min-inline-size", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "horizontal", property: "max-width", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "horizontal", property: "max-width", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "horizontal", property: "max-width", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "horizontal", property: "max-width", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "horizontal", property: "max-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "horizontal", property: "max-inline-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "horizontal", property: "max-inline-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "horizontal", property: "max-inline-size", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "vertical", property: "height", specified_value: "-moz-available", computed_value: "200px", },
+  { orientation: "vertical", property: "height", specified_value: "min-content", computed_value: "90px", },
+  { orientation: "vertical", property: "height", specified_value: "max-content", computed_value: "280px", },
+  { orientation: "vertical", property: "height", specified_value: "fit-content", computed_value: "200px", },
+  { orientation: "vertical", property: "inline-size", specified_value: "-moz-available", computed_value: "200px", },
+  { orientation: "vertical", property: "inline-size", specified_value: "min-content", computed_value: "90px", },
+  { orientation: "vertical", property: "inline-size", specified_value: "max-content", computed_value: "280px", },
+  { orientation: "vertical", property: "inline-size", specified_value: "fit-content", computed_value: "200px", },
+  { orientation: "vertical", property: "min-height", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "vertical", property: "min-height", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "vertical", property: "min-height", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "vertical", property: "min-height", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "vertical", property: "min-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "vertical", property: "min-inline-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "vertical", property: "min-inline-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "vertical", property: "min-inline-size", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "vertical", property: "max-height", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "vertical", property: "max-height", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "vertical", property: "max-height", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "vertical", property: "max-height", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "vertical", property: "max-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "vertical", property: "max-inline-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "vertical", property: "max-inline-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "vertical", property: "max-inline-size", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "-moz-available", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "min-content", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "max-content", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "fit-content", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-available", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "min-content", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "max-content", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "fit-content", computed_value: "20px", },
+  { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "-moz-available", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "min-content", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "max-content", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "fit-content", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-available", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "min-content", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "max-content", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "fit-content", computed_value: "20px", },
+  { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "fit-content", computed_value: "fit-content", },
+  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-available", computed_value: "-moz-available", },
+  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "min-content", computed_value: "min-content", },
+  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "max-content", computed_value: "max-content", },
+  { orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "fit-content", computed_value: "fit-content", },
+];
+
+gTests.forEach(function(t) {
+  var e = document.getElementById(t.orientation);
+  e.style = (t.prerequisites || "") + t.property + ": " + t.specified_value;
+  is(get_computed_value(getComputedStyle(e), t.property), t.computed_value,
+     `${t.orientation} ${t.property}:${t.specified_value}`);
+  e.style = "";
+});
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1055933.html b/layout/style/test/test_bug1055933.html
new file mode 100644
index 0000000000..de96d1d441
--- /dev/null
+++ b/layout/style/test/test_bug1055933.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>

+<html>

+<!--

+https://bugzilla.mozilla.org/show_bug.cgi?id=1055933

+-->

+<head>

+  <title>Test for Bug 1055933</title>

+  <script src="/tests/SimpleTest/SimpleTest.js"></script>

+  <script src="/tests/SimpleTest/EventUtils.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=1055933">Mozilla Bug 1055933</a>

+<p id="display"></p>

+<div id="content" style="display: none">

+

+</div>

+<pre id="test">

+<script class="testbody" type="text/javascript">

+/** Test for Bug 1055933 **/

+SimpleTest.waitForExplicitFinish();

+addLoadEvent(function() {

+	var element = document.getElementById('area');

+	is(getComputedStyle(element).cursor, "pointer", "Does the <area> element return the correct cursor?");

+	//Force mPrimaryFrame to be set

+	requestAnimationFrame( function() {

+		synthesizeMouseAtCenter(document.getElementById('image'), {}, window);

+		is(getComputedStyle(element).cursor, "pointer", "Does the <area> element still return the correct cursor after mPrimaryFrame is set?");

+		SimpleTest.finish();

+	});

+});

+</script>

+</pre>

+  <div style="cursor: crosshair">

+    <img usemap="#map" border ="0" id="image" src="file_bug1055933_circle-xxl.png">

+    <map id="map" name="map">

+      <area id="area" onmousedown="this.setCapture();" onmouseup="this.releaseCapture();" shape="circle" coords="128,129,103" style="cursor: pointer">

+    </map>

+  </div>

+</body>

+</html>

diff --git a/layout/style/test/test_bug1089417.html b/layout/style/test/test_bug1089417.html
new file mode 100644
index 0000000000..d4b09beffd
--- /dev/null
+++ b/layout/style/test/test_bug1089417.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1089417
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1089417</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  /** Test for Bug 1089417 **/
+
+  SimpleTest.waitForExplicitFinish();
+
+  function run() {
+    var f = document.getElementById("f");
+    var fwin = f.contentWindow;
+    var fdoc = f.contentDocument;
+
+    f.height = "400";
+    fdoc.getElementById("s").disabled = false;
+    is(fwin.getComputedStyle(fdoc.documentElement).backgroundColor,
+       "rgb(0, 128, 0)",
+       "media query change should have restyled");
+
+    f.height = "200";
+    fdoc.getElementById("s").disabled = true;
+    fdoc.getElementById("s").disabled = false;
+    is(fwin.getComputedStyle(fdoc.documentElement).backgroundColor,
+       "rgb(255, 0, 0)",
+       "media query change should have restyled");
+    SimpleTest.finish();
+  }
+
+  </script>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1089417">Mozilla Bug 1089417</a>
+<div id="display">
+  <iframe id="f" src="file_bug1089417_iframe.html" width="300" height="200"></iframe>
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1112014.html b/layout/style/test/test_bug1112014.html
new file mode 100644
index 0000000000..cd4330e50f
--- /dev/null
+++ b/layout/style/test/test_bug1112014.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1112014
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1112014</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="property_database.js"></script>
+  <script type="application/javascript">
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(2);
+
+async function test() {
+  const InspectorUtils = SpecialPowers.InspectorUtils;
+
+  // This holds a canonical test value for each TYPE_ constant.
+  let testValues = {
+    "color": "rgb(3,3,3)",
+    "gradient": "linear-gradient( 45deg, blue, red )",
+    "timing-function": "cubic-bezier(0.1, 0.7, 1.0, 0.1)",
+  };
+
+  // The canonical test values don't work for all properties, in
+  // particular some shorthand properties.  For these cases we have
+  // override values.
+  let overrideValues = {
+    "box-shadow": {
+      "color": testValues.color + " 2px 2px"
+    },
+    "-webkit-box-shadow": {
+      "color": testValues.color + " 2px 2px"
+    },
+    "scrollbar-color": {
+      "color": testValues.color + " " + testValues.color,
+    },
+    "text-shadow": {
+      "color": testValues.color + " 2px 2px"
+    },
+  };
+
+
+  // Ensure that all the TYPE_ constants have a representative
+  // test value, to try to ensure that this test is updated
+  // whenever a new type is added.
+  let reps = await SpecialPowers.spawn(window, [], () => {
+    return Object.getOwnPropertyNames(InspectorUtils).filter(tc => /TYPE_/.test(tc));
+  }).then(v => v.filter(tc => !(tc in testValues)));
+  is(reps.join(","), "", "all types have representative test value");
+
+  for (let propertyName in gCSSProperties) {
+    let prop = gCSSProperties[propertyName];
+
+    for (let iter in testValues) {
+      let testValue = testValues[iter];
+      if (propertyName in overrideValues &&
+          iter in overrideValues[propertyName]) {
+        testValue = overrideValues[propertyName][iter];
+      }
+
+      let supported =
+        InspectorUtils.cssPropertySupportsType(propertyName, iter);
+      let parsed = CSS.supports(propertyName, testValue);
+      is(supported, parsed, propertyName + " supports " + iter);
+    }
+  }
+
+  // Regression test for an assertion failure in an earlier version of
+  // the code.  Note that cssPropertySupportsType returns false for
+  // all types for a variable.
+  ok(!InspectorUtils.cssPropertySupportsType("--variable", "color"),
+     "cssPropertySupportsType returns false for variable");
+
+  SimpleTest.finish();
+}
+  </script>
+</head>
+<body onload="test()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1112014">Mozilla Bug 1112014</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1203766.html b/layout/style/test/test_bug1203766.html
new file mode 100644
index 0000000000..42da6520ac
--- /dev/null
+++ b/layout/style/test/test_bug1203766.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for bug 1203766</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+<style>
+.x { color: red; }
+body > .x { color: green; }
+.y { color: green; }
+body > .y { display: none; color: red; }
+div > .z { color: red; }
+.z { color: green; }
+.a { color: red; }
+body > .a { display: none; color: green; }
+.b { display: none; }
+.c { color: red; }
+.b > .c { color: green; }
+.e { color: red; }
+.d > .e { color: green; }
+.f { color: red; }
+.g { color: green; }
+.h > .i { color: red; }
+.j > .i { color: green; }
+</style>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1203766">Mozilla Bug 1203766</a>
+<p id="display"></p>
+<div class=y></div>
+<div class=b></div>
+<pre id="test">
+<script class="testbody">
+SimpleTest.waitForExplicitFinish();
+
+addLoadEvent(function() {
+
+  // Element that goes from being out of the document to in the document.
+  var e = document.createElement("div");
+  e.className = "x";
+  var cs = getComputedStyle(e);
+  is(cs.color, "");
+  document.body.appendChild(e);
+  is(cs.color, "rgb(0, 128, 0)");
+
+  // Element that goes from in the document (and display:none) to out of
+  // the document.
+  e = document.querySelector(".y");
+  cs = getComputedStyle(e);
+  is(cs.color, "rgb(255, 0, 0)");
+  e.remove();
+  is(cs.color, "");
+
+  // Element that is removed from an out-of-document tree.
+  e = document.createElement("div");
+  f = document.createElement("span");
+  f.className = "z";
+  e.appendChild(f);
+  cs = getComputedStyle(f);
+  is(cs.color, "");
+  f.remove();
+  is(cs.color, "");
+
+  // Element going from not in document to in document and display:none.
+  e = document.createElement("div");
+  e.className = "a";
+  cs = getComputedStyle(e);
+  is(cs.color, "");
+  document.body.appendChild(e);
+  is(cs.color, "rgb(0, 128, 0)");
+
+  // Element going from not in document to in document and child of
+  // display:none element.
+  e = document.createElement("div");
+  e.className = "c";
+  cs = getComputedStyle(e);
+  is(cs.color, "");
+  document.querySelector(".b").appendChild(e);
+  is(cs.color, "rgb(0, 128, 0)");
+
+  // Element that is added to an out-of-document tree.
+  e = document.createElement("div");
+  e.className = "d";
+  f = document.createElement("span");
+  f.className = "e";
+  cs = getComputedStyle(f);
+  is(cs.color, "");
+  e.appendChild(f);
+  is(cs.color, "");
+
+  // Element that is outside the document when an attribute is modified to
+  // cause a different rule to match.
+  e = document.createElement("div");
+  e.className = "f";
+  cs = getComputedStyle(e);
+  is(cs.color, "");
+  e.className = "g";
+  is(cs.color, "");
+
+  // Element that is outside the document when an ancestor is modified to
+  // cause a different rule to match.
+  e = document.createElement("div");
+  e.className = "h";
+  f = document.createElement("span");
+  f.className = "i";
+  e.appendChild(f);
+  cs = getComputedStyle(f);
+  is(cs.color, "");
+  e.className = "j";
+  is(cs.color, "");
+
+  SimpleTest.finish();
+});
+</script>
+</pre>
diff --git a/layout/style/test/test_bug1232829.html b/layout/style/test/test_bug1232829.html
new file mode 100644
index 0000000000..65bea2014d
--- /dev/null
+++ b/layout/style/test/test_bug1232829.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1232829
+-->
+<head>
+<meta charset="utf-8">
+<title>Test for Bug 1232829</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+<script>
+
+/** Test for Bug 1232829 **/
+
+// This should be a crashtest but it relies on using a pop-up window which
+// isn't supported in crashtests.
+function boom() {
+  var popup = window.open("data:text/html,2");
+  setTimeout(function() {
+    var frameDoc = document.querySelector("iframe").contentDocument;
+    frameDoc.write("3");
+    requestAnimationFrame(function() {
+      popup.close();
+      ok(true, "Didn't crash");
+      SimpleTest.finish();
+    });
+  }, 0);
+}
+
+SimpleTest.waitForExplicitFinish();
+</script>
+</head>
+<body onload="boom()">
+  <iframe srcdoc="<style>@keyframes a { to { opacity: 0.5 } }</style>
+                  <div style='animation: a 1ms'></div>"></iframe>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1292447.html b/layout/style/test/test_bug1292447.html
new file mode 100644
index 0000000000..6937b648c5
--- /dev/null
+++ b/layout/style/test/test_bug1292447.html
@@ -0,0 +1,350 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+  Was for: https://bugzilla.mozilla.org/show_bug.cgi?id=365932
+  Updated for: https://bugzilla.mozilla.org/show_bug.cgi?id=1292447
+-->
+<head>
+  <title>Test for Bug 1292447</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style>
+    #content {
+      width: 800px;
+      height: 800px;
+      padding: 0 200px;
+      border-width: 0 200px;
+      border-style: solid;
+      border-color: transparent
+    }
+    #content2 {
+      display: none;
+    }
+    #content > div, #content2 > div {
+      width: 400px;
+      height: 400px;
+      padding: 0 100px;
+      border-width: 0 100px;
+      border-style: solid;
+      border-color: transparent
+    }
+    #content > div.auto, #content2 > div.auto {
+      width: auto; height: auto;
+      padding: 0 100px;
+      border-width: 0 80px;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1292447">Mozilla Bug 1292447</a>
+<p id="display"></p>
+<div id="content">
+  <div id="indent1" style="text-indent: 400px"></div>
+  <div id="indent2" style="text-indent: 50%"></div>
+
+  <div id="widthheight-1" class="auto"></div>
+
+  <div id="minwidth1-1" style="min-width: 200px"></div>
+  <div id="minwidth1-2" style="min-width: 25%"></div>
+  <div id="minwidth2-1" style="min-width: 600px"></div>
+  <div id="minwidth2-2" style="min-width: 75%"></div>
+  <div id="minwidth3-1" class="auto" style="min-width: 200px"></div>
+  <div id="minwidth3-2" class="auto" style="min-width: 25%"></div>
+  <div id="minwidth4-1" class="auto" style="min-width: 600px"></div>
+  <div id="minwidth4-2" class="auto" style="min-width: 75%"></div>
+
+  <div id="maxwidth1-1" style="max-width: 320px"></div>
+  <div id="maxwidth1-2" style="max-width: 40%"></div>
+  <div id="maxwidth2-1" style="max-width: 480px"></div>
+  <div id="maxwidth2-2" style="max-width: 60%"></div>
+  <div id="maxwidth3-1" class="auto" style="max-width: 320px"></div>
+  <div id="maxwidth3-2" class="auto" style="max-width: 40%"></div>
+  <div id="maxwidth4-1" class="auto" style="max-width: 480px"></div>
+  <div id="maxwidth4-2" class="auto" style="max-width: 60%"></div>
+
+  <div id="minmaxwidth1-1" style="min-width: 200px; max-width: 320px"></div>
+  <div id="minmaxwidth1-2" style="min-width: 200px; max-width: 40%"></div>
+  <div id="minmaxwidth2-1" style="min-width: 25%; max-width: 320px"></div>
+  <div id="minmaxwidth2-2" style="min-width: 25%; max-width: 40%"></div>
+  <div id="minmaxwidth3-1" style="min-width: 600px; max-width: 320px"></div>
+  <div id="minmaxwidth3-2" style="min-width: 600px; max-width: 40%"></div>
+  <div id="minmaxwidth4-1" style="min-width: 75%; max-width: 320px"></div>
+  <div id="minmaxwidth4-2" style="min-width: 75%; max-width: 40%"></div>
+  <div id="minmaxwidth5-1"
+       style="display:none; min-width: 200px; max-width: 320px"></div>
+  <div id="minmaxwidth6-1"
+       style="display: none; min-width: 25%; max-width: 320px"></div>
+  <div id="minmaxwidth7-1"
+       style="display: none; min-width: 600px; max-width: 320px"></div>
+  <div id="minmaxwidth7-2"
+       style="display: none; min-width: 600px; max-width: 40%"></div>
+  <div id="minmaxwidth8-1" class="auto"
+       style="min-width: 200px; max-width: 320px"></div>
+  <div id="minmaxwidth8-2" class="auto"
+       style="min-width: 200px; max-width: 40%"></div>
+  <div id="minmaxwidth9-1" class="auto"
+       style="min-width: 25%; max-width: 320px"></div>
+  <div id="minmaxwidth9-2" class="auto"
+       style="min-width: 25%; max-width: 40%"></div>
+  <div id="minmaxwidth10-1" class="auto"
+       style="min-width: 600px; max-width: 320px"></div>
+  <div id="minmaxwidth10-2" class="auto"
+       style="min-width: 600px; max-width: 40%"></div>
+  <div id="minmaxwidth11-1" class="auto"
+       style="min-width: 75%; max-width: 320px"></div>
+  <div id="minmaxwidth11-2" class="auto"
+       style="min-width: 75%; max-width: 40%"></div>
+
+  <div id="minheight1-1" style="min-height: 200px"></div>
+  <div id="minheight1-2" style="min-height: 25%"></div>
+  <div id="minheight2-1" style="min-height: 600px"></div>
+  <div id="minheight2-2" style="min-height: 75%"></div>
+  <div id="minheight3-1" class="auto" style="min-height: 200px"></div>
+  <div id="minheight3-2" class="auto" style="min-height: 25%"></div>
+  <div id="minheight4-1" class="auto" style="min-height: 600px"></div>
+  <div id="minheight4-2" class="auto" style="min-height: 75%"></div>
+
+  <div id="maxheight1-1" style="max-height: 320px"></div>
+  <div id="maxheight1-2" style="max-height: 40%"></div>
+  <div id="maxheight2-1" style="max-height: 480px"></div>
+  <div id="maxheight2-2" style="max-height: 60%"></div>
+  <div id="maxheight3-1" class="auto" style="max-height: 320px"></div>
+  <div id="maxheight3-2" class="auto" style="max-height: 40%"></div>
+  <div id="maxheight4-1" class="auto" style="max-height: 480px"></div>
+  <div id="maxheight4-2" class="auto" style="max-height: 60%"></div>
+
+  <div id="minmaxheight1-1" style="min-height: 200px; max-height: 320px"></div>
+  <div id="minmaxheight1-2" style="min-height: 200px; max-height: 40%"></div>
+  <div id="minmaxheight2-1" style="min-height: 25%; max-height: 320px"></div>
+  <div id="minmaxheight2-2" style="min-height: 25%; max-height: 40%"></div>
+  <div id="minmaxheight3-1" style="min-height: 600px; max-height: 320px"></div>
+  <div id="minmaxheight3-2" style="min-height: 600px; max-height: 40%"></div>
+  <div id="minmaxheight4-1" style="min-height: 75%; max-height: 320px"></div>
+  <div id="minmaxheight4-2" style="min-height: 75%; max-height: 40%"></div>
+  <div id="minmaxheight5-1"
+       style="display:none; min-height: 200px; max-height: 320px"></div>
+  <div id="minmaxheight6-1"
+       style="display: none; min-height: 25%; max-height: 320px"></div>
+  <div id="minmaxheight7-1"
+       style="display: none; min-height: 600px; max-height: 320px"></div>
+  <div id="minmaxheight7-2"
+       style="display: none; min-height: 600px; max-height: 40%"></div>
+  <div id="minmaxheight8-1" class="auto"
+       style="min-height: 200px; max-height: 320px"></div>
+  <div id="minmaxheight8-2" class="auto"
+       style="min-height: 200px; max-height: 40%"></div>
+  <div id="minmaxheight9-1" class="auto"
+       style="min-height: 25%; max-height: 320px"></div>
+  <div id="minmaxheight9-2" class="auto"
+       style="min-height: 25%; max-height: 40%"></div>
+  <div id="minmaxheight10-1" class="auto"
+       style="min-height: 600px; max-height: 320px"></div>
+  <div id="minmaxheight10-2" class="auto"
+       style="min-height: 600px; max-height: 40%"></div>
+  <div id="minmaxheight11-1" class="auto"
+       style="min-height: 75%; max-height: 320px"></div>
+  <div id="minmaxheight11-2" class="auto"
+       style="min-height: 75%; max-height: 40%"></div>
+
+  <div id="radius1" style="border-radius: 80px"></div>
+  <div id="radius2" style="border-radius: 20% / 20%"></div>
+</div>
+<div id="content2" style="display: none">
+  <div id="indent3" style="text-indent: 400px"></div>
+  <div id="indent4" style="text-indent: 50%"></div>
+
+  <div id="minwidth1-3" style="min-width: 200px"></div>
+  <div id="minwidth1-4" style="min-width: 25%"></div>
+  <div id="minwidth2-3" style="min-width: 600px"></div>
+  <div id="minwidth2-4" style="min-width: 75%"></div>
+
+  <div id="maxwidth1-3" style="max-width: 320px"></div>
+  <div id="maxwidth1-4" style="max-width: 40%"></div>
+  <div id="maxwidth2-3" style="max-width: 480px"></div>
+  <div id="maxwidth2-4" style="max-width: 60%"></div>
+
+  <div id="minmaxwidth1-3" style="min-width: 200px; max-width: 320px"></div>
+  <div id="minmaxwidth1-4" style="min-width: 200px; max-width: 40%"></div>
+  <div id="minmaxwidth2-3" style="min-width: 25%; max-width: 320px"></div>
+  <div id="minmaxwidth2-4" style="min-width: 25%; max-width: 40%"></div>
+  <div id="minmaxwidth3-3" style="min-width: 600px; max-width: 320px"></div>
+  <div id="minmaxwidth3-4" style="min-width: 600px; max-width: 40%"></div>
+  <div id="minmaxwidth4-3" style="min-width: 75%; max-width: 320px"></div>
+  <div id="minmaxwidth4-4" style="min-width: 75%; max-width: 40%"></div>
+
+  <div id="minheight1-3" style="min-height: 200px"></div>
+  <div id="minheight1-4" style="min-height: 25%"></div>
+  <div id="minheight2-3" style="min-height: 600px"></div>
+  <div id="minheight2-4" style="min-height: 75%"></div>
+
+  <div id="maxheight1-3" style="max-height: 320px"></div>
+  <div id="maxheight1-4" style="max-height: 40%"></div>
+  <div id="maxheight2-3" style="max-height: 480px"></div>
+  <div id="maxheight2-4" style="max-height: 60%"></div>
+
+  <div id="minmaxheight1-3" style="min-height: 200px; max-height: 320px"></div>
+  <div id="minmaxheight1-4" style="min-height: 200px; max-height: 40%"></div>
+  <div id="minmaxheight2-3" style="min-height: 25%; max-height: 320px"></div>
+  <div id="minmaxheight2-4" style="min-height: 25%; max-height: 40%"></div>
+  <div id="minmaxheight3-3" style="min-height: 600px; max-height: 320px"></div>
+  <div id="minmaxheight3-4" style="min-height: 600px; max-height: 40%"></div>
+  <div id="minmaxheight4-3" style="min-height: 75%; max-height: 320px"></div>
+  <div id="minmaxheight4-4" style="min-height: 75%; max-height: 40%"></div>
+
+  <div id="radius3" style="border-radius: 80px"></div>
+  <div id="radius4" style="border-radius: 20%"></div>
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 1292447 **/
+
+document.body.offsetWidth;
+
+doATest("text-indent", "indent", 400, 50);
+doATest("border-top-left-radius", "radius", 80, 20);
+
+doATest("width", "widthheight-", 440, 0, true);
+doATest("height", "widthheight-", 0, 0, true);
+
+doATest("min-width", "minwidth1-", 200, 25);
+doATest("min-width", "minwidth2-", 600, 75);
+doATest("max-width", "maxwidth1-", 320, 40);
+doATest("max-width", "maxwidth2-", 480, 60);
+
+// Test that min-width doesn't affect computed max-width
+doATest("max-width", "minmaxwidth1-", 320, 40);
+doATest("max-width", "minmaxwidth2-", 320, 40);
+doATest("max-width", "minmaxwidth3-", 320, 40);
+doATest("max-width", "minmaxwidth4-", 320, 40);
+
+// Test that max and min-width affect computed width correctly
+doATest("width", "minwidth1-", 400, 0, true);
+doATest("width", "minwidth2-", 600, 0, true);
+doATest("width", "minwidth3-", 440, 0, true);
+doATest("width", "minwidth4-", 600, 0, true);
+doATest("width", "maxwidth1-", 320, 0, true);
+doATest("width", "maxwidth2-", 400, 0, true);
+doATest("width", "maxwidth3-", 320, 0, true);
+doATest("width", "maxwidth4-", 440, 0, true);
+doATest("width", "minmaxwidth1-", 320, 0, true);
+doATest("width", "minmaxwidth2-", 320, 0, true);
+doATest("width", "minmaxwidth3-", 600, 0, true);
+doATest("width", "minmaxwidth4-", 600, 0, true);
+doATest("width", "minmaxwidth5-", 400, 0, true);
+doATest("width", "minmaxwidth6-", 400, 0, true);
+doATest("width", "minmaxwidth7-", 400, 0, true);
+doATest("width", "minmaxwidth8-", 320, 0, true);
+doATest("width", "minmaxwidth9-", 320, 0, true);
+doATest("width", "minmaxwidth10-", 600, 0, true);
+doATest("width", "minmaxwidth11-", 600, 0, true);
+
+doATest("min-height", "minheight1-", 200, 25);
+doATest("min-height", "minheight2-", 600, 75);
+doATest("max-height", "maxheight1-", 320, 40);
+doATest("max-height", "maxheight2-", 480, 60);
+
+// Test that min-height doesn't affect computed max-height
+doATest("max-height", "minmaxheight1-", 320, 40);
+doATest("max-height", "minmaxheight2-", 320, 40);
+doATest("max-height", "minmaxheight3-", 320, 40);
+doATest("max-height", "minmaxheight4-", 320, 40);
+
+// Test that max and min-height affect computed height correctly
+doATest("height", "minheight1-", 400, 0, true);
+doATest("height", "minheight2-", 600, 0, true);
+doATest("height", "minheight3-", 200, 0, true);
+doATest("height", "minheight4-", 600, 0, true);
+doATest("height", "maxheight1-", 320, 0, true);
+doATest("height", "maxheight2-", 400, 0, true);
+doATest("height", "maxheight3-", 0, 0, true);
+doATest("height", "maxheight4-", 0, 0, true);
+doATest("height", "minmaxheight1-", 320, 0, true);
+doATest("height", "minmaxheight2-", 320, 0, true);
+doATest("height", "minmaxheight3-", 600, 0, true);
+doATest("height", "minmaxheight4-", 600, 0, true);
+doATest("height", "minmaxheight5-", 400, 0, true);
+doATest("height", "minmaxheight6-", 400, 0, true);
+doATest("height", "minmaxheight7-", 400, 0, true);
+doATest("height", "minmaxheight8-", 200, 0, true);
+doATest("height", "minmaxheight9-", 200, 0, true);
+doATest("height", "minmaxheight10-", 600, 0, true);
+doATest("height", "minmaxheight11-", 600, 0, true);
+
+function style(id) {
+  return document.defaultView.getComputedStyle($(id));
+}
+
+function round(num, decimals) {
+  return Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals);
+}
+
+function coordValueTest(camelProp, decl, coordVal, prettyName) {
+  is(decl[camelProp], coordVal + "px", prettyName);
+}
+
+function percentValueTest(camelProp, decl, percentVal, prettyName) {
+  is(decl[camelProp], percentVal + "%", prettyName);
+}
+
+function doATest(propName, idBase, coordVal, percentVal, resolveToUsedVal = false) {
+  var cssCamelPropName = "";
+  var parts = propName.split("-");
+  ok(parts.length > 0, "CSS prop name should not be empty");
+  var i;
+  if (parts[0]) {
+    i = 0;
+  } else {
+    is(parts[1], "moz", "Testing an extension property that's not -moz");
+    ok(parts.length > 2, "-moz prop name should not have more than 2 parts");
+    cssCamelPropName = "Moz";
+    i = 2;
+  }
+  for (; i < parts.length; ++i) {
+    var part = parts[i];
+    isnot(part, "", "Must have a nonempty part");
+    if (cssCamelPropName) {
+      cssCamelPropName += part.charAt(0).toUpperCase() +
+                          part.substring(1, part.length);
+    } else {
+      cssCamelPropName += part;
+    }
+  }
+
+  /* Test $(id)-1 */
+  coordValueTest(cssCamelPropName,
+                 style(idBase + "1"), coordVal,
+                 propName + " of " + idBase + "1");
+
+  if (!$(idBase + "2")) {
+    // Nothing else to do here
+    return
+  }
+
+  /* Test $(id)-2 */
+  if (resolveToUsedVal) {
+    coordValueTest(cssCamelPropName,
+                   style(idBase + "2"), coordVal,
+                   propName + " of " + idBase + "2");
+  } else {
+    percentValueTest(cssCamelPropName,
+                     style(idBase + "2"), percentVal,
+                     propName + " of " + idBase + "2");
+  }
+
+  if (percentVal) {
+    /* Test $(id)-3 */
+    coordValueTest(cssCamelPropName,
+                   style(idBase + "3"), coordVal,
+                   propName + " of " + idBase + "3");
+
+    /* Test $(id)-4 */
+    percentValueTest(cssCamelPropName,
+                     style(idBase + "4"), percentVal,
+                     propName + " of " + idBase + "4");
+  }
+}
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1330375.html b/layout/style/test/test_bug1330375.html
new file mode 100644
index 0000000000..c9bc0f6715
--- /dev/null
+++ b/layout/style/test/test_bug1330375.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!-- https://bugzil.la/1330375 -->
+<meta charset="utf-8">
+<title>Test for Bug 1330375</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest.css"/>
+<body>
+    <div id="content">
+        <table>
+            <tbody>
+                <tr><td>lorem ipsum</td><td>dolor sit</td><td>amet</td><td>consectetur adipsicing</td><td>elit.</td></tr>
+                <tr><td>lorem ipsum</td><td>dolor sit</td><td>amet</td><td>consectetur adipsicing</td><td>elit.</td></tr>
+                <tr><td>lorem ipsum</td><td>dolor sit</td><td>amet</td><td>consectetur adipsicing</td><td>elit.</td></tr>
+                <tr><td>lorem ipsum</td><td>dolor sit</td><td>amet</td><td>consectetur adipsicing</td><td>elit.</td></tr>
+                <tr><td>lorem ipsum</td><td>dolor sit</td><td>amet</td><td>consectetur adipsicing</td><td>elit.</td></tr>
+                <tr><td>lorem ipsum</td><td>dolor sit</td><td>amet</td><td>consectetur adipsicing</td><td>elit.</td></tr>
+                <tr><td>lorem ipsum</td><td>dolor sit</td><td>amet</td><td>consectetur adipsicing</td><td>elit.</td></tr>
+                <tr><td>lorem ipsum</td><td>dolor sit</td><td>amet</td><td>consectetur adipsicing</td><td>elit.</td></tr>
+                <tr><td>lorem ipsum</td><td>dolor sit</td><td>amet</td><td>consectetur adipsicing</td><td>elit.</td></tr>
+                <tr><td>lorem ipsum</td><td>dolor sit</td><td>amet</td><td>consectetur adipsicing</td><td>elit.</td></tr>
+            </tbody>
+        </table>
+    </div>
+</body>
+<script>
+"use strict";
+
+const gUtils = SpecialPowers.getDOMWindowUtils(window);
+
+function flush_layout(element) {
+  (element || document.documentElement).offsetHeight;
+}
+
+SimpleTest.waitForExplicitFinish();
+
+window.onload = function() {
+  flush_layout(document.getElementById("content"));
+
+  let before = {
+      framesConstructed: gUtils.framesConstructed,
+      framesReflowed: gUtils.framesReflowed,
+  };
+
+  // Begin test
+  let rows = document.getElementsByTagName("tr");
+  for (var r = 0; r < rows.length; r++) {
+    let row = rows[r];
+    row.innerText;
+    // Cause potential invalidation of layout:
+    row.style.display = "none";
+  }
+
+  is(gUtils.framesConstructed, before.framesConstructed, "Frames constructed should be 0");
+  is(gUtils.framesReflowed, before.framesReflowed, "Frames reflowed should be 0");
+
+  SimpleTest.finish();
+}
+</script>
+
diff --git a/layout/style/test/test_bug1371488.html b/layout/style/test/test_bug1371488.html
new file mode 100644
index 0000000000..7e32fa0031
--- /dev/null
+++ b/layout/style/test/test_bug1371488.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test for bug 1371488</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style id="test">
+    @import url(non-exist-file.css);
+  </style>
+</head>
+<body>
+<pre id="log">
+<script>
+  let sheet = document.getElementById("test").sheet;
+  let rule = sheet.cssRules[0];
+  ok(rule, "The import rule should not be null even if the file fails to load");
+  is(rule.type, CSSRule.IMPORT_RULE, "It is the import rule");
+  ok(rule.styleSheet, "The associated stylesheet should exists as well");
+  is(rule.styleSheet.cssRules.length, 0, "The stylesheet should be empty");
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1375944.html b/layout/style/test/test_bug1375944.html
new file mode 100644
index 0000000000..c265691170
--- /dev/null
+++ b/layout/style/test/test_bug1375944.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test for bug 1375944</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<iframe id="subframe"></iframe>
+<pre id="log">
+<script>
+
+SimpleTest.waitForExplicitFinish();
+
+async function runTest() {
+  let f = new FontFace("Ahem", "url(Ahem.ttf)", {});
+  await f.load();
+  is(f.status, "loaded", "Loaded Ahem font");
+
+  let subframe = document.getElementById("subframe");
+  subframe.src = "file_bug1375944.html";
+  await new Promise(resolve => subframe.onload = resolve);
+  let elem = subframe.contentDocument.getElementById("test");
+  is(elem.getBoundingClientRect().width, 64,
+     "The font should be loaded properly");
+
+  SimpleTest.finish();
+}
+runTest();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1382568.html b/layout/style/test/test_bug1382568.html
new file mode 100644
index 0000000000..23d4dfe5b6
--- /dev/null
+++ b/layout/style/test/test_bug1382568.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test for bug 1382568: calling innerText on an uninitialized presshell doesn't crash</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script>
+  window.onmessage = function(e) {
+    is(e.data.result, "ok", "Child frame should load properly");
+    SimpleTest.finish();
+  };
+</script>
+<iframe src="https://example.com/tests/layout/style/test/bug1382568-iframe.html"></iframe>
+<script>
+  SimpleTest.waitForExplicitFinish();
+</script>
diff --git a/layout/style/test/test_bug1394302.html b/layout/style/test/test_bug1394302.html
new file mode 100644
index 0000000000..e21bcc4ea1
--- /dev/null
+++ b/layout/style/test/test_bug1394302.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1394302
+-->
+<head>
+  <title>Test for Bug 1394302</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+    <style>
+    #inner {
+      animation: setFontSize 0s forwards;
+    }
+    @keyframes setFontSize {
+      to { font-size: calc(110% + 0.1em); }
+    }
+    </style>
+</head>
+<body>
+<div id=outer>
+  <div id=inner></div>
+</div>
+<script>
+var outer = document.getElementById("outer");
+outer.style.fontSize = '10px';
+is(getComputedStyle(inner).fontSize, "12px");
+
+outer.style.fontSize = '20px';
+is(getComputedStyle(inner).fontSize, "24px");
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1443344-1.html b/layout/style/test/test_bug1443344-1.html
new file mode 100644
index 0000000000..fbbcb1ecbb
--- /dev/null
+++ b/layout/style/test/test_bug1443344-1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1443344
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1443344</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  /** Test for Bug 1443344 **/
+  SimpleTest.waitForExplicitFinish();
+
+  var sheetURL = new URL("file_bug1443344.css", location.href);
+  sheetURL.protocol = "http";
+  var link = document.createElement("link");
+  link.href = `data:text/css,@import url("${sheetURL}");`
+  link.rel = "stylesheet";
+  var loadFired = false, errorFired = false;
+  link.onload = () => loadFired = true;
+  link.onerror = () => errorFired = true;
+  document.head.appendChild(link);
+
+  addLoadEvent(() => {
+    is(loadFired, false, "Should not fire onload for erroring @import");
+    is(errorFired, true, "Should fire onerror for erroring @import");
+    is(getComputedStyle($("importTarget")).color, "rgb(0, 255, 0)",
+       "Erroring sheet should not load");
+    SimpleTest.finish();
+  });
+
+  </script>
+  <style>
+    #importTarget { color: rgb(0, 255, 0); }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1443344">Mozilla Bug 1443344</a>
+<p id="display"><div id="importTarget"></div></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1443344-2.html b/layout/style/test/test_bug1443344-2.html
new file mode 100644
index 0000000000..224f575f36
--- /dev/null
+++ b/layout/style/test/test_bug1443344-2.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1443344
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1443344</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  /** Test for Bug 1443344 **/
+  SimpleTest.waitForExplicitFinish();
+
+  var sheetURL = new URL("file_bug1443344.css", location.href);
+  sheetURL.protocol = "http";
+  var link = document.createElement("link");
+  link.href = `data:text/css,@import url("data:text/css,@import url('${sheetURL}');");`
+  link.rel = "stylesheet";
+  var loadFired = false, errorFired = false;
+  link.onload = () => loadFired = true;
+  link.onerror = () => errorFired = true;
+  document.head.appendChild(link);
+
+  addLoadEvent(() => {
+    is(loadFired, false, "Should not fire onload for erroring @import");
+    is(errorFired, true, "Should fire onerror for erroring @import");
+    is(getComputedStyle($("importTarget")).color, "rgb(0, 255, 0)",
+       "Erroring sheet should not load");
+    SimpleTest.finish();
+  });
+
+  </script>
+  <style>
+    #importTarget { color: rgb(0, 255, 0); }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1443344">Mozilla Bug 1443344</a>
+<p id="display"><div id="importTarget"></div></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1451199-1.html b/layout/style/test/test_bug1451199-1.html
new file mode 100644
index 0000000000..c65236b969
--- /dev/null
+++ b/layout/style/test/test_bug1451199-1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1451199
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1451199</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  /** Test for Bug 1451199 **/
+  SimpleTest.waitForExplicitFinish();
+
+  addLoadEvent(function() {
+    // We have to be careful to not check l.matches until the very end
+    // of the test.
+    var l = frames[0].matchMedia("(orientation: portrait)");
+    var iframe = document.querySelector("iframe");
+    iframe.width = "50";
+    iframe.contentDocument.documentElement.offsetWidth; // Flush layout
+
+    l.onchange = function() {
+      is(l.matches, false,
+         "Should not match portrait by the time we get notified");
+      SimpleTest.finish();
+    };
+    iframe.width = "200";
+  });
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1451199">Mozilla Bug 1451199</a>
+<p id="display"><iframe height="100" width="200"></iframe></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1451199-2.html b/layout/style/test/test_bug1451199-2.html
new file mode 100644
index 0000000000..c2e48ca779
--- /dev/null
+++ b/layout/style/test/test_bug1451199-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1451199
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1451199</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  /** Test for Bug 1451199 **/
+  SimpleTest.waitForExplicitFinish();
+
+  addLoadEvent(function() {
+    // We have to be careful to not check l.matches until the very end
+    // of the test.
+    var l = frames[0].matchMedia("(orientation: portrait)");
+    var iframe = document.querySelector("iframe");
+    iframe.width = "50";
+    iframe.contentDocument.documentElement.offsetWidth; // Flush layout
+
+    l.addEventListener("change", function() {
+      is(l.matches, false,
+         "Should not match portrait by the time we get notified");
+      SimpleTest.finish();
+    });
+    iframe.width = "200";
+  });
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1451199">Mozilla Bug 1451199</a>
+<p id="display"><iframe height="100" width="200"></iframe></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1490890.html b/layout/style/test/test_bug1490890.html
new file mode 100644
index 0000000000..00a8176ed6
--- /dev/null
+++ b/layout/style/test/test_bug1490890.html
@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1490890
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1490890</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+    #flex {
+      display: flex;
+      flex-direction: column;
+      height: 100px;
+      max-height: 100px;
+      overflow: hidden;
+      border: 1px solid black;
+    }
+    #overflowAuto {
+      overflow: auto;
+      white-space: pre-wrap;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1490890">Mozilla Bug 1490890</a>
+<div id="display">
+  <div id="content">
+    <div id="flex">
+      <div id="overflowAuto">
+        <!-- Populated by test JS below: -->
+        <div id="tall"></div>
+      </div>
+      <div id="testNode">abc</div>
+    </div>
+  </div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test for Bug 1490890 **/
+
+/**
+ * This test checks how many reflows are required, when we make a change inside
+ * a flex item, with a tall scrollable sibling flex item.
+ */
+
+const gUtils = SpecialPowers.getDOMWindowUtils(window);
+
+// The elements that we will modify here:
+const gTall = document.getElementById("tall");
+const gTestNode = document.getElementById("testNode");
+
+// Helper function to undo our modifications:
+function cleanup()
+{
+  gTall.firstChild.remove();
+  gTestNode.style = "";
+}
+
+// Flush layout & return the global frame-reflow-count
+function getReflowCount()
+{
+  let unusedVal = document.getElementById("flex").offsetHeight; // flush layout
+  return gUtils.framesReflowed;
+}
+
+// This function changes gTestNode to "display:none", and returns the number
+// of frames that need to be reflowed as a result of that tweak.
+function makeTweakAndCountReflows()
+{
+  let beforeCount = getReflowCount();
+  gTestNode.style.display = "none";
+  let afterCount = getReflowCount();
+
+  let numReflows = afterCount - beforeCount;
+  if (numReflows <= 0) {
+    ok(false, "something's wrong -- we should've reflowed *something*");
+  }
+  return numReflows;
+}
+
+// ACTUAL TEST LOGIC STARTS HERE
+// -----------------------------
+const testLineCount = 100;
+const refLineCount = 5000;
+
+// "Reference" measurement: put enough lines of text into gTall to trigger
+// a vertical scrollbar, and then see how many frames need to be reflowed
+// in response to a tweak in gTestNode:
+let text = document.createTextNode("a\n".repeat(testLineCount));
+gTall.appendChild(text);
+let numReferenceReflows = makeTweakAndCountReflows();
+cleanup();
+
+// "Test" measurement: put many more lines of text into gTall (many more than
+// for reference case), and then see how many frames need to be reflowed
+// in response to a tweak in gTestNode:
+text = document.createTextNode("a\n".repeat(refLineCount));
+gTall.appendChild(text);
+let numTestReflows = makeTweakAndCountReflows();
+cleanup();
+
+is(numTestReflows, numReferenceReflows,
+   "Tweak should trigger the same number of reflows regardless of " +
+   "how much content is present in descendant of sibling");
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1505254.html b/layout/style/test/test_bug1505254.html
new file mode 100644
index 0000000000..9cb3d1e316
--- /dev/null
+++ b/layout/style/test/test_bug1505254.html
@@ -0,0 +1,152 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1505254
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1505254</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+    /* Note: this CSS/DOM structure is loosely based on WhatsApp Web. */
+    #outerFlex {
+      display: flex;
+      height: 200px;
+      border: 3px solid purple;
+      overflow: hidden;
+      position: relative;
+    }
+    #outerItem {
+      flex: 0 0 60%;
+      overflow: hidden;
+      position: relative;
+    }
+    #abspos {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+    }
+    #insideAbspos {
+      position: relative;
+      flex: 1 1 0;
+      width: 100%;
+      height: 100%;
+    }
+    #scroller {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 0;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      height: 100%;
+      width: 100%;
+    }
+    #initiallyHidden {
+      display:none;
+    }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1505254">Mozilla Bug 1505254</a>
+<div id="display">
+  <div id="content">
+    <div id="outerFlex">
+      <div id="outerItem">
+        <div id="abspos">
+          <div id="insideAbspos">
+            <div>
+              <div id="scroller">
+                <div style="min-height: 600px">abc</div>
+                <div id="initiallyHidden">def</div>
+              </div>
+            </div>
+          </div>
+          <div id="testNode"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test for Bug 1505254 **/
+
+/**
+ * This test checks how many reflows are required when we make a change inside
+ * of an abpsos element, which itself is inside of a flex item with cached
+ * block-size measurements. This test is checking that this sort of change
+ * doesn't invalidate those cached block-size measurements on the flex item
+ * ancestor. (We're testing that indirectly by seeing how many frames are
+ * reflowed.)
+ */
+
+const gUtils = SpecialPowers.getDOMWindowUtils(window);
+
+// The elements that we will modify here:
+const gInitiallyHidden = document.getElementById("initiallyHidden");
+const gTestNode = document.getElementById("testNode");
+
+// Helper function to undo our modifications:
+function cleanup()
+{
+  gTestNode.textContent = "";
+  gInitiallyHidden.style = "";
+}
+
+// Helper function to flush layout & return the global frame-reflow-count:
+function getReflowCount()
+{
+  let unusedVal = document.getElementById("scroller").offsetHeight; // flush layout
+  return gUtils.framesReflowed;
+}
+
+// This function adds some text in gTestNode and returns the number of frames
+// that need to be reflowed as a result of that tweak:
+function makeTweakAndCountReflows()
+{
+  let beforeCount = getReflowCount();
+  gTestNode.textContent = "def";
+  let afterCount = getReflowCount();
+
+  let numReflows = afterCount - beforeCount;
+  if (numReflows <= 0) {
+    ok(false, "something's wrong -- we should've reflowed *something*");
+  }
+  return numReflows;
+}
+
+// ACTUAL TEST LOGIC STARTS HERE
+// -----------------------------
+
+// "Reference" measurement: see how many frames need to be reflowed
+// in response to a tweak in gTestNode, before we've shown
+// #initiallyHidden:
+let numReferenceReflows = makeTweakAndCountReflows();
+cleanup();
+
+// "Test" measurement: see how many frames need to be reflowed
+// in response to a tweak in gTestNode, after we've shown #initiallyHidden:
+gInitiallyHidden.style.display = "block";
+let numTestReflows = makeTweakAndCountReflows();
+cleanup();
+
+// Any difference between our measurements is an indication that we're reflowing
+// frames in a non-"dirty" subtree. (The gTestNode tweak has no reason to cause
+// #initiallyHidden to be dirty -- and therefore, the presence/absence of
+// #initiallyHidden shouldn't affect the number of frames that get reflowed in
+// response to the gTestNode tweak).
+is(numTestReflows, numReferenceReflows,
+   "Tweak should trigger the same number of reflows regardless of " +
+   "content in unmodified sibling");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug160403.html b/layout/style/test/test_bug160403.html
new file mode 100644
index 0000000000..79b10462d8
--- /dev/null
+++ b/layout/style/test/test_bug160403.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=160403
+-->
+<head>
+  <title>Test for Bug 160403</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=160403">Mozilla Bug 160403</a>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 160403 **/
+
+var element = document.getElementById("content");
+var style = element.style;
+
+element.setAttribute("style", "border-top-style: dotted");
+is(style.getPropertyValue("border-top-style"), "dotted");
+is(style.getPropertyPriority("border-top-style"), "");
+is(style.getPropertyValue("border-style"), "");
+is(style.getPropertyPriority("border-style"), "");
+
+element.setAttribute("style", "border-top-style: dotted ! important");
+is(style.getPropertyValue("border-top-style"), "dotted");
+is(style.getPropertyPriority("border-top-style"), "important");
+is(style.getPropertyValue("border-style"), "");
+is(style.getPropertyPriority("border-style"), "");
+
+element.setAttribute("style", "border-top-style: dotted ! important; border-bottom-style: dotted ! important; border-left-style: dotted ! important");
+is(style.getPropertyValue("border-top-style"), "dotted");
+is(style.getPropertyPriority("border-top-style"), "important");
+is(style.getPropertyValue("border-style"), "");
+is(style.getPropertyPriority("border-style"), "");
+
+element.setAttribute("style", "border-top-style: dotted ! important; border-right-style: dotted; border-bottom-style: dotted ! important; border-left-style: dotted ! important");
+is(style.getPropertyValue("border-top-style"), "dotted");
+is(style.getPropertyPriority("border-top-style"), "important");
+is(style.getPropertyValue("border-right-style"), "dotted");
+is(style.getPropertyPriority("border-right-style"), "");
+is(style.getPropertyValue("border-style"), "");
+is(style.getPropertyPriority("border-style"), "");
+
+element.setAttribute("style", "border-top-style: dotted ! important; border-right-style: dotted ! important; border-bottom-style: dotted ! important; border-left-style: dotted ! important");
+is(style.getPropertyValue("border-top-style"), "dotted");
+is(style.getPropertyPriority("border-top-style"), "important");
+is(style.getPropertyValue("border-right-style"), "dotted");
+is(style.getPropertyPriority("border-right-style"), "important");
+isnot(style.getPropertyValue("border-style"), "");
+is(style.getPropertyPriority("border-style"), "important");
+
+// Also test that we check consistency of inherit and initial.
+element.setAttribute("style", "border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted");
+isnot(style.getPropertyValue("border-style"), "", "serialize shorthand when all values not inherit/initial");
+element.setAttribute("style", "border-top-style: inherit; border-right-style: inherit; border-bottom-style: inherit; border-left-style: inherit");
+is(style.getPropertyValue("border-style"), "inherit", "serialize shorthand as inherit");
+element.setAttribute("style", "border-top-style: initial; border-right-style: initial; border-bottom-style: initial; border-left-style: initial");
+is(style.getPropertyValue("border-style"), "initial", "serialize shorthand as initial");
+element.setAttribute("style", "border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: inherit");
+is(style.getPropertyValue("border-style"), "", "don't serialize shorthand when partly inherit");
+element.setAttribute("style", "border-top-style: initial; border-right-style: dotted; border-bottom-style: initial; border-left-style: initial");
+is(style.getPropertyValue("border-style"), "", "don't serialize shorthand when partly initial");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug1729861.html b/layout/style/test/test_bug1729861.html
new file mode 100644
index 0000000000..247b7c2644
--- /dev/null
+++ b/layout/style/test/test_bug1729861.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1729861
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test that toggling the resistFingerprinting pref re-evaluates device media queries</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style id="test-css"></style>
+  <script src="bug1729861.js"></script>
+  <script>
+    // Run all tests now.
+    window.onload = function () {
+      add_task(async function() {
+        await test();
+      });
+    };
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1729861">Bug 1729861</a>
+<p id="display">TEST</p>
+</body>
+</html>
diff --git a/layout/style/test/test_bug200089.html b/layout/style/test/test_bug200089.html
new file mode 100644
index 0000000000..496de50e98
--- /dev/null
+++ b/layout/style/test/test_bug200089.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=200089
+-->
+<head>
+  <title>Test for Bug 200089</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=200089">Mozilla Bug 200089</a>
+<div id="display" style="width: 600px">
+  <table border="0" id="t" style="width: 300px; margin-left: auto; margin-right: auto">
+    <tr><td>Cell</td></tr>
+  </table>
+</div>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 200089 **/
+is(getComputedStyle($("t"), "").width, "300px",
+   "Used width should match specified width in this case");
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug221428.html b/layout/style/test/test_bug221428.html
new file mode 100644
index 0000000000..7e84319462
--- /dev/null
+++ b/layout/style/test/test_bug221428.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=221428
+-->
+<head>
+  <title>Test for Bug 221428</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>        
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <link rel="stylesheet" href="data:text/css,body { color: green; }">
+  <style>
+    @import url("data:text/css,body { border: 1px solid transparent; }");
+    body { color: black; }
+  </style>
+  <script>
+    var executed = false;
+  </script>
+  <link rel="stylesheet" href="javascript:executed = true;">
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=221428">Mozilla Bug 221428</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 221428 **/
+
+var exceptionThrown = false;
+try {
+  is(document.styleSheets[1].cssRules[0].cssText, "body { color: green; }",
+     "Should get the color: green rule back");
+} catch (e) {
+  exceptionThrown = true;
+}
+
+ok(!exceptionThrown, "Should be able to access data: <link> stylesheet");
+
+exceptionThrown = false;
+try {
+  is(document.styleSheets[2].cssRules[1].cssText, "body { color: black; }",
+     "Should get the color: black rule back");
+} catch (e) {
+  exceptionThrown = true;
+}
+ok(!exceptionThrown, "Should be able to access <style> stylesheet");
+
+exceptionThrown = false;
+try {
+  is(document.styleSheets[2].cssRules[0].styleSheet.cssRules[0].cssText,
+     "body { border: 1px solid transparent; }",
+     "Should get the 'border: 1px solid transparent' rule back");
+} catch (e) {
+  exceptionThrown = true;
+}
+ok(!exceptionThrown, "Should be able to access data: @import stylesheet");
+
+ok(!executed,
+   "Shouldn't be executing stylesheet-link javascript: URIs against " +
+   "the page context");
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug229915.html b/layout/style/test/test_bug229915.html
new file mode 100644
index 0000000000..0a23d8b799
--- /dev/null
+++ b/layout/style/test/test_bug229915.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=229915
+-->
+<head>
+  <title>Test for Bug 229915</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+
+  p { color: black; background: transparent; }
+  p.prev + p { color: green; }
+  p.prev ~ p { background: white; }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=229915">Mozilla Bug 229915</a>
+<div id="display">
+
+<div>
+  <p id="toinsertbefore">After testing, this should turn green.</p>
+</div>
+
+<div>
+  <p id="toreplace">To be replaced.</p>
+  <p id="replacecolor">After testing, this should turn green.</p>
+</div>
+
+<div>
+  <p class="prev">Previous paragraph.</p>
+  <p id="toremove">To be removed.</p>
+  <p id="removecolor">After testing, this should turn green.</p>
+</div>
+
+</div>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 229915 **/
+
+const GREEN = "rgb(0, 128, 0)";
+const BLACK = "rgb(0, 0, 0)";
+const TRANSPARENT = "rgba(0, 0, 0, 0)";
+const WHITE = "rgb(255, 255, 255)";
+
+function make_prev() {
+  var result = document.createElement("p");
+  result.setAttribute("class", "prev");
+  var t = document.createTextNode("Dynamically created previous paragraph.");
+  result.appendChild(t);
+  return result;
+}
+
+function color(id) {
+  return getComputedStyle(document.getElementById(id), "").color;
+}
+function bg(id) {
+  return getComputedStyle(document.getElementById(id), "").backgroundColor;
+}
+
+var node;
+
+// test insert
+is(color("toinsertbefore"), BLACK, "initial state (insertion test)");
+is(bg("toinsertbefore"), TRANSPARENT, "initial state (insertion test)");
+node = document.getElementById("toinsertbefore");
+node.parentNode.insertBefore(make_prev(), node);
+is(color("toinsertbefore"), GREEN, "inserting should turn node green");
+is(bg("toinsertbefore"), WHITE, "inserting should turn background white");
+
+// test replace
+is(color("replacecolor"), BLACK, "initial state (replacement test)");
+is(bg("replacecolor"), TRANSPARENT, "initial state (replacement test)");
+node = document.getElementById("toreplace");
+node.parentNode.replaceChild(make_prev(), node);
+is(color("replacecolor"), GREEN, "replacing should turn node green");
+is(bg("replacecolor"), WHITE, "replacing should turn background white");
+
+// test remove
+is(color("removecolor"), BLACK, "initial state (removal test)");
+is(bg("removecolor"), WHITE, "initial state (removal test; no change)");
+node = document.getElementById("toremove");
+node.remove();
+is(color("removecolor"), GREEN, "removing should turn node green");
+is(bg("removecolor"), WHITE, "removing should leave background");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug302186.html b/layout/style/test/test_bug302186.html
new file mode 100644
index 0000000000..28ff676ff0
--- /dev/null
+++ b/layout/style/test/test_bug302186.html
@@ -0,0 +1,508 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=302186
+-->
+<head>
+  <title>Test for Bug 302186</title>
+  <script type="text/javascript" src="/MochiKit/Base.js"></script>
+  <script type="text/javascript" src="/MochiKit/DOM.js"></script>
+  <script type="text/javascript" src="/MochiKit/Style.js"></script>
+  <script type="text/javascript" src="/MochiKit/Color.js"></script>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>        
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+
+<style>
+
+
+span { color: red }
+:default + span { color: green }
+
+span.reverse { color: green }
+:default + span.reverse { color: red }
+
+button { display: none }
+input { display: none }
+</style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=302186">Mozilla Bug 302186</a>
+<p id="display"></p>
+<div id="content" style="display: block">
+   
+  <!-- static default 1 -->
+  <form>
+   <div>
+    <input type="submit" checked="checked"><span id="s1a">There should be no red.</span>
+   </div>
+   <div>
+    <input type="submit"><span id="s1b" class="reverse">There should be no red.</span>
+   </div>
+  </form>
+  
+  <!-- static default 2 -->
+  <form>
+   <div>
+    <button type="submit" checked="checked" id="foo"></button>
+    <span id="s2a">There should be no red.</span>
+   </div>
+   <div>
+    <button type="submit"></button>
+    <span class="reverse" id="s2b">There should be no red.</span>
+   </div>
+  </form>
+
+  <!-- static default 3 -->
+  <form>
+   <div>
+    <input type="checkbox" checked="checked" id="foo">
+    <span id="s3a">There should be no red.</span>
+   </div>
+   <div>
+    <input checked="checked">
+    <span class="reverse" id="s3b">There should be no red.</span>
+   </div>
+  </form>
+
+  <!-- static default 3 -->
+  <form>
+   <div>
+    <input type="radio" checked="checked" id="foo">
+    <span id="s4a">There should be no red.</span>
+   </div>
+   <div>
+    <input checked="checked">
+    <span class="reverse" id="s4b">There should be no red.</span>
+   </div>
+  </form>
+
+  <!-- static default 5 -->
+  <form>
+   <div>
+    <input type="image"><span id="s5a">There should be no red.</span>
+   </div>
+   <div>
+  <input type="image"><span id="s5b" class="reverse">There should be no red.</span>
+
+   </div>
+  </form>
+
+  <!-- dynamic default 1 -->
+  <form>
+   <div>
+    <input type="submit" checked="checked" id="foo1">
+    <span class="reverse" id="1a">There should be no red.</span>
+   </div>
+   <div>
+    <input type="submit">
+    <span id="1b">There should be no red.</span>
+
+   </div>
+  </form>
+
+  <!-- dynamic default 2 -->
+  <form>
+   <div>
+    <button type="submit" checked="checked" id="foo2"></button>
+    <span class="reverse" id="2a">There should be no red.</span>
+   </div>
+   <div>
+    <button type="submit"></button>
+    <span id="2b">There should be no red.</span>
+   </div>
+  </form>
+
+  <!-- dynamic default 3 -->
+  <form>
+   <div>
+    <input type="checkbox" checked="checked" id="foo3">
+    <span class="reverse" id="3a">There should be no red.</span>
+   </div>
+   <div>
+    <input checked="checked" id="bar3">
+    <span id="3b">There should be no red.</span>
+   </div>
+  </form>
+
+  <!-- dynamic default 4 -->
+  <form>
+   <div>
+    <input type="radio" checked="checked" id="foo4">
+    <span class="reverse" id="4a" >There should be no red.</span>
+   </div>
+   <div>
+    <input checked="checked" id="bar4">
+    <span id="4b">There should be no red.</span>
+   </div>
+  </form>
+
+  <!-- dynamic default 5 -->
+  <form>
+   <div>
+    <input type="submit">
+    <input type="radio" checked="checked" id="foo5">
+    <span id="5" class="reverse">There should be no red.</span>
+   </div>
+  </form>
+
+  <!-- dynamic default 6 -->
+  <form>
+  <div id="div6">
+  <span id="6a">There should be no red.</span>
+</div>
+<div>
+  <input type="submit"><span id="6b" class="reverse">There should be no red.</span>
+</div>
+  </form>
+
+  <!-- dynamic default 7 -->
+  <form>
+<div>
+  <input type="submit"><span id="7a">There should be no red.</span>
+</div>
+<div id="div7">
+  <span class="reverse" id="7b">There should be no red.</span>
+
+</div>
+</form>
+
+  <!-- dynamic default 8 -->
+<form>
+<div id="div8"><span id="8a">There should be no red.</span>
+</div>
+<div>
+  <input type="image" id="foo"><span class="reverse" id="8b">There should be no red.</span>
+
+</div>
+</form>
+
+  <!-- dynamic default 9 -->
+<form>
+<div>
+  <input type="image"><span id="9a">There should be no red.</span>
+</div>
+<div id="div9">
+  <span class="reverse" id="9b">There should be no red.</span>
+
+</div>
+</form>
+
+  <!-- dynamic default 10 -->
+<form>
+<div id="div10">
+  <input type="submit"><span id="10a" class="reverse">There should be no red.</span>
+</div>
+<div>
+  <input type="submit"><span id="10b" >There should be no red.</span>
+
+</div>
+</form>
+
+<!-- dynamic default 11 -->
+<form>
+<div id="div11a">
+  <input type="submit"><span id="11a">There should be no red.</span>
+</div>
+<div id="div11">
+  <input type="submit"><span id="11b" class="reverse">There should be no red.</span>
+
+</div>
+</form>
+
+<!-- dynamic default 12 -->
+<form>
+<div id="div12">
+  <input type="image"><span id="12a" class="reverse">There should be no red.</span>
+</div>
+<div>
+  <input type="image"><span id="12b">There should be no red.</span>
+
+</div>
+</form>
+
+<!-- dynamic default 13 -->
+<form>
+<div id="div13a">
+  <input type="image"><span id="13a">There should be no red.</span>
+</div>
+<div id="div13">
+  <input type="image"><span id="13b" class="reverse">There should be no red.</span>
+
+</div>
+</form>
+
+<!-- dynamic default 14 -->
+<form>
+<div id="div14a">
+  <input type="submit" id="foo14"><span id="14a">There should be no red.</span>
+</div>
+<div id="div14b">
+  <input type="submit" id="foo14b"><span id="14b" class="reverse">There should be no red.</span>
+
+</div>
+</form>
+
+<!-- dynamic default 15 -->
+<form>
+<div id="div15a">
+  <input type="image" id="foo15a"><span id="15a">There should be no red.</span>
+</div>
+<div id="div15b">
+  <input type="image" id="foo15b"><span id="15b" class="reverse">There should be no red.</span>
+
+</div>
+</form>
+
+<!-- dynamic default 16 -->
+<form>
+<div>
+  <input type="image" checked="checked" id="foo16"></button>
+  <span class="reverse" id="16a">There should be no red.</span>
+</div>
+<div>
+  <input type="image"></button><span id="16b">There should be no red.</span>
+
+</div>
+</form>
+
+<!-- dynamic default 17 -->
+<form>
+<div>
+  <button type="button" id="foo17"></button>
+  <span id="17a">There should be no red.</span>
+</div>
+<div>
+  <button type="submit"></button><span class="reverse" id="17b">There should be no red.</span>
+</div>
+</form>
+
+<!-- dynamic default 18 -->
+<form>
+<div>
+  <input type="button" id="foo18"></button>
+  <span id="18a">There should be no red.</span>
+</div>
+<div>
+  <input type="submit"></button><span id="18b" class="reverse">There should be no red.</span>
+
+</div>
+</form>
+
+<!-- dynamic default 19 -->
+<form>
+<div id="div19">
+  <span id="19a">There should be no red.</span>
+</div>
+</form>
+
+<!-- dynamic default 20 -->
+<form>
+<div id="div20">
+  <span id="20a">There should be no red.</span>
+</div>
+</form>
+
+</div>
+
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 302186 **/
+
+SimpleTest.waitForExplicitFinish();
+
+function idColor(anId) {
+ var color = Color.fromComputedStyle(anId, "color");
+ return color.toRGBString();
+}
+
+is(idColor("s1a"),"rgb(0,128,0)", "CSS static-default 1a");
+is(idColor("s1b"),"rgb(0,128,0)", "CSS static-default 1b");
+is(idColor("s2a"),"rgb(0,128,0)", "CSS static-default 2a");
+is(idColor("s2b"),"rgb(0,128,0)", "CSS static-default 2b");
+is(idColor("s3a"),"rgb(0,128,0)", "CSS static-default 3a");
+is(idColor("s3b"),"rgb(0,128,0)", "CSS static-default 3b");
+is(idColor("s4a"),"rgb(0,128,0)", "CSS static-default 4a");
+is(idColor("s4b"),"rgb(0,128,0)", "CSS static-default 4b");
+is(idColor("s5a"),"rgb(0,128,0)", "CSS static-default 5a");
+is(idColor("s5b"),"rgb(0,128,0)", "CSS static-default 5b");
+
+function dynamicDefault1() {
+  $('foo1').removeAttribute("type");
+  is(idColor("1a"),"rgb(0,128,0)", "CSS dynamic-default 1a");
+  is(idColor("1b"),"rgb(0,128,0)", "CSS dynamic-default 1b");
+}
+
+function dynamicDefault2() {
+  $('foo2').setAttribute("type", "button");
+  is(idColor("2a"),"rgb(0,128,0)", "CSS dynamic-default 2a");
+  is(idColor("2b"),"rgb(0,128,0)", "CSS dynamic-default 2b");
+}
+
+function dynamicDefault3() {
+  $('foo3').removeAttribute("type");
+  $('bar3').setAttribute("type", "checkbox");
+  is(idColor("3a"),"rgb(0,128,0)", "CSS dynamic-default 3a");
+  is(idColor("3b"),"rgb(0,128,0)", "CSS dynamic-default 3b");
+}
+
+function dynamicDefault4() {
+  $('foo4').removeAttribute("type");
+  $('bar4').setAttribute("type", "radio");
+  is(idColor("4a"),"rgb(0,128,0)", "CSS dynamic-default 4a");
+  is(idColor("4b"),"rgb(0,128,0)", "CSS dynamic-default 4b");
+}
+
+function dynamicDefault5() {
+  $('foo5').setAttribute("type", "submit")
+  is(idColor("5"),"rgb(0,128,0)", "CSS dynamic-default 5");
+}
+
+function dynamicDefault6() {
+  var but = document.createElement("input");
+  but.setAttribute("type", "submit");
+  $('div6').insertBefore(but, $('div6').firstChild);
+  is(idColor("6a"),"rgb(0,128,0)", "CSS dynamic-default 6a");
+  is(idColor("6b"),"rgb(0,128,0)", "CSS dynamic-default 6b");
+}
+
+function dynamicDefault7() {
+  var but = document.createElement("input");
+  but.setAttribute("type", "submit");
+  $('div7').insertBefore(but, $('div7').firstChild);
+  is(idColor("7a"),"rgb(0,128,0)", "CSS dynamic-default 7a");
+  is(idColor("7b"),"rgb(0,128,0)", "CSS dynamic-default 7b");
+}
+
+function dynamicDefault8() {
+  var but = document.createElement("input");
+  but.setAttribute("type", "image");
+  $('div8').insertBefore(but, $('div8').firstChild);
+  is(idColor("8a"),"rgb(0,128,0)", "CSS dynamic-default 8a");
+  is(idColor("8b"),"rgb(0,128,0)", "CSS dynamic-default 8b");
+}
+
+function dynamicDefault9() {
+  var but = document.createElement("input");
+  but.setAttribute("type", "image");
+  $('div9').insertBefore(but, $('div9').firstChild);
+  is(idColor("9a"),"rgb(0,128,0)", "CSS dynamic-default 9a");
+  is(idColor("9b"),"rgb(0,128,0)", "CSS dynamic-default 9b");
+}
+
+function dynamicDefault10() {
+  var inputs = $('div10').getElementsByTagName("input");
+  $('div10').removeChild(inputs[0]);
+  is(idColor("10a"),"rgb(0,128,0)", "CSS dynamic-default 10a");
+  is(idColor("10b"),"rgb(0,128,0)", "CSS dynamic-default 10b");
+}
+
+function dynamicDefault11() {
+  var inputs = $('div11').getElementsByTagName("input");
+  $('div11').removeChild(inputs[0]);
+  is(idColor("11a"),"rgb(0,128,0)", "CSS dynamic-default 11a");
+  is(idColor("11b"),"rgb(0,128,0)", "CSS dynamic-default 11b");
+}
+
+function dynamicDefault12() {
+  var inputs = $('div12').getElementsByTagName("input");
+  $('div12').removeChild(inputs[0]);
+  is(idColor("12a"),"rgb(0,128,0)", "CSS dynamic-default 12a");
+  is(idColor("12b"),"rgb(0,128,0)", "CSS dynamic-default 12b");
+}
+
+function dynamicDefault13() {
+  var inputs = $('div13').getElementsByTagName("input");
+  $('div13').removeChild(inputs[0]);
+  is(idColor("13a"),"rgb(0,128,0)", "CSS dynamic-default 13a");
+  is(idColor("13b"),"rgb(0,128,0)", "CSS dynamic-default 13b");
+}
+
+function dynamicDefault14() {
+  var div1 = document.getElementById("div14a");
+  var inputs = div1.getElementsByTagName("input");
+  var firstElement = div1.removeChild(inputs[0]);
+  var div2 = document.getElementById("div14b");
+  inputs = div2.getElementsByTagName("input");
+  var secondElement = div2.removeChild(inputs[0]);
+  div1.insertBefore(secondElement, div1.firstChild);
+  div2.insertBefore(firstElement, div2.firstChild);
+  is(idColor("14a"),"rgb(0,128,0)", "CSS dynamic-default 14a");
+  is(idColor("14b"),"rgb(0,128,0)", "CSS dynamic-default 14b");
+}
+
+function dynamicDefault15() {
+  var div1 = document.getElementById("div15a");
+  var inputs = div1.getElementsByTagName("input");
+  var firstElement = div1.removeChild(inputs[0]);
+  var div2 = document.getElementById("div15b");
+  inputs = div2.getElementsByTagName("input");
+  var secondElement = div2.removeChild(inputs[0]);
+  div1.insertBefore(secondElement, div1.firstChild);
+  div2.insertBefore(firstElement, div2.firstChild);
+  is(idColor("15a"),"rgb(0,128,0)", "CSS dynamic-default 15a");
+  is(idColor("15b"),"rgb(0,128,0)", "CSS dynamic-default 15b");
+}
+
+function dynamicDefault16() {
+  $("foo16").setAttribute("type", "button");
+  is(idColor("16a"),"rgb(0,128,0)", "CSS dynamic-default 16a");
+  is(idColor("16b"),"rgb(0,128,0)", "CSS dynamic-default 16b");
+}
+
+function dynamicDefault17() {
+  $("foo17").setAttribute("type", "submit");
+  is(idColor("17a"),"rgb(0,128,0)", "CSS dynamic-default 17a");
+  is(idColor("17b"),"rgb(0,128,0)", "CSS dynamic-default 17b");
+}
+
+function dynamicDefault18() {
+  $("foo18").setAttribute("type", "submit");
+  is(idColor("18a"),"rgb(0,128,0)", "CSS dynamic-default 18a");
+  is(idColor("18b"),"rgb(0,128,0)", "CSS dynamic-default 18b");
+}
+
+function dynamicDefault19() {
+  var newSubmit = document.createElement("input");
+  newSubmit.setAttribute("type", "submit");
+  var div1 = document.getElementById("div19");
+  div1.insertBefore(newSubmit, div1.firstChild);
+  is(idColor("19a"),"rgb(0,128,0)", "CSS dynamic-default 19a");
+}
+
+function dynamicDefault20() {
+  var newSubmit = document.createElement("input");
+  newSubmit.setAttribute("type", "image");
+  var div1 = document.getElementById("div20");
+  div1.insertBefore(newSubmit, div1.firstChild);
+  is(idColor("20a"),"rgb(0,128,0)", "CSS dynamic-default 20a");
+}
+
+addLoadEvent(dynamicDefault1);
+addLoadEvent(dynamicDefault2);
+addLoadEvent(dynamicDefault3);
+addLoadEvent(dynamicDefault4);
+addLoadEvent(dynamicDefault5);
+addLoadEvent(dynamicDefault6);
+addLoadEvent(dynamicDefault7);
+addLoadEvent(dynamicDefault8);
+addLoadEvent(dynamicDefault9);
+addLoadEvent(dynamicDefault10);
+addLoadEvent(dynamicDefault11);
+addLoadEvent(dynamicDefault12);
+addLoadEvent(dynamicDefault13);
+addLoadEvent(dynamicDefault14);
+addLoadEvent(dynamicDefault15);
+addLoadEvent(dynamicDefault16);
+addLoadEvent(dynamicDefault17);
+addLoadEvent(dynamicDefault18);
+addLoadEvent(dynamicDefault19);
+addLoadEvent(dynamicDefault20);
+
+addLoadEvent(SimpleTest.finish);
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug319381.html b/layout/style/test/test_bug319381.html
new file mode 100644
index 0000000000..d29f1bbd39
--- /dev/null
+++ b/layout/style/test/test_bug319381.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=319381
+-->
+<head>
+  <title>Test for Bug 319381</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=319381">Mozilla Bug 319381</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  <div id="t"></div>  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 319381 **/
+
+function c() {
+  return document.defaultView.getComputedStyle($('t')).
+    getPropertyValue("overflow");
+}
+
+var vals = ["visible", "hidden", "auto", "scroll"];
+var mozVals = ["-moz-scrollbars-vertical", "-moz-scrollbars-horizontal"];
+var i, j;
+
+for (i = 0; i < vals.length; ++i) {
+  $('t').style.overflow = vals[i];
+  is($('t').style.overflow, vals[i], "Roundtrip");
+  is(c(), vals[i], "Simple property set");
+}
+
+for (i = 0; i < vals.length; ++i) {
+  for (j = 0; j < vals.length; ++j) {
+    $('t').setAttribute("style",
+                        "overflow-x: " + vals[i] + "; overflow-y: " + vals[j]);
+    is($('t').style.getPropertyValue("overflow-x"), vals[i], "Roundtrip");
+    is($('t').style.getPropertyValue("overflow-y"), vals[j], "Roundtrip");
+
+    if (i == j) {
+      is($('t').style.overflow, vals[i], "Shorthand serialization");
+    } else {
+      is($('t').style.overflow, vals[i] + " " + vals[j], "Shorthand serialization");
+    }
+
+    // "visible" overflow-x and overflow-y become "auto" in computed style if
+    // the other direction is not also "visible".
+    if (i == j || (vals[i] == "visible" && vals[j] == "auto")) {
+      is(c(), vals[j], "Shorthand computation");
+    } else if (vals[j] == "visible" && vals[i] == "auto") {
+      is(c(), vals[i], "Shorthand computation");
+    } else {
+      let x = vals[i] == "visible" ? "auto" : vals[i];
+      let y = vals[j] == "visible" ? "auto" : vals[j];
+      is(c(), x + " " + y, "Shorthand computation");
+    }
+  }
+}
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug357614.html b/layout/style/test/test_bug357614.html
new file mode 100644
index 0000000000..37475512d4
--- /dev/null
+++ b/layout/style/test/test_bug357614.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=357614
+-->
+<head>
+  <title>Test for Bug 357614</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <style type="text/css" id="style">
+  a { color: red; }
+  a { color: green; }
+  </style>
+  <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=357614">Mozilla Bug 357614</a>
+<p id="display"><a href="http://www.FOO.com/" rel="next" rev="PREV" foo="bar">a link</a></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 357614 **/
+
+var sheet = document.getElementById("style").sheet;
+var rule1 = sheet.cssRules[0];
+var rule2 = sheet.cssRules[1];
+
+var a = document.getElementById("display").firstChild;
+var cs = getComputedStyle(a, "");
+
+function change_selector_text(selector) {
+  // rule2.selectorText = selector; // NOT IMPLEMENTED
+
+  sheet.deleteRule(1);
+  sheet.insertRule(selector + " { color: green; }", 1);
+}
+
+var cs_green = cs.getPropertyValue("color");
+change_selector_text('p');
+var cs_red = cs.getPropertyValue("color");
+isnot(cs_green, cs_red, "computed values for green and red are different");
+
+change_selector_text('a[href="http://www.FOO.com/"]');
+is(cs.getPropertyValue("color"), cs_green, "selector on href value matches case-sensitively");
+
+change_selector_text('a[href="http://www.foo.com/"]');
+is(cs.getPropertyValue("color"), cs_red, "selector on href value does not match case-insensitively");
+
+change_selector_text('a[rel="next"]');
+is(cs.getPropertyValue("color"), cs_green, "selector on rel value matches case-sensitively");
+
+change_selector_text('a[rel="NEXT"]');
+is(cs.getPropertyValue("color"), cs_green, "selector on rel value matches case-insensitively");
+
+change_selector_text('a[rev="PREV"]');
+is(cs.getPropertyValue("color"), cs_green, "selector on rev value matches case-sensitively");
+
+change_selector_text('a[rev="prev"]');
+is(cs.getPropertyValue("color"), cs_green, "selector on rev value matches case-insensitively");
+
+change_selector_text('a[foo="bar"]');
+is(cs.getPropertyValue("color"), cs_green, "selector on foo value matches case-sensitively");
+
+change_selector_text('a[foo="Bar"]');
+is(cs.getPropertyValue("color"), cs_red, "selector on foo value does not match case-insensitively");
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug363146.html b/layout/style/test/test_bug363146.html
new file mode 100644
index 0000000000..09ed45a8e2
--- /dev/null
+++ b/layout/style/test/test_bug363146.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=363146
+-->
+<head>
+  <title>Test for Bug 363146</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=363146">Mozilla Bug 363146</a>
+<div style="width:100px; height:400px; position:relative;">
+  <table id="t1" border="0" cellspacing="0" cellpadding="0"
+         style="border:10px solid black; margin:20px; position:absolute; left:50px; top:35px;">
+    <caption align="top" style="height:100px;">Caption</caption>
+    <tr>
+      <td><div style="width:400px; height:100px;">Cell</div></td>
+    </tr>
+  </table>
+</div>
+<div style="width:100px; height:400px; position:relative;">
+  <table id="t2" border="0" cellspacing="0" cellpadding="0"
+         style="margin:20%;">
+    <caption align="top" style="height:100px;">Caption</caption>
+    <tr>
+      <td><div style="width:400px; height:100px;">Cell</div></td>
+    </tr>
+  </table>
+</div>
+<p id="display"></p>
+</div>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+var c = window.getComputedStyle(document.getElementById("t1"));
+is(c.width, "420px");
+is(c.height, "120px");
+is(c.left, "50px");
+is(c.top, "35px");
+is(c.borderLeftWidth, "10px");
+is(c.borderRightWidth, "10px");
+is(c.borderTopWidth, "10px");
+is(c.borderBottomWidth, "10px");
+is(c.marginLeft, "20px");
+is(c.marginRight, "20px");
+is(c.marginTop, "20px");
+is(c.marginBottom, "20px");
+
+var c2 = window.getComputedStyle(document.getElementById("t2"));
+is(c2.marginLeft, "20px");
+is(c2.marginRight, "20px");
+is(c2.marginTop, "20px");
+is(c2.marginBottom, "20px");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug372770.html b/layout/style/test/test_bug372770.html
new file mode 100644
index 0000000000..ac3879c9d4
--- /dev/null
+++ b/layout/style/test/test_bug372770.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=372770
+-->
+<head>
+  <title>Test for Bug 372770</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>        
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style id="testStyle">
+    #content {}
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=372770">Mozilla Bug 372770</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 372770 **/
+var style1 = $("content").style;
+var style2 = $("testStyle").sheet.cssRules[0].style;
+
+var colors = [ "rgb(128, 128, 128)", "transparent" ]
+var i;
+
+for (i = 0; i < colors.length; ++i) {
+  var color = colors[i];
+  style1.color = color;
+  style2.color = color;
+  is(style1.color, color, "Inline style color roundtripping failed at color " + i);
+  is(style2.color, color, "Rule style color roundtripping failed at color " + i);
+}
+
+style1.color = "rgba(0, 0, 0, 0)";
+style2.color = "rgba(0, 0, 0, 0)";
+is(style1.color, "rgba(0, 0, 0, 0)",
+   "Inline style should round-trip black transparent color correctly");
+is(style2.color, "rgba(0, 0, 0, 0)",
+   "Rule style should round-trip black transparent color correctly");
+
+for (var i = 0; i <= 100; ++i) {
+  if (i == 70 || i == 90) {
+    // Tinderbox unhappy for some reason... just skip these for now?
+    continue;
+  }
+  var color1 = "rgba(128, 128, 128, " + i/100 + ")";
+  var color2 = "rgba(175, 63, 27, " + i/100 + ")";
+  style1.color = color1;
+  style1.backgroundColor = color2;
+  style2.color = color2;
+  style2.background = color1;
+
+  if (i == 100) {
+    // Bug 372783 means this doesn't round-trip quite right
+    todo(style1.color == color1,
+       "Inline style color roundtripping failed at opacity " + i);
+    todo(style1.backgroundColor == color2,
+       "Inline style background roundtripping failed at opacity " + i);
+    todo(style2.color == color2,
+       "Rule style color roundtripping failed at opacity " + i);
+    todo(style2.backgroundColor == color1,
+       "Rule style background roundtripping failed at opacity " + i);
+    color1 = "rgb(128, 128, 128)";
+    color2 = "rgb(175, 63, 27)";
+  }
+
+  is(style1.color, color1,
+     "Inline style color roundtripping failed at opacity " + i);
+  is(style1.backgroundColor, color2,
+     "Inline style background roundtripping failed at opacity " + i);
+  is(style2.color, color2,
+     "Rule style color roundtripping failed at opacity " + i);
+  is(style2.backgroundColor, color1,
+     "Rule style background roundtripping failed at opacity " + i);
+
+}
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug373293.html b/layout/style/test/test_bug373293.html
new file mode 100644
index 0000000000..d23c865b67
--- /dev/null
+++ b/layout/style/test/test_bug373293.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=373293
+-->
+<head>
+  <title>Test for Bug 373293</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=373293">Mozilla Bug 373293</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  <div id="t" style="color: transparent;"></div>
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 373293**/
+
+var actual = $("t").getAttribute("style");
+var expected = "color: transparent;";
+is(actual, expected, "Expected style content did not match the actual style content");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug377947.html b/layout/style/test/test_bug377947.html
new file mode 100644
index 0000000000..88fccd0dc2
--- /dev/null
+++ b/layout/style/test/test_bug377947.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=377947
+-->
+<head>
+  <title>Test for Bug 377947</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=377947">Mozilla Bug 377947</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 377947 **/
+
+/*
+ * In particular, test that CSSStyleDeclaration.getPropertyValue doesn't
+ * return values for shorthands when some of the subproperties are not
+ * specified (a change that wasn't all that related to the main point of
+ * the bug).  And also test that the internal system-font property added
+ * in bug 377947 doesn't interfere with that.
+ */
+
+var s = document.getElementById("display").style;
+
+is(s.getPropertyValue("list-style"), "",
+   "list-style shorthand should start off empty");
+s.listStyleType="disc";
+s.listStyleImage="none";
+is(s.getPropertyValue("list-style"), "",
+   "list-style shorthand should be empty when some subproperties specified");
+s.listStylePosition="inside";
+isnot(s.getPropertyValue("list-style"), "",
+      "list-style shorthand should produce value when all subproperties set");
+s.removeProperty("list-style");
+is(s.getPropertyValue("list-style"), "",
+   "list-style shorthand be empty after removal");
+s.listStyle="none";
+isnot(s.getPropertyValue("list-style"), "",
+      "list-style shorthand should produce value when shorthand set");
+s.removeProperty("list-style");
+is(s.getPropertyValue("list-style"), "",
+   "list-style shorthand be empty after removal");
+
+is(s.getPropertyValue("font"), "",
+   "font shorthand should start off empty");
+var all_but_one = {
+  "font-family": "serif",
+  "font-style": "normal",
+  "font-variant": "normal",
+  "font-weight": "bold",
+  "font-size": "small",
+  "font-stretch": "normal",
+  "font-size-adjust": "none", // has to be default value
+  "font-feature-settings": "normal", // has to be default value
+  "font-variation-settings": "normal", // has to be default value
+  "font-language-override": "normal", // has to be default value
+  "font-kerning": "auto", // has to be default value
+  "font-optical-sizing": "auto", // has to be default value
+  "font-synthesis": "weight style", // has to be default value
+  "font-variant-alternates": "normal", // has to be default value
+  "font-variant-caps": "normal", // has to be default value
+  "font-variant-east-asian": "normal", // has to be default value
+  "font-variant-emoji": "auto", // has to be default value
+  "font-variant-ligatures": "normal", // has to be default value
+  "font-variant-numeric": "normal", // has to be default value
+  "font-variant-position": "normal" // has to be default value
+};
+
+for (var prop in all_but_one) {
+  s.setProperty(prop, all_but_one[prop], "");
+}
+is(s.getPropertyValue("font"), "",
+   "font shorthand should be empty when some subproperties specified");
+s.setProperty("line-height", "1.5", "");
+isnot(s.getPropertyValue("font"), "",
+      "font shorthand should produce value when all subproperties set");
+s.setProperty("font-size-adjust", "0.5", "");
+is(s.getPropertyValue("font"), "",
+   "font shorthand should be empty when font-size-adjust is non-default");
+s.setProperty("font-size-adjust", "none", "");
+isnot(s.getPropertyValue("font"), "",
+      "font shorthand should produce value when all subproperties set");
+s.removeProperty("font");
+is(s.getPropertyValue("font"), "",
+   "font shorthand be empty after removal");
+s.font="medium serif";
+isnot(s.getPropertyValue("font"), "",
+      "font shorthand should produce value when shorthand set");
+s.removeProperty("font");
+is(s.getPropertyValue("font"), "",
+   "font shorthand be empty after removal");
+s.font="menu";
+isnot(s.getPropertyValue("font"), "",
+      "font shorthand should produce value when shorthand (system font) set");
+s.removeProperty("font");
+is(s.getPropertyValue("font"), "",
+   "font shorthand be empty after removal");
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug379440.html b/layout/style/test/test_bug379440.html
new file mode 100644
index 0000000000..56644f85cb
--- /dev/null
+++ b/layout/style/test/test_bug379440.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=379440
+-->
+<head>
+  <title>Test for Bug 379440</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>        
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+    #display > * { cursor: auto }
+    #t1 {
+      cursor: url(file:///tmp/foo), url(file:///c|/),
+              url(http://example.com/), crosshair;
+    }
+    #t2 {
+      cursor: url(file:///tmp/foo), url(file:///c|/), crosshair;
+    }
+    #t3 {
+      cursor: url(http://example.com/), crosshair;
+    }
+    #t4 {
+      cursor: url(http://example.com/);
+    }
+    #t5 {
+      cursor: url(http://example.com/), no-such-cursor-exists;
+    }
+    #t6 {
+      cursor: crosshair;
+    }
+    #t7 {
+      cursor: no-such-cursor-exists;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=379440">Mozilla Bug 379440</a>
+<p id="display">
+  <div id="t1"> </div>
+  <div id="t2"></div>
+  <div id="t3"></div>
+  <div id="t4"></div>
+  <div id="t5"></div>
+  <div id="t6"></div>
+  <div id="t7"></div>
+</p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 379440 **/
+
+function cur(id) {
+  return document.defaultView.getComputedStyle($(id)).cursor;
+}
+
+is(cur("t1"), 'url("file:///tmp/foo"), url("file:///c:/"), ' +
+              'url("http://example.com/"), crosshair',
+              "Serialize unloadable URLs using their specified value");
+is(cur("t2"), 'url("file:///tmp/foo"), url("file:///c:/"), crosshair',
+              "Serialize unloadable URLs using their specified value");
+is(cur("t3"), 'url("http://example.com/"), crosshair', "URI + fallback");
+is(cur("t4"), "auto", "Must have a fallback");
+is(cur("t5"), "auto", "Fallback must be recognized");
+is(cur("t6"), "crosshair", "Just a fallback");
+is(cur("t7"), "auto", "Invalid fallback means ignore");
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug379741.html b/layout/style/test/test_bug379741.html
new file mode 100644
index 0000000000..7bb2463ce7
--- /dev/null
+++ b/layout/style/test/test_bug379741.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=379741
+-->
+<head>
+  <title>Test for Bug 379741</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=379741">Mozilla Bug 379741</a>
+<div id="content" style="display: none">
+<div id="noframe"></div>
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 379741 **/
+
+var cs = getComputedStyle(document.getElementById("noframe"), "");
+ok(cs.marginTop == "0" || cs.marginTop == "0px",
+   "computed margin-top is not none");
+ok(cs.marginRight == "0" || cs.marginRight == "0px",
+   "computed margin-right is not none");
+ok(cs.marginBottom == "0" || cs.marginBottom == "0px",
+   "computed margin-bottom is not none");
+ok(cs.marginLeft == "0" || cs.marginLeft == "0px",
+   "computed margin-left is not none");
+ok(cs.paddingTop == "0" || cs.paddingTop == "0px",
+   "computed padding-top is not none");
+ok(cs.paddingRight == "0" || cs.paddingRight == "0px",
+   "computed padding-right is not none");
+ok(cs.paddingBottom == "0" || cs.paddingBottom == "0px",
+   "computed padding-bottom is not none");
+ok(cs.paddingLeft == "0" || cs.paddingLeft == "0px",
+   "computed padding-left is not none");
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug382027.html b/layout/style/test/test_bug382027.html
new file mode 100644
index 0000000000..795a17048a
--- /dev/null
+++ b/layout/style/test/test_bug382027.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=382027
+-->
+<head>
+  <title>Test for Bug 382027</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=382027">Mozilla Bug 382027</a>
+<div id="content" style="display: none;"
+  ><div style="border-style: groove none none;"
+    ><div style="border-style: none none double"
+    ></div
+  ></div
+></div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/* 
+ * Test that the regression in the original patch checked in by bug
+ * 382027 is caught by something other than an unexpected pass.
+ */
+
+var e = document.createElement("div");
+e.style.setProperty("border-style", "groove none none none", "");
+is(e.getAttribute("style"), "border-style: groove none none;");
+e.style.setProperty("border-style", "none none double none", "");
+is(e.getAttribute("style"), "border-style: none none double;");
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug383075.html b/layout/style/test/test_bug383075.html
new file mode 100644
index 0000000000..8d902103e9
--- /dev/null
+++ b/layout/style/test/test_bug383075.html
@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=383075
+-->
+<head>
+  <title>Test for bug 383075</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; font-family: Arial;
+        }
+	
+
+</style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=383075">Mozilla bug 383075</a>
+<p id="display">
+
+The X'es below should have the same size:<br>
+
+<span id="a1" style="font-size:72px;">X</span>
+<span id="a2" style="font-size:72px;">X</span>
+<span id="a3" style="font-size:72px;">X</span>
+<span id="a4" style="font-size:72px;">X</span>
+<span id="a5" style="font-size:72px;">X</span>
+<span id="a6" style="font-size:72px;">X</span>
+<span id="a7" style="font-size:24px;">X</span>
+<span id="a8" style="font-size:72px;">X</span>
+<span id="a9" style="font:24px Arial;">X</span>
+
+<br>
+
+<span id="b1" style="font-size:72px;">X</span>
+<span id="b2" style="font-size:72px;">X</span>
+<span id="b3" style="font-size:72px;">X</span>
+<span id="b4" style="font-size:72px;">X</span>
+<span id="b5" style="font-size:72px;">X</span>
+<span id="b6" style="font-size:72px;">X</span>
+<span id="b7" style="font-size:24px;">X</span>
+<span id="b8" style="font-size:72px;">X</span>
+<span id="b9" style="font:24px Arial;">X</span>
+</p>
+
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+  document.getElementById("a1").style.fontSize = "illegal";
+  document.getElementById("a2").style.fontSize = "24px;";
+  document.getElementById("a3").style.fontSize = "24px; font-size-adjust:2";
+  document.getElementById("a4").style.fontSize = ";";
+  document.getElementById("a5").style.font = "24px Arial;";
+  document.getElementById("a6").style.font = "24px;";
+  document.getElementById("a7").style.fontSize = "  72px  ";   // correct
+  document.getElementById("a8").style.font = ";";
+  document.getElementById("a9").style.font = "  72px Arial  ";  // correct
+
+  document.getElementById("b1").style.setProperty("font-size", "illegal", null);
+  document.getElementById("b2").style.setProperty("font-size", "24px;", null);
+  document.getElementById("b3").style.setProperty("font-size", "24px; font-size-adjust:2", null);
+  document.getElementById("b4").style.setProperty("font-size", ";", null);
+  document.getElementById("b5").style.setProperty("font", "24px Arial;", null);
+  document.getElementById("b6").style.setProperty("font", "24px;", null);
+  document.getElementById("b7").style.setProperty("font-size", "  72px  ", null); // correct
+  document.getElementById("b8").style.setProperty("font", ";", null);
+  document.getElementById("b9").style.setProperty("font", "  72px Arial  ", null); // correct
+
+
+for (i=1; i <= 9; ++i)
+  is($('a'+i).style.fontSize, '72px', "font size");
+
+for (i=1; i <= 9; ++i)
+  is($('b'+i).style.fontSize, '72px', "font size");
+
+
+</script>
+</pre>
+
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug387615.html b/layout/style/test/test_bug387615.html
new file mode 100644
index 0000000000..eec7109289
--- /dev/null
+++ b/layout/style/test/test_bug387615.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=387615
+-->
+<head>
+  <title>Test for Bug 387615</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+  @namespace html url(http://www.w3.org/1999/xhtml);
+  a { color: red; }
+  a[rel="next"] { color: green; }
+  a[html|rel="next"] { color: green; }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=387615">Mozilla Bug 387615</a>
+<p id="display"><a>link</a></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 387615 **/
+
+var htmlns = "http://www.w3.org/1999/xhtml";
+
+var a = document.getElementById("display").firstChild;
+
+function col(elt) { return getComputedStyle(elt, "").color; }
+
+var red_cs = col(a);
+a.setAttribute("rel", "next");
+var green_cs = col(a);
+isnot(green_cs, red_cs, "computed values for red and green are different");
+
+a.setAttribute("rel", "NEXT");
+is(col(a), green_cs, "rel attribute should match case insensitively");
+
+a.removeAttribute("rel");
+a.setAttributeNS(htmlns, "html:rel", "next");
+is(col(a), green_cs, "html:rel attribute should match case-sensitively");
+
+a.setAttributeNS(htmlns, "html:rel", "NEXT");
+is(col(a), red_cs, "html:rel attribute should not match case-insensitively");
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug389464.html b/layout/style/test/test_bug389464.html
new file mode 100644
index 0000000000..2e05ed848f
--- /dev/null
+++ b/layout/style/test/test_bug389464.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+
+-->
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <!-- above is to force x-western language group -->
+  <title>Test for preference not to use document colors</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=58048">Mozilla Bug 58048</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=255411">Mozilla Bug 255411</a>
+<div id="display">
+
+<pre><font id="one" size="-1">text</font></pre>
+<p><font id="two" size="-1">text</font></p>
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+SimpleTest.waitForExplicitFinish();
+
+var cs1 = getComputedStyle(document.getElementById("one"), "");
+var cs2 = getComputedStyle(document.getElementById("two"), "");
+
+SpecialPowers.pushPrefEnv({'set': [['variable.x-western', 25], ['fixed.x-western', 20]]}, part1);
+
+function part1()
+{
+    var fs1 = cs1.fontSize.match(/(.*)px/)[1];
+    var fs2 = cs2.fontSize.match(/(.*)px/)[1];
+    ok(fs1 < fs2, "<font size=-1> shrinks relative to font-family: -moz-fixed");
+
+    SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug391034.html b/layout/style/test/test_bug391034.html
new file mode 100644
index 0000000000..f9544035b1
--- /dev/null
+++ b/layout/style/test/test_bug391034.html
@@ -0,0 +1,71 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=391034
+-->
+<head>
+  <title>Test for Bug 391034</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=391034">Mozilla Bug 391034</a>
+<div id="display" style="width: 90px; height: 80px">
+  <div id="width-ref" style="width: 2ch"></div>
+  <div id="width-ref2" style="width: 5ch"></div>
+  <div id="one" style="position: relative; left: 2ch; bottom: 5ch"></div>  
+  <div id="two" style="position: relative; left: 10%; bottom: 20%"></div>  
+  <div id="three" style="position: relative; left: 10px; bottom: 6px"></div>
+</div>
+<div id="content" style="display: none">
+  <div id="four" style="position: relative; left: 10%; bottom: 20%"></div>  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 391034 **/
+function getComp(id) {
+ return document.defaultView.getComputedStyle($(id));
+}
+
+is(getComp("one").top, "-" + getComp("width-ref2").width,
+   "Incorrect computed top offset if specified in ch")
+is(getComp("one").right, "-" + getComp("width-ref").width,
+   "Incorrect computed right offset if specified in ch")
+is(getComp("one").bottom, getComp("width-ref2").width,
+   "Incorrect computed bottom offset if specified in ch")
+is(getComp("one").left, getComp("width-ref").width,
+   "Incorrect computed left offset if specified in ch")
+
+is(getComp("two").top, "-16px",
+   "Incorrect computed top offset if specified in %")
+is(getComp("two").right, "-9px",
+   "Incorrect computed right offset if specified in %")
+is(getComp("two").bottom, "16px",
+   "Incorrect computed bottom offset if specified in %")
+is(getComp("two").left, "9px",
+   "Incorrect computed left offset if specified in %")
+
+is(getComp("three").top, "-6px",
+   "Incorrect computed top offset if specified in %")
+is(getComp("three").right, "-10px",
+   "Incorrect computed right offset if specified in %")
+is(getComp("three").bottom, "6px",
+   "Incorrect computed bottom offset if specified in %")
+is(getComp("three").left, "10px",
+   "Incorrect computed left offset if specified in %")
+
+is(getComp("four").top, "auto",
+   "Incorrect undisplayed computed top offset if specified in %")
+is(getComp("four").right, "auto",
+   "Incorrect undisplayed computed right offset if specified in %")
+is(getComp("four").bottom, "20%",
+   "Incorrect undisplayed computed bottom offset if specified in %")
+is(getComp("four").left, "10%",
+   "Incorrect undisplayed computed left offset if specified in %")
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug391221.html b/layout/style/test/test_bug391221.html
new file mode 100644
index 0000000000..bf78711197
--- /dev/null
+++ b/layout/style/test/test_bug391221.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=391221
+-->
+<head>
+  <title>Test for Bug 391221</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=391221">Mozilla Bug 391221</a>
+<p id="display">
+  <div id="width-ref" style="width: 2ch"></div>
+</p>
+<div id="content">
+
+<div id="one" style="width: 1000px; max-width: 2ch"></div>
+<div id="two" style="width: 0px; min-width: 2ch"></div>
+<div id="three" style="width: 1000ch; max-width: 2px"></div>
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 391221 **/
+function getComp(id) {
+ return document.defaultView.getComputedStyle($(id));
+}
+
+is(getComp("one").width, getComp("width-ref").width,
+   "max-width in ch units not working?");
+
+is(getComp("two").width, getComp("width-ref").width,
+   "min-width in ch units not working?");
+
+is(getComp("three").width, "2px", "max-width not applied to width in chars?");
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug397427.html b/layout/style/test/test_bug397427.html
new file mode 100644
index 0000000000..ff0e71f238
--- /dev/null
+++ b/layout/style/test/test_bug397427.html
@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=397427
+-->
+<head>
+  <title>Test for Bug 397427</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style id="a">
+    @import url("redirect.sjs?http://example.org/tests/layout/style/test/post-redirect-1.css");
+    @import url("redirect.sjs?http://example.org/tests/layout/style/test/post-redirect-2.css");
+    .test { color: red }
+  </style>
+  <link id="b" rel="stylesheet" href="http://example.com">
+  <link id="c" rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/post-redirect-2.css">
+  <link id="d" rel="stylesheet" href="redirect.sjs?http://example.org/tests/layout/style/test/post-redirect-3.css">
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=397427">Mozilla Bug 397427</a>
+<p id="display">
+<span id="one" class="test"></span>
+<span id="two" class="test"></span>
+<span id="three" class="test"></span>
+</p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 397427 **/
+SimpleTest.waitForExplicitFinish();
+
+addLoadEvent(function() {
+  is($("a").sheet.href, null, "href should be null");
+  is(typeof($("a").sheet.href), "object", "should be actual null");
+
+  // Make sure the redirected sheets are loaded and have the right base URI
+  is(document.defaultView.getComputedStyle($("one")).color,
+     "rgb(0, 128, 0)", "Redirect 1 did not work");
+  is(document.defaultView.getComputedStyle($("one")).backgroundImage,
+     "url(\"http://example.org/tests/layout/style/test/post-redirect-1.css?1\")",
+      "Redirect 1 did not get right base URI");
+  is(document.defaultView.getComputedStyle($("two")).color,
+     "rgb(0, 128, 0)", "Redirect 2 did not work");
+  is(document.defaultView.getComputedStyle($("two")).backgroundImage,
+     "url(\"http://example.org/tests/layout/style/test/post-redirect-2.css?1\")",
+      "Redirect 2 did not get right base URI");
+  is(document.defaultView.getComputedStyle($("three")).color,
+     "rgb(0, 128, 0)", "Redirect 3 did not work");
+  is(document.defaultView.getComputedStyle($("three")).backgroundImage,
+     "url(\"http://example.org/tests/layout/style/test/post-redirect-3.css?1\")",
+      "Redirect 3 did not get right base URI");
+
+  var ruleList = $("a").sheet.cssRules;
+
+  var redirHrefBase =
+    window.location.href.replace(/test_bug397427.html$/,
+      "redirect.sjs?http://example.org/tests/layout/style/test/post-");
+
+  is(ruleList[0].styleSheet.href, redirHrefBase + "redirect-1.css",
+     "Unexpected href for imported sheet");
+  todo_is(ruleList[0].href, redirHrefBase + "redirect-1.css",
+     "Rule href should be absolute");
+  is(ruleList[1].styleSheet.href, redirHrefBase + "redirect-2.css",
+     "Unexpected href for imported sheet");
+  todo_is(ruleList[1].href, redirHrefBase + "redirect-2.css",
+     "Rule href should be absolute");
+
+  is($("b").href, "http://example.com/", "Unexpected href one");
+  is($("b").href, $("b").sheet.href,
+     "Should have the same href when not redirecting");
+
+  is($("c").href, redirHrefBase + "redirect-2.css",
+     "Unexpected href two");
+  is($("c").href, $("c").sheet.href,
+     "Should have the same href when redirecting");
+
+  is($("d").href, redirHrefBase + "redirect-3.css",
+     "Unexpected href three");
+  is($("d").href, $("d").sheet.href,
+     "Should have the same href when redirecting again");
+})
+
+addLoadEvent(SimpleTest.finish);
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug399349.html b/layout/style/test/test_bug399349.html
new file mode 100644
index 0000000000..a36451927f
--- /dev/null
+++ b/layout/style/test/test_bug399349.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=363146
+-->
+<head>
+  <title>Test for Bug 363146</title>
+  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
+  <script src="/tests/SimpleTest/SimpleTest.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=399349">Mozilla Bug 399349</a>
+
+<!-- Test parsing of integer numbers -->
+<div id="Aone" style="width:100px; height:400px; top:-100px; left: -200px;position:relative;"></div>
+
+<!-- Test parsing of float numbers -->
+<div id="Atwo" style="width:150.2px; height:450.25px; top:-150.2px; left: -450.25px;position:relative;"></div>
+<div id="Athree" style="width:.1px; height:0.3px; top:-0.1px; left:-0.3px;position:relative;"></div>
+<div id="Afour" style="width:+100.017px; height:+400.017px; top:-.117px; left: -.217px;position:relative;"></div>
+
+<!-- Test parsing of long fractions -->
+<div id="Afive" style="width:+2345.0000000000000000000000000000000000001px; height:+456.000000000000000000000000000001px;
+                       top:-2123.000000000000000000000000000000000001px; left:-6543.99999999999999999999999999999999px;
+                       position:relative;"></div>
+
+<!-- Force parsing of long numbers (>9 digits), if they are zero's. Note css itself can't handle large numers -->
+<div id="Asix" style="width:+000000000012px; height:+000000000037.456788px;
+                       top:-000000000023px; left:-000000000044.456788px;
+                       position:relative;"></div>
+
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+var a1 = window.getComputedStyle(document.getElementById("Aone"));
+is(a1.width, "100px");
+is(a1.height, "400px");
+is(a1.top, "-100px");
+is(a1.left, "-200px");
+
+var a2 = window.getComputedStyle(document.getElementById("Atwo"));
+is(a2.width, "150.2px");
+is(a2.height, "450.25px");
+is(a2.top, "-150.2px");
+is(a2.left, "-450.25px");
+
+var a3 = window.getComputedStyle(document.getElementById("Athree"));
+is(a3.width, "0.1px");
+is(a3.height, "0.3px");
+is(a3.top, "-0.1px");
+is(a3.left, "-0.3px");
+
+var a4 = window.getComputedStyle(document.getElementById("Afour"));
+is(a4.width, "100.017px");
+is(a4.height, "400.017px");
+is(a4.top, "-0.117px");
+is(a4.left, "-0.217px");
+
+var a5 = window.getComputedStyle(document.getElementById("Afive"));
+is(a5.width, "2345px");
+is(a5.height, "456px");
+is(a5.top, "-2123px");
+is(a5.left, "-6544px");
+
+var a6 = window.getComputedStyle(document.getElementById("Asix"));
+is(a6.width, "12px");
+is(a6.height, "37.45px");
+is(a6.top, "-23px");
+is(a6.left, "-44.4568px");
+
+</script>
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug401046.html b/layout/style/test/test_bug401046.html
new file mode 100644
index 0000000000..e4492a5ca8
--- /dev/null
+++ b/layout/style/test/test_bug401046.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=401046
+-->
+<head>
+  <title>Test for Bug 401046</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+
+  #display span { margin-bottom: 1em; }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=401046">Mozilla Bug 401046</a>
+<p id="display" lang="zh-Hans">
+  <span id="s0" style="font-size: 0">汉字</span>
+  <span id="s4" style="font-size: 4px">汉字</span>
+  <span id="s12" style="font-size: 12px">汉字</span>
+  <span id="s28" style="font-size: 28px">汉字</span>
+</p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 401046 **/
+
+SimpleTest.waitForExplicitFinish();
+
+var elts = [
+  document.getElementById("s0"),
+  document.getElementById("s4"),
+  document.getElementById("s12"),
+  document.getElementById("s28")
+];
+
+function fs(idx) {
+  // The computed font size actually *doesn't* currently reflect the
+  // minimum font size preference, but things in em units do.  Not sure
+  // if this is how it ought to be...
+  return getComputedStyle(elts[idx], "").marginBottom;
+}
+
+SpecialPowers.pushPrefEnv({'clear': [['font.minimum-size.zh-CN']]}, step1);
+
+function step1() {
+    is(fs(0), "0px", "at min font size 0, 0px should compute to 0px");
+    is(fs(1), "4px", "at min font size 0, 4px should compute to 4px");
+    is(fs(2), "12px", "at min font size 0, 12px should compute to 12px");
+    is(fs(3), "28px", "at min font size 0, 28px should compute to 28px");
+
+    SpecialPowers.pushPrefEnv({'set': [['font.minimum-size.zh-CN', 7]]}, step2);
+}
+
+function step2() {
+    is(fs(0), "0px", "at min font size 7, 0px should compute to 0px");
+    is(fs(1), "7px", "at min font size 7, 4px should compute to 7px");
+    is(fs(2), "12px", "at min font size 7, 12px should compute to 12px");
+    is(fs(3), "28px", "at min font size 7, 28px should compute to 28px");
+
+    SpecialPowers.pushPrefEnv({'set': [['font.minimum-size.zh-CN', 18]]}, step3);
+}
+
+function step3() {
+    is(fs(0), "0px", "at min font size 18, 0px should compute to 0px");
+    is(fs(1), "18px", "at min font size 18, 4px should compute to 18px");
+    is(fs(2), "18px", "at min font size 18, 12px should compute to 18px");
+    is(fs(3), "28px", "at min font size 18, 28px should compute to 28px");
+
+    SpecialPowers.pushPrefEnv({'clear': [['font.minimum-size.zh-CN']]}, SimpleTest.finish);
+}
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug405818.html b/layout/style/test/test_bug405818.html
new file mode 100644
index 0000000000..eff4da449b
--- /dev/null
+++ b/layout/style/test/test_bug405818.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=405818
+-->
+<head>
+  <title>Test for Bug 405818</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <link rel="stylesheet" type="text/css" href="data:text/css,%23myDiv{color:green;}">
+  <link rel="stylesheet" type="text/css" href="chrome://global/skin/popup.css">
+  <!-- Script to make sure sheets gets a chance to load fully in Gecko 1.8 and earlier -->
+  <script type="text/javascript" src="data:text/javascript,"></script>
+  <link rel="stylesheet" type="text/css" href="data:text/css,%23myDiv{color:green;}">
+  <link rel="stylesheet" type="text/css" href="chrome://global/skin/popup.css">
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=405818">Mozilla Bug 405818</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  <div id="myDiv"></div>
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 405818 **/
+SimpleTest.waitForExplicitFinish();
+
+addLoadEvent(function() {
+  is(document.styleSheets[1].href,
+     "data:text/css,%23myDiv{color:green;}",
+     "Unexpected href for linked sheet before cloning");
+  is(document.styleSheets[3].href,
+     "data:text/css,%23myDiv{color:green;}",
+     "Unexpected href for later linked sheet before cloning");
+
+  is(document.styleSheets[2].href,
+     "chrome://global/skin/popup.css",
+     "Unexpected href for linked chrome sheet before cloning");
+  is(document.styleSheets[4].href,
+     "chrome://global/skin/popup.css",
+     "Unexpected href for later linked chrome sheet before cloning");
+
+  // Force cloning of inners
+  document.styleSheets[1].cssRules[0];
+  SpecialPowers.wrap(document.styleSheets[2]).cssRules[0];
+
+  is(document.styleSheets[1].href,
+     "data:text/css,%23myDiv{color:green;}",
+     "Unexpected href for linked sheet after cloning");
+  is(document.styleSheets[3].href,
+     "data:text/css,%23myDiv{color:green;}",
+     "Unexpected href for later linked sheet after cloning");
+
+  is(document.styleSheets[2].href,
+     "chrome://global/skin/popup.css",
+     "Unexpected href for linked chrome sheet after cloning");
+  is(document.styleSheets[4].href,
+     "chrome://global/skin/popup.css",
+     "Unexpected href for later linked chrome sheet after cloning");
+
+  var myDiv = document.getElementById("myDiv");
+  is(getComputedStyle(myDiv, "").color, "rgb(0, 128, 0)",
+     "Unexpected color for div (data URI stylesheet not being honored?)");
+
+  SimpleTest.finish();
+});
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug412901.html b/layout/style/test/test_bug412901.html
new file mode 100644
index 0000000000..fb37be57f7
--- /dev/null
+++ b/layout/style/test/test_bug412901.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=412901
+-->
+<head>
+  <title>Test for Bug 412901</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=412901">Mozilla Bug 412901</a>
+<div id="testDiv" style="width:20px; height:20px; border:solid silver; border-left-width:0.2px; border-right-width:0px; border-top-width:2.3px; border-bottom-width:5.5px;">
+<div id="testDiv2" style="width:20px; height:20px; border:hidden solid silver; border-left-width:0.2px; border-right-width:0px; border-top-width:2.3px; border-bottom-width:5.5px;">
+<p id="display"></p>
+</div>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 412901 **/
+
+var div = document.getElementById("testDiv");
+var computedStyle = document.defaultView.getComputedStyle(div);
+// we never round down to 0px, very small widths are rounded up to 1px
+is(computedStyle.borderLeftWidth, "1px");
+is(computedStyle.borderRightWidth, "0px");
+is(computedStyle.borderTopWidth, "2px");
+is(computedStyle.borderBottomWidth, "5px");
+
+var div2 = document.getElementById("testDiv2");
+var computedStyle2 = document.defaultView.getComputedStyle(div2);
+is(computedStyle2.borderLeftWidth, "0px");
+is(computedStyle2.borderRightWidth, "0px");
+is(computedStyle2.borderTopWidth, "0px");
+is(computedStyle2.borderBottomWidth, "0px");
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug413958.html b/layout/style/test/test_bug413958.html
new file mode 100644
index 0000000000..69a52cf3a8
--- /dev/null
+++ b/layout/style/test/test_bug413958.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=413958
+-->
+<head>
+  <title>Test for Bug 413958</title>
+  <meta charset="UTF-8">
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<style>span { color: red }</style><!-- backstop -->
+<p><a target="_blank"
+      href="https://bugzilla.mozilla.org/show_bug.cgi?id=413958"
+      >Mozilla Bug 413958</a>. All text below should be black on white.</p>
+<p>Sheet: <span id="s1">1</span>
+          <span id="s2">2</span>
+          <span id="s3">3</span>.
+   Style attr: <span id="setStyle">4</span>.
+   Properties: <span id="setStyleProp" style="">5</span>.</p>
+<script>
+SpecialPowers.wrap(window).docShell.cssErrorReportingEnabled = true;
+
+var tests = [
+  function() {
+    var s = document.createTextNode(
+"#s1{nosuchprop:auto; color:black}\n"+
+"#s2{nosuchprop:auto; color:black}invalid?sel{}#s3{color:black}"),
+        e = document.createElement("style");
+    e.appendChild(s);
+    document.body.appendChild(e);
+  },
+  function() {
+    document.getElementById("setStyle")
+            .setAttribute("style", "width:200;color:black");
+  },
+  function() {
+    var s = document.getElementById("setStyleProp").style;
+    s.width = "200";
+    s.color = "black";
+  },
+];
+var results = [
+  [ { errorMessage: /Unknown property \u2018nosuchprop\u2019/,
+      lineNumber: 1, columnNumber: 16, sourceLine: "", cssSelectors: "#s1" },
+    { errorMessage: /Unknown property \u2018nosuchprop\u2019/,
+      lineNumber: 2, columnNumber: 16, sourceLine: "", cssSelectors: "#s2" },
+    { errorMessage: /Ruleset ignored due to bad selector/,
+      lineNumber: 2, columnNumber: 41, sourceLine: "", cssSelectors: "" } ],
+  [ { errorMessage: /parsing value for \u2018width\u2019/,
+      lineNumber: 0, columnNumber: 7, sourceLine: "", cssSelectors: "" } ],
+  [ { errorMessage: /parsing value for \u2018width\u2019/,
+      lineNumber: 0, columnNumber: 1, sourceLine: "", cssSelectors: "" } ],
+];
+var curTest = -1;
+
+function doTest() {
+  if (++curTest == tests.length) {
+    var ss = document.getElementsByTagName("span");
+    for (var i = 0; i < ss.length; i++) {
+      is(window.getComputedStyle(ss[i]).color, "rgb(0, 0, 0)",
+         "recovery | " + ss[i].id);
+    }
+    SimpleTest.finish();
+  } else {
+    SimpleTest.expectConsoleMessages(tests[curTest], results[curTest], doTest);
+  }
+}
+
+SimpleTest.waitForExplicitFinish();
+doTest();
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_bug418986-2.html b/layout/style/test/test_bug418986-2.html
new file mode 100644
index 0000000000..04443a3553
--- /dev/null
+++ b/layout/style/test/test_bug418986-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=418986
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test 2/3 for Bug #418986: Resist fingerprinting by preventing exposure of screen and system info</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style id="test-css"></style>
+  <script type="text/javascript" src="chrome/bug418986-2.js"></script>
+  <script type="text/javascript">
+    // Run all tests now.
+    window.onload = function () {
+      add_task(async function() {
+        await test(true);
+      });
+    };
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=418986">Bug 418986</a>
+<p id="display">TEST</p>
+<div id="content" style="display: none">
+
+</div>
+<p id="pictures"></p>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug437915.html b/layout/style/test/test_bug437915.html
new file mode 100644
index 0000000000..fb6830dd57
--- /dev/null
+++ b/layout/style/test/test_bug437915.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=437915
+-->
+<head>
+  <title>Test for Bug 437915</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+
+  div.classvalue { text-decoration: underline; }
+  div[title~="titlevalue"] { visibility: hidden; }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=437915">Mozilla Bug 437915</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 437915 **/
+
+var div = document.getElementById("content");
+var cs = document.defaultView.getComputedStyle(div);
+
+var chars = {
+  0x09: true, // tab
+  0x0a: true, // newline
+  0x0b: false, // vertical tab (MAY CHANGE IN FUTURE!)
+  0x0c: true, // form feed
+  0x0d: true, // carriage return
+  0x0e: false,
+  0x20: true, // space
+  0x2003: false,
+  0x200b: false,
+  0x2028: false,
+  0x2029: false,
+  0x3000: false
+};
+
+var wsmap = {
+  false: { str: " NOT", "text-decoration-line": "none", "visibility": "visible" },
+  true: { str: "", "text-decoration-line": "underline", "visibility": "hidden" }
+};
+
+for (var char in chars) {
+  var is_whitespace = chars[char];
+  var mapent = wsmap[is_whitespace];
+  div.setAttribute("class", "classvalue" + String.fromCharCode(char) + "b")
+  div.setAttribute("title", "a" + String.fromCharCode(char) + "titlevalue")
+  for (var prop of ["text-decoration-line", "visibility"]) {
+    is(cs.getPropertyValue(prop), mapent[prop],
+       "Character " + char + " should" + mapent.str +
+       " be treated as whitespace ("
+       + prop + " should be " + mapent[prop] + ")");
+  }
+}
+
+
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug450191.html b/layout/style/test/test_bug450191.html
new file mode 100644
index 0000000000..91488e9496
--- /dev/null
+++ b/layout/style/test/test_bug450191.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=450191
+-->
+<head>
+  <title>Test for Bug 450191</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=450191">Mozilla Bug 450191</a>
+<iframe id="display" src="about:blank"></iframe>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 450191 **/
+
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+  var iframe = document.getElementById("display");
+  var subdoc = iframe.contentDocument;
+  var subwin = iframe.contentWindow;
+
+  var doctext = "<div style='font-size: 2em'>div text <table><tr><td id='t'>table text</td></tr></table></div>";
+
+  function subdoc_body_font() {
+    return subwin.getComputedStyle(subdoc.body).fontSize;
+  }
+
+  function subdoc_cell_font() {
+    return subwin.getComputedStyle(subdoc.getElementById("t")).fontSize;
+  }
+
+  subdoc.open();
+  subdoc.write(doctext);
+  subdoc.close();
+
+  is(subdoc_cell_font(), subdoc_body_font(),
+        "Quirks style sheet should be applied.");
+  
+  subdoc.open();
+  subdoc.write("<!DOCTYPE HTML>" + doctext);
+  subdoc.close();
+
+  isnot(subdoc_cell_font(), subdoc_body_font(),
+        "Quirks style sheet should NOT be applied.");
+  
+  subdoc.open();
+  subdoc.write(doctext);
+  subdoc.close();
+
+  is(subdoc_cell_font(), subdoc_body_font(),
+     "Quirks style sheet should be applied.");
+
+  SimpleTest.finish();
+}
+
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug470769.html b/layout/style/test/test_bug470769.html
new file mode 100644
index 0000000000..589cf790b0
--- /dev/null
+++ b/layout/style/test/test_bug470769.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=470769
+-->
+<head>
+  <title>Test for Bug 470769</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=470769">Mozilla Bug 470769</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 470769 **/
+
+var e = document.getElementById("display");
+e.setAttribute("style", "z-index: 2147483647"); // maximum signed 32-bit
+is(e.style.zIndex, "2147483647", "element.style should roundtrip correctly");
+is(window.getComputedStyle(e).zIndex, "2147483647",
+   "getComputedStyle should roundtrip correctly");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug499655.html b/layout/style/test/test_bug499655.html
new file mode 100644
index 0000000000..37ad553206
--- /dev/null
+++ b/layout/style/test/test_bug499655.html
@@ -0,0 +1,45 @@
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=499655
+-->
+<head>
+  <title>Test for Bug 499655</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=499655">Mozilla Bug 499655</a>
+<p id="display"></p>
+<div id="content">
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 499655 **/
+
+test1 = document.createElementNS("http://www.w3.org/1999/xhtml","test");
+test2 = document.createElementNS("http://www.w3.org/1999/xhtml","TEst");
+test3 = document.createElementNS("test","test");
+test4 = document.createElementNS("test","TEst");
+
+content = document.getElementById("content");
+
+content.appendChild(test1);
+content.appendChild(test2);
+content.appendChild(test3);
+content.appendChild(test4);
+
+list = document.querySelectorAll('test');
+is(list.length, 2, "Number of elements found");
+is(list[0], test1, "First element didn't match");
+is(list[1], test3, "Third element didn't match");
+
+list = document.querySelectorAll('TEst');
+is(list.length, 2, "Wrong number of elements found");
+is(list[0], test1, "First element didn't match");
+is(list[1], test4, "Fourth element didn't match");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug499655.xhtml b/layout/style/test/test_bug499655.xhtml
new file mode 100644
index 0000000000..b398d33967
--- /dev/null
+++ b/layout/style/test/test_bug499655.xhtml
@@ -0,0 +1,48 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=499655
+-->
+<head>
+  <title>Test for Bug 499655</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=499655">Mozilla Bug 499655</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+<![CDATA[
+
+test1 = document.createElementNS("http://www.w3.org/1999/xhtml","test");
+test2 = document.createElementNS("http://www.w3.org/1999/xhtml","TEst");
+test3 = document.createElementNS("test","test");
+test4 = document.createElementNS("test","TEst");
+
+content = document.getElementById("content");
+
+content.appendChild(test1);
+content.appendChild(test2);
+content.appendChild(test3);
+content.appendChild(test4);
+
+
+list = document.querySelectorAll('test');
+is(list.length, 2, "Number of elements found");
+is(list[0], test1, "First element didn't match");
+is(list[1] , test3, "Third element didn't match");
+
+list = document.querySelectorAll('TEst');
+is(list.length, 2, "Number of elements found");
+is(list[0], test2, "Second element didn't match");
+is(list[1], test4, "Fourth element didn't match");
+
+
+]]>
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug511909.html b/layout/style/test/test_bug511909.html
new file mode 100644
index 0000000000..ec0d414f9f
--- /dev/null
+++ b/layout/style/test/test_bug511909.html
@@ -0,0 +1,198 @@
+<html><!--
+   https://bugzilla.mozilla.org/show_bug.cgi?id=511909
+   --><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>@media and @-moz-document testcases</title>
+  
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+
+<style type="text/css">
+a {
+    font-weight: bold; 
+}
+  #pink {
+    color: pink;
+  }
+
+  #green {
+    color: green;
+  }
+
+  #blue {
+    color: blue;
+  }
+
+pre {
+   border: 1px solid black;
+}
+</style>
+
+<style type="text/css">
+@-moz-document regexp(".*test_bug511909.*"){
+    #d {
+      color: pink;
+    }
+}
+</style>
+
+<style type="text/css">
+@media screen {
+   #m {
+      color: green;
+   }
+}
+</style>
+
+<style type="text/css">
+@-moz-document regexp(".*test_bug511909.*"){
+  @media screen {
+      #dm {
+         color: blue;
+      }
+   }
+}
+</style>
+
+<!-- should parse -->
+<style type="text/css">
+@media print {
+  @-moz-document regexp("not_this_url"),}
+    #mx {
+        color: pink;
+    }
+  }
+}
+</style>
+
+<!-- should parse -->
+<style type="text/css">
+@-moz-document regexp("not_this_url"){
+  @media print ,}
+    #mxx {
+      color: blue;
+    }
+  }
+}
+</style>
+
+<style type="text/css">
+@media screen {
+  @-moz-document regexp(".*test_bug511909.*"){
+      #md {
+         color: green;
+      }
+   }
+}
+</style>
+
+<style type="text/css">
+@media screen {
+  @-moz-document regexp(".*test_bug511909.*"){
+      @media screen { 
+        @-moz-document regexp(".*test_bug511909.*"){
+          @media screen {
+            #me {
+             color: blue; 
+            }
+          }
+        }
+     }
+   }
+}
+</style>
+</head>
+<body>
+  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=511909">Mozilla Bug 511909</a>
+  <p id="display"></p>
+  <div id="content" style="display: none">
+  </div>
+
+  <script class="testbody" type="text/javascript">
+    SimpleTest.waitForExplicitFinish();
+
+    addLoadEvent(function() {
+      SpecialPowers.pushPrefEnv(
+        { "set": [["layout.css.moz-document.content.enabled", true ]]},
+        function() {
+          // Ensure all the sheets are re-parsed, so that the pref applies.
+          for (const sheet of Array.from(document.querySelectorAll('style'))) {
+            sheet.textContent += "/* dummy */";
+          }
+
+          var pink = getComputedStyle(document.getElementById("pink"), "");
+          var green = getComputedStyle(document.getElementById("green"), "");
+          var blue = getComputedStyle(document.getElementById("blue"), "");
+
+          var cs1 = getComputedStyle(document.getElementById("d"), "");
+          var cs2 = getComputedStyle(document.getElementById("m"), "");
+          var cs3 = getComputedStyle(document.getElementById("dm"), "");
+          var cs4 = getComputedStyle(document.getElementById("md"), "");
+          var cs5 = getComputedStyle(document.getElementById("mx"), "");
+          var cs6 = getComputedStyle(document.getElementById("mxx"), "");
+          var cs7 = getComputedStyle(document.getElementById("me"), "");
+
+          is(cs1.color, pink.color, "@-moz-document applies");
+          is(cs2.color, green.color, "@media applies");
+          is(cs3.color, blue.color, "@media nested in @-moz-document applies");
+          is(cs4.color, green.color, "@-moz-document nested in @media applies");
+          is(cs5.color, pink.color, "broken @media nested in @-moz-document correctly handled");
+          is(cs6.color, blue.color, "broken @-moz-document nested in @media correctly handled");
+          is(cs7.color, blue.color, "@media nested in @-moz-document nested in @media applies");
+          SimpleTest.finish();
+        })
+    });
+  </script>
+<div>
+<pre>default style
+</pre>
+<a id="pink">This line should be pink</a><br>
+  
+<a id="green">This line should be green</a><br>
+  
+<a id="blue">This line should be blue</a><br>
+  
+<pre>@-moz-document {...}
+</pre>
+<a id="d">This line should be pink</a><br>
+<pre>@media screen {...}
+</pre>
+<a id="m">This line should be green</a><br>
+<pre>@-moz-document {
+   @media screen {...}
+}
+</pre>
+<a id="dm">This line should be blue</a><br>
+<pre>@media print {
+  @-moz-document regexp("not_this_url"),}
+    #mx {
+        color: pink;
+    }
+  }
+}
+</pre>
+<a id="mx">This line should be pink</a><br></div>
+<pre>@-moz-document regexp("not_this_url"){
+  @media print ,}
+    #mxx {
+      color: blue;
+    }
+  }
+}
+</pre>
+<a id="mxx">This line should be blue</a><br>
+<pre>@media screen {
+  @-moz-documen {...}
+}
+</pre>
+<a id="md">This line should be green</a><br>
+<pre>@media screen {
+  @-moz-document {
+    @media screen {...}
+  }
+}
+</pre>
+<a id="me">This line should be blue</a><br>
+
+
+</body></html>
diff --git a/layout/style/test/test_bug517224.html b/layout/style/test/test_bug517224.html
new file mode 100644
index 0000000000..83d2bb8d80
--- /dev/null
+++ b/layout/style/test/test_bug517224.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=517224
+-->
+<head>
+  <title>Test for Bug 517224</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/ecmascript" src="bug517224.sjs?reset"></script>
+  <style type="text/css">
+
+  p#display { background: url(bug517224.sjs?image); }
+  p#display { background-image: none; }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=517224">Mozilla Bug 517224</a>
+<p id="display">Element with overridden background</p>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 517224 **/
+
+// Test that we don't load background images for style rules that are
+// always overridden.
+
+// Make sure the style has been computed
+var bi =
+  getComputedStyle(document.getElementById('display'), "").backgroundImage;
+SimpleTest.waitForExplicitFinish();
+window.onload = run;
+
+function run()
+{
+  var script = document.createElement("script");
+  script.setAttribute("src", "bug517224.sjs?result");
+  document.body.appendChild(script);
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug524175.html b/layout/style/test/test_bug524175.html
new file mode 100644
index 0000000000..5a57b61ba2
--- /dev/null
+++ b/layout/style/test/test_bug524175.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=524175
+-->
+<head>
+  <title>Test for Bug 524175</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+    span::before ::before {}
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=524175">Mozilla Bug 524175</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 524175 **/
+is(document.styleSheets[1].cssRules.length, 0, "Shouldn't have parsed that rule");
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug525952.html b/layout/style/test/test_bug525952.html
new file mode 100644
index 0000000000..d3ad02419d
--- /dev/null
+++ b/layout/style/test/test_bug525952.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=525952
+-->
+<head>
+  <title>Test for Bug 525952</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=525952">Mozilla Bug 525952</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 525952 **/
+var bodies = document.querySelectorAll("::before, div::before, body");
+is(bodies.length, 1, "Unexpected length");
+is(bodies[0], document.body, "Unexpected element");
+
+is(document.querySelector("div > ::after, body"), document.body,
+   "Unexpected return value");
+
+var emptyList = document.querySelectorAll("::before, div::before");
+is(emptyList.length, 0, "Unexpected empty list length");
+
+is(document.querySelectorAll("div > ::after").length, 0,
+   "Pseudo-element matched something?");
+
+is(document.body.matches("::first-line"), false,
+   "body shouldn't match ::first-line");
+
+is(document.body.matches("::first-line, body"), true,
+   "body should match 'body'");
+
+is(document.body.matches("::first-line, body, ::first-letter"), true,
+   "body should match 'body' here too");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug534804.html b/layout/style/test/test_bug534804.html
new file mode 100644
index 0000000000..0b60e6d89c
--- /dev/null
+++ b/layout/style/test/test_bug534804.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=534804
+-->
+<head>
+  <title>Test for Bug 534804</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css" id="styleone">  </style>
+  <style type="text/css" id="styletwo">  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=534804">Mozilla Bug 534804</a>
+<p id="display"></p>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 534804 **/
+
+var styleone = document.getElementById("styleone");
+var styletwo = document.getElementById("styletwo");
+var display = document.getElementById("display");
+
+run1();
+styletwo.firstChild.data = "#e > span:nth-child(2n+1) { color: green }";
+run1();
+styletwo.firstChild.data = "#e > span:first-child { color: green }";
+run1();
+styletwo.firstChild.data = "#e > span:nth-last-child(2n+1) { color: green }";
+run1();
+styletwo.firstChild.data = "#e > span:last-child { color: green }";
+run1();
+
+function run1()
+{
+  function identity(bool)      { return bool; }
+  function inverse(bool)       { return !bool; }
+  function always_false(bool)  { return false; }
+  run2("#e:empty + span", identity, always_false);
+  run2("#e:empty ~ span", identity, identity);
+  run2("#e:not(:empty) + span", inverse, always_false);
+  run2("#e:not(:empty) ~ span", inverse, inverse);
+}
+
+function run2(sel, next_sibling_rule, later_sibling_rule)
+{
+  styleone.firstChild.data = sel + " { text-decoration: underline }";
+
+  // Rebuild the subtree every time.
+  var span1 = document.createElement("span");
+  span1.id = "e";
+  var span2 = document.createElement("span");
+  var span3 = document.createElement("span");
+  display.appendChild(span1);
+  display.appendChild(span2);
+  display.appendChild(span3);
+
+  function td(e) { return getComputedStyle(e, "").textDecorationLine; }
+
+  function check(desc, isempty) {
+    is(td(span2), next_sibling_rule(isempty) ? "underline" : "none",
+       "match of next sibling in state " + desc);
+    is(td(span3), later_sibling_rule(isempty) ? "underline" : "none",
+       "match of next sibling in state " + desc);
+  }
+
+  check("initially empty", true);
+  var kid = document.createElement("span");
+  span1.appendChild(kid);
+  check("after append", false);
+  span1.removeChild(kid);
+  check("after remove", true);
+  span1.appendChild(document.createTextNode(""));
+  span1.appendChild(document.createComment("a comment"));
+  span1.appendChild(document.createTextNode(""));
+  check("after append of insignificant children", true);
+  span1.insertBefore(kid, span1.childNodes[1]);
+  check("after insert", false);
+
+  display.removeChild(span1);
+  display.removeChild(span2);
+  display.removeChild(span3);
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug573255.html b/layout/style/test/test_bug573255.html
new file mode 100644
index 0000000000..182087e1ec
--- /dev/null
+++ b/layout/style/test/test_bug573255.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=573255
+-->
+<head>
+  <title>Test for Bug 573255</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+  #display:not(.hasSummary) { visibility: hidden }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=573255">Mozilla Bug 573255</a>
+<p id="display"></p>
+<pre id="test">
+<script type="application/javascript">
+
+var p = document.getElementById("display");
+var cs = getComputedStyle(p, "");
+
+is(cs.visibility, "hidden", "should be visibility:none since it has no class");
+p.className = "hasSummary";
+is(cs.visibility, "visible", "changing class attribute should remove visibility:hidden");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug580685.html b/layout/style/test/test_bug580685.html
new file mode 100644
index 0000000000..e54dfc2d7f
--- /dev/null
+++ b/layout/style/test/test_bug580685.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=580685
+-->
+<head>
+  <title>Test for Bug 580685</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=580685">Mozilla Bug 580685</a>
+<p id="display">
+  <iframe id="f" srcdoc="<body style='outline-offset: 1rem'>">
+  </iframe>
+</p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 580685 **/
+SimpleTest.waitForExplicitFinish()
+addLoadEvent(function() {
+  var doc = $("f").contentDocument;
+  var b = doc.body;
+  doc.removeChild(doc.documentElement);
+  is(doc.defaultView.getComputedStyle(b).outlineOffset,
+     doc.defaultView.getComputedStyle(b).fontSize,
+     "1rem did not compute correctly");
+  SimpleTest.finish();
+});
+
+
+
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug621351.html b/layout/style/test/test_bug621351.html
new file mode 100644
index 0000000000..6a6d373afc
--- /dev/null
+++ b/layout/style/test/test_bug621351.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<title>Test for Bug 160403</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+<span></span>
+<style>
+span {
+  border-inline-start: 0px solid rgb(0, 0, 0);
+  border-inline-end: 0px solid rgb(0, 0, 0);
+  transition: border 100s linear -50s;
+}
+span.transitioned {
+  border-inline-start: 100px solid rgb(100, 100, 100);
+  border-inline-end: 10px solid rgb(10, 10, 10);
+}
+</style>
+<script>
+// Test that transitioning each of border-{left,right}-{color,width}
+// works when the values are set through the -moz-border-{start,end}
+// shorthands.
+
+var e = document.querySelector("span");
+var cs = getComputedStyle(e);
+is(cs.borderLeftColor, "rgb(0, 0, 0)", "value of border-left-color before transition");
+is(cs.borderLeftWidth, "0px", "value of border-left-width before transition");
+is(cs.borderRightColor, "rgb(0, 0, 0)", "value of border-right-color before transition");
+is(cs.borderRightWidth, "0px", "value of border-right-width before transition");
+e.className = "transitioned";
+is(cs.borderLeftWidth, "50px", "value of border-left-width during transition");
+is(cs.borderLeftColor, "rgb(50, 50, 50)", "value of border-left-color during transition");
+is(cs.borderRightWidth, "5px", "value of border-right-width during transition");
+is(cs.borderRightColor, "rgb(5, 5, 5)", "value of border-right-color during transition");
+e.remove();
+</script>
diff --git a/layout/style/test/test_bug635286.html b/layout/style/test/test_bug635286.html
new file mode 100644
index 0000000000..80ea5a98ef
--- /dev/null
+++ b/layout/style/test/test_bug635286.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>

+<html>

+<!--

+https://bugzilla.mozilla.org/show_bug.cgi?id=635286

+-->

+<head>

+  <title>Test for Bug 635286</title>

+  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>

+  <script src="/tests/SimpleTest/SimpleTest.js"></script>

+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />

+  <style type="text/css">

+    div { background: transparent; }

+    :-moz-any(#case1.before)      { background: gray; }

+    #case2:not(.after)            { background: gray; }

+    :-moz-any(#case3:not(.after)) { background: gray; }

+    #case4:not(:-moz-any(.after)) { background: gray; }

+  </style>

+</head>

+<body>

+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=635286">Mozilla Bug 635286</a>

+<div id="case1" class="before">case1, :-moz-any()</div>

+<div id="case2" class="before">case2, :not()</div>

+<div id="case3" class="before">case3, :not() in :-moz-any()</div>

+<div id="case4" class="before">case4, :-moz-any() in :not()</div>

+<pre id="test">

+<script class="testbody" type="text/javascript">

+

+/** Test for Bug 635286 **/

+

+window.addEventListener("load", function() {

+  var cases = Array.from(document.getElementsByTagName("div"));

+  cases.forEach(function(aCase, aIndex) {

+    aCase.className = "after";

+  });

+  window.setTimeout(function() {

+    cases.forEach(function(aCase, aIndex) {

+      is(window.getComputedStyle(aCase)

+           .getPropertyValue("background-color"),

+         "rgba(0, 0, 0, 0)",

+         aCase.textContent);

+    });

+    SimpleTest.finish();

+  }, 1);

+});

+

+SimpleTest.waitForExplicitFinish();

+SimpleTest.requestFlakyTimeout("untriaged");

+

+</script>

+</pre>

+</body>

+</html>

diff --git a/layout/style/test/test_bug645998.html b/layout/style/test/test_bug645998.html
new file mode 100644
index 0000000000..ed8feccf7d
--- /dev/null
+++ b/layout/style/test/test_bug645998.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=645998
+-->
+<head>
+  <title>Test for Bug 645998</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <!-- This is the real test: will these stylesheets ever finish loading? -->
+  <link rel="stylesheet" href="file_bug645998-1.css">
+  <link rel="stylesheet" href="file_bug645998-2.css">
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=645998">Mozilla Bug 645998</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 645998 **/
+ok(true, "Hey, we got here!  That's a good sign");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug652486.html b/layout/style/test/test_bug652486.html
new file mode 100644
index 0000000000..cdee3f33a7
--- /dev/null
+++ b/layout/style/test/test_bug652486.html
@@ -0,0 +1,192 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=652486
+https://bugzilla.mozilla.org/show_bug.cgi?id=1039488
+-->
+<head>
+  <title>Test for Bug 652486, Bug 1039488 and Bug 1574222</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=652486">Mozilla Bug 652486</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1039488">Mozilla Bug 1039488</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1574222">Mozilla Bug 1574222</a>
+
+<p id="display"></p>
+<div id="content" style="display: none">
+  <div id="t"></div>
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 652486, Bug 1039488 and Bug 1574222 **/
+
+function c() {
+  return document.defaultView.getComputedStyle($('t')).
+           getPropertyValue("text-decoration");
+}
+
+// The default value of the 'color' property, which in turn establishes the
+// default value of 'text-decoration-color' (via the 'currentColor' keyword).
+var defaultLineColor = "rgb(0, 0, 0)";
+
+var tests = [
+  // When only text-decoration was specified, text-decoration should look like
+  // a longhand property. However, as of Bug 1574222, the getComputedStyle()
+  // serialization for "text-decoration" will always include the color,
+  // because we can't tell whether the resolved color value came from the
+  // initial "currentColor" value (and could safely be omitted) vs. whether it
+  // came from a custom specified value (and cannot be omitted).
+  { decoration: "none",
+    line: null, color: null, style: null,
+    expectedValue: defaultLineColor },
+  { decoration: "underline",
+    line: null, color: null, style: null,
+    expectedValue: "underline " + defaultLineColor },
+  { decoration: "overline",
+    line: null, color: null, style: null,
+    expectedValue: "overline " + defaultLineColor },
+  { decoration: "line-through",
+    line: null, color: null, style: null,
+    expectedValue: "line-through " + defaultLineColor },
+  { decoration: "blink",
+    line: null, color: null, style: null,
+    expectedValue: "blink " + defaultLineColor },
+  { decoration: "underline overline",
+    line: null, color: null, style: null,
+    expectedValue: "underline overline " + defaultLineColor },
+  { decoration: "underline line-through",
+    line: null, color: null, style: null,
+    expectedValue: "underline line-through " + defaultLineColor },
+  { decoration: "blink underline",
+    line: null, color: null, style: null,
+    expectedValue: "underline blink " + defaultLineColor },
+  { decoration: "underline blink",
+    line: null, color: null, style: null,
+    expectedValue: "underline blink " + defaultLineColor },
+
+  // When only text-decoration-line or text-blink was specified,
+  // text-decoration should look like a longhand property.
+  // However, as of Bug 1574222, the getComputedStyle() serialization for
+  // "text-decoration" will always include the color, because we can't tell
+  // whether the resolved color value came from the initial "currentColor"
+  // value (and could safely be omitted) vs. whether it came from a custom
+  // specified value (and cannot be omitted).
+  { decoration: null,
+    line: "blink", color: null, style: null,
+    expectedValue: "blink " + defaultLineColor },
+  { decoration: null,
+    line: "underline", color: null, style: null,
+    expectedValue: "underline " + defaultLineColor },
+  { decoration: null,
+    line: "overline", color: null, style: null,
+    expectedValue: "overline " + defaultLineColor },
+  { decoration: null,
+    line: "line-through", color: null, style: null,
+    expectedValue: "line-through " + defaultLineColor },
+  { decoration: null,
+    line: "blink underline", color: null, style: null,
+    expectedValue: "underline blink " + defaultLineColor },
+
+  // When text-decoration-color isn't its initial value,
+  // text-decoration should be a shorthand property.
+  { decoration: "blink",
+    line: null, color: "rgb(0, 0, 0)", style: null,
+    expectedValue: "blink rgb(0, 0, 0)" },
+  { decoration: "underline",
+    line: null, color: "black", style: null,
+    expectedValue: "underline rgb(0, 0, 0)" },
+  { decoration: "overline",
+    line: null, color: "#ff0000", style: null,
+    expectedValue: "overline rgb(255, 0, 0)" },
+  { decoration: "line-through",
+    line: null, color: "initial", style: null,
+    expectedValue: "line-through " + defaultLineColor },
+  { decoration: "blink underline",
+    line: null, color: "currentColor", style: null,
+    expectedValue: "underline blink " + defaultLineColor },
+  { decoration: "underline line-through",
+    line: null, color: "currentcolor", style: null,
+    expectedValue: "underline line-through " + defaultLineColor },
+
+  // When text-decoration-style isn't its initial value,
+  // text-decoration should be a shorthand property.
+  { decoration: "blink",
+    line: null, color: null, style: "-moz-none",
+    expectedValue: "blink -moz-none " + defaultLineColor },
+  { decoration: "underline",
+    line: null, color: null, style: "dotted",
+    expectedValue: "underline dotted " + defaultLineColor },
+  { decoration: "overline",
+    line: null, color: null, style: "dashed",
+    expectedValue: "overline dashed " + defaultLineColor },
+  { decoration: "line-through",
+    line: null, color: null, style: "double",
+    expectedValue: "line-through double " + defaultLineColor },
+  { decoration: "blink underline",
+    line: null, color: null, style: "wavy",
+    expectedValue: "underline blink wavy " + defaultLineColor },
+  { decoration: "underline blink overline line-through",
+    line: null, color: null, style: "solid",
+    expectedValue: "underline overline line-through blink " + defaultLineColor },
+  { decoration: "line-through overline underline",
+    line: null, color: null, style: "initial",
+    expectedValue: "underline overline line-through " + defaultLineColor }
+];
+
+function makeDeclaration(aTest)
+{
+  var str = "";
+  if (aTest.decoration) {
+    str += "text-decoration: " + aTest.decoration + "; ";
+  }
+  if (aTest.color) {
+    str += "text-decoration-color: " + aTest.color + "; ";
+  }
+  if (aTest.line) {
+    str += "text-decoration-line: " + aTest.line + "; ";
+  }
+  if (aTest.style) {
+    str += "text-decoration-style: " + aTest.style + "; ";
+  }
+  return str;
+}
+
+function clearStyleObject()
+{
+  $('t').style.textDecoration = null;
+}
+
+for (var i = 0; i < tests.length; ++i) {
+  var test = tests[i];
+  if (test.decoration) {
+    $('t').style.textDecoration = test.decoration;
+  }
+  if (test.color) {
+    $('t').style.textDecorationColor = test.color;
+  }
+  if (test.line) {
+    $('t').style.textDecorationLine = test.line;
+  }
+  if (test.style) {
+    $('t').style.textDecorationStyle = test.style;
+  }
+
+  var dec = makeDeclaration(test);
+  is(c(), test.expectedValue, "Test1 (computed value): " + dec);
+
+  clearStyleObject();
+
+  $('t').setAttribute("style", dec);
+
+  is(c(), test.expectedValue, "Test2 (computed value): " + dec);
+
+  $('t').removeAttribute("style");
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug657143.html b/layout/style/test/test_bug657143.html
new file mode 100644
index 0000000000..de8a1961d4
--- /dev/null
+++ b/layout/style/test/test_bug657143.html
@@ -0,0 +1,120 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=657143
+-->
+<head>
+  <title>Test for Bug 657143</title>
+  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
+  <script src="/tests/SimpleTest/SimpleTest.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=657143">Mozilla Bug 657143</a>
+<p id="display"></p>
+<style>
+/* Ensure that there is at least one custom property on the root element's
+   computed style */
+:root { --test: some value; }
+</style>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 657143 **/
+
+// Check ordering of CSS properties in nsComputedDOMStylePropertyList.h
+// by splitting the getComputedStyle() into five sublists
+// then cloning and sort()ing the lists and comparing with originals.
+
+function isMozPrefixed(aProp) {
+  return aProp.startsWith("-moz");
+}
+
+function isNotMozPrefixed(aProp) {
+  return !isMozPrefixed(aProp);
+}
+
+function isWebkitPrefixed(aProp) {
+  return aProp.startsWith("-webkit");
+}
+
+function isNotWebkitPrefixed(aProp) {
+  return !isWebkitPrefixed(aProp);
+}
+
+function isCustom(aProp) {
+  return aProp.startsWith("--");
+}
+
+function isNotCustom(aProp) {
+  return !isCustom(aProp);
+}
+
+var styleList = window.getComputedStyle(document.documentElement);
+    cssA = [], mozA = [], webkitA = [], customA = [];
+
+// Partition the list of property names into four lists:
+//
+//   cssA: regular properties
+//   mozA: '-moz-' prefixed properties
+//   customA: '--' prefixed custom properties
+
+var list = cssA;
+for (var i = 0, j = styleList.length; i < j; i++) {
+  var prop = styleList.item(i);
+
+  switch (list) {
+    case cssA:
+      if (isMozPrefixed(prop)) {
+        list = mozA;
+      }
+      // fall through
+    case mozA:
+      if (isWebkitPrefixed(prop)) {
+        list = webkitA;
+      }
+      // fall through
+    case webkitA:
+      if (isCustom(prop)) {
+        list = customA;
+      }
+      // fall through
+  }
+
+  list.push(prop);
+}
+
+var cssB = cssA.slice(0).sort(),
+    mozB = mozA.slice(0).sort(),
+    webkitB = webkitA.slice(0).sort();
+
+is(cssA.toString(), cssB.toString(), 'CSS property list should be alphabetical');
+is(mozA.toString(), mozB.toString(), 'Experimental -moz- CSS property list should be alphabetical');
+is(webkitA.toString(), webkitB.toString(), 'Compatible -webkit- CSS property list should be alphabetical');
+
+// We don't test that the custom property list is sorted, as the CSSOM
+// specification does not yet require it, and we don't return them
+// in sorted order.
+
+ok(!cssA.find(isWebkitPrefixed), 'Compatible -webkit- CSS properties should not be in the mature CSS property list');
+ok(!cssA.find(isMozPrefixed), 'Experimental -moz- CSS properties should not be in the mature CSS property list');
+ok(!cssA.find(isCustom), 'Custom CSS properties should not be in the mature CSS property list');
+ok(!mozA.find(isWebkitPrefixed), 'Compatible -webkit- CSS properties should not be in the experimental -moz- CSS '
+                                  + 'property list');
+ok(!mozA.find(isNotMozPrefixed), 'Experimental -moz- CSS property list should not contain non -moz- prefixed '
+                                  + 'CSS properties');
+ok(!mozA.find(isCustom), 'Custom CSS properties should not be in the experimental -moz- CSS property list');
+ok(!webkitA.find(isNotWebkitPrefixed), 'Compatible -webkit- CSS properties should not contain non -webkit- prefixed '
+                                        + 'CSS properties');
+ok(!webkitA.find(isMozPrefixed), 'Experimental -moz- CSS properties should not be in the compatible -webkit- CSS '
+                                  + 'property list');
+ok(!webkitA.find(isCustom), 'Custom CSS properties should not be in the compatible -webkit- CSS property list');
+ok(!customA.find(isNotCustom), 'Non-custom CSS properties should not be in the custom property list');
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug667520.html b/layout/style/test/test_bug667520.html
new file mode 100644
index 0000000000..fb46943e8e
--- /dev/null
+++ b/layout/style/test/test_bug667520.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=667520
+-->
+<head>
+  <title>Test for Bug 667520</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=667520">Mozilla Bug 667520</a>
+<p id="display">
+  <!-- important: we need a <span> as the second element child and then
+       non-span elements between that and the next </span> -->
+  <i></i>
+  <span id="2"></span>
+  <i></i>
+  <i></i>
+  <i></i>
+  <i></i>
+  <span id="7"></span>
+  <span id="8"></span>
+</p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 667520 **/
+var spans = $("display").querySelectorAll("span");
+is(spans.length, 3, "Should have 3 span kids");
+
+is($("display").querySelector("span:nth-child(3)"), null, "Third child is not span");
+is($("display").querySelector("span:nth-child(4)"), null, "Fourth child is not span");
+
+for (var i = 0; i < spans.length; ++i) {
+  var id = spans[i].id;
+  /* Important: need to include 'span' in that selector so we only match
+     nth-child against spans. */
+  var target = $("display").querySelector("span:nth-child("+id+")");
+  is(target, spans[i], "Unexpected element");
+  is(target.id, spans[i].id, "Unexpected id");
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug716226.html b/layout/style/test/test_bug716226.html
new file mode 100644
index 0000000000..ed538cd822
--- /dev/null
+++ b/layout/style/test/test_bug716226.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=716226
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 716226</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style id="s">
+    @keyframes foo { }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=716226">Mozilla Bug 716226</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 716226 **/
+var sheet = $("s").sheet;
+var rules = sheet.cssRules;
+is(rules.length, 1, "Should have one keyframes rule");
+var keyframesRule = rules[0];
+var keyframeRules = keyframesRule.cssRules;
+is(keyframeRules.length, 0, "Should have no keyframe rules yet");
+
+keyframesRule.appendRule('0% { }');
+is(keyframeRules.length, 1, "Should have a keyframe rule now");
+var keyframeRule = keyframeRules[0];
+is(keyframeRule.parentRule, keyframesRule,
+   "Parent of keyframe should be keyframes");
+is(keyframeRule.parentStyleSheet, sheet,
+   "Parent stylesheet of keyframe should be our sheet");
+
+is(keyframeRule.style.cssText, "", "Should have no declarations yet");
+// Note: purposefully non-canonical cssText string so we can make sure we
+// really invoked the CSS parser and serializer.
+keyframeRule.style.cssText = "color:green";
+is(keyframeRule.style.cssText, "color: green;",
+   "Should have the declarations we set now");
+
+
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug732153.html b/layout/style/test/test_bug732153.html
new file mode 100644
index 0000000000..03591e3dc6
--- /dev/null
+++ b/layout/style/test/test_bug732153.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=732153
+-->
+<title>Test for Bug 732153</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=732153">Mozilla Bug 732153</a>
+<div></div>
+<script>
+var div = document.querySelector("div");
+[
+  "",
+  "backface-visibility: hidden",
+  "transform-style: preserve-3d",
+  "backface-visibility: hidden; transform-style: preserve-3d",
+].forEach(function(style) {
+  div.setAttribute("style", style);
+  is(getComputedStyle(div).transform, "none",
+    "Computed 'transform' with style=\"" + style + '"');
+});
+</script>
diff --git a/layout/style/test/test_bug732209.html b/layout/style/test/test_bug732209.html
new file mode 100644
index 0000000000..1bf5825000
--- /dev/null
+++ b/layout/style/test/test_bug732209.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=732209
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 732209</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+    #content span { color: red; }
+    #content span.reverse { color: green; }
+    #content { display: block !important; }
+    #content span::before { content: attr(id); }
+  </style>
+  <link rel="stylesheet" href="bug732209-css.sjs?one">
+  <link rel="stylesheet" href="bug732209-css.sjs?two" crossorigin>
+  <link rel="stylesheet" href="bug732209-css.sjs?three" crossorigin="use-credentials">
+  <link rel="stylesheet"
+        href="http://example.com/tests/layout/style/test/bug732209-css.sjs?four">
+  <link rel="stylesheet"
+        href="http://example.com/tests/layout/style/test/bug732209-css.sjs?five"
+        crossorigin>
+  <link rel="stylesheet"
+        href="http://example.com/tests/layout/style/test/bug732209-css.sjs?six"
+        crossorigin="use-credentials">
+  <link rel="stylesheet"
+        href="http://example.com/tests/layout/style/test/bug732209-css.sjs?seven&cors-anonymous">
+  <link rel="stylesheet" id="cross-origin-sheet"
+        href="http://example.com/tests/layout/style/test/bug732209-css.sjs?eight&cors-anonymous"
+        crossorigin>
+  <link rel="stylesheet"
+        href="http://example.com/tests/layout/style/test/bug732209-css.sjs?nine&cors-anonymous"
+        crossorigin="use-credentials">
+  <link rel="stylesheet"
+        href="http://example.com/tests/layout/style/test/bug732209-css.sjs?ten&cors-credentials">
+  <link rel="stylesheet"
+        href="http://example.com/tests/layout/style/test/bug732209-css.sjs?eleven&cors-credentials"
+        crossorigin>
+  <link rel="stylesheet"
+        href="http://example.com/tests/layout/style/test/bug732209-css.sjs?twelve&cors-credentials"
+        crossorigin="use-credentials">
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=732209">Mozilla Bug 732209</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  <span id="one"></span>
+  <span id="two"></span>
+  <span id="three"></span>
+  <span id="four"></span>
+  <span id="five" class="reverse"></span>
+  <span id="six" class="reverse"></span>
+  <span id="seven"></span>
+  <span id="eight"></span>
+  <span id="nine" class="reverse"></span>
+  <span id="ten"></span>
+  <span id="eleven"></span>
+  <span id="twelve"></span>
+</div>
+<pre id="test" style="color: red">
+<script type="application/javascript">
+
+/** Test for Bug 732209 **/
+
+SimpleTest.waitForExplicitFinish();
+addLoadEvent(function() {
+  var spans = $("content").querySelectorAll("span");
+  for (var i = 0; i < spans.length; ++i) {
+    is(getComputedStyle(spans[i], "").color, "rgb(0, 128, 0)",
+       "Span " + spans[i].id + " should be green");
+  }
+
+  try {
+    var sheet = $("cross-origin-sheet").sheet;
+    dump('aaa\n');
+    is(sheet.cssRules.length, 2,
+       "Should be able to get length of list of rules");
+    is(sheet.cssRules[0].style.color, "green",
+       "Should be able to read individual rules");
+  } catch (e) {
+    ok(false,
+       "Should be allowed to access cross-origin sheet that opted in with CORS: " + e);
+  }
+
+  SimpleTest.finish();
+});
+
+
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug73586.html b/layout/style/test/test_bug73586.html
new file mode 100644
index 0000000000..6a95703cd7
--- /dev/null
+++ b/layout/style/test/test_bug73586.html
@@ -0,0 +1,189 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=73586
+-->
+<head>
+  <title>Test for Bug 73586</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+
+  span { background: white; color: black; border: medium solid black; }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=73586">Mozilla Bug 73586</a>
+<div id="display"></div>
+
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 73586 **/
+
+const GREEN = "rgb(0, 128, 0)";
+const LIME = "rgb(0, 255, 0)";
+const BLACK = "rgb(0, 0, 0)";
+const WHITE = "rgb(255, 255, 255)";
+
+function cs(elt) { return getComputedStyle(elt, ""); }
+
+function check_children(p, check_cb) {
+    var len = p.childNodes.length;
+    var elts = 0;
+    var i, elt, child;
+    for (i = 0; i < len; ++i) {
+      if (p.childNodes[i].nodeType == Node.ELEMENT_NODE)
+        ++elts;
+    }
+
+    elt = 0;
+    for (i = 0; i < len; ++i) {
+        child = p.childNodes[i];
+        if (child.nodeType != Node.ELEMENT_NODE)
+            continue;
+        check_cb(child, elt, elts, i, len);
+        ++elt;
+    }
+}
+
+function run_series(check_cb) {
+    var display = document.getElementById("display");
+    // Use a new parent node every time since the optimizations cause
+    // bits to be set (permanently) on the parent.
+    var p = document.createElement("p");
+    display.appendChild(p);
+    p.innerHTML = "x<span></span><span></span>";
+
+    check_children(p, check_cb);
+    var text = p.removeChild(p.childNodes[0]);
+    check_children(p, check_cb);
+    var span = p.removeChild(p.childNodes[0]);
+    check_children(p, check_cb);
+    p.appendChild(span);
+    check_children(p, check_cb);
+    p.removeChild(span);
+    check_children(p, check_cb);
+    p.insertBefore(span, p.childNodes[0]);
+    check_children(p, check_cb);
+    p.removeChild(span);
+    check_children(p, check_cb);
+    p.insertBefore(span, null);
+    check_children(p, check_cb);
+    p.appendChild(document.createElement("span"));
+    check_children(p, check_cb);
+    p.insertBefore(document.createElement("span"), p.childNodes[2]);
+    check_children(p, check_cb);
+    p.appendChild(text);
+    check_children(p, check_cb);
+
+    display.removeChild(p);
+}
+
+var style = document.createElement("style");
+style.setAttribute("type", "text/css");
+var styleText = document.createTextNode("");
+style.appendChild(styleText);
+document.getElementsByTagName("head")[0].appendChild(style);
+
+styleText.data = "span:first-child { background: lime; }";
+run_series(function(child, elt, elts, node, nodes) {
+        is(cs(child).backgroundColor, (elt == 0) ? LIME : WHITE,
+           "child " + node + " should " + ((elt == 0) ? "" : "NOT ") +
+           " match :first-child");
+    });
+
+styleText.data = "span:last-child { color: green; }";
+run_series(function(child, elt, elts, node, nodes) {
+        is(cs(child).color, (elt == elts - 1) ? GREEN : BLACK,
+           "child " + node + " should " + ((elt == elts - 1) ? "" : "NOT ") +
+           " match :last-child");
+    });
+
+styleText.data = "span:only-child { border: medium solid green; }";
+run_series(function(child, elt, elts, node, nodes) {
+        is(cs(child).borderTopColor, (elts == 1) ? GREEN : BLACK,
+           "child " + node + " should " + ((elts == 1) ? "" : "NOT ") +
+           " match :only-child");
+    });
+
+styleText.data = "span:-moz-first-node { text-decoration-line: underline; }";
+run_series(function(child, elt, elts, node, nodes) {
+        is(cs(child).textDecorationLine, (node == 0) ? "underline" : "none",
+           "child " + node + " should " + ((node == 0) ? "" : "NOT ") +
+           " match :-moz-first-node");
+    });
+
+styleText.data = "span:-moz-last-node { visibility: hidden; }";
+run_series(function(child, elt, elts, node, nodes) {
+        is(cs(child).visibility, (node == nodes - 1) ? "hidden" : "visible",
+           "child " + node + " should " + ((node == nodes - 1) ? "" : "NOT ") +
+           " match :-moz-last-node");
+    });
+
+styleText.data = "span:nth-child(1) { background: lime; }";
+run_series(function(child, elt, elts, node, nodes) {
+        var matches = elt == 0;
+        is(cs(child).backgroundColor, matches ? LIME : WHITE,
+           "child " + node + " should " + (matches ? "" : "NOT ") +
+           " match " + styleText.data);
+    });
+
+styleText.data = "span:nth-last-child(0n+2) { color: green; }";
+run_series(function(child, elt, elts, node, nodes) {
+        var matches = (elt == elts - 2);
+        is(cs(child).color, matches ? GREEN : BLACK,
+           "child " + node + " should " + (matches ? "" : "NOT ") +
+           " match " + styleText.data);
+    });
+
+styleText.data = "span:nth-of-type(2n+3) { color: green; }";
+run_series(function(child, elt, elts, node, nodes) {
+        var nidx = elt + 1;
+        var matches = nidx % 2 == 1 && nidx >= 3;
+        is(cs(child).color, matches ? GREEN : BLACK,
+           "child " + node + " should " + (matches ? "" : "NOT ") +
+           " match " + styleText.data);
+    });
+
+styleText.data = "span:nth-last-of-type(-2n+5) { color: green; }";
+run_series(function(child, elt, elts, node, nodes) {
+        var nlidx = elts - elt;
+        var matches = nlidx % 2 == 1 && nlidx <= 5;
+        is(cs(child).color, matches ? GREEN : BLACK,
+           "child " + node + " should " + (matches ? "" : "NOT ") +
+           " match " + styleText.data);
+    });
+
+styleText.data = "span:first-of-type { color: green; }";
+run_series(function(child, elt, elts, node, nodes) {
+        var matches = (elt == 0);
+        is(cs(child).color, matches ? GREEN : BLACK,
+           "child " + node + " should " + (matches ? "" : "NOT ") +
+           " match " + styleText.data);
+    });
+
+styleText.data = "span:last-of-type { color: green; }";
+run_series(function(child, elt, elts, node, nodes) {
+        var matches = (elt == elts - 1);
+        is(cs(child).color, matches ? GREEN : BLACK,
+           "child " + node + " should " + (matches ? "" : "NOT ") +
+           " match " + styleText.data);
+    });
+
+styleText.data = "span:only-of-type { color: green; }";
+run_series(function(child, elt, elts, node, nodes) {
+        var matches = elts == 1;
+        is(cs(child).color, matches ? GREEN : BLACK,
+           "child " + node + " should " + (matches ? "" : "NOT ") +
+           " match " + styleText.data);
+    });
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug74880.html b/layout/style/test/test_bug74880.html
new file mode 100644
index 0000000000..054189056b
--- /dev/null
+++ b/layout/style/test/test_bug74880.html
@@ -0,0 +1,119 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=74880
+-->
+<head>
+  <title>Test for Bug 74880</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>        
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+
+  /* so that computed values for other border properties work right */
+  #display { border-style: solid; }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=74880">Mozilla Bug 74880</a>
+<div style="margin: 1px 2px 3px 4px; border-width: 5px 6px 7px 8px; border-style: dotted dashed solid double; border-color: blue fuchsia green orange; padding: 9px 10px 11px 12px">
+<p id="display"></p>
+</div>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 74880 **/
+
+var gProps = [
+  [ "margin-left", "margin-right", "margin-inline-start", "margin-inline-end" ],
+  [ "padding-left", "padding-right", "padding-inline-start", "padding-inline-end" ],
+  [ "border-left-color", "border-right-color", "border-inline-start-color", "border-inline-end-color" ],
+  [ "border-left-style", "border-right-style", "border-inline-start-style", "border-inline-end-style" ],
+  [ "border-left-width", "border-right-width", "border-inline-start-width", "border-inline-end-width" ],
+];
+
+var gLengthValues = [ "inherit", "initial", "2px", "1em", "unset" ];
+var gColorValues = [ "inherit", "initial", "currentColor", "green", "unset" ];
+var gStyleValues = [ "inherit", "initial", "double", "dashed", "unset" ];
+
+function values_for(set) {
+  var values;
+  if (set[0].match(/style$/))
+    values = gStyleValues;
+  else if (set[0].match(/color$/))
+    values = gColorValues;
+  else
+    values = gLengthValues;
+  return values;
+}
+
+var e = document.getElementById("display");
+var s = e.style;
+var c = window.getComputedStyle(e);
+
+for (var set of gProps) {
+  var values = values_for(set);
+  for (var val of values) {
+    function check(dir, plogical, pvisual) {
+      var v0 = c.getPropertyValue(pvisual);
+      s.setProperty("direction", dir, "");
+      s.setProperty(pvisual, val, "");
+      var v1 = c.getPropertyValue(pvisual);
+      if (val != "initial" && val != "unset" && val != "currentColor")
+        isnot(v1, v0, "setProperty set the property " + pvisual + ": " + val);
+      s.removeProperty(pvisual);
+      is(c.getPropertyValue(pvisual), v0, "removeProperty worked for " + pvisual);
+      s.setProperty(plogical, val, "")
+      var v2 = c.getPropertyValue(pvisual);
+      is(v2, v1, "the logical property " + plogical + ": " + val + " showed up in the right place");
+      s.removeProperty(plogical);
+      is(c.getPropertyValue(pvisual), v0, "removeProperty worked for " + plogical);
+
+      s.removeProperty("direction");
+    }
+
+    check("ltr", set[2], set[0]);
+    check("ltr", set[3], set[1]);
+    check("rtl", set[2], set[1]);
+    check("rtl", set[3], set[0]);
+  }
+
+  function check_cascading(dir, plogical, pvisual) {
+    var dirstr = "direction: " + dir + ";";
+    e.setAttribute("style", dirstr + pvisual + ":" + values[2]);
+    var v2 = c.getPropertyValue(pvisual);
+    e.setAttribute("style", dirstr + pvisual + ":" + values[3]);
+    var v3 = c.getPropertyValue(pvisual);
+    isnot(v2, v3, "values should produce different computed values");
+
+    var desc = ["cascading for", pvisual, "and", plogical, "with direction", dir].join(" ");
+    e.setAttribute("style", dirstr + pvisual + ":" + values[3] + ";" +
+                            plogical + ":" + values[2]);
+    is(c.getPropertyValue(pvisual), v2, desc);
+    e.setAttribute("style", dirstr + plogical + ":" + values[3] + ";" +
+                            pvisual + ":" + values[2]);
+    is(c.getPropertyValue(pvisual), v2, desc);
+    e.setAttribute("style", dirstr + pvisual + ":" + values[2] + ";" +
+                            plogical + ":" + values[3]);
+    is(c.getPropertyValue(pvisual), v3, desc);
+    e.setAttribute("style", dirstr + plogical + ":" + values[2] + ";" +
+                            pvisual + ":" + values[3]);
+    is(c.getPropertyValue(pvisual), v3, desc);
+    e.removeAttribute("style");
+  }
+
+  check_cascading("ltr", set[2], set[0]);
+  check_cascading("ltr", set[3], set[1]);
+  check_cascading("rtl", set[2], set[1]);
+  check_cascading("rtl", set[3], set[0]);
+}
+
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_bug765590.html b/layout/style/test/test_bug765590.html
new file mode 100644
index 0000000000..acc9f5b5c0
--- /dev/null
+++ b/layout/style/test/test_bug765590.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=765590
+-->
+<head>
+  <title>Test for Bug 765590</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+    @namespace svg "http://www.w3.org/2000/svg";
+  </style>
+</head>
+<body>
+  <script>
+    var styleElement = document.getElementsByTagName("style")[0]
+    var rule = styleElement.sheet.cssRules[0];
+    is(rule.type, 10, "rule type should be equal 10")
+    is(CSSRule.NAMESPACE_RULE, 10, "NAMESPACE_RULE should be equal to 10")
+  </script>
+</body>
diff --git a/layout/style/test/test_bug771043.html b/layout/style/test/test_bug771043.html
new file mode 100644
index 0000000000..a5073d681e
--- /dev/null
+++ b/layout/style/test/test_bug771043.html
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=771043
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 771043</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  /** Test for Bug 771043 **/
+  var expectedValue;
+  var callCount = 0;
+  var storedHeight;
+  function callback(arg) {
+    ++callCount;
+    is(arg.matches, expectedValue,
+       "Should have the right value on call #" + callCount + " to the callback");
+    SimpleTest.executeSoon(tests.shift());
+  }
+
+  function flushLayout() {
+    storedHeight = document.querySelector("iframe").offsetHeight;
+  }
+
+  function setHeight(height) {
+    var ifr = document.querySelector("iframe");
+    ifr.style.height = height + "px";
+    flushLayout();
+  }
+
+  SimpleTest.waitForExplicitFinish();
+
+  var tests = [
+    () => { expectedValue = true; setHeight(50); },
+    () => { expectedValue = false; setHeight(200); },
+    () => {
+      var ifr = document.querySelector("iframe");
+      ifr.style.display = "none";
+      flushLayout();
+      ifr.style.display = "";
+      expectedValue = true;
+      setHeight(50);
+    },
+    () => { expectedValue = false; setHeight(200); },
+    SimpleTest.finish.bind(SimpleTest)
+  ];
+
+  addLoadEvent(function() {
+    var mql = frames[0].matchMedia("(orientation: landscape)");
+    mql.addListener(callback);
+
+    tests.shift()();
+  });
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=771043">Mozilla Bug 771043</a>
+<!-- Important: the iframe needs to be displayed -->
+<p id="display"><iframe style="width: 100px; height: 200px"</p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug795520.html b/layout/style/test/test_bug795520.html
new file mode 100644
index 0000000000..66726c2b8e
--- /dev/null
+++ b/layout/style/test/test_bug795520.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=795520
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 795520</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=795520">Mozilla Bug 795520</a>
+<p id="display">
+  <iframe id="f" style="display:none"></iframe>
+</p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 795520 **/
+SimpleTest.waitForExplicitFinish();
+addLoadEvent(function() {
+  doc = $("f").contentDocument;
+  $("f").style.display = "";
+  isnot(doc.defaultView.getComputedStyle(doc.body), null,
+        "Should have computed style here");
+  SimpleTest.finish();
+});
+
+
+
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug798843_pref.html b/layout/style/test/test_bug798843_pref.html
new file mode 100644
index 0000000000..aea12ccc35
--- /dev/null
+++ b/layout/style/test/test_bug798843_pref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+  Make sure that the SVG glyph context-* values are not considered real values
+  when gfx.font_rendering.opentype_svg.enabled is pref'ed off.
+-->
+<head>
+  <title>Test that SVG glyph context-* values can be pref'ed off</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+</head>
+<body>
+
+<script>
+
+var props = {
+  "strokeDasharray" : "context-value",
+  "strokeDashoffset" : "context-value",
+  "strokeWidth" : "context-value"
+};
+
+function testDisabled() {
+  for (var p in props) {
+    document.body.style[p] = props[p];
+    is(document.body.style[p], "", p + " not settable to " + props[p]);
+    document.body.style[p] = "";
+  }
+  SimpleTest.finish();
+}
+
+function testEnabled() {
+  for (var p in props) {
+    document.body.style[p] = props[p];
+    is(document.body.style[p], props[p], p + " settable to " + props[p]);
+    document.body.style[p] = "";
+  }
+
+  SpecialPowers.pushPrefEnv(
+    {'set': [['gfx.font_rendering.opentype_svg.enabled', false]]},
+    testDisabled
+  );
+}
+
+SimpleTest.waitForExplicitFinish();
+
+SpecialPowers.pushPrefEnv(
+  {'set': [['gfx.font_rendering.opentype_svg.enabled', true]]},
+  testEnabled
+);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/style/test/test_bug829816.html b/layout/style/test/test_bug829816.html
new file mode 100644
index 0000000000..a4614cf6eb
--- /dev/null
+++ b/layout/style/test/test_bug829816.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=829816
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 829816</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+
+  <style type="text/css">
+    b { content: "\0";      counter-reset: \0      }
+    b { content: "\00";     counter-reset: \00     }
+    b { content: "\000";    counter-reset: \000    }
+    b { content: "\0000";   counter-reset: \0000   }
+    b { content: "\00000";  counter-reset: \00000  }
+    b { content: "\000000"; counter-reset: \000000 }
+  </style>
+
+  <!-- U+0000 characters in <style> would be replaced by the HTML parser -->
+  <link rel="stylesheet" type="text/css" href="file_bug829816.css"/>
+
+  <script type="application/javascript">
+
+  /** Test for Bug 829816 **/
+  var ss = document.styleSheets[1];
+
+  for (var i = 0; i < 6; i++) {
+    is(ss.cssRules[i].style.content, "\"\uFFFD\"",
+        "\\0 in strings should be converted to U+FFFD");
+    is(ss.cssRules[i].style.counterReset, "\uFFFD 0",
+        "\\0 in identifiers should be converted to U+FFFD");
+  }
+
+  is(document.styleSheets[2].cssRules[0].style.content, "\"\uFFFD\"",
+      "U+0000 in strings should be converted to U+FFFD");
+  is(document.styleSheets[2].cssRules[0].style.counterReset, "\uFFFD 0",
+      "U+0000 in identifiers should be converted to U+FFFD");
+  is(document.styleSheets[2].cssRules[1].style.content, "\"\uFFFD\"",
+      "U+0000 in strings should be converted to U+FFFD");
+  is(document.styleSheets[2].cssRules[1].style.counterReset, "\uFFFD 0",
+      "U+0000 in identifiers should be converted to U+FFFD");
+
+
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=829816">Mozilla Bug 829816</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug874919.html b/layout/style/test/test_bug874919.html
new file mode 100644
index 0000000000..be480600b9
--- /dev/null
+++ b/layout/style/test/test_bug874919.html
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=874919
+-->
+<head>
+  <title>Test for Bug 874919</title>
+  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
+  <script src="/tests/SimpleTest/SimpleTest.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=874919">Mozilla Bug 874919</a>
+<p id="display"></p>
+<div id="content" style="width: 150px">
+    <svg id="outer_SVG" style="display: inline; width: 100%">
+        <circle cx="120" cy="120" r="120" fill="blue"></circle>
+        <svg id="inner_SVG">
+            <circle id="circle" cx="120" cy="120" r="120" fill="red"></circle>
+        </svg>
+    </svg>
+</div>
+<pre id="test">
+
+<script type="text/javascript">
+
+    var shouldUseComputed = ["inner_SVG"]
+    var shouldUseUsed = ["outer_SVG"]
+  
+    shouldUseUsed.forEach(function(elemId) {
+
+        var style = window.getComputedStyle(document.getElementById(elemId));
+        
+        ok(style.width.match(/^\d+px$/), 
+            "Inline Outer SVG element's getComputedStyle.width should be used value. ");
+            
+        ok(style.height.match(/^\d+px$/), 
+            "Inline Outer SVG element's getComputedStyle.height should be used value.");
+    });
+    
+    shouldUseComputed.forEach(function(elemId) {
+        var style = window.getComputedStyle(document.getElementById(elemId));
+        
+        // Computed value should match either the percentage used, or "auto" in the case of the inner SVG element.
+        ok(style.width.match(/^\d+%$|^auto$/), 
+            "Inline inner SVG element's getComputedStyle.width should be computed value. " + style.width);
+            
+        ok(style.height.match(/^\d+%$|^auto$/), 
+            "Inline inner SVG element's getComputedStyle.height should be computed value. " + style.height);
+    });
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug887741_at-rules_in_declaration_lists.html b/layout/style/test/test_bug887741_at-rules_in_declaration_lists.html
new file mode 100644
index 0000000000..739ace0f04
--- /dev/null
+++ b/layout/style/test/test_bug887741_at-rules_in_declaration_lists.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=887741
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 887741: at-rules in declaration lists</title>
+      <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <style>
+    #foo {
+        color: red;
+        @invalid-rule {
+            ignored: ignored;
+        }
+        /* No semicolon */
+        color: green;
+    }
+    @page {
+        margin-top: 0;
+        @bottom-center {
+            content: counter(page);
+        }
+        /* No semicolon */
+        margin-top: 5cm;
+    }
+    @keyframes dummy-animation {
+      12% {
+        color: red;
+        @invalid-rule {}
+        /* No semicolon */
+        color: green;
+      }
+    }
+    /* TODO: other at-rules that use declaration syntax? */
+  </style>
+  <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=887741">Mozilla Bug 887741</a>
+<p id="display"></p>
+<div id="content" style="display: none; color: red;
+                         @invalid-rule{} /* No semicolon */ color: green;">
+
+</div>
+<pre id="test">
+  <script type="application/javascript">
+
+  /** Test for Bug 887741 **/
+
+  var style = document.getElementById('content').style;
+  is(style.display, 'none', 'Sanity check: we have the right element');
+  is(style.color, 'green', 'Support at-rules in style attributes');
+
+  style.cssText = 'display: none; color: red; @invalid-rule{} /* No semicolon */ color: lime;';
+  is(style.color, 'lime', 'Support at-rules in CSSStyleDeclaration.cssText');
+
+  var rules = document.styleSheets[0].cssRules;
+  var style_rule = rules[0];
+  is(style_rule.selectorText, '#foo', 'Sanity check: we have the right style rule');
+  is(style_rule.style.color, 'green', 'Support at-rules in style rules');
+
+  var page_rule = rules[1];
+  is(page_rule.type, page_rule.PAGE_RULE, 'Sanity check: we have the right style rule');
+  is(page_rule.style.marginTop, '5cm', 'Support at-rules in @page rules');
+
+  var keyframe_rule = rules[2].cssRules[0];
+  is(keyframe_rule.keyText, '12%', 'Sanity check: we have the right keyframe rule');
+  is(keyframe_rule.style.color, 'green', 'Support at-rules in keyframe rules')
+
+  </script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_bug892929.html b/layout/style/test/test_bug892929.html
new file mode 100644
index 0000000000..a67db56ee3
--- /dev/null
+++ b/layout/style/test/test_bug892929.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>Bug 892929 test</title>
+  <link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-fonts-3/#om-fontfeaturevalues" />
+  <meta name="assert" content="window.CSSFontFeatureValuesRule should appear by default" />
+  <script type="text/javascript" src="/resources/testharness.js"></script>
+  <script type="text/javascript" src="/resources/testharnessreport.js"></script>
+  <style type="text/css">
+  </style>
+</head>
+<body>
+<div id="log"></div>
+<pre id="display"></pre>
+
+<script type="text/javascript">
+
+function testCSSFontFeatureValuesRuleOM() {
+  var s = document.documentElement.style;
+  var cs = window.getComputedStyle(document.documentElement);
+
+  var hasFFVRule = "CSSFontFeatureValuesRule" in window;
+  var hasStyleAlternates = "fontVariantAlternates" in s;
+  var hasCompStyleAlternates = "fontVariantAlternates" in cs;
+
+  test(function() {
+    assert_equals(hasFFVRule,
+                  hasStyleAlternates,
+                  "style.fontVariantAlternates " +
+                    (hasStyleAlternates ? "available" : "not available") +
+                    " but " +
+                    "window.CSSFontFeatureValuesRule " +
+                    (hasFFVRule ? "available" : "not available") +
+                    " - ");
+  }, "style.fontVariantAlternates availability matches window.CSSFontFeatureValuesRule availability");
+
+  test(function() {
+    assert_equals(hasFFVRule,
+                  hasCompStyleAlternates,
+                  "computedStyle.fontVariantAlternates " +
+                    (hasCompStyleAlternates ? "available" : "not available") +
+                    " but " +
+                    "window.CSSFontFeatureValuesRule " +
+                    (hasFFVRule ? "available" : "not available") +
+                    " - ");
+  }, "computedStyle.fontVariantAlternates availability matches window.CSSFontFeatureValuesRule availability");
+
+  // if window.CSSFontFeatureValuesRule isn't around, neither should any of the font feature props
+  fontFeatureProps = [ "fontKerning", "fontVariantAlternates", "fontVariantCaps", "fontVariantEastAsian",
+                       "fontVariantLigatures", "fontVariantNumeric", "fontVariantPosition", "fontSynthesis",
+                       "fontFeatureSettings", "fontLanguageOverride" ];
+
+  if (!hasFFVRule) {
+    var i;
+    for (i = 0; i < fontFeatureProps.length; i++) {
+      var prop = fontFeatureProps[i];
+      test(function() {
+             assert_true(!(prop in s), "window.CSSFontFeatureValuesRule not available but style." + prop + " is available - ");
+           }, "style." + prop + " availability");
+      test(function() {
+             assert_true(!(prop in cs), "window.CSSFontFeatureValuesRule not available but computedStyle." + prop + " is available - ");
+           }, "computedStyle." + prop + " availability");
+    }
+  }
+
+}
+
+testCSSFontFeatureValuesRuleOM();
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_bug98997.html b/layout/style/test/test_bug98997.html
new file mode 100644
index 0000000000..5dc325f9ef
--- /dev/null
+++ b/layout/style/test/test_bug98997.html
@@ -0,0 +1,144 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=98997
+-->
+<head>
+  <title>Test for Bug 98997</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+
+  /*
+   * This test does NOT test any of the cases where :empty and
+   * :-moz-only-whitespace differ.  We should probably have some tests
+   * for that as well.
+   */
+  div.test { width: 200px; height: 30px; margin: 5px 0; }
+  div.test.to, div.test.from:empty { background: orange; }
+  div.test.to:empty, div.test.from { background: green; }
+  div.test.to, div.test.from:-moz-only-whitespace { color: maroon; }
+  div.test.to:-moz-only-whitespace, div.test.from { color: navy; }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=98997">Mozilla Bug 98997</a>
+<div id="display">
+<div class="test to" onclick="testReplaceChild(this, '')">x</div>
+<div class="test to" onclick="testReplaceChild(this, '')"><span>x</span></div>
+<div class="test to" onclick="testReplaceChild(this, '')">x<!-- comment --></div>
+<div class="test to" onclick="testRemoveChild(this)">x</div>
+<div class="test to" onclick="testRemoveChild(this)"><span>x</span></div>
+<div class="test to" onclick="testRemoveChild(this)">x<!-- comment --></div>
+<div class="test to" onclick="testChangeData(this, '')">x</div>
+<div class="test to" onclick="testChangeData(this, '')">x<!-- comment --></div>
+<div class="test to" onclick="testDeleteData(this)">x</div>
+<div class="test to" onclick="testDeleteData(this)">x<!-- comment --></div>
+<div class="test to" onclick="testReplaceData(this, '')">x</div>
+<div class="test to" onclick="testReplaceData(this, '')">x<!-- comment --></div>
+
+<div class="test from makeemptytext" onclick="testReplaceChild(this, 'x')"></div>
+<div class="test from makeemptytext" onclick="testReplaceChild(this, 'x')"><!-- comment --></div>
+<div class="test from" onclick="testReplaceChild(this, 'x')"><!-- comment --></div>
+<div class="test from" onclick="testInsertBefore(this, 'x')"></div>
+<div class="test from" onclick="testInsertBefore(this, 'x')"><!-- comment --></div>
+<div class="test from" onclick="testAppendChild(this, 'x')"></div>
+<div class="test from" onclick="testAppendChild(this, 'x')"><!-- comment --></div>
+<div class="test from makeemptytext" onclick="testChangeData(this, 'x')"></div>
+<div class="test from makeemptytext" onclick="testChangeData(this, 'x')"><!-- comment --></div>
+<div class="test from makeemptytext" onclick="testAppendData(this, 'x')"></div>
+<div class="test from makeemptytext" onclick="testAppendData(this, 'x')"><!-- comment --></div>
+<div class="test from makeemptytext" onclick="testReplaceData(this, 'x')"></div>
+<div class="test from makeemptytext" onclick="testReplaceData(this, 'x')"><!-- comment --></div>
+</div>
+
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 98997 **/
+
+function testInsertBefore(elt, text) {
+  elt.insertBefore(document.createTextNode(text), elt.firstChild);
+}
+
+function testAppendChild(elt, text) {
+  elt.appendChild(document.createTextNode(text));
+}
+
+function testReplaceChild(elt, text) {
+  elt.replaceChild(document.createTextNode(text), elt.firstChild);
+}
+
+function testRemoveChild(elt) {
+  elt.firstChild.remove();
+}
+
+function testChangeData(elt, text) {
+  elt.firstChild.data = text;
+}
+
+function testAppendData(elt, text) {
+  elt.firstChild.appendData(text);
+}
+
+function testDeleteData(elt) {
+  elt.firstChild.deleteData(0, elt.firstChild.length);
+}
+
+function testReplaceData(elt, text) {
+  elt.firstChild.replaceData(0, elt.firstChild.length, text);
+}
+
+var cnodes = document.getElementById("display").childNodes;
+var divs = [];
+var i;
+for (i = 0; i < cnodes.length; ++i) {
+  if (cnodes[i].nodeName == "DIV")
+    divs.push(cnodes[i]);
+}
+
+for (i in divs) {
+  let div = divs[i];
+  if (div.className.match(/makeemptytext/))
+    div.insertBefore(document.createTextNode(""), div.firstChild);
+}
+
+const ORANGE = "rgb(255, 165, 0)";
+const MAROON = "rgb(128, 0, 0)";
+const GREEN = "rgb(0, 128, 0)";
+const NAVY = "rgb(0, 0, 128)";
+
+function color(div) {
+  return getComputedStyle(div, "").color;
+}
+function bg(div) {
+  return getComputedStyle(div, "").backgroundColor;
+}
+
+for (i in divs) {
+  let div = divs[i];
+  is(bg(div), ORANGE, "should be orange");
+  is(color(div), MAROON, "should be maroon");
+}
+
+for (i in divs) {
+  let div = divs[i];
+  var e = document.createEvent("MouseEvents");
+  e.initEvent("click", true, true);
+  div.dispatchEvent(e);
+}
+
+for (i in divs) {
+  let div = divs[i];
+  is(bg(div), GREEN, "should be green");
+  is(color(div), NAVY, "should be navy");
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_cascade.html b/layout/style/test/test_cascade.html
new file mode 100644
index 0000000000..6479d52617
--- /dev/null
+++ b/layout/style/test/test_cascade.html
@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<!-- vim: set shiftwidth=4 tabstop=8 autoindent expandtab: -->
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<html>
+<head>
+  <title>Test for Author style sheet aspects of CSS cascading</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+
+  </style>
+</head>
+<body id="thebody">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
+<div class="content_class" id="content" style="position:relative"></div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Author style sheet aspects of CSS cascading **/
+
+var style_element = document.createElement("style");
+var style_contents = document.createTextNode("");
+style_element.appendChild(style_contents);
+document.getElementsByTagName("head")[0].appendChild(style_element);
+
+var div = document.getElementById("content");
+var cs = window.getComputedStyle(div);
+var zindex = 0;
+
+/**
+ * Given the selectors |sel1| and |sel2|, in that order (the "order"
+ * aspect of the cascade), with declarations that are !important if
+ * |imp1|/|imp2| are true, assert that the one that wins in the
+ * cascading order is given by |winning| (which must be either 1 or 2).
+ */
+function do_test(sel1, imp1, sel2, imp2, winning) {
+  var ind1 = ++zindex;
+  var ind2 = ++zindex;
+  style_contents.data =
+    sel1 + " { z-index: " + ind1 + (imp1 ? "!important" :"") + " } " +
+    sel2 + " { z-index: " + ind2 + (imp2 ? "!important" :"") + " } ";
+  var result = cs.zIndex;
+  is(result, String((winning == 1) ? ind1 : ind2),
+     "cascading of " + style_contents.data);
+}
+
+// Test order, and order combined with !important
+do_test("div", false, "div", false, 2);
+do_test("div", false, "div", true, 2);
+do_test("div", true, "div", false, 1);
+do_test("div", true, "div", true, 2);
+
+// Test specificity on a single element
+do_test("div", false, "div.content_class", false, 2);
+do_test("div.content_class", false, "div", false, 1);
+
+// Test specificity across elements
+do_test("body#thebody div", false, "body div.content_class", false, 1);
+do_test("body div.content_class", false, "body#thebody div", false, 2);
+
+// Test specificity combined with !important
+do_test("div.content_class", false, "div", false, 1);
+do_test("div.content_class", true, "div", false, 1);
+do_test("div.content_class", false, "div", true, 2);
+do_test("div.content_class", true, "div", true, 1);
+
+function do_test_greater(sel1, sel2) {
+  do_test(sel1, false, sel2, false, 1);
+  do_test(sel2, false, sel1, false, 2);
+}
+
+function do_test_equal(sel1, sel2) {
+  do_test(sel1, false, sel2, false, 2);
+  do_test(sel2, false, sel1, false, 2);
+}
+
+// Test specificity of contents of :not()
+do_test_equal("div.content_class", "div:not(.wrong_class)");
+do_test_greater("div.content_class.content_class", "div.content_class");
+do_test_greater("div.content_class", "div");
+do_test_greater("div:not(.wrong_class)", "div");
+do_test_greater("div:not(.wrong_class):not(.wrong_class)",
+                "div:not(.wrong_class)");
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_ch_ex_no_infloops.html b/layout/style/test/test_ch_ex_no_infloops.html
new file mode 100644
index 0000000000..db9eda20df
--- /dev/null
+++ b/layout/style/test/test_ch_ex_no_infloops.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=678671
+-->
+<head>
+  <title>Test for Bug 678671</title>
+  <script 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=678671">Mozilla Bug 678671</a>
+<p id="display"></p>
+<div id="content"></div>
+<script type="application/javascript">
+
+/** Test for Bug 678671 **/
+
+/**
+ * Test 'ex' and 'ch' units in every place we possible can to make
+ * sure they don't cause an infinite loop.
+ */
+
+var content = document.getElementById("content");
+var cs = getComputedStyle(content, "");
+
+for (var prop in gCSSProperties) {
+  var info = gCSSProperties[prop];
+  function test_val(v) {
+    content.style.setProperty(prop, v, "");
+    isnot(get_computed_value(cs, prop), "",
+      "Setting '" + prop + "' to '" + v + "' should not cause infinite loop");
+  }
+  test_val('3ex');
+  test_val('2ch');
+  function test_replaced_values(value_list) {
+    // For each item in value_list, if it looks like it has a dimension
+    // in it, replace those dimensions with 3ex and 2ch and test it.
+    for (var i = 0; i < value_list.length; ++i) {
+      var value = value_list[i];
+      function try_replace(withval) {
+        var rep = value.replace(/[0-9.]+[a-zA-Z]+/g, withval)
+        if (rep != value) {
+          test_val(rep);
+        }
+      }
+      try_replace('3ex');
+      try_replace('2ch');
+    }
+  }
+  test_replaced_values(info.initial_values);
+  test_replaced_values(info.other_values);
+  content.style.removeProperty(prop);
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_change_hint_optimizations.html b/layout/style/test/test_change_hint_optimizations.html
new file mode 100644
index 0000000000..82e149154c
--- /dev/null
+++ b/layout/style/test/test_change_hint_optimizations.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test for style change hint optimizations</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  SimpleTest.waitForExplicitFinish();
+
+  function runTests() {
+
+    /** Test for Bug 1251075 **/
+    function test_bug1251075_div(id) {
+      var utils = SpecialPowers.DOMWindowUtils;
+
+      var div = document.getElementById(id);
+      div.style.display = "";
+
+      var description = div.style.cssText;
+
+      div.firstElementChild.offsetTop;
+      var constructedBefore = utils.framesConstructed;
+
+      div.style.transform = "translateX(10px)";
+      div.firstElementChild.offsetTop;
+      is(utils.framesConstructed, constructedBefore,
+         "adding a transform style to an element with " + description +
+         " should not cause frame reconstruction even when the element " +
+         "has absolutely positioned descendants");
+
+      div.style.display = "none";
+    }
+
+    test_bug1251075_div("bug1251075_a");
+    test_bug1251075_div("bug1251075_b");
+
+
+    SimpleTest.finish();
+  }
+
+  </script>
+</head>
+<body onload="runTests()">
+<div id="bug1251075_a" style="will-change: transform; display:none">
+  <div style="position: absolute; top: 0; left: 0;"></div>
+  <div style="position: fixed; top: 0; left: 0;"></div>
+</div>
+<div id="bug1251075_b" style="filter: blur(3px); display:none">
+  <div style="position: absolute; top: 0; left: 0;"></div>
+  <div style="position: fixed; top: 0; left: 0;"></div>
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_clip-path_polygon.html b/layout/style/test/test_clip-path_polygon.html
new file mode 100644
index 0000000000..3c77103ba2
--- /dev/null
+++ b/layout/style/test/test_clip-path_polygon.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {padding: 0;margin:0;}
+div {
+  width:  200px;
+  height: 200px;
+  position: fixed;
+  top: 50px;
+  left: 50px;
+  margin: 50px;
+  padding: 50px;
+  border: 50px solid red;
+  transform-origin: 0 0;
+  transform: translate(50px, 50px) scale(0.5);
+  background-color: green;
+  clip-path: polygon(0 0, 200px 0, 0 200px) content-box;
+}
+</style>
+<title>clip-path with polygon() hit test</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<div id="a"></div>
+<p style="margin-top: 110px">
+<script>
+var a = document.getElementById("a");
+isnot(a, document.elementFromPoint(199, 199), "a shouldn't be found");
+isnot(a, document.elementFromPoint(199, 250), "a shouldn't be found");
+isnot(a, document.elementFromPoint(250, 199), "a shouldn't be found");
+isnot(a, document.elementFromPoint(255, 255), "a shouldn't be found");
+isnot(a, document.elementFromPoint(301, 200), "a shouldn't be found");
+isnot(a, document.elementFromPoint(200, 301), "a shouldn't be found");
+is(a, document.elementFromPoint(200, 200), "a should be found");
+is(a, document.elementFromPoint(299, 200), "a should be found");
+is(a, document.elementFromPoint(200, 299), "a should be found");
+is(a, document.elementFromPoint(250, 250), "a should be found");
+</script>
+</html>
diff --git a/layout/style/test/test_color_rounding.html b/layout/style/test/test_color_rounding.html
new file mode 100644
index 0000000000..46698ede3d
--- /dev/null
+++ b/layout/style/test/test_color_rounding.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>Test rounding of CSS color valus</title>
+  <link rel="author" title="Manish Goregaokar" href="mailto:mgoregaokar@mozilla.com">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <link rel='stylesheet' href='/resources/testharness.css'>
+</head>
+<body>
+<div id="colordiv"></div>
+<script>
+
+function do_test(color, computed, reason) {
+    test(function() {
+        var element = document.getElementById('colordiv');
+        // assume this works; this way we clear any previous state
+        element.style.color = "red";
+        element.style.color = color;
+        assert_equals(getComputedStyle(element).color, computed);
+    }, `${reason}: ${color}`);
+}
+
+do_test("rgb(10%, 10%, 10%, 10%)", "rgba(26, 26, 26, 0.1)", "rgb percent-to-int should round");
+do_test("rgb(10%, 10%, 10%)", "rgb(26, 26, 26)", "rgb percent-to-int should round");
+do_test("hsl(0, 0%, 90%)", "rgb(230, 230, 230)", "hsl-to rgb should round");
+do_test("hsla(0, 0%, 90%, 10%)", "rgba(230, 230, 230, 0.1)", "hsl-to rgb should round");
+do_test("rgb(100%, 100%, 0%)", "rgb(255, 255, 0)", "handling of extrema");
+do_test("rgba(100%, 100%, 100%, 100%)", "rgb(255, 255, 255)", "handling of extrema");
+do_test("rgba(100%, 100%, 100%, 0%)", "rgba(255, 255, 255, 0)", "handling of extrema");
+do_test("rgb(255.5, 260, 500, 50)", "rgb(255, 255, 255)", "out of bounds should be handled");
+do_test("rgb(254.5, 254.55, 254.45)", "rgb(255, 255, 254)", "number values should be rounded");
+do_test("rgb(99.8%, 99.9%, 99.7%)", "rgb(254, 255, 254)", "percentage values should be rounded");
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_compute_data_with_start_struct.html b/layout/style/test/test_compute_data_with_start_struct.html
new file mode 100644
index 0000000000..6970270c95
--- /dev/null
+++ b/layout/style/test/test_compute_data_with_start_struct.html
@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for correct handling of aStartStruct parameter to nsRuleNode::Compute*Data</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="property_database.js"></script>
+  <style type="text/css" id="stylesheet"></style>
+  <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=216456">Mozilla Bug 216456</a>
+<p id="display">
+  <span id="base"></span>
+  <span id="test"></span>
+</p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/**
+ * The purpose of this test was to test that in the old style system
+ * the nsRuleNode::Compute*Data functions were written correctly.
+ * In particular, in these functions, when the specified value of a
+ * property had unit eCSSUnit_Null, touching the computed data is
+ * forbidden. This is because we sometimes would stop walking up the
+ * rule tree when we find computed data for an initial subsequence of
+ * our rules (i.e., an ancestor rule node) that we can use as a starting
+ * point (aStartStruct) for the computation for the current rule node.
+ *
+ * However, we don't cache style structs in the rule tree in the current
+ * style system code, and property cascading no longer relies on hand
+ * written functions, so this particular failure mode isn't as likely to
+ * happen.
+ */
+
+var gStyleSheet = document.getElementById("stylesheet").sheet;
+var gRule1 = gStyleSheet.cssRules[gStyleSheet.insertRule("#base, #test {}", gStyleSheet.cssRules.length)];
+var gRule2 = gStyleSheet.cssRules[gStyleSheet.insertRule("#test {}", gStyleSheet.cssRules.length)];
+
+var gBase = getComputedStyle(document.getElementById("base"), "");
+var gTest = getComputedStyle(document.getElementById("test"), "");
+
+function test_property(prop, lower_set, higher_set) {
+  var info = gCSSProperties[prop];
+  if (info.subproperties || info.logical)
+    return;
+
+  gRule1.style.setProperty(prop, info[lower_set][0]);
+  gRule2.style.setProperty(prop, info[higher_set][0]);
+
+  if ("prerequisites" in info) {
+    for (var prereq in info.prerequisites) {
+      gRule2.style.setProperty(prereq, info.prerequisites[prereq], "");
+    }
+  }
+
+  gBase.getPropertyValue(prop);
+  var higher_set_val = gTest.getPropertyValue(prop);
+  gRule2.style.setProperty(prop, info[lower_set][0], "");
+  var lower_set_val = gTest.getPropertyValue(prop);
+  isnot(higher_set_val, lower_set_val, "initial and other values of " + prop + " are different");
+
+  gRule2.style.removeProperty(prop);
+  is(gTest.getPropertyValue(prop), lower_set_val, prop + " is not touched when its value comes from aStartStruct");
+
+  gRule1.style.removeProperty(prop);
+  if ("prerequisites" in info) {
+    for (var prereq in info.prerequisites) {
+      gRule2.style.removeProperty(prereq);
+    }
+  }
+}
+
+function round(lower_set, higher_set) {
+  for (var prop in gCSSProperties)
+    test_property(prop, lower_set, higher_set);
+}
+
+round("other_values", "initial_values");
+round("initial_values", "other_values");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_computed_style.html b/layout/style/test/test_computed_style.html
new file mode 100644
index 0000000000..c2dc667f2f
--- /dev/null
+++ b/layout/style/test/test_computed_style.html
@@ -0,0 +1,664 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for miscellaneous computed style issues</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style id="style"></style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
+<p id="display"></p>
+<div id="content" style="display: none">
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for miscellaneous computed style issues **/
+
+var frame_container = document.getElementById("display");
+var noframe_container = document.getElementById("content");
+
+(function test_bug_595650() {
+  // Test handling of horizontal and vertical percentages for border-radius.
+  var p = document.createElement("p");
+  p.setAttribute("style", "width: 256px; height: 128px");
+  p.style.borderTopLeftRadius = "1.5625%"; /* 1/64 == 4px 2px */
+  p.style.borderTopRightRadius = "5px";
+  p.style.borderBottomRightRadius = "5px 3px";
+  p.style.borderBottomLeftRadius = "1.5625% 3.125%" /* 1/64 1/32 == 4px 4px */
+  var cs = getComputedStyle(p, "");
+
+  frame_container.appendChild(p);
+  is(cs.borderTopLeftRadius, "1.5625%",
+     "computed value of % border-radius, with frame");
+  is(cs.borderTopRightRadius, "5px",
+     "computed value of px border-radius, with frame");
+  is(cs.borderBottomRightRadius, "5px 3px",
+     "computed value of px border-radius, with frame");
+  is(cs.borderBottomLeftRadius, "1.5625% 3.125%",
+     "computed value of % border-radius, with frame");
+
+  noframe_container.appendChild(p);
+  is(cs.borderTopLeftRadius, "1.5625%",
+     "computed value of % border-radius, without frame");
+  is(cs.borderTopRightRadius, "5px",
+     "computed value of px border-radius, without frame");
+  is(cs.borderBottomRightRadius, "5px 3px",
+     "computed value of px border-radius, without frame");
+  is(cs.borderBottomLeftRadius, "1.5625% 3.125%",
+     "computed value of % border-radius, without frame");
+
+  p.remove();
+})();
+
+(function test_bug_1292447() {
+  // Was for bug 595651 which tests that clamping of border-radius
+  // is reflected in computed style.
+  // For compatibility issue, resolved value is computed value now.
+  var p = document.createElement("p");
+  p.setAttribute("style", "width: 190px; height: 90px; border: 5px solid;");
+  p.style.borderRadius = "1000px";
+  var cs = getComputedStyle(p, "");
+
+  frame_container.appendChild(p);
+  is(cs.borderTopLeftRadius, "1000px",
+     "computed value of clamped border radius (top left)");
+  is(cs.borderTopRightRadius, "1000px",
+     "computed value of clamped border radius (top right)");
+  is(cs.borderBottomRightRadius, "1000px",
+     "computed value of clamped border radius (bottom right)");
+  is(cs.borderBottomLeftRadius, "1000px",
+     "computed value of clamped border radius (bottom left)");
+
+  p.style.overflowY = "scroll";
+  is(cs.borderTopLeftRadius, "1000px",
+     "computed value of clamped border radius (top left, overflow-y)");
+  // Fennec doesn't have scrollbars for overflow:scroll content
+  if (p.clientWidth == p.offsetWidth - 10) {
+    is(cs.borderTopRightRadius, "1000px",
+       "computed value of border radius (top right, overflow-y)");
+    is(cs.borderBottomRightRadius, "1000px",
+       "computed value of border radius (bottom right, overflow-y)");
+  } else {
+    is(cs.borderTopRightRadius, "1000px",
+       "computed value of clamped border radius (top right, overflow-y)");
+    is(cs.borderBottomRightRadius, "1000px",
+       "computed value of clamped border radius (bottom right, overflow-y)");
+  }
+  is(cs.borderBottomLeftRadius, "1000px",
+     "computed value of clamped border radius (bottom left, overflow-y)");
+
+  p.style.overflowY = "hidden";
+  p.style.overflowX = "scroll";
+  is(cs.borderTopLeftRadius, "1000px",
+     "computed value of clamped border radius (top left, overflow-x)");
+  is(cs.borderTopRightRadius, "1000px",
+     "computed value of clamped border radius (top right, overflow-x)");
+  // Fennec doesn't have scrollbars for overflow:scroll content
+  if (p.clientHeight == p.offsetHeight - 10) {
+    is(cs.borderBottomRightRadius, "1000px",
+       "computed value of border radius (bottom right, overflow-x)");
+    is(cs.borderBottomLeftRadius, "1000px",
+       "computed value of  border radius (bottom left, overflow-x)");
+  } else {
+    is(cs.borderBottomRightRadius, "1000px",
+       "computed value of clamped border radius (bottom right, overflow-x)");
+    is(cs.borderBottomLeftRadius, "1000px",
+       "computed value of clamped border radius (bottom left, overflow-x)");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_647885_1() {
+  // Test that various background-position styles round-trip correctly
+  var backgroundPositions = [
+    [ "0 0", "0px 0px", "unitless 0" ],
+    [ "0px 0px", "0px 0px", "0 with units" ],
+    [ "0% 0%", "0% 0%", "0%" ],
+    [ "calc(0px) 0", "0px 0px", "0 calc with units x" ],
+    [ "0 calc(0px)", "0px 0px", "0 calc with units y" ],
+    [ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units x" ],
+    [ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units y" ],
+    [ "calc(0%) 0", "0% 0px", "0% calc x"],
+    [ "0 calc(0%)", "0px 0%", "0% calc y"],
+    [ "calc(3px + 2% - 2%) 0", "calc(0% + 3px) 0px",
+      "computed 0% calc x"],
+    [ "0 calc(3px + 2% - 2%)", "0px calc(0% + 3px)",
+      "computed 0% calc y"],
+    [ "calc(3px - 5px) calc(6px - 7px)", "-2px -1px",
+      "negative pixel width"],
+    [ "", "0% 0%", "initial value" ],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundPositions.length; ++i) {
+    var test = backgroundPositions[i];
+    p.style.backgroundPosition = test[0];
+    is(cs.backgroundPosition, test[1], "computed value of " + test[2] + " background-position");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_647885_2() {
+  // Test that various background-size styles round-trip correctly
+  var backgroundSizes = [
+    [ "0 0", "0px 0px", "unitless 0" ],
+    [ "0px 0px", "0px 0px", "0 with units" ],
+    [ "0% 0%", "0% 0%", "0%" ],
+    [ "calc(0px) 0", "0px 0px", "0 calc with units horizontal" ],
+    [ "0 calc(0px)", "0px 0px", "0 calc with units vertical" ],
+    [ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units horizontal" ],
+    [ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units vertical" ],
+    [ "calc(0%) 0", "0% 0px", "0% calc horizontal"],
+    [ "0 calc(0%)", "0px 0%", "0% calc vertical"],
+    [ "calc(3px + 2% - 2%) 0", "calc(0% + 3px) 0px",
+                      "computed 0% calc horizontal"],
+    [ "0 calc(3px + 2% - 2%)", "0px calc(0% + 3px)",
+                      "computed 0% calc vertical"],
+    [ "calc(3px - 5px) calc(6px - 9px)", "0px 0px", "negative pixel width" ],
+    [ "", "auto", "initial value" ],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundSizes.length; ++i) {
+    var test = backgroundSizes[i];
+    p.style.backgroundSize = test[0];
+    is(cs.backgroundSize, test[1], "computed value of " + test[2] + " background-size");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_716628() {
+  // Test that various gradient styles round-trip correctly
+  var backgroundImages = [
+    [ "radial-gradient(at 10% bottom, #ffffff, black)",
+      "radial-gradient(at 10% 100%, rgb(255, 255, 255), rgb(0, 0, 0))",
+      "radial gradient 1" ],
+    [ "radial-gradient(#ffffff, black)",
+      "radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))",
+      "radial gradient 2" ],
+    [ "radial-gradient(farthest-corner, #ffffff, black)",
+      "radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))",
+      "radial gradient 3" ],
+    [ "linear-gradient(red, blue)",
+      "linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
+      "linear gradient 1" ],
+    [ "linear-gradient(to bottom, red, blue)",
+      "linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
+      "linear gradient 2" ],
+    [ "linear-gradient(to right, red, blue)",
+      "linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "linear gradient 3" ],
+    [ "linear-gradient(-45deg, red, blue)",
+      "linear-gradient(-45deg, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "linear gradient with angle in degrees" ],
+    [ "linear-gradient(-0.125turn, red, blue)",
+      "linear-gradient(-45deg, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "linear gradient with angle in turns" ],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundImages.length; ++i) {
+    var test = backgroundImages[i];
+    p.style.backgroundImage = test[0];
+    is(cs.backgroundImage, test[1], "computed value of " + test[2] + " background-image");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1363349_linear() {
+  const specPrefix = "-webkit-gradient(linear, ";
+  const specSuffix = ", from(blue), to(lime))";
+
+  const expPrefix = "linear-gradient(";
+  const expSuffix = "rgb(0, 0, 255) 0%, rgb(0, 255, 0) 100%)";
+
+  let testcases = [
+    [ "calc(5 + 5) top, calc(10 + 10) top",
+      "to right",
+      "calc(num+num) in position"
+    ],
+    [ "left calc(25% - 10%), right calc(75% + 10%)",
+      "to right bottom",
+      "calc(pct+pct) in position "
+    ]
+  ];
+
+  let p = document.createElement("p");
+  let cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (let test of testcases) {
+    let specifiedStyle = specPrefix + test[0] + specSuffix;
+    let expectedStyle = expPrefix;
+    if (test[1] != "") {
+      expectedStyle += test[1] + ", ";
+    }
+    expectedStyle += expSuffix;
+
+    p.style.backgroundImage = specifiedStyle;
+    is(cs.backgroundImage, expectedStyle,
+       "computed value of -webkit-gradient expression (" + test[2] + ")");
+    p.style.backgroundImage = "";
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1363349_radial() {
+  const specPrefix = "-webkit-gradient(radial, ";
+  const specSuffix = ", from(blue), to(lime))";
+
+  const expPrefix = "radial-gradient(";
+  const expSuffix = "rgb(0, 0, 255) 0%, rgb(0, 255, 0) 100%)";
+
+  let testcases = [
+    [ "1 2, 0, 3 4, calc(1 + 5)",
+      "6px at 3px 4px",
+      "calc(num+num) in radius"
+    ],
+    [ "1 2, calc(1 + 2), 3 4, calc(1 + 5)",
+      "6px at 3px 4px",
+      "calc(num+num) in radius"
+    ],
+    [ "calc(0 + 1) calc(1 + 1), calc(1 + 2), calc(1 + 2) 4, calc(1 + 5)",
+      "6px at 3px 4px",
+      "calc(num+num) in position and radius"
+    ]
+  ];
+
+  let p = document.createElement("p");
+  let cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (let test of testcases) {
+    let specifiedStyle = specPrefix + test[0] + specSuffix;
+    let expectedStyle = expPrefix;
+    if (test[1] != "") {
+      expectedStyle += test[1] + ", ";
+    }
+    expectedStyle += expSuffix;
+
+    p.style.backgroundImage = specifiedStyle;
+    is(cs.backgroundImage, expectedStyle,
+       "computed value of -webkit-gradient expression (" + test[2] + ")");
+    p.style.backgroundImage = "";
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1241623() {
+  // Test that -webkit-gradient() styles are approximated the way we expect:
+
+  // For compactness, we'll pull out the common prefix & suffix from all of the
+  // specified & expected styles, and construct the full expression on the fly:
+  const specPrefix = "-webkit-gradient(linear, ";
+  const specSuffix = ", from(blue), to(lime))";
+
+  const expPrefix = "linear-gradient(";
+  const expSuffix = "rgb(0, 0, 255) 0%, rgb(0, 255, 0) 100%)";
+
+  let testcases = [
+    //
+    // [ legacyDirection,
+    //   modernDirection, // (empty string means use default direction)
+    //   descriptionOfTestcase ],
+
+    // If start & end are at same point, we just produce a gradient with
+    // the default direction.
+    [ "left top, left top",
+      "",
+      "start & end point are the same" ],
+    [ "40 40, 40 40",
+      "",
+      "start & end point are the same" ],
+    [ "center center, center center",
+      "",
+      "start & end point are the same" ],
+
+    // If start & end use different units in the same coordinate, we generally
+    // can't extract a direction (because we can't know whether arbitrary
+    // percent values are larger or smaller than arbitrary pixel values). So
+    // we produce a gradient in the default direction.
+    [ "left top, 30 100%",  // (Note: keywords like "left" are really % vals.)
+      "",
+      "start & end point have different units" ],
+    [ "100% 15, right bottom",
+      "",
+      "start & end point have different units" ],
+    [ "0 0%, 20 20",
+      "",
+      "start & end point have different units" ],
+    [ "0 0, 100% 20",
+      "",
+      "start & end point have different units" ],
+    [ "5% 30, 20 50%",
+      "",
+      "start & end point have different units" ],
+    [ "5% 6%, 20 30",
+      "",
+      "start & end point have different units" ],
+
+    // Gradient starting/ending somewhere arbitrary in middle:
+    [ "center center, right top",
+      "to right top",
+      "from center to right top" ],
+    [ "left top, center center",
+      "to right bottom",
+      "from left top to center" ],
+    [ "10 15, 5 20",
+      "to left bottom",
+      "from arbitrary point to another point in lower-left direction" ],
+
+    // Gradient using negative coordinates:
+    [ "-10 -15, 0 0",
+      "to right bottom",
+      "from negative point to origin" ],
+    [ "-100 10, 20 30",
+      "to right bottom",
+      "from negative-x point to another point in lower-right direction" ],
+    [ "10 -100, 5 10",
+      "to left bottom",
+      "from negative-y point to another point in lower-left direction" ],
+
+    // Diagonal gradient between sides/corners:
+    [ "center top, left center",
+      "to left bottom",
+      "left/bottom-wards, using edge keywords" ],
+    [ "left center, center top",
+      "to right top",
+      "top/right-wards, using edge keywords" ],
+    [ "right center, center top",
+      "to left top",
+      "top/left-wards, using edge keywords" ],
+    [ "right top, center bottom",
+      "to left bottom",
+      "bottom/left-wards, using edge keywords" ],
+    [ "left top, right bottom",
+      "to right bottom",
+      "bottom/right-wards, using edge keywords" ],
+    [ "left bottom, right top",
+      "to right top",
+      "top/right-wards, using edge keywords" ],
+  ];
+
+  let p = document.createElement("p");
+  let cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (let test of testcases) {
+    let specifiedStyle = specPrefix + test[0] + specSuffix;
+    let expectedStyle = expPrefix;
+    if (test[1] != "") {
+      expectedStyle += test[1] + ", ";
+    }
+    expectedStyle += expSuffix;
+
+    p.style.backgroundImage = specifiedStyle;
+    is(cs.backgroundImage, expectedStyle,
+       "computed value of -webkit-gradient expression (" + test[2] + ")");
+    p.style.backgroundImage = "";
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1293164() {
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  var docPath = document.URL.substring(0, document.URL.lastIndexOf("/") + 1);
+
+  var localURL = "url(\"#foo\")";
+  var nonLocalURL = "url(\"foo.svg#foo\")";
+  var resolvedNonLocalURL = "url(\"" + docPath + "foo.svg#foo\")";
+
+  var testStyles = [
+    "maskImage",
+    "backgroundImage",
+    "markerStart",
+    "markerMid",
+    "markerEnd",
+    "clipPath",
+    "filter",
+    "fill",
+    "stroke",
+  ];
+
+  for (var prop of testStyles) {
+    p.style[prop] = localURL;
+    is(cs[prop], localURL, "computed value of " + prop);
+    p.style[prop] = nonLocalURL;
+    is(cs[prop], resolvedNonLocalURL, "computed value of " + prop);
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1347164() {
+  // Test that computed color values are serialized as "rgb()"
+  // IFF they're fully-opaque (and otherwise as "rgba()").
+  var color = [
+    ["rgba(0, 0, 0, 1)", "rgb(0, 0, 0)"],
+    ["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0.5)"],
+    ["hsla(0, 0%, 0%, 1)", "rgb(0, 0, 0)"],
+    ["hsla(0, 0%, 0%, 0.5)", "rgba(0, 0, 0, 0.5)"],
+  ];
+
+  var css_color_4 = [
+    ["rgba(0 0 0 / 1)", "rgb(0, 0, 0)"],
+    ["rgba(0 0 0 / 0.1)", "rgba(0, 0, 0, 0.1)"],
+    ["rgb(0 0 0 / 1)", "rgb(0, 0, 0)"],
+    ["rgb(0 0 0 / 0.2)", "rgba(0, 0, 0, 0.2)"],
+    ["hsla(0 0% 0% / 1)", "rgb(0, 0, 0)"],
+    ["hsla(0deg 0% 0% / 0.3)", "rgba(0, 0, 0, 0.3)"],
+    ["hsl(0 0% 0% / 1)", "rgb(0, 0, 0)"],
+    ["hsl(0 0% 0% / 0.4)", "rgba(0, 0, 0, 0.4)"],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < color.length; ++i) {
+    var test = color[i];
+    p.style.color = test[0];
+    is(cs.color, test[1], "computed value of " + test[0]);
+  }
+  for (var i = 0; i < css_color_4.length; ++i) {
+    var test = css_color_4[i];
+    p.style.color = test[0];
+    is(cs.color, test[1], "css-color-4 computed value of " + test[0]);
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1357117() {
+  // Test that vendor-prefixed gradient styles round-trip with the same prefix,
+  // or with no prefix.
+  var backgroundImages = [
+    // [ specified style,
+    //   expected computed style,
+    //   descriptionOfTestcase ],
+    // Linear gradient with legacy-gradient-line (needs prefixed syntax):
+    [ "-webkit-linear-gradient(10deg, red, blue)",
+      "-webkit-linear-gradient(10deg, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-webkit-linear-gradient with angled legacy-gradient-line" ],
+
+    // Linear gradient with box corner (needs prefixed syntax):
+    [ "-webkit-linear-gradient(top left, red, blue)",
+      "-webkit-linear-gradient(left top, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-webkit-linear-gradient with box corner" ],
+
+    // Linear gradient with default keyword (should be serialized without keyword):
+    [ "-webkit-linear-gradient(top, red, blue)",
+      "-webkit-linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-webkit-linear-gradient with legacy default direction keyword" ],
+
+    // Radial gradients (should be serialized using modern unprefixed style):
+    [ "-webkit-radial-gradient(contain, red, blue)",
+      "-webkit-radial-gradient(closest-side, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-webkit-radial-gradient with legacy 'contain' keyword" ],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundImages.length; ++i) {
+    var test = backgroundImages[i];
+    p.style.backgroundImage = test[0];
+    is(cs.backgroundImage, test[1],
+       "computed value of prefixed gradient expression (" + test[2] + ")");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1367028() {
+  const borderImageSubprops = [
+    "border-image-slice",
+    "border-image-outset",
+    "border-image-width"
+  ];
+  const rectValues = [
+    {
+      values: ["5 5 5 5", "5 5 5", "5 5", "5"],
+      expected: "5",
+      desc: "identical four sides",
+    },
+    {
+      values: ["5 6 5 6", "5 6 5", "5 6"],
+      expected: "5 6",
+      desc: "identical values on each axis",
+    },
+    {
+      values: ["5 6 7 6", "5 6 7"],
+      expected: "5 6 7",
+      desc: "identical values on left and right",
+    },
+    {
+      values: ["5 6 5 7"],
+      desc: "identical values on top and bottom",
+    },
+    {
+      values: ["5 5 6 6", "5 6 6 5"],
+      desc: "identical values on unrelated sides",
+    },
+    {
+      values: ["5 6 7 8"],
+      desc: "different values on all sides",
+    },
+  ];
+
+  let frameContainer = document.getElementById("display");
+  let p = document.createElement("p");
+  frameContainer.appendChild(p);
+  let cs = getComputedStyle(p);
+
+  for (let prop of borderImageSubprops) {
+    for (let {values, expected, desc} of rectValues) {
+      for (let value of values) {
+        p.style.setProperty(prop, value);
+        is(cs.getPropertyValue(prop),
+           expected ? expected : value, `${desc} for ${prop}`);
+        p.style.removeProperty(prop);
+      }
+    }
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1378368() {
+  // Test that negative results of calc()s in basic-shapes (e.g. polygon()) should
+  // not be clamped to 0px.
+  var clipPaths = [
+    // [ specified style,
+    //   expected computed style,
+    //   descriptionOfTestcase ],
+    // polygon:
+    [ "polygon(calc(10px - 20px) 0px, 100px 100px, 0px 100px)",
+      "polygon(-10px 0px, 100px 100px, 0px 100px)",
+      "polygon with negative calc() coordinates" ],
+    // inset:
+    [ "inset(calc(10px - 20px))",
+      "inset(-10px)",
+      "inset with negative calc() coordinates" ],
+  ];
+
+  var p = document.createElement("p");
+  var cs = getComputedStyle(p, "");
+  frame_container.appendChild(p);
+
+  for (let test of clipPaths) {
+    p.style.clipPath = test[0];
+    is(cs.clipPath, test[1],
+       "computed value of clip-path for basic-shapes (" + test[2] + ")");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1418433() {
+  // Test that the style data read through getComputedStyle is always up-to-date,
+  // even for non-displayed elements.
+
+  var d = document.createElement("div");
+  d.setAttribute("id", "nonDisplayedDiv");
+  var cs = getComputedStyle(d, null);
+  noframe_container.appendChild(d);
+
+  // Test for stylesheet change, i.e., added/changed/removed
+  var style = document.getElementById("style");
+  is(cs.height, "auto",
+     "computed value of display none element (before testing)");
+  style.textContent = "#nonDisplayedDiv { height: 100px; }";
+  is(cs.height, "100px",
+     "computed value of display none element (sheet added)");
+  style.textContent = "#nonDisplayedDiv { height: 10px; }";
+  is(cs.height, "10px",
+     "computed value of display none element (sheet changed)");
+  style.textContent = "";
+  is(cs.height, "auto",
+     "computed value of display none element (sheet removed)");
+
+  // Test for rule change, i.e., added/changed/removed
+  var styleSheet = style.sheet;
+  is(cs.width, "auto",
+     "computed value of display none element (before testing)");
+  styleSheet.insertRule("#nonDisplayedDiv { width: 100px; }", 0);
+  is(cs.width, "100px",
+     "computed value of display none element (rule added)");
+  styleSheet.deleteRule(0);
+  styleSheet.insertRule("#nonDisplayedDiv { width: 10px; }", 0);
+  is(cs.width, "10px",
+     "computed value of display none element (rule changed)");
+  styleSheet.deleteRule(0);
+  is(cs.width, "auto",
+     "computed value of display none element (rule removed)");
+
+  d.remove();
+})();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_computed_style_bfcache_display_none.html b/layout/style/test/test_computed_style_bfcache_display_none.html
new file mode 100644
index 0000000000..8322e4977a
--- /dev/null
+++ b/layout/style/test/test_computed_style_bfcache_display_none.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<title>Test for getting the computed style on the root node of a display:none subtree in a document in the bfcache</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377010">Mozilla Bug 1377010</a>
+<p id="display"></p>
+<script>
+SimpleTest.waitForExplicitFinish();
+
+let testDiv;
+let loadedPromiseResolve;
+
+const TEST_PATH = "http://mochi.test:8888/tests/layout/style/test/";
+const TEST_FILE1 = TEST_PATH + "file_computed_style_bfcache_display_none.html";
+const TEST_FILE2 = TEST_PATH + "file_computed_style_bfcache_display_none2.html";
+
+// Open a new window.
+const w = window.open(TEST_FILE1);
+waitForLoadMessage().then(() => {
+  // Take a reference to a node in the new window.
+  testDiv = w.document.getElementById('div');
+
+  // Open a new document so that the test div now refers to a node in a
+  // document in the bfcache.
+  w.location = TEST_FILE2;
+  return waitForLoadMessage();
+}).then(() => {
+  // Compute styles for the node in the bfcache document.
+  is(w.getComputedStyle(testDiv).opacity, '1');
+
+  // Restore the bfcache document.
+  return goBack(w);
+}).then(() => {
+  // Fetch the style once again.
+  is(w.getComputedStyle(testDiv).opacity, '1');
+
+  w.close();
+  SimpleTest.finish();
+});
+
+window.addEventListener('message', e => {
+  if (e.data === 'loaded' && loadedPromiseResolve) {
+    loadedPromiseResolve();
+    loadedPromiseResolve = undefined;
+  }
+});
+
+function waitForLoadMessage() {
+  return new Promise(resolve => {
+    loadedPromiseResolve = resolve;
+  });
+}
+
+function goBack(win) {
+  return new Promise(resolve => {
+    win.onpagehide = e => resolve(win);
+    win.history.back();
+  });
+}
+</script>
diff --git a/layout/style/test/test_computed_style_difference.html b/layout/style/test/test_computed_style_difference.html
new file mode 100644
index 0000000000..f4008ff476
--- /dev/null
+++ b/layout/style/test/test_computed_style_difference.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<title>Test that the difference of the computed style of an element is always correctly propagated</title>
+<!--
+  There are CSS property changes that don't have an effect in computed style.
+
+  It's relatively easy to return `nsChangeHint(0)` for the case where the
+  property changes but it should have no rendering difference.
+
+  That's however incorrect, since if it's an inherited property, or a
+  descendant explicitly inherits it, we should still propagate the change
+  downwards.
+
+  This test tests that computed style diffing is correct.
+-->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="property_database.js"></script>
+<div id="outer">
+  <div id="inner"></div>
+</div>
+<script>
+// We need to skip checking for properties for which the value returned by
+// getComputedStyle depends on the parent.
+//
+// TODO(emilio): We could test a subset of these, see below.
+const kWhitelist = [
+  // Could test display values that don't force blockification of children.
+  "display",
+
+  // Could avoid testing only the ones that have percentages.
+  "transform",
+  "transform-origin",
+  "perspective-origin",
+
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "padding-inline-end",
+  "padding-inline-start",
+  "padding-block-end",
+  "padding-block-start",
+
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "margin-inline-end",
+  "margin-inline-start",
+  "margin-block-end",
+  "margin-block-start",
+
+  "width",
+  "height",
+  "block-size",
+  "inline-size",
+
+  "min-height",
+  "min-width",
+  "min-block-size",
+  "min-inline-size",
+];
+
+const outer = document.getElementById("outer");
+const inner = document.getElementById("inner");
+
+function testValue(prop, value) {
+  outer.style.setProperty(prop, value);
+  const computed = getComputedStyle(outer).getPropertyValue(prop);
+  assert_equals(
+    getComputedStyle(inner).getPropertyValue(prop), computed,
+    "Didn't handle the inherited change correctly?"
+  )
+}
+
+// Note that we intentionally ignore the "prerequisites" here, since that's
+// the most likely place where the diffing could potentially go wrong.
+function testProperty(prop, info) {
+  // We only care about longhands, changing shorthands is not that interesting,
+  // since we're interested of changing as little as possible, and changing
+  // them would be equivalent to changing all the longhands at the same time.
+  if (info.type !== CSS_TYPE_LONGHAND)
+    return;
+  if (kWhitelist.includes(prop))
+    return;
+
+  inner.style.setProperty(prop, "inherit");
+  for (const v of info.initial_values)
+    testValue(prop, v);
+  for (const v of info.other_values)
+    testValue(prop, v);
+  // Test again the first value so that we test changing to it, not just from
+  // it.
+  //
+  // TODO(emilio): We could test every value against every-value if we wanted,
+  // might be worth it.
+  testValue(prop, info.initial_values[0]);
+
+  inner.style.removeProperty(prop);
+}
+
+for (let prop in gCSSProperties)
+  test(() => testProperty(prop, gCSSProperties[prop]), "Diffing for " + prop);
+</script>
diff --git a/layout/style/test/test_computed_style_grid_with_pseudo.html b/layout/style/test/test_computed_style_grid_with_pseudo.html
new file mode 100644
index 0000000000..24eb520776
--- /dev/null
+++ b/layout/style/test/test_computed_style_grid_with_pseudo.html
@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1350780
+-->
+<head>
+<title>Test for Bug 1350780</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+
+<style>
+#container {
+  width: 100px;
+}
+
+.gridBefore::before {
+  content: "";
+  display: grid;
+  grid-template-columns: auto;
+}
+
+.gridBeforeNoContent::before {
+  display: grid;
+  grid-template-columns: 40px;
+}
+</style>
+
+<script type="application/javascript">
+
+SimpleTest.waitForExplicitFinish();
+
+function checkTemplateWithData(data) {
+  let obj = document.createElement("div");
+
+  // We need either a template or an additionalClass.
+  if (typeof(data.template != "undefined")) {
+    obj.style.display = "grid";
+    obj.style.gridTemplateColumns = data.template;
+  }
+
+  if (typeof(data.additionalClass != "undefined")) {
+    obj.className = data.additionalClass;
+  }
+
+  let container = document.getElementById("container");
+  container.appendChild(obj);
+
+  let computedStyle = getComputedStyle(obj, data.pseudo);
+  let computedTemplate = computedStyle.getPropertyValue("grid-template-columns");
+
+  let message = "Got expected template with pseudo " + data.pseudo;
+  if (typeof(data.additionalClass != "undefined")) {
+    message += " with class " + data.additionalClass;
+  }
+  message += ".";
+
+  is(computedTemplate, data.expected, message);
+
+  container.removeChild(obj);
+}
+
+function runTest() {
+  let dataToTest = [
+    { template: "40px",
+      pseudo: "::selection",
+      expected: "none"},
+    { template: "40px",
+      pseudo: "::before",
+      expected: "none" },
+    { additionalClass: "gridBefore",
+      pseudo: "::before",
+      expected: "100px" },
+    { additionalClass: "gridBeforeNoContent",
+      pseudo: "::before",
+      expected: "40px" },
+  ];
+
+  for (let i = 0; i < dataToTest.length; ++i) {
+    checkTemplateWithData(dataToTest[i]);
+  }
+
+  SimpleTest.finish();
+}
+
+</script>
+</head>
+<body onload="runTest()">
+<div id="container"></div>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1350780">Mozilla Bug 1350780</a>
+</body>
+</html>
diff --git a/layout/style/test/test_computed_style_in_created_document.html b/layout/style/test/test_computed_style_in_created_document.html
new file mode 100644
index 0000000000..72ff0f5921
--- /dev/null
+++ b/layout/style/test/test_computed_style_in_created_document.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test for bug 1398619</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<script>
+SimpleTest.waitForExplicitFinish();
+let referenceFontSize = getComputedStyle(document.body).fontSize;
+
+function checkComputedStyle(desc, doc) {
+  try {
+    let fontSize = getComputedStyle(doc.body).fontSize;
+    is(fontSize, referenceFontSize, `${desc}: get computed font-size`);
+  } catch (e) {
+    ok(false, `${desc}: fail to get computed font-size, ${e}`);
+  }
+}
+
+async function runTest() {
+  // DOMParser
+  {
+    let parser = new DOMParser();
+    let doc = parser.parseFromString("<body>", "text/html");
+    checkComputedStyle("DOMParser", doc);
+  }
+  // DOMImplementation
+  {
+    let doc = document.implementation.createHTMLDocument("");
+    checkComputedStyle("DOMImplementation", doc);
+  }
+  // XMLHttpRequest
+  {
+    let xhr = new XMLHttpRequest();
+    xhr.open("GET", "empty.html");
+    xhr.responseType = "document";
+    let promise = new Promise(resolve => {
+      xhr.onload = resolve;
+    });
+    xhr.send();
+    await promise;
+    checkComputedStyle("XMLHttpRequest", xhr.responseXML);
+  }
+}
+runTest()
+  .catch(e => ok(false, `Exception: ${e}`))
+  .then(() => SimpleTest.finish());
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_computed_style_min_size_auto.html b/layout/style/test/test_computed_style_min_size_auto.html
new file mode 100644
index 0000000000..12b4e48b46
--- /dev/null
+++ b/layout/style/test/test_computed_style_min_size_auto.html
@@ -0,0 +1,129 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=763689
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test behavior of 'min-height:auto' and 'min-width:auto' (Bug 763689 and Bug 1304636)</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=763689">Mozilla Bug 763689</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1304636">Mozilla Bug 1304636</a>
+<body>
+<div id="display">
+  <div id="block-item">abc</div>
+
+  <div style="display: flex">
+    <div id="horizontal-flex-item">abc</div>
+    <div id="horizontal-flex-item-OH" style="overflow: hidden">def</div>
+  </div>
+
+  <div style="display: flex; flex-direction: column">
+    <div id="vertical-flex-item">abc</div>
+    <div id="vertical-flex-item-OH" style="overflow: hidden">def</div>
+  </div>
+
+  <div style="display: grid">
+    <div id="grid-item"></div>
+    <div id="grid-item-OH" style="overflow: hidden"></div>
+  </div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/**
+ * Test 'min-height:auto' and 'min-width:auto' (Bug 763689 and Bug 1304636)
+ * ========================================================
+ * This test checks the computed-style value of the "auto" keyword introduced
+ * for the "min-height" and "min-width" properties in CSS3 Flexbox Section 4.5
+ * and CSS3 Grid Section 6.2.
+ *   https://www.w3.org/TR/css-flexbox-1/#min-size-auto
+ *   https://www.w3.org/TR/css-grid-1/#grid-item-sizing
+ *
+ * Quoting that chunk of spec:
+ *     # auto
+ *     #   On a flex item whose overflow is visible in the main axis,
+ *     #   when specified on the flex item’s main-axis min-size property,
+ *     #   specifies an automatic minimum size. It otherwise computes to 0
+ *     #   (unless otherwise defined by a future specification).
+ *
+ */
+
+// Given an element ID, this function sets the corresponding
+// element's inline-style min-width and min-height explicitly to "auto".
+function setElemMinSizesToAuto(aElemId) {
+  var elem = document.getElementById(aElemId);
+
+  is(elem.style.minWidth, "", "min-width should be initially unset");
+  elem.style.minWidth = "auto";
+  is(elem.style.minWidth, "auto", "min-width should accept 'auto' value");
+
+  is(elem.style.minHeight, "", "min-height should be initially unset");
+  elem.style.minHeight = "auto";
+  is(elem.style.minHeight, "auto", "min-height should accept 'auto' value");
+}
+
+// Given an element ID, this function compares the corresponding element's
+// computed min-width and min-height against expected values.
+function checkElemMinSizes(aElemId,
+                           aExpectedMinWidth,
+                           aExpectedMinHeight)
+{
+  var elem = document.getElementById(aElemId);
+  is(window.getComputedStyle(elem).minWidth,  aExpectedMinWidth,
+     "checking min-width of " + aElemId);
+
+  is(window.getComputedStyle(elem).minHeight, aExpectedMinHeight,
+     "checking min-height of " + aElemId);
+}
+
+// This function goes through all the elements we're interested in
+// and checks their computed min-sizes against expected values,
+// farming out each per-element job to checkElemMinSizes.
+function checkAllTheMinSizes() {
+  // This is the normal part -- generally, the default value of "min-width"
+  // and "min-height" (auto) computes to "0px".
+  checkElemMinSizes("block-item", "0px", "0px");
+
+  // ...but for a flex item or grid item, "min-width: auto" and
+  // "min-height: auto" both compute to "auto" (even in cases where
+  // we know it'll actually resolve to 0 in layout, like for example
+  // when the item has "overflow:hidden").
+  checkElemMinSizes("horizontal-flex-item",    "auto", "auto");
+  checkElemMinSizes("horizontal-flex-item-OH", "auto", "auto");
+  checkElemMinSizes("vertical-flex-item",      "auto", "auto");
+  checkElemMinSizes("vertical-flex-item-OH",   "auto", "auto");
+  checkElemMinSizes("grid-item",               "auto", "auto");
+  checkElemMinSizes("grid-item-OH",            "auto", "auto");
+}
+
+// Main test function
+function main() {
+  // First: check that min-sizes are what we expect, with min-size properties
+  // at their initial value.
+  checkAllTheMinSizes();
+
+  // Now, we *explicitly* set min-size properties to "auto"...
+  var elemIds = [ "block-item",
+                  "horizontal-flex-item",
+                  "horizontal-flex-item-OH",
+                  "vertical-flex-item",
+                  "vertical-flex-item-OH",
+                  "grid-item",
+                  "grid-item-OH"];
+  elemIds.forEach(setElemMinSizesToAuto);
+
+  // ...and try again (should have the same result):
+  checkAllTheMinSizes();
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_computed_style_no_flush.html b/layout/style/test/test_computed_style_no_flush.html
new file mode 100644
index 0000000000..2caea9d294
--- /dev/null
+++ b/layout/style/test/test_computed_style_no_flush.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>
+  Test for bug 1363805: We only restyle as little as needed
+</title>
+<link rel="author" href="mailto:wpan@mozilla.com" title="Wei-Cheng Pan">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<style>
+.black {
+  background-color: black;
+}
+.black + div {
+  background-color: gray;
+}
+</style>
+<div id="container">
+  <div>
+    <div id="foo">
+    </div>
+    <div id="bar">
+    </div>
+  </div>
+</div>
+<script>
+function flushStyle () {
+  getComputedStyle(document.body).width;
+}
+
+SimpleTest.waitForExplicitFinish();
+const utils = SpecialPowers.getDOMWindowUtils(window);
+const container = document.querySelector('#container');
+const foo = document.querySelector('#foo');
+const bar = document.querySelector('#bar');
+
+flushStyle();
+let currentRestyleGeneration = utils.restyleGeneration;
+
+// No style changed, so we should not restyle.
+getComputedStyle(foo).backgroundColor;
+is(utils.restyleGeneration, currentRestyleGeneration,
+   "Shouldn't restyle anything if no style changed");
+
+// foo's parent has changed, must restyle.
+container.classList.toggle('black');
+getComputedStyle(foo).backgroundColor;
+isnot(utils.restyleGeneration, currentRestyleGeneration,
+      "Should have restyled something");
+
+currentRestyleGeneration = utils.restyleGeneration;
+
+// The change of foo should not affect its parent.
+foo.classList.toggle('black');
+getComputedStyle(container).backgroundColor;
+is(utils.restyleGeneration, currentRestyleGeneration,
+   "Shouldn't restyle anything if no style changed");
+
+// It should restyle for foo's later sibling.
+getComputedStyle(bar).backgroundColor;
+isnot(utils.restyleGeneration, currentRestyleGeneration,
+      "Should have restyled something");
+
+SimpleTest.finish();
+</script>
diff --git a/layout/style/test/test_computed_style_no_pseudo.html b/layout/style/test/test_computed_style_no_pseudo.html
new file mode 100644
index 0000000000..efb0dda7b4
--- /dev/null
+++ b/layout/style/test/test_computed_style_no_pseudo.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=505515
+-->
+<head>
+  <title>Test for Bug 505515</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+  #display { color: black; background: white; }
+  #display span { position: relative; display: inline-block; }
+  #display:first-line { color: blue; }
+
+  </style>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=505515">Mozilla Bug 505515</a>
+<p id="display" style="width: 30em">This <span id="sp">is</span> some text in which the first line is in a different color.</p>
+<pre id="test">
+<script type="application/javascript">
+
+SimpleTest.waitForExplicitFinish();
+
+/** Test for Bug 505515 **/
+
+function run() {
+  var p = document.getElementById("display");
+  var span = document.getElementById("sp");
+
+  isnot(span.offsetWidth, 0,
+        "span should have width (and we flushed layout)");
+  is(getComputedStyle(p, "").color, "rgb(0, 0, 0)",
+     "p should be black too");
+
+  let spanStyle = getComputedStyle(span, "");
+  let width = spanStyle.width;
+
+  isnot(width.indexOf("px"), -1,
+        "should be able to get the used value")
+  is(width, spanStyle.width,
+     "shouldn't lose track of the frame");
+  is(spanStyle.color, "rgb(0, 0, 0)",
+     "span should be black");
+
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_computed_style_prefs.html b/layout/style/test/test_computed_style_prefs.html
new file mode 100644
index 0000000000..0f297477d6
--- /dev/null
+++ b/layout/style/test/test_computed_style_prefs.html
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test that preffed off properties do not appear in computed style</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=919594">Mozilla Bug 919594</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test that preffed off properties do not appear in computed style **/
+
+function testWithAllPrefsDisabled() {
+  let exposedProperties = Object.keys(gCS).map(i => gCS[i]);
+
+  // Store the number of properties for later tests to use.
+  gLengthWithAllPrefsDisabled = gCS.length;
+
+  // Check that all of the properties behind the prefs are not exposed.
+  for (let pref in gProps) {
+    for (let prop of gProps[pref]) {
+      ok(!exposedProperties.includes(prop), prop + " not exposed when prefs are false");
+    }
+  }
+}
+
+function testWithOnePrefEnabled(aPref) {
+  let exposedProperties = Object.keys(gCS).map(i => gCS[i]);
+
+  // Check that the number of properties on the object is as expected.
+  is(gCS.length, gLengthWithAllPrefsDisabled + gProps[aPref].length, "length when " + aPref + " is true");
+
+  // Check that the properties corresponding to aPref are exposed.
+  for (let prop of gProps[aPref]) {
+    ok(exposedProperties.includes(prop), prop + " exposed when " + aPref + " is true");
+  }
+}
+
+function step() {
+  if (gTestIndex == gTests.length) {
+    // Reached the end of the tests.
+    SimpleTest.finish();
+    return;
+  }
+
+  if (gPrefsPushed) {
+    // We've just finished running one tests.  Pop the prefs and go on to
+    // the next test.
+    gTestIndex++;
+    gPrefsPushed = false;
+    SpecialPowers.popPrefEnv(step);
+    return;
+  }
+
+  // About to run one test.  Push the prefs and run it.
+  let fn = gTests[gTestIndex].fn;
+  gPrefsPushed = true;
+  SpecialPowers.pushPrefEnv(gTests[gTestIndex].settings,
+                            function() { fn(); SimpleTest.executeSoon(step); });
+}
+
+// ----
+
+var gProps = {
+  "layout.css.backdrop-filter.enabled": ["backdrop-filter"],
+};
+
+var gCS = getComputedStyle(document.body, "");
+var gLengthWithAllPrefsDisabled;
+
+var gTestIndex = 0;
+var gPrefsPushed = false;
+var gTests = [
+  // First, test when all of the prefs are disabled.
+  { settings: { set: Object.keys(gProps).map(x => [x, false]) },
+    fn:       testWithAllPrefsDisabled },
+  // Then, test each pref enabled individually.
+  ...Object.keys(gProps).map(p =>
+    ({ settings: { set: Object.keys(gProps).map(x => [x, x == p]) },
+       fn:       testWithOnePrefEnabled.bind(null, p) }))
+];
+
+SimpleTest.waitForExplicitFinish();
+step();
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_condition_text.html b/layout/style/test/test_condition_text.html
new file mode 100644
index 0000000000..93b277f325
--- /dev/null
+++ b/layout/style/test/test_condition_text.html
@@ -0,0 +1,108 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=814907
+-->
+<head>
+  <title>Test for Bug 814907</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style id="style">
+    @-moz-document media-document(video) {}
+    @-moz-document media-document(image) {}
+    @-moz-document media-document(plugin) {}
+    @-moz-document media-document(all) {}
+    @-moz-document plain-text-document() {}
+    @-moz-document unobservable-document() {}
+
+    @-moz-document url(http://www.example.com/) {}
+    @-moz-document url('http://www.example.com/') {}
+    @-moz-document url("http://www.example.com/") {}
+    @-moz-document url-prefix('http://www.example.com/') {}
+    @-moz-document url-prefix("http://www.example.com/") {}
+    @-moz-document domain('example.com') {}
+    @-moz-document domain("example.com") {}
+    @-moz-document regexp('http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/') {}
+    @-moz-document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {}
+
+    @media all {}
+    @media only color {}
+    @media (color ) {}
+    @media color \0061ND ( monochrome ) {}
+    @media (max-width: 200px), (color) {}
+
+    @supports(color: green){}
+    @supports (color: green) {}
+    @supports ((color: green)) {}
+    @supports (color: green) and (color: blue) {}
+    @supports ( Font:  20px serif ! Important)  {}
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=814907">Mozilla Bug 814907</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 814907 **/
+
+function runTest()
+{
+  // re-parse the style sheet with the pref turned on
+  var style = document.getElementById("style");
+  style.textContent += " ";
+
+  var sheet = style.sheet;
+
+  var conditions = [
+    "media-document(video)",
+    "media-document(image)",
+    "media-document(plugin)",
+    "media-document(all)",
+    "plain-text-document()",
+    "unobservable-document()",
+    "url(\"http://www.example.com/\")",
+    "url(\"http://www.example.com/\")",
+    "url(\"http://www.example.com/\")",
+    "url-prefix(\"http://www.example.com/\")",
+    "url-prefix(\"http://www.example.com/\")",
+    "domain(\"example.com\")",
+    "domain(\"example.com\")",
+    "regexp(\"http://www.w3.org/TR/\\\\d{4}/[^/]*-CSS2-\\\\d{8}/\")",
+    "regexp(\"http://www.w3.org/TR/\\\\d{4}/[^/]*-CSS2-\\\\d{8}/\")",
+    "all",
+    "only color",
+    "(color)",
+    "color and (monochrome)",
+    "(max-width: 200px), (color)",
+    "(color: green)",
+    "(color: green)",
+    "((color: green))",
+    "(color: green) and (color: blue)",
+    "( Font:  20px serif ! Important)"
+  ];
+
+  is(sheet.cssRules.length, conditions.length);
+
+  for (var i = 0; i < sheet.cssRules.length; i++) {
+    var rule = sheet.cssRules[i];
+    is(rule.conditionText, conditions[i], "rule " + i + " has expected conditionText");
+    if (rule.type == CSSRule.MEDIA_RULE) {
+      is(rule.conditionText, rule.media.mediaText, "rule " + i + " conditionText matches media.mediaText");
+    }
+  }
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+SpecialPowers.pushPrefEnv(
+  { "set": [["layout.css.moz-document.content.enabled", true]]},
+  runTest);
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_constructable_stylesheets_chrome_only_rules_in_content.html b/layout/style/test/test_constructable_stylesheets_chrome_only_rules_in_content.html
new file mode 100644
index 0000000000..6d80b2bb7b
--- /dev/null
+++ b/layout/style/test/test_constructable_stylesheets_chrome_only_rules_in_content.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Test for chrome-only rules in constructable stylesheets (in content)</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script>
+  add_task(async function chrome_rules_constructable_stylesheets_in_content() {
+    let sheet = new CSSStyleSheet();
+    sheet.replaceSync(".foo { -moz-default-appearance: none }");
+    is(sheet.cssRules[0].style.length, 0, "Should not parse chrome-only property in content  document");
+  });
+
+  add_task(async function chrome_rules_constructable_stylesheets_in_content() {
+    let sheet = new CSSStyleSheet({ baseURL: "chrome://browser/content/browser.xhtml" })
+    sheet.replaceSync(".foo { -moz-default-appearance: none }");
+    is(sheet.cssRules[0].style.length, 0, "Should not parse chrome-only property in content  document, even with chrome baseURL");
+  });
+</script>
diff --git a/layout/style/test/test_counter_descriptor_storage.html b/layout/style/test/test_counter_descriptor_storage.html
new file mode 100644
index 0000000000..bb91b6d12c
--- /dev/null
+++ b/layout/style/test/test_counter_descriptor_storage.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test for parsing, storage and serialization of CSS @counter-style descriptor values</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=966166">Mozilla Bug 966166</a>
+<div id="display"></div>
+<pre id="test">
+<script type="application/javascript">
+var gStyleElement = document.createElement("style");
+gStyleElement.setAttribute("type", "text/css");
+document.getElementsByTagName("head")[0].appendChild(gStyleElement);
+var gSheet = gStyleElement.sheet;
+gSheet.insertRule(
+  "@counter-style test { system: extends decimal }", 0);
+var gRule = gSheet.cssRules[0];
+
+function set_rule(ruleText) {
+  gSheet.deleteRule(0);
+  gSheet.insertRule("@counter-style test { " + ruleText + " }", 0);
+  gRule = gSheet.cssRules[0];
+}
+
+function run_tests(tests) {
+  for (var desc in tests) {
+    var items = tests[desc];
+    for (var i in items) {
+      var item = items[i];
+      var ref = item[0];
+      if (ref === null) {
+        ref = gRule[desc];
+      }
+      for (var j in item) {
+        if (item[j] !== null) {
+          gRule[desc] = item[j];
+          is(gRule[desc], ref,
+             "setting '" + item[j] + "' on '" + desc + "'");
+        }
+      }
+    }
+  }
+}
+
+function test_system_dep_desc() {
+  // for system requires at least one symbol
+  var oneSymbolTests = [
+    [null, "", "0"],
+    ["x y", "x   y"],
+    ["\"x\"", "'x'"],
+    ["\\-", "\\2D"],
+    ["\\*", "\\2A"],
+  ];
+  // for system requires at least two symbols
+  var twoSymbolsTests = [
+    [null, "", "0", "x", "\"x\""],
+    ["x y", "x   y"],
+    ["\"x\" \"y\"", "'x' 'y'"],
+  ];
+  var info = [
+    {
+      system: "cyclic", 
+      base: "symbols: x",
+      base_tests: {
+        system: "cyclic",
+        symbols: "x"
+      },
+      tests: {
+        system: [
+          [null, "", "symbolic"],
+          ["cyclic", "Cyclic"],
+        ],
+        symbols: oneSymbolTests
+      }
+    },
+    {
+      system: "fixed",
+      base: "symbols: x",
+      base_tests: {
+        system: "fixed",
+        symbols: "x"
+      },
+      tests: {
+        system: [
+          [null, "", "symbolic"],
+          ["fixed 0"],
+          ["fixed", "FixeD"],
+          ["fixed 1", "FixeD 1"],
+          ["fixed -1"],
+          [null, "fixed a", "fixed \"0\"", "fixed 0 1"],
+        ],
+        symbols: oneSymbolTests
+      }
+    },
+    {
+      system: "symbolic",
+      base: "symbols: x",
+      base_tests: {
+        system: "symbolic",
+        symbols: "x"
+      },
+      tests: {
+        system: [
+          [null, "", "cyclic"],
+          ["symbolic", "SymBolic"],
+        ],
+        symbols: oneSymbolTests
+      }
+    },
+    {
+      system: "alphabetic",
+      base: "symbols: x y",
+      base_tests: {
+        system: "alphabetic",
+        symbols: "x y"
+      },
+      tests: {
+        system: [
+          [null, "", "cyclic"],
+          ["alphabetic", "AlphaBetic"],
+        ],
+        symbols: twoSymbolsTests
+      }
+    },
+    {
+      system: "numeric",
+      base: "symbols: x y",
+      base_tests: {
+        system: "numeric",
+        symbols: "x y"
+      },
+      tests: {
+        system: [
+          [null, "", "cyclic"],
+          ["numeric", "NumEric"],
+        ],
+        symbols: twoSymbolsTests
+      }
+    },
+    {
+      system: "additive",
+      base: "additive-symbols: 0 x",
+      base_tests: {
+        system: "additive",
+        additiveSymbols: "0 x"
+      },
+      tests: {
+        system: [
+          [null, "", "cyclic"],
+        ],
+        additiveSymbols: [
+          [null, "", "x", "0", "\"x\"", "1 x, 0", "0 x, 1 y"],
+          ["0 x", "x 0"],
+          ["1 y, 0 x", "y 1, 0 x", "1 y, x 0", "y 1, x 0"],
+          ["1 \"0\"", "\"0\" 1", "1 '0'"],
+        ]
+      }
+    },
+    {
+      system: "extends decimal",
+      base: "",
+      base_tests: {
+        system: "extends decimal",
+        symbols: "",
+        additiveSymbols: ""
+      },
+      tests: {
+        system: [
+          [null, "extends", "fixed", "cyclic", "extends symbols('*')"],
+          ["extends cjk-decimal", "ExTends cjk-decimal", "extends CJK-decimal"],
+        ],
+        symbols: [
+          [null, "x", "x y"],
+        ],
+        additiveSymbols: [
+          [null, "0 x", "1 y, 0 x"],
+        ]
+      }
+    }
+  ];
+  for (var i = 0; i < info.length; i++) {
+    var item = info[i];
+    set_rule("system: " + item.system + "; " + item.base);
+    for (var desc in item.base_tests) {
+      is(gRule[desc], item.base_tests[desc],
+         "checking base value of '" + desc + "' " +
+         "for system '" + item.system + "'");
+    }
+    run_tests(item.tests);
+  }
+}
+
+function test_system_indep_desc() {
+  var tests = {
+    name: [
+      [null, "", "-", " ", "a b"],
+      [null, "decimal", "none", "Decimal", "NONE"],
+      ["cjk-decimal", "CJK-Decimal", "cjk-Decimal"],
+      ["X"],
+      ["x", "\\78"],
+      ["\\-", "\\2D"],
+    ],
+    negative: [
+      [null, "-", "", "0", "a b c"],
+      ["\"-\"", "'-'", "\"\\2D\""],
+      ["\\-", "\\2D"],
+      ["a b"],
+      ["\"(\" \")\"", "'(' ')'"],
+    ],
+    prefix: [
+      [null, "0", "-", " ", "a b"],
+      ["a"],
+      ["\"a\""],
+    ],
+    suffix: [
+      [null, "0", "-", " ", "a b"],
+      ["a"],
+      ["\"a\""],
+    ],
+    range: [
+      ["auto", "auTO"],
+      ["infinite infinite", "INFinite inFinite"],
+      ["0 infinite", "0 INFINITE"],
+      ["infinite 100"],
+      ["1 1"],
+      ["0 100", "0   100"],
+      ["0 100, 2 300, -1 1, infinite -100"],
+      [null, "0", "0 a", "a 0"],
+      [null, "1 -1", "1 -1, 0 100", "-1 1, 100 0"],
+    ],
+    pad: [
+      ["0 \"\"", "\"\" 0"],
+      ["1 a", "a 1", "1    a", "\\61  1"],
+      [null, "0", "\"\"", "0 0", "a a", "0 a a"],
+    ],
+    fallback: [
+      [null, "", "-", "0", "a b", "symbols('*')"],
+      ["a"],
+      ["A"],
+      ["decimal", "Decimal"],
+    ],
+    speakAs: [
+      [null, "", "-", "0", "a b", "symbols('*')"],
+      ["auto", "AuTo"],
+      ["bullets", "BULLETs"],
+      ["numbers", "NumBers"],
+      ["words", "WordS"],
+      // Currently spell-out is not supported, so it should be treated
+      // as an invalid value.
+      [null, "spell-out", "Spell-Out"],
+      ["a"],
+      ["A"],
+      ["decimal", "Decimal"],
+    ],
+  };
+  set_rule("system: extends decimal");
+  run_tests(tests);
+}
+
+test_system_dep_desc();
+test_system_indep_desc();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_counter_style.html b/layout/style/test/test_counter_style.html
new file mode 100644
index 0000000000..58f5763451
--- /dev/null
+++ b/layout/style/test/test_counter_style.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Test for css3-counter-style (Bug 966166)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+    #ol_test, #ol_ref {
+      display: inline-block;
+      list-style-position: inside;
+    }
+    #ol_test { list-style-type: test; }
+    #ol_ref { list-style-type: ref; }
+    #div_test, #div_ref {
+      display: inline-block;
+      counter-reset: a -1;
+    }
+    #div_test::before { content: counter(a, test); }
+    #div_ref::before { content: counter(a, ref); }
+  </style>
+  <style type="text/css" id="counter">
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=966166">Mozilla Bug 966166</a>
+<div id="display"></div>
+<ol id="ol_test" start="-1"><li></li></ol><br>
+<ol id="ol_ref" start="-1"><li></li></ol><br>
+<div id="div_test"></div><br>
+<div id="div_ref"></div><br>
+<pre id="test">
+<script type="application/javascript">
+var gOlTest = document.getElementById("ol_test"),
+    gOlRef = document.getElementById("ol_ref"),
+    gDivTest = document.getElementById("div_test"),
+    gDivRef = document.getElementById("div_ref"),
+    gCounterSheet = document.getElementById("counter").sheet;
+
+var testRule, refRule;
+
+var basicStyle = "system: extends decimal; range: infinite infinite; ";
+var info = [
+  ["system",
+   "system: fixed -1; symbols: xxx;",
+   "system: fixed; symbols: xxx;"],
+  ["system",
+   "system: extends decimal;",
+   "system: extends cjk-ideographic;"],
+  ["negative", "", "negative: '((' '))';"],
+  ["negative", "", "negative: '---';"],
+  ["prefix", "", "prefix: '###';"],
+  ["suffix", "", "suffix: '###';"],
+  ["range",
+   "fallback: cjk-ideographic;",
+   "fallback: cjk-ideographic; range: 10 infinite;"],
+  ["pad", "", "pad: 10 '0';"],
+  ["fallback",
+   "range: 0 infinite;",
+   "range: 0 infinite; fallback: cjk-ideographic;"],
+  ["symbols",
+   "system: symbolic; symbols: '1';",
+   "system: symbolic; symbols: '111';"],
+  ["additiveSymbols",
+   "system: additive; additive-symbols: 1 '1';",
+   "system: additive; additive-symbols: 1 '111';"],
+];
+
+// force a reflow before test to eliminate bug 994418
+gOlTest.getBoundingClientRect().width;
+
+for (var i in info) {
+  var item = info[i];
+  var desc = item[0],
+      testStyle = item[1],
+      refStyle = item[2];
+  var isFix = (desc == "prefix" || desc == "suffix");
+
+  while (gCounterSheet.cssRules.length > 0) {
+    gCounterSheet.deleteRule(0);
+  }
+  gCounterSheet.insertRule("@counter-style test { " +
+    basicStyle + testStyle + "}", 0);
+  gCounterSheet.insertRule("@counter-style ref { " +
+    basicStyle + refStyle + "}", 1);
+  testRule = gCounterSheet.cssRules[0];
+  refRule = gCounterSheet.cssRules[1];
+
+  var olTestWidth = gOlTest.getBoundingClientRect().width;
+  var olRefWidth = gOlRef.getBoundingClientRect().width;
+  ok(olTestWidth > 0, "test ol has width");
+  ok(olRefWidth > 0, "ref ol has width");
+  ok(olTestWidth != olRefWidth,
+     "OLs have different width " +
+     "for rule '" + testStyle + "' and '" + refStyle + "'");
+
+  var divTestWidth = gDivTest.getBoundingClientRect().width;
+  var divRefWidth = gDivRef.getBoundingClientRect().width;
+  if (!isFix) {
+    ok(divTestWidth > 0, "test div has width");
+    ok(divRefWidth > 0, "ref div has width");
+    ok(divTestWidth != divRefWidth,
+       "DIVs have different width" +
+       "for rule '" + testStyle + "' and '" + refStyle + "'");
+  }
+
+  ok(testRule[desc] != refRule[desc],
+     "rules have different values for desciptor '" + desc + "'");
+  testRule[desc] = refRule[desc];
+
+  var olNewWidth = gOlTest.getBoundingClientRect().width;
+  var divNewWidth = gDivTest.getBoundingClientRect().width;
+  is(olNewWidth, olRefWidth);
+  if (!isFix) {
+    is(divNewWidth, divRefWidth);
+  }
+}
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_crash_with_content_policy.html b/layout/style/test/test_crash_with_content_policy.html
new file mode 100644
index 0000000000..119ee0b53a
--- /dev/null
+++ b/layout/style/test/test_crash_with_content_policy.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Crashtests for style system with content policy</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<iframe id="iframe"></iframe>
+<script>
+const TESTS = [
+  "file_bug1381233.html",
+];
+
+const Cc = SpecialPowers.Cc;
+const Ci = SpecialPowers.Ci;
+
+var policyID = SpecialPowers.wrap(SpecialPowers.Components).ID("{b80e19d0-878f-d41b-2654-194714a4115c}");
+var policyName = "@mozilla.org/testpolicy;1";
+var policy = {
+  // nsISupports implementation
+  QueryInterface: function(iid) {
+
+    iid = SpecialPowers.wrap(iid);
+    if (iid.equals(Ci.nsISupports) ||
+        iid.equals(Ci.nsIFactory) ||
+        iid.equals(Ci.nsIContentPolicy))
+      return this;
+
+    throw SpecialPowers.Cr.NS_ERROR_NO_INTERFACE;
+  },
+
+  // nsIFactory implementation
+  createInstance: function(outer, iid) {
+    return this.QueryInterface(iid);
+  },
+
+  // nsIContentPolicy implementation
+  shouldLoad: function(contentLocation, loadInfo, mimeTypeGuess) {
+    info(`shouldLoad is invoked for ${SpecialPowers.wrap(contentLocation).spec}`);
+    return Ci.nsIContentPolicy.ACCEPT;
+  },
+  shouldProcess: function(contentLocation, loadInfo, mimeTypeGuess) {
+    return Ci.nsIContentPolicy.ACCEPT;
+  }
+}
+policy = SpecialPowers.wrapCallbackObject(policy);
+
+// Register content policy
+var componentManager = SpecialPowers.wrap(SpecialPowers.Components).manager
+                                    .QueryInterface(Ci.nsIComponentRegistrar);
+componentManager.registerFactory(policyID, "Test content policy", policyName, policy);
+var categoryManager = Cc["@mozilla.org/categorymanager;1"].getService(Ci.nsICategoryManager);
+categoryManager.addCategoryEntry("content-policy", policyName, policyName, false, true);
+
+
+SimpleTest.waitForExplicitFinish();
+
+async function runTests() {
+  let iframe = document.getElementById("iframe");
+  for (let test of TESTS) {
+    iframe.src = test;
+    await new Promise(resolve => {
+      iframe.onload = resolve;
+    });
+    ok(true, `${test} doesn't crash`);
+  }
+  categoryManager.deleteCategoryEntry("content-policy", policyName, false);
+  componentManager.unregisterFactory(policyID, policy);
+  SimpleTest.finish();
+}
+runTests();
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_css_cross_domain.html b/layout/style/test/test_css_cross_domain.html
new file mode 100644
index 0000000000..8541c9c5ce
--- /dev/null
+++ b/layout/style/test/test_css_cross_domain.html
@@ -0,0 +1,158 @@
+<!DOCTYPE HTML>
+<html>
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=524223 -->
+<head>
+  <title>Test cross-domain CSS loading</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css"
+        href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+    hr { border: none; clear: both }
+    .column {
+        margin: 10px;
+        float: left;
+    }
+    iframe {
+        width: 40px;
+        height: 680px;
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+    h2 { font-weight: normal; padding: 0 }
+    ol, h2 { font-size: 13px; line-height: 20px; }
+    ol { padding-left: 1em;
+         list-style-type: upper-roman }
+    ol ol { list-style-type: upper-alpha }
+    ol ol ol { list-style-type: decimal }
+  </style>
+</head>
+<body>
+<a target="_blank"
+   href="https://bugzilla.mozilla.org/show_bug.cgi?id=524223">Mozilla
+   Bug 524223</a>
+
+<hr/>
+
+<div class="column">
+<h2>&nbsp;</h2>
+<ol><li>text/css<ol><li>same origin<ol><li>valid</li>
+                                       <li>malformed</li>
+                                       <li>http error</li></ol></li>
+                  <li>cross origin<ol><li>valid</li>
+                                      <li>malformed</li>
+                                      <li>http error</li></ol></li>
+                  <li>same to cross<ol><li>valid</li>
+                                       <li>malformed</li>
+                                       <li>http error</li></ol></li>
+                  <li>cross to same<ol><li>valid</li>
+                                       <li>malformed</li>
+                                       <li>http error</li></ol></li></ol></li>
+    <li>text/html<ol><li>same origin<ol><li>valid</li>
+                                        <li>malformed</li>
+                                        <li>http error</li></ol></li>
+                     <li>cross origin<ol><li>valid</li>
+                                         <li>malformed</li>
+                                         <li>http error</li></ol></li>
+                     <li>same to cross<ol><li>valid</li>
+                                          <li>malformed</li>
+                                          <li>http error</li></ol></li>
+                     <li>cross to same<ol><li>valid</li>
+                                          <li>malformed</li>
+                                          <li>http error</li></ol></li></ol></li>
+</ol>
+</div>
+
+<div class="column">
+<h2>Quirks</h2>
+<div id="quirks-placeholder"></div>
+</div>
+
+<div class="column">
+<h2>Standards</h2>
+<div id="standards-placeholder"></div>
+</div>
+
+<script type="application/javascript">
+
+const COLOR = {red: "rgb(255, 0, 0)", lime: "rgb(0, 255, 0)"};
+
+// Cross origin requests with text/html as the contentType.
+// These requests will be blocked by ORB (when ORB is enabled),
+// thus the color of the element is not going to be changed.
+const BLOCKED_BY_ORB = ["JD1i", "JD1l", "JD2i", "JD2l"];
+
+/** Test for Bug 524223 **/
+function check_iframe(ifr) {
+  var doc = ifr.contentDocument;
+  var cases = doc.getElementsByTagName("p");
+
+  for (var i = 0; i < cases.length; i++) {
+	  var color = doc.defaultView.getComputedStyle(cases[i])
+        .getPropertyValue("background-color");
+
+    var id = cases[i].id;
+    // only 'quirks' can have requests that are blocked by ORB.
+    if (BLOCKED_BY_ORB.includes(id) && ifr.id === "quirks") {
+	    is(color, COLOR.red, ifr.id + " " + id);
+    } else {
+	    is(color, COLOR.lime, ifr.id + " " + id);
+    }
+  }
+}
+
+SimpleTest.waitForExplicitFinish();
+
+function insertIFrames(src, id) {
+  const quirks = document.createElement("iframe");
+  quirks.src = "ccd-quirks.html";
+  quirks.id = "quirks";
+  document.getElementById("quirks-placeholder").replaceWith(quirks);
+
+  const standards = document.createElement("iframe");
+  standards.src = "ccd-standards.html";
+  standards.id = "standards";
+  document.getElementById("standards-placeholder").replaceWith(standards);
+}
+
+var hasQuirksLoaded = false;
+var hasStandardsLoaded = false;
+
+function quirksLoaded() {
+  hasQuirksLoaded = true;
+  MaybeRunTest();
+}
+
+function standardsLoaded() {
+  hasStandardsLoaded = true;
+  MaybeRunTest();
+}
+
+function runTest() {
+  check_iframe(document.getElementById("quirks"));
+  check_iframe(document.getElementById("standards"));
+}
+
+function MaybeRunTest() {
+  if (!hasQuirksLoaded || !hasStandardsLoaded) {
+      return;
+  }
+
+  runTest();
+  SimpleTest.finish();
+}
+
+window.onload = async function() {
+  await SpecialPowers.pushPrefEnv(
+    {
+      set: [
+        ['browser.opaqueResponseBlocking', true],
+        ['browser.opaqueResponseBlocking.javascriptValidator', true],
+      ],
+    }
+  );
+  insertIFrames();
+};
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_css_cross_domain_no_orb.html b/layout/style/test/test_css_cross_domain_no_orb.html
new file mode 100644
index 0000000000..27ede793be
--- /dev/null
+++ b/layout/style/test/test_css_cross_domain_no_orb.html
@@ -0,0 +1,147 @@
+<!DOCTYPE HTML>
+<html>
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=524223 -->
+<head>
+  <title>Test cross-domain CSS loading</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css"
+        href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+    hr { border: none; clear: both }
+    .column {
+        margin: 10px;
+        float: left;
+    }
+    iframe {
+        width: 40px;
+        height: 680px;
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+    h2 { font-weight: normal; padding: 0 }
+    ol, h2 { font-size: 13px; line-height: 20px; }
+    ol { padding-left: 1em;
+         list-style-type: upper-roman }
+    ol ol { list-style-type: upper-alpha }
+    ol ol ol { list-style-type: decimal }
+  </style>
+</head>
+<body>
+<a target="_blank"
+   href="https://bugzilla.mozilla.org/show_bug.cgi?id=524223">Mozilla
+   Bug 524223</a>
+
+<hr/>
+
+<div class="column">
+<h2>&nbsp;</h2>
+<ol><li>text/css<ol><li>same origin<ol><li>valid</li>
+                                       <li>malformed</li>
+                                       <li>http error</li></ol></li>
+                  <li>cross origin<ol><li>valid</li>
+                                      <li>malformed</li>
+                                      <li>http error</li></ol></li>
+                  <li>same to cross<ol><li>valid</li>
+                                       <li>malformed</li>
+                                       <li>http error</li></ol></li>
+                  <li>cross to same<ol><li>valid</li>
+                                       <li>malformed</li>
+                                       <li>http error</li></ol></li></ol></li>
+    <li>text/html<ol><li>same origin<ol><li>valid</li>
+                                        <li>malformed</li>
+                                        <li>http error</li></ol></li>
+                     <li>cross origin<ol><li>valid</li>
+                                         <li>malformed</li>
+                                         <li>http error</li></ol></li>
+                     <li>same to cross<ol><li>valid</li>
+                                          <li>malformed</li>
+                                          <li>http error</li></ol></li>
+                     <li>cross to same<ol><li>valid</li>
+                                          <li>malformed</li>
+                                          <li>http error</li></ol></li></ol></li>
+</ol>
+</div>
+
+<div class="column">
+<h2>Quirks</h2>
+<div id="quirks-placeholder"></div>
+</div>
+
+<div class="column">
+<h2>Standards</h2>
+<div id="standards-placeholder"></div>
+</div>
+
+<script type="application/javascript">
+
+const COLOR = {red: "rgb(255, 0, 0)", lime: "rgb(0, 255, 0)"};
+
+/** Test for Bug 524223 **/
+function check_iframe(ifr) {
+  var doc = ifr.contentDocument;
+  var cases = doc.getElementsByTagName("p");
+
+  for (var i = 0; i < cases.length; i++) {
+	  var color = doc.defaultView.getComputedStyle(cases[i])
+        .getPropertyValue("background-color");
+
+    var id = cases[i].id;
+	  is(color, COLOR.lime, ifr.id + " " + id);
+  }
+}
+
+SimpleTest.waitForExplicitFinish();
+
+function insertIFrames(src, id) {
+  const quirks = document.createElement("iframe");
+  quirks.src = "ccd-quirks.html";
+  quirks.id = "quirks";
+  document.getElementById("quirks-placeholder").replaceWith(quirks);
+
+  const standards = document.createElement("iframe");
+  standards.src = "ccd-standards.html";
+  standards.id = "standards";
+  document.getElementById("standards-placeholder").replaceWith(standards);
+}
+
+var hasQuirksLoaded = false;
+var hasStandardsLoaded = false;
+
+function quirksLoaded() {
+  hasQuirksLoaded = true;
+  MaybeRunTest();
+}
+
+function standardsLoaded() {
+  hasStandardsLoaded = true;
+  MaybeRunTest();
+}
+
+function runTest() {
+  check_iframe(document.getElementById("quirks"));
+  check_iframe(document.getElementById("standards"));
+}
+
+function MaybeRunTest() {
+  if (!hasQuirksLoaded || !hasStandardsLoaded) {
+      return;
+  }
+
+  runTest();
+  SimpleTest.finish();
+}
+
+window.onload = async function() {
+  await SpecialPowers.pushPrefEnv(
+    {
+      set: [
+        ['browser.opaqueResponseBlocking', false],
+      ],
+    }
+  );
+  insertIFrames();
+};
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_css_eof_handling.html b/layout/style/test/test_css_eof_handling.html
new file mode 100644
index 0000000000..e30c8a39aa
--- /dev/null
+++ b/layout/style/test/test_css_eof_handling.html
@@ -0,0 +1,283 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for CSS EOF handling</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<p><a target="_blank"
+   href="https://bugzilla.mozilla.org/show_bug.cgi?id=311616">bug 311616</a>,
+<a target="_blank"
+   href="https://bugzilla.mozilla.org/show_bug.cgi?id=325064">bug 325064</a></p>
+<iframe id="display"></iframe>
+<p id="log"></p>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+const tests = [
+  {
+      name: "basic rule",
+      ref: "#r {background-color : orange}",
+      tst: "#t {background-color : orange",
+      prop: "background-color", pseudo: ""
+  },
+  {
+      name: "function",
+      ref: "#r {background-color: rgb(0,255,0)}",
+      tst: "#t {background-color: rgb(0,255,0",
+      prop: "background-color", pseudo: ""
+  },
+  {
+      name: "comment",
+      ref: "#r {background-color: aqua/*marine*/}",
+      tst: "#t {background-color: aqua/*marine",
+      prop: "background-color", pseudo: ""
+  },
+  {
+      name: "@media 1",
+      ref: "@media all { #r { background-color: yellow } }",
+      tst: "@media all { #t { background-color: yellow }",
+      prop: "background-color", pseudo: ""
+  },
+  {
+      name: "@media 2",
+      ref: "@media all { #r { background-color: magenta } }",
+      tst: "@media all { #t { background-color: magenta",
+      prop: "background-color", pseudo: ""
+  },
+  {
+      name: "@import 1",
+      ref: "@import 'data:text/css,%23r%7Bbackground-color%3Agray%7D';",
+      tst: "@import 'data:text/css,%23t%7Bbackground-color%3Agray%7D",
+      prop: "background-color", pseudo: ""
+  },
+  {
+      name: "@import 2",
+      ref: "@import 'data:text/css,%23r%7Bbackground-color%3Ablack%7D' all;",
+      tst: "@import 'data:text/css,%23t%7Bbackground-color%3Ablack%7D' all",
+      prop: "background-color", pseudo: ""
+  },
+  {
+      name: "url-token 1",
+      ref: "#r { background-image: url(data:image/png;base64," +
+           "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAADklEQVQI12NI" +
+           "YJgAhAkAB4gB4Ry+pcoAAAAASUVORK5CYII=) }",
+      tst: "#t { background-image: url(data:image/png;base64," +
+           "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAADklEQVQI12NI" +
+           "YJgAhAkAB4gB4Ry+pcoAAAAASUVORK5CYII=",
+      prop: "background-image", pseudo: ""
+  },
+  {
+      name: "url-token 2",
+      ref: "#r { background-image: url('data:image/png;base64," +
+           "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12Mo" +
+           "YNjAcIHhAQAJ2ALR4kRk1gAAAABJRU5ErkJggg==') }",
+      tst: "#t { background-image: url('data:image/png;base64," +
+           "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12Mo" +
+           "YNjAcIHhAQAJ2ALR4kRk1gAAAABJRU5ErkJggg==",
+      prop: "background-image", pseudo: ""
+  },
+  {
+      name: "url-token 3",
+      ref: "#r { background-image: url('data:image/png;base64," +
+           "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12N4" +
+           "wHCBYQNDAQAMuALRrGb97AAAAABJRU5ErkJggg==') }",
+      tst: "#t { background-image: url('data:image/png;base64," +
+           "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12N4" +
+           "wHCBYQNDAQAMuALRrGb97AAAAABJRU5ErkJggg=='",
+      prop: "background-image", pseudo: ""
+  },
+  {
+      name: "url-token 4",  /*Bug 751939*/
+      ref: "#r { background-image: url( )}",
+      tst: "#t { background-image: url(" ,
+      prop: "background-image", pseudo: ""
+  },
+  {
+      name: "counter",
+      ref: "#r::before { content: counter(tr, upper-alpha) }",
+      tst: "#t::before { content: counter(tr, upper-alpha",
+      prop: "content", pseudo: "::before"
+  },
+  {
+      name: "string",
+      ref: "#r::before { content: 'B' }",
+      tst: "#t::before { content: 'B",
+      prop: "content", pseudo: "::before"
+  },
+
+  /* For these tests, there is no visible effect on computed style;
+     instead we have to audit the DOM stylesheet object.  */
+
+  {
+      todo: 1, /* bug 446226 */
+      name: "selector 1",
+      ref: "td[colspan='3'] {}",
+      tst: "td[colspan='3"
+  },
+  {
+      todo: 1, /* bug 446226 */
+      name: "selector 2",
+      ref: "td[colspan='3'] {}",
+      tst: "td[colspan='3'"
+  },
+  {
+      todo: 1,  /* bug 446226 */
+      name: "selector 3",
+      ref: "td:lang(en) {}",
+      tst: "td:lang(en"
+  },
+  
+  {
+      name: "@media 3",
+      ref: "@media all {}",
+      tst: "@media all {",
+  },
+  {
+      name: "@namespace 1a",
+      ref: "@namespace foo url('http://foo.example.com/');",
+      tst: "@namespace foo url('http://foo.example.com/')"
+  },
+  {
+      name: "@namespace 1b",
+      ref: "@namespace foo url(http://foo.example.com/);",
+      tst: "@namespace foo url(http://foo.example.com/"
+  },
+  {
+      name: "@namespace 1c",
+      ref: "@namespace foo url('http://foo.example.com/');",
+      tst: "@namespace foo url('http://foo.example.com/"
+  },
+  {
+      name: "@namespace 1d",
+      ref: "@namespace foo 'http://foo.example.com/';",
+      tst: "@namespace foo 'http://foo.example.com/'"
+  },
+  {
+      name: "@namespace 1e",
+      ref: "@namespace foo 'http://foo.example.com/';",
+      tst: "@namespace foo 'http://foo.example.com/"
+  },
+  {
+      name: "@namespace 2a",
+      ref: "@namespace url('http://foo.example.com/');",
+      tst: "@namespace url('http://foo.example.com/')"
+  },
+  {
+      name: "@namespace 2b",
+      ref: "@namespace url('http://foo.example.com/');",
+      tst: "@namespace url('http://foo.example.com/'"
+  },
+  {
+      name: "@namespace 2c",
+      ref: "@namespace url('http://foo.example.com/');",
+      tst: "@namespace url('http://foo.example.com/"
+  },
+  {
+      name: "@namespace 2d",
+      ref: "@namespace 'http://foo.example.com/';",
+      tst: "@namespace 'http://foo.example.com/'"
+  },
+  {
+      name: "@namespace 2e",
+      ref: "@namespace 'http://foo.example.com/';",
+      tst: "@namespace 'http://foo.example.com/"
+  },
+  {
+      name: "@-moz-document 1",
+      ref: "@-moz-document domain('example.com') {}",
+      tst: "@-moz-document domain('example.com') {"
+  },
+  {
+      name: "@-moz-document 2",
+      ref: "@-moz-document domain('example.com') { p {} }",
+      tst: "@-moz-document domain('example.com') { p {"
+  }
+];
+
+const basestyle = ("table {\n"+
+       "    border-collapse: collapse;\n"+
+       "}\n"+
+       "td {\n"+
+       "    width: 1.5em;\n"+
+       "    height: 1.5em;\n"+
+       "    border: 1px solid black;\n"+
+       "    text-align: center;\n"+
+       "    margin: 0;\n"+
+       "}\n"+
+       "tr { counter-increment: tr }\n");
+
+/* This is more complicated than it might look like it needs to be,
+   because for each subtest we have to splat stuff into the iframe,
+   allow the renderer to run, and only then interrogate the computed
+   styles.  */
+
+SimpleTest.waitForExplicitFinish();
+
+window.onload = function() {
+  SpecialPowers.pushPrefEnv(
+    { "set": [["layout.css.moz-document.content.enabled", true]]},
+    function() {
+      const frame = document.getElementById("display");
+      var curTest = 0;
+
+      const prepareTest = function() {
+        var cd = frame.contentDocument;
+        cd.open();
+        cd.write('<!DOCTYPE HTML><html><head>' +
+          '<style>\n' + basestyle + '</style>\n' +
+          '<style>\n' + tests[curTest].ref + '</style>\n' +
+          '<style>\n' + tests[curTest].tst + '</style>\n' +
+          '</head><body>\n' +
+          '<table><tr><td id="r"><td id="t"></table>' +
+          '</body></html>');
+        cd.close();
+      };
+
+      const checkTest = function() {
+        var cd = frame.contentDocument;
+        var _is = tests[curTest].todo ? todo_is : is;
+        var _ok = tests[curTest].todo ? todo : ok;
+
+        if (cd.styleSheets[1].cssRules.length == 1 &&
+          cd.styleSheets[2].cssRules.length == 1) {
+          // If we have a .prop for this test, the .cssText of the reference
+          // and test rules will differ in the selector.  Change #t to #r
+          // in the test rule.
+          var ref_canon = cd.styleSheets[1].cssRules[0].cssText;
+          var tst_canon = cd.styleSheets[2].cssRules[0].cssText;
+          tst_canon = tst_canon.replace(/(#|%23)t\b/, "$1r");
+          _is(tst_canon, ref_canon,
+              tests[curTest].name + " (canonicalized rule)");
+        } else {
+          _ok(false, tests[curTest].name + " (rule missing)");
+        }
+        if (tests[curTest].prop) {
+          var prop = tests[curTest].prop;
+          var pseudo = tests[curTest].pseudo;
+
+          var refElt = cd.getElementById("r");
+          var tstElt = cd.getElementById("t");
+          var refStyle = cd.defaultView.getComputedStyle(refElt, pseudo);
+          var tstStyle = cd.defaultView.getComputedStyle(tstElt, pseudo);
+          _is(tstStyle.getPropertyValue(prop),
+              refStyle.getPropertyValue(prop),
+              tests[curTest].name + " (computed style)");
+        }
+        curTest++;
+        if (curTest < tests.length) {
+          prepareTest();
+        } else {
+          SimpleTest.finish();
+        }
+      };
+
+      frame.onload = function(){setTimeout(checkTest, 0);};
+      prepareTest();
+    }
+  )
+};
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_css_escape_api.html b/layout/style/test/test_css_escape_api.html
new file mode 100644
index 0000000000..2bcc094be1
--- /dev/null
+++ b/layout/style/test/test_css_escape_api.html
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=955860
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 955860</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=955860">Mozilla Bug 955860</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+</div>
+<pre id="test">
+<script>
+// Tests taken from:
+// https://github.com/mathiasbynens/CSS.escape/blob/master/tests/tests.js
+
+SimpleTest.doesThrow(() => CSS.escape(), 'undefined');
+
+is(CSS.escape('\0'), '\uFFFD', "escaping for 0 char (1)");
+is(CSS.escape('a\0'), 'a\uFFFD', "escaping for 0 char (2)");
+is(CSS.escape('\0b'), '\uFFFDb', "escaping for 0 char (3)");
+is(CSS.escape('a\0b'), 'a\uFFFDb', "escaping for 0 char (4)");
+
+is(CSS.escape('\uFFFD'), '\uFFFD', "escaping for replacement char (1)");
+is(CSS.escape('a\uFFFD'), 'a\uFFFD', "escaping replacement char (2)");
+is(CSS.escape('\uFFFDb'), '\uFFFDb', "escaping replacement char (3)");
+is(CSS.escape('a\uFFFDb'), 'a\uFFFDb', "escaping replacement char (4)");
+
+is(CSS.escape(true), 'true', "escapingFailed Character : true(bool)");
+is(CSS.escape(false), 'false', "escapingFailed Character : false(bool)");
+is(CSS.escape(null), 'null', "escapingFailed Character : null");
+is(CSS.escape(''), '', "escapingFailed Character : '' ");
+
+is(CSS.escape('\x01\x02\x1E\x1F'), '\\1 \\2 \\1e \\1f ',"escapingFailed Char: \\x01\\x02\\x1E\\x1F");
+
+is(CSS.escape('0a'), '\\30 a', "escapingFailed Char: 0a");
+is(CSS.escape('1a'), '\\31 a', "escapingFailed Char: 1a");
+is(CSS.escape('2a'), '\\32 a', "escapingFailed Char: 2a");
+is(CSS.escape('3a'), '\\33 a', "escapingFailed Char: 3a");
+is(CSS.escape('4a'), '\\34 a', "escapingFailed Char: 4a");
+is(CSS.escape('5a'), '\\35 a', "escapingFailed Char: 5a");
+is(CSS.escape('6a'), '\\36 a', "escapingFailed Char: 6a");
+is(CSS.escape('7a'), '\\37 a', "escapingFailed Char: 7a");
+is(CSS.escape('8a'), '\\38 a', "escapingFailed Char: 8a");
+is(CSS.escape('9a'), '\\39 a', "escapingFailed Char: 9a");
+
+is(CSS.escape('a0b'), 'a0b', "escapingFailed Char: a0b");
+is(CSS.escape('a1b'), 'a1b', "escapingFailed Char: a1b");
+is(CSS.escape('a2b'), 'a2b', "escapingFailed Char: a2b");
+is(CSS.escape('a3b'), 'a3b', "escapingFailed Char: a3b");
+is(CSS.escape('a4b'), 'a4b', "escapingFailed Char: a4b");
+is(CSS.escape('a5b'), 'a5b', "escapingFailed Char: a5b");
+is(CSS.escape('a6b'), 'a6b', "escapingFailed Char: a6b");
+is(CSS.escape('a7b'), 'a7b', "escapingFailed Char: a7b");
+is(CSS.escape('a8b'), 'a8b', "escapingFailed Char: a8b");
+is(CSS.escape('a9b'), 'a9b', "escapingFailed Char: a9b");
+
+is(CSS.escape('-0a'), '-\\30 a', "escapingFailed Char: -0a");
+is(CSS.escape('-1a'), '-\\31 a', "escapingFailed Char: -1a");
+is(CSS.escape('-2a'), '-\\32 a', "escapingFailed Char: -2a");
+is(CSS.escape('-3a'), '-\\33 a', "escapingFailed Char: -3a");
+is(CSS.escape('-4a'), '-\\34 a', "escapingFailed Char: -4a");
+is(CSS.escape('-5a'), '-\\35 a', "escapingFailed Char: -5a");
+is(CSS.escape('-6a'), '-\\36 a', "escapingFailed Char: -6a");
+is(CSS.escape('-7a'), '-\\37 a', "escapingFailed Char: -7a");
+is(CSS.escape('-8a'), '-\\38 a', "escapingFailed Char: -8a");
+is(CSS.escape('-9a'), '-\\39 a', "escapingFailed Char: -9a");
+
+is(CSS.escape('--a'), '--a', 'Should not need to escape leading "--"');
+
+is(CSS.escape('\x7F\x80\x2D\x5F\xA9'), '\\7f \x80\x2D\x5F\xA9', "escapingFailed Char: \\x7F\\x80\\x2D\\x5F\\xA9");
+is(CSS.escape('\xA0\xA1\xA2'), '\xA0\xA1\xA2', "escapingFailed Char: \\xA0\\xA1\\xA2");
+is(CSS.escape('a0123456789b'), 'a0123456789b', "escapingFailed Char: a0123465789");
+is(CSS.escape('abcdefghijklmnopqrstuvwxyz'), 'abcdefghijklmnopqrstuvwxyz', "escapingFailed Char: abcdefghijklmnopqrstuvwxyz");
+is(CSS.escape('ABCDEFGHIJKLMNOPQRSTUVWXYZ'), 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', "escapingFailed Char: ABCDEFGHIJKLMNOPQRSTUVWXYZBCDEFGHIJKLMNOPQRSTUVWXYZ");
+
+is(CSS.escape('\x20\x21\x78\x79'), '\\ \\!xy', "escapingFailed Char: \\x20\\x21\\x78\\x79");
+
+// astral symbol (U+1D306 TETRAGRAM FOR CENTRE)
+is(CSS.escape('\uD834\uDF06'), '\uD834\uDF06', "escapingFailed Char:\\uD834\\uDF06");
+// lone surrogates
+is(CSS.escape('\uDF06'), '\uDF06', "escapingFailed Char: \\uDF06");
+is(CSS.escape('\uD834'), '\uD834', "escapingFailed Char: \\uD834");
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_css_function_mismatched_parenthesis.html b/layout/style/test/test_css_function_mismatched_parenthesis.html
new file mode 100644
index 0000000000..e7e78cc545
--- /dev/null
+++ b/layout/style/test/test_css_function_mismatched_parenthesis.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=897094
+
+This test verifies that:
+(1) Mismatched parentheses in a CSS function prevent parsing of subsequent CSS
+properties.
+(2) Properly matched parentheses do not prevent parsing of subsequent CSS
+properties.
+-->
+<head>
+  <title>Test for Bug 897094</title>
+  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
+  <script src="/tests/SimpleTest/SimpleTest.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=897094">Mozilla Bug 897094</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  <div id="target"></div>
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 897094 **/
+function check_parens(declaration, parens_are_balanced)
+{
+  var element = document.getElementById("target");
+  element.setAttribute("style",
+                       "background-color: " + (parens_are_balanced ? "red" : "green") + "; " +
+                       declaration + "; " +
+                       "background-color: " + (parens_are_balanced ? "green" : "red") + "; ");
+  var resultColor = element.style.getPropertyValue("background-color");
+  is(resultColor, "green", "parenthesis balancing within " + declaration);
+}
+
+check_parens("transform: scale()", true);
+check_parens("transform: scale(", false);
+check_parens("transform: scale(,)", true);
+check_parens("transform: scale(,", false);
+check_parens("transform: scale(1)", true);
+check_parens("transform: scale(1", false);
+check_parens("transform: scale(1,)", true);
+check_parens("transform: scale(1,", false);
+check_parens("transform: scale(1,1)", true);
+check_parens("transform: scale(1,1", false);
+check_parens("transform: scale(1,1,)", true);
+check_parens("transform: scale(1,1,", false);
+check_parens("transform: scale(1,1,1)", true);
+check_parens("transform: scale(1,1,1", false);
+check_parens("transform: scale(1,1,1,)", true);
+check_parens("transform: scale(1,1,1,", false);
+check_parens("transform: scale(1px)", true);
+check_parens("transform: scale(1px", false);
+check_parens("transform: scale(1px,)", true);
+check_parens("transform: scale(1px,", false);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_css_loader_crossorigin_data_url.html b/layout/style/test/test_css_loader_crossorigin_data_url.html
new file mode 100644
index 0000000000..67105d61f0
--- /dev/null
+++ b/layout/style/test/test_css_loader_crossorigin_data_url.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for handling of 'crossorigin' attribute on CSS link with data: URL</title>
+<link id="testlink" crossorigin rel="stylesheet" href="data:text/css,%23someuniqueidhere{display:none}">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<div id="someuniqueidhere"></div>
+<script>
+  var t = async_test("link@crossorigin with data: href");
+  window.addEventListener("load", t.step_func_done(function() {
+    assert_equals(getComputedStyle(document.getElementById("someuniqueidhere")).display,
+                  "none", "sheet should be applied");
+    assert_equals(document.getElementById("testlink").sheet.cssRules[0].style.display,
+                  "none", "should be able to read data from the sheet");
+  }));
+</script>
diff --git a/layout/style/test/test_css_parse_error_smoketest.html b/layout/style/test/test_css_parse_error_smoketest.html
new file mode 100644
index 0000000000..96d8edce3a
--- /dev/null
+++ b/layout/style/test/test_css_parse_error_smoketest.html
@@ -0,0 +1,160 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test for CSS parser reporting parsing errors with expected precision</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<style id="testbench"></style>
+<script>
+  SpecialPowers.wrap(window).docShell.cssErrorReportingEnabled = true;
+  // Tests that apply to all types of style sheets
+  var tests = [
+    {
+      css: "@unknown {}",
+      error: "Unrecognized at-rule or error parsing at-rule ‘@unknown’.",
+    }, {
+      css: "x { color: invalid; }",
+      error: "Expected color but found ‘invalid’.  Error in parsing value for ‘color’.  Declaration dropped.",
+      cssSelectors: "x",
+    }, {
+      css: "x { filter: alpha(foo); }",
+      error: "Expected ‘none’, URL, or filter function but found ‘alpha(’.  Error in parsing value for ‘filter’.  Declaration dropped.",
+      cssSelectors: "x",
+    }, {
+      css: "x { color: red; abc; }",
+      error: "Unknown property ‘abc;’.  Declaration dropped.",
+      cssSelectors: "x",
+    }, {
+      css: "x { filter: 5; }",
+      error: "Expected ‘none’, URL, or filter function but found ‘5’.  Error in parsing value for ‘filter’.  Declaration dropped.",
+      cssSelectors: "x",
+    }, {
+      css: "::unknown {}",
+      error: "Unknown pseudo-class or pseudo-element ‘unknown’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: ":unknown {}",
+      error: "Unknown pseudo-class or pseudo-element ‘unknown’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "::5 {}",
+      error: "Expected identifier for pseudo-class or pseudo-element but found ‘5’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: ": {}",
+      error: "Expected identifier for pseudo-class or pseudo-element but found ‘ ’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "x[a.]{}",
+      error: "Unexpected token in attribute selector: ‘.’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "x[*a]{}",
+      error: "Expected ‘|’ but found ‘a’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "x[a=5]{}",
+      error: "Expected identifier or string for value in attribute selector but found ‘5’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "x[$] {}",
+      error: "Expected attribute name or namespace but found ‘$’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "a[|5] {}",
+      error: "Expected identifier for attribute name but found ‘5’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "a[x|] {}",
+      error: "Unknown namespace prefix ‘x’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "x| {}",
+      error: "Unknown namespace prefix ‘x’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "a> {}",
+      error: "Dangling combinator.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "~ {}",
+      error: "Selector expected.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "| {}",
+      error: "Expected element name or ‘*’ but found ‘ ’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: ". {}",
+      error: "Expected identifier for class selector but found ‘ ’.  Ruleset ignored due to bad selector.",
+    }, {
+      css: ":not() {}",
+      error: "Selector expected.  Ruleset ignored due to bad selector.",
+    }, {
+      css: "* { -webkit-text-size-adjust: 100% }",
+      error: "Error in parsing value for ‘-webkit-text-size-adjust’.  Declaration dropped.",
+      cssSelectors: "*",
+    }, {
+      css: "@media (totally-unknown-feature) {}",
+      error: "Expected media feature name but found ‘totally-unknown-feature’.",
+    }, {
+      css: "@media \"foo\" {}",
+      error: "Unexpected token ‘\"foo\"’ in media list.",
+    }, {
+      css: "@media (min-width) {}",
+      error: "Media features with min- or max- must have a value.",
+    }, {
+      css: "@media (min-width >= 3px) {}",
+      error: "Unexpected operator in media list.",
+    }, {
+      css: "@media (device-height: three) {}",
+      error: "Found invalid value for media feature.",
+    }, {
+      css: "@media (min-width: foo) {}",
+      error: "Found invalid value for media feature.",
+    }, {
+      css: "@media (min-resolution: 2) {}",
+      error: "Found invalid value for media feature.",
+    }, {
+      css: "@media (min-monochrome: 1.1) {}",
+      error: "Found invalid value for media feature.",
+    }, {
+      css: "@media (min-aspect-ratio: 1 invalid) {}",
+      error: "Unexpected token ‘invalid’ in media list.",
+    }, {
+      css: "@media (min-aspect-ratio: 1 / invalid) {}",
+      error: "Found invalid value for media feature.",
+    }, {
+      css: "@media (orientation: invalid-orientation-value) {}",
+      error: "Found invalid value for media feature.",
+    }, {
+      css: "a, .b, #c { unknown: invalid; }",
+      error: "Unknown property ‘unknown’.  Declaration dropped.",
+      cssSelectors: "a, .b, #c"
+    },
+    {
+      css: ":host:hover { color: red; }",
+      error: ":host selector in ‘:host:hover’ is not featureless and will never match. Maybe you intended to use :host()?"
+    },
+  ];
+
+  // Tests that apply only to constructed style sheets
+  var constructedSheetTests = [
+    {
+      css: '@import url("sheet.css");',
+      error: "@import rules are not yet valid in constructed stylesheets."
+    }
+  ];
+
+  function assertMessages(messages, action) {
+    return new Promise(resolve => {
+      SimpleTest.expectConsoleMessages(action, messages, resolve);
+    });
+  }
+
+  async function runTests() {
+    for (let {css, cssSelectors = "", error} of tests) {
+      let messages = [ { cssSelectors, errorMessage: error } ];
+      await assertMessages(messages, () => { testbench.innerHTML = css });
+      await assertMessages(messages, () => { new CSSStyleSheet().replaceSync(css) });
+      await assertMessages(messages, async () => { await new CSSStyleSheet().replace(css) });
+    }
+    for (let {css, cssSelectors = "", error} of constructedSheetTests) {
+      let messages = [ { cssSelectors, errorMessage: error } ];
+      await assertMessages(messages, () => { new CSSStyleSheet().replaceSync(css) });
+      await assertMessages(messages, async () => { await new CSSStyleSheet().replace(css) });
+    }
+  }
+
+  add_task(runTests);
+
+</script>
diff --git a/layout/style/test/test_css_supports.html b/layout/style/test/test_css_supports.html
new file mode 100644
index 0000000000..a6b1e8d303
--- /dev/null
+++ b/layout/style/test/test_css_supports.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=779917
+-->
+<head>
+  <title>Test for Bug 779917</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=779917">Mozilla Bug 779917</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 779917 **/
+
+function runTest()
+{
+  var passingConditions = [
+    "color: green",
+    "(color: green)",
+    "((color: green))",
+    "(color: green !important)",
+    "(color: rainbow) or (color: green)",
+    "(color: green) or (color: rainbow)",
+    "(color: green) and (color: blue)",
+    "(color: rainbow) or (color: iridescent) or (color: green)",
+    "(color: red) and (color: green) and (color: blue)",
+    "(color:green)",
+    "not (color: rainbow)",
+    "not (not (color: green))",
+    "(unknown:) or (color: green)",
+    "(unknown) or (color: green)",
+    "(font: 16px serif)",
+    "(color:) or (color: green)",
+    "not (@page)",
+    "not ({ something @with [ balanced ] brackets })",
+    "an-extension(of some kind) or (color: green)",
+    "not ()",
+    "( Font:  20px serif ! Important) ",
+    "(color: /* comment */ green)",
+    "(/* comment */ color: green)",
+    "(color: green /* comment */)",
+    "(color: green) /* comment */",
+    "/* comment */ (color: green)",
+    "(color /* comment */: green)",
+    "(color: green) /* unclosed comment",
+    "(color: green",
+    "(((((((color: green",
+    "(font-family: 'Helvetica"
+  ];
+
+  var failingConditions = [
+    "(color: rainbow)",
+    "(color: rainbow) and (color: green)",
+    "(color: blue) and (color: rainbow)",
+    "(color: green) and (color: green) or (color: green)",
+    "(color: green) or (color: green) and (color: green)",
+    "not not (color: green)",
+    "not (color: rainbow) and not (color: iridescent)",
+    "not (color: rainbow) or (color: green)",
+    "(not (color: rainbow) or (color: green))",
+    "(unknown: green)",
+    "not ({ something @with (unbalanced brackets })",
+    "(color: green) or an-extension(that is [unbalanced)",
+    "not(unknown: unknown)",
+    "(color: green) or(color: blue)",
+    "(color: green;)",
+    "(font-family: 'Helvetica\n",
+    "(font-family: 'Helvetica\n')",
+    "()",
+    ""
+  ];
+
+  var passingDeclarations = [
+    ["color", "green"],
+    ["color", " green "],
+    ["Color", "Green"],
+    ["color", "green /* comment */"],
+    ["color", "/* comment */ green"],
+    ["color", "green /* unclosed comment"],
+    ["font", "16px serif"],
+    ["font", "16px /* comment */ serif"],
+    ["font", "16px\nserif"],
+    ["color", "\\0067reen"]
+  ];
+
+  var failingDeclarations = [
+    ["color ", "green"],
+    ["color", "rainbow"],
+    ["color", "green green"],
+    ["color", "green !important"],
+    ["\\0063olor", "green"],
+    ["/* comment */color", "green"],
+    ["color/* comment */", "green"],
+    ["font-family", "'Helvetica\n"],
+    ["font-family", "'Helvetica\n'"],
+    ["color", "green;"],
+    ["color", ""],
+    ["unknown", "unknown"],
+    ["", "green"],
+    ["", ""]
+  ];
+
+  passingConditions.forEach(function(aCondition) {
+    is(CSS.supports(aCondition), true, "CSS.supports returns true for passing condition \"" + aCondition + "\"");
+  });
+
+  failingConditions.forEach(function(aCondition) {
+    is(CSS.supports(aCondition), false, "CSS.supports returns false for failing condition \"" + aCondition + "\"");
+  });
+
+  passingDeclarations.forEach(function(aDeclaration) {
+    is(CSS.supports(aDeclaration[0], aDeclaration[1]), true, "CSS.supports returns true for supported declaration \"" + aDeclaration.join(":") + "\"");
+  });
+
+  failingDeclarations.forEach(function(aDeclaration) {
+    is(CSS.supports(aDeclaration[0], aDeclaration[1]), false, "CSS.supports returns false for unsupported declaration \"" + aDeclaration.join(":") + "\"");
+  });
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+runTest();
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_css_supports_variables.html b/layout/style/test/test_css_supports_variables.html
new file mode 100644
index 0000000000..7efc14a4fc
--- /dev/null
+++ b/layout/style/test/test_css_supports_variables.html
@@ -0,0 +1,247 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=773296
+-->
+<head>
+  <title>Test for Bug 773296</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=773296">Mozilla Bug 773296</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 773296 **/
+
+function runTest()
+{
+  var passingConditions = [
+    "(color:var(--a))",
+    "(color: var(--a))",
+    "(color: var(--a) )",
+    "(color: var( --a ) )",
+    "(color: var(--a, ))",
+    "(color: var(--a,/**/a))",
+    "(color: var(--a,))",
+    "(color: var(--a,/**/))",
+    "(color: 1px var(--a))",
+    "(color: var(--a) 1px)",
+    "(color: something 3px url(whereever) calc(var(--a) + 1px))",
+    "(color: var(--a) !important)",
+    "(color: var(--a)var(--b))",
+    "(color: var(--a, var(--b, var(--c, black))))",
+    "(color: var(--a) <!--)",
+    "(color: --> var(--a))",
+    "(color: { [ var(--a) ] })",
+    "(color: [;] var(--a))",
+    "(color: var(--a,(;)))",
+    "(color: VAR(--a))",
+    "(color: var(--0))",
+    "(color: var(--\\30))",
+    "(color: var(--\\d800))",
+    "(color: var(--\\ffffff))",
+    "(color: var(--a",
+    "(color: var(--a , ",
+    "(color: var(--a, ",
+    "(color: var(--a, var(--b",
+    "(color: var(--a /* unclosed comment",
+    "(color: var(--a, '",
+    "(color: var(--a, '\\",
+    "(color: var(--a, \\",
+
+    "(--a:var(--b))",
+    "(--a: var(--b))",
+    "(--a: var(--b) )",
+    "(--a: var( --b ) )",
+    "(--a: var(--b, ))",
+    "(--a: var(--b,/**/a))",
+    "(--a: var(--b,))",
+    "(--a: var(--b,/**/))",
+    "(--a: 1px var(--b))",
+    "(--a: var(--b) 1px)",
+    "(--a: something 3px url(whereever) calc(var(--b) + 1px))",
+    "(--a: var(--b) !important)",
+    "(--a: var(--b)var(--b))",
+    "(--a: var(--b, var(--c, var(--d, black))))",
+    "(--a: var(--b) <!--)",
+    "(--a: --> var(--b))",
+    "(--a: { [ var(--b) ] })",
+    "(--a: [;] var(--b))",
+    "(--a: )",
+    "(--a:var(--a))",
+    "(--0: a)",
+    "(--\\30: a)",
+    "(--\\61: a)",
+    "(--\\d800: a)",
+    "(--\\ffffff: a)",
+    "(--\0: 1)",
+    "(--a: ",
+    "(--a: /* unclosed comment",
+    "(--a: var(--b",
+    "(--a: var(--b, ",
+    "(--a: var(--b, var(--c",
+    "(--a: [{(((",
+    "(--a: '",
+    "(--a: '\\",
+    "(--a: \\",
+    "(--a:)",
+  ];
+
+  var failingConditions = [
+    "(color: var(--a,!))",
+    "(color: var(--a,!important))",
+    "(color: var(--a) !important !important)",
+    "(color: var(--a,;))",
+    "(color: var(--a);)",
+    "(color: var(1px))",
+    "(color: var(--a)))",
+    "(color: var(--a) \"\n",
+    "(color: var(--a) url(\"\n",
+    "(color: var(a))",
+    "(color: var(--",
+    "(color: var(--))",
+
+    "(--a: var(--b,!))",
+    "(--a: var(--b,!important))",
+    "((--a: var(--b) !important !important))",
+    "(--a: var(--b,;))",
+    "(--a: var(--b);)",
+    "(--a: var(1px))",
+    "(--a: a))",
+    "(--a: \"\n",
+    "(--a: url(\"\n",
+    "(--a: var(a))",
+    "(--: a)",
+  ];
+
+  var passingDeclarations = [
+    ["color", "var(--a)"],
+    ["color", " var(--a)"],
+    ["color", "var(--a) "],
+    ["color", "var( --a ) "],
+    ["color", "var(--a, )"],
+    ["color", "var(--a,/**/a)"],
+    ["color", "1px var(--a)"],
+    ["color", "var(--a) 1px"],
+    ["color", "something 3px url(whereever) calc(var(--a) + 1px)"],
+    ["color", "var(--a)var(--b)"],
+    ["color", "var(--a, var(--b, var(--c, black)))"],
+    ["color", "var(--a) <!--"],
+    ["color", "--> var(--a)"],
+    ["color", "{ [ var(--a) ] }"],
+    ["color", "[;] var(--a)"],
+    ["color", "var(--a,(;))"],
+    ["color", "VAR(--a)"],
+    ["color", "var(--0)"],
+    ["color", "var(--\\30)"],
+    ["color", "var(--\\d800)"],
+    ["color", "var(--\\ffffff)"],
+    ["color", "var(--a"],
+    ["color", "var(--a , "],
+    ["color", "var(--a, "],
+    ["color", "var(--a, var(--b"],
+    ["color", "var(--a /* unclosed comment"],
+    ["color", "var(--a, '"],
+    ["color", "var(--a, '\\"],
+    ["color", "var(--a, \\"],
+    ["color", "var(--a,)"],
+    ["color", "var(--a,/**/)"],
+
+    ["--a", " var(--b)"],
+    ["--a", "var(--b)"],
+    ["--a", "var(--b) "],
+    ["--a", "var( --b ) "],
+    ["--a", "var(--b, )"],
+    ["--a", "var(--b,/**/a)"],
+    ["--a", "var(--b,)"],
+    ["--a", "var(--b,/**/)"],
+    ["--a", "1px var(--b)"],
+    ["--a", "var(--b) 1px"],
+    ["--a", "something 3px url(whereever) calc(var(--b) + 1px)"],
+    ["--a", "var(--b)var(--b)"],
+    ["--a", "var(--b, var(--c, var(--d, black)))"],
+    ["--a", "var(--b) <!--"],
+    ["--a", "--> var(--b)"],
+    ["--a", "{ [ var(--b) ] }"],
+    ["--a", "[;] var(--b)"],
+    ["--a", " "],
+    ["--a", ""],
+    ["--a", "var(--a)"],
+    ["--0", "a"],
+    ["--\\30", "a"],
+    ["--\\61", "a"],
+    ["--\\d800", "a"],
+    ["--\\ffffff", "a"],
+    ["--\0", "a"],
+    ["--\ud800", "a"],
+    ["--a", "a /* unclosed comment"],
+    ["--a", "var(--b"],
+    ["--a", "var(--b, "],
+    ["--a", "var(--b, var(--c"],
+    ["--a", "[{((("],
+    ["--a ", "a"],
+    ["--a ", "'"],
+    ["--a ", "'\\"],
+    ["--a ", "\\"],
+  ];
+
+  var failingDeclarations = [
+    ["color", "var(--a,!)"],
+    ["color", "var(--a,!important)"],
+    ["color", "var(--a,;)"],
+    ["color", "var(--a);"],
+    ["color", "var(1px)"],
+    ["color", "var(--a))"],
+    ["color", "var(--a) \"\n"],
+    ["color", "var(--a) url(\"\n"],
+    ["color", "var(--a) !important"],
+    ["color", "var(--a) !important !important"],
+    ["color", "var(a)"],
+    ["color", "var(--"],
+
+    ["--a", "var(--b,!)"],
+    ["--a", "var(--b,!important)"],
+    ["--a", "var(--b) !important !important"],
+    ["--a", "var(--b,;)"],
+    ["--a", "var(--b);"],
+    ["--a", "var(1px)"],
+    ["(VAR-a", "a"],
+    ["--a", "a)"],
+    ["--a", "\"\n"],
+    ["--a", "url(\"\n"],
+    ["--a", "var(--b))"],
+    ["--a", "var(b)"],
+    ["--", "a"],
+  ];
+
+  passingConditions.forEach(function(aCondition) {
+    is(CSS.supports(aCondition), true, "CSS.supports returns true for passing condition \"" + aCondition + "\"");
+  });
+
+  failingConditions.forEach(function(aCondition) {
+    is(CSS.supports(aCondition), false, "CSS.supports returns false for failing condition \"" + aCondition + "\"");
+  });
+
+  passingDeclarations.forEach(function(aDeclaration) {
+    is(CSS.supports(aDeclaration[0], aDeclaration[1]), true, "CSS.supports returns true for supported declaration \"" + aDeclaration.join(":") + "\"");
+  });
+
+  failingDeclarations.forEach(function(aDeclaration) {
+    is(CSS.supports(aDeclaration[0], aDeclaration[1]), false, "CSS.supports returns false for unsupported declaration \"" + aDeclaration.join(":") + "\"");
+  });
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+runTest();
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_cue_restrictions.html b/layout/style/test/test_cue_restrictions.html
new file mode 100644
index 0000000000..c5b3cf3bda
--- /dev/null
+++ b/layout/style/test/test_cue_restrictions.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test for ::cue property restrictions.</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="property_database.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
+<style id="s"></style>
+<video id="test"></video>
+<video id="control"></video>
+<script>
+const test = getComputedStyle($("test"), "::cue");
+const control = getComputedStyle($("control"), "::cue");
+
+for (const prop in gCSSProperties) {
+  const info = gCSSProperties[prop];
+  if (info.type == CSS_TYPE_TRUE_SHORTHAND)
+    continue;
+
+  let prereqs = "";
+  if (info.prerequisites)
+    for (let name in info.prerequisites)
+      prereqs += `${name}: ${info.prerequisites[name]}; `;
+
+  $("s").textContent = `
+    #control::cue { ${prop}: ${info.initial_values[0]}; ${prereqs} }
+    #test::cue { ${prop}: ${info.other_values[0]}; ${prereqs} }
+  `;
+
+  (info.applies_to_cue ? isnot : is)(
+    get_computed_value(test, prop),
+    get_computed_value(control, prop),
+    `${prop} should ${info.applies_to_cue ? "" : "not "}apply to ::cue`);
+}
+</script>
diff --git a/layout/style/test/test_custom_content_inheritance.html b/layout/style/test/test_custom_content_inheritance.html
new file mode 100644
index 0000000000..ccbce86574
--- /dev/null
+++ b/layout/style/test/test_custom_content_inheritance.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>Test for custom content inheritance</title>
+<style>
+  html { color: red !important; }
+</style>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script>
+onload = function() {
+  try {
+    let doc = SpecialPowers.wrap(document);
+    let div = doc.createElement('div');
+    div.id = "test-id";
+    ok(!!doc.insertAnonymousContent,
+       "Must have the insertAnonymousContent API");
+    let content = doc.insertAnonymousContent(div);
+    ok(!!content, "Must have anon content");
+    isnot(content.getComputedStylePropertyValue("test-id", "color"),
+          getComputedStyle(document.documentElement).color,
+          "Custom anon content shouldn't inherit from the root element");
+  } catch(e) {
+    ok(false, "Threw: " + e);
+  }
+  SimpleTest.finish();
+};
+SimpleTest.waitForExplicitFinish();
+</script>
diff --git a/layout/style/test/test_default_bidi_css.html b/layout/style/test/test_default_bidi_css.html
new file mode 100644
index 0000000000..9033c9b6a7
--- /dev/null
+++ b/layout/style/test/test_default_bidi_css.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug </title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for default bidi css  **/
+function styleOf(name, attributes) {
+    var element = document.createElement(name);
+    for (var name in attributes) {
+        var value = attributes[name];
+        element.setAttribute(name, value);
+    }
+    document.body.appendChild(element);
+    return getComputedStyle(element);
+}
+
+var tests = [
+    ['div', {}, 'ltr', 'isolate'],
+    ['div', {'dir': 'ltr'}, 'ltr', 'isolate'],
+    ['div', {'dir': 'rtl'}, 'rtl', 'isolate'],
+    ['div', {'dir': 'auto'}, 'ltr', 'isolate'],
+    ['div', {'dir': ''}, 'ltr', 'isolate'],
+
+    ['span', {}, 'ltr', 'normal'],
+    ['span', {'dir': 'ltr'}, 'ltr', 'isolate'],
+    ['span', {'dir': 'rtl'}, 'rtl', 'isolate'],
+    ['span', {'dir': 'auto'}, 'ltr', 'isolate'],
+    ['span', {'dir': ''}, 'ltr', 'isolate'],
+
+    ['bdi', {}, 'ltr', 'isolate'],
+    ['bdi', {'dir': 'ltr'}, 'ltr', 'isolate'],
+    ['bdi', {'dir': 'rtl'}, 'rtl', 'isolate'],
+    ['bdi', {'dir': 'auto'}, 'ltr', 'isolate'],
+    ['bdi', {'dir': ''}, 'ltr', 'isolate'],
+
+    ['output', {}, 'ltr', 'isolate'],
+    ['output', {'dir': 'ltr'}, 'ltr', 'isolate'],
+    ['output', {'dir': 'rtl'}, 'rtl', 'isolate'],
+    ['output', {'dir': 'auto'}, 'ltr', 'isolate'],
+    ['output', {'dir': ''}, 'ltr', 'isolate'],
+
+    ['bdo', {}, 'ltr', 'isolate-override'],
+    ['bdo', {'dir': 'ltr'}, 'ltr', 'isolate-override'],
+    ['bdo', {'dir': 'rtl'}, 'rtl', 'isolate-override'],
+    ['bdo', {'dir': 'auto'}, 'ltr', 'isolate-override'],
+    ['bdo', {'dir': ''}, 'ltr', 'isolate-override'],
+
+    ['textarea', {}, 'ltr', 'normal'],
+    ['textarea', {'dir': 'ltr'}, 'ltr', 'isolate'],
+    ['textarea', {'dir': 'rtl'}, 'rtl', 'isolate'],
+    ['textarea', {'dir': 'auto'}, 'ltr', 'plaintext'],
+    ['textarea', {'dir': ''}, 'ltr', 'isolate'],
+
+    ['pre', {}, 'ltr', 'isolate'],
+    ['pre', {'dir': 'ltr'}, 'ltr', 'isolate'],
+    ['pre', {'dir': 'rtl'}, 'rtl', 'isolate'],
+    ['pre', {'dir': 'auto'}, 'ltr', 'plaintext'],
+    ['pre', {'dir': ''}, 'ltr', 'isolate'],
+].forEach(function (test) {
+    var style = styleOf(test[0], test[1]);
+    is(style.direction, test[2], "default value for direction");
+    is(style.unicodeBidi, test[3], "default value for unicode-bidi");
+});
+
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_default_computed_style.html b/layout/style/test/test_default_computed_style.html
new file mode 100644
index 0000000000..56b5863935
--- /dev/null
+++ b/layout/style/test/test_default_computed_style.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=800983
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 800983</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+    #display::before { content: "Visible"; display: block }
+    #display {
+      display: inline;
+      margin-top: 0;
+      background: yellow;
+      color: blue;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=800983">Mozilla Bug 800983</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 800983 **/
+var cs = getComputedStyle($("display"));
+var cs_pseudo = getComputedStyle($("display"), "::before")
+
+var cs_default = getDefaultComputedStyle($("display"));
+var cs_default_pseudo = getDefaultComputedStyle($("display"), "::before");
+
+// Sanity checks for normal computed style
+is(cs.display, "inline", "We have inline display");
+is(cs.marginTop, "0px", "We have 0 margin");
+is(cs.backgroundColor, "rgb(255, 255, 0)", "We have yellow background");
+is(cs.color, "rgb(0, 0, 255)", "We have blue text");
+is(cs_pseudo.content, '"Visible"', "We have some content");
+is(cs_pseudo.display, "block", "Our ::before is block");
+
+// And now our actual tests
+is(cs_default.display, "block", "We have block display by default");
+is(cs_default.marginTop, "16px", "We have 16px margin by default");
+is(cs_default.backgroundColor, "rgba(0, 0, 0, 0)",
+   "We have transparent background by default");
+is(cs_default.color, "rgb(0, 0, 0)", "We have black text by default");
+is(cs_default_pseudo.content, "none", "We have no content by default");
+is(cs_default_pseudo.display, "inline", "Our ::before is inline by default");
+
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_descriptor_storage.html b/layout/style/test/test_descriptor_storage.html
new file mode 100644
index 0000000000..7177737ffb
--- /dev/null
+++ b/layout/style/test/test_descriptor_storage.html
@@ -0,0 +1,119 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test for parsing, storage, and serialization of CSS @font-face descriptor values</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="descriptor_database.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none">
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for parsing, storage, and serialization of CSS @font-face descriptor values **/
+
+/*
+ * For explanation of some of the more interesting tests here, see the comment
+ * in test_value_storage.html .
+ */
+
+var gStyleElement = document.createElement("style");
+gStyleElement.setAttribute("type", "text/css");
+document.getElementsByTagName("head")[0].appendChild(gStyleElement);
+var gSheet = gStyleElement.sheet;
+gSheet.insertRule("@font-face { }", 0);
+var gRule = gSheet.cssRules[0];
+var gDeclaration = gRule.style;
+
+function fake_set_property(descriptor, value) {
+  gSheet.deleteRule(0);
+  gSheet.insertRule("@font-face { " + descriptor + ": " + value + "}", 0);
+  gRule = gSheet.cssRules[0];
+  gDeclaration = gRule.style;
+}
+
+function xfail_parse(descriptor, value) {
+  switch (descriptor) {
+    case "src":
+      // not clear whether this is an error or not, so mark todo for now
+      return value == "local(serif)";
+  }
+  return false;
+}
+
+function test_descriptor(descriptor)
+{
+  var info = gCSSFontFaceDescriptors[descriptor];
+
+  function test_value(value) {
+//    // We don't implement SetProperty yet (bug 443978).
+//    gDeclaration.setProperty(descriptor, value, "");
+    fake_set_property(descriptor, value);
+
+    var idx;
+
+    var step1val = gDeclaration.getPropertyValue(descriptor);
+    var step1ser = gDeclaration.cssText;
+
+    var func = xfail_parse(descriptor, value) ? todo_isnot : isnot;
+    func(step1val, "", "setting '" + value + "' on '" + descriptor + "'");
+
+    // We don't care particularly about the whitespace or the placement of
+    // semicolons, but for simplicity we'll test the current behavior.
+    var expected_serialization = "";
+    if (step1val != "")
+      expected_serialization = descriptor + ": " + step1val + "; ";
+    is(step1ser, expected_serialization,
+       "serialization should match descriptor value");
+
+    gDeclaration.removeProperty(descriptor);
+//    // We don't implement SetProperty yet (bug 443978).
+//    gDeclaration.setProperty(descriptor, step1val, "");
+    fake_set_property(descriptor, step1val);
+
+    is(gDeclaration.getPropertyValue(descriptor), step1val,
+       "parse+serialize should be idempotent for '" +
+         descriptor + ": " + value + "'");
+
+    gDeclaration.removeProperty(descriptor);
+  }
+
+  var idx;
+  for (idx in info.values)
+    test_value(info.values[idx]);
+}
+
+// To avoid triggering the slow script dialog, we have to test one
+// descriptor at a time.
+SimpleTest.waitForExplicitFinish();
+function runTest() {
+  var descs = [];
+  for (var desc in gCSSFontFaceDescriptors)
+    descs.push(desc);
+  descs = descs.reverse();
+  function do_one() {
+    if (descs.length == 0) {
+      SimpleTest.finish();
+      return;
+    }
+    test_descriptor(descs.pop());
+    SimpleTest.executeSoon(do_one);
+  }
+  SimpleTest.executeSoon(do_one);
+}
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(5);
+
+SpecialPowers.pushPrefEnv({ set: [["layout.css.font-display.enabled", true]] },
+                          runTest);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_descriptor_syntax_errors.html b/layout/style/test/test_descriptor_syntax_errors.html
new file mode 100644
index 0000000000..bf73b15b64
--- /dev/null
+++ b/layout/style/test/test_descriptor_syntax_errors.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test that we reject syntax errors listed in descriptor_database.js</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="descriptor_database.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none">
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+var gStyleElement = document.createElement("style");
+gStyleElement.setAttribute("type", "text/css");
+document.getElementsByTagName("head")[0].appendChild(gStyleElement);
+var gSheet = gStyleElement.sheet;
+gSheet.insertRule("@font-face { }", 0);
+var gRule = gSheet.cssRules[0];
+var gDeclaration = gRule.style;
+
+function fake_set_property(descriptor, value) {
+  gSheet.deleteRule(0);
+  gSheet.insertRule("@font-face { " + descriptor + ": " + value + "}", 0);
+  gRule = gSheet.cssRules[0];
+  gDeclaration = gRule.style;
+}
+
+for (var descriptor in gCSSFontFaceDescriptors) {
+  var info = gCSSFontFaceDescriptors[descriptor];
+  for (var idx in info.invalid_values) {
+    var badval = info.invalid_values[idx];
+
+//    // We don't implement SetProperty yet (bug 443978).
+//    gDeclaration.setProperty(descriptor, badval, "");
+    fake_set_property(descriptor, badval);
+
+    is(gDeclaration.getPropertyValue(descriptor), "",
+       "invalid value '" + badval + "' not accepted for '" + descriptor +
+       "' descriptor");
+
+    gDeclaration.removeProperty(descriptor);
+  }
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_display_mode.html b/layout/style/test/test_display_mode.html
new file mode 100644
index 0000000000..2fbf78bdb4
--- /dev/null
+++ b/layout/style/test/test_display_mode.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1648157
+-->
+<head>
+  <title>Test for displayMode</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="property_database.js"></script>
+  <link rel="stylesheet" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<p id="display">
+  <iframe id="iframe" src="http://example.org/tests/layout/style/test/media_queries_iframe2.html"></iframe>
+</p>
+<pre id="test">
+<script class="testbody">
+let iframe = document.getElementById("iframe");
+
+// Keep in sync with media_queries_iframe2.html
+const DISPLAY_MODES_BACKGROUND_COLOR = {
+  'minimal-ui': 'rgb(255, 0, 0)',
+  'standalone': 'rgb(0, 128, 0)',
+  'fullscreen': 'rgb(0, 0, 255)',
+  'browser':    'rgb(255, 255, 0)'
+};
+const DISPLAY_MODES = Object.keys(DISPLAY_MODES_BACKGROUND_COLOR);
+
+SimpleTest.waitForExplicitFinish();
+
+window.addEventListener("load", async (event) => {
+  const wrappedWindow = SpecialPowers.wrap(window);
+
+  function setDisplayMode(mode) {
+    wrappedWindow.browsingContext.top.displayMode = mode;
+  }
+
+  async function displayModeApplies(mode) {
+    let responsePromise = new Promise(resolve => {
+      window.addEventListener("message", e => {
+        resolve(e.data.backgroundColor);
+      }, { once: true });
+    });
+    iframe.contentWindow.postMessage('get-background-color', '*');
+    let response = await responsePromise;
+    let expected = DISPLAY_MODES_BACKGROUND_COLOR[mode];
+
+    info(`displayModeApplies: ${response} === ${expected}`);
+    return response === expected;
+  }
+
+  async function checkIfApplies(q, shouldApply) {
+    let message = shouldApply ? "should apply" : "should not apply";
+    is((await displayModeApplies(q)), shouldApply, `${q} ${message}`);
+  }
+
+  for (let currentMode of DISPLAY_MODES) {
+    setDisplayMode(currentMode);
+
+    for (let mode of DISPLAY_MODES) {
+      await checkIfApplies(mode, currentMode === mode);
+    }
+  }
+
+  SimpleTest.finish();
+});
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_dont_use_document_colors.html b/layout/style/test/test_dont_use_document_colors.html
new file mode 100644
index 0000000000..3355f8071e
--- /dev/null
+++ b/layout/style/test/test_dont_use_document_colors.html
@@ -0,0 +1,201 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test for preference not to use document colors</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+
+  #one, #three { background: blue; color: yellow; border: thin solid red; column-rule: 2px solid green; text-shadow: 2px 2px green; box-shadow: 3px 7px blue; }
+  #two { background: transparent; border: thin solid; }
+  #five, #six {border: thick solid red; border-inline-start-color:green; border-inline-end-color:blue}
+  #seven {
+    border: 3px solid;
+  }
+  #eight {
+    border: 10px solid transparent;
+    border-image: repeating-linear-gradient(45deg, blue, blue 1%, red 1%, red 8%) 10;
+  }
+  #nine {
+    border: 10px solid blue;
+    border-image: none;
+  }
+
+  #eleven {
+    background-color: transparent;
+  }
+
+  /* XXX also test rgba() */
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=58048">Mozilla Bug 58048</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=255411">Mozilla Bug 255411</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1430969">Mozilla Bug 1430969</a>
+<div id="display">
+
+<div id="one">Hello</div>
+<div id="two">Hello</div>
+<input id="three" type="button" value="Hello">
+<input id="four" type="button" value="Hello">
+<div id="five" dir="ltr">Hello</div>
+<div id="six" dir="rtl">Hello</div>
+<div id="seven">Hello</div>
+<div id="eight">I have a border-image</div>
+<div id="nine">I do not have a border-image</div>
+
+<input id="ten" type="button" value="Hello"><!-- Nothing should match this -->
+
+<button id="eleven">Hello</button>
+</div>
+<pre id="test">
+<script class="testbody">
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout('nsPresContext internally delays applying prefs using an nsITimer');
+
+var cs1 = getComputedStyle(document.getElementById("one"));
+var cs2 = getComputedStyle(document.getElementById("two"));
+var cs3 = getComputedStyle(document.getElementById("three"));
+var cs4 = getComputedStyle(document.getElementById("four"));
+var cs5 = getComputedStyle(document.getElementById("five"));
+var cs6 = getComputedStyle(document.getElementById("six"));
+var cs7 = getComputedStyle(document.getElementById("seven"));
+var cs8 = getComputedStyle(document.getElementById("eight"));
+var cs9 = getComputedStyle(document.getElementById("nine"));
+var cs10 = getComputedStyle(document.getElementById("ten"));
+var cs11 = getComputedStyle(document.getElementById("eleven"));
+
+function pushPrefEnvAndWait(args, cb) {
+  SpecialPowers.pushPrefEnv(args).then(cb)
+}
+
+pushPrefEnvAndWait({'set': [['browser.display.document_color_use', 1]]}, part1);
+
+function part1()
+{
+    isnot(cs1.backgroundColor, cs2.backgroundColor, "background-color applies");
+    isnot(cs1.color, cs2.color, "color applies");
+    isnot(cs1.borderTopColor, cs2.borderTopColor, "border-top-color applies");
+    isnot(cs1.borderRightColor, cs2.borderRightColor,
+          "border-right-color applies");
+    isnot(cs1.borderLeftColor, cs2.borderLeftColor,
+          "border-left-color applies");
+    isnot(cs1.borderBottomColor, cs2.borderBottomColor,
+          "border-top-color applies");
+    isnot(cs1.columnRuleColor, cs2.columnRuleColor,
+          "column-rule-color applies");
+    isnot(cs1.textShadow, cs2.textShadow,
+          "text-shadow applies");
+    isnot(cs1.boxShadow, cs2.boxShadow,
+          "box-shadow applies");
+    is(cs1.borderTopColor, cs3.borderTopColor, "border-top-color applies");
+    is(cs1.borderRightColor, cs3.borderRightColor,
+       "border-right-color applies");
+    is(cs1.borderLeftColor, cs3.borderLeftColor,
+       "border-left-color applies");
+    is(cs1.borderBottomColor, cs3.borderBottomColor, 
+       "border-top-color applies");
+    is(cs1.columnRuleColor, cs3.columnRuleColor,
+       "column-rule-color applies");
+    is(cs1.textShadow, cs3.textShadow,
+       "text-shadow applies");
+    is(cs1.boxShadow, cs3.boxShadow,
+       "box-shadow applies");
+    isnot(cs5.borderRightColor, cs2.borderRightColor,
+          "border-inline-end-color applies");
+    isnot(cs5.borderLeftColor, cs2.borderLeftColor,
+          "border-inline-start-color applies");
+    isnot(cs6.borderRightColor, cs2.borderRightColor,
+          "border-inline-start-color applies");
+    isnot(cs6.borderLeftColor, cs2.borderLeftColor,
+          "border-inline-end-color applies");
+    is(cs1.color, cs3.color, "color applies");
+    is(cs1.backgroundColor, cs3.backgroundColor, "background-color applies");
+    isnot(cs3.backgroundColor, cs4.backgroundColor, "background-color applies");
+    isnot(cs3.color, cs4.color, "color applies");
+    isnot(cs3.borderTopColor, cs4.borderTopColor, "border-top-color applies");
+    isnot(cs3.borderRightColor, cs4.borderRightColor,
+          "border-right-color applies");
+    isnot(cs3.borderLeftColor, cs4.borderLeftColor,
+          "border-left-color applies");
+    isnot(cs3.borderBottomColor, cs4.borderBottomColor,
+          "border-bottom-color applies");
+    isnot(cs8.borderImageSource, cs9.borderImageSource, "border-image-source applies");
+    pushPrefEnvAndWait({'set': [['browser.display.document_color_use', 2]]}, part2);
+}
+
+function toRGBA(c) {
+  return SpecialPowers.wrap(window).InspectorUtils.colorToRGBA(c, document);
+}
+
+function systemColor(c) {
+    let {r, g, b, a} = toRGBA(c);
+    if (a == 1)
+      return `rgb(${r}, ${g}, ${b})`;
+    // Match ColorComponentToFloat's max number of decimals (3), and remove trailing zeros.
+    let alphaString = a.toFixed(3);
+    if (alphaString.includes(".")) {
+      while (alphaString[alphaString.length - 1] == "0")
+        alphaString = alphaString.substring(0, alphaString.length - 1);
+    }
+    return `rgba(${r}, ${g}, ${b}, ${alphaString})`;
+}
+
+function part2()
+{
+    isnot(cs1.backgroundColor, cs2.backgroundColor, "background-color transparency preserved (opaque)");
+    is(toRGBA(cs2.backgroundColor).a, 0, "background-color transparency is preserved (transparent)");
+    is(cs1.color, cs2.color, "color is blocked");
+    is(cs1.borderTopColor, cs2.borderTopColor, "border-top-color is blocked");
+    is(cs1.borderRightColor, cs2.borderRightColor,
+       "border-right-color is blocked");
+    is(cs1.borderLeftColor, cs2.borderLeftColor,
+       "border-left-color is blocked");
+    is(cs5.borderRightColor, cs2.borderRightColor,
+       "border-inline-end-color is blocked");
+    is(cs5.borderLeftColor, cs2.borderLeftColor,
+       "border-inline-start-color is blocked");
+    is(cs6.borderRightColor, cs2.borderRightColor,
+       "border-inline-start-color is blocked");
+    is(cs6.borderLeftColor, cs2.borderLeftColor,
+       "border-inline-end-color is blocked");
+    is(cs1.borderBottomColor, cs2.borderBottomColor,
+       "border-bottom-color is blocked");
+    is(cs1.columnRuleColor, cs2.columnRuleColor,
+       "column-rule-color is blocked");
+    is(cs1.textShadow, cs2.textShadow,
+       "text-shadow is blocked");
+    is(cs1.boxShadow, cs2.boxShadow,
+       "box-shadow is blocked");
+    is(cs3.backgroundColor, cs10.backgroundColor, "background-color transparency preserved (opaque)");
+    is(cs3.color, cs10.color, "color is blocked");
+    is(cs3.borderTopColor, cs4.borderTopColor, "border-top-color is blocked");
+    is(cs3.borderRightColor, cs4.borderRightColor,
+       "border-right-color is blocked");
+    is(cs3.borderLeftColor, cs4.borderLeftColor,
+       "border-left-color is blocked");
+    is(cs3.borderBottomColor, cs4.borderBottomColor,
+       "border-bottom-color is blocked");
+    is(cs4.backgroundColor, systemColor("ButtonFace"), "background-color not broken on inputs");
+    is(cs4.color, systemColor("ButtonText"), "color not broken on inputs");
+    is(cs4.borderTopColor, systemColor("ThreeDLightShadow"), "border-top-color not broken on inputs");
+    is(cs4.borderRightColor, systemColor("ThreeDLightShadow"),
+       "border-right-color not broken on inputs");
+    is(cs4.borderLeftColor, systemColor("ThreeDLightShadow"),
+       "border-left-color not broken on inputs");
+    is(cs4.borderBottomColor, systemColor("ThreeDLightShadow"),
+       "border-bottom-color not broken on inputs");
+    is(cs8.borderImageSource, cs9.borderImageSource, "border-image-source is blocked");
+    is(toRGBA(cs11.backgroundColor).a, 0, "background-color transparency is preserved on buttons");
+
+    SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_dont_use_document_fonts.html b/layout/style/test/test_dont_use_document_fonts.html
new file mode 100644
index 0000000000..59bc6c6d62
--- /dev/null
+++ b/layout/style/test/test_dont_use_document_fonts.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<title>Test for preference to not use document fonts</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel='stylesheet' href='/resources/testharness.css'>
+<div id="content"></div>
+<script>
+const content = document.getElementById("content");
+
+// This is just a subset of browser.display.use_document_fonts.icon_font_allowlist
+// that we feel are worth double-checking via this test.  In particular:
+// * Chromium Bug Tracker and https://developers.google.com use "Material Icons"
+// * Google Translate and Google Timeline use "Material Icons Extended"
+// * https://fonts.google.com/icons uses "Material Symbols Outlined"
+// * Google Calendar and Google Contacts use "Google Material Icons"
+const kKnownLigatureIconFonts = "Material Icons, Material Icons Extended, " +
+      "Material Symbols Outlined, Google Material Icons";
+
+setup({explicit_done: true })
+
+content.style.fontFamily = "initial";
+const kInitialFamily = getComputedStyle(content).fontFamily;
+content.style.fontFamily = "";
+
+const kTests = [
+  {
+    specified: "monospace",
+    computed: "monospace",
+    description: "Single generic family should not be changed",
+  },
+  {
+    specified: "monospace, sans-serif",
+    computed: "monospace, sans-serif",
+    description: "Generic families should not be changed",
+  },
+  {
+    specified: "Courier, monospace",
+    computed: "monospace, Courier",
+    description: "Generics are preferred, but may still fall back to document fonts",
+  },
+  {
+    specified: "system-ui, sans-serif",
+    computed: "sans-serif, system-ui",
+    description: "system-ui is not prioritized",
+  },
+  {
+    specified: "Courier, something-else",
+    computed: `${kInitialFamily}, Courier, something-else`,
+    description: "Generic is prepended to the font-family if none is found",
+  },
+  {
+    specified: kKnownLigatureIconFonts + ", something-else, sans-serif",
+    computed: kKnownLigatureIconFonts + ", sans-serif, something-else",
+    description: "Known ligature-icon fonts remain ahead of the generic",
+  },
+  {
+    specified: "Material Icons, something-else, Material Symbols Outlined, sans-serif",
+    computed: "Material Icons, sans-serif, something-else, Material Symbols Outlined",
+    description: "Generic is moved ahead of the first non-allowlisted font",
+  },
+  {
+    specified: "Material Icons, something-else, Material Symbols Outlined",
+    computed: `Material Icons, ${kInitialFamily}, something-else, Material Symbols Outlined`,
+    description: "Default generic is inserted ahead of the first non-allowlisted font",
+  },
+  {
+    specified: "Material Icons, cursive, Material Symbols Outlined, serif",
+    computed: "Material Icons, serif, cursive, Material Symbols Outlined",
+    description: "cursive is not treated as a generic to be prioritized",
+  },
+  {
+    specified: "Material Icons, fantasy, Material Symbols Outlined",
+    computed: `Material Icons, ${kInitialFamily}, fantasy, Material Symbols Outlined`,
+    description: "fantasy is not treated as a generic to be prioritized",
+  },
+];
+
+let systemFont;
+
+// compute expectations while the pref is not active yet.
+test(function() {
+  for (const test of kTests) {
+    content.style.fontFamily = "";
+    content.style.fontFamily = test.computed;
+    assert_not_equals(content.style.fontFamily, "", `computed font ${test.computed} was invalid`);
+    test.expected = getComputedStyle(content).fontFamily;
+  }
+
+  content.style.font = "menu";
+  systemFont = getComputedStyle(content).fontFamily;
+  assert_not_equals(systemFont, "", `computed menu system font was invalid`);
+
+  content.style.font = "";
+}, "Sanity");
+
+function runTest({ specified, computed, description, expected }) {
+  test(function() {
+    content.style.fontFamily = "";
+    content.style.fontFamily = specified;
+    assert_equals(getComputedStyle(content).fontFamily, expected);
+  }, description);
+}
+
+(async function() {
+  await SpecialPowers.pushPrefEnv({'set': [['browser.display.use_document_fonts', 0]]});
+  for (const test of kTests)
+    runTest(test);
+
+  test(function() {
+    content.style.font = "menu";
+    assert_equals(getComputedStyle(content).fontFamily, systemFont);
+  }, "System font should be honored");
+
+  done();
+})();
+</script>
diff --git a/layout/style/test/test_dynamic_change_causing_reflow.html b/layout/style/test/test_dynamic_change_causing_reflow.html
new file mode 100644
index 0000000000..bf3b7578b8
--- /dev/null
+++ b/layout/style/test/test_dynamic_change_causing_reflow.html
@@ -0,0 +1,716 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1131371
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1131371</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1131371">Mozilla Bug 1131371</a>
+<style>
+  #elemWithScrollbars { overflow: scroll }
+  .flexScrollerWithTransformedItems {
+    display: flex;
+    overflow: hidden;
+    width: 200px;
+    position: relative;
+  }
+  .flexScrollerWithTransformedItems div {
+    min-width: 50px;
+    min-height: 50px;
+    margin: 10px;
+    will-change: transform;
+  }
+  .absposFlexItem {
+    left: 250px;
+    top: 0;
+    position: absolute;
+  }
+  #tableCell,
+  #tableCellWithAbsPosChild {
+    display: table-cell;
+  }
+</style>
+<div id="display">
+  <div id="content">
+  </div>
+  <div id="elemWithAbsPosChild"><div style="position:absolute"></div></div>
+  <div id="elemWithFixedPosChild"><div style="position:fixed"></div></div>
+  <div id="elemWithScrollbars"></div>
+  <div id="elemWithoutScrollbars"></div>
+  <div class="flexScrollerWithTransformedItems">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div id="flexItemMovementTarget"></div>
+  </div>
+  <div class="flexScrollerWithTransformedItems">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div id="flexItemMovementTarget2"></div>
+    <div class="absposFlexItem"></div>
+  </div>
+  <input id="inputElem">
+  <textarea id="textareaElem">
+    Some
+    lines
+    of
+    text
+  </textarea>
+  <select id="selectElem">
+    <option>A</option>
+    <option>B</option>
+    <option>C</option>
+  </select>
+  <button id="buttonElem">
+    Something
+  </button>
+  <button id="buttonElemWithAbsPosChild"><div style="position:absolute"></div></button>
+  <div id="tableCell"></div>
+  <div id="tableCellWithAbsPosChild">
+    <div style="position: absolute"></div>
+  </div>
+</div>
+<pre id="test">
+<script>
+"use strict";
+
+/** Test for Bug 1131371 **/
+
+const elemWithAbsPosChild = document.getElementById("elemWithAbsPosChild");
+const elemWithFixedPosChild = document.getElementById("elemWithFixedPosChild");
+const elemWithScrollbars = document.getElementById("elemWithScrollbars");
+const elemWithoutScrollbars = document.getElementById("elemWithoutScrollbars");
+const inputElem = document.getElementById("inputElem");
+const textareaElem = document.getElementById("textareaElem");
+const selectElem = document.getElementById("selectElem");
+const buttonElem = document.getElementById("buttonElem");
+const buttonElemWithAbsPosChild = document.getElementById("buttonElemWithAbsPosChild");
+const tableCell = document.getElementById("tableCell");
+const tableCellWithAbsPosChild = document.getElementById("tableCellWithAbsPosChild");
+
+for (let scroller of document.querySelectorAll(".flexScrollerWithTransformedItems")) {
+  scroller.scrollLeft = 10000;
+}
+
+const flexItemMovementTarget = document.getElementById("flexItemMovementTarget");
+const flexItemMovementTarget2 = document.getElementById("flexItemMovementTarget2");
+
+/**
+ * This test verifies that certain style changes do or don't cause reflow
+ * and/or frame construction. We do this by checking the framesReflowed &
+ * framesConstructed counts, before & after a style-change, and verifying
+ * that any change to these counts is in line with our expectations.
+ *
+ * Each entry in gTestcases contains these member-values:
+ *   - beforeStyle (optional): initial value to use for "style" attribute.
+ *   - afterStyle: value to change the "style" attribute to.
+ *
+ * Testcases may also include two optional member-values to express that reflow
+ * and/or frame construction *are* in fact expected:
+ *   - expectConstruction (optional): if set to something truthy, then we expect
+ *      frame construction to occur when afterStyle is set. Otherwise, we
+ *      expect that frame construction should *not* occur.
+ *   - expectReflow (optional): if set to something truthy, then we expect
+ *      reflow to occur when afterStyle is set. Otherwise, we expect that
+ *      reflow should *not* occur.
+ */
+const gTestcases = [
+  // Things that shouldn't cause reflow:
+  // -----------------------------------
+  // * Adding an outline (e.g. for focus ring).
+  {
+    afterStyle:  "outline: 1px dotted black",
+  },
+
+  // * Changing between completely different outlines.
+  {
+    beforeStyle: "outline: 2px solid black",
+    afterStyle:  "outline: 6px dashed yellow",
+  },
+
+  // * Adding a box-shadow.
+  {
+    afterStyle: "box-shadow: inset 3px 3px gray",
+  },
+  {
+    afterStyle: "box-shadow: 0px 0px 10px 30px blue"
+  },
+
+  // * Changing between completely different box-shadow values,
+  // e.g. from an upper-left shadow to a bottom-right shadow:
+  {
+    beforeStyle: "box-shadow: -15px -20px teal",
+    afterStyle:  "box-shadow:  30px  40px yellow",
+  },
+
+  // * Adding a text-shadow.
+  {
+    afterStyle: "text-shadow: 3px 3px gray",
+  },
+  {
+    afterStyle: "text-shadow: 0px 0px 10px blue"
+  },
+
+  // * Changing between completely different text-shadow values,
+  // e.g. from an upper-left shadow to a bottom-right shadow:
+  {
+    beforeStyle: "text-shadow: -15px -20px teal",
+    afterStyle:  "text-shadow:  30px  40px yellow",
+  },
+
+  // * switching overflow between things that shouldn't create scrollframes.
+  {
+    beforeStyle: "overflow: visible",
+    afterStyle: "overflow: clip",
+  },
+
+  // Things that *should* cause reflow:
+  // ----------------------------------
+  // (e.g. to make sure our counts are actually measuring something)
+
+  // * Changing 'height' should cause reflow, but not frame construction.
+  {
+    beforeStyle: "height: 10px",
+    afterStyle:  "height: 15px",
+    expectReflow: true,
+  },
+
+  // * Changing 'shape-outside' on a non-floating box should not cause anything to happen.
+  {
+    beforeStyle: "shape-outside: none",
+    afterStyle:  "shape-outside: circle()",
+  },
+
+  // * Changing 'shape-outside' should cause reflow, but not frame construction.
+  {
+    beforeStyle: "float: left; shape-outside: none",
+    afterStyle:  "float: left; shape-outside: circle()",
+    expectReflow: true,
+  },
+
+  // * Changing 'overflow' on <body> should cause reflow,
+  // but not frame reconstruction
+  {
+    elem: document.body,
+    /* beforeStyle: implicitly 'overflow:visible' */
+    afterStyle:  "overflow: hidden",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: document.body,
+    /* beforeStyle: implicitly 'overflow:visible' */
+    afterStyle:  "overflow: scroll",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: document.body,
+    beforeStyle: "overflow: hidden",
+    afterStyle:  "overflow: auto",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: document.body,
+    beforeStyle: "overflow: hidden",
+    afterStyle:  "overflow: scroll",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: document.body,
+    beforeStyle: "overflow: hidden",
+    afterStyle:  "overflow: visible",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: document.body,
+    beforeStyle: "overflow: auto",
+    afterStyle:  "overflow: hidden",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: document.body,
+    beforeStyle: "overflow: visible",
+    afterStyle:  "overflow: hidden",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+
+  // * Changing 'overflow' on <html> should cause reflow,
+  // but not frame reconstruction
+  {
+    elem: document.documentElement,
+    /* beforeStyle: implicitly 'overflow:visible' */
+    afterStyle:  "overflow: auto",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: document.documentElement,
+    beforeStyle: "overflow: visible",
+    afterStyle:  "overflow: auto",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+
+  // * Setting 'overflow' on arbitrary node should cause reflow as well as
+  // frame reconstruction
+  {
+    /* beforeStyle: implicitly 'overflow:visible' */
+    afterStyle:  "overflow: auto",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+  {
+    beforeStyle: "overflow: auto",
+    afterStyle:  "overflow: visible",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+
+  // * but only reflow if we don't need to construct / unconstruct a new frame.
+  {
+    beforeStyle: "overflow: scroll",
+    afterStyle:  "overflow: auto",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    beforeStyle: "overflow: auto",
+    afterStyle:  "overflow: scroll",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+
+  {
+    beforeStyle: "overflow: hidden",
+    afterStyle:  "overflow: auto",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+  {
+    beforeStyle: "overflow: auto",
+    afterStyle:  "overflow: hidden",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    beforeStyle: "overflow: hidden",
+    afterStyle:  "overflow: scroll",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+  {
+    beforeStyle: "overflow: scroll",
+    afterStyle:  "overflow: hidden",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+
+  {
+    elem: elemWithoutScrollbars,
+    beforeStyle: "scrollbar-width: auto",
+    afterStyle:  "scrollbar-width: none",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: elemWithScrollbars,
+    beforeStyle: "scrollbar-width: auto",
+    afterStyle:  "scrollbar-width: none",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    // Not the scrolling element, so nothing should happen.
+    elem: document.body,
+    beforeStyle: "scrollbar-width: none",
+    afterStyle:  "scrollbar-width: auto",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    // Not the scrolling element, so nothing should happen.
+    elem: document.body,
+    beforeStyle: "scrollbar-width: auto",
+    afterStyle:  "scrollbar-width: none",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: document.documentElement,
+    beforeStyle: "scrollbar-width: none;",
+    afterStyle:  "scrollbar-width: auto",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: document.documentElement,
+    beforeStyle: "overflow: scroll; scrollbar-width: none;",
+    afterStyle:  "overflow: scroll; scrollbar-width: auto",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: document.documentElement,
+    beforeStyle: "overflow: scroll; scrollbar-width: auto;",
+    afterStyle:  "overflow: scroll; scrollbar-width: none",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+
+  // * Changing 'display' should cause frame construction and reflow.
+  {
+    beforeStyle: "display: inline",
+    afterStyle:  "display: table",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+
+
+  // * Position changes trigger a reframe, unless whether we're a containing
+  // block doesn't change, in which case we just need to reflow.
+  {
+    beforeStyle: "position: static",
+    afterStyle:  "position: absolute",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+  {
+    beforeStyle:  "position: absolute",
+    afterStyle: "position: fixed",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+  {
+    beforeStyle:  "position: relative",
+    afterStyle: "position: fixed",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+
+  // This doesn't change whether we're a containing block because there are no
+  // abspos descendants.
+  {
+    afterStyle: "position: static",
+    beforeStyle:  "position: relative",
+    expectReflow: true,
+  },
+
+  // This doesn't change whether we're a containing block, shouldn't reframe.
+  {
+    afterStyle: "position: sticky",
+    beforeStyle:  "position: relative",
+    expectReflow: true,
+  },
+
+  // These don't change whether we're a containing block for our
+  // absolutely-positioned child, so shouldn't reframe.
+  {
+    elem: elemWithAbsPosChild,
+    afterStyle: "position: sticky",
+    beforeStyle:  "position: relative",
+    expectReflow: true,
+  },
+  {
+    elem: elemWithFixedPosChild,
+    afterStyle: "position: sticky",
+    beforeStyle:  "position: relative",
+    expectReflow: true,
+  },
+  {
+    elem: elemWithFixedPosChild,
+    afterStyle: "position: static",
+    beforeStyle:  "position: relative",
+    expectReflow: true,
+  },
+  {
+    elem: elemWithFixedPosChild,
+    afterStyle: "position: static",
+    beforeStyle:  "position: sticky",
+    expectReflow: true,
+  },
+  {
+    // Even if we're a scroll frame.
+    elem: elemWithFixedPosChild,
+    afterStyle: "position: static; overflow: auto;",
+    beforeStyle:  "position: relative; overflow: auto;",
+    expectReflow: true,
+  },
+  {
+    elem: tableCell,
+    afterStyle: "position: static;",
+    beforeStyle:  "position: relative;",
+    expectReflow: true,
+  },
+  {
+    elem: tableCell,
+    afterStyle: "filter: none",
+    beforeStyle:  "filter: saturate(1)",
+    expectReflow: false,
+  },
+
+  // These ones do though.
+  {
+    elem: elemWithAbsPosChild,
+    afterStyle: "position: static",
+    beforeStyle:  "position: relative",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+  {
+    elem: elemWithAbsPosChild,
+    afterStyle: "position: static",
+    beforeStyle:  "position: sticky",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+  {
+    elem: elemWithAbsPosChild,
+    afterStyle: "position: static; overflow: auto;",
+    beforeStyle:  "position: relative; overflow: auto;",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+  {
+    elem: tableCellWithAbsPosChild,
+    afterStyle: "position: static;",
+    beforeStyle:  "position: relative;",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+
+  // Adding transform to a scrollframe without abspos / fixedpos children shouldn't reframe.
+  {
+    elem: elemWithScrollbars,
+    afterStyle: "transform: translateX(1px)",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+
+  // <select> can't contain abspos / floating children so shouldn't reframe
+  // when changing containing block-ness.
+  {
+    elem: selectElem,
+    afterStyle: "transform: translateX(1px)",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: selectElem,
+    afterStyle: "position: relative",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+
+  // <button> shouldn't be reframed either in the absence of positioned descendants.
+  {
+    elem: buttonElem,
+    afterStyle: "transform: translateX(1px)",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: buttonElem,
+    afterStyle: "position: relative",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: buttonElemWithAbsPosChild,
+    afterStyle: "position: relative",
+    expectConstruction: true,
+    expectReflow: true,
+  },
+  // changing scroll-behavior should not cause reflow or frame construction
+  {
+    elem: document.documentElement,
+    /* beforeStyle: implicitly 'scroll-behavior: auto' */
+    afterStyle:  "scroll-behavior: smooth",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: document.documentElement,
+    beforeStyle: "scroll-behavior: smooth",
+    afterStyle:  "scroll-behavior: auto",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: document.body,
+    /* beforeStyle: implicitly 'scroll-behavior: auto' */
+    afterStyle:  "scroll-behavior: smooth",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: document.body,
+    beforeStyle: "scroll-behavior: smooth",
+    afterStyle:  "scroll-behavior: auto",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  // changing scroll-snap-type should not cause reflow or frame construction
+  {
+    elem: document.documentElement,
+    /* beforeStyle: implicitly 'scroll-snap-type: none' */
+    afterStyle:  "scroll-snap-type: y mandatory",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: document.documentElement,
+    /* beforeStyle: implicitly 'scroll-snap-type: none' */
+    afterStyle:  "scroll-snap-type: x proximity",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: document.documentElement,
+    beforeStyle: "scroll-snap-type: y mandatory",
+    afterStyle:  "scroll-snap-type: none",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: document.body,
+    /* beforeStyle: implicitly 'scroll-snap-type: none' */
+    afterStyle:  "scroll-snap-type: y mandatory",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: document.body,
+    /* beforeStyle: implicitly 'scroll-snap-type: none' */
+    afterStyle:  "scroll-snap-type: x proximity",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: document.body,
+    beforeStyle: "scroll-snap-type: y mandatory",
+    afterStyle:  "scroll-snap-type: none",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: inputElem,
+    beforeStyle: "overflow: auto",
+    afterStyle:  "overflow: hidden",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: textareaElem,
+    beforeStyle: "overflow: auto",
+    afterStyle:  "overflow: hidden",
+    expectConstruction: false,
+    expectReflow: true,
+  },
+  {
+    elem: flexItemMovementTarget,
+    beforeStyle: "transform: translateX(0)",
+    afterStyle: "transform: translateX(-100px)",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+  {
+    elem: flexItemMovementTarget2,
+    beforeStyle: "transform: translateX(0)",
+    afterStyle: "transform: translateX(-100px)",
+    expectConstruction: false,
+    expectReflow: false,
+  },
+];
+
+// Helper function to let us call either "is" or "isnot" & assemble
+// the failure message, based on the provided parameters.
+function checkFinalCount(aFinalCount, aExpectedCount,
+                         aExpectChange, aMsgPrefix, aCountDescription)
+{
+  let compareFunc;
+  let msg = aMsgPrefix;
+  if (aExpectChange) {
+    compareFunc = isnot;
+    msg += "should cause " + aCountDescription;
+  } else {
+    compareFunc = is;
+    msg += "should not cause " + aCountDescription;
+  }
+
+  compareFunc(aFinalCount, aExpectedCount, msg);
+}
+
+// Vars used in runOneTest that we really only have to look up once:
+const gUtils = SpecialPowers.getDOMWindowUtils(window);
+const gElem = document.getElementById("content");
+
+function runOneTest(aTestcase)
+{
+  // sanity-check that we have the one main thing we need:
+  if (!aTestcase.afterStyle) {
+    ok(false, "testcase is missing an 'afterStyle' to change to");
+    return;
+  }
+
+  // Figure out which element we'll be tweaking (defaulting to gElem)
+  let elem = aTestcase.elem ? aTestcase.elem : gElem;
+
+  // Verify that 'style' attribute is unset (avoid causing ourselves trouble):
+  const oldStyle = elem.getAttribute("style");
+
+  // Set the "before" style, and compose the first part of the message
+  // to be used in our "is"/"isnot" invocations:
+  let msgPrefix = "Changing style ";
+  if (aTestcase.beforeStyle) {
+    elem.setAttribute("style", aTestcase.beforeStyle);
+    msgPrefix += "from '" + aTestcase.beforeStyle + "' ";
+  }
+  msgPrefix += "to '" + aTestcase.afterStyle + "' ";
+  msgPrefix += "on " + elem.nodeName + " ";
+
+  // Establish initial counts:
+  let unusedVal = elem.offsetHeight; // flush layout
+  let origFramesConstructed = gUtils.framesConstructed;
+  let origFramesReflowed = gUtils.framesReflowed;
+
+  // Make the change and flush:
+  elem.setAttribute("style", aTestcase.afterStyle);
+  unusedVal = elem.offsetHeight; // flush layout
+
+  // Make our is/isnot assertions about whether things should have changed:
+  checkFinalCount(gUtils.framesConstructed, origFramesConstructed,
+                  aTestcase.expectConstruction, msgPrefix,
+                  "frame construction");
+  checkFinalCount(gUtils.framesReflowed, origFramesReflowed,
+                  aTestcase.expectReflow, msgPrefix,
+                  "reflow");
+
+  // Clean up!
+  if (oldStyle) {
+    elem.setAttribute("style", oldStyle);
+  } else {
+    elem.removeAttribute("style");
+  }
+
+  unusedVal = elem.offsetHeight; // flush layout
+}
+
+gTestcases.forEach(runOneTest);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_exposed_prop_accessors.html b/layout/style/test/test_exposed_prop_accessors.html
new file mode 100644
index 0000000000..765818bae4
--- /dev/null
+++ b/layout/style/test/test_exposed_prop_accessors.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=375363
+-->
+<head>
+  <title>Test for cloning of CSS property values (including 'inherit', 'initial' and 'unset')</title>
+  <script 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>
+<p id="display"></p>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/**
+ * Test that makes sure that we have exposed getters/setters for all the
+ * various variants of our CSS property names that the spec calls for.
+ */
+for (var prop in gCSSProperties) {
+  var info = gCSSProperties[prop];
+
+  var s = document.createElement("div").style;
+
+  is(s[info.domProp], "", prop + " should not be set yet");
+  s[info.domProp] = info.initial_values[0];
+  isnot(s[info.domProp], "", prop + " should now be set");
+  is(s[prop], s[info.domProp],
+     "Getting " + prop + " via name should work")
+  s = document.createElement("div").style;
+  is(s[info.domProp], "", prop + " should not be set here either");
+  s[prop] = info.initial_values[0];
+  isnot(s[info.prop], "", prop + " should now be set again");
+  is(s[info.domProp], s[prop],
+     "Setting " + prop + " via name should work");
+}
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_extra_inherit_initial.html b/layout/style/test/test_extra_inherit_initial.html
new file mode 100644
index 0000000000..34c63b3626
--- /dev/null
+++ b/layout/style/test/test_extra_inherit_initial.html
@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=940229
+-->
+<head>
+  <title>Test handling extra inherit/initial/unset in CSS declarations (Bug 940229)</title>
+  <script 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=940229">Mozilla Bug 940229</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+<div id="testnode"></div>
+  
+</div>
+<pre id="test">
+<script class="testbody" type="application/javascript">
+
+/*
+ * Inspired by mistake in quotes noticed while reviewing bug 189519.
+ */
+
+let gPropsNeedComma = {
+  "font": true,
+  "font-family": true,
+  "voice-family": true,
+};
+
+let gElement = document.getElementById("testnode");
+let gDeclaration = gElement.style;
+
+let kValuesToTestThoroughly = 3;
+
+function test_property(property)
+{
+  let info = gCSSProperties[property];
+
+  let delim = (property in gPropsNeedComma) ? ", " : " ";
+
+  function test_value_pair(relation, val1, val2, extraval) {
+    let decl = property + ": " + val1 + delim + val2;
+    gElement.setAttribute("style", decl);
+    if ("subproperties" in info) {
+      // Shorthand property; inspect each subproperty value.
+      for (let subprop of info.subproperties) {
+        is(gDeclaration.getPropertyValue(subprop), "",
+           ["expected", extraval, "ignored", relation, "value in",
+            "'" + decl + "'", "when looking at subproperty",
+            "'" + subprop + "'"].join(" "));
+      }
+    } else {
+      // Longhand property.
+      is(gDeclaration.getPropertyValue(property), "",
+         ["expected", extraval, "ignored", relation, "value in",
+          "'" + decl + "'"].join(" "));
+    }
+  }
+
+  function test_value(value, valueIdx) {
+    let specialKeywords = [ "inherit", "initial", "unset" ];
+
+    if (valueIdx < kValuesToTestThoroughly) {
+      // For the first few values, we test each special-keyword both before
+      // and after the value.
+      for (let keyword of specialKeywords) {
+        test_value_pair("before", keyword, value, keyword);
+        test_value_pair("after", value, keyword, keyword);
+      }
+    } else {
+      // For later values, only test one keyword before & after it.
+      let keywordIdx =
+        (valueIdx - kValuesToTestThoroughly) % specialKeywords.length;
+      keyword = specialKeywords[keywordIdx];
+      test_value_pair("before", keyword, value, keyword);
+      test_value_pair("after", value, keyword, keyword);
+    }
+  }
+
+  for (let idx in info.initial_values) {
+    test_value(info.initial_values[idx], idx);
+  }
+  for (let idx in info.other_values) {
+    test_value(info.initial_values[idx], idx);
+  }
+}
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(4);
+
+function start_test() {
+  for (let prop in gCSSProperties) {
+    test_property(prop);
+  }
+  SimpleTest.finish();
+}
+
+// Turn off CSS error reporting for this test, since it's a bit expensive,
+// and we're expecting to generate tons and tons of parse errors here.
+SpecialPowers.pushPrefEnv({ "set": [["layout.css.report_errors", false]] },
+                          start_test);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_first_letter_restrictions.html b/layout/style/test/test_first_letter_restrictions.html
new file mode 100644
index 0000000000..99aaba8b93
--- /dev/null
+++ b/layout/style/test/test_first_letter_restrictions.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1382786
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1382786</title>
+  <script 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"/>
+  <style id="s"></style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1382786">Mozilla Bug 1382786</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<div id="test"></div>
+<div id="control"></div>
+<script type="application/javascript">
+
+/** Test for Bug 1382786 **/
+var test = getComputedStyle($("test"), "::first-letter");
+var control = getComputedStyle($("control"), "::first-letter");
+for (let prop in gCSSProperties) {
+  var info = gCSSProperties[prop];
+  if (info.type == CSS_TYPE_TRUE_SHORTHAND) {
+    // Can't get useful info out of getComputedStyle.
+    continue;
+  }
+  let prereqs = "";
+  if (info.prerequisites) {
+    for (let name in info.prerequisites) {
+      prereqs += `${name}: ${info.prerequisites[name]}; `;
+    }
+  }
+  $("s").textContent = `
+    #control::first-letter { ${prop}: ${info.initial_values[0]}; ${prereqs} }
+    #test::first-letter { ${prop}: ${info.other_values[0]}; ${prereqs} }
+  `;
+  if (info.applies_to_first_letter) {
+    isnot(get_computed_value(test, prop),
+          get_computed_value(control, prop),
+          `${prop} should apply to ::first-letter`);
+  } else {
+    is(get_computed_value(test, prop),
+       get_computed_value(control, prop),
+       `${prop} should not apply to ::first-letter`);
+  }
+}
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_first_line_restrictions.html b/layout/style/test/test_first_line_restrictions.html
new file mode 100644
index 0000000000..bb8e116e8b
--- /dev/null
+++ b/layout/style/test/test_first_line_restrictions.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1382786
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1382786</title>
+  <script 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"/>
+  <style id="s"></style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1382786">Mozilla Bug 1382786</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<div id="test"></div>
+<div id="control"></div>
+<script type="application/javascript">
+
+/** Test for Bug 1382786 **/
+var test = getComputedStyle($("test"), "::first-line");
+var control = getComputedStyle($("control"), "::first-line");
+for (let prop in gCSSProperties) {
+  var info = gCSSProperties[prop];
+  if (info.type == CSS_TYPE_TRUE_SHORTHAND) {
+    // Can't get useful info out of getComputedStyle.
+    continue;
+  }
+  let prereqs = "";
+  if (info.prerequisites) {
+    for (let name in info.prerequisites) {
+      prereqs += `${name}: ${info.prerequisites[name]}; `;
+    }
+  }
+  $("s").textContent = `
+    #control::first-line { ${prop}: ${info.initial_values[0]}; ${prereqs} }
+    #test::first-line { ${prop}: ${info.other_values[0]}; ${prereqs} }
+  `;
+  if (info.applies_to_first_line) {
+    isnot(get_computed_value(test, prop),
+          get_computed_value(control, prop),
+          `${prop} should apply to ::first-line`);
+  } else {
+    is(get_computed_value(test, prop),
+       get_computed_value(control, prop),
+       `${prop} should not apply to ::first-line`);
+  }
+}
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_flexbox_child_display_values.xhtml b/layout/style/test/test_flexbox_child_display_values.xhtml
new file mode 100644
index 0000000000..7ba870c69f
--- /dev/null
+++ b/layout/style/test/test_flexbox_child_display_values.xhtml
@@ -0,0 +1,178 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=783415
+-->
+<head>
+  <meta charset="utf-8"/>
+  <title>Test "display" values of content in a flex container (Bug 783415)</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=783415">Mozilla Bug 783415</a>
+<div id="display">
+  <div id="wrapper"></div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+<![CDATA[
+"use strict";
+
+/**
+ * Test "display" values of content in a flex container (Bug 783415)
+ * ================================================================
+ *
+ * This test creates content with a variety of specified "display" values
+ * and checks what the computed "display" is when we put that content
+ * in a flex container.  (Generally, it'll be the "blockified" form of the
+ * specified display-value.)
+ */
+
+/*
+ * Utility function for getting computed style of "display".
+ *
+ * @arg aElem The element to query for its computed "display" value.
+ * @return    The computed display value
+ */
+function getComputedDisplay(aElem) {
+  return window.getComputedStyle(aElem).display;
+}
+
+/*
+ * Function used for testing a given specified "display" value and checking
+ * its computed value against expectations.
+ *
+ * @arg aSpecifiedDisplay
+ *        The specified value of "display" that we should test.
+ *
+ * @arg aExpectedDisplayAsFlexContainerChild
+ *        (optional) The expected computed "display" when an element with
+ *        aSpecifiedDisplay is a child of a flex container. If omitted,
+ *        this argument defaults to aSpecifiedDisplay.
+ *
+ * @arg aExpectedDisplayAsOutOfFlowFlexContainerChild
+ *        (optional) The expected computed "display" when an element with
+ *        aSpecifiedDisplay is a child of a flex container *and* has
+ *        position:[fixed|absolute] or float: [left|right] set. If omitted,
+ *        this argument defaults to aExpectedDisplayAsFlexContainerChild.
+ */
+function testDisplayValue(aSpecifiedDisplay,
+                          aExpectedDisplayAsFlexContainerChild,
+                          aExpectedDisplayAsOutOfFlowFlexContainerChild) {
+  // DEFAULT-ARGUMENT-VALUES MAGIC: Make 2nd and 3rd args each default to
+  // the preceding arg, if they're unspecified.
+  if (typeof aExpectedDisplayAsFlexContainerChild == "undefined") {
+    aExpectedDisplayAsFlexContainerChild = aSpecifiedDisplay;
+  }
+  if (typeof aExpectedDisplayAsOutOfFlowFlexContainerChild == "undefined") {
+    aExpectedDisplayAsOutOfFlowFlexContainerChild =
+      aExpectedDisplayAsFlexContainerChild;
+  }
+
+  // FIRST: Create a node with display:aSpecifiedDisplay, and make sure that
+  // this original display-type is honored in a non-flex-container context.
+  let wrapper = document.getElementById("wrapper");
+  let node = document.createElement("div");
+  wrapper.appendChild(node);
+
+  node.style.display = aSpecifiedDisplay;
+  is(getComputedDisplay(node), aSpecifiedDisplay,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "should be the same as specified value, when parent is a block");
+
+
+  // SECOND: We make our node's parent into a flex container, and make sure
+  // that this produces the correct computed "display" value.
+  wrapper.style.display = "flex";
+  is(getComputedDisplay(node), aExpectedDisplayAsFlexContainerChild,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "when parent is a flex container");
+
+
+  // THIRD: We set "float" and "position" on our node (still inside of a
+  // flex container), and make sure that this produces the correct computed
+  // "display" value.
+  node.style.cssFloat = "left";
+  is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "when parent is a flex container and we're floated left");
+  node.style.cssFloat = "";
+
+  node.style.cssFloat = "right";
+  is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "when parent is a flex container and we're floated right");
+  node.style.cssFloat = "";
+
+  node.style.position = "absolute";
+  is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "when parent is a flex container and we're abs-pos");
+  node.style.position = "";
+
+  node.style.position = "fixed";
+  is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild,
+     "checking computed value of 'display: " + aSpecifiedDisplay + "' " +
+     "when parent is a flex container and we're fixed-pos");
+  node.style.position = "";
+
+  // FINALLY: Clean up -- remove the node we created, and turn the wrapper
+  // back into its original display type (a block).
+  wrapper.removeChild(node);
+  wrapper.style.display = "";
+}
+
+/*
+ * Main test function
+ */
+function main() {
+  testDisplayValue("none");
+  testDisplayValue("block");
+  testDisplayValue("flex");
+  testDisplayValue("inline-flex", "flex");
+  testDisplayValue("list-item");
+  testDisplayValue("table");
+  testDisplayValue("inline-table", "table");
+
+  // These values all compute to "block" in a flex container. Do them in a
+  // loop, so that I don't have to type "block" a zillion times.
+  var dispValsThatComputeToBlockInAFlexContainer = [
+    "inline",
+    "inline-block",
+  ];
+
+  dispValsThatComputeToBlockInAFlexContainer.forEach(
+    function(aSpecifiedDisplay) {
+      testDisplayValue(aSpecifiedDisplay, "block");
+  });
+
+  // Table-parts are special. When they're a child of a flex container,
+  // they normally don't get blockified -- instead, they trigger table-fixup
+  // and get wrapped in a table.  So, their expected display as the child of
+  // a flex container is the same as their specified display. BUT, if
+  // we apply out-of-flow styling, then *that* blockifies them before
+  // we get to the table-fixup stage -- so then, their computed display
+  // is "block".
+  let tablePartsDispVals = [
+    "table-row-group",
+    "table-column",
+    "table-column-group",
+    "table-header-group",
+    "table-footer-group",
+    "table-row",
+    "table-cell",
+    "table-caption"
+  ];
+
+  tablePartsDispVals.forEach(
+    function(aSpecifiedDisplay) {
+      testDisplayValue(aSpecifiedDisplay, "block", "block");
+  });
+}
+
+main();
+]]>
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_flexbox_flex_grow_and_shrink.html b/layout/style/test/test_flexbox_flex_grow_and_shrink.html
new file mode 100644
index 0000000000..fc5090fd61
--- /dev/null
+++ b/layout/style/test/test_flexbox_flex_grow_and_shrink.html
@@ -0,0 +1,154 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=696253
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for flex-grow and flex-shrink animation (Bug 696253)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+  /* Set flex-grow and flex-shrink to nonzero values,
+     when no animations are applied. */
+
+  * { flex-grow: 10; flex-shrink: 20 }
+
+  /* Animations that we'll test (individually) in the script below: */
+  @keyframes flexGrowTwoToThree {
+     0%   { flex-grow: 2 }
+     100% { flex-grow: 3 }
+  }
+  @keyframes flexShrinkTwoToThree {
+     0%   { flex-shrink: 2 }
+     100% { flex-shrink: 3 }
+  }
+  @keyframes flexGrowZeroToZero {
+     0%   { flex-grow: 0 }
+     100% { flex-grow: 0 }
+  }
+  @keyframes flexShrinkZeroToZero {
+     0%   { flex-shrink: 0 }
+     100% { flex-shrink: 0 }
+  }
+  @keyframes flexGrowZeroToOne {
+     0%   { flex-grow: 0 }
+     100% { flex-grow: 1 }
+  }
+  @keyframes flexShrinkZeroToOne {
+     0%   { flex-shrink: 0 }
+     100% { flex-shrink: 1 }
+  }
+  @keyframes flexGrowOneToZero {
+     0%   { flex-grow: 1 }
+     100% { flex-grow: 0 }
+  }
+  @keyframes flexShrinkOneToZero {
+     0%   { flex-shrink: 1 }
+     100% { flex-shrink: 0 }
+  }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
+<div id="display">
+  <div id="myDiv"></div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test for flex-grow and flex-shrink animation (Bug 696253) **/
+
+// take over the refresh driver
+advance_clock(0);
+
+// ANIMATIONS THAT SHOULD AFFECT COMPUTED STYLE
+// --------------------------------------------
+
+// flexGrowTwoToThree: 2.0 at 0%, 2.5 at 50%, 10 after animation is over
+var [ div, cs ] = new_div("animation: flexGrowTwoToThree linear 1s");
+is_approx(+cs.flexGrow, 2, 0.01, "flexGrowTwoToThree at 0.0s");
+advance_clock(500);
+is_approx(+cs.flexGrow, 2.5, 0.01, "flexGrowTwoToThree at 0.5s");
+advance_clock(1000);
+is(cs.flexGrow, "10", "flexGrowTwoToThree at 1.5s");
+done_div();
+
+// flexShrinkTwoToThree: 2.0 at 0%, 2.5 at 50%, 20 after animation is over
+[ div, cs ] = new_div("animation: flexShrinkTwoToThree linear 1s");
+is_approx(cs.flexShrink, 2, 0.01,  "flexShrinkTwoToThree at 0.0s");
+advance_clock(500);
+is_approx(cs.flexShrink, 2.5, 0.01, "flexShrinkTwoToThree at 0.5s");
+advance_clock(1000);
+is(cs.flexShrink, "20", "flexShrinkTwoToThree at 1.5s");
+done_div();
+
+// flexGrowZeroToZero: 0 at 0%, 0 at 50%, 10 after animation is over
+[ div, cs ] = new_div("animation: flexGrowZeroToZero linear 1s");
+is(cs.flexGrow, "0", "flexGrowZeroToZero at 0.0s");
+advance_clock(500);
+is(cs.flexGrow, "0", "flexGrowZeroToZero at 0.5s");
+advance_clock(1000);
+is(cs.flexGrow, "10", "flexGrowZeroToZero at 1.5s");
+done_div();
+
+// flexShrinkZeroToZero: 0 at 0%, 0 at 50%, 20 after animation is over
+[ div, cs ] = new_div("animation: flexShrinkZeroToZero linear 1s");
+is(cs.flexShrink, "0", "flexShrinkZeroToZero at 0.0s");
+advance_clock(500);
+is(cs.flexShrink, "0", "flexShrinkZeroToZero at 0.5s");
+advance_clock(1000);
+is(cs.flexShrink, "20", "flexShrinkZeroToZero at 1.5s");
+done_div();
+
+// ANIMATIONS THAT DIDN'T USED TO AFFECT COMPUTED STYLE, BUT NOW DO
+// ----------------------------------------------------------------
+// (In an older version of the flexbox spec, flex-grow & flex-shrink were not
+// allowed to animate between 0 and other values. But now that's allowed.)
+
+// flexGrowZeroToOne: 0 at 0%, 0.5 at 50%, 10 after animation is over.
+[ div, cs ] = new_div("animation: flexGrowZeroToOne linear 1s");
+is(cs.flexGrow, "0", "flexGrowZeroToOne at 0.0s");
+advance_clock(500);
+is(cs.flexGrow, "0.5", "flexGrowZeroToOne at 0.5s");
+advance_clock(1000);
+is(cs.flexGrow, "10", "flexGrowZeroToOne at 1.5s");
+done_div();
+
+// flexShrinkZeroToOne: 0 at 0%, 0.5 at 50%, 20 after animation is over.
+[ div, cs ] = new_div("animation: flexShrinkZeroToOne linear 1s");
+is(cs.flexShrink, "0",  "flexShrinkZeroToOne at 0.0s");
+advance_clock(500);
+is(cs.flexShrink, "0.5", "flexShrinkZeroToOne at 0.5s");
+advance_clock(1000);
+is(cs.flexShrink, "20", "flexShrinkZeroToOne at 1.5s");
+done_div();
+
+// flexGrowOneToZero: 1 at 0%, 0.5 at 50%, 10 after animation is over.
+[ div, cs ] = new_div("animation: flexGrowOneToZero linear 1s");
+is(cs.flexGrow, "1", "flexGrowOneToZero at 0.0s");
+advance_clock(500);
+is(cs.flexGrow, "0.5", "flexGrowOneToZero at 0.5s");
+advance_clock(1000);
+is(cs.flexGrow, "10", "flexGrowOneToZero at 1.5s");
+done_div();
+
+// flexShrinkOneToZero: 1 at 0%, 0.5 at 50%, 20 after animation is over.
+[ div, cs ] = new_div("animation: flexShrinkOneToZero linear 1s");
+is(cs.flexShrink, "1",  "flexShrinkOneToZero at 0.0s");
+advance_clock(500);
+is(cs.flexShrink, "0.5", "flexShrinkOneToZero at 0.5s");
+advance_clock(1000);
+is(cs.flexShrink, "20", "flexShrinkOneToZero at 1.5s");
+done_div();
+
+SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_flexbox_flex_shorthand.html b/layout/style/test/test_flexbox_flex_shorthand.html
new file mode 100644
index 0000000000..b8416403b6
--- /dev/null
+++ b/layout/style/test/test_flexbox_flex_shorthand.html
@@ -0,0 +1,280 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=696253
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 696253</title>
+  <script 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=696253">Mozilla Bug 696253</a>
+<div id="display">
+  <div id="content">
+  </div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test for Bug 696253 **/
+/* (Testing the 'flex' CSS shorthand property) */
+
+// The CSS property name for the shorthand we're testing:
+const gFlexPropName = "flex";
+
+// Info from property_database.js on this property:
+const gFlexPropInfo = gCSSProperties[gFlexPropName];
+
+// The name of the property in the DOM (i.e. in elem.style):
+// (NOTE: In this case it's actually the same as the CSS property name --
+// "flex" -- but that's not guaranteed in general.)
+const gFlexDOMName = gFlexPropInfo.domProp;
+
+// Default values for shorthand subproperties, when they're not specified
+// explicitly in a testcase.  This lets the testcases be more concise.
+//
+// The values here are from the flexbox spec on the 'flex' shorthand:
+//   "When omitted, [flex-grow and flex-shrink are] set to '1'."
+//   "When omitted [..., flex-basis's] specified value is '0%'."
+let gFlexShorthandDefaults = {
+    "flex-grow":   "1",
+    "flex-shrink": "1",
+    "flex-basis":  "0%"
+};
+
+let gFlexShorthandTestcases = [
+/*
+  {
+    "flex":        "SPECIFIED value for flex shorthand",
+
+    // Expected Computed Values of Subproperties
+    // Semi-optional -- if unspecified, the expected value is taken
+    // from gFlexShorthandDefaults.
+    "flex-grow":   "EXPECTED computed value for flex-grow property",
+    "flex-shrink": "EXPECTED computed value for flex-shrink property",
+    "flex-basis":  "EXPECTED computed value for flex-basis property",
+  },
+*/
+
+  // Initial values of subproperties:
+  // --------------------------------
+  // (checked by another test that uses property_database.js, too, but
+  // might as well check here, too, for thoroughness).
+  {
+    "flex":        "",
+    "flex-grow":   "0",
+    "flex-shrink": "1",
+    "flex-basis":  "auto",
+  },
+  {
+    "flex":        "initial",
+    "flex-grow":   "0",
+    "flex-shrink": "1",
+    "flex-basis":  "auto",
+  },
+
+  // Special keyword "none" --> "0 0 auto"
+  // -------------------------------------
+  {
+    "flex":        "none",
+    "flex-grow":   "0",
+    "flex-shrink": "0",
+    "flex-basis":  "auto",
+  },
+
+  // One Value (numeric) --> sets flex-grow
+  // --------------------------------------
+  {
+    "flex":        "0",
+    "flex-grow":   "0",
+  },
+  {
+    "flex":        "5",
+    "flex-grow":   "5",
+  },
+  {
+    "flex":        "1000",
+    "flex-grow":   "1000",
+  },
+  {
+    "flex":        "0.0000001",
+    "flex-grow":   "1e-7"
+  },
+  {
+    "flex":        "20000000",
+    "flex-grow":   "20000000",
+  },
+
+  // One Value (length or other nonnumeric) --> sets flex-basis
+  // ----------------------------------------------------------
+  {
+    "flex":        "0px",
+    "flex-basis":  "0px",
+  },
+  {
+    "flex":        "0%",
+    "flex-basis":  "0%",
+  },
+  {
+    "flex":        "25px",
+    "flex-basis":  "25px",
+  },
+  {
+    "flex":        "5%",
+    "flex-basis":  "5%",
+  },
+  {
+    "flex":        "auto",
+    "flex-basis":  "auto",
+  },
+  {
+    "flex":        "fit-content",
+    "flex-basis":  "fit-content",
+  },
+  {
+    "flex":        "calc(5px + 6px)",
+    "flex-basis":  "11px",
+  },
+  {
+    "flex":        "calc(15% + 30px)",
+    "flex-basis":  "calc(15% + 30px)",
+  },
+
+  // Two Values (numeric) --> sets flex-grow, flex-shrink
+  // ----------------------------------------------------
+  {
+    "flex":        "0 0",
+    "flex-grow":   "0",
+    "flex-shrink": "0",
+  },
+  {
+    "flex":        "0 2",
+    "flex-grow":   "0",
+    "flex-shrink": "2",
+  },
+  {
+    "flex":        "3 0",
+    "flex-grow":   "3",
+    "flex-shrink": "0",
+  },
+  {
+    "flex":        "0.5000 2.03",
+    "flex-grow":   "0.5",
+    "flex-shrink": "2.03",
+  },
+  {
+    "flex":        "300.0 500.0",
+    "flex-grow":   "300",
+    "flex-shrink": "500",
+  },
+
+  // Two Values (numeric & length-ish) --> sets flex-grow, flex-basis
+  // ----------------------------------------------------------------
+  {
+    "flex":        "0 0px",
+    "flex-grow":   "0",
+    "flex-basis":  "0px",
+  },
+  {
+    "flex":        "0 0%",
+    "flex-grow":   "0",
+    "flex-basis":  "0%",
+  },
+  {
+    "flex":        "10 30px",
+    "flex-grow":   "10",
+    "flex-basis":  "30px",
+  },
+  {
+    "flex":        "99px 2.3",
+    "flex-grow":   "2.3",
+    "flex-basis":  "99px",
+  },
+  {
+    "flex":        "99% 6",
+    "flex-grow":   "6",
+    "flex-basis":  "99%",
+  },
+  {
+    "flex":        "auto 5",
+    "flex-grow":   "5",
+    "flex-basis":  "auto",
+  },
+  {
+    "flex":        "5 fit-content",
+    "flex-grow":   "5",
+    "flex-basis":  "fit-content",
+  },
+  {
+    "flex":        "calc(5% + 10px) 3",
+    "flex-grow":   "3",
+    "flex-basis":  "calc(5% + 10px)",
+  },
+
+  // Three Values --> Sets all three subproperties
+  // ---------------------------------------------
+  {
+    "flex":        "0 0 0",
+    "flex-grow":   "0",
+    "flex-shrink": "0",
+    "flex-basis":  "0px",
+  },
+  {
+    "flex":        "0.0 0.00 0px",
+    "flex-grow":   "0",
+    "flex-shrink": "0",
+    "flex-basis":  "0px",
+  },
+  {
+    "flex":        "0% 0 0",
+    "flex-grow":   "0",
+    "flex-shrink": "0",
+    "flex-basis":  "0%",
+  },
+  {
+    "flex":        "10px 3 2",
+    "flex-grow":   "3",
+    "flex-shrink": "2",
+    "flex-basis":  "10px",
+  },
+];
+
+function runFlexShorthandTest(aFlexShorthandTestcase)
+{
+  let content = document.getElementById("content");
+
+  let elem = document.createElement("div");
+
+  elem.style[gFlexDOMName] = aFlexShorthandTestcase[gFlexPropName];
+  content.appendChild(elem);
+
+  gFlexPropInfo.subproperties.forEach(function(aSubPropName) {
+    var expectedVal = aSubPropName in aFlexShorthandTestcase ?
+     aFlexShorthandTestcase[aSubPropName] :
+     gFlexShorthandDefaults[aSubPropName];
+
+    // Compare computed value against expected computed value (from testcase)
+    is(window.getComputedStyle(elem).getPropertyValue(aSubPropName),
+       expectedVal,
+       "Computed value of subproperty \"" + aSubPropName + "\" when we set \"" +
+       gFlexPropName + ": " + aFlexShorthandTestcase[gFlexPropName] + "\"");
+  });
+
+  // Clean up
+  content.removeChild(elem);
+}
+
+function main() {
+  gFlexShorthandTestcases.forEach(runFlexShorthandTest);
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_flexbox_focus_order.html b/layout/style/test/test_flexbox_focus_order.html
new file mode 100644
index 0000000000..0c1f023e3c
--- /dev/null
+++ b/layout/style/test/test_flexbox_focus_order.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=812687
+-->
+<head>
+  <title>Test for Bug 812687: focus order of reordered flex items</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style>
+    .container { display: flex; }
+
+    #focus1 { background: yellow;    }
+    #focus2 { background: lightgray; }
+    #focus3 { background: orange;    }
+    #focus4 { background: lightblue; }
+    #focus5 { background: pink;      }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=812687">Mozilla Bug 812687</a>
+<p id="display">
+  <a href="#" id="beforeContainer">Link before container</a>
+  <!-- This flex container's children are reordered visually with the "order"
+       CSS property, but their focus order (when tabbing through them) should
+       match their DOM order. So, #focus1 should receive focus before the other
+       flex items, even though it isn't visually the first flex item.  And so
+       on, up to #focus5, which is visually first (due to its negative "order"
+       value) but should be focused last (due to being last in the DOM). -->
+  <div class="container">
+    <a href="#" id="focus1">1</a>
+    <div><a href="#" id="focus2">2</a></div>
+    <div style="order: 100"><a href="#" id="focus3">3</a></div>
+    <div><a href="#" id="focus4">4</a></div>
+    <a href="#" id="focus5" style="order: -1">5</a>
+  </div>
+</p>
+<div id="content" style="display: none"></div>
+
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 812687 **/
+
+const gExpectedFocusedIds = [
+  "focus1",
+  "focus2",
+  "focus3",
+  "focus4",
+  "focus5"
+];
+
+function doTest() {
+  // First, we focus something just before the flex container:
+  document.getElementById('beforeContainer').focus();
+  is(document.activeElement, document.getElementById('beforeContainer'),
+     "explicitly-focused link should gain focus");
+
+  // And then we advance focus across the focusable things in the flex container
+  // and check that we traverse them in the expected order:
+  for (let expectedId of gExpectedFocusedIds) {
+    synthesizeKey("KEY_Tab");
+    is(document.activeElement, document.getElementById(expectedId),
+       "expecting element '#" + expectedId + "' to be focused");
+  }
+
+  SimpleTest.finish();
+}
+
+// Before we start, we have to bump Mac to make its 'tab'-key focus behavior
+// predicatble:
+function begin() {
+  SpecialPowers.pushPrefEnv({ set: [[ "accessibility.tabfocus", 7 ]] }, doTest);
+}
+
+SimpleTest.waitForExplicitFinish();
+addLoadEvent(begin);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_flexbox_layout.html b/layout/style/test/test_flexbox_layout.html
new file mode 100644
index 0000000000..49ee287aa2
--- /dev/null
+++ b/layout/style/test/test_flexbox_layout.html
@@ -0,0 +1,184 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=666041
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 666041</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="flexbox_layout_testcases.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=666041">Mozilla Bug 666041</a>
+<div id="display">
+  <div id="content">
+  </div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test for Bug 666041 **/
+
+/* Flexbox Layout Tests
+ * --------------------
+ * This mochitest exercises our implementation of the flexbox layout algorithm
+ * by creating a flex container, inserting some flexible children, and then
+ * verifying that the computed width of those children is what we expect.
+ *
+ * See flexbox_layout_testcases.js for the actual testcases & testcase format.
+ */
+
+function getComputedStyleWrapper(elem, prop)
+{
+  return window.getComputedStyle(elem).getPropertyValue(prop);
+}
+
+function setPossiblyAliasedProperty(aElem, aPropertyName, aPropertyValue,
+                                    aPropertyMapping)
+{
+  let actualPropertyName = (aPropertyName in aPropertyMapping ?
+                            aPropertyMapping[aPropertyName] : aPropertyName);
+
+  if (!gCSSProperties[actualPropertyName]) {
+    ok(false, "Bug in test: property '" + actualPropertyName +
+              "' doesn't exist in gCSSProperties");
+  } else {
+    let domPropertyName = gCSSProperties[actualPropertyName].domProp;
+    aElem.style[domPropertyName] = aPropertyValue;
+  }
+}
+
+// Helper function to strip "px" off the end of a string
+// (so that we can compare two lengths using "isfuzzy()" with an epsilon)
+function stripPx(aLengthInPx)
+{
+  let pxOffset = aLengthInPx.length - 2; // subtract off length of "px"
+
+  // Sanity-check the arg:
+  ok(pxOffset > 0 && aLengthInPx.substr(pxOffset) == "px",
+     "expecting value with 'px' units");
+
+  return aLengthInPx.substr(0, pxOffset);
+}
+
+// The main test function.
+// aFlexboxTestcase is an entry from the list in flexbox_layout_testcases.js
+function testFlexboxTestcase(aFlexboxTestcase, aFlexDirection, aPropertyMapping)
+{
+  let content = document.getElementById("content");
+
+  // Create flex container
+  let flexContainer = document.createElement("div");
+  flexContainer.style.display = "flex";
+  flexContainer.style.flexDirection = aFlexDirection;
+  setPossiblyAliasedProperty(flexContainer, "_main-size",
+                             gDefaultFlexContainerSize,
+                             aPropertyMapping);
+
+  // Apply testcase's customizations for flex container (if any).
+  if (aFlexboxTestcase.container_properties) {
+    for (let propName in aFlexboxTestcase.container_properties) {
+      let propValue = aFlexboxTestcase.container_properties[propName];
+      setPossiblyAliasedProperty(flexContainer, propName, propValue,
+                                 aPropertyMapping);
+    }
+  }
+
+  // Create & append flex items
+  aFlexboxTestcase.items.forEach(function(aChildSpec) {
+    // Create an element for our item
+    let child = document.createElement("div");
+
+    // Set all the specified properties on our item
+    for (let propName in aChildSpec) {
+      // aChildSpec[propName] is either a specified value,
+      // or an array of [specifiedValue, computedValue]
+      let specifiedValue = Array.isArray(aChildSpec[propName]) ?
+        aChildSpec[propName][0] :
+        aChildSpec[propName];
+
+      // SANITY CHECK:
+      if (Array.isArray(aChildSpec[propName])) {
+        ok(aChildSpec[propName].length >= 2 &&
+           aChildSpec[propName].length <= 3,
+           "unexpected number of elements in array within child spec");
+      }
+
+      if (specifiedValue !== null) {
+        setPossiblyAliasedProperty(child, propName, specifiedValue,
+                                   aPropertyMapping);
+      }
+    }
+
+    // Append the item to the flex container
+    flexContainer.appendChild(child);
+  });
+
+  // Append the flex container
+  content.appendChild(flexContainer);
+
+  // NOW: Test the computed style on the flex items
+  let child = flexContainer.firstChild;
+  for (let i = 0; i < aFlexboxTestcase.items.length; i++) {
+    if (!child) { // sanity
+      ok(false, "should have created a child for each child-spec");
+    }
+
+    let childSpec = aFlexboxTestcase.items[i];
+    for (let propName in childSpec) {
+      if (Array.isArray(childSpec[propName])) {
+        let expectedVal = childSpec[propName][1];
+        let actualPropName = (propName in aPropertyMapping ?
+                              aPropertyMapping[propName] : propName);
+        let actualVal = getComputedStyleWrapper(child, actualPropName);
+        let message = "computed value of '" + actualPropName +
+                      "' should match expected";
+
+        if (childSpec[propName].length > 2) {
+          // 3rd entry in array is epsilon
+          // Need to strip off "px" units in order to use epsilon:
+          let actualValNoPx = stripPx(actualVal);
+          let expectedValNoPx = stripPx(expectedVal);
+          isfuzzy(actualValNoPx, expectedValNoPx,
+                  childSpec[propName][2], message);
+        } else {
+          is(actualVal, expectedVal, message);
+        }
+      }
+    }
+
+    child = child.nextSibling;
+  }
+
+  // Clean up: drop the flex container.
+  content.removeChild(flexContainer);
+}
+
+function main()
+{
+  gFlexboxTestcases.forEach(
+    function(aTestcase) {
+      testFlexboxTestcase(aTestcase, "",
+                          gRowPropertyMapping);
+      testFlexboxTestcase(aTestcase, "row",
+                          gRowPropertyMapping);
+      testFlexboxTestcase(aTestcase, "row-reverse",
+                          gRowReversePropertyMapping);
+      testFlexboxTestcase(aTestcase, "column",
+                          gColumnPropertyMapping);
+      testFlexboxTestcase(aTestcase, "column-reverse",
+                          gColumnReversePropertyMapping);
+    }
+  );
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_flexbox_order.html b/layout/style/test/test_flexbox_order.html
new file mode 100644
index 0000000000..64b5431da8
--- /dev/null
+++ b/layout/style/test/test_flexbox_order.html
@@ -0,0 +1,194 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=666041
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 666041</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+    div.ref {
+      display: none;
+      height: 30px;
+    }
+
+    refA, refB, refC {
+      display: block;
+      float: left;
+    }
+
+    div#a, refA {
+      background: lightgreen;
+      width: 20px;
+      height: 30px;
+    }
+    div#b, refB {
+      background: orange;
+      width: 30px;
+      height: 30px;
+    }
+    div#c, refC {
+      background: blue;
+      width: 50px;
+      height: 30px;
+    }
+    div#flexContainer {
+      display: flex;
+      width: 100px;
+      height: 30px;
+    }
+    div#flexContainerParent {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=666041">Mozilla Bug 666041</a>
+<div id="display">
+
+  <!-- Reference cases (display:none; only shown during initRefSnapshots) -->
+  <div id="references">
+    <div class="ref" id="abc"><refA></refA><refB></refB><refC></refC></div>
+    <div class="ref" id="acb"><refA></refA><refC></refC><refB></refB></div>
+    <div class="ref" id="bac"><refB></refB><refA></refA><refC></refC></div>
+    <div class="ref" id="bca"><refB></refB><refC></refC><refA></refA></div>
+    <div class="ref" id="cab"><refC></refC><refA></refA><refB></refB></div>
+    <div class="ref" id="cba"><refC></refC><refB></refB><refA></refA></div>
+  </div>
+
+  <div id="flexContainerParent">
+    <!-- The flex container that we'll be testing
+         (its parent is display:none initially) -->
+    <div id="flexContainer">
+      <div id="a"></div>
+      <div id="b"></div>
+      <div id="c"></div>
+    </div>
+  </div>
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test for Bug 666041 **/
+
+/* This testcase ensures that we honor the "order" property when ordering
+ * flex items within a flex container.
+ *
+ * Note: The items in this testcase don't overlap, so this testcase does _not_
+ * test paint ordering.  It only tests horizontal ordering in a flex container.
+ */
+
+// DATA
+// ----
+
+// This will store snapshots of our reference divs
+let gRefSnapshots = {};
+
+// These are the sets of 'order' values that we'll test.
+// The first three values in each array are the 'order' values that we'll
+// assign to elements a, b, and c (respectively).  The final value in each
+// array is the ID of the expected reference rendering.
+let gOrderTestcases = [
+  // The 6 basic permutations:
+  [ 1, 2, 3, "abc"],
+  [ 1, 3, 2, "acb"],
+  [ 2, 1, 3, "bac"],
+  [ 2, 3, 1, "cab"],
+  [ 3, 1, 2, "bca"],
+  [ 3, 2, 1, "cba"],
+
+  // Test negative values
+  [ 1, -5, -2, "bca"],
+  [ -50, 0, -2, "acb"],
+
+  // Non-integers should be ignored.
+  // (So, they'll leave their div with the initial 'order' value, which is 0.)
+  [ 1,   1.5, 2,   "bac"],
+  [ 2.5, 3.4, 1,   "abc"],
+  [ 0.5, 1,   1.5, "acb"],
+
+  // Decimal values that happen to be equal to integers (e.g. "3.0") are still
+  // <numbers>, and are _not_ <integers>.
+  //  Source: http://www.w3.org/TR/CSS21/syndata.html#value-def-integer
+  // (So, they'll leave their div with the initial 'order' value, which is 0.)
+  // (NOTE: We have to use quotes around "3.0" and "2.0" to be sure JS doesn't
+  // coerce them into integers before we get a chance to set them in CSS.)
+  [ "3.0", "2.0", "1.0", "abc"],
+  [ 3, "2.0", 1, "bca"],
+];
+
+// FUNCTIONS
+// ---------
+
+function initRefSnapshots() {
+  let refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
+  for (let id of refIds) {
+    let elem = document.getElementById(id);
+    elem.style.display = "block";
+    gRefSnapshots[id] = snapshotWindow(window, false);
+    elem.style.display = "";
+  }
+}
+
+function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
+  let compareResult = compareSnapshots(aSnap1, aSnap2, true);
+  ok(compareResult[0],
+     "flex container rendering should match expected (" + aMsg +")");
+  if (!compareResult[0]) {
+    todo(false, "TESTCASE: " + compareResult[1]);
+    todo(false, "REFERENCE: "+ compareResult[2]);
+  }
+}
+
+function runOrderTestcase(aOrderTestcase) {
+  // Sanity-check
+  ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
+  is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
+
+  document.getElementById("a").style.order = aOrderTestcase[0];
+  document.getElementById("b").style.order = aOrderTestcase[1];
+  document.getElementById("c").style.order = aOrderTestcase[2];
+
+  let snapshot = snapshotWindow(window, false);
+  complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
+                            aOrderTestcase);
+
+  // Clean up
+  for (let id of ["a", "b", "c"]) {
+    document.getElementById(id).style.order = "";
+  }
+}
+
+// Main Function
+function main() {
+  initRefSnapshots();
+
+  // un-hide the flex container's parent
+  let flexContainerParent = document.getElementById("flexContainerParent");
+  flexContainerParent.style.display = "block";
+
+  // Initial sanity-check: should be in expected document order
+  let initialSnapshot = snapshotWindow(window, false);
+  complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots.abc,
+                            "initial flex container rendering, " +
+                            "no 'order' value yet");
+
+  // OK, now we run our tests
+  gOrderTestcases.forEach(runOrderTestcase);
+
+  // Re-hide the flex container at the end
+  flexContainerParent.style.display = "";
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_flexbox_order_abspos.html b/layout/style/test/test_flexbox_order_abspos.html
new file mode 100644
index 0000000000..bf4c99aa76
--- /dev/null
+++ b/layout/style/test/test_flexbox_order_abspos.html
@@ -0,0 +1,217 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1345873
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1345873</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+    div.ref {
+      display: none;
+      height: 30px;
+    }
+
+    refA, refB, refC {
+      display: block;
+      float: left;
+    }
+
+    div#a, refA {
+      background: lightgreen;
+      width: 20px;
+      height: 30px;
+    }
+    div#b, refB {
+      background: orange;
+      width: 30px;
+      height: 30px;
+    }
+    div#c, refC {
+      background: blue;
+      width: 50px;
+      height: 30px;
+    }
+    div#flexContainer {
+      display: flex;
+      width: 100px;
+      height: 30px;
+    }
+    div#flexContainerParent {
+      display: none;
+    }
+    .abs {
+      position: absolute !important;
+      width: 15px  !important;
+      height: 15px !important;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1345873">Mozilla Bug 1345873</a>
+<div id="display">
+
+  <!-- Reference cases (display:none; only shown during initRefSnapshots) -->
+  <div id="references">
+    <div class="ref" id="abc"><refA></refA><refB></refB><refC></refC></div>
+    <div class="ref" id="Abc">
+      <refA class="abs"></refA><refB></refB><refC></refC></div>
+    <div class="ref" id="Bac">
+      <refB class="abs"></refB><refA></refA><refC></refC></div>
+    <div class="ref" id="Bca">
+      <refB class="abs"></refB><refC></refC><refA></refA></div>
+    <div class="ref" id="Cab">
+      <refC class="abs"></refC><refA></refA><refB></refB></div>
+    <div class="ref" id="ABc">
+      <refA class="abs"></refA><refB class="abs"></refB><refC></refC></div>
+    <div class="ref" id="ACb">
+      <refA class="abs"></refA><refC class="abs"></refC><refB></refB></div>
+    <div class="ref" id="BCa">
+      <refB class="abs"></refB><refC class="abs"></refC><refA></refA></div>
+    <div class="ref" id="ABC">
+      <refA class="abs"></refA><refB class="abs"></refB><refC class="abs"></refC></div>
+  </div>
+
+  <div id="flexContainerParent">
+    <!-- The flex container that we'll be testing
+         (its parent is display:none initially) -->
+    <div id="flexContainer">
+      <div id="a"></div>
+      <div id="b"></div>
+      <div id="c"></div>
+    </div>
+  </div>
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test for Bug 1345873 **/
+
+/* This testcase ensures that we honor the "order" property when ordering
+ * flex items within a flex container.
+ *
+ * Note: The items in this testcase don't overlap, so this testcase does _not_
+ * test paint ordering.  It only tests horizontal ordering in a flex container.
+ */
+
+// DATA
+// ----
+
+// This will store snapshots of our reference divs
+let gRefSnapshots = {};
+
+// These are the sets of 'order' values that we'll test.
+// * The first three values in each array are the 'order' values that we'll
+// assign to elements a, b, and c (respectively).
+// * The next value is a string containing the concatenated IDs of any
+// elements that should be absolutely positioned.
+// * The final value in each array is the ID of the expected reference
+// rendering. (By convention, in those IDs, capital = abspos)
+var gOrderTestcases = [
+  // Just one child is abspos:
+  [ 1, 2, 3, "a", "Abc"],
+  [ 1, 2, 3, "b", "Bac"],
+  [ 1, 2, 3, "c", "Cab"],
+  [ 2, 3, 1, "b", "Bca"],
+  [ 3, 1, 1, "b", "Bca"],
+
+  // Two children are abspos:
+  // (Note: "order" doesn't influence position or paint order for abspos
+  // children - only for (in-flow) flex items.)
+  [ 1, 2, 3, "ab", "ABc"],
+  [ 2, 1, 3, "ab", "ABc"],
+  [ 1, 2, 3, "ac", "ACb"],
+  [ 3, 2, 1, "ac", "ACb"],
+  [ 3, 2, 1, "bc", "BCa"],
+
+  // All three children are abspos:
+  // (Rendering always the same regardless of "order" values)
+  [ 1, 2, 3, "abc", "ABC"],
+  [ 3, 1, 2, "abc", "ABC"],
+  [ 3, 2, 1, "abc", "ABC"],
+];
+
+// FUNCTIONS
+// ---------
+
+function initRefSnapshots() {
+  let refIds = ["abc",
+                "Abc", "Bac", "Bca", "Cab",
+                "ABc", "ACb", "BCa",
+                "ABC"];
+  for (let id of refIds) {
+    let elem = document.getElementById(id);
+    elem.style.display = "block";
+    gRefSnapshots[id] = snapshotWindow(window, false);
+    elem.style.display = "";
+  }
+}
+
+function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
+  let compareResult = compareSnapshots(aSnap1, aSnap2, true);
+  ok(compareResult[0],
+     "flex container rendering should match expected (" + aMsg +")");
+  if (!compareResult[0]) {
+    todo(false, "TESTCASE: " + compareResult[1]);
+    todo(false, "REFERENCE: "+ compareResult[2]);
+  }
+}
+
+function runOrderTestcase(aOrderTestcase) {
+  // Sanity-check
+  ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
+  is(aOrderTestcase.length, 5, "expecting testcase to have 5 elements");
+
+  document.getElementById("a").style.order = aOrderTestcase[0];
+  document.getElementById("b").style.order = aOrderTestcase[1];
+  document.getElementById("c").style.order = aOrderTestcase[2];
+
+  let idsToMakeAbspos = aOrderTestcase[3].split("");
+  for (let absPosId of idsToMakeAbspos) {
+    document.getElementById(absPosId).classList.add("abs");
+  }
+
+  let snapshot = snapshotWindow(window, false);
+  complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[4]],
+                            aOrderTestcase);
+
+  // Clean up
+  for (let id of ["a", "b", "c"]) {
+    document.getElementById(id).style.order = "";
+    document.getElementById(id).classList.remove("abs");
+  }
+}
+
+// Main Function
+function main() {
+  initRefSnapshots();
+
+  // un-hide the flex container's parent
+  let flexContainerParent = document.getElementById("flexContainerParent");
+  flexContainerParent.style.display = "block";
+
+  // Initial sanity-check: should be in expected document order
+  let initialSnapshot = snapshotWindow(window, false);
+  complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots.abc,
+                            "initial flex container rendering, " +
+                            "no 'order' value yet");
+
+  // OK, now we run our tests
+  gOrderTestcases.forEach(runOrderTestcase);
+
+  // Re-hide the flex container at the end
+  flexContainerParent.style.display = "";
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_flexbox_order_table.html b/layout/style/test/test_flexbox_order_table.html
new file mode 100644
index 0000000000..2423d5d6d6
--- /dev/null
+++ b/layout/style/test/test_flexbox_order_table.html
@@ -0,0 +1,198 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=799775
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 799775</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+    div.ref {
+      display: none;
+      height: 30px;
+    }
+
+    refA, refB, refC {
+      display: block;
+      float: left;
+    }
+
+    div#a, div#b, div#c {
+      display: table;
+    }
+
+    div#a, refA {
+      background: lightgreen;
+      width: 20px;
+      height: 30px;
+    }
+    div#b, refB {
+      background: orange;
+      width: 30px;
+      height: 30px;
+    }
+    div#c, refC {
+      background: blue;
+      width: 50px;
+      height: 30px;
+    }
+    div#flexContainer {
+      display: flex;
+      width: 100px;
+      height: 30px;
+    }
+    div#flexContainerParent {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=799775">Mozilla Bug 799775</a>
+<div id="display">
+
+  <!-- Reference cases (display:none; only shown during initRefSnapshots) -->
+  <div id="references">
+    <div class="ref" id="abc"><refA></refA><refB></refB><refC></refC></div>
+    <div class="ref" id="acb"><refA></refA><refC></refC><refB></refB></div>
+    <div class="ref" id="bac"><refB></refB><refA></refA><refC></refC></div>
+    <div class="ref" id="bca"><refB></refB><refC></refC><refA></refA></div>
+    <div class="ref" id="cab"><refC></refC><refA></refA><refB></refB></div>
+    <div class="ref" id="cba"><refC></refC><refB></refB><refA></refA></div>
+  </div>
+
+  <div id="flexContainerParent">
+    <!-- The flex container that we'll be testing
+         (its parent is display:none initially) -->
+    <div id="flexContainer">
+      <div id="a"></div>
+      <div id="b"></div>
+      <div id="c"></div>
+    </div>
+  </div>
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test for Bug 799775 **/
+
+/* This testcase ensures that we honor the "order" property when ordering
+ * tables as flex items within a flex container.
+ *
+ * Note: The items in this testcase don't overlap, so this testcase does _not_
+ * test paint ordering.  It only tests horizontal ordering in a flex container.
+ */
+
+// DATA
+// ----
+
+// This will store snapshots of our reference divs
+let gRefSnapshots = {};
+
+// These are the sets of 'order' values that we'll test.
+// The first three values in each array are the 'order' values that we'll
+// assign to elements a, b, and c (respectively).  The final value in each
+// array is the ID of the expected reference rendering.
+let gOrderTestcases = [
+  // The 6 basic permutations:
+  [ 1, 2, 3, "abc"],
+  [ 1, 3, 2, "acb"],
+  [ 2, 1, 3, "bac"],
+  [ 2, 3, 1, "cab"],
+  [ 3, 1, 2, "bca"],
+  [ 3, 2, 1, "cba"],
+
+  // Test negative values
+  [ 1, -5, -2, "bca"],
+  [ -50, 0, -2, "acb"],
+
+  // Non-integers should be ignored.
+  // (So, they'll leave their div with the initial 'order' value, which is 0.)
+  [ 1,   1.5, 2,   "bac"],
+  [ 2.5, 3.4, 1,   "abc"],
+  [ 0.5, 1,   1.5, "acb"],
+
+  // Decimal values that happen to be equal to integers (e.g. "3.0") are still
+  // <numbers>, and are _not_ <integers>.
+  //  Source: http://www.w3.org/TR/CSS21/syndata.html#value-def-integer
+  // (So, they'll leave their div with the initial 'order' value, which is 0.)
+  // (NOTE: We have to use quotes around "3.0" and "2.0" to be sure JS doesn't
+  // coerce them into integers before we get a chance to set them in CSS.)
+  [ "3.0", "2.0", "1.0", "abc"],
+  [ 3, "2.0", 1, "bca"],
+];
+
+// FUNCTIONS
+// ---------
+
+function initRefSnapshots() {
+  let refIds = ["abc", "acb", "bac", "bca", "cab", "cba"];
+  for (let id of refIds) {
+    let elem = document.getElementById(id);
+    elem.style.display = "block";
+    gRefSnapshots[id] = snapshotWindow(window, false);
+    elem.style.display = "";
+  }
+}
+
+function complainIfSnapshotsDiffer(aSnap1, aSnap2, aMsg) {
+  let compareResult = compareSnapshots(aSnap1, aSnap2, true);
+  ok(compareResult[0],
+     "flex container rendering should match expected (" + aMsg +")");
+  if (!compareResult[0]) {
+    todo(false, "TESTCASE: " + compareResult[1]);
+    todo(false, "REFERENCE: "+ compareResult[2]);
+  }
+}
+
+function runOrderTestcase(aOrderTestcase) {
+  // Sanity-check
+  ok(Array.isArray(aOrderTestcase), "expecting testcase to be an array");
+  is(aOrderTestcase.length, 4, "expecting testcase to have 4 elements");
+
+  document.getElementById("a").style.order = aOrderTestcase[0];
+  document.getElementById("b").style.order = aOrderTestcase[1];
+  document.getElementById("c").style.order = aOrderTestcase[2];
+
+  let snapshot = snapshotWindow(window, false);
+  complainIfSnapshotsDiffer(snapshot, gRefSnapshots[aOrderTestcase[3]],
+                            aOrderTestcase);
+
+  // Clean up
+  for (let id of ["a", "b", "c"]) {
+    document.getElementById(id).style.order = "";
+  }
+}
+
+// Main Function
+function main() {
+  initRefSnapshots();
+
+  // un-hide the flex container's parent
+  let flexContainerParent = document.getElementById("flexContainerParent");
+  flexContainerParent.style.display = "block";
+
+  // Initial sanity-check: should be in expected document order
+  let initialSnapshot = snapshotWindow(window, false);
+  complainIfSnapshotsDiffer(initialSnapshot, gRefSnapshots.abc,
+                            "initial flex container rendering, " +
+                            "no 'order' value yet");
+
+  // OK, now we run our tests
+  gOrderTestcases.forEach(runOrderTestcase);
+
+  // Re-hide the flex container at the end
+  flexContainerParent.style.display = "";
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_flexbox_reflow_counts.html b/layout/style/test/test_flexbox_reflow_counts.html
new file mode 100644
index 0000000000..a8f4913f7d
--- /dev/null
+++ b/layout/style/test/test_flexbox_reflow_counts.html
@@ -0,0 +1,199 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1142686
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1142686</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+    .flex {
+      display: flex;
+    }
+    #outerFlex {
+      border: 1px solid black;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1142686">Mozilla Bug 1142686</a>
+<div id="display">
+  <div id="content">
+    <div class="flex" id="outerFlex">
+      <div class="flex" id="midFlex">
+        <div id="innerBlock">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/** Test for Bug 1142686 **/
+
+/**
+ * This test checks how many reflows are required, when we make a change inside
+ * a set of two nested flex containers, with various styles applied to
+ * the containers & innermost child.  Some flex layout operations require two
+ * passes (which can cause exponential blowup). This test is intended to verify
+ * that certain configurations do *not* require two-pass layout, by comparing
+ * the reflow-count for a more-complex scenario against a less-complex scenario.
+ *
+ * We have two nested flex containers around an initially-empty block. For each
+ * measurement, we put some text in the block, and we see how many frame-reflow
+ * operations occur as a result.
+ */
+
+const gUtils = SpecialPowers.getDOMWindowUtils(window);
+
+// The elements:
+const gOuterFlex = document.getElementById("outerFlex");
+const gMidFlex = document.getElementById("midFlex");
+const gInnerBlock = document.getElementById("innerBlock");
+
+// This cleanup helper-function removes all children from 'parent'
+// except for 'childToPreserve' (if specified)
+function removeChildrenExcept(parent, childToPreserve)
+{
+  if (childToPreserve && childToPreserve.parentNode != parent) {
+    // This is just a sanity/integrity-check -- if this fails, it's probably a
+    // bug in this test rather than in the code.  I'm not checking this via
+    // e.g. "is(childToPreserve.parentNode, parent)", because this *should*
+    // always pass, and each "pass" is not interesting here since it's a
+    // sanity-check.  It's only interesting/noteworthy if it fails. So, to
+    // avoid bloating this test's passed-subtest-count & output, we only bother
+    // reporting on this in the case where something's wrong.
+    ok(false, "bug in test; 'childToPreserve' should be child of 'parent'");
+  }
+
+  // For simplicity, we just remove *all children* and then reappend
+  // childToPreserve as the sole child.
+  while (parent.firstChild) {
+    parent.removeChild(parent.firstChild);
+  }
+  if (childToPreserve) {
+    parent.appendChild(childToPreserve);
+  }
+}
+
+// Appends 'childCount' new children to 'parent'
+function addNChildren(parent, childCount)
+{
+  for (let i = 0; i < childCount; i++) {
+    let newChild = document.createElement("div");
+    // Give the new child some text so it's got a nonzero content-size:
+    newChild.append("a");
+    parent.appendChild(newChild);
+  }
+}
+
+// Undoes whatever styling customizations and DOM insertions that a given
+// testcase has done, to prepare for running the next testcase.
+function cleanup()
+{
+  gOuterFlex.style = gMidFlex.style = gInnerBlock.style = "";
+  removeChildrenExcept(gInnerBlock);
+  removeChildrenExcept(gMidFlex, gInnerBlock);
+  removeChildrenExcept(gOuterFlex, gMidFlex);
+}
+
+// Each testcase here has a label (used in test output), a function to set up
+// the testcase, and (optionally) a function to set up the reference case.
+let gTestcases = [
+ {
+    label : "border on flex items",
+    addTestStyle : function() {
+      gMidFlex.style.border = gInnerBlock.style.border = "3px solid black";
+    },
+ },
+ {
+    label : "padding on flex items",
+    addTestStyle : function() {
+      gMidFlex.style.padding = gInnerBlock.style.padding = "5px";
+    },
+ },
+ {
+    label : "margin on flex items",
+    addTestStyle : function() {
+      gMidFlex.style.margin = gInnerBlock.style.margin = "2px";
+    },
+ },
+ {
+    // When we make a change in one flex item, the number of reflows should not
+    // scale with its number of siblings (as long as those siblings' sizes
+    // aren't impacted by the change):
+    label : "additional flex items in outer flex container",
+
+    // Compare 5 bonus flex items vs. 1 bonus flex item:
+    addTestStyle : function() {
+      addNChildren(gOuterFlex, 5);
+    },
+    addReferenceStyle : function() {
+      addNChildren(gOuterFlex, 1);
+    },
+ },
+ {
+    // (As above, but now the bonus flex items are one step deeper in the tree,
+    // on the nested flex container rather than the outer one)
+    label : "additional flex items in nested flex container",
+    addTestStyle : function() {
+      addNChildren(gMidFlex, 5);
+    },
+    addReferenceStyle : function() {
+      addNChildren(gMidFlex, 1);
+    },
+ },
+];
+
+// Flush layout & return the global frame-reflow-count
+function getReflowCount()
+{
+  let unusedVal = gOuterFlex.offsetHeight; // flush layout
+  return gUtils.framesReflowed;
+}
+
+// This function adds some text inside of gInnerBlock, and returns the number
+// of frames that need to be reflowed as a result.
+function makeTweakAndCountReflows()
+{
+  let beforeCount = getReflowCount();
+  gInnerBlock.appendChild(document.createTextNode("hello"));
+  let afterCount = getReflowCount();
+
+  let numReflows = afterCount - beforeCount;
+  if (numReflows <= 0) {
+    ok(false, "something's wrong -- we should've reflowed *something*");
+  }
+  return numReflows;
+}
+
+// Given a testcase (from gTestcases), this function verifies that the
+// testcase scenario requires the same number of reflows as the reference
+// scenario.
+function runOneTest(aTestcase)
+{
+  aTestcase.addTestStyle();
+  let numTestcaseReflows = makeTweakAndCountReflows();
+  cleanup();
+
+  if (aTestcase.addReferenceStyle) {
+    aTestcase.addReferenceStyle();
+  }
+  let numReferenceReflows = makeTweakAndCountReflows();
+  cleanup();
+
+  is(numTestcaseReflows, numReferenceReflows,
+     "Testcase & reference case should require same number of reflows" +
+     " (testcase label: '" + aTestcase.label + "')");
+}
+
+gTestcases.forEach(runOneTest);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_flushing_frame.html b/layout/style/test/test_flushing_frame.html
new file mode 100644
index 0000000000..fa6d751647
--- /dev/null
+++ b/layout/style/test/test_flushing_frame.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>
+  Test for bug 1545516: We don't flush layout unnecessarily on the parent
+  document when the frame is already disconnected.
+</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<div id="content"></div>
+<script>
+  SimpleTest.waitForExplicitFinish();
+  const iframe = document.createElement("iframe");
+  const content = document.querySelector("#content");
+  const parentUtils = SpecialPowers.getDOMWindowUtils(window);
+  iframe.onload = function() {
+    const win = iframe.contentWindow;
+    iframe.offsetTop; // flush layout
+    content.style.display = "inline"; // Dirty style with something that will reframe.
+
+    const previousConstructCount = parentUtils.framesConstructed;
+    let pagehideRan = false;
+    win.addEventListener("pagehide", function() {
+      pagehideRan = true;
+      win.foo = win.innerWidth;
+      is(parentUtils.framesConstructed, previousConstructCount, "innerWidth shouldn't have flushed parent document layout")
+      win.bar = win.document.documentElement.offsetHeight;
+      is(parentUtils.framesConstructed, previousConstructCount, "offsetHeight shouldn't have flushed parent document layout")
+      win.baz = win.getComputedStyle(win.document.documentElement).color;
+      is(parentUtils.framesConstructed, previousConstructCount, "getComputedStyle shouldn't have flushed parent document layout")
+    });
+
+    iframe.remove(); // Remove the iframe
+    is(pagehideRan, true, "pagehide handler should've ran");
+    is(parentUtils.framesConstructed, previousConstructCount, "Nothing should've flushed the parent document layout yet");
+    content.offsetTop;
+    isnot(parentUtils.framesConstructed, previousConstructCount, "We should've flushed layout now");
+    SimpleTest.finish();
+  };
+  document.body.appendChild(iframe);
+</script>
diff --git a/layout/style/test/test_font_face_cascade.html b/layout/style/test/test_font_face_cascade.html
new file mode 100644
index 0000000000..0d98f9d606
--- /dev/null
+++ b/layout/style/test/test_font_face_cascade.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<title>Test that @font-face rules from different origins cascade correctly</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+<script>
+let io = SpecialPowers.Cc["@mozilla.org/network/io-service;1"]
+  .getService(SpecialPowers.Ci.nsIIOService);
+
+let utils = SpecialPowers.getDOMWindowUtils(window);
+
+function load_sheet(sheet_text, level) {
+  if (level != "AGENT_SHEET" && level != "USER_SHEET" && level != "AUTHOR_SHEET") {
+    throw "unknown level";
+  }
+
+  let uri = io.newURI("data:text/css," + encodeURI(sheet_text));
+  utils.loadSheet(uri, utils[level]);
+}
+
+load_sheet(
+  "@font-face { font-family: TestAgent; src: url(about:invalid); }",
+  "AGENT_SHEET");
+
+load_sheet(
+  "@font-face { font-family: TestAuthor; src: url(about:invalid); }",
+  "AUTHOR_SHEET");
+
+load_sheet(
+  "@font-face { font-family: TestUser; src: url(about:invalid); }",
+  "USER_SHEET");
+
+is([...document.fonts].map(f => f.family).join(" "),
+   'TestAuthor',
+   "document.fonts only contains author @font-face rules");
+</script>
diff --git a/layout/style/test/test_font_face_parser.html b/layout/style/test/test_font_face_parser.html
new file mode 100644
index 0000000000..9158ead31a
--- /dev/null
+++ b/layout/style/test/test_font_face_parser.html
@@ -0,0 +1,385 @@
+<!DOCTYPE HTML><html>
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=441469 -->
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title>Test of @font-face parser</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<p>@font-face parsing (<a
+  target="_blank"
+  href="https://bugzilla.mozilla.org/show_bug.cgi?id=441469"
+>bug 441469</a>)</p>
+<pre id="display"></pre>
+<style type="text/css" id="testbox"></style>
+<script class="testbody" type="text/javascript">
+function runTest() {
+  function _(b) { return "@font-face { " + b + " }"; };
+  var testset = [
+    // Complete nonsense - shouldn't make a font-face rule at all.
+    { rule: "@font-face;" },
+    { rule: "font-face { }" },
+    { rule: "@fontface { }" },
+    { rule: "@namespace foo url(http://example.com/foo);" },
+
+    // Empty rule.
+    { rule: "@font-face { }",   d: {} },
+    { rule: "@font-face {",     d: {} },
+    { rule: "@font-face { ; }", d: {}, noncanonical: true },
+
+    // Correct font-family.
+    { rule: _("font-family: \"Mouse\";"), d: {"font-family" : "\"Mouse\""} },
+    { rule: _("font-family: \"Mouse\""),  d: {"font-family" : "\"Mouse\""},
+      noncanonical: true },
+    { rule: _("font-family: Mouse;"),  d: {"font-family" : "Mouse" },
+      noncanonical: true },
+    { rule: _("font-family: Mouse"),  d: {"font-family" : "Mouse" },
+      noncanonical: true },
+
+    // Correct but unusual font-family.
+    { rule: _("font-family: Hoefler Text;"),
+      d: {"font-family" : "Hoefler Text"},
+      noncanonical: true },
+
+    // Incorrect font-family.
+    { rule: _("font-family:"),        d: {} },
+    { rule: _("font-family \"Mouse\""), d: {} },
+    { rule: _("font-family: *"),      d: {} },
+    { rule: _("font-family: Mouse, Rat"), d: {} },
+    { rule: _("font-family: sans-serif"), d: {} },
+
+    // Correct font-style.
+    { rule: _("font-style: normal;"),  d: {"font-style" : "normal"} },
+    { rule: _("font-style: italic;"),  d: {"font-style" : "italic"} },
+    { rule: _("font-style: oblique;"),  d: {"font-style" : "oblique"} },
+
+    // Correct font-weight.
+    { rule: _("font-weight: 100;"),  d: {"font-weight" : "100"} },
+    { rule: _("font-weight: 200;"),  d: {"font-weight" : "200"} },
+    { rule: _("font-weight: 300;"),  d: {"font-weight" : "300"} },
+    { rule: _("font-weight: 400;"),  d: {"font-weight" : "400"} },
+    { rule: _("font-weight: 500;"),  d: {"font-weight" : "500"} },
+    { rule: _("font-weight: 600;"),  d: {"font-weight" : "600"} },
+    { rule: _("font-weight: 700;"),  d: {"font-weight" : "700"} },
+    { rule: _("font-weight: 800;"),  d: {"font-weight" : "800"} },
+    { rule: _("font-weight: 900;"),  d: {"font-weight" : "900"} },
+    { rule: _("font-weight: normal;"),  d: {"font-weight" : "normal"} },
+    { rule: _("font-weight: bold;"),    d: {"font-weight" : "bold"} },
+
+    // Incorrect font-weight.
+    { rule: _("font-weight: bolder;"),  d: {} },
+    { rule: _("font-weight: lighter;"), d: {} },
+
+    // Correct font-stretch.
+    { rule: _("font-stretch: ultra-condensed;"),
+      d: {"font-stretch" : "ultra-condensed"} },
+    { rule: _("font-stretch: extra-condensed;"),
+      d: {"font-stretch" : "extra-condensed"} },
+    { rule: _("font-stretch: condensed;"),
+      d: {"font-stretch" : "condensed"} },
+    { rule: _("font-stretch: semi-condensed;"),
+      d: {"font-stretch" : "semi-condensed"} },
+    { rule: _("font-stretch: normal;"),
+      d: {"font-stretch" : "normal"} },
+    { rule: _("font-stretch: semi-expanded;"),
+      d: {"font-stretch" : "semi-expanded"} },
+    { rule: _("font-stretch: expanded;"),
+      d: {"font-stretch" : "expanded"} },
+    { rule: _("font-stretch: extra-expanded;"),
+      d: {"font-stretch" : "extra-expanded"} },
+    { rule: _("font-stretch: ultra-expanded;"),
+      d: {"font-stretch" : "ultra-expanded"} },
+
+    // Incorrect font-stretch.
+    { rule: _("font-stretch: wider;"),  d: {} },
+    { rule: _("font-stretch: narrower;"), d: {} },
+
+    // Correct src:
+    { rule: _("src: url(\"/fonts/Mouse\");"),
+      d: { "src" : "url(\"/fonts/Mouse\")" } },
+    { rule: _("src: url(/fonts/Mouse);"),
+      d: { "src" : "url(\"/fonts/Mouse\")" }, noncanonical: true },
+
+    { rule: _("src: url(\"/fonts/Mouse\") format(\"truetype\");"),
+      d: { "src" : "url(\"/fonts/Mouse\") format(\"truetype\")" } },
+
+    { rule: _("src: url(\"/fonts/Mouse\"), url(\"/fonts/Rat\");"),
+      d: { "src" : "url(\"/fonts/Mouse\"), url(\"/fonts/Rat\")" } },
+
+    { rule: _("src: local(Mouse), url(\"/fonts/Mouse\");"),
+      d: { "src" : "local(Mouse), url(\"/fonts/Mouse\")" },
+      noncanonical: true },
+
+    { rule: _("src: local(\"老鼠\"), url(\"/fonts/Mouse\");"),
+      d: { "src" : "local(\"老鼠\"), url(\"/fonts/Mouse\")" } },
+
+    { rule: _("src: local(\"老鼠\"), url(\"/fonts/Mouse\") format(\"truetype\");"),
+      d: { "src" : "local(\"老鼠\"), url(\"/fonts/Mouse\") format(\"truetype\")" } },
+
+    { rule: _("src: url(\"/fonts/Mouse\") format(truetype);"),
+      d: { "src" : "url(\"/fonts/Mouse\") format(truetype)" } },
+
+    // Correct but unusual src:
+    { rule: _("src: local(Hoefler Text);"),
+      d: {"src" : "local(Hoefler Text)"}, noncanonical: true },
+
+    // Incorrect src:
+    { rule: _("src:"), d: {} },
+    { rule: _("src: \"/fonts/Mouse\";"), d: {} },
+    { rule: _("src: /fonts/Mouse;"), d: {} },
+    { rule: _("src: url(\"/fonts/Mouse\") format(\"truetype\",opentype);"), d: {} },
+    { rule: _("src: local(*);"), d: {} },
+    { rule: _("src: format(\"truetype\");"), d: {} },
+    { rule: _("src: local(Mouse) format(\"truetype\");"), d: {} },
+    { rule: _("src: local(Mouse, Rat);"), d: {} },
+    { rule: _("src: local(sans-serif);"), d: {} },
+    { rule: _("src: url(\"/fonts/Mouse\") format(\"truetype\", \"opentype\");"), d: {} },
+
+    // Repeated descriptors
+    { rule: _("font-weight: 700; font-weight: 200;"),
+      d: {"font-weight" : "200"},
+      noncanonical: true },
+    { rule: _("src: url(\"/fonts/Cat\"); src: url(\"/fonts/Mouse\");"),
+      d: { "src" : "url(\"/fonts/Mouse\")" },
+      noncanonical: true },
+    { rule: _("src: local(Cat); src: local(Mouse)"),
+      d: { "src" : "local(Mouse)" },
+      noncanonical: true },
+
+    // Correct parenthesis matching for local()
+    { rule: _("src: local(Mouse); src: local(Cat(); src: local(Rat); )"),
+      d: { "src" : "local(Mouse)" },
+      noncanonical: true },
+    { rule: _("src: local(Mouse); src: local(\"Cat\"; src: local(Rat); )"),
+      d: { "src" : "local(Mouse)" },
+      noncanonical: true },
+
+    // Correct parenthesis matching for format()
+    { rule: _("src: url(\"/fonts/Mouse\"); " +
+	      "src: url(\"/fonts/Cat\") format(Cat(); src: local(Rat); )"),
+      d: { "src" : "url(\"/fonts/Mouse\")" },
+      noncanonical: true },
+    { rule: _("src: url(\"/fonts/Mouse\"); " +
+	      "src: url(\"/fonts/Cat\") format(\"Cat\"; src: local(Rat); )"),
+      d: { "src" : "url(\"/fonts/Mouse\")" },
+      noncanonical: true },
+    { rule: _("src: url(\"/fonts/Mouse\"); " +
+	      "src: url(\"/fonts/Cat\") format((); src: local(Rat); )"),
+      d: { "src" : "url(\"/fonts/Mouse\")" },
+      noncanonical: true },
+
+    // Correct unicode-range:
+    { rule: _("unicode-range: U+A5;"), d: { "unicode-range" : "U+A5" } },
+    { rule: _("unicode-range: U+00A5;"),
+      d: { "unicode-range" : "U+A5" }, noncanonical: true },
+    { rule: _("unicode-range: U+00a5;"),
+      d: { "unicode-range" : "U+A5" }, noncanonical: true },
+    { rule: _("unicode-range: u+00a5;"),
+      d: { "unicode-range" : "U+A5" }, noncanonical: true },
+    { rule: _("unicode-range: U+0-FF;"),
+      d: { "unicode-range" : "U+0-FF" } },
+    { rule: _("unicode-range: U+00??;"),
+      d: { "unicode-range" : "U+0-FF" }, noncanonical: true },
+    { rule: _("unicode-range: U+?"),
+      d: { "unicode-range" : "U+0-F" }, noncanonical: true },
+    { rule: _("unicode-range: U+590-5ff;"),
+      d: { "unicode-range" : "U+590-5FF" }, noncanonical: true },
+
+    { rule: _("unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;"),
+      d: { "unicode-range" : "U+A5, U+4E00-9FFF, U+3000-30FF, U+FF00-FF9F" },
+      noncanonical: true },
+
+    { rule: _("unicode-range: U+104??;"),
+      d: { "unicode-range" : "U+10400-104FF" }, noncanonical: true },
+    { rule: _("unicode-range: U+320??, U+321??, U+322??, U+323??, U+324??, U+325??;"),
+      d: { "unicode-range" : "U+32000-320FF, U+32100-321FF, U+32200-322FF, U+32300-323FF, U+32400-324FF, U+32500-325FF" },
+      noncanonical: true },
+    { rule: _("unicode-range: U+100000-10ABCD;"),
+      d: { "unicode-range" : "U+100000-10ABCD" } },
+    { rule: _("unicode-range: U+0121 , U+1023"),
+      d: { "unicode-range" : "U+121, U+1023" }, noncanonical: true },
+    { rule: _("unicode-range: U+0121/**/, U+1023"),
+      d: { "unicode-range" : "U+121, U+1023" }, noncanonical: true },
+
+    // Incorrect unicode-range:
+    { rule: _("unicode-range:"), d: {} },
+    { rule: _("unicode-range: U+"), d: {} },
+    { rule: _("unicode-range: U+8FFFFFFF"), d: {} },
+    { rule: _("unicode-range: U+8FFF-7000"), d: {} },
+    { rule: _("unicode-range: U+8F??-9000"), d: {} },
+    { rule: _("unicode-range: U+9000-9???"), d: {} },
+    { rule: _("unicode-range: U+??00"), d: {} },
+    { rule: _("unicode-range: U+12345678?"), d: {} },
+    { rule: _("unicode-range: U+1????????"), d: {} },
+    { rule: _("unicode-range: twelve"), d: {} },
+    { rule: _("unicode-range: 1000"), d: {} },
+    { rule: _("unicode-range: 13??"), d: {} },
+    { rule: _("unicode-range: 1300-1377"), d: {} },
+    { rule: _("unicode-range: U-1000"), d: {} },
+    { rule: _("unicode-range: U+nnnn"), d: {} },
+    { rule: _("unicode-range: U+0121 U+1023"), d: {} },
+    { rule: _("unicode-range: U+ 0121"), d: {} },
+    { rule: _("unicode-range: U +0121"), d: {} },
+    { rule: _("unicode-range: U+0121-"), d: {} },
+    { rule: _("unicode-range: U+0121- 1023"), d: {} },
+    { rule: _("unicode-range: U+0121 -1023"), d: {} },
+    { rule: _("unicode-range: U+012 ?"), d: {} },
+    { rule: _("unicode-range: U+01 2?"), d: {} },
+    { rule: _("unicode-range: U+A0000-12FFFF"), d: {} },
+    { rule: _("unicode-range: U+??????"), d: {} },
+
+    // Thorough test of seven-digit rejection: all these are syntax errors
+    { rule: _("unicode-range: U+1034560, U+A5"), d: {} },
+    { rule: _("unicode-range: U+1034569, U+A5"), d: {} },
+    { rule: _("unicode-range: U+103456a, U+A5"), d: {} },
+    { rule: _("unicode-range: U+103456f, U+A5"), d: {} },
+    { rule: _("unicode-range: U+103456?, U+A5"), d: {} },
+    { rule: _("unicode-range: U+103456-1034560, U+A5"), d: {} },
+    { rule: _("unicode-range: U+103456-1034569, U+A5"), d: {} },
+    { rule: _("unicode-range: U+103456-103456a, U+A5"), d: {} },
+    { rule: _("unicode-range: U+103456-103456f, U+A5"), d: {} },
+
+    // Syntactically invalid unicode-range tokens invalidate the
+    // entire descriptor
+    { rule: _("unicode-range: U+1, U+2, U+X"), d: {} },
+    { rule: _("unicode-range: U+A5, U+0?F"), d: {} },
+    { rule: _("unicode-range: U+A5, U+0F?-E00"), d: {} },
+
+    // Descending ranges and ranges outside 0-10FFFF are invalid
+    { rule: _("unicode-range: U+A5, U+90-30"), d: {} },
+    { rule: _("unicode-range: U+A5, U+220043"), d: {} },
+
+    // font-feature-settings
+    { rule: _("font-feature-settings: normal;"),
+      d: { "font-feature-settings" : "normal" } },
+    { rule: _("font-feature-settings: \"dlig\";"),
+      d: { "font-feature-settings" : "\"dlig\"" } },
+    { rule: _("font-feature-settings: \"dlig\" 1;"),
+      d: { "font-feature-settings" : "\"dlig\"" }, noncanonical: true },
+    { rule: _("font-feature-settings: 'dlig' 1"),
+      d: { "font-feature-settings" : "\"dlig\"" }, noncanonical: true },
+
+    // incorrect font-feature-settings
+    { rule: _("font-feature-settings: dlig 1"), d: {} },
+    { rule: _("font-feature-settings: none;"), d: {} },
+    { rule: _("font-feature-settings: 0;"), d: {} },
+    { rule: _("font-feature-settings: 3.14;"), d: {} },
+    { rule: _("font-feature-settings: 'blah' 3.14;"), d: {} },
+    { rule: _("font-feature-settings: 'dlig' 1 'hist' 0;"), d: {} },
+    { rule: _("font-feature-settings: 'dlig=1,hist=1'"), d: {} },
+
+    // font-language-override:
+    { rule: _("font-language-override: normal;"),
+      d: { "font-language-override" : "normal" } },
+    { rule: _("font-language-override: \"TRK\";"),
+      d: { "font-language-override" : "\"TRK\"" } },
+    { rule: _("font-language-override: 'TRK'"),
+      d: { "font-language-override" : "\"TRK\"" }, noncanonical: true },
+
+    // incorrect font-language-override
+    { rule: _("font-language-override: TRK"), d: {} },
+    { rule: _("font-language-override: none;"), d: {} },
+    { rule: _("font-language-override: 0;"), d: {} },
+    { rule: _("font-language-override: #999;"), d: {} },
+    { rule: _("font-language-override: 'TRK' 'SRB'"), d: {} },
+    { rule: _("font-language-override: 'TRK', 'SRB'"), d: {} },
+
+    // font-display:
+    { rule: _("font-display: auto;"),
+      d: { "font-display" : "auto" } },
+    { rule: _("font-display: block;"),
+      d: { "font-display" : "block" } },
+    { rule: _("font-display: swap;"),
+      d: { "font-display" : "swap" } },
+    { rule: _("font-display: fallback;"),
+      d: { "font-display" : "fallback" } },
+    { rule: _("font-display: optional;"),
+      d: { "font-display" : "optional" } },
+
+    // incorrect font-display
+    { rule: _("font-display: hidden"), d: {} },
+    { rule: _("font-display: swap 3"), d: {} },
+    { rule: _("font-display: block 2 swap 0"), d: {} },
+    { rule: _("font-display: all"), d: {} },
+  ];
+
+  var display = document.getElementById("display");
+  var sheet = document.styleSheets[1];
+
+  for (var curTest = 0; curTest < testset.length; curTest++) {
+    try {
+      while(sheet.cssRules.length > 0)
+        sheet.deleteRule(0);
+      sheet.insertRule(testset[curTest].rule, 0);
+    } catch (e) {
+      ok(
+        e.name == "SyntaxError"
+          && e instanceof DOMException
+          && e.code == DOMException.SYNTAX_ERR
+          && !('d' in testset[curTest]),
+        testset[curTest].rule + " syntax error thrown - " + e
+      );
+    }
+
+    try {
+      if (testset[curTest].d) {
+        is(sheet.cssRules.length, 1,
+           testset[curTest].rule + " rule count");
+           is(sheet.cssRules[0].type, 5 /*FONT_FACE_RULE*/,
+           testset[curTest].rule + " rule type");
+
+        var d = testset[curTest].d;
+        var s = sheet.cssRules[0].style;
+        var n = 0;
+
+        is(s.getPropertyValue("pointless"), "", "Unknown descriptors don't assert");
+
+        // everything is set that should be
+        for (var name in d) {
+          is(s.getPropertyValue(name), d[name],
+             testset[curTest].rule + " (prop " + name + ")");
+          n++;
+        }
+        // nothing else is set
+        is(s.length, n, testset[curTest].rule + "prop count");
+        for (var i = 0; i < s.length; i++) {
+          ok(
+            s[i] in d,
+            testset[curTest].rule +
+            " - Unexpected item #" + i + ": " + s[i]
+          );
+        }
+
+        // round-tripping of cssText
+        // this is a strong test; it's okay if the exact serialization
+        // changes in the future
+        if (n && !testset[curTest].noncanonical) {
+          is(sheet.cssRules[0].cssText.replace(/[ \n]+/g, " "),
+             testset[curTest].rule,
+             testset[curTest].rule + " rule text");
+        }
+      } else {
+        if (sheet.cssRules.length == 0) {
+          is(sheet.cssRules.length, 0,
+             testset[curTest].rule + " rule count (0)");
+        } else {
+          is(sheet.cssRules.length, 1,
+             testset[curTest].rule + " rule count (1 non-fontface)");
+          isnot(sheet.cssRules[0].type, 5 /*FONT_FACE_RULE*/,
+                testset[curTest].rule + " rule type (1 non-fontface)");
+        }
+      }
+    } catch (e) {
+      ok(false, testset[curTest].rule + " - During test: " + e);
+    }
+  }
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+SpecialPowers.pushPrefEnv({ set: [["layout.css.font-display.enabled", true]] },
+                          runTest);
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_font_family_parsing.html b/layout/style/test/test_font_family_parsing.html
new file mode 100644
index 0000000000..59bedc0b94
--- /dev/null
+++ b/layout/style/test/test_font_family_parsing.html
@@ -0,0 +1,272 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>Font family name parsing tests</title>
+  <link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-family-prop" />
+  <link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-prop" />
+  <meta name="assert" content="tests that valid font family names parse and invalid ones don't" />
+  <script type="text/javascript" src="/resources/testharness.js"></script>
+  <script type="text/javascript" src="/resources/testharnessreport.js"></script>
+  <style type="text/css">
+  </style>
+</head>
+<body>
+<div id="log"></div>
+<pre id="display"></pre>
+<style type="text/css" id="testbox"></style>
+
+<script type="text/javascript">
+
+function fontProp(n, size, s1, s2) { return (s1 ? s1 + " " : "") + (s2 ? s2 + " " : "") + size + " " + n; }
+function font(n, size, s1, s2) { return "font: " + fontProp(n, size, s1, s2); }
+ 
+// testrules
+//   namelist - font family list
+//   invalid  - true if declarations won't parse in either font-family or font
+//   fontonly - only test with the 'font' property
+//   single   - namelist includes only a single name (@font-face rules only allow a single name)
+
+var testFontFamilyLists = [
+
+  /* basic syntax */
+  { namelist: "simple", single: true },
+  { namelist: "'simple'", single: true },
+  { namelist: '"simple"', single: true },
+  { namelist: "-simple", single: true },
+  { namelist: "_simple", single: true },
+  { namelist: "quite simple", single: true },
+  { namelist: "quite _simple", single: true },
+  { namelist: "quite -simple", single: true },
+  { namelist: "0simple", invalid: true, single: true },
+  { namelist: "simple!", invalid: true, single: true },
+  { namelist: "simple()", invalid: true, single: true },
+  { namelist: "quite@simple", invalid: true, single: true },
+  { namelist: "#simple", invalid: true, single: true },
+  { namelist: "quite 0simple", invalid: true, single: true },
+  { namelist: "納豆嫌い", single: true },
+  { namelist: "納豆嫌い, ick, patooey" },
+  { namelist: "ick, patooey, 納豆嫌い" },
+  { namelist: "納豆嫌い, 納豆大嫌い" },
+  { namelist: "納豆嫌い, 納豆大嫌い, 納豆本当に嫌い" },
+  { namelist: "納豆嫌い, 納豆大嫌い, 納豆本当に嫌い, 納豆は好みではない" },
+  { namelist: "arial, helvetica, sans-serif" },
+  { namelist: "arial, helvetica, 'times' new roman, sans-serif", invalid: true },
+  { namelist: "arial, helvetica, \"times\" new roman, sans-serif", invalid: true },
+
+  { namelist: "arial, helvetica, \"\\\"times new roman\", sans-serif" },
+  { namelist: "arial, helvetica, '\\\"times new roman', sans-serif" },
+  { namelist: "arial, helvetica, times 'new' roman, sans-serif", invalid: true },
+  { namelist: "arial, helvetica, times \"new\" roman, sans-serif", invalid: true },
+  { namelist: "\"simple", single: true },
+  { namelist: "\\\"simple", single: true },
+  { namelist: "\"\\\"simple\"", single: true },
+  { namelist: "İsimple", single: true },
+  { namelist: "ßsimple", single: true },
+  { namelist: "ẙsimple", single: true },
+
+  /* escapes */
+  { namelist: "\\s imple", single: true },
+  { namelist: "\\073 imple", single: true },
+
+  { namelist: "\\035 simple", single: true },
+  { namelist: "sim\\035 ple", single: true },
+  { namelist: "simple\\02cinitial", single: true },
+  { namelist: "simple, \\02cinitial" },
+  { namelist: "sim\\020 \\035 ple", single: true },
+  { namelist: "sim\\020 5ple", single: true },
+  { namelist: "\\@simple", single: true },
+  { namelist: "\\@simple\\;", single: true },
+  { namelist: "\\@font-face", single: true },
+  { namelist: "\\@font-face\\;", single: true },
+  { namelist: "\\031 \\036 px", single: true },
+  { namelist: "\\031 \\036 px", single: true },
+  { namelist: "\\1f4a9", single: true },
+  { namelist: "\\01f4a9", single: true },
+  { namelist: "\\0001f4a9", single: true },
+  { namelist: "\\AbAb", single: true },
+
+  /* keywords */
+  { namelist: "italic", single: true },
+  { namelist: "bold", single: true },
+  { namelist: "bold italic", single: true },
+  { namelist: "italic bold", single: true },
+  { namelist: "larger", single: true },
+  { namelist: "smaller", single: true },
+  { namelist: "bolder", single: true },
+  { namelist: "lighter", single: true },
+  { namelist: "default", invalid: true, fontonly: true, single: true },
+  { namelist: "initial", invalid: true, fontonly: true, single: true },
+  { namelist: "inherit", invalid: true, fontonly: true, single: true },
+  { namelist: "normal", single: true },
+  { namelist: "default, simple", invalid: true },
+  { namelist: "initial, simple", invalid: true },
+  { namelist: "inherit, simple", invalid: true },
+  { namelist: "normal, simple" },
+  { namelist: "simple, default", invalid: true },
+  { namelist: "simple, initial", invalid: true },
+  { namelist: "simple, inherit", invalid: true },
+  { namelist: "simple, default bongo" },
+  { namelist: "simple, initial bongo" },
+  { namelist: "simple, inherit bongo" },
+  { namelist: "simple, bongo default" },
+  { namelist: "simple, bongo initial" },
+  { namelist: "simple, bongo inherit" },
+  { namelist: "simple, normal" },
+  { namelist: "simple default", single: true },
+  { namelist: "simple initial", single: true },
+  { namelist: "simple inherit", single: true },
+  { namelist: "simple normal", single: true },
+  { namelist: "default simple", single: true },
+  { namelist: "initial simple", single: true },
+  { namelist: "inherit simple", single: true },
+  { namelist: "normal simple", single: true },
+  { namelist: "caption", single: true }, // these are keywords for the 'font' property but only when in the first position
+  { namelist: "icon", single: true },
+  { namelist: "menu", single: true },
+  { namelist: "unset", invalid: true, fontonly: true, single: true },
+  { namelist: "unset, simple", invalid: true },
+  { namelist: "simple, unset", invalid: true },
+  { namelist: "simple, unset bongo" },
+  { namelist: "simple, bongo unset" },
+  { namelist: "simple unset", single: true },
+  { namelist: "unset simple", single: true }
+
+];
+
+var gTest = 0;
+
+/* strip out just values */
+function extractDecl(rule)
+{
+  var t = rule.replace(/[ \n]+/g, " ");
+  t = t.replace(/.*{[ \n]*/, "");
+  t = t.replace(/[ \n]*}.*/, "");
+  return t;
+}
+
+
+function testStyleRuleParse(decl, invalid) {
+  var sheet = document.styleSheets[1];
+  var rule = ".test" + gTest++ + " { " + decl + "; }";
+
+  while(sheet.cssRules.length > 0) {
+    sheet.deleteRule(0);
+  }
+
+  // shouldn't throw but improper handling of punctuation may cause some parsers to throw
+  try {
+    sheet.insertRule(rule, 0);
+  } catch (e) {
+    assert_unreached("unexpected error with " + decl + " ==> " + e.name);
+  }
+
+  assert_equals(sheet.cssRules.length, 1, 
+    "strange number of rules (" + sheet.cssRules.length + ") with " + decl);
+
+  var s = extractDecl(sheet.cssRules[0].cssText);
+
+  if (invalid) {
+    assert_equals(s, "", "rule declaration shouldn't parse - " + rule + " ==> " + s);
+  } else {
+    assert_not_equals(s, "", "rule declaration should parse - " + rule);
+    
+    // check that the serialization also parses
+    var r = ".test" + gTest++ + " { " + s + " }";
+    while(sheet.cssRules.length > 0) {
+      sheet.deleteRule(0);
+    }
+    try {
+      sheet.insertRule(r, 0);
+    } catch (e) {
+      assert_unreached("exception occurred parsing serialized form of rule - " + rule + " ==> " + r + " " + e.name);
+    }
+    var s2 = extractDecl(sheet.cssRules[0].cssText);
+    assert_not_equals(s2, "", "serialized form of rule should also parse - " + rule + " ==> " + r);
+  }
+}
+
+var kDefaultFamilySetting = "onelittlepiggywenttomarket";
+
+function testFontFamilySetterParse(namelist, invalid) {
+  var el = document.getElementById("display");
+
+  el.style.fontFamily = kDefaultFamilySetting;
+  var def = el.style.fontFamily;
+  el.style.fontFamily = namelist;
+  if (!invalid) {
+    assert_not_equals(el.style.fontFamily, def, "fontFamily setter should parse - " + namelist);
+    var parsed = el.style.fontFamily;
+    el.style.fontFamily = kDefaultFamilySetting;
+    el.style.fontFamily = parsed;
+    assert_equals(el.style.fontFamily, parsed, "fontFamily setter should parse serialized form to identical serialization - " + parsed + " ==> " + el.style.fontFamily);
+  } else {
+    assert_equals(el.style.fontFamily, def, "fontFamily setter shouldn't parse - " + namelist);
+  }
+}
+
+var kDefaultFontSetting = "16px onelittlepiggywenttomarket";
+
+function testFontSetterParse(n, size, s1, s2, invalid) {
+  var el = document.getElementById("display");
+
+  el.style.font = kDefaultFontSetting;
+  var def = el.style.font;
+  var fp = fontProp(n, size, s1, s2);
+  el.style.font = fp;
+  if (!invalid) {
+    assert_not_equals(el.style.font, def, "font setter should parse - " + fp);
+    var parsed = el.style.font;
+    el.style.font = kDefaultFontSetting;
+    el.style.font = parsed;
+    assert_equals(el.style.font, parsed, "font setter should parse serialized form to identical serialization - " + parsed + " ==> " + el.style.font);
+  } else {
+    assert_equals(el.style.font, def, "font setter shouldn't parse - " + fp);
+  }
+}
+
+var testFontVariations = [
+  { size: "16px" },
+  { size: "900px" },
+  { size: "900em" },
+  { size: "35%" },
+  { size: "7832.3%" },
+  { size: "xx-large" },
+  { size: "larger", s1: "lighter" },
+  { size: "16px", s1: "italic" },
+  { size: "16px", s1: "italic", s2: "bold" },
+  { size: "smaller", s1: "normal" },
+  { size: "16px", s1: "normal", s2: "normal" },
+  { size: "16px", s1: "400", s2: "normal" },
+  { size: "16px", s1: "bolder", s2: "oblique" }
+];
+
+function testFamilyNameParsing() {
+  var i;
+  for (i = 0; i < testFontFamilyLists.length; i++) {
+    var tst = testFontFamilyLists[i];
+    var n = tst.namelist;
+    var t;
+
+    if (!tst.fontonly) {
+      t = "font-family: " + n;
+      test(function() { testStyleRuleParse(t, tst.invalid); }, t);
+      test(function() { testFontFamilySetterParse(n, tst.invalid); }, t + " (setter)");
+    }
+
+    var v;
+    for (v = 0; v < testFontVariations.length; v++) {
+      var f = testFontVariations[v];
+      t = font(n, f.size, f.s1, f.s2);
+      test(function() { testStyleRuleParse(t, tst.invalid); }, t);
+      test(function() { testFontSetterParse(n, f.size, f.s1, f.s2, tst.invalid); }, t + " (setter)");
+    }
+  }
+}
+
+testFamilyNameParsing();
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_font_family_serialization.html b/layout/style/test/test_font_family_serialization.html
new file mode 100644
index 0000000000..ad922158f5
--- /dev/null
+++ b/layout/style/test/test_font_family_serialization.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<div id="display"></div>
+<script>
+// This cannot be a web-platform test because this doesn't match what
+// the spec says at the moment. Specifically, the spec wants to have
+// all font family serialized to string, while in practice, all browsers
+// serialize simple them to identifiers in some cases.
+// We want to check our current behavior. This can be changed once
+// browsers have an agreement on the exact behavior to spec.
+
+// format: [input, expected serialization]
+const tests = [
+  // Basic cases
+  ['simple', 'simple'],
+  ['    simple    ', 'simple'],
+  ['multi idents font', 'multi idents font'],
+  ['    multi   idents   font    ', 'multi idents font'],
+  ['"wrapped name"', '"wrapped name"'],
+  ['"   wrapped  name   "', '"   wrapped  name   "'],
+
+  // Special whitespaces
+  ['\\ leading ws', '" leading ws"'],
+  [' \\   leading ws', '"  leading ws"'],
+  ['\\ \\ leading ws', '"  leading ws"'],
+  [' \\ \\   leading ws', '"   leading ws"'],
+  ['\\ \\ \\ leading ws', '"   leading ws"'],
+  ['trailing ws\\ ', '"trailing ws "'],
+  ['trailing ws\\   ', '"trailing ws "'],
+  ['trailing ws   \\ ', '"trailing ws  "'],
+  ['trailing ws\\ \\ ', '"trailing ws  "'],
+  ['escaped\\ ws', '"escaped ws"'],
+  ['escaped\\    ws', '"escaped  ws"'],
+  ['escaped\\ \\ ws', '"escaped  ws"'],
+  ['escaped   \\ ws', '"escaped  ws"'],
+  ['escaped \\  ws', '"escaped   ws"'],
+  ['escaped number\\ 5', '"escaped number 5"'],
+];
+
+let el = document.getElementById("display");
+for (let [input, expected] of tests) {
+  test(function() {
+    el.style.fontFamily = input;
+    assert_equals(el.style.fontFamily, expected);
+  }, "Reserialization for " + JSON.stringify(input));
+}
+</script>
diff --git a/layout/style/test/test_font_loading_api.html b/layout/style/test/test_font_loading_api.html
new file mode 100644
index 0000000000..1e03ae8f30
--- /dev/null
+++ b/layout/style/test/test_font_loading_api.html
@@ -0,0 +1,1904 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for the CSS Font Loading API</title>
+<script src=/tests/SimpleTest/SimpleTest.js></script>
+<link rel=stylesheet type=text/css href=/tests/SimpleTest/test.css>
+
+<script src=descriptor_database.js></script>
+
+<body onload="start()">
+<iframe id=v src="file_font_loading_api_vframe.html"></iframe>
+<iframe id=n style="display: none"></iframe>
+
+<script>
+// Map of FontFace descriptor attribute names to @font-face rule descriptor
+// names.
+var descriptorNames = {
+  style: "font-style",
+  weight: "font-weight",
+  stretch: "font-stretch",
+  unicodeRange: "unicode-range",
+  variant: "font-variant",
+  featureSettings: "font-feature-settings",
+  display: "font-display"
+};
+
+// Default values for the FontFace descriptor attributes other than family, as
+// Gecko currently serializes them.
+var defaultValues = {
+  style: "normal",
+  weight: "normal",
+  stretch: "normal",
+  unicodeRange: "U+0-10FFFF",
+  variant: "normal",
+  featureSettings: "normal",
+  display: "auto"
+};
+
+// Non-default values for the FontFace descriptor attributes other than family
+// along with how Gecko currently serializes them.  Each value is chosen to be
+// different from the default value and also has a different serialized form.
+var nonDefaultValues = {
+  style: ["Italic", "italic"],
+  weight: ["Bold", "bold"],
+  stretch: ["Ultra-Condensed", "ultra-condensed"],
+  unicodeRange: ["U+3??", "U+300-3FF"],
+  variant: ["Small-Caps", "small-caps"],
+  featureSettings: ["'dlig' on", "\"dlig\""],
+  display: ["Block", "block"]
+};
+
+// Invalid values for the FontFace descriptor attributes other than family.
+var invalidValues = {
+  style: "initial",
+  weight: "bolder",
+  stretch: "wider",
+  unicodeRange: "U+1????-2????",
+  variant: "inherit",
+  featureSettings: "dlig",
+  display: "normal"
+};
+
+// Invalid font family names.
+var invalidFontFamilyNames = [
+  "", "sans-serif", "A, B", "inherit", "a 1"
+];
+
+// Font family list where at least one is likely to be available on
+// platforms we care about.
+var likelyPlatformFonts = "Helvetica Neue, Bitstream Vera Sans, Bitstream Vera Sans Roman, FreeSans, Free Sans, SwissA, DejaVu Sans, Arial";
+
+// Will hold an ArrayBuffer containing a valid font.
+var fontData;
+
+var queue = Promise.resolve();
+
+function is_resolved_with(aPromise, aExpectedValue, aDescription, aTestID) {
+  // This assumes that all Promise tasks come from the task source.
+  var handled = false;
+  return new Promise(function(aResolve, aReject) {
+    aPromise.then(function(aValue) {
+      if (!handled) {
+        handled = true;
+        is(aValue, aExpectedValue, aDescription + " should be resolved with the expected value " + aTestID);
+        aResolve();
+      }
+    }, function(aError) {
+      if (!handled) {
+        handled = true;
+        ok(false, aDescription + " should be resolved; instead it was rejected with " + aError + " " + aTestID);
+        aResolve();
+      }
+    });
+    Promise.resolve().then(function() {
+      if (!handled) {
+        handled = true;
+        ok(false, aDescription + " should be resolved; instead it is pending " + aTestID);
+        aResolve();
+      }
+    });
+  });
+}
+
+function is_pending(aPromise, aDescription, aTestID) {
+  // This assumes that all Promise tasks come from the task source.
+  var handled = false;
+  return new Promise(function(aResolve, aReject) {
+    aPromise.then(function(aValue) {
+      if (!handled) {
+        handled = true;
+        ok(false, aDescription + " should be pending; instead it was resolved with " + aValue + " " + aTestID);
+        aResolve();
+      }
+    }, function(aError) {
+      if (!handled) {
+        handled = true;
+        ok(false, aDescription + " should be pending; instead it was rejected with " + aError + " " + aTestID);
+        aResolve();
+      }
+    });
+    Promise.resolve().then(function() {
+      if (!handled) {
+        handled = true;
+        ok(true, aDescription + " should be pending " + aTestID);
+        aResolve();
+      }
+    });
+  });
+}
+
+function fetchAsArrayBuffer(aURL) {
+  return new Promise(function(aResolve, aReject) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", aURL);
+    xhr.responseType = "arraybuffer";
+    xhr.onreadystatechange = function(evt) {
+      if (xhr.readyState == 4) {
+        if (xhr.status >= 200 && xhr.status <= 299) {
+          aResolve(xhr.response);
+        } else {
+          aReject(new Error("Error fetching file " + aURL + ", status " + xhr.status));
+        }
+      }
+    };
+    xhr.send();
+  });
+}
+
+function setTimeoutZero() {
+  return new Promise(function(aResolve, aReject) {
+    setTimeout(aResolve, 0);
+  });
+}
+
+function awaitRefresh() {
+  function awaitOneRefresh() {
+    return new Promise(function(aResolve, aReject) {
+      requestAnimationFrame(aResolve);
+    });
+  }
+
+  return awaitOneRefresh().then(awaitOneRefresh);
+}
+
+function flushStyles() {
+  getComputedStyle(document.body).width;
+}
+
+function runTest() {
+  // Document and window from inside the display:none iframe.
+  var nframe = document.getElementById("n");
+  var ndocument = nframe.contentDocument;
+  var nwindow = nframe.contentWindow;
+
+  // Document and window from inside the visible iframe.
+  var vframe = document.getElementById("v");
+  var vdocument = vframe.contentDocument;
+  var vwindow = vframe.contentWindow;
+
+  // For iterating over different combinations of documents and windows
+  // to test with.
+  var sources = [
+    { win: window,  doc: document,  what: "window/document"   },
+    { win: vwindow, doc: vdocument, what: "vwindow/vdocument" },
+    { win: nwindow, doc: ndocument, what: "nwindow/ndocument" },
+    { win: window,  doc: vdocument, what: "window/vdocument"  },
+    { win: window,  doc: ndocument, what: "window/ndocument"  },
+    { win: vwindow, doc: document,  what: "vwindow/document"  },
+    { win: vwindow, doc: ndocument, what: "vwindow/ndocument" },
+    { win: nwindow, doc: document,  what: "nwindow/document"  },
+    { win: nwindow, doc: vdocument, what: "nwindow/vdocument" },
+  ];
+
+  var sourceDocuments = [
+    { doc: document,  what: "document"  },
+    { doc: vdocument, what: "vdocument" },
+    { doc: ndocument, what: "ndocument" },
+  ];
+
+  var sourceWindows = [
+    { win: window,  what: "window"  },
+    { win: vwindow, what: "vwindow" },
+    { win: nwindow, what: "nwindow" },
+  ];
+
+  queue = queue.then(function() {
+
+    // First, initialize fontData.
+    return fetchAsArrayBuffer("BitPattern.woff")
+             .then(function(aResult) { fontData = aResult; });
+
+  }).then(function() {
+
+    // (TEST 1) Some miscellaneous tests for FontFaceSet and FontFace.
+    ok(window.FontFaceSet, "FontFaceSet interface object should be present (TEST 1)");
+    is(Object.getPrototypeOf(FontFaceSet.prototype), EventTarget.prototype, "FontFaceSet should inherit from EventTarget (TEST 1)");
+    ok(document.fonts instanceof FontFaceSet, "document.fonts should be a a FontFaceSet (TEST 1)");
+    ok(window.FontFace, "FontFace interface object should be present (TEST 1)");
+    is(Object.getPrototypeOf(FontFace.prototype), Object.prototype, "FontFace should inherit from Object (TEST 1)");
+
+    // (TEST 2) Some miscellaneous tests for FontFaceSetLoadEvent.
+    ok(window.FontFaceSetLoadEvent, "FontFaceSetLoadEvent interface object should be present (TEST 2)");
+    is(Object.getPrototypeOf(FontFaceSetLoadEvent.prototype), Event.prototype, "FontFaceSetLoadEvent should inherit from Event (TEST 2)");
+
+  }).then(function() {
+
+    // (TEST 3) Test that document.fonts.ready is resolved with the
+    // document.fonts FontFaceSet.
+    var p = Promise.resolve();
+    sourceDocuments.forEach(function({ doc, what }) {
+      p = p.then(_ => { return doc.fonts.ready }).then(function() {
+        return is_resolved_with(doc.fonts.ready, doc.fonts, "document.fonts.ready resolves with document.fonts.", "(TEST 3) (" + what + ")");
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 4) Test that document.fonts in this test document starts out with no
+    // FontFace objects in it.
+    sourceDocuments.forEach(function({ doc, what }) {
+      is(Array.from(doc.fonts).length, 0, "initial number of FontFace objects in document.fonts (TEST 4) (" + what + ")");
+    });
+
+    // (TEST 5) Test that document.fonts.status starts off as loaded.
+    sourceDocuments.forEach(function({ doc, what }) {
+      is(doc.fonts.status, "loaded", "initial value of document.fonts.status (TEST 5) (" + what + ")");
+    });
+
+    // (TEST 6) Test initial value of FontFace.status when a url() source is
+    // used.
+    sourceWindows.forEach(function({ win, what }) {
+      is(new win.FontFace("test", "url(x)").status, "unloaded", "initial value of FontFace.status when a url() source is used (TEST 6) (" + what + ")");
+    });
+
+    // (TEST 7) Test initial value of FontFace.status when an invalid
+    // ArrayBuffer source is used.  Because it has an implicit initial
+    // load() call, it should either be "loading" if the browser is
+    // asynchronously parsing the font data, or "error" if it parsed
+    // it immediately.
+    sourceWindows.forEach(function({ win, what }) {
+      var status = new win.FontFace("test", new ArrayBuffer(0)).status;
+      ok(status == "loading" || status == "error", "initial value of FontFace.status when an invalid ArrayBuffer source is used (TEST 7) (" + what + ")");
+    });
+
+    // (TEST 8) Test initial value of FontFace.status when a valid ArrayBuffer
+    // source is used.  Because it has an implicit initial load() call, it
+    // should either be "loading" if the browser is asynchronously parsing the
+    // font data, or "loaded" if it parsed it immediately.
+    sourceWindows.forEach(function({ win, what }) {
+      status = new win.FontFace("test", fontData).status;
+      ok(status == "loading" || status == "loaded", "initial value of FontFace.status when a valid ArrayBuffer source is used (TEST 8) (" + what + ")");
+    });
+
+    // (TEST 9) (old test became redundant with TEST 19)
+
+  }).then(function() {
+
+    // (TEST 10) Test initial value of FontFace.loaded when a valid url()
+    // source is used.
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        return is_pending(new win.FontFace("test", "url(x)").loaded, "initial value of FontFace.loaded when a valid url() source is used", "(TEST 10) (" + what + ")");
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 11) (old test became redundant with TEST 21)
+
+  }).then(function() {
+
+    // (TEST 12) (old test became redundant with TEST 20)
+
+  }).then(function() {
+
+    // (TEST 13) Test initial values of the descriptor attributes on FontFace
+    // objects.
+    sourceWindows.forEach(function({ win, what }) {
+      var face = new win.FontFace("test", fontData);
+      // XXX Spec issue: what values do the descriptor attributes have before the
+      // constructor's dictionary argument is parsed?
+      for (var desc in defaultValues) {
+        is(face[desc], defaultValues[desc], "initial value of FontFace." + desc + " (TEST 13) (" + what + ")");
+      }
+    });
+
+    // (TEST 14) Test default values of the FontFaceDescriptors dictionary.
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var face = new win.FontFace("test", fontData);
+        return face.loaded.then(function() {
+          for (var desc in defaultValues) {
+            is(face[desc], defaultValues[desc], "default value of FontFace." + desc + " (TEST 14) (" + what + ")");
+          }
+        }, function(aError) {
+          ok(false, "FontFace should have loaded succesfully (TEST 14) (" + what + ")");
+        });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 15) Test passing non-default descriptor values to the FontFace
+    // constructor.
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var descriptorTests = Promise.resolve();
+        Object.keys(nonDefaultValues).forEach(function(aDesc) {
+          descriptorTests = descriptorTests.then(function() {
+            var init = {};
+            init[aDesc] = nonDefaultValues[aDesc][0];
+            var face = new win.FontFace("test", fontData, init);
+            var ok_todo = aDesc == "variant" ? todo : ok;
+            ok_todo(face[aDesc] == nonDefaultValues[aDesc][1], "specified valid non-default value of FontFace." + aDesc + " immediately after construction (TEST 15) (" + what + ")");
+            return face.loaded.then(function() {
+              ok_todo(face[aDesc] == nonDefaultValues[aDesc][1], "specified valid non-default value of FontFace." + aDesc + " (TEST 15) (" + what + ")");
+            }, function(aError) {
+              ok(false, "FontFace should have loaded succesfully (TEST 15) (" + what + ")");
+            });
+          });
+        });
+        return descriptorTests;
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 16) Test passing invalid descriptor values to the FontFace
+    // constructor.
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var descriptorTests = Promise.resolve();
+        Object.keys(invalidValues).forEach(function(aDesc) {
+          descriptorTests = descriptorTests.then(function() {
+            var init = {};
+            init[aDesc] = invalidValues[aDesc];
+            var face = new win.FontFace("test", fontData, init);
+            var ok_todo = aDesc == "variant" ? todo : ok;
+            ok_todo(face.status == "error", "FontFace should be error immediately after construction with invalid value of FontFace." + aDesc + " (TEST 16) (" + what + ")");
+            return face.loaded.then(function() {
+              ok_todo(false, "FontFace should not load after invalid value of FontFace." + aDesc + " specified (TEST 16) (" + what + ")");
+            }, function(aError) {
+              ok(true, "FontFace should not load after invalid value of FontFace." + aDesc + " specified (TEST 16) (" + what + ")");
+              is(aError.name, "SyntaxError", "FontFace.loaded with invalid value of FontFace." + aDesc + " should be rejected with a SyntaxError (TEST 16) (" + what + ")");
+            });
+          });
+        });
+        return descriptorTests;
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 17) Test passing an invalid font family name to the FontFace
+    // constructor.
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var familyTests = Promise.resolve();
+        invalidFontFamilyNames.forEach(function(aFamilyName) {
+          familyTests = familyTests.then(function() {
+            var face = new win.FontFace(aFamilyName, fontData);
+            is(face.status, "error", "FontFace should be error immediately after construction with invalid family name " + aFamilyName + " (TEST 17) (" + what + ")");
+            is(face.family, "", "FontFace.family should be the empty string after construction with invalid family name " + aFamilyName + " (TEST 17) (" + what + ")");
+            return face.loaded.then(function() {
+              ok(false, "FontFace should not load after invalid family name " + aFamilyName + " specified (TEST 17) (" + what + ")");
+            }, function(aError) {
+              ok(true, "FontFace should not load after invalid family name " + aFamilyName + " specified (TEST 17) (" + what + ")");
+              is(aError.name, "SyntaxError", "FontFace.loaded with invalid family name " + aFamilyName + " should be rejected with a SyntaxError (TEST 17) (" + what + ")");
+            });
+          });
+        });
+        return familyTests;
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 18) Test passing valid url() source strings to the FontFace
+    // constructor.
+    var p = Promise.resolve();
+
+    // The sub-test is very fragile on Android platform, see Bug 1455824,
+    // especially Comment 34.
+    if (navigator.appVersion.includes("Android")) {
+      return p;
+    }
+
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var srcTests = Promise.resolve();
+        gCSSFontFaceDescriptors.src.values.forEach(function(aSrc) {
+          srcTests = srcTests.then(function() {
+            var face = new win.FontFace("test", aSrc);
+            return face.load().then(function() {
+              ok(true, "FontFace should load with valid url() src " + aSrc + " (TEST 18) (" + what + ")");
+            }, function(aError) {
+              is(aError.name, "NetworkError", "FontFace had NetworkError when loading with valid url() src " + aSrc + " (TEST 18) (" + what + ")");
+            });
+          });
+        });
+        return srcTests;
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 19) Test passing invalid url() source strings to the FontFace
+    // constructor.
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var srcTests = Promise.resolve();
+        gCSSFontFaceDescriptors.src.invalid_values.forEach(function(aSrc) {
+          srcTests = srcTests.then(function() {
+            var face = new win.FontFace("test", aSrc);
+            is(face.status, "error", "FontFace.status should be \"error\" when constructed with an invalid url() src " + aSrc + " (TEST 19) (" + what + ")");
+            return face.loaded.then(function() {
+              ok(false, "FontFace should not load with invalid url() src " + aSrc + " (TEST 19) (" + what + ")");
+            }, function(aError) {
+              is(aError.name, "SyntaxError", "FontFace.ready should have been rejected with a SyntaxError when constructed with an invalid url() src " + aSrc + " (TEST 19) (" + what + ")");
+            });
+          });
+        });
+        return srcTests;
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 20) Test that the status of a FontFace constructed with a valid
+    // ArrayBuffer source eventually becomes "loaded".
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var face = new win.FontFace("test", fontData);
+        return face.loaded.then(function(aFace) {
+          is(face.status, "loaded", "status of FontFace constructed with a valid ArrayBuffer source should eventually be \"loaded\" (TEST 20) (" + what + ")");
+          is(face, aFace, "FontFace.loaded was resolved with the FontFace object once loaded (TEST 20) (" + what + ")");
+        }, function(aError) {
+          ok(false, "FontFace constructed with a valid ArrayBuffer should eventually load (TEST 20) (" + what + ")");
+        });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 21) Test that the status of a FontFace constructed with an invalid
+    // ArrayBuffer source eventually becomes "error".
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var face = new win.FontFace("test", new ArrayBuffer(0));
+        return face.loaded.then(function() {
+          ok(false, "FontFace constructed with an invalid ArrayBuffer should not load (TEST 21) (" + what + ")");
+        }, function(aError) {
+          is(aError.name, "SyntaxError", "loaded of FontFace constructed with an invalid ArrayBuffer source should be rejected with TypeError (TEST 21) (" + what + ")");
+          is(face.status, "error", "status of FontFace constructed with an invalid ArrayBuffer source should eventually be \"error\" (TEST 21) (" + what + ")");
+        });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 22) Test assigning non-default descriptor values on the FontFace.
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var descriptorTests = Promise.resolve();
+        Object.keys(nonDefaultValues).forEach(function(aDesc) {
+          descriptorTests = descriptorTests.then(function() {
+            var face = new win.FontFace("test", fontData);
+            return face.loaded.then(function() {
+              var ok_todo = aDesc == "variant" ? todo : ok;
+              face[aDesc] = nonDefaultValues[aDesc][0];
+              ok_todo(face[aDesc] == nonDefaultValues[aDesc][1], "assigned valid non-default value to FontFace." + aDesc + " (TEST 22) (" + what + ")");
+            }, function(aError) {
+              ok(false, "FontFace should have loaded succesfully (TEST 22) (" + what + ")");
+            });
+          });
+        });
+        return descriptorTests;
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 23) Test assigning invalid descriptor values on the FontFace.
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var descriptorTests = Promise.resolve();
+        Object.keys(invalidValues).forEach(function(aDesc) {
+          descriptorTests = descriptorTests.then(function() {
+            var face = new win.FontFace("test", fontData);
+            return face.loaded.then(function() {
+              var ok_todo = aDesc == "variant" ? todo : ok;
+              var exceptionName = "";
+              try {
+                face[aDesc] = invalidValues[aDesc];
+              } catch (ex) {
+                exceptionName = ex.name;
+              }
+              ok_todo(exceptionName == "SyntaxError", "assigning invalid value to FontFace." + aDesc + " should throw a SyntaxError (TEST 23) (" + what + ")");
+            }, function(aError) {
+              ok(false, "FontFace should have loaded succesfully (TEST 23) (" + what + ")");
+            });
+          });
+        });
+        return descriptorTests;
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 24) Test that the status of a FontFace with a non-existing url()
+    // source is set to "loading" right after load() is called, that its .loaded
+    // Promise is returned, and that the Promise is eventually rejected with a
+    // NetworkError and its status is set to "error".
+    var p = Promise.resolve();
+    sourceWindows.forEach(function({ win, what }) {
+      p = p.then(function() {
+        var face = new win.FontFace("test", "url(x)");
+        var result = face.load();
+        is(face.status, "loading", "FontFace.status should be \"loading\" right after load() is called (TEST 24) (" + what + ")");
+        is(result, face.loaded, "FontFace.load() should return the .loaded Promise (TEST 24) (" + what + ")");
+
+        return result.then(function() {
+          ok(false, "FontFace with a non-existing url() source should not load (TEST 24) (" + what + ")");
+        }, function(aError) {
+          is(aError.name, "NetworkError", "FontFace with a non-existing url() source should result in its .loaded Promise being rejected with a NetworkError (TEST 24) (" + what + ")");
+          is(face.status, "error", "FontFace with a non-existing url() source should result in its .status being set to \"error\" (TEST 24) (" + what + ")");
+        });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 25) Test simple manipulation of the FontFaceSet.
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }) {
+      p = p.then(function() {
+        var face, face2, all;
+        face = new win.FontFace("test", "url(x)");
+        face2 = new win.FontFace("test2", "url(x)");
+        ok(!doc.fonts.has(face), "newly created FontFace should not be in document.fonts (TEST 25) (" + what + ")");
+        doc.fonts.add(face);
+        ok(doc.fonts.has(face), "should be able to add a FontFace to document.fonts (TEST 25) (" + what + ")");
+        doc.fonts.add(face);
+        ok(doc.fonts.has(face), "should be able to repeatedly add a FontFace to document.fonts (TEST 25) (" + what + ")");
+        ok(doc.fonts.delete(face), "FontFaceSet.delete should return true when it succeeds (TEST 25) (" + what + ")");
+        ok(!doc.fonts.has(face), "FontFace should be gone from document.fonts after delete is called (TEST 25) (" + what + ")");
+        ok(!doc.fonts.delete(face), "FontFaceSet.delete should return false when it fails (TEST 25) (" + what + ")");
+        doc.fonts.add(face);
+        doc.fonts.add(face2);
+        ok(doc.fonts.has(face2), "should be able to add a second FontFace to document.fonts (TEST 25) (" + what + ")");
+        doc.fonts.clear();
+        ok(!doc.fonts.has(face) && !doc.fonts.has(face2), "FontFaces should be gone from document.fonts after clear is called (TEST 25) (" + what + ")");
+        doc.fonts.add(face);
+        doc.fonts.add(face2);
+        all = Array.from(doc.fonts);
+        is(all[0], face, "FontFaces should be returned in the same order as insertion (TEST 25) (" + what + ")");
+        is(all[1], face2, "FontFaces should be returned in the same order as insertion (TEST 25) (" + what + ")");
+        doc.fonts.add(face);
+        all = Array.from(doc.fonts);
+        is(all[0], face, "FontFaces should be not be reordered when a duplicate entry is added (TEST 25) (" + what + ")");
+        is(all[1], face2, "FontFaces should be not be reordered when a duplicate entry is added (TEST 25) (" + what + ")");
+        doc.fonts.clear();
+        return doc.fonts.ready;
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 26) Test that FontFaceSet.ready is replaced, .status is set to
+    // "loading", and a loading event is dispatched when a loading FontFace is
+    // added to it.
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }) {
+      p = p.then(function() {
+        var awaitEvents = new Promise(function(aResolve, aReject) {
+
+          var onloadingTriggered = false, loadingDispatched = false;
+
+          function check() {
+            if (onloadingTriggered && loadingDispatched) {
+              doc.fonts.onloading = null;
+              doc.fonts.removeEventListener("loading", listener);
+              aResolve();
+            }
+          }
+
+          var listener = function(aEvent) {
+            is(Object.getPrototypeOf(aEvent), doc.defaultView.Event.prototype, "loading event should be a plain Event object (TEST 26) (" + what + ")");
+            loadingDispatched = true;
+            check();
+          };
+          doc.fonts.addEventListener("loading", listener);
+          doc.fonts.onloading = function(aEvent) {
+            is(Object.getPrototypeOf(aEvent), doc.defaultView.Event.prototype, "loading event should be a plain Event object (TEST 26) (" + what + ")");
+            onloadingTriggered = true;
+            check();
+          };
+        });
+
+        is(doc.fonts.status, "loaded", "FontFaceSet.status initially (TEST 26) (" + what + ")");
+
+        var oldReady = doc.fonts.ready;
+        var face = new win.FontFace("test", "url(neverending_font_load.sjs)");
+        face.load();
+        doc.fonts.add(face);
+
+        var newReady = doc.fonts.ready;
+        isnot(newReady, oldReady, "FontFaceSet.ready should be replaced when a loading FontFace is added to it (TEST 26) (" + what + ")");
+        is(doc.fonts.status, "loading", "FontFaceSet.status should be set to \"loading\" when a loading FontFace is added to it (TEST 26) (" + what + ")");
+
+        return awaitEvents
+            .then(function() {
+              return is_pending(newReady, "FontFaceSet.ready should be replaced with a fresh pending Promise when a loading FontFace is added to it", "(TEST 26) (" + what + ")");
+            })
+            .then(function() {
+              doc.fonts.clear();
+              return doc.fonts.ready;
+            });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 27) Test that FontFaceSet.ready is resolved, .status is set to
+    // "loaded", and a loadingdone event (but no loadingerror event) is
+    // dispatched when the only loading FontFace in it is removed.
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }) {
+      p = p.then(function() {
+        var awaitEvents = new Promise(function(aResolve, aReject) {
+
+          var onloadingdoneTriggered = false, loadingdoneDispatched = false;
+          var onloadingerrorTriggered = false, loadingerrorDispatched = false;
+
+          function check() {
+            doc.fonts.onloadingdone = null;
+            doc.fonts.onloadingerror = null;
+            doc.fonts.removeEventListener("loadingdone", doneListener);
+            doc.fonts.removeEventListener("loadingerror", errorListener);
+            aResolve();
+          }
+
+          var doneListener = function(aEvent) {
+            is(Object.getPrototypeOf(aEvent), doc.defaultView.FontFaceSetLoadEvent.prototype, "loadingdone event should be a FontFaceSetLoadEvent object (TEST 27) (" + what + ")");
+            is(aEvent.fontfaces.length, 0, "the FontFaceSetLoadEvent should have an empty fontfaces array (TEST 27) (" + what + ")");
+            loadingdoneDispatched = true;
+            check();
+          };
+          doc.fonts.addEventListener("loadingdone", doneListener);
+          doc.fonts.onloadingdone = function(aEvent) {
+            is(Object.getPrototypeOf(aEvent), doc.defaultView.FontFaceSetLoadEvent.prototype, "loadingdone event should be a FontFaceSetLoadEvent object (TEST 27) (" + what + ")");
+            is(aEvent.fontfaces.length, 0, "the FontFaceSetLoadEvent should have an empty fontfaces array (TEST 27) (" + what + ")");
+            onloadingdoneTriggered = true;
+            check();
+          };
+          var errorListener = function(aEvent) {
+            loadingerrorDispatched = true;
+            check();
+          }
+          doc.fonts.addEventListener("loadingerror", errorListener);
+          doc.fonts.onloadingerror = function(aEvent) {
+            onloadingdoneTriggered = true;
+            check();
+          };
+        });
+
+        is(doc.fonts.status, "loaded", "FontFaceSet.status should be \"loaded\" initially (TEST 27) (" + what + ")");
+
+        var f = new win.FontFace("test", "url(neverending_font_load.sjs)");
+        f.load();
+        doc.fonts.add(f);
+
+        is(doc.fonts.status, "loading", "FontFaceSet.status should be \"loading\" when a loading FontFace is in it (TEST 27) (" + what + ")");
+
+        doc.fonts.clear();
+
+        return awaitEvents
+            .then(function() {
+              return is_resolved_with(doc.fonts.ready, doc.fonts, "FontFaceSet.ready when the FontFaceSet is cleared", "(TEST 27) (" + what + ")");
+            })
+            .then(function() {
+              is(doc.fonts.status, "loaded", "FontFaceSet.status should be set to \"loaded\" when it is cleared (TEST 27) (" + what + ")");
+              return doc.fonts.ready;
+            });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 28) Test that FontFaceSet.ready is replaced, .status is set to
+    // "loading", and a loading event is dispatched when a FontFace in it
+    // starts loading.
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }) {
+      p = p.then(function() {
+        var awaitEvents = new Promise(function(aResolve, aReject) {
+
+          var onloadingTriggered = false, loadingDispatched = false;
+
+          function check() {
+            if (onloadingTriggered && loadingDispatched) {
+              doc.fonts.onloading = null;
+              doc.fonts.removeEventListener("loading", listener);
+              aResolve();
+            }
+          }
+
+          var listener = function(aEvent) {
+            is(Object.getPrototypeOf(aEvent), doc.defaultView.Event.prototype, "loading event should be a plain Event object (TEST 28) (" + what + ")");
+            loadingDispatched = true;
+            check();
+          };
+          doc.fonts.addEventListener("loading", listener);
+          doc.fonts.onloading = function(aEvent) {
+            is(Object.getPrototypeOf(aEvent), doc.defaultView.Event.prototype, "loading event should be a plain Event object (TEST 28) (" + what + ")");
+            onloadingTriggered = true;
+            check();
+          };
+        });
+
+        var oldReady = doc.fonts.ready;
+        var face = new win.FontFace("test", "url(neverending_font_load.sjs)");
+        doc.fonts.add(face);
+        face.load();
+
+        var newReady = doc.fonts.ready;
+        isnot(newReady, oldReady, "FontFaceSet.ready should be replaced when its only FontFace starts loading (TEST 28) (" + what + ")");
+        is(doc.fonts.status, "loading", "FontFaceSet.status should be set to \"loading\" when its only FontFace starts loading (TEST 28) (" + what + ")");
+
+        return awaitEvents
+            .then(function() {
+              return is_pending(newReady, "FontFaceSet.ready when the FontFaceSet's only FontFace starts loading", "(TEST 28) (" + what + ")");
+            })
+            .then(function() {
+              doc.fonts.clear();
+              return doc.fonts.ready;
+            });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 29) Test that a loadingdone and a loadingerror event is dispatched
+    // when a FontFace that eventually becomes status "error" is added to the
+    // FontFaceSet.
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }) {
+      p = p.then(function() {
+        var face;
+        var awaitEvents = new Promise(function(aResolve, aReject) {
+
+          var onloadingdoneTriggered = false, loadingdoneDispatched = false;
+          var onloadingerrorTriggered = false, loadingerrorDispatched = false;
+
+          function check() {
+            if (onloadingdoneTriggered && loadingdoneDispatched &&
+                onloadingerrorTriggered && loadingerrorDispatched) {
+              doc.fonts.onloadingdone = null;
+              doc.fonts.onloadingerror = null;
+              doc.fonts.removeEventListener("loadingdone", doneListener);
+              doc.fonts.removeEventListener("loadingerror", errorListener);
+              aResolve();
+            }
+          }
+
+          var doneListener = function(aEvent) {
+            loadingdoneDispatched = true;
+            check();
+          };
+          doc.fonts.addEventListener("loadingdone", doneListener);
+          doc.fonts.onloadingdone = function(aEvent) {
+            is(Object.getPrototypeOf(aEvent), doc.defaultView.FontFaceSetLoadEvent.prototype, "loadingdone event should be a FontFaceSetLoadEvent object (TEST 29) (" + what + ")");
+            is(aEvent.fontfaces.length, 0, "the FontFaceSetLoadEvent should have an empty fontfaces array (TEST 29) (" + what + ")");
+            onloadingdoneTriggered = true;
+            check();
+          };
+          var errorListener = function(aEvent) {
+            is(Object.getPrototypeOf(aEvent), doc.defaultView.FontFaceSetLoadEvent.prototype, "loadingerror event should be a FontFaceSetLoadEvent object (TEST 29) (" + what + ")");
+            is(aEvent.fontfaces[0], face, "the FontFaceSetLoadEvent should have a fontfaces array with the FontFace in it (TEST 29) (" + what + ")");
+            loadingerrorDispatched = true;
+            check();
+          }
+          doc.fonts.addEventListener("loadingerror", errorListener);
+          doc.fonts.onloadingerror = function(aEvent) {
+            onloadingerrorTriggered = true;
+            check();
+          };
+        });
+
+        face = new win.FontFace("test", "url(x)");
+        face.load();
+        is(face.status, "loading", "FontFace should have status \"loading\" (TEST 29) (" + what + ")");
+        doc.fonts.add(face);
+
+        return face.loaded
+          .then(function() {
+            ok(false, "the FontFace should not load (TEST 29) (" + what + ")");
+          }, function(aError) {
+            is(face.status, "error", "FontFace should have status \"error\" (TEST 29) (" + what + ")");
+            return awaitEvents;
+          })
+          .then(function() {
+            doc.fonts.clear();
+            return doc.fonts.ready;
+          });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 30) Test that a loadingdone event is dispatched when a FontFace
+    // that eventually becomes status "loaded" is added to the FontFaceSet.
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }, i) {
+      p = p.then(function() {
+        var face;
+        var awaitEvents = new Promise(function(aResolve, aReject) {
+
+          var onloadingdoneTriggered = false, loadingdoneDispatched = false;
+
+          function check() {
+            if (onloadingdoneTriggered && loadingdoneDispatched) {
+              doc.fonts.onloadingdone = null;
+              doc.fonts.removeEventListener("loadingdone", doneListener);
+              aResolve();
+            }
+          }
+
+          var doneListener = function(aEvent) {
+            loadingdoneDispatched = true;
+            check();
+          };
+          doc.fonts.addEventListener("loadingdone", doneListener);
+          doc.fonts.onloadingdone = function(aEvent) {
+            is(aEvent.fontfaces[0], face, "the FontFaceSetLoadEvent should have a fontfaces array with the FontFace in it (TEST 30) (" + what + ")");
+            onloadingdoneTriggered = true;
+            check();
+          };
+        });
+
+        face = new win.FontFace("test", "url(BitPattern.woff?test30." + i + ")");
+        face.load();
+        is(face.status, "loading", "FontFace should have status \"loading\" (TEST 30) (" + what + ")");
+        doc.fonts.add(face);
+
+        return face.loaded
+          .then(function() {
+            is(face.status, "loaded", "FontFace should have status \"loaded\" (TEST 30) (" + what + ")");
+            return awaitEvents;
+          })
+          .then(function() {
+            doc.fonts.clear();
+          });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 31) Test that a loadingdone event is dispatched when a FontFace
+    // with status "unloaded" is added to the FontFaceSet and load() is called
+    // on it.
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }, i) {
+      p = p.then(function() {
+        var face;
+        var awaitEvents = new Promise(function(aResolve, aReject) {
+
+          var onloadingdoneTriggered = false, loadingdoneDispatched = false;
+
+          function check() {
+            if (onloadingdoneTriggered && loadingdoneDispatched) {
+              doc.fonts.onloadingdone = null;
+              doc.fonts.removeEventListener("loadingdone", doneListener);
+              aResolve();
+            }
+          }
+
+          var doneListener = function(aEvent) {
+            loadingdoneDispatched = true;
+            check();
+          };
+          doc.fonts.addEventListener("loadingdone", doneListener);
+          doc.fonts.onloadingdone = function(aEvent) {
+            is(aEvent.fontfaces[0], face, "the FontFaceSetLoadEvent should have a fontfaces array with the FontFace in it (TEST 31) (" + what + ")");
+            onloadingdoneTriggered = true;
+            check();
+          };
+        });
+
+        face = new win.FontFace("test", "url(BitPattern.woff?test31." + i + ")");
+        is(face.status, "unloaded", "FontFace should have status \"unloaded\" (TEST 31) (" + what + ")");
+        doc.fonts.add(face);
+
+        return face.load()
+            .then(function() {
+              return awaitEvents;
+            })
+            .then(function() {
+              is(face.status, "loaded", "FontFace should have status \"loaded\" (TEST 31) (" + what + ")");
+              doc.fonts.clear();
+              return doc.fonts.ready;
+            });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 32) Test that pending restyles prevent document.fonts.status
+    // from becoming loaded.
+    var face = new FontFace("test", "url(neverending_font_load.sjs)");
+    face.load();
+    document.fonts.add(face);
+
+    is(document.fonts.status, "loading", "FontFaceSet.status after adding a loading FontFace (TEST 32)");
+
+    document.fonts.clear();
+    flushStyles();
+
+    is(document.fonts.status, "loaded", "FontFaceSet.status after clearing (TEST 32)");
+
+    document.fonts.add(face);
+
+    is(document.fonts.status, "loading", "FontFaceSet.status after adding a loading FontFace again (TEST 32)");
+
+    var div = document.querySelector("div");
+    div.style.color = "blue";
+
+    document.fonts.clear();
+    is(document.fonts.status, "loading", "FontFaceSet.status after clearing but when there is a pending restyle (TEST 32)");
+
+    return awaitRefresh()  // wait for a refresh driver tick
+        .then(function() {
+          is(document.fonts.status, "loaded", "FontFaceSet.status after clearing and the restyle has been flushed (TEST 32)");
+          return document.fonts.ready;
+        });
+
+  }).then(function() {
+
+    // (TEST 33) Test that CSS-connected FontFace objects are created
+    // for @font-face rules in the document.
+
+    is(document.fonts.status, "loaded", "document.fonts.status should initially be loaded (TEST 33)");
+
+    var style = document.querySelector("style");
+    var ruleText = "@font-face { font-family: something; src: url(x); ";
+    Object.keys(nonDefaultValues).forEach(function(aDesc) {
+      ruleText += descriptorNames[aDesc] + ": " + nonDefaultValues[aDesc][0] + "; ";
+    });
+    ruleText += "}";
+
+    style.textContent = ruleText;
+
+    var rule = style.sheet.cssRules[0];
+
+    var all = Array.from(document.fonts);
+    is(all.length, 1, "document.fonts should contain one FontFace (TEST 33)");
+
+    var face = all[0];
+    is(face.family, "something", "FontFace should have correct family value (TEST 33)");
+    Object.keys(nonDefaultValues).forEach(function(aDesc) {
+      var ok_todo = aDesc == "variant" ? todo : ok;
+      ok_todo(face[aDesc] == nonDefaultValues[aDesc][1], "FontFace should have correct " + aDesc + " value (TEST 33)");
+    });
+
+    is(document.fonts.status, "loaded", "document.fonts.status should still be loaded (TEST 33)");
+    is(face.status, "unloaded", "FontFace.status should be unloaded (TEST 33)");
+
+    document.fonts.clear();
+    ok(document.fonts.has(face), "CSS-connected FontFace should not be removed from document.fonts when clear is called (TEST 33)");
+
+    is(document.fonts.delete(face), false, "attempting to remove CSS-connected FontFace from document.fonts should return false (TEST 33)");
+    ok(document.fonts.has(face), "CSS-connected FontFace should not be removed from document.fonts when delete is called (TEST 33)");
+
+    style.textContent = "";
+
+    ok(!document.fonts.has(face), "CSS-connected FontFace should be removed from document.fonts once the rule has been removed (TEST 33)");
+
+    is(document.fonts.status, "loaded", "document.fonts.status should still be loaded after rule is removed (TEST 33)");
+    is(face.status, "unloaded", "FontFace.status should still be unloaded after rule is removed (TEST 33)");
+
+    document.fonts.add(face);
+    ok(document.fonts.has(face), "previously CSS-connected FontFace should be able to be added to document.fonts (TEST 33)");
+
+    is(document.fonts.status, "loaded", "document.fonts.status should still be loaded after now disconnected FontFace is added (TEST 33)");
+    is(face.status, "unloaded", "FontFace.status should still be unloaded after now disconnected FontFace is added (TEST 33)");
+
+    document.fonts.delete(face);
+    ok(!document.fonts.has(face), "previously CSS-connected FontFace should be able to be removed from document.fonts (TEST 33)");
+
+  }).then(function() {
+
+    // (TEST 34) Test that descriptor getters for unspecified descriptors on
+    // CSS-connected FontFace objects return their default values.
+    var style = document.querySelector("style");
+    var ruleText = "@font-face { font-family: something; src: url(x); }";
+
+    style.textContent = ruleText;
+
+    var all = Array.from(document.fonts);
+    var face = all[0];
+
+    Object.keys(defaultValues).forEach(function(aDesc) {
+      is(face[aDesc], defaultValues[aDesc], "FontFace should return default value for " + aDesc + " (TEST 34)");
+    });
+
+    style.textContent = "";
+
+  }).then(function() {
+
+    // (TEST 35) Test that no loadingdone event is dispatched when a FontFace
+    // with "loaded" status is added to a "loaded" FontFaceSet.
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }) {
+      p = p.then(function() {
+        var gotLoadingDone = false;
+        doc.fonts.onloadingdone = function(aEvent) {
+          gotLoadingDone = true;
+        };
+
+        is(doc.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" (TEST 35) (" + what + ")");
+        var face = new win.FontFace("test", fontData);
+
+        return face.loaded
+          .then(function() {
+            is(face.status, "loaded", "FontFace should have status \"loaded\" (TEST 35) (" + what + ")");
+            doc.fonts.add(face);
+            is(doc.fonts.status, "loaded", "document.fonts.status should still have status \"loaded\" (TEST 35) (" + what + ")");
+            return doc.fonts.ready;
+          })
+          .then(function() {
+            ok(!gotLoadingDone, "loadingdone event should not be dispatched (TEST 35) (" + what + ")");
+            doc.fonts.onloadingdone = null;
+            doc.fonts.clear();
+          });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 36) Test that no loadingdone or loadingerror event is dispatched
+    // when a FontFace with "error" status is added to a "loaded" FontFaceSet.
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }) {
+      var doc = win.document;
+      p = p.then(function() {
+        var gotLoadingDone = false, gotLoadingError = false;
+        doc.fonts.onloadingdone = function(aEvent) {
+          gotLoadingDone = true;
+        };
+        doc.fonts.onloadingerror = function(aEvent) {
+          gotLoadingError = true;
+        };
+
+        is(doc.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" (TEST 36) (" + what + ")");
+        var face = new win.FontFace("test", new ArrayBuffer(0));
+
+        return face.loaded
+          .then(function() {
+            ok(false, "FontFace should not have loaded (TEST 36) (" + what + ")");
+          }, function() {
+            is(face.status, "error", "FontFace should have status \"error\" (TEST 36) (" + what + ")");
+            doc.fonts.add(face);
+            is(doc.fonts.status, "loaded", "document.fonts.status should still have status \"loaded\" (TEST 36) (" + what + ")");
+            return doc.fonts.ready;
+          })
+          .then(function() {
+            ok(!gotLoadingDone, "loadingdone event should not be dispatched (TEST 36) (" + what + ")");
+            ok(!gotLoadingError, "loadingerror event should not be dispatched (TEST 36) (" + what + ")");
+            doc.fonts.onloadingdone = null;
+            doc.fonts.onloadingerror = null;
+            doc.fonts.clear();
+          });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 37) Test that a FontFace only has one loadingdone event dispatched
+    // at the FontFaceSet containing it.
+
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what}, i) {
+      p = p.then(function() {
+        return setTimeoutZero();  // wait for any previous events to be dispatched
+      }).then(function() {
+        var events = [], face, face2;
+
+        var awaitEvents = new Promise(function(aResolve, aReject) {
+          doc.fonts.onloadingdone = doc.fonts.onloadingerror = function(e) {
+            events.push(e);
+            if (events.length == 2) {
+              aResolve();
+            }
+          };
+        });
+
+        is(doc.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" (TEST 37) (" + what + ")");
+
+        face = new win.FontFace("test", "url(BitPattern.woff?test37." + i + "a)");
+        face.load();
+        doc.fonts.add(face);
+        is(doc.fonts.status, "loading", "document.fonts.status should have status \"loading\" after first font added (TEST 37) (" + what + ")");
+
+        return doc.fonts.ready
+          .then(function() {
+            is(doc.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" after first font loaded (TEST 37) (" + what + ")");
+            is(face.status, "loaded", "first FontFace should have status \"loaded\" (TEST 37) (" + what + ")");
+
+            face2 = new win.FontFace("test2", "url(BitPattern.woff?test37." + i + "b)");
+            face2.load();
+            doc.fonts.add(face2);
+            is(doc.fonts.status, "loading", "document.fonts.status should have status \"loading\" after second font added (TEST 37) (" + what + ")");
+
+            return doc.fonts.ready;
+          }).then(function() {
+            return awaitEvents;
+          }).then(function() {
+            is(doc.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" after second font loaded (TEST 37) (" + what + ")");
+            is(face2.status, "loaded", "second FontFace should have status \"loaded\" (TEST 37) (" + what + ")");
+
+            is(events.length, 2, "should receive two events (TEST 37) (" + what + ")");
+
+            is(events[0].type, "loadingdone", "first event should be \"loadingdone\" (TEST 37) (" + what + ")");
+            is(events[0].fontfaces.length, 1, "first event should have 1 FontFace (TEST 37) (" + what + ")");
+            is(events[0].fontfaces[0], face, "first event should have the first FontFace");
+
+            is(events[1].type, "loadingdone", "second event should be \"loadingdone\" (TEST 37) (" + what + ")");
+            is(events[1].fontfaces.length, 1, "second event should only have 1 FontFace (TEST 37) (" + what + ")");
+            is(events[1].fontfaces[0], face2, "second event should have the second FontFace (TEST 37) (" + what + ")");
+
+            doc.fonts.onloadingdone = null;
+            doc.fonts.onloadingerror = null;
+            doc.fonts.clear();
+            return doc.fonts.ready;
+          });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 38) Test that a FontFace only has one loadingerror event dispatched
+    // at the FontFaceSet containing it.
+
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }) {
+      p = p.then(function() {
+        return setTimeoutZero();  // wait for any previous events to be dispatched
+      }).then(function() {
+        var events = [], face, face2;
+
+        var awaitEvents = new Promise(function(aResolve, aReject) {
+          doc.fonts.onloadingdone = doc.fonts.onloadingerror = function(e) {
+            events.push(e);
+            if (events.length == 4) {
+              aResolve();
+            }
+          };
+        });
+
+        is(doc.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" (TEST 38) (" + what + ")");
+
+        face = new win.FontFace("test", "url(x)");
+        face.load();
+        doc.fonts.add(face);
+        is(doc.fonts.status, "loading", "document.fonts.status should have status \"loading\" after first font added (TEST 38) (" + what + ")");
+
+        return doc.fonts.ready
+          .then(function() {
+            is(doc.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" after first font failed to load (TEST 38) (" + what + ")");
+            is(face.status, "error", "first FontFace should have status \"error\" (TEST 38) (" + what + ")");
+
+            face2 = new win.FontFace("test2", "url(x)");
+            face2.load();
+            doc.fonts.add(face2);
+            is(doc.fonts.status, "loading", "document.fonts.status should have status \"loading\" after second font added (TEST 38) (" + what + ")");
+
+            return doc.fonts.ready;
+          }).then(function() {
+            return awaitEvents;
+          }).then(function() {
+            is(doc.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" after second font failed to load (TEST 38) (" + what + ")");
+            is(face2.status, "error", "second FontFace should have status \"error\" (TEST 38) (" + what + ")");
+
+            is(events.length, 4, "should receive four events (TEST 38) (" + what + ")");
+
+            is(events[0].type, "loadingdone", "first event should be \"loadingdone\" (TEST 38) (" + what + ")");
+            is(events[0].fontfaces.length, 0, "first event should have no FontFaces (TEST 38) (" + what + ")");
+
+            is(events[1].type, "loadingerror", "second event should be \"loadingerror\" (TEST 38) (" + what + ")");
+            is(events[1].fontfaces.length, 1, "second event should have 1 FontFace (TEST 38) (" + what + ")");
+            is(events[1].fontfaces[0], face, "second event should have the first FontFace");
+
+            is(events[2].type, "loadingdone", "third event should be \"loadingdone\" (TEST 38) (" + what + ")");
+            is(events[2].fontfaces.length, 0, "third event should have no FontFaces (TEST 38) (" + what + ")");
+
+            is(events[3].type, "loadingerror", "third event should be \"loadingerror\" (TEST 38) (" + what + ")");
+            is(events[3].fontfaces.length, 1, "third event should only have 1 FontFace (TEST 38) (" + what + ")");
+            is(events[3].fontfaces[0], face2, "third event should have the second FontFace");
+
+            doc.fonts.onloadingdone = null;
+            doc.fonts.onloadingerror = null;
+            doc.fonts.clear();
+            return doc.fonts.ready;
+          });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 39) Test that a FontFace for an @font-face rule only has one
+    // loadingdone event dispatched at the FontFaceSet containing it.
+
+    var style, all, events, awaitEvents;
+
+    return setTimeoutZero()  // wait for any previous events to be dispatched
+      .then(function() {
+        style = document.querySelector("style");
+        var ruleText = "@font-face { font-family: test; src: url(BitPattern.woff?test39a); } " +
+                       "@font-face { font-family: test2; src: url(BitPattern.woff?test39b); }";
+
+        style.textContent = ruleText;
+
+        all = Array.from(document.fonts);
+        events = [];
+
+        awaitEvents = new Promise(function(aResolve, aReject) {
+          document.fonts.onloadingdone = document.fonts.onloadingerror = function(e) {
+            events.push(e);
+            if (events.length == 2) {
+              aResolve();
+            }
+          };
+        });
+
+        is(document.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" (TEST 39)");
+
+        all[0].load();
+        is(document.fonts.status, "loading", "document.fonts.status should have status \"loading\" after first font loading (TEST 39)");
+
+        return document.fonts.ready
+      }).then(function() {
+        is(document.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" after first font loaded (TEST 39)");
+        is(all[0].status, "loaded", "first FontFace should have status \"loaded\" (TEST 39)");
+        is(all[1].status, "unloaded", "second FontFace should have status \"unloaded\" (TEST 39)");
+
+        all[1].load();
+        is(document.fonts.status, "loading", "document.fonts.status should have status \"loading\" after second font loading (TEST 39)");
+
+        return document.fonts.ready;
+      }).then(function() {
+        return awaitEvents;
+      }).then(function() {
+        is(document.fonts.status, "loaded", "document.fonts.status should have status \"loaded\" after second font loaded (TEST 39)");
+        is(all[1].status, "loaded", "second FontFace should have status \"loaded\" (TEST 39)");
+
+        is(events.length, 2, "should receive two events (TEST 39)");
+
+        is(events[0].type, "loadingdone", "first event should be \"loadingdone\" (TEST 39)");
+        is(events[0].fontfaces.length, 1, "first event should have 1 FontFace (TEST 39)");
+        is(events[0].fontfaces[0], all[0], "first event should have the first FontFace");
+
+        is(events[1].type, "loadingdone", "second event should be \"loadingdone\" (TEST 39)");
+        is(events[1].fontfaces.length, 1, "second event should only have 1 FontFace (TEST 39)");
+        is(events[1].fontfaces[0], all[1], "second event should have the second FontFace (TEST 39)");
+
+        style.textContent = "";
+
+        document.fonts.onloadingdone = null;
+        document.fonts.onloadingerror = null;
+        document.fonts.clear();
+        return document.fonts.ready;
+      });
+
+  }).then(function() {
+
+    // (TEST 40) Test that an attempt to add the same FontFace object a second
+    // time to a FontFaceSet (where one of the FontFace objects is reflecting
+    // an @font-face rule) will be ignored.
+
+    // First set up a @font-face rule.
+    var style = document.querySelector("style");
+    style.textContent = "@font-face { font-family: something; src: url(x); }";
+
+    // Then add a couple of non-connected FontFace objects.
+    var f1 = new FontFace("test1", "url(x)");
+    var f2 = new FontFace("test2", "url(x)");
+
+    document.fonts.add(f1);
+    document.fonts.add(f2);
+
+    var all = Array.from(document.fonts);
+    var ruleFontFace = all[0];
+
+    is(all.length, 3, "number of FontFace objects in the FontFaceSet before duplicate add (TEST 40)");
+    is(all[1], f1, "first non-connected FontFace object in the FontFaceSet before duplicate add (TEST 40)");
+    is(all[2], f2, "second non-connected FontFace object in the FontFaceSet before duplicate add (TEST 40)");
+
+    document.fonts.add(f1);
+
+    all = Array.from(document.fonts);
+    is(all.length, 3, "number of FontFace objects in the FontFaceSet after duplicate add #1 (TEST 40)");
+    is(all[0], ruleFontFace, "rule-based FontFace object in the FontFaceSEt after duplicate add #1 (TEST 40)");
+    is(all[1], f1, "first non-connected FontFace object in the FontFaceSet after duplicate add #1 (TEST 40)");
+    is(all[2], f2, "second non-connected FontFace object in the FontFaceSet after duplicate add #1 (TEST 40)");
+
+    document.fonts.add(ruleFontFace);
+
+    all = Array.from(document.fonts);
+    is(all.length, 3, "number of FontFace objects in the FontFaceSet after duplicate add #2 (TEST 40)");
+    is(all[0], ruleFontFace, "rule-based FontFace object in the FontFaceSEt after duplicate add #2 (TEST 40)");
+    is(all[1], f1, "first non-connected FontFace object in the FontFaceSet after duplicate add #2 (TEST 40)");
+    is(all[2], f2, "second non-connected FontFace object in the FontFaceSet after duplicate add #2 (TEST 40)");
+
+    style.textContent = "";
+
+    document.fonts.clear();
+
+  }).then(function() {
+
+    // (TEST 41) Test that an attempt to add the same FontFace object a second
+    // time to a FontFaceSet (where none of the FontFace objects are reflecting
+    // an @font-face rule) will be ignored.
+
+    sources.forEach(function({ win, doc, what }) {
+      // Add a couple of non-connected FontFace objects.
+      var f1 = new win.FontFace("test1", "url(x)");
+      var f2 = new win.FontFace("test2", "url(x)");
+
+      doc.fonts.add(f1);
+      doc.fonts.add(f2);
+
+      var all = Array.from(doc.fonts);
+
+      is(all.length, 2, "number of FontFace objects in the FontFaceSet before duplicate add (TEST 41) (" + what + ")");
+      is(all[0], f1, "first non-connected FontFace object in the FontFaceSet before duplicate add (TEST 41) (" + what + ")");
+      is(all[1], f2, "second non-connected FontFace object in the FontFaceSet before duplicate add (TEST 41) (" + what + ")");
+
+      doc.fonts.add(f1);
+
+      all = Array.from(doc.fonts);
+      is(all.length, 2, "number of FontFace objects in the FontFaceSet after duplicate add (TEST 41) (" + what + ")");
+      is(all[0], f1, "first non-connected FontFace object in the FontFaceSet after duplicate add (TEST 41) (" + what + ")");
+      is(all[1], f2, "second non-connected FontFace object in the FontFaceSet after duplicate add (TEST 41) (" + what + ")");
+
+      doc.fonts.clear();
+    });
+
+  }).then(function() {
+
+    // (TEST 42) Test that adding a FontFace to multiple FontFaceSets and then
+    // loading it updates the status of all FontFaceSets.
+
+    var face = new FontFace("test", "url(x)");
+
+    sourceDocuments.forEach(function({ doc, what }) {
+      doc.fonts.add(face);
+    });
+
+    sourceDocuments.forEach(function({ doc, what }) {
+      is(doc.fonts.status, "loaded", what + ".fonts.status before loading (TEST 42)");
+    });
+
+    face.load();
+
+    sourceDocuments.forEach(function({ doc, what }) {
+      is(doc.fonts.status, "loading", what + ".fonts.status after loading started (TEST 42)");
+    });
+
+    return Promise.all(sourceDocuments.map(function({ doc }) { return doc.fonts.ready; }))
+      .then(function() {
+        is(face.status, "error", "FontFace.status after loading finished (TEST 42)");
+        sourceDocuments.forEach(function({ doc, what }) {
+          is(doc.fonts.status, "loaded", what + ".fonts.status after loading finished (TEST 42)");
+        });
+
+        sourceDocuments.forEach(function({ doc, what }) {
+          doc.fonts.clear();
+        });
+      });
+
+  }).then(function() {
+
+    // (TEST 43) Test the check method with platform fonts and some
+    // degenerate cases.
+
+    sourceDocuments.forEach(function({ doc, what }) {
+      // Invalid font shorthands should throw a SyntaxError.
+      try {
+        doc.fonts.check("Helvetica");
+        ok(false, "check should throw when a syntactically invalid font shorthand is given (TEST 43) (" + what + ")");
+      } catch (ex) {
+        is(ex.name, "SyntaxError", "exception name when check is called with a syntactically invalid font shorthand (TEST 43) (" + what + ")");
+      }
+
+      // System fonts should throw a SyntaxError.
+      try {
+        doc.fonts.check("caption");
+        ok(false, "check should throw when a system font value is given (TEST 43) (" + what + ")");
+      } catch (ex) {
+        is(ex.name, "SyntaxError", "exception name when check is called with a system font value (TEST 43) (" + what + ")");
+      }
+
+      // CSS-wide keywords should throw a SyntaxError.
+      try {
+        doc.fonts.check("inherit");
+        ok(false, "check should throw when a CSS-wide keyword is given (TEST 43) (" + what + ")");
+      } catch (ex) {
+        is(ex.name, "SyntaxError", "exception name when check is called with a CSS-wide keyword (TEST 43) (" + what + ")");
+      }
+
+      // CSS variables should throw a SyntaxError.
+      try {
+        doc.fonts.check("16px var(--family)");
+        ok(false, "check should throw when CSS variables are used (TEST 43) (" + what + ")");
+      } catch (ex) {
+        is(ex.name, "SyntaxError", "exception name when check is called with CSS variables (TEST 43) (" + what + ")");
+      }
+
+      // No matching font family names => return true.
+      is(doc.fonts.check("16px NonExistentFont1, NonExistentFont2"), true, "check return value when no matching font family names are used (TEST 43) (" + what + ")");
+
+      // Matching platform font family name => return true.
+      is(doc.fonts.check("16px NonExistentFont, " + likelyPlatformFonts), true, "check return value when a matching platform font family name is used (TEST 43) (" + what + ")");
+
+      // Matching platform font family name, but using a different test
+      // strings.  (Platform fonts always return true from check, regardless
+      // of the actual glyphs present.)
+      [
+        { test: "\0",  desc: "a single non-matching glyph" },
+        { test: "A\0", desc: "a matching and a non-matching glyph" },
+        { test: "A",   desc: "a matching glyph" },
+        { test: "AB",  desc: "multiple matching glyphs" }
+      ].forEach(function({ test, desc }) {
+        is(doc.fonts.check("16px " + likelyPlatformFonts, test), true, "check return value when a matching platform font family name is used but with " + desc + " (TEST 43) (" + what + ")");
+      });
+
+      // No matching font family name, but an empty test string.
+      is(doc.fonts.check("16px NonExistentFont", ""), true, "check return value with a non-matching font family name and an empty test string (TEST 43) (" + what + ")");
+
+      // Matching platform font family name, but empty test string.
+      is(doc.fonts.check("16px " + likelyPlatformFonts, ""), true, "check return value with an empty test string (TEST 43) (" + what + ")");
+    });
+
+  }).then(function() {
+
+    // (TEST 44) Test the check method with script-created FontFaces.
+
+    var tests = [
+      // at least one matching FontFace is not loaded ==> false
+      { result: false, font: "16px Test", faces: [{ family: "Test", status: "unloaded" }] },
+      { result: false, font: "16px Test", faces: [{ family: "SecondTest", status: "loaded" }, { family: "Test", status: "unloaded" }] },
+      { result: false, font: "16px Test", faces: [{ family: "Test", status: "unloaded" }, { family: "Test", status: "loaded" }] },
+      { result: false, font: "16px Test", faces: [{ family: "Test", status: "loading" }] },
+      { result: false, font: "16px Test", faces: [{ family: "Test", status: "error" }] },
+      { result: false, font: "16px Test", faces: [{ family: "Test", status: "unloaded", style: "italic" }] },
+      { result: false, font: "bold 16px Test", faces: [{ family: "Test", status: "loaded", weight: "600" }, { family: "Test", status: "unloaded", weight: "bold" }] },
+      { result: false, font: "16px Test, SecondTest", faces: [{ family: "Test", status: "loaded" }, { family: "SecondTest", status: "unloaded" }] },
+      { result: false, font: "16px Test, " + likelyPlatformFonts + ", SecondTest, sans-serif", faces: [{ family: "Test", status: "loaded" }, { family: "SecondTest", status: "unloaded" }] },
+
+      // all matching FontFaces are loaded ==> true
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded" }, { family: "Test", status: "loaded" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded" }, { family: "Test", status: "unloaded", unicodeRange: "U+4E0A" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded" }, { family: "Test", status: "error", unicodeRange: "U+4E0A" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded" }, { family: "Irrelevant", status: "unloaded" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", style: "italic" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", weight: "bold" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", stretch: "condensed" }] },
+      { result: true,  font: "bold 16px Test", faces: [{ family: "Test", status: "loaded", weight: "bold" }, { family: "Test", status: "unloaded", weight: "600" }] },
+      { result: true,  font: "16px Test, " + likelyPlatformFonts + ", SecondTest, sans-serif", faces: [{ family: "Test", status: "loaded" }, { family: "SecondTest", status: "loaded" }] },
+
+      // no matching FontFaces at all ==> true
+      { result: true,  font: "16px Test", faces: [] },
+      { result: true,  font: "16px Test", faces: [{ family: "Irrelevant", status: "unloaded" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "unloaded", unicodeRange: "U+4E0A" }] },
+      { result: true,  font: "16px Test, " + likelyPlatformFonts + ", SecondTest, sans-serif", faces: [{ family: "ThirdTest", status: "loaded" }] },
+
+      // matching FontFace for one sample text character is loaded but
+      // not the other ==> false
+      { result: false, font: "16px Test", faces: [{ family: "Test", status: "loaded", unicodeRange: "U+61" }, { family: "Test", status: "unloaded", unicodeRange: "U+62" }] },
+
+      // matching FontFaces for separate sample text characters are all
+      // loaded ==> true
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", unicodeRange: "U+61" }, { family: "Test", status: "loaded", unicodeRange: "U+62" }] },
+    ];
+
+    sources.forEach(function({ win, doc, what }, i) {
+      tests.forEach(function({ result, font, faces }, j) {
+        faces.forEach(function(f, k) {
+          var fontFace;
+          if (f.status == "loaded") {
+            fontFace = new win.FontFace(f.family, fontData, f);
+          } else if (f.status == "error") {
+            fontFace = new win.FontFace(f.family, new ArrayBuffer(0), f);
+          } else {
+            fontFace = new win.FontFace(f.family, "url(BitPattern.woff?test44." + [i, j, k] + ")", f);
+            if (f.status == "loading") {
+              fontFace.load();
+            }
+          }
+          is(fontFace.status, f.status, "status of newly created FontFace " + [j, k] + " (TEST 44) (" + what + ")");
+          doc.fonts.add(fontFace);
+        });
+        is(doc.fonts.check(font, "ab"), result, "check return value for subtest " + j + " (TEST 44) (" + what + ")");
+        doc.fonts.clear();
+      });
+    });
+
+  }).then(function() {
+
+    // (TEST 45) Test the load method with platform fonts and some
+    // degenerate cases.
+
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }) {
+      p = p.then(function() {
+        // Invalid font shorthands should reject the promise with a SyntaxError.
+        return doc.fonts.load("Helvetica").then(function() {
+          ok(false, "load should reject when a syntactically invalid font shorthand is given (TEST 45) (" + what + ")");
+        }, function(ex) {
+          is(ex.name, "SyntaxError", "exception name when load is called with a syntactically invalid font shorthand (TEST 45) (" + what + ")");
+        });
+      });
+
+      p = p.then(function() {
+        // System fonts should reject with a SyntaxError.
+        return doc.fonts.load("caption").then(function() {
+          ok(false, "load should throw when a system font value is given (TEST 45) (" + what + ")");
+        }, function(ex) {
+          is(ex.name, "SyntaxError", "exception name when load is called with a system font value (TEST 45) (" + what + ")");
+        });
+      });
+
+      p = p.then(function() {
+        // CSS-wide keywords should reject with a SyntaxError.
+        return doc.fonts.load("inherit").then(function() {
+          ok(false, "load should throw when a CSS-wide keyword is given (TEST 45) (" + what + ")");
+        }, function(ex) {
+          is(ex.name, "SyntaxError", "exception name when load is called with a CSS-wide keyword (TEST 45) (" + what + ")");
+        });
+      });
+
+      p = p.then(function() {
+        // CSS variables should throw a SyntaxError.
+        return doc.fonts.load("16px var(--family)").then(function() {
+          ok(false, "load should throw when CSS variables are used (TEST 45) (" + what + ")");
+        }, function(ex) {
+          is(ex.name, "SyntaxError", "exception name when load is called with CSS variables (TEST 45) (" + what + ")");
+        });
+      });
+
+      p = p.then(function() {
+        // No matching font family names => return true.
+        return doc.fonts.load("16px NonExistentFont1, NonExistentFont2").then(function(result) {
+          is(result.length, 0, "load resolves with an emtpy array when no matching font family names are used (TEST 45) (" + what + ")");
+        });
+      });
+
+      p = p.then(function() {
+        // Matching platform font family name => return true.
+        return doc.fonts.load("16px NonExistentFont1, " + likelyPlatformFonts).then(function(result) {
+          is(result.length, 0, "load resolves with an emtpy array when no matching font family names are used (TEST 45) (" + what + ")");
+        });
+      });
+
+      // Matching platform font family name, but using a different test
+      // strings.  (Platform fonts always return true from load, regardless
+      // of the actual glyphs present.)
+      [
+        { sample: "\0",  desc: "a single non-matching glyph" },
+        { sample: "A\0", desc: "a matching and a non-matching glyph" },
+        { sample: "A",   desc: "a matching glyph" },
+        { sample: "AB",  desc: "multiple matching glyphs" }
+      ].forEach(function({ sample, desc }) {
+        p = p.then(function() {
+          return doc.fonts.load("16px " + likelyPlatformFonts, sample).then(function(result) {
+            is(result.length, 0, "load resolves with an empty array when a matching platform font family name is used but with " + desc + " (TEST 45) (" + what + ")");
+          });
+        });
+      });
+
+      p = p.then(function() {
+        // No matching font family name, but an empty test string.
+        return doc.fonts.load("16px NonExistentFont", "").then(function(result) {
+          is(result.length, 0, "load resolves with an empty array when a non-matching platform font family name and an empty test string is used (TEST 45) (" + what + ")");
+        });
+      });
+
+      p = p.then(function() {
+        // Matching font family name, but an empty test string.
+        return doc.fonts.load("16px " + likelyPlatformFonts, "").then(function(result) {
+          is(result.length, 0, "load resolves with an empty array when a matching platform font family name and an empty test string is used (TEST 45) (" + what + ")");
+        });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 46) Test the load method with script-created FontFaces.
+
+    var tests = [
+      // at least one matching FontFace is not yet loaded, but will load ==> resolve
+      { result: true, font: "16px Test", faces: [{ family: "Test", status: "unloaded", included: true }] },
+      { result: true, font: "16px Test", faces: [{ family: "SecondTest", status: "loaded" }, { family: "Test", status: "unloaded", included: true }] },
+      { result: true, font: "16px Test", faces: [{ family: "Test", status: "unloaded", included: true }, { family: "Test", status: "loaded", included: true }] },
+      { result: true, font: "16px Test", faces: [{ family: "Test", status: "loading", included: true }] },
+      { result: true, font: "16px Test", faces: [{ family: "Test", status: "unloaded", style: "italic", included: true }] },
+      { result: true, font: "bold 16px Test", faces: [{ family: "Test", status: "unloaded", weight: "600", included: true }] },
+      { result: true, font: "bold 16px Test", faces: [{ family: "Test", status: "unloaded", weight: "600" }, { family: "Test", status: "unloaded", weight: "bold", included: true }] },
+      { result: true, font: "16px Test, SecondTest", faces: [{ family: "Test", status: "loaded", included: true }, { family: "SecondTest", status: "unloaded", included: true }] },
+      { result: true, font: "16px Test, " + likelyPlatformFonts + ", SecondTest, sans-serif", faces: [{ family: "Test", status: "loaded", included: true }, { family: "SecondTest", status: "unloaded", included: true }] },
+
+      // at least one matching FontFace is in an error state ==> reject
+      { result: false, font: "16px Test", faces: [{ family: "Test", status: "unloaded" }, { family: "Test", status: "error" }] },
+
+      // all matching FontFaces are already loaded ==> resolve
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", included: true }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", included: true }, { family: "Test", status: "loaded", included: true }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", included: true }, { family: "Test", status: "unloaded", unicodeRange: "U+4E0A" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", included: true }, { family: "Test", status: "error", unicodeRange: "U+4E0A" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", included: true }, { family: "Irrelevant", status: "unloaded" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", style: "italic", included: true }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", weight: "bold", included: true }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", stretch: "condensed", included: true }] },
+      { result: true,  font: "bold 16px Test", faces: [{ family: "Test", status: "loaded", weight: "bold", included: true }, { family: "Test", status: "loaded", weight: "600" }] },
+      { result: true,  font: "bold 16px Test", faces: [{ family: "Test", status: "loaded", weight: "600" }, { family: "Test", status: "loaded", weight: "bold", included: true }] },
+      { result: true,  font: "16px Test, " + likelyPlatformFonts + ", SecondTest, sans-serif", faces: [{ family: "Test", status: "loaded", included: true }, { family: "SecondTest", status: "loaded", included: true }] },
+
+      // no matching FontFaces at all ==> resolve
+      { result: true,  font: "16px Test", faces: [] },
+      { result: true,  font: "16px Test", faces: [{ family: "Irrelevant", status: "unloaded" }] },
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "unloaded", unicodeRange: "U+4E0A" }] },
+      { result: true,  font: "16px Test, " + likelyPlatformFonts + ", SecondTest, sans-serif", faces: [{ family: "ThirdTest", status: "loaded" }] },
+
+      // matching FontFace for one sample text character is already loaded but
+      // the other is not (but will) ==> resolve
+      { result: true, font: "16px Test", faces: [{ family: "Test", status: "loaded", unicodeRange: "U+61", included: true }, { family: "Test", status: "unloaded", unicodeRange: "U+62", included: true }] },
+
+      // matching FontFaces for separate sample text characters are all
+      // loaded ==> resolve
+      { result: true,  font: "16px Test", faces: [{ family: "Test", status: "loaded", unicodeRange: "U+61", included: true }, { family: "Test", status: "loaded", unicodeRange: "U+62", included: true }] },
+    ];
+
+    var p = Promise.resolve();
+    sources.forEach(function({ win, doc, what }, i) {
+      tests.forEach(function({ result, font, faces }, j) {
+        p = p.then(function() {
+          var fontFaces = [];
+          faces.forEach(function(f, k) {
+            var fontFace;
+            if (f.status == "loaded") {
+              fontFace = new win.FontFace(f.family, fontData, f);
+            } else if (f.status == "error") {
+              fontFace = new win.FontFace(f.family, new ArrayBuffer(0), f);
+            } else {
+              fontFace = new win.FontFace(f.family, "url(BitPattern.woff?test46." + [i, j, k] + ")", f);
+              if (f.status == "loading") {
+                fontFace.load();
+              }
+            }
+            is(fontFace.status, f.status, "status of newly created FontFace " + [j, k] + " (TEST 46) (" + what + ")");
+            doc.fonts.add(fontFace);
+            fontFaces.push(fontFace);
+          });
+          return doc.fonts.load(font, "ab").then(function(array) {
+            ok(result, "load should resolve for subtest " + j + " (TEST 46) (" + what + ")");
+            var expected = [];
+            for (var k = 0; k < faces.length; k++) {
+              if (faces[k].included) {
+                expected.push(fontFaces[k]);
+              }
+            }
+            is(array.length, expected.length, "length of array load resolves with for subtest " + j + " (TEST 46) (" + what + ")");
+            for (var k = 0; k < array.length; k++) {
+              is(array[k], expected[k], "value in array[" + k + "] load resolves with for subtest " + j + " (TEST 46) (" + what + ")");
+            }
+          }, function(ex) {
+            ok(!result, "load should not resolve for subtest " + j + " (TEST 46) (" + what + ")");
+            is(ex.name, "SyntaxError", "exception load's return value is rejected with for subtest " + j + " (TEST 46) (" + what + ")");
+          }).then(function() {
+            doc.fonts.clear();
+          });
+        });
+      });
+    });
+    return p;
+
+  }).then(function() {
+
+    // (TEST 47) Test that CSS-connected FontFaces can't be added to other
+    // FontFaceSets.
+
+    var style = document.querySelector("style");
+    style.textContent = "@font-face { font-family: something; src: url(x); }";
+
+    var rule = style.sheet.cssRules[0];
+
+    var all = Array.from(document.fonts);
+    is(all.length, 1, "document.fonts should contain one FontFace (TEST 47)");
+
+    var face = all[0];
+
+    sourceDocuments.forEach(function({ doc, what }) {
+      if (doc == document) {
+        return;
+      }
+
+      var exceptionName;
+      try {
+        doc.fonts.add(face);
+        ok(false, "add should throw when attempting to add a CSS-connected FontFace to another FontFaceSet (TEST 47) (" + what + ")");
+      } catch (ex) {
+        is(ex.name, "InvalidModificationError", "exception name when add is called with a CSS-connected FontFace from another FontFaceSet (TEST 47) (" + what + ")");
+      }
+    });
+
+    style.textContent = "";
+    document.body.offsetTop;
+
+    sourceDocuments.forEach(function({ doc, what }) {
+      if (doc == document) {
+        return;
+      }
+
+      ok(!doc.fonts.has(face), "FontFaceSet initially doesn't have the FontFace (TEST 47) (" + what + ")");
+      doc.fonts.add(face);
+      ok(doc.fonts.has(face), "add should allow a previously CSS-connected FontFace to be added to another FontFaceSet (TEST 47) (" + what + ")");
+      doc.fonts.clear();
+    });
+
+    document.fonts.clear();
+
+  }).then(function() {
+
+    // (TEST 48) Test that FontFaceSets that hold a combination of FontFaces
+    // from different documents expose the right set of FontFaces.
+
+    // Expected FontFaceSet contents.
+    var expected = {
+      document: [],
+      vdocument: [],
+      ndocument: [],
+    };
+
+    // Create a CSS-connected FontFace in the top-level document.
+    var style = document.querySelector("style");
+    style.textContent = "@font-face { font-family: something; src: url(x); }";
+
+    var all = Array.from(document.fonts);
+    is(all.length, 1, "document.fonts should contain one FontFace (TEST 48)");
+
+    all[0]._description = "CSS-connected in document";
+    expected.document.push(all[0]);
+
+    // Create a CSS-connected FontFace in the visible iframe.
+    var vstyle = vdocument.querySelector("style");
+    vstyle.textContent = "@font-face { font-family: somethingelse; src: url(x); }";
+
+    all = Array.from(vdocument.fonts);
+    all[0]._description = "CSS-connected in vdocument";
+    is(all.length, 1, "vdocument.fonts should contain one FontFace (TEST 48)");
+
+    expected.vdocument.push(all[0]);
+
+    // Create a FontFace in each window and add it to each document's FontFaceSet.
+    var faces = [];
+    sourceWindows.forEach(function({ win, what: whatWin }, index) {
+      var f = new win.FontFace("test" + index, "url(x)");
+      sourceDocuments.forEach(function({ doc, what: whatDoc }) {
+        doc.fonts.add(f);
+        expected[whatDoc].push(f);
+        f._description = whatWin + "/" + whatDoc;
+      });
+    });
+
+    sourceDocuments.forEach(function({ doc, what }) {
+      let allFonts = Array.from(doc.fonts);
+      is(expected[what].length, allFonts.length, "expected FontFaceSet size (TEST 48) (" + what + ")");
+      for (let i = 0; i < expected[what].length; i++) {
+        is(expected[what][i], allFonts[i], "expected FontFace (" + expected[what][i]._description + ") at index " + i + " (TEST 48) (" + what + ")");
+      }
+    });
+
+    vstyle.textContent = "";
+    style.textContent = "";
+
+    sourceDocuments.forEach(function({ doc }) { doc.fonts.clear(); });
+
+  }).then(function() {
+
+    // (TEST LAST) Test that a pending style sheet load prevents
+    // document.fonts.status from being set to "loaded".
+
+    // First, add a FontFace to document.fonts that will load soon.
+    var face = new FontFace("test", "url(BitPattern.woff?testlast)");
+    face.load();
+    document.fonts.add(face);
+
+    // Next, add a style sheet reference.
+    var link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = "neverending_stylesheet_load.sjs";
+    link.type = "text/css";
+    document.head.appendChild(link);
+
+    return setTimeoutZero()  // wait for the style sheet to start loading
+        .then(function() {
+          document.fonts.clear();
+          is(document.fonts.status, "loading", "FontFaceSet.status when the FontFaceSet has been cleared of loading FontFaces but there is a pending style sheet load (TEST LAST)");
+          document.head.removeChild(link);
+          // XXX Removing the <link> element won't cancel the load of the
+          // style sheet, so we can't do that to test that
+          // document.fonts.ready is resolved once there are no more
+          // loading style sheets.
+        });
+
+    // NOTE: It is important that this style sheet test comes last in the file,
+    // as the neverending style sheet load will interfere with subsequent
+    // sub-tests.
+
+  }).then(function() {
+
+    // End of the tests.
+    SimpleTest.finish();
+
+  }, function(aError) {
+
+    // Something failed.
+    ok(false, "Something failed: " + aError);
+    SimpleTest.finish();
+
+  });
+}
+
+function start() {
+  if (SpecialPowers.getBoolPref("layout.css.font-loading-api.enabled")) {
+    SpecialPowers.pushPrefEnv({ set: [["layout.css.font-display.enabled", true]] },
+                              runTest);
+  } else {
+    ok(true, "CSS Font Loading API is not enabled.");
+  }
+}
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(5);
+
+</script>
+
+<style></style>
+<div></div>
diff --git a/layout/style/test/test_garbage_at_end_of_declarations.html b/layout/style/test/test_garbage_at_end_of_declarations.html
new file mode 100644
index 0000000000..0e59867693
--- /dev/null
+++ b/layout/style/test/test_garbage_at_end_of_declarations.html
@@ -0,0 +1,152 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test handling of garbage at the end of CSS declarations</title>
+  <script 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>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+<div id="testnode"></div>
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/* eslint-disable dot-notation */
+/** Test for correct ExpectEndProperty calls in CSS parser **/
+
+
+/*
+ * Inspired by review comments on bug 378217.
+ *
+ * The original idea was to test that ExpectEndProperty calls are made
+ * in the correct places in the CSS parser so that we don't accept
+ * garbage at the end of property values.
+ *
+ * However, there's actually other code (in ParseDeclaration) that
+ * ensures that we don't accept garbage.
+ *
+ * Despite that, I'm checking it in anyway, since it caught an infinite
+ * loop in the patch for bug 435441.
+ */
+
+var gElement = document.getElementById("testnode");
+var gDeclaration = gElement.style;
+
+/*
+ * This lists properties where garbage identifiers are allowed at the
+ * end, with values in property_database.js that are exceptions that
+ * should be tested anyway.  "inherit", "initial" and "unset" are always
+ * tested.
+ */
+var gAllowsExtra = {
+  "counter-increment": { "none": true },
+  "counter-reset": { "none": true },
+  "font-family": {},
+  "font": { "caption": true, "icon": true, "menu": true, "message-box": true,
+            "small-caption": true, "status-bar": true },
+  "voice-family": {},
+  "list-style": {
+    "inside none": true, "none inside": true, "none": true,
+    "none outside": true, "outside none": true,
+    'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")': true,
+    'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==") outside': true,
+    'outside url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAKElEQVR42u3NQQ0AAAgEoNP+nTWFDzcoQE1udQQCgUAgEAgEAsGTYAGjxAE/G/Q2tQAAAABJRU5ErkJggg==")': true
+  },
+};
+
+/* These are the reverse of the above list; they're the unusual values
+   that do allow extra keywords afterwards */
+var gAllowsExtraUnusual = {
+  "transition": { "all": true, "0s": true, "0s 0s": true, "ease": true,
+                  "1s 2s linear": true, "1s linear 2s": true,
+                  "linear 1s 2s": true, "linear 1s": true,
+                  "1s linear": true, "1s 2s": true, "2s 1s": true,
+                  "linear": true, "1s": true, "2s": true,
+                  "ease-in-out": true, "2s ease-in": true,
+                  "ease-out 2s": true, "1s width, 2s": true },
+  "animation": { "none": true, "0s": true, "ease": true,
+                 "normal": true, "running": true, "1.0": true,
+                 "1s 2s linear": true, "1s linear 2s": true,
+                 "linear 1s 2s": true, "linear 1s": true,
+                 "1s linear": true, "1s 2s": true, "2s 1s": true,
+                 "linear": true, "1s": true, "2s": true,
+                 "ease-in-out": true, "2s ease-in": true,
+                 "ease-out 2s": true, "1s bounce, 2s": true,
+                 "1s bounce, 2s none": true },
+  "font-family": { "inherit": true, "initial": true, "unset": true }
+};
+
+gAllowsExtraUnusual["-moz-transition"] = gAllowsExtraUnusual["transition"];
+gAllowsExtraUnusual["-moz-animation"] = gAllowsExtraUnusual["animation"];
+
+function test_property(property)
+{
+  var info = gCSSProperties[property];
+
+  function test_value(value) {
+    if (property in gAllowsExtra &&
+        value != "inherit" && value != "initial" && value != "unset" &&
+        !(value in gAllowsExtra[property])) {
+      return;
+    }
+    if (property in gAllowsExtraUnusual &&
+        value in gAllowsExtraUnusual[property]) {
+      return;
+    }
+
+    // Include non-identifier characters in the garbage
+    // in case |value| would also be valid with a <custom-ident> added.
+    gElement.setAttribute("style", property + ": " + value + " +blah/");
+    if ("subproperties" in info) {
+      for (idx in info.subproperties) {
+        var subprop = info.subproperties[idx];
+        is(gDeclaration.getPropertyValue(subprop), "",
+           ["expected garbage ignored after '", property, ": ", value,
+            "' when looking at subproperty '", subprop, "'"].join(""));
+      }
+    } else {
+      is(gDeclaration.getPropertyValue(property), "",
+         ["expected garbage ignored after '", property, ": ", value,
+          "'"].join(""));
+    }
+  }
+
+  var idx;
+  test_value("inherit");
+  test_value("initial");
+  test_value("unset");
+  for (idx in info.initial_values)
+    test_value(info.initial_values[idx]);
+  for (idx in info.other_values)
+    test_value(info.other_values[idx]);
+}
+
+// To avoid triggering the slow script dialog, we have to test one
+// property at a time.
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(2);
+var props = [];
+for (var prop in gCSSProperties)
+  props.push(prop);
+props = props.reverse();
+function do_one() {
+  if (props.length == 0) {
+    SimpleTest.finish();
+    return;
+  }
+  test_property(props.pop());
+  SimpleTest.executeSoon(do_one);
+}
+SimpleTest.executeSoon(do_one);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_grid_computed_values.html b/layout/style/test/test_grid_computed_values.html
new file mode 100644
index 0000000000..68a183606c
--- /dev/null
+++ b/layout/style/test/test_grid_computed_values.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>Test computed grid values</title>
+  <link rel="author" title="Tobias Schneider" href="mailto:schneider@jancona.com">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <link rel='stylesheet' href='/resources/testharness.css'>
+  <style>
+  
+    #grid {
+      display: grid;
+      width: 500px;
+      height: 400px;
+      grid-template-columns:
+        [a]     auto
+        [b]     minmax(min-content, 1fr)
+        [b c d] repeat(2, [e] 40px)
+                repeat(5, auto);
+      grid-template-rows:
+        [a]       minmax(min-content, 1fr)
+        [b]       auto
+        [b c d e] 30px 30px
+                  auto auto;
+      grid-auto-columns: 3fr;
+      grid-auto-rows: 2fr;
+    }
+    #grid2 {
+      display: grid;
+      width: 500px;
+      height: 400px;
+      grid-auto-columns: 10px;
+      grid-auto-rows: 2fr;
+    }
+  
+  </style>
+</head>
+<body>
+
+<div>
+  <div id="grid">
+    <div style="grid-column-start:1; width:50px"></div>
+    <div style="grid-column-start:9; width:50px"></div>
+  </div>
+  <div id="grid2">
+    <div style="grid-column: span X / 1"></div>
+    <div style="grid-column: 1 / span X 2"></div>
+  </div>
+<div>
+
+<script>
+
+  var gridElement = document.getElementById("grid");
+
+  function test_grid_template(assert_fn, width, height, desc) {
+    test(function() {
+      assert_fn(getComputedStyle(gridElement).gridTemplateColumns,
+                "[a] 50px [b] " + width + "px [b c d e] 40px [e] 40px 0px 0px 0px 0px 50px");
+      assert_fn(getComputedStyle(gridElement).gridTemplateRows,
+                "[a] " + height + "px [b] 0px [b c d e] 30px 30px 0px 0px");
+    }, desc);
+  }
+
+  test_grid_template(assert_equals, 320, 340, "test computed grid-template-{columns,rows} values");
+
+  gridElement.style.overflow = 'scroll';
+  var v_scrollbar = gridElement.offsetWidth - gridElement.clientWidth;
+  var h_scrollbar = gridElement.offsetHeight - gridElement.clientHeight;
+  test_grid_template(assert_equals, 320 - v_scrollbar, 340 - h_scrollbar,
+                     "test computed grid-template-{columns,rows} values, overflow: scroll");
+
+  gridElement.style.width = '600px';
+  gridElement.style.overflow = 'visible';
+  test_grid_template(assert_equals, 420, 340,
+                     "test computed grid-template-{columns,rows} values, after reflow");
+
+  gridElement.style.display = 'none';
+  test_grid_template(assert_not_equals, 420, 340,
+                     "test computed grid-template-{columns,rows} values, display: none");
+
+  gridElement.style.display = 'grid';
+  gridElement.parentNode.style.display = 'none';
+  test_grid_template(assert_not_equals, 420, 340,
+                     "test computed grid-template-{columns,rows} values, display: none on parent");
+
+  gridElement.parentNode.style.display = '';
+  function test_grid2() {
+    gridElement = document.getElementById("grid2");
+    test(function() {
+      const expectedCols = SpecialPowers.getBoolPref("layout.css.serialize-grid-implicit-tracks")
+        ? "10px 10px 10px"
+        : "none";
+      const expectedRows = SpecialPowers.getBoolPref("layout.css.serialize-grid-implicit-tracks")
+        ? "400px"
+        : "none";
+
+      assert_equals(getComputedStyle(gridElement).gridTemplateColumns,
+                    expectedCols);
+      assert_equals(getComputedStyle(gridElement).gridTemplateRows,
+                    expectedRows);
+    }, "test #grid2 computed grid-template-{columns,rows} values");
+  }
+
+  test(function() {
+    assert_equals(getComputedStyle(gridElement).gridAutoColumns, "3fr");
+    assert_equals(getComputedStyle(gridElement).gridAutoRows, "2fr");
+    test_grid2();
+  }, "test computed grid-auto-{columns,rows} values");
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_grid_container_shorthands.html b/layout/style/test/test_grid_container_shorthands.html
new file mode 100644
index 0000000000..2c13bccb1a
--- /dev/null
+++ b/layout/style/test/test_grid_container_shorthands.html
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>Test parsing of grid container shorthands (grid-template, grid)</title>
+  <link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <link rel='stylesheet' href='/resources/testharness.css'>
+</head>
+<body>
+
+<script>
+
+var initial_values = {
+    gridTemplateAreas: "none",
+    gridTemplateRows: "none",
+    gridTemplateColumns: "none",
+    gridAutoFlow: "row",
+    // Computed value for 'auto'
+    gridAutoRows: "auto",
+    gridAutoColumns: "auto",
+};
+
+// For various specified values of the grid-template shorthand,
+// test the computed values of the corresponding longhands.
+var grid_template_test_cases = [
+    {
+        specified: "none",
+    },
+    {
+        specified: "40px / 100px",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "100px",
+    },
+    {
+        specified: "minmax(auto,1fr) / minmax(auto,1fr)",
+        gridTemplateRows: "1fr",
+        gridTemplateColumns: "1fr",
+    },
+    {
+        specified: "[foo] 40px [bar] / [baz] 100px [fizz]",
+        gridTemplateRows: "[foo] 40px [bar]",
+        gridTemplateColumns: "[baz] 100px [fizz]",
+    },
+    {
+        specified: " none/100px",
+        gridTemplateRows: "none",
+        gridTemplateColumns: "100px",
+    },
+    {
+        specified: "40px/none",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "none",
+    },
+    {
+        specified: "40px/repeat(1, 20px)",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "repeat(1, 20px)",
+    },
+    {
+        specified: "40px/[a]repeat(1, 20px)",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "[a] repeat(1, 20px)",
+    },
+    {
+        specified: "40px/repeat(1, [a] 20px)",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "repeat(1, [a] 20px)",
+    },
+    {
+        specified: "40px/[a]repeat(2, [b]20px)",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "[a] repeat(2, [b] 20px)",
+    },
+    {
+        specified: "40px/[a]repeat(2, 20px)",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "[a] repeat(2, 20px)",
+    },
+    {
+        specified: "40px/repeat(2, [a] 20px)",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "repeat(2, [a] 20px)",
+    },
+    {
+        specified: "40px/[a]repeat(2, [b]20px)",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "[a] repeat(2, [b] 20px)",
+    },
+    {
+        specified: "40px/repeat(2, 20px[a])",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "repeat(2, 20px [a])",
+    },
+    {
+        specified: "40px/repeat(2, 20px[a]) [b]",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "repeat(2, 20px [a]) [b]",
+    },
+    {
+        specified: "40px/repeat(2, [a] 20px[b]) [c]",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "repeat(2, [a] 20px [b]) [c]",
+    },
+    {
+        specified: "40px/[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]",
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]",
+    },
+    {
+        specified: "'fizz'",
+        gridTemplateAreas: "\"fizz\"",
+        gridTemplateRows: "auto",
+    },
+    {
+        specified: "[bar] 'fizz'",
+        gridTemplateAreas: "\"fizz\"",
+        gridTemplateRows: "[bar] auto",
+    },
+    {
+        specified: "'fizz' / [foo] 40px",
+        gridTemplateAreas: "\"fizz\"",
+        gridTemplateRows: "auto",
+        gridTemplateColumns: "[foo] 40px",
+    },
+    {
+        specified: "[bar] 'fizz' / [foo] 40px",
+        gridTemplateAreas: "\"fizz\"",
+        gridTemplateRows: "[bar] auto",
+        gridTemplateColumns: "[foo] 40px",
+    },
+    {
+        specified: "'fizz' 100px / [foo] 40px",
+        gridTemplateAreas: "\"fizz\"",
+        gridTemplateRows: "100px",
+        gridTemplateColumns: "[foo] 40px",
+    },
+    {
+        specified: "[bar] 'fizz' 100px [buzz] \n [a] '.' 200px [b] / [foo] 40px",
+        gridTemplateAreas: "\"fizz\" \".\"",
+        gridTemplateRows: "[bar] 100px [buzz a] 200px [b]",
+        gridTemplateColumns: "[foo] 40px",
+    },
+    {
+        specified: "subgrid / subgrid",
+        gridTemplateColumns: "subgrid",
+        gridTemplateRows: "subgrid",
+    },
+    {
+        specified: "subgrid [foo] / subgrid",
+        gridTemplateColumns: "subgrid",
+        gridTemplateRows: "subgrid [foo]",
+    },
+    {
+        specified: "subgrid [foo] repeat(3, [] [a b] [c]) / subgrid",
+        gridTemplateColumns: "subgrid",
+        gridTemplateRows: "subgrid [foo] [] [a b] [c] [] [a b] [c] [] [a b] [c]",
+    },
+    {
+        // Test that the number of lines is clamped to kMaxLine = 10000.
+        specified: "subgrid [foo] repeat(999999999, [a]) / subgrid",
+        gridTemplateColumns: "subgrid",
+        // Array(n).join(s) is a hack for the non-standard s.repeat(n - 1) .
+        // [foo] + 9999 [a] gives us 10000 lines.
+        gridTemplateRows: "subgrid [foo]" + Array(10000).join(" [a]"),
+    },
+    {
+        specified: "subgrid [bar]/ subgrid [] [foo",
+        gridTemplateColumns: "subgrid [] [foo]",
+        gridTemplateRows: "subgrid [bar]",
+    },
+    {
+        specified: "'fizz' repeat(1, 100px)",
+    },
+    {
+        specified: "'fizz' repeat(auto-fill, 100px)",
+    },
+    {
+        specified: "'fizz' / repeat(1, 100px)",
+    },
+    {
+        specified: "'fizz' / repeat(auto-fill, 100px)",
+    },
+];
+
+grid_test_cases = grid_template_test_cases.concat([
+    {
+        specified: "auto-flow / 0",
+        gridAutoFlow: "row",
+        gridAutoRows: "auto",
+        gridTemplateColumns: "0px",
+    },
+    {
+        specified: "auto-flow dense / 0",
+        gridAutoFlow: "dense",
+        gridAutoRows: "auto",
+        gridTemplateColumns: "0px",
+    },
+    {
+        specified: "auto-flow minmax(auto,1fr) / none",
+        gridAutoFlow: "row",
+        gridAutoRows: "1fr",
+    },
+    {
+        specified: "auto-flow 40px / none",
+        gridAutoFlow: "row",
+        gridAutoRows: "40px",
+    },
+    {
+        specified: "none / auto-flow 40px",
+        gridAutoFlow: "column",
+        gridAutoRows: "auto",
+        gridAutoColumns: "40px",
+    },
+    {
+        specified: "none / auto-flow minmax(auto,1fr)",
+        gridAutoFlow: "column",
+        gridAutoRows: "auto",
+        gridAutoColumns: "1fr",
+    },
+    {
+        specified: "0 / auto-flow dense auto",
+        gridAutoFlow: "column dense",
+        gridAutoRows: "auto",
+        gridAutoColumns: "auto",
+        gridTemplateRows: "0px",
+    },
+    {
+        specified: "dense auto-flow minmax(min-content, 2fr) / 0",
+        gridAutoFlow: "dense",
+        gridAutoRows: "minmax(min-content, 2fr)",
+        gridAutoColumns: "auto",
+        gridTemplateColumns: "0px",
+    },
+    {
+        specified: "auto-flow 40px / 100px",
+        gridAutoFlow: "row",
+        gridAutoRows: "40px",
+        gridAutoColumns: "auto",
+        gridTemplateColumns: "100px",
+    },
+]);
+
+function run_tests(test_cases, shorthand, subproperties) {
+    test_cases.forEach(function(test_case) {
+        test(function() {
+            var element = document.createElement('div');
+            document.body.appendChild(element);
+            element.style[shorthand] = test_case.specified;
+            var computed = window.getComputedStyle(element);
+            subproperties.forEach(function(longhand) {
+                assert_equals(
+                    computed[longhand],
+                    test_case[longhand] || initial_values[longhand],
+                    longhand
+                );
+            });
+        }, "test parsing of 'grid-template: " + test_case.specified + "'");
+    });
+}
+
+run_tests(grid_template_test_cases, "gridTemplate", [
+    "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);
+
+run_tests(grid_test_cases, "grid", [
+    "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
+    "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]);
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_grid_item_shorthands.html b/layout/style/test/test_grid_item_shorthands.html
new file mode 100644
index 0000000000..a50be6112d
--- /dev/null
+++ b/layout/style/test/test_grid_item_shorthands.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>Test parsing of grid item shorthands (grid-column, grid-row, grid-area)</title>
+  <link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <link rel='stylesheet' href='/resources/testharness.css'>
+</head>
+<body>
+
+<script>
+
+// For various specified values of the grid-column and grid-row shorthands,
+// test the computed values of the corresponding longhands.
+var grid_column_row_test_cases = [
+    {
+        specified: "3 / 4",
+        expected_start: "3",
+        expected_end: "4",
+    },
+    {
+        specified: "foo / span bar",
+        expected_start: "foo",
+        expected_end: "span bar",
+    },
+    // http://dev.w3.org/csswg/css-grid/#placement-shorthands
+    // "When the second value is omitted,
+    //  if the first value is a <custom-ident>,
+    //  the grid-row-end/grid-column-end longhand
+    //  is also set to that <custom-ident>;
+    //  otherwise, it is set to auto."
+    {
+        specified: "foo",
+        expected_start: "foo",
+        expected_end: "foo",
+    },
+    {
+        specified: "7",
+        expected_start: "7",
+        expected_end: "auto",
+    },
+    {
+        specified: "foo 7",
+        expected_start: "7 foo",
+        expected_end: "auto",
+    },
+    {
+        specified: "span foo",
+        expected_start: "span foo",
+        expected_end: "auto",
+    },
+    {
+        specified: "foo 7 span",
+        expected_start: "span 7 foo",
+        expected_end: "auto",
+    },
+    {
+        specified: "7 span",
+        expected_start: "span 7",
+        expected_end: "auto",
+    },
+];
+
+// For various specified values of the grid-area shorthand,
+// test the computed values of the corresponding longhands.
+var grid_area_test_cases = [
+    {
+        specified: "10 / 20 / 30 / 40",
+        gridRowStart: "10",
+        gridColumnStart: "20",
+        gridRowEnd: "30",
+        gridColumnEnd: "40",
+    },
+    {
+        specified: "foo / bar / baz",
+        gridRowStart: "foo",
+        gridColumnStart: "bar",
+        gridRowEnd: "baz",
+        gridColumnEnd: "bar",
+    },
+    {
+        specified: "foo / span bar / baz",
+        gridRowStart: "foo",
+        gridColumnStart: "span bar",
+        gridRowEnd: "baz",
+        gridColumnEnd: "auto",
+    },
+    {
+        specified: "foo / bar",
+        gridRowStart: "foo",
+        gridColumnStart: "bar",
+        gridRowEnd: "foo",
+        gridColumnEnd: "bar",
+    },
+    {
+        specified: "foo / 4",
+        gridRowStart: "foo",
+        gridColumnStart: "4",
+        gridRowEnd: "foo",
+        gridColumnEnd: "auto",
+    },
+    {
+        specified: "foo",
+        gridRowStart: "foo",
+        gridColumnStart: "foo",
+        gridRowEnd: "foo",
+        gridColumnEnd: "foo",
+    },
+    {
+        specified: "7",
+        gridRowStart: "7",
+        gridColumnStart: "auto",
+        gridRowEnd: "auto",
+        gridColumnEnd: "auto",
+    },
+]
+
+grid_column_row_test_cases.forEach(function(test_case) {
+    ["Column", "Row"].forEach(function(axis) {
+        var shorthand = "grid" + axis;
+        var start_longhand = "grid" + axis + "Start";
+        var end_longhand = "grid" + axis + "End";
+        test(function() {
+            var element = document.createElement('div');
+            document.body.appendChild(element);
+            element.style[shorthand] = test_case.specified;
+            var computed = window.getComputedStyle(element);
+            assert_equals(computed[start_longhand], test_case.expected_start);
+            assert_equals(computed[end_longhand], test_case.expected_end);
+        }, "test parsing of '" + shorthand + ": " + test_case.specified + "'");
+    });
+});
+
+grid_area_test_cases.forEach(function(test_case) {
+    test(function() {
+        var element = document.createElement('div');
+        document.body.appendChild(element);
+        element.style.gridArea = test_case.specified;
+        var computed = window.getComputedStyle(element);
+        [
+            "gridRowStart", "gridColumnStart", "gridRowEnd", "gridColumnEnd"
+        ].forEach(function(longhand) {
+            assert_equals(computed[longhand], test_case[longhand], longhand);
+        });
+    }, "test parsing of 'grid-area: " + test_case.specified + "'");
+});
+
+</script>
+
+</body>
+</html>
diff --git a/layout/style/test/test_grid_shorthand_serialization.html b/layout/style/test/test_grid_shorthand_serialization.html
new file mode 100644
index 0000000000..b2d32b9364
--- /dev/null
+++ b/layout/style/test/test_grid_shorthand_serialization.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>Test serialization of CSS 'grid' shorthand property</title>
+  <link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <link rel='stylesheet' href='/resources/testharness.css'>
+</head>
+<body>
+
+<script>
+
+var initial_values = {
+    gridTemplateAreas: "none",
+    gridTemplateRows: "none",
+    gridTemplateColumns: "none",
+    gridAutoFlow: "row",
+    gridAutoRows: "auto",
+    gridAutoColumns: "auto",
+    gridRowGap: "0px",
+    gridColumnGap: "0px",
+};
+
+// For various specified values of the grid-template subproperties,
+// test the serialization of the shorthand.
+var grid_template_test_cases = [
+    {
+        gridTemplateColumns: "100px",
+        shorthand: "none / 100px",
+    },
+    {
+        gridTemplateRows: "minmax(auto,1fr)",
+        shorthand: "1fr / none",
+    },
+    {
+        gridTemplateColumns: "minmax(auto,1fr)",
+        shorthand: "none / 1fr",
+    },
+    {
+        gridTemplateRows: "40px",
+        shorthand: "40px / none",
+    },
+    {
+        gridTemplateRows: "40px",
+        gridTemplateColumns: "subgrid",
+        shorthand: "40px / subgrid",
+    },
+    {
+        gridTemplateRows: "[foo] 40px [bar]",
+        gridTemplateColumns: "[baz] 100px [fizz]",
+        shorthand: "[foo] 40px [bar] / [baz] 100px [fizz]",
+    },
+    {
+        gridTemplateAreas: "\"a\"",
+        gridTemplateRows: "20px",
+        shorthand: "\"a\" 20px",
+    },
+    {
+        gridTemplateAreas: "\"a\"",
+        gridTemplateRows: "[foo] 20px [bar]",
+        shorthand: "[foo] \"a\" 20px [bar]",
+    },
+    {
+        gridTemplateAreas: "\"a\"",
+        gridTemplateRows: "[foo] repeat(1, 20px) [bar]",
+        shorthand: "",
+    },
+    {
+        gridTemplateAreas: "\"a a\"",
+        gridTemplateColumns: "repeat(2, 100px)",
+        gridTemplateRows: "auto",
+        shorthand: "",
+    },
+    // Combinations of longhands that make the shorthand non-serializable:
+    {
+        gridTemplateAreas: "\"a\"",
+        gridTemplateRows: "20px 100px",
+        shorthand: "",
+    },
+    {
+        gridTemplateAreas: "\"a\" \"b\"",
+        gridTemplateRows: "20px",
+        shorthand: "",
+    },
+    {
+        gridTemplateAreas: "\"a\"",
+        gridTemplateRows: "subgrid",
+        shorthand: "",
+    },
+    {
+        gridTemplateAreas: "\"a\"",
+        gridTemplateRows: "subgrid [foo]",
+        shorthand: "",
+    },
+    {
+        gridTemplateAreas: "\"a\"",
+        gridTemplateRows: "20px",
+        gridTemplateColumns: "subgrid",
+        shorthand: "",
+    },
+    {
+        gridTemplateAreas: "\"a\"",
+        gridTemplateRows: "repeat(auto-fill, 20px)",
+        shorthand: "",
+    },
+    {
+        gridTemplateAreas: "\"a\"",
+        gridTemplateColumns: "repeat(auto-fill, 100px)",
+        gridTemplateRows: "auto",
+        shorthand: "",
+    },
+];
+
+grid_test_cases = grid_template_test_cases.concat([
+    {
+        gridAutoFlow: "row",
+        shorthand: "none",
+    },
+    {
+        gridAutoRows: "40px",
+        shorthand: "auto-flow 40px / none",
+    },
+    {
+        gridAutoRows: "minmax(auto,1fr)",
+        shorthand: "auto-flow 1fr / none",
+    },
+    {
+        gridAutoFlow: "column dense",
+        gridAutoRows: "minmax(min-content, max-content)",
+        shorthand: "",
+    },
+    {
+        gridAutoFlow: "column dense",
+        gridAutoColumns: "minmax(min-content, max-content)",
+        shorthand: "none / auto-flow dense minmax(min-content, max-content)",
+    },
+    {
+        gridAutoFlow: "column",
+        gridAutoColumns: "minmax(auto,1fr)",
+        shorthand: "none / auto-flow 1fr",
+    },
+    {
+        gridAutoFlow: "row dense",
+        gridAutoColumns: "minmax(min-content, 2fr)",
+        shorthand: "",
+    },
+    {
+        gridAutoFlow: "row dense",
+        gridAutoRows: "minmax(min-content, 2fr)",
+        shorthand: "auto-flow dense minmax(min-content, 2fr) / none",
+    },
+    {
+        gridAutoFlow: "row",
+        gridAutoRows: "40px",
+        gridTemplateColumns: "100px",
+        shorthand: "auto-flow 40px / 100px",
+    },
+    // Test that grid-gap properties don't affect serialization.
+    {
+        gridRowGap: "1px",
+        shorthand: "none",
+    },
+    {
+        gridColumnGap: "1px",
+        shorthand: "none",
+    },
+]);
+
+var grid_important_test_cases = [
+    {
+        "grid-auto-flow": "row",
+        shorthand: "",
+    },
+];
+
+
+function run_tests(test_cases, shorthand, subproperties) {
+    test_cases.forEach(function(test_case) {
+        test(function() {
+            var element = document.createElement('div');
+            document.body.appendChild(element);
+            subproperties.forEach(function(longhand) {
+                element.style[longhand] = test_case[longhand] ||
+                                          initial_values[longhand];
+            });
+            assert_equals(element.style[shorthand], test_case.shorthand);
+        }, "test shorthand serialization " + JSON.stringify(test_case));
+    });
+}
+
+function run_important_tests(test_cases, shorthand, subproperties) {
+    test_cases.forEach(function(test_case) {
+        test(function() {
+            var element = document.createElement('div');
+            document.body.appendChild(element);
+            subproperties.forEach(function(longhand) {
+                element.style.setProperty(longhand,
+                                          test_case[longhand] || initial_values[longhand],
+                                          "important");
+            });
+            assert_equals(element.style[shorthand], test_case.shorthand);
+        }, "test shorthand serialization " + JSON.stringify(test_case));
+    });
+}
+
+run_tests(grid_template_test_cases, "gridTemplate", [
+    "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);
+
+run_tests(grid_test_cases, "grid", [
+    "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
+    "gridAutoFlow", "gridAutoColumns", "gridAutoRows"]);
+
+run_important_tests(grid_important_test_cases, "grid", [
+    "grid-template-areas", "grid-template-columns", "grid-template-rows",
+    "grid-auto-flow", "grid-auto-columns", "grid-auto-rows"]);
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_group_insertRule.html b/layout/style/test/test_group_insertRule.html
new file mode 100644
index 0000000000..85edc2a1a0
--- /dev/null
+++ b/layout/style/test/test_group_insertRule.html
@@ -0,0 +1,243 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Variables Allowed Syntax</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#the-cssgroupingrule-interface">
+  <meta name="assert" content="requirements in definition of insertRule">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+<style id="style">
+@media print {}
+</style>
+<script id="metadata_cache">/*
+{
+  "rule_type": {},
+  "rule_length": {},
+  "insert_import_throws": {},
+  "insert_index_throws1": {},
+  "insert_index_throws2": {},
+  "insert_media_succeed": {},
+  "insert_style_succeed": {},
+  "insert_bad_media_throw": {},
+  "insert_empty_throw": {},
+  "insert_garbage_after_media_throw": {},
+  "insert_garbage_after_style_throw": {},
+  "insert_two_media_throw": {},
+  "insert_style_media_throw": {},
+  "insert_media_style_throw": {},
+  "insert_two_style_throw": {},
+  "insert_retval": {}
+}
+*/</script>
+</head>
+<body onload="run()">
+<div id=log></div>
+<div id="test"></div>
+<script>
+
+  var sheet = document.getElementById("style").sheet;
+
+  var grouping_rule = sheet.cssRules[0];
+
+  test(function() {
+         assert_equals(grouping_rule.type, CSSRule.MEDIA_RULE,
+                       "Rule type of @media rule");
+       },
+       "rule_type");
+
+  test(function() {
+         assert_equals(grouping_rule.cssRules.length, 0,
+                       "Starting cssRules.length of @media rule");
+       },
+       "rule_length");
+
+  test(function() {
+         assert_throws("HIERARCHY_REQUEST_ERR",
+                       function() {
+                         grouping_rule.insertRule("@import url(foo.css);", 0);
+                       },
+                       "inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR");
+       },
+       "insert_import_throws");
+
+  test(function() {
+         assert_throws("INDEX_SIZE_ERR",
+                       function() {
+                         grouping_rule.insertRule("p { color: green }", 1);
+                       },
+                       "inserting at a bad index throws INDEX_SIZE_ERR");
+       },
+       "insert_index_throws1");
+  test(function() {
+         grouping_rule.insertRule("p { color: green }", 0);
+         assert_equals(grouping_rule.cssRules.length, 1,
+                       "Modified cssRules.length of @media rule");
+         grouping_rule.insertRule("p { color: blue }", 1);
+         assert_equals(grouping_rule.cssRules.length, 2,
+                       "Modified cssRules.length of @media rule");
+         grouping_rule.insertRule("p { color: aqua }", 1);
+         assert_equals(grouping_rule.cssRules.length, 3,
+                       "Modified cssRules.length of @media rule");
+         assert_throws("INDEX_SIZE_ERR",
+                       function() {
+                         grouping_rule.insertRule("p { color: green }", 4);
+                       },
+                       "inserting at a bad index throws INDEX_SIZE_ERR");
+         assert_equals(grouping_rule.cssRules.length, 3,
+                       "Modified cssRules.length of @media rule");
+       },
+       "insert_index_throws2");
+
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         grouping_rule.insertRule("@media print {}", 0);
+         assert_equals(grouping_rule.cssRules.length, 1,
+                       "Modified cssRules.length of @media rule");
+         assert_equals(grouping_rule.cssRules[0].type, CSSRule.MEDIA_RULE,
+                       "inserting syntactically correct media rule succeeds");
+       },
+       "insert_media_succeed");
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         grouping_rule.insertRule("p { color: yellow }", 0);
+         assert_equals(grouping_rule.cssRules.length, 1,
+                       "Modified cssRules.length of @media rule");
+         assert_equals(grouping_rule.cssRules[0].type, CSSRule.STYLE_RULE,
+                       "inserting syntactically correct style rule succeeds");
+       },
+       "insert_style_succeed");
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         assert_throws("SYNTAX_ERR",
+                       function() {
+                         grouping_rule.insertRule("@media bad syntax;", 0);
+                       },
+                       "inserting syntactically invalid rule throws syntax error");
+         assert_equals(grouping_rule.cssRules.length, 0,
+                       "Modified cssRules.length of @media rule");
+       },
+       "insert_bad_media_throw");
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         assert_throws("SYNTAX_ERR",
+                       function() {
+                         grouping_rule.insertRule("", 0);
+                       },
+                       "inserting empty rule throws syntax error");
+         assert_equals(grouping_rule.cssRules.length, 0,
+                       "Modified cssRules.length of @media rule");
+       },
+       "insert_empty_throw");
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         assert_throws("SYNTAX_ERR",
+                       function() {
+                         grouping_rule.insertRule("@media print {} foo", 0);
+                       },
+                       "inserting rule with garbage afterwards throws syntax error");
+         assert_equals(grouping_rule.cssRules.length, 0,
+                       "Modified cssRules.length of @media rule");
+       },
+       "insert_garbage_after_media_throw");
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         assert_throws("SYNTAX_ERR",
+                       function() {
+                         grouping_rule.insertRule("p { color: yellow } foo", 0);
+                       },
+                       "inserting rule with garbage afterwards throws syntax error");
+         assert_equals(grouping_rule.cssRules.length, 0,
+                       "Modified cssRules.length of @media rule");
+       },
+       "insert_garbage_after_style_throw");
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         assert_throws("SYNTAX_ERR",
+                       function() {
+                         grouping_rule.insertRule("@media print {} @media print {}", 0);
+                       },
+                       "inserting multiple rules throws syntax error");
+         assert_equals(grouping_rule.cssRules.length, 0,
+                       "Modified cssRules.length of @media rule");
+       },
+       "insert_two_media_throw");
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         assert_throws("SYNTAX_ERR",
+                       function() {
+                         grouping_rule.insertRule("p { color: yellow } @media print {}", 0);
+                       },
+                       "inserting multiple rules throws syntax error");
+         assert_equals(grouping_rule.cssRules.length, 0,
+                       "Modified cssRules.length of @media rule");
+       },
+       "insert_style_media_throw");
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         assert_throws("SYNTAX_ERR",
+                       function() {
+                         grouping_rule.insertRule("@media print {} p { color: yellow }", 0);
+                       },
+                       "inserting multiple rules throws syntax error");
+         assert_equals(grouping_rule.cssRules.length, 0,
+                       "Modified cssRules.length of @media rule");
+       },
+       "insert_media_style_throw");
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         assert_throws("SYNTAX_ERR",
+                       function() {
+                         grouping_rule.insertRule("p { color: yellow } p { color: yellow }", 0);
+                       },
+                       "inserting multiple rules throws syntax error");
+         assert_equals(grouping_rule.cssRules.length, 0,
+                       "Modified cssRules.length of @media rule");
+       },
+       "insert_two_style_throw");
+
+  test(function() {
+         while (grouping_rule.cssRules.length > 0) {
+           grouping_rule.deleteRule(0);
+         }
+         var res = grouping_rule.insertRule("p { color: green }", 0);
+         assert_equals(res, 0, "return value should be index");
+         assert_equals(grouping_rule.cssRules.length, 1,
+                       "Modified cssRules.length of @media rule");
+         res = grouping_rule.insertRule("p { color: green }", 0);
+         assert_equals(res, 0, "return value should be index");
+         assert_equals(grouping_rule.cssRules.length, 2,
+                       "Modified cssRules.length of @media rule");
+         res = grouping_rule.insertRule("p { color: green }", 2);
+         assert_equals(res, 2, "return value should be index");
+         assert_equals(grouping_rule.cssRules.length, 3,
+                       "Modified cssRules.length of @media rule");
+       },
+       "insert_retval");
+
+
+</script>
+</body>
+</html>
+
diff --git a/layout/style/test/test_hover_on_part.html b/layout/style/test/test_hover_on_part.html
new file mode 100644
index 0000000000..fc39dcc307
--- /dev/null
+++ b/layout/style/test/test_hover_on_part.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<title>Shadow parts are invalidated correctly when only a pseudo-class state to the right of the part matches</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+  }
+  #host::part(p) {
+    background-color: red;
+  }
+  #host::part(p):hover {
+    background-color: lime;
+  }
+</style>
+<div id="host"></div>
+<div id="random-element-to-force-change"></div>
+<script>
+SimpleTest.waitForExplicitFinish();
+
+let host = document.getElementById("host");
+host.attachShadow({ mode: "open" }).innerHTML = `
+  <style>
+    div {
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+  <div part=p></div>
+`;
+
+let part = host.shadowRoot.querySelector("div");
+let other = document.getElementById("random-element-to-force-change");
+
+SimpleTest.waitForFocus(function() {
+  synthesizeMouseAtCenter(other, {type: "mousemove"});
+  is(
+    getComputedStyle(part).backgroundColor,
+    "rgb(255, 0, 0)",
+    "Part is red"
+  );
+
+  synthesizeMouseAtCenter(part, {type: "mousemove"});
+  is(
+    getComputedStyle(part).backgroundColor,
+    "rgb(0, 255, 0)",
+    "Part is lime"
+  );
+  SimpleTest.finish();
+});
+</script>
diff --git a/layout/style/test/test_hover_quirk.html b/layout/style/test/test_hover_quirk.html
new file mode 100644
index 0000000000..61e19f2a60
--- /dev/null
+++ b/layout/style/test/test_hover_quirk.html
@@ -0,0 +1,118 @@
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=783213
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for the :active and :hover quirk</title>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style type="text/css">
+    /* Should apply to all elements: */
+    #content :hover:first-of-type {
+      color: rgb(255, 0, 0);
+    }
+    #content :-moz-any(:hover) {
+      text-transform: lowercase;
+    }
+    #content :hover::after {
+      content: "any element";
+    }
+
+    #content :hover:first-of-type .child::after {
+      content: "any child";
+    }
+
+    #content .parent .child::after {
+      content: "wrong" !important;
+    }
+
+    #content .parent:hover .child::after {
+      content: "any child" !important;
+    }
+
+    /* Should apply only to links: */
+    #content :hover {
+      color: rgb(0, 255, 0) !important;
+      text-transform: uppercase !important;
+    }
+    #content :hover .child::after {
+      content: "link child" !important;
+    }
+
+    #dynamic-test {
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+
+    #dynamic-test > * {
+      width: 100%;
+      height: 100%;
+      background: red;
+    }
+
+    #dynamic-test:hover > * {
+      background: rgb(0, 255, 0);
+    }
+  </style>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <script type="application/javascript">
+    /** Test for the :active and :hover quirk **/
+    function test(element, isLink) {
+      if (!isLink)
+        var styles = {color: "rgb(255, 0, 0)", textTransform: "lowercase",
+                      childContent: '"any child"'};
+      else
+        var styles = {color: "rgb(0, 255, 0)", textTransform: "uppercase",
+                      childContent: '"link child"'};
+
+      // Trigger the :hover pseudo-class.
+      synthesizeMouseAtCenter(element, {type: "mousemove"});
+
+      var computedStyle = getComputedStyle(element);
+      is(computedStyle.color, styles.color, "Unexpected color value");
+      is(computedStyle.textTransform, styles.textTransform,
+         "Unexpected text-transform value");
+
+      computedStyle = getComputedStyle(element, "::after");
+      is(computedStyle.content, '"any element"',
+         "Unexpected pseudo-element content");
+
+      computedStyle = getComputedStyle(
+          element.getElementsByClassName("child")[0], "::after");
+      is(computedStyle.content, styles.childContent,
+         "Unexpected pseudo-element content for child");
+    }
+
+    SimpleTest.waitForExplicitFinish();
+    SimpleTest.waitForFocus(function() {
+      test(document.getElementById("span"), false);
+      test(document.getElementById("label"), false);
+      test(document.getElementById("link"), true);
+      test(document.getElementById("div"), false);
+      // Dynamic change test.
+      // Trigger the :hover pseudo-class.
+      synthesizeMouseAtCenter(document.getElementById('dynamic-test'), {type: "mousemove"});
+      is(getComputedStyle(document.getElementById('should-be-green-on-hover')).backgroundColor,
+         "rgb(0, 255, 0)",
+         "Dynamic change should invalidate properly");
+      SimpleTest.finish();
+    });
+  </script>
+</head>
+<body>
+  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783213">Mozilla Bug 783213</a>
+  <p id="display"></p>
+  <div id="dynamic-test">
+    <div id="should-be-green-on-hover"></div>
+  </div>
+  <div id="content">
+    <span id="span">Span<span class="child"></span></span><br>
+    <label id="label">Label<span class="child"></span></label><br>
+    <a id="link" href="#">Link<span class="child"></span></a><br>
+    <div id="div" class="parent">Div <span><span class="child"></span></span></div><br>
+  </div>
+  <pre id="test"></pre>
+</body>
+</html>
diff --git a/layout/style/test/test_html_attribute_computed_values.html b/layout/style/test/test_html_attribute_computed_values.html
new file mode 100644
index 0000000000..74e5b9754a
--- /dev/null
+++ b/layout/style/test/test_html_attribute_computed_values.html
@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=
+-->
+<head>
+  <title>Test for Bug </title>
+  <script src="/tests/SimpleTest/SimpleTest.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=">Mozilla Bug </a>
+<div id="content"></div>
+<pre id="test">
+<script type="application/javascript">
+
+
+var gValues = [
+  {
+     element: "<li type='i'></li>",
+     property: "list-style-type",
+     value: "lower-roman"
+  },
+  {
+     element: "<li type='I'></li>",
+     property: "list-style-type",
+     value: "upper-roman"
+  },
+  {
+     element: "<li type='a'></li>",
+     property: "list-style-type",
+     value: "lower-alpha"
+  },
+  {
+     element: "<li type='A'></li>",
+     property: "list-style-type",
+     value: "upper-alpha"
+  },
+  {
+     element: "<li type='1'></li>",
+     property: "list-style-type",
+     value: "decimal"
+  },
+  {
+     element: "<ol type='i'></ol>",
+     property: "list-style-type",
+     value: "lower-roman"
+  },
+  {
+     element: "<ol type='I'></ol>",
+     property: "list-style-type",
+     value: "upper-roman"
+  },
+  {
+     element: "<ol type='a'></ol>",
+     property: "list-style-type",
+     value: "lower-alpha"
+  },
+  {
+     element: "<ol type='A'></ol>",
+     property: "list-style-type",
+     value: "upper-alpha"
+  },
+  {
+     element: "<ol type='1'></ol>",
+     property: "list-style-type",
+     value: "decimal"
+  },
+];
+
+var content = document.getElementById("content");
+for (var i = 0; i < gValues.length; ++i) {
+  var v = gValues[i];
+
+  content.innerHTML = v.element;
+  is(getComputedStyle(content.firstChild, "").getPropertyValue(v.property),
+     v.value,
+     v.property + " for " + v.element);
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_ident_escaping.html b/layout/style/test/test_ident_escaping.html
new file mode 100644
index 0000000000..d727e7f207
--- /dev/null
+++ b/layout/style/test/test_ident_escaping.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=543428
+-->
+<head>
+  <title>Test for Bug 543428</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css" id="sheet">p { color: blue; }</style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=543428">Mozilla Bug 543428</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 543428 **/
+
+var sheet = document.getElementById("sheet").sheet;
+var rule = sheet.cssRules[0];
+
+function set_selector_text(selector)
+  // no cssText or selectorText setter implemented yet
+{
+  try {
+    // insertRule might throw on syntax error
+    sheet.insertRule(selector + " { color : green }", 0);
+    sheet.deleteRule(1);
+  } catch(ex) {}
+  rule = sheet.cssRules[0];
+}
+
+is(rule.selectorText, "p", "simple identifier not escaped");
+set_selector_text('\\P');
+is(rule.selectorText, "P", "simple identifier not escaped");
+set_selector_text('\\70');
+is(rule.selectorText, "p", "simple identifier not escaped");
+set_selector_text('font-family_72756');
+is(rule.selectorText, "font-family_72756", "simple identifier not escaped");
+set_selector_text('-font-family_72756');
+is(rule.selectorText, "-font-family_72756", "simple identifier not escaped");
+set_selector_text('-0invalid');
+set_selector_text('0invalid');
+is(rule.selectorText, "-font-family_72756", "setting invalid value ignored");
+set_selector_text('Håkon\\ Lie');
+is(rule.selectorText, "Håkon\\ Lie", "escaping done only where needed");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_img_src_causing_reflow.html b/layout/style/test/test_img_src_causing_reflow.html
new file mode 100644
index 0000000000..e63b39f9fe
--- /dev/null
+++ b/layout/style/test/test_img_src_causing_reflow.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test for bug 1787072</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<style>
+img {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+}
+</style>
+<img> <!-- Initially broken -->
+<script>
+add_task(async function() {
+  const utils = SpecialPowers.DOMWindowUtils;
+  const img = document.querySelector("img");
+  img.getBoundingClientRect();
+
+  let origFramesConstructed = utils.framesConstructed;
+  let origFramesReflowed = utils.framesReflowed;
+
+  let error = new Promise(r => img.addEventListener("error", r, { once: true }));
+
+  // Doesn't need to be an actual image.
+  img.src = "/some-valid-url";
+
+  img.getBoundingClientRect();
+  is(origFramesReflowed, utils.framesReflowed, "Shouldn't have reflowed when going broken -> loading");
+  is(origFramesConstructed, utils.framesConstructed, "Shouldn't have reflowed when going broken -> loading");
+
+  await error;
+
+  is(origFramesReflowed, utils.framesReflowed, "Shouldn't have reflowed when going loading -> broken");
+  is(origFramesConstructed, utils.framesConstructed, "Shouldn't have reflowed when going loading -> broken");
+});
+</script>
diff --git a/layout/style/test/test_import_preload.html b/layout/style/test/test_import_preload.html
new file mode 100644
index 0000000000..1c095c9768
--- /dev/null
+++ b/layout/style/test/test_import_preload.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
+<script src="slow_load.sjs"></script>
+<script>
+  let time = Date.now();
+  SimpleTest.waitForExplicitFinish();
+
+  onload = function() {
+    let styleTime = parseInt(getComputedStyle(document.documentElement).zIndex, 10);
+    isnot(styleTime, 0, "Should apply the @import sheet");
+    ok(!isNaN(styleTime), "Should apply the @import sheet (and not be nan)");
+    // This is technically a bit racy... Also see the comment in slow_load.sjs about the clamping.
+    time = time % (Math.pow(2, 31) - 1);
+    ok(styleTime < time, "Should try to fetch the import before running the script: " + styleTime + " vs. " + time);
+    SimpleTest.finish();
+  }
+</script>
+<style>
+  @import url(slow_load.sjs?css)
+</style>
diff --git a/layout/style/test/test_inherit_computation.html b/layout/style/test/test_inherit_computation.html
new file mode 100644
index 0000000000..34358f1a40
--- /dev/null
+++ b/layout/style/test/test_inherit_computation.html
@@ -0,0 +1,176 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test for computation of CSS 'inherit' on all properties and 'unset' on inherited properties</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="property_database.js"></script>
+  <style type="text/css" id="stylesheet"></style>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<p id="display"><span id="fparent"><span id="fchild"></span></span></p>
+<div id="content" style="display: none">
+
+<div id="testnode"><span id="nparent"><span id="nchild"></span></span></div>
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for computation of CSS 'inherit' on all properties and 'unset' on
+    inherited properties **/
+
+var gDisplayTree = document.getElementById("display");
+// elements without a frame
+var gNParent = document.getElementById("nparent");
+var gNChild = document.getElementById("nchild");
+// elements with a frame
+var gFParent = document.getElementById("fparent");
+var gFChild = document.getElementById("fchild");
+
+var gStyleSheet = document.getElementById("stylesheet").sheet;
+var gChildRule1 = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild, #fchild {}", gStyleSheet.cssRules.length)];
+var gChildRule2 = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild, #fchild {}", gStyleSheet.cssRules.length)];
+var gChildRule3 = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild.allother, #fchild.allother {}", gStyleSheet.cssRules.length)];
+var gChildRuleTop = gStyleSheet.cssRules[gStyleSheet.insertRule("#nchild, #nchild.allother, #fchild, #fchild.allother {}", gStyleSheet.cssRules.length)];
+var gParentRuleTop = gStyleSheet.cssRules[gStyleSheet.insertRule("#nparent, #fparent {}", gStyleSheet.cssRules.length)];
+
+function get_computed_value_node(node, property)
+{
+  var cs = getComputedStyle(node, "");
+  return get_computed_value(cs, property);
+}
+
+function test_property(property)
+{
+  var info = gCSSProperties[property];
+
+  var keywords = ["inherit"];
+  if (info.inherited)
+    keywords.push("unset");
+
+  keywords.forEach(function(keyword) {
+    if ("prerequisites" in info) {
+      var prereqs = info.prerequisites;
+      for (var prereq in prereqs) {
+        gParentRuleTop.style.setProperty(prereq, prereqs[prereq], "");
+        gChildRuleTop.style.setProperty(prereq, prereqs[prereq], "");
+      }
+    }
+
+    if (info.inherited) {
+      gParentRuleTop.style.setProperty(property, info.initial_values[0], "");
+      var initial_computed_n = get_computed_value_node(gNChild, property);
+      var initial_computed_f = get_computed_value_node(gFChild, property);
+      gChildRule1.style.setProperty(property, info.other_values[0], "");
+      var other_computed_n = get_computed_value_node(gNChild, property);
+      var other_computed_f = get_computed_value_node(gFChild, property);
+      isnot(other_computed_n, initial_computed_n,
+            "should be testing with values that compute to different things " +
+            "for '" + property + "'");
+      isnot(other_computed_f, initial_computed_f,
+            "should be testing with values that compute to different things " +
+            "for '" + property + "'");
+      gChildRule3.style.setProperty(property, keyword, "");
+      gFChild.className="allother";
+      gNChild.className="allother";
+      var inherit_initial_computed_n = get_computed_value_node(gNChild, property);
+      var inherit_initial_computed_f = get_computed_value_node(gFChild, property);
+      is(inherit_initial_computed_n, initial_computed_n,
+         keyword + " should cause inheritance of initial value for '" +
+         property + "'");
+      is(inherit_initial_computed_f, initial_computed_f,
+         keyword + " should cause inheritance of initial value for '" +
+         property + "'");
+      gParentRuleTop.style.setProperty(property, info.other_values[0], "");
+      var inherit_other_computed_n = get_computed_value_node(gNChild, property);
+      var inherit_other_computed_f = get_computed_value_node(gFChild, property);
+      is(inherit_other_computed_n, other_computed_n,
+         keyword + " should cause inheritance of other value for '" +
+         property + "'");
+      is(inherit_other_computed_f, other_computed_f,
+         keyword + " should cause inheritance of other value for '" +
+         property + "'");
+      gParentRuleTop.style.removeProperty(property);
+      gChildRule1.style.removeProperty(property);
+      gChildRule3.style.setProperty(property, info.other_values[0], "");
+      gFChild.className="";
+      gNChild.className="";
+    } else {
+      gParentRuleTop.style.setProperty(property, info.other_values[0], "");
+      var initial_computed_n = get_computed_value_node(gNChild, property);
+      var initial_computed_f = get_computed_value_node(gFChild, property);
+      var other_computed_n = get_computed_value_node(gNParent, property);
+      var other_computed_f = get_computed_value_node(gFParent, property);
+      isnot(other_computed_n, initial_computed_n,
+            "should be testing with values that compute to different things " +
+            "for '" + property + "'");
+      isnot(other_computed_f, initial_computed_f,
+            "should be testing with values that compute to different things " +
+            "for '" + property + "'");
+      gChildRule2.style.setProperty(property, keyword, "");
+      var inherit_other_computed_n = get_computed_value_node(gNChild, property);
+      var inherit_other_computed_f = get_computed_value_node(gFChild, property);
+      is(inherit_other_computed_n, other_computed_n,
+         keyword + " should cause inheritance of other value for '" +
+         property + "'");
+      is(inherit_other_computed_f, other_computed_f,
+         keyword + " should cause inheritance of other value for '" +
+         property + "'");
+      gParentRuleTop.style.removeProperty(property);
+      gChildRule1.style.setProperty(property, info.other_values[0], "");
+      var inherit_initial_computed_n = get_computed_value_node(gNChild, property);
+      var inherit_initial_computed_f = get_computed_value_node(gFChild, property);
+      is(inherit_initial_computed_n, initial_computed_n,
+         keyword + " should cause inheritance of initial value for '" +
+         property + "'");
+      // For width and inline-size, getComputedStyle returns used value
+      // when the element is displayed. Their initial value "auto" makes
+      // the element fill available space of the parent, so it doesn't
+      // make sense to compare it with the value we get before.
+      if (property != "width" && property != "inline-size") {
+        is(inherit_initial_computed_f, initial_computed_f,
+           keyword + " should cause inheritance of initial value for '" +
+           property + "'");
+      }
+      gParentRuleTop.style.removeProperty(property);
+      gChildRule1.style.removeProperty(property);
+      gChildRule2.style.removeProperty(property);
+    }
+
+    if ("prerequisites" in info) {
+      var prereqs = info.prerequisites;
+      for (var prereq in prereqs) {
+        gParentRuleTop.style.removeProperty(prereq);
+        gChildRuleTop.style.removeProperty(prereq);
+      }
+    }
+
+    // FIXME -moz-binding value makes gElementF and its parent loses
+    // their frame. Force it to get recreated after each property.
+    // See bug 1331903.
+    gDisplayTree.style.display = "none";
+    get_computed_value(getComputedStyle(gFChild, ""), "width");
+    gDisplayTree.style.display = "";
+    get_computed_value(getComputedStyle(gFChild, ""), "width");
+  });
+}
+
+for (var prop in gCSSProperties) {
+  // Skip -moz-binding because it effectively drops the frame.
+  if (prop == "-moz-binding") {
+    continue;
+  }
+  var info = gCSSProperties[prop];
+  gChildRule3.style.setProperty(prop, info.other_values[0], "");
+}
+
+for (var prop in gCSSProperties)
+  test_property(prop);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_inherit_storage.html b/layout/style/test/test_inherit_storage.html
new file mode 100644
index 0000000000..a9587d34d9
--- /dev/null
+++ b/layout/style/test/test_inherit_storage.html
@@ -0,0 +1,120 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=375363
+-->
+<head>
+  <title>Test for parsing, storage, and serialization of CSS 'inherit' on all properties and 'unset' on inherited properties</title>
+  <script 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=375363">Mozilla Bug 375363</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+<div id="testnode"></div>
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for parsing, storage, and serialization of CSS 'inherit' on all
+    properties and 'unset' on inherited properties **/
+
+var gDeclaration = document.getElementById("testnode").style;
+
+function test_property(property)
+{
+  var info = gCSSProperties[property];
+
+  var keywords = ["inherit"];
+  if (info.inherited)
+    keywords.push("unset");
+
+  keywords.forEach(function(keyword) {
+    function check_initial(sproperty) {
+      var sinfo = gCSSProperties[sproperty];
+      var val = gDeclaration.getPropertyValue(sproperty);
+      is(val, "", "value of '" + sproperty + "' before we do anything");
+      is(val, gDeclaration[sinfo.domProp],
+         "consistency between decl.getPropertyValue('" + sproperty + "') and decl." + sinfo.domProp);
+    }
+    check_initial(property);
+    if ("subproperties" in info)
+      for (var idx in info.subproperties)
+        check_initial(info.subproperties[idx]);
+
+    gDeclaration.setProperty(property, keyword, "");
+
+    function check_set(sproperty) {
+      var sinfo = gCSSProperties[sproperty];
+      val = gDeclaration.getPropertyValue(sproperty);
+      is(val, keyword,
+         keyword + " reported back for property '" + sproperty + "'");
+      is(val, gDeclaration[sinfo.domProp],
+         "consistency between decl.getPropertyValue('" + sproperty +
+         "') and decl." + sinfo.domProp);
+    }
+    check_set(property);
+    if ("subproperties" in info)
+      for (var idx in info.subproperties)
+        check_set(info.subproperties[idx]);
+
+    // We don't care particularly about the whitespace or the placement of
+    // semicolons, but for simplicity we'll test the current behavior.
+    if ("alias_for" in info) {
+      is(gDeclaration.cssText, info.alias_for + ": " + keyword + ";",
+        "declaration should serialize to exactly what went in (for " + keyword + ")");
+    } else if (info.type == CSS_TYPE_LEGACY_SHORTHAND) {
+      // We can't assert anything more meaningful here, really.
+      is(property, "zoom", "Zoom is a bit special because it never " +
+                           "serializes as-is, we always serialize the longhands, " +
+                           "but it doesn't just map to a single property " +
+                           "(and thus we can't use the 'alias_for' mechanism)");
+    } else {
+      is(gDeclaration.cssText, property + ": " + keyword + ";",
+        "declaration should serialize to exactly what went in (for " + keyword + ")");
+    }
+
+    gDeclaration.removeProperty(property);
+
+    function check_final(sproperty) {
+      var sinfo = gCSSProperties[sproperty];
+      var val = gDeclaration.getPropertyValue(sproperty);
+      is(val, "", "value of '" + sproperty + "' after removal of value");
+      is(val, gDeclaration[sinfo.domProp],
+         "consistency between decl.getPropertyValue('" + sproperty + "') and decl." + sinfo.domProp);
+    }
+    check_final(property);
+    if ("subproperties" in info)
+      for (var idx in info.subproperties)
+        check_final(info.subproperties[idx]);
+
+    // can all properties be removed from the style?
+    function test_remove_all_properties(propName, value) {
+      var i, p = [];
+      for (i = 0; i < gDeclaration.length; i++) p.push(gDeclaration[i]);
+      for (i = 0; i < p.length; i++) gDeclaration.removeProperty(p[i]);
+      var errstr = "when setting property " + propName + " to " + value;
+      is(gDeclaration.length, 0, "unremovable properties " + errstr);
+      is(gDeclaration.cssText, "", "non-empty serialization after removing all properties " + errstr);
+    }
+
+    // sanity check shorthands to make sure disabled props aren't exposed
+    if (info.type != CSS_TYPE_LONGHAND) {
+      gDeclaration.setProperty(property, keyword, "");
+      test_remove_all_properties(property, keyword);
+      gDeclaration.removeProperty(property);
+    }
+  });
+}
+
+for (var prop in gCSSProperties)
+  test_property(prop);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_initial_computation.html b/layout/style/test/test_initial_computation.html
new file mode 100644
index 0000000000..c8a36af227
--- /dev/null
+++ b/layout/style/test/test_initial_computation.html
@@ -0,0 +1,159 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test for computation of CSS 'initial' on all properties and 'unset' on reset properties</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="property_database.js"></script>
+  <style type="text/css" id="stylesheet"></style>
+  <style type="text/css">
+  /* For 'width', 'height', etc., need a constant size container. */
+  #display { width: 500px; height: 200px }
+  </style>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <script type="text/javascript">
+  SimpleTest.waitForExplicitFinish();
+
+  var load_count = 0;
+  function load_done() {
+    if (++load_count == 3)
+      run_tests();
+  }
+  </script>
+</head>
+<body>
+<p id="display"><span><span id="elementf"></span></span>
+<iframe id="unstyledn" src="unstyled.xml" height="10" width="10" onload="load_done()"></iframe>
+<iframe id="unstyledf" src="unstyled-frame.xml" height="10" width="10" onload="load_done()"></iframe>
+</p>
+<div id="content" style="display: none">
+
+<div><span id="elementn"></span></div>
+
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for computation of CSS 'initial' on all properties and 'unset' on
+    reset properties **/
+
+var gBrokenInitial = {
+};
+
+function xfail_initial(property) {
+  return property in gBrokenInitial;
+}
+
+var gDisplayTree = document.getElementById("display");
+var gElementN = document.getElementById("elementn");
+var gElementF = document.getElementById("elementf");
+var gStyleSheet = document.getElementById("stylesheet").sheet;
+var gRule1 = gStyleSheet.cssRules[gStyleSheet.insertRule("#elementn, #elementf {}", gStyleSheet.cssRules.length)];
+var gRule2 = gStyleSheet.cssRules[gStyleSheet.insertRule("#elementn, #elementf {}", gStyleSheet.cssRules.length)];
+
+var gInitialValuesN;
+var gInitialValuesF;
+var gInitialPrereqsRuleN;
+var gInitialPrereqsRuleF;
+
+function setup_initial_values(id, ivalprop, prereqprop) {
+  var iframe = document.getElementById(id);
+  window[ivalprop] = iframe.contentWindow.getComputedStyle(
+                       iframe.contentDocument.documentElement.firstChild);
+  var sheet = iframe.contentDocument.styleSheets[0];
+  // For 'width', 'height', etc., need a constant size container.
+  sheet.insertRule(":root { height: 200px; width: 500px }", sheet.cssRules.length);
+
+  window[prereqprop] = sheet.cssRules[sheet.insertRule(":root > * {}", sheet.cssRules.length)];
+}
+
+function test_property(property)
+{
+  var info = gCSSProperties[property];
+
+  var keywords = ["initial"];
+  if (!info.inherited)
+    keywords.push("unset");
+
+  keywords.forEach(function(keyword) {
+    if ("prerequisites" in info) {
+      var prereqs = info.prerequisites;
+      for (var prereq in prereqs) {
+        gRule1.style.setProperty(prereq, prereqs[prereq], "");
+        gInitialPrereqsRuleN.style.setProperty(prereq, prereqs[prereq], "");
+        gInitialPrereqsRuleF.style.setProperty(prereq, prereqs[prereq], "");
+      }
+    }
+    if (info.inherited) {
+      gElementN.parentNode.style.setProperty(property, info.other_values[0], "");
+      gElementF.parentNode.style.setProperty(property, info.other_values[0], "");
+    }
+
+    var initial_computed_n = get_computed_value(gInitialValuesN, property);
+    var initial_computed_f = get_computed_value(gInitialValuesF, property);
+    gRule1.style.setProperty(property, info.other_values[0], "");
+    var other_computed_n = get_computed_value(getComputedStyle(gElementN, ""), property);
+    var other_computed_f = get_computed_value(getComputedStyle(gElementF, ""), property);
+    isnot(other_computed_n, initial_computed_n,
+          "should be testing with values that compute to different things " +
+          "for '" + property + "'");
+    isnot(other_computed_f, initial_computed_f,
+          "should be testing with values that compute to different things " +
+          "for '" + property + "'");
+    // It used to be important for values that are supposed to compute to the
+    // initial value (given the design of the old rule tree, nsRuleNode) that
+    // we're modifying the most specific rule that matches the element, and
+    // that we've already requested style while that rule was empty.  This
+    // means we'd have a cached aStartStruct from the parent in the rule
+    // tree (caching the "other" value), so we'd make sure we don't get the
+    // initial value from the luck of default-initialization.  This means
+    // that it would've been important that we set the prereqs on
+    // gRule1.style rather than on gElement.style.
+    //
+    // However, the rule tree no longer stores cached structs, and we only
+    // temporarily cache reset structs during a single restyle.  So the
+    // particular failure mode this was designed to test for isn't as
+    // likely to eventuate.
+    gRule2.style.setProperty(property, keyword, "");
+    var initial_val_computed_n = get_computed_value(getComputedStyle(gElementN, ""), property);
+    var initial_val_computed_f = get_computed_value(getComputedStyle(gElementF, ""), property);
+    (xfail_initial(property) ? todo_is : is)(
+       initial_val_computed_n, initial_computed_n,
+       keyword + " should cause initial value for '" + property + "'");
+    (xfail_initial(property) ? todo_is : is)(
+       initial_val_computed_f, initial_computed_f,
+       keyword + " should cause initial value for '" + property + "'");
+    gRule1.style.removeProperty(property);
+    gRule2.style.removeProperty(property);
+
+    if ("prerequisites" in info) {
+      var prereqs = info.prerequisites;
+      for (var prereq in prereqs) {
+        gRule1.style.removeProperty(prereq);
+        gInitialPrereqsRuleN.style.removeProperty(prereq);
+        gInitialPrereqsRuleF.style.removeProperty(prereq);
+      }
+    }
+    if (info.inherited) {
+      gElementN.parentNode.style.removeProperty(property);
+      gElementF.parentNode.style.removeProperty(property);
+    }
+  });
+}
+
+function run_tests() {
+  setup_initial_values("unstyledn", "gInitialValuesN", "gInitialPrereqsRuleN");
+  setup_initial_values("unstyledf", "gInitialValuesF", "gInitialPrereqsRuleF");
+  for (var prop in gCSSProperties)
+    test_property(prop);
+  SimpleTest.finish();
+}
+
+load_done();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_initial_storage.html b/layout/style/test/test_initial_storage.html
new file mode 100644
index 0000000000..a1a081c5a6
--- /dev/null
+++ b/layout/style/test/test_initial_storage.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=375363
+-->
+<head>
+  <title>Test for parsing, storage, and serialization of CSS 'initial' on all properties and 'unset' on reset properties</title>
+  <script 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=375363">Mozilla Bug 375363</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+<div id="testnode"></div>
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for parsing, storage, and serialization of CSS 'initial' on all
+    properties and 'unset' on reset properties **/
+
+var gDeclaration = document.getElementById("testnode").style;
+
+/**
+ * Checks that the passed-in property-value (returned by getPropertyValue) is
+ * consistent with the DOM accessors that we know about for the given sproperty.
+ */
+function check_consistency(sproperty, valFromGetPropertyValue, messagePrefix)
+{
+  var sinfo = gCSSProperties[sproperty];
+  is(valFromGetPropertyValue, gDeclaration[sinfo.domProp],
+     `(${messagePrefix}) consistency between ` +
+     `decl.getPropertyValue(${sproperty}) and decl.${sinfo.domProp}`);
+
+  if (sinfo.domProp.startsWith("webkit")) {
+    // For webkit-prefixed DOM accessors, test with lowercase and uppercase
+    // first letter.
+    var uppercaseDomProp = "W" + sinfo.domProp.substring(1);
+    is(valFromGetPropertyValue, gDeclaration[uppercaseDomProp],
+       `(${messagePrefix}) consistency between ` +
+       `decl.getPropertyValue(${sproperty}) and decl.${uppercaseDomProp}`);
+  }
+}
+
+function test_property(property)
+{
+  var info = gCSSProperties[property];
+
+  var keywords = ["initial"];
+  if (!info.inherited)
+    keywords.push("unset");
+
+  keywords.forEach(function(keyword) {
+    function check_initial(sproperty) {
+      var val = gDeclaration.getPropertyValue(sproperty);
+      is(val, "", "value of '" + sproperty + "' before we do anything");
+      check_consistency(sproperty, val, "initial");
+    }
+    check_initial(property);
+    if ("subproperties" in info)
+      for (var idx in info.subproperties)
+        check_initial(info.subproperties[idx]);
+
+    gDeclaration.setProperty(property, keyword, "");
+
+    function check_set(sproperty) {
+      val = gDeclaration.getPropertyValue(sproperty);
+      is(val, keyword,
+         keyword + " reported back for property '" + sproperty + "'");
+      check_consistency(sproperty, val, "set");
+    }
+    check_set(property);
+    if ("subproperties" in info)
+      for (var idx in info.subproperties)
+        check_set(info.subproperties[idx]);
+
+    // We don't care particularly about the whitespace or the placement of
+    // semicolons, but for simplicity we'll test the current behavior.
+    if ("alias_for" in info) {
+      is(gDeclaration.cssText, info.alias_for + ": " + keyword + ";",
+        "declaration should serialize to exactly what went in (for " + keyword + ")");
+    } else if (info.type == CSS_TYPE_LEGACY_SHORTHAND) {
+      // We can't assert anything more meaningful here, really.
+      is(property, "zoom", "Zoom is a bit special because it never " +
+                           "serializes as-is, we always serialize the longhands, " +
+                           "but it doesn't just map to a single property " +
+                           "(and thus we can't use the 'alias_for' mechanism)");
+    } else {
+      is(gDeclaration.cssText, property + ": " + keyword + ";",
+        "declaration should serialize to exactly what went in (for " + keyword + ")");
+    }
+
+    gDeclaration.removeProperty(property);
+
+    function check_final(sproperty) {
+      var val = gDeclaration.getPropertyValue(sproperty);
+      is(val, "", "value of '" + sproperty + "' after removal of value");
+      check_consistency(sproperty, val, "final");
+    }
+    check_final(property);
+    if ("subproperties" in info)
+      for (var idx in info.subproperties)
+        check_final(info.subproperties[idx]);
+
+    // can all properties be removed from the style?
+    function test_remove_all_properties(propName, value) {
+      var i, p = [];
+      for (i = 0; i < gDeclaration.length; i++) p.push(gDeclaration[i]);
+      for (i = 0; i < p.length; i++) gDeclaration.removeProperty(p[i]);
+      var errstr = "when setting property " + propName + " to " + value;
+      is(gDeclaration.length, 0, "unremovable properties " + errstr);
+      is(gDeclaration.cssText, "", "non-empty serialization after removing all properties " + errstr);
+    }
+
+    // sanity check shorthands to make sure disabled props aren't exposed
+    if (info.type != CSS_TYPE_LONGHAND) {
+      gDeclaration.setProperty(property, keyword, "");
+      test_remove_all_properties(property, keyword);
+      gDeclaration.removeProperty(property);
+    }
+  });
+}
+
+for (var prop in gCSSProperties)
+  test_property(prop);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_invalidation_basic.html b/layout/style/test/test_invalidation_basic.html
new file mode 100644
index 0000000000..b5a6928405
--- /dev/null
+++ b/layout/style/test/test_invalidation_basic.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>
+  Test for bug 1368240: We only invalidate style as little as needed
+</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<style>
+.foo .bar {
+  color: red;
+}
+#container ~ .bar {
+  color: green;
+}
+</style>
+<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+<div></div>
+<div></div>
+<script>
+SimpleTest.waitForExplicitFinish();
+const utils = SpecialPowers.getDOMWindowUtils(window);
+
+// TODO(emilio): Add an API to get the ComputedStyles we've recreated, to make
+// more elaborated tests.
+document.documentElement.offsetTop;
+const initialRestyleGeneration = utils.restyleGeneration;
+
+// Normally we'd restyle the whole subtree in this case, but we should go down
+// the tree invalidating as little as needed (nothing in this case).
+container.classList.add("foo");
+document.documentElement.offsetTop;
+is(utils.restyleGeneration, initialRestyleGeneration,
+   "Shouldn't have restyled any descendant");
+
+container.setAttribute("id", "");
+document.documentElement.offsetTop;
+is(utils.restyleGeneration, initialRestyleGeneration,
+   "Shouldn't have restyled any sibling");
+
+SimpleTest.finish();
+</script>
diff --git a/layout/style/test/test_keyframes_rules.html b/layout/style/test/test_keyframes_rules.html
new file mode 100644
index 0000000000..027a406009
--- /dev/null
+++ b/layout/style/test/test_keyframes_rules.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=577974
+-->
+<head>
+  <title>Test for Bug 577974</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style id="style">
+
+  @keyframes bounce {
+    from {
+      margin-left: 0
+    }
+
+    /*
+     * These rules should get dropped due to syntax errors.  The script
+     * below tests that the 25% rule following them is at cssRules[1].
+     */
+    from, { margin-left: 0 }
+    from , { margin-left: 0 }
+    , from { margin-left: 0 }
+    ,from { margin-left: 0 }
+    from from { margin-left: 0 }
+    from, 1 { margin-left: 0 }
+    1 { margin-left: 0 }
+    1, from { margin-left: 0 }
+    from, 1.0 { margin-left: 0 }
+    1.0 { margin-left: 0 }
+    1.0, from { margin-left: 0 }
+
+    25% {
+      margin-left: 25px;
+    }
+
+    75%, 85% {
+      margin-left: 90px;
+    }
+
+    100% {
+      margin-left: 100px;
+    }
+  }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=577974">Mozilla Bug 577974</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 577974 **/
+
+var sheet = document.getElementById("style").sheet;
+
+var bounce = sheet.cssRules[0];
+is(bounce.type, CSSRule.KEYFRAMES_RULE, "bounce.type");
+is(bounce.type, 7, "bounce.type");
+is(bounce.name, "bounce", "bounce.name");
+bounce.name = "bouncier";
+is(bounce.name, "bouncier", "setting bounce.name");
+
+is(bounce.cssRules[0].type, CSSRule.KEYFRAME_RULE, "keyframe rule type");
+is(bounce.cssRules[0].type, 8, "keyframe rule type");
+is(bounce.cssRules[0].keyText, "0%", "keyframe rule keyText");
+is(bounce.cssRules[1].keyText, "25%", "keyframe rule keyText");
+is(bounce.cssRules[2].keyText, "75%, 85%", "keyframe rule keyText");
+is(bounce.cssRules[3].keyText, "100%", "keyframe rule keyText");
+is(bounce.cssRules[0].style.marginLeft, "0px", "keyframe rule style");
+is(bounce.cssRules[1].style.marginLeft, "25px", "keyframe rule style");
+
+is(bounce.cssRules[0].cssText, "0% { margin-left: 0px; }");
+is(bounce.cssText, "@keyframes bouncier {\n" +
+                   "0% { margin-left: 0px; }\n" +
+                   "25% { margin-left: 25px; }\n" +
+                   "75%, 85% { margin-left: 90px; }\n" +
+                   "100% { margin-left: 100px; }\n" +
+                   "}");
+
+bounce.cssRules[1].keyText = "from, 1"; // syntax error
+bounce.cssRules[1].keyText = "from, x"; // syntax error
+bounce.cssRules[1].keyText = "from,"; // syntax error
+bounce.cssRules[1].keyText = "from x"; // syntax error
+bounce.cssRules[1].keyText = "x"; // syntax error
+is(bounce.cssRules[1].keyText, "25%", "keyframe rule keyText parsing");
+bounce.cssRules[1].keyText = "from, 10%";
+is(bounce.cssRules[1].keyText, "0%, 10%", "keyframe rule keyText parsing");
+bounce.cssRules[1].keyText = "from, 0%";
+is(bounce.cssRules[1].keyText, "0%, 0%", "keyframe rule keyText parsing");
+bounce.cssRules[1].keyText = "from, from, from";
+is(bounce.cssRules[1].keyText, "0%, 0%, 0%", "keyframe rule keyText parsing");
+
+is(bounce.findRule("75%"), null, "findRule should match all keys");
+is(bounce.findRule("85%, 75%"), null,
+   "findRule should match all keys in order");
+is(bounce.findRule("75%,85%"), bounce.cssRules[2],
+   "findRule should match all keys in order, parsed");
+is(bounce.findRule("to"), bounce.cssRules[3],
+   "findRule should match keys as parsed");
+is(bounce.findRule("100%"), bounce.cssRules[3],
+   "findRule should match keys as parsed");
+is(bounce.findRule("100%, 100%"), null,
+   "findRule should match key list");
+is(bounce.findRule("100%,"), null,
+   "findRule should fail when given bad selector");
+is(bounce.findRule(",100%"), null,
+   "findRule should fail when given bad selector");
+is(bounce.cssRules.length, 4, "length of css rules");
+bounce.deleteRule("85%");
+is(bounce.cssRules.length, 4, "deleteRule should match all keys");
+bounce.deleteRule("85%, 75%");
+is(bounce.cssRules.length, 4, "deleteRule should match key list");
+bounce.deleteRule("75%  ,85%");
+is(bounce.cssRules.length, 3, "deleteRule should match keys in order, parsed");
+bounce.deleteRule("0%");
+is(bounce.cssRules.length, 2, "deleteRule should match keys in order, parsed");
+bounce.appendRule("from { color: blue }");
+is(bounce.cssRules.length, 3, "appendRule should append");
+is(bounce.cssRules[2].keyText, "0%", "appendRule should append");
+bounce.appendRule("from { color: blue }");
+is(bounce.cssRules.length, 4, "appendRule should append");
+is(bounce.cssRules[3].keyText, "0%", "appendRule should append");
+bounce.appendRule("from { color: blue } to { color: green }");
+is(bounce.cssRules.length, 4, "appendRule should ignore garbage at end");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_keyframes_vendor_prefix.html b/layout/style/test/test_keyframes_vendor_prefix.html
new file mode 100644
index 0000000000..4463bd259a
--- /dev/null
+++ b/layout/style/test/test_keyframes_vendor_prefix.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>
+Test for interaction between prefixed and non-prefixed @keyframes rules with
+the same name
+</title>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<div id='log'></div>
+<script>
+/**
+ * Appends a style element to the document head.
+ *
+ * @param t  The testharness.js Test object. If provided, this will be used
+ *           to register a cleanup callback to remove the style element
+ *           when the test finishes.
+ *
+ * @param rules  A dictionary object with selector names and rules to set on
+ *               the style sheet.
+ */
+function addStyle(t, rules) {
+  var extraStyle = document.createElement('style');
+  document.head.appendChild(extraStyle);
+  if (rules) {
+    var sheet = extraStyle.sheet;
+    for (var selector in rules) {
+      sheet.insertRule(selector + '{' + rules[selector] + '}',
+                       sheet.cssRules.length);
+    }
+  }
+
+  if (t && typeof t.add_cleanup === 'function') {
+    t.add_cleanup(function() {
+      extraStyle.remove();
+    });
+  }
+}
+
+/**
+ * Appends a div to the document body.
+ *
+ * @param t  The testharness.js Test object. If provided, this will be used
+ *           to register a cleanup callback to remove the div when the test
+ *           finishes.
+ *
+ * @param attrs  A dictionary object with attribute names and values to set on
+ *               the div.
+ */
+function addDiv(t, attrs) {
+  var div = document.createElement('div');
+  if (attrs) {
+    for (var attrName in attrs) {
+      div.setAttribute(attrName, attrs[attrName]);
+    }
+  }
+  document.body.appendChild(div);
+  if (t && typeof t.add_cleanup === 'function') {
+    t.add_cleanup(function() {
+      div.remove();
+    });
+  }
+  return div;
+}
+
+test(function(t) {
+  addStyle(t,
+    { '@-webkit-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-webkit- prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-moz-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-moz- prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-WEBKIT-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-WEBKIT- prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-MOZ-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-MOZ- prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-webkit-KEYFRAMES anim': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-webkit- prefix KEYFRAMES');
+
+test(function(t) {
+  addStyle(t,
+    { '@keyframes anim':         'from,to { color: rgb(0, 255, 0); }',
+      '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-webkit-keyframes should not override earlier non-prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@keyframes anim':      'from,to { color: rgb(0, 255, 0); }',
+      '@-moz-keyframes anim': 'from,to { color: rgb(255, 0, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, '-moz-keyframes should not override earlier non-prefix keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-moz-keyframes anim': 'from,to { color: rgb(255, 0, 0); }',
+      '@keyframes anim':      'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, 'non-prefix keyframes should override earlier -moz-keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }',
+      '@keyframes anim':         'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, 'non-prefix keyframes should override earlier -webkit-keyframes');
+
+test(function(t) {
+  addStyle(t,
+    { '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }',
+      '@-moz-keyframes anim':    'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+
+  addStyle(t,
+    { '@-moz-keyframes anim2':    'from,to { color: rgb(255, 0, 0); }',
+      '@-webkit-keyframes anim2': 'from,to { color: rgb(0, 255, 0); }' });
+
+  var div = addDiv(t, { style: 'animation: anim2 100s' });
+
+  assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
+}, 'last prefixed keyframes should override earlier prefixed keyframes');
+</script>
diff --git a/layout/style/test/test_load_events_on_stylesheets.html b/layout/style/test/test_load_events_on_stylesheets.html
new file mode 100644
index 0000000000..34d73f9ad6
--- /dev/null
+++ b/layout/style/test/test_load_events_on_stylesheets.html
@@ -0,0 +1,184 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=185236
+-->
+<head>
+  <title>Test for Bug 185236</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script>
+    var pendingEventCounter = 0;
+    var messagePosted = false;
+    SimpleTest.waitForExplicitFinish();
+    addLoadEvent(function() {
+      is(messagePosted, true, "Should have gotten onmessage event");
+      is(pendingEventCounter, 0,
+         "How did onload for the page fire before onload for all the stylesheets?");
+      SimpleTest.finish();
+    });
+    // Count the link we're about to parse
+    pendingEventCounter = 1;
+  </script>
+  <link rel="stylesheet" href="data:text/css,*{}"
+        onload="--pendingEventCounter;
+                ok(true, 'Load event firing on basic stylesheet')"
+        onerror="--pendingEventCounter;
+                 ok(false, 'Error event firing on basic stylesheet')">
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=185236">Mozilla Bug 185236</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+/** Test for Bug 185236 **/
+// Verify that there are no in-flight sheet loads right now; we should have
+// waited for them when we hit the script tag
+is(pendingEventCounter, 0, "There should be no pending events");
+
+// Test sheet that will already be complete when we write it out
+++pendingEventCounter;
+
+// Make sure that a postMessage we do right now fires after the onload handler
+// for the stylesheet.  If we ever change the timing of sheet onload, we will
+// need to change that.
+window.onmessage = function() {
+  messagePosted = true;
+  // There are 6 pending events: two from the two direct example.com loads,
+  // and 4 from the two data:text/css loads that import things
+  is(pendingEventCounter, 6, "Load event for sheet should have fired");
+}
+window.postMessage("", "*");
+
+function checkSheetComplete(sheet, length) {
+  try {
+    is(sheet.cssRules.length, length, `Should be loaded with ${length} rule(s)`);
+  } catch (e) {
+    ok(false, "Sheet has not been loaded completely");
+  }
+}
+
+document.write('<link rel="stylesheet" href="data:text/css,*{}"\
+                onload="--pendingEventCounter;\
+                        ok(true, \'Load event firing on basic stylesheet\')"\
+                onerror="--pendingEventCounter;\
+                        ok(false, \'Error event firing on basic stylesheet\')">');
+
+// Make sure we have that second stylesheet
+is(document.styleSheets.length, 3, "Should have three stylesheets");
+
+// Make sure that the second stylesheet is all loaded
+// If we ever switch away from sync loading of already-complete sheets, this
+// test will need adjusting
+checkSheetComplete(document.styleSheets[2], 1);
+
+// Make sure the load event for that stylesheet has not fired yet
+is(pendingEventCounter, 1, "There should be one pending event");
+
+++pendingEventCounter;
+document.write('<style\
+                onload="--pendingEventCounter;\
+                        ok(true, \'Load event firing on inline stylesheet\')"\
+                onerror="--pendingEventCounter;\
+                        ok(false, \'Error event firing on inline stylesheet\')"></style>');
+
+// Make sure the load event for that second stylesheet has not fired yet
+is(pendingEventCounter, 2, "There should be two pending events");
+
+++pendingEventCounter;
+document.write('<link rel="stylesheet" href="http://www.example.com"\
+                onload="--pendingEventCounter;\
+                        ok(false, \'Load event firing on broken stylesheet 1\')"\
+                onerror="--pendingEventCounter;\
+                        ok(true, \'Error event firing on broken stylesheet 1\')">');
+
+++pendingEventCounter;
+var link = document.createElement("link");
+link.rel = "stylesheet";
+link.href = "http://www.example.com";
+link.onload = function() { --pendingEventCounter;
+  ok(false, 'Load event firing on broken stylesheet 2');
+};
+link.onerror = function() { --pendingEventCounter;
+  ok(true, 'Error event firing on broken stylesheet 2');
+}
+document.body.appendChild(link);
+
+++pendingEventCounter;
+link = document.createElement("link");
+link.rel = "stylesheet";
+link.href = "data:text/css,*{}";
+link.onload = function() { --pendingEventCounter;
+  ok(true, 'Load event firing on external stylesheet');
+};
+link.onerror = function() { --pendingEventCounter;
+  ok(false, 'Error event firing on external stylesheet');
+}
+document.body.appendChild(link);
+
+// If we ever switch away from sync loading of already-complete sheets, this
+// test will need adjusting
+checkSheetComplete(link.sheet, 1);
+
+++pendingEventCounter;
+link = document.createElement("link");
+link.rel = "stylesheet";
+link.href = "data:text/css,@import url('data:text/css,*{}')";
+link.onload = function() { --pendingEventCounter;
+  ok(true, 'Load event firing on external stylesheet');
+};
+link.onerror = function() { --pendingEventCounter;
+  ok(false, 'Error event firing on external stylesheet');
+}
+document.body.appendChild(link);
+
+++pendingEventCounter;
+link = document.createElement("link");
+link.rel = "stylesheet";
+link.href = "data:text/css,@import url('http://www.example.com')";
+link.onload = function() { --pendingEventCounter;
+  ok(false, 'Load event firing on broken stylesheet 3');
+};
+link.onerror = function() { --pendingEventCounter;
+  ok(true, 'Error event firing on broken stylesheet 3');
+}
+document.body.appendChild(link);
+
+function absoluteURL(relativeURL) {
+  return new URL(relativeURL, location.href).href;
+}
+
+++pendingEventCounter;
+link = document.createElement("link");
+link.rel = "stylesheet";
+link.href = `data:text/css,@import url('http://www.example.com'); @import url(${absoluteURL('slow_ok_sheet.sjs')});`;
+link.onload = function() { --pendingEventCounter;
+  ok(false, 'Load event firing on broken stylesheet 4');
+};
+link.onerror = function() { --pendingEventCounter;
+  ok(true, 'Error event firing on broken stylesheet 4');
+}
+document.body.appendChild(link);
+
+++pendingEventCounter;
+link = document.createElement("link");
+link.rel = "stylesheet";
+link.href = `data:text/css,@import url(${absoluteURL('slow_broken_sheet.sjs')}); @import url('data:text/css,');`;
+link.onload = function() { --pendingEventCounter;
+  ok(false, 'Load event firing on broken stylesheet 5');
+};
+link.onerror = function() { --pendingEventCounter;
+  ok(true, 'Error event firing on broken stylesheet 5');
+}
+document.body.appendChild(link);
+
+// Make sure the load events for all those stylesheets have not fired yet
+is(pendingEventCounter, 9, "There should be nine pending events");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_logical_properties.html b/layout/style/test/test_logical_properties.html
new file mode 100644
index 0000000000..a6947791cb
--- /dev/null
+++ b/layout/style/test/test_logical_properties.html
@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test for handling of logical and physical properties</title>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+
+<style id="sheet"></style>
+
+<!-- specify size for <body> to avoid unconstrained-isize warnings
+     when writing-mode of the test <div> is vertical-* -->
+<body style="width:100px; height: 100px;">
+  <div id="test" class="test"></div>
+</body>
+
+<script>
+var gSheet = document.getElementById("sheet");
+var gTest  = document.getElementById("test");
+
+// list of groups of physical and logical box properties, such as
+//
+// { left: "margin-left", right: "margin-right",
+//   top: "margin-top", bottom: "margin-bottom",
+//   inlineStart: "margin-inline-start", inlineEnd: "margin-inline-end",
+//   blockStart: "margin-block-start", blockEnd: "margin-block-end",
+//   type: "length", prerequisites: "..." }
+//
+// where the type is a key from the gValues object and the prerequisites
+// is a declaration including gCSSProperties' listed prerequisites for
+// all four physical properties.
+var gBoxPropertyGroups;
+
+// list of groups of physical and logical axis properties, such as
+//
+// { horizontal: "width", vertical: "height",
+//   inline: "inline-size", block: "block-size",
+//   type: "length", prerequisites: "..." }
+var gAxisPropertyGroups;
+
+// values to use while testing
+var gValues = {
+  "length":       ["1px", "2px", "3px", "4px", "5px"],
+  "color":        ["rgb(1, 1, 1)", "rgb(2, 2, 2)", "rgb(3, 3, 3)", "rgb(4, 4, 4)", "rgb(5, 5, 5)"],
+  "border-style": ["solid", "dashed", "dotted", "double", "groove"],
+};
+
+// Six unique overall writing modes for property-mapping purposes.
+// Note that text-orientation does not affect these mappings, now that
+// the proposed sideways-left value no longer exists (superseded in CSS
+// Writing Modes by writing-mode: sideways-lr).
+var gWritingModes = [
+  { style: [
+      "writing-mode: horizontal-tb; direction: ltr; ",
+    ],
+    blockStart: "top", blockEnd: "bottom", inlineStart: "left", inlineEnd: "right",
+    block: "vertical", inline: "horizontal" },
+  { style: [
+      "writing-mode: horizontal-tb; direction: rtl; ",
+    ],
+    blockStart: "top", blockEnd: "bottom", inlineStart: "right", inlineEnd: "left",
+    block: "vertical", inline: "horizontal" },
+  { style: [
+      "writing-mode: vertical-rl; direction: rtl; ",
+      "writing-mode: sideways-rl; direction: rtl; ",
+    ],
+    blockStart: "right", blockEnd: "left", inlineStart: "bottom", inlineEnd: "top",
+    block: "horizontal", inline: "vertical" },
+  { style: [
+      "writing-mode: vertical-rl; direction: ltr; ",
+      "writing-mode: sideways-rl; direction: ltr; ",
+    ],
+    blockStart: "right", blockEnd: "left", inlineStart: "top", inlineEnd: "bottom",
+    block: "horizontal", inline: "vertical" },
+  { style: [
+      "writing-mode: vertical-lr; direction: rtl; ",
+      "writing-mode: sideways-lr; direction: ltr; ",
+    ],
+    blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top",
+    block: "horizontal", inline: "vertical" },
+  { style: [
+      "writing-mode: vertical-lr; direction: ltr; ",
+      "writing-mode: sideways-lr; direction: rtl; ",
+    ],
+    blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom",
+    block: "horizontal", inline: "vertical" },
+];
+
+function init() {
+  gBoxPropertyGroups = [];
+
+  for (var p in gCSSProperties) {
+    var type = gCSSProperties[p].type;
+
+    if ((type == CSS_TYPE_SHORTHAND_AND_LONGHAND ||
+         type == CSS_TYPE_LONGHAND && gCSSProperties[p].logical) &&
+        /-inline-end/.test(p)) {
+      var valueType;
+      if (/margin|padding|width|inset|offset/.test(p)) {
+        valueType = "length";
+      } else if (/color/.test(p)) {
+        valueType = "color";
+      } else if (/border.*style/.test(p)) {
+        valueType = "border-style";
+      } else {
+        throw `unexpected property ${p}`;
+      }
+      var group = {
+        inlineStart: p.replace("-inline-end", "-inline-start"),
+        inlineEnd:   p,
+        blockStart:  p.replace("-inline-end", "-block-start"),
+        blockEnd:    p.replace("-inline-end", "-block-end"),
+        type:        valueType
+      };
+      if (/^(offset|inset)/.test(p)) {
+        group.left   = "left";
+        group.right  = "right";
+        group.top    = "top";
+        group.bottom = "bottom";
+      } else {
+        group.left   = p.replace("-inline-end", "-left");
+        group.right  = p.replace("-inline-end", "-right");
+        group.top    = p.replace("-inline-end", "-top");
+        group.bottom = p.replace("-inline-end", "-bottom");
+      }
+      group.prerequisites =
+        make_declaration(gCSSProperties[group.top].prerequisites) +
+        make_declaration(gCSSProperties[group.right].prerequisites) +
+        make_declaration(gCSSProperties[group.bottom].prerequisites) +
+        make_declaration(gCSSProperties[group.left].prerequisites);
+      gBoxPropertyGroups.push(group);
+    }
+  }
+
+  // We don't populate this automatically since the only entries we have, for
+  // inline-size etc., don't lend themselves to automatically determining
+  // the names "width", "height", "min-width", etc.
+  gAxisPropertyGroups = [];
+  ["", "max-", "min-"].forEach(function(aPrefix) {
+    gAxisPropertyGroups.push({
+      horizontal: `${aPrefix}width`, vertical: `${aPrefix}height`,
+      inline: `${aPrefix}inline-size`, block: `${aPrefix}block-size`,
+      type: "length",
+      prerequisites:
+        make_declaration(gCSSProperties[`${aPrefix}height`].prerequisites)
+    });
+  });
+}
+
+function test_computed_values(aTestName, aRules, aExpectedValues) {
+  gSheet.textContent = aRules;
+  var cs = getComputedStyle(gTest);
+  aExpectedValues.forEach(function(aPair) {
+    is(cs.getPropertyValue(aPair[0]), aPair[1], `${aTestName}, ${aPair[0]}`);
+  });
+  gSheet.textContent = "";
+}
+
+function make_declaration(aObject) {
+  var decl = "";
+  if (aObject) {
+    for (var p in aObject) {
+      decl += `${p}: ${aObject[p]}; `;
+    }
+  }
+  return decl;
+}
+
+function start() {
+  var script = document.createElement("script");
+  script.src = "property_database.js";
+  script.onload = function() {
+    init();
+    run_tests();
+  };
+  document.body.appendChild(script);
+}
+
+function run_axis_test_for_writing_mode(aGroup, aWritingMode, aWritingModeDecl) {
+  var values = gValues[aGroup.type];
+  var decl;
+
+  // Test that logical axis properties are converted to their physical
+  // equivalent correctly when all four are present on a single
+  // declaration, with no overwriting of previous properties and
+  // no physical properties present.  We put the writing mode properties
+  // on a separate declaration to test that the computed values of these
+  // properties are used, rather than those on the same declaration.
+
+  decl = aGroup.prerequisites +
+         `${aGroup.inline}: ${values[0]}; ` +
+         `${aGroup.block}: ${values[1]}; `;
+  test_computed_values('logical properties on one declaration, writing ' +
+                         'mode properties on another, ' +
+                         `'${aWritingModeDecl}'`,
+                       `.test { ${aWritingModeDecl} } ` +
+                       `.test { ${decl} }`,
+                       [[aGroup[aWritingMode.inline], values[0]],
+                        [aGroup[aWritingMode.block],  values[1]]]);
+
+
+  // Test that logical and physical axis properties are cascaded together,
+  // honoring their relative order on a single declaration.
+
+  // (a) with a single logical property after the physical ones
+
+  ["inline", "block"].forEach(function(aLogicalAxis) {
+    decl = aWritingModeDecl + aGroup.prerequisites +
+           `${aGroup.horizontal}: ${values[0]}; ` +
+           `${aGroup.vertical}: ${values[1]}; ` +
+           `${aGroup[aLogicalAxis]}: ${values[2]}; `;
+    var expected = ["horizontal", "vertical"].map(
+      (axis, i) => [aGroup[axis],
+                    values[axis == aWritingMode[aLogicalAxis] ? 2 : i]]
+    );
+    test_computed_values(`${aLogicalAxis} last on single declaration, ` +
+                           `'${aWritingModeDecl}'`,
+                         `.test { ${decl} }`,
+                         expected);
+  });
+
+  // (b) with a single physical property after the logical ones
+
+  ["horizontal", "vertical"].forEach(function(aPhysicalAxis) {
+    decl = aWritingModeDecl + aGroup.prerequisites +
+           `${aGroup.inline}: ${values[0]}; ` +
+           `${aGroup.block}: ${values[1]}; ` +
+           `${aGroup[aPhysicalAxis]}: ${values[2]}; `;
+    var expected = ["inline", "block"].map(
+      (axis, i) => [aGroup[aWritingMode[axis]],
+                    values[aWritingMode[axis] == aPhysicalAxis ? 2 : i]]
+    );
+    test_computed_values(`${aPhysicalAxis} last on single declaration, ` +
+                           `'${aWritingModeDecl}'`,
+                         `.test { ${decl} }`,
+                         expected);
+  });
+
+
+  // Test that logical and physical axis properties are cascaded properly when
+  // on different declarations.
+
+  var loDecl;  // lower specifity
+  var hiDecl;  // higher specificity
+
+  // (a) with a logical property in the high specificity rule
+
+  loDecl = aWritingModeDecl + aGroup.prerequisites +
+           `${aGroup.horizontal}: ${values[0]}; ` +
+           `${aGroup.vertical}: ${values[1]}; `;
+
+  ["inline", "block"].forEach(function(aLogicalAxis) {
+    hiDecl = `${aGroup[aLogicalAxis]}: ${values[2]}; `;
+    var expected = ["horizontal", "vertical"].map(
+      (axis, i) => [aGroup[axis],
+                    values[axis == aWritingMode[aLogicalAxis] ? 2 : i]]
+    );
+    test_computed_values(`${aLogicalAxis}, two declarations, ` +
+                           `'${aWritingModeDecl}'`,
+                         `#test { ${hiDecl} } ` +
+                         `.test { ${loDecl} }`,
+                         expected);
+  });
+
+  // (b) with a physical property in the high specificity rule
+
+  loDecl = aWritingModeDecl + aGroup.prerequisites +
+           `${aGroup.inline}: ${values[0]}; ` +
+           `${aGroup.block}: ${values[1]}; `;
+
+  ["horizontal", "vertical"].forEach(function(aPhysicalAxis) {
+    hiDecl = `${aGroup[aPhysicalAxis]}: ${values[2]}; `;
+    var expected = ["inline", "block"].map(
+      (axis, i) => [aGroup[aWritingMode[axis]],
+                    values[aWritingMode[axis] == aPhysicalAxis ? 2 : i]]
+    );
+    test_computed_values(`${aPhysicalAxis}, two declarations, ` +
+                           `'${aWritingModeDecl}'`,
+                         `#test { ${hiDecl} } ` +
+                         `.test { ${loDecl} }`,
+                         expected);
+  });
+}
+
+function run_box_test_for_writing_mode(aGroup, aWritingMode, aWritingModeDecl) {
+  var values = gValues[aGroup.type];
+  var decl;
+
+  // Test that logical box properties are converted to their physical
+  // equivalent correctly when all four are present on a single
+  // declaration, with no overwriting of previous properties and
+  // no physical properties present.  We put the writing mode properties
+  // on a separate declaration to test that the computed values of these
+  // properties are used, rather than those on the same declaration.
+
+  decl = aGroup.prerequisites +
+         `${aGroup.inlineStart}: ${values[0]}; ` +
+         `${aGroup.inlineEnd}: ${values[1]}; ` +
+         `${aGroup.blockStart}: ${values[2]}; ` +
+         `${aGroup.blockEnd}: ${values[3]}; `;
+  test_computed_values('logical properties on one declaration, writing ' +
+                         'mode properties on another, ' +
+                         `'${aWritingModeDecl}'`,
+                       `.test { ${aWritingModeDecl} } ` +
+                       `.test { ${decl} }`,
+                       [[aGroup[aWritingMode.inlineStart], values[0]],
+                        [aGroup[aWritingMode.inlineEnd],   values[1]],
+                        [aGroup[aWritingMode.blockStart],  values[2]],
+                        [aGroup[aWritingMode.blockEnd],    values[3]]]);
+
+  // Test that logical and physical box properties are cascaded together,
+  // honoring their relative order on a single declaration.
+
+  // (a) with a single logical property after the physical ones
+
+  ["inlineStart", "inlineEnd", "blockStart", "blockEnd"].forEach(function(aLogicalSide) {
+    decl = aWritingModeDecl + aGroup.prerequisites +
+           `${aGroup.left}: ${values[0]}; ` +
+           `${aGroup.right}: ${values[1]}; ` +
+           `${aGroup.top}: ${values[2]}; ` +
+           `${aGroup.bottom}: ${values[3]}; ` +
+           `${aGroup[aLogicalSide]}: ${values[4]}; `;
+    var expected = ["left", "right", "top", "bottom"].map(
+      (side, i) => [aGroup[side],
+                    values[side == aWritingMode[aLogicalSide] ? 4 : i]]
+    );
+    test_computed_values(`${aLogicalSide} last on single declaration, ` +
+                           `'${aWritingModeDecl}'`,
+                         `.test { ${decl} }`,
+                         expected);
+  });
+
+  // (b) with a single physical property after the logical ones
+
+  ["left", "right", "top", "bottom"].forEach(function(aPhysicalSide) {
+    decl = aWritingModeDecl + aGroup.prerequisites +
+           `${aGroup.inlineStart}: ${values[0]}; ` +
+           `${aGroup.inlineEnd}: ${values[1]}; ` +
+           `${aGroup.blockStart}: ${values[2]}; ` +
+           `${aGroup.blockEnd}: ${values[3]}; ` +
+           `${aGroup[aPhysicalSide]}: ${values[4]}; `;
+    var expected = ["inlineStart", "inlineEnd", "blockStart", "blockEnd"].map(
+      (side, i) => [aGroup[aWritingMode[side]],
+                    values[aWritingMode[side] == aPhysicalSide ? 4 : i]]
+    );
+    test_computed_values(`${aPhysicalSide} last on single declaration, ` +
+                           `'${aWritingModeDecl}'`,
+                         `.test { ${decl} }`,
+                         expected);
+  });
+
+
+  // Test that logical and physical box properties are cascaded properly when
+  // on different declarations.
+
+  var loDecl;  // lower specifity
+  var hiDecl;  // higher specificity
+
+  // (a) with a logical property in the high specificity rule
+
+  loDecl = aWritingModeDecl + aGroup.prerequisites +
+           `${aGroup.left}: ${values[0]}; ` +
+           `${aGroup.right}: ${values[1]}; ` +
+           `${aGroup.top}: ${values[2]}; ` +
+           `${aGroup.bottom}: ${values[3]}; `;
+
+  ["inlineStart", "inlineEnd", "blockStart", "blockEnd"].forEach(function(aLogicalSide) {
+    hiDecl = `${aGroup[aLogicalSide]}: ${values[4]}; `;
+    var expected = ["left", "right", "top", "bottom"].map(
+      (side, i) => [aGroup[side],
+                    values[side == aWritingMode[aLogicalSide] ? 4 : i]]
+    );
+    test_computed_values(`${aLogicalSide}, two declarations, ` +
+                           `'${aWritingModeDecl}'`,
+                         `#test { ${hiDecl} } ` +
+                         `.test { ${loDecl} }`,
+                         expected);
+  });
+
+  // (b) with a physical property in the high specificity rule
+
+  loDecl = aWritingModeDecl + aGroup.prerequisites +
+           `${aGroup.inlineStart}: ${values[0]}; ` +
+           `${aGroup.inlineEnd}: ${values[1]}; ` +
+           `${aGroup.blockStart}: ${values[2]}; ` +
+           `${aGroup.blockEnd}: ${values[3]}; `;
+
+  ["left", "right", "top", "bottom"].forEach(function(aPhysicalSide) {
+    hiDecl = `${aGroup[aPhysicalSide]}: ${values[4]}; `;
+    var expected = ["inlineStart", "inlineEnd", "blockStart", "blockEnd"].map(
+      (side, i) => [aGroup[aWritingMode[side]],
+                    values[aWritingMode[side] == aPhysicalSide ? 4 : i]]
+    );
+    test_computed_values(`${aPhysicalSide}, two declarations, ` +
+                           `'${aWritingModeDecl}'`,
+                         `#test { ${hiDecl} } ` +
+                         `.test { ${loDecl} }`,
+                         expected);
+  });
+}
+
+function run_tests() {
+  gBoxPropertyGroups.forEach(function(aGroup) {
+    gWritingModes.forEach(function(aWritingMode) {
+      aWritingMode.style.forEach(function(aWritingModeDecl) {
+        run_box_test_for_writing_mode(aGroup, aWritingMode, aWritingModeDecl);
+      });
+    });
+  });
+
+  gAxisPropertyGroups.forEach(function(aGroup) {
+    gWritingModes.forEach(function(aWritingMode) {
+      aWritingMode.style.forEach(function(aWritingModeDecl) {
+        run_axis_test_for_writing_mode(aGroup, aWritingMode, aWritingModeDecl);
+      });
+    });
+  });
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+start();
+</script>
diff --git a/layout/style/test/test_marker_restrictions.html b/layout/style/test/test_marker_restrictions.html
new file mode 100644
index 0000000000..f547f928cb
--- /dev/null
+++ b/layout/style/test/test_marker_restrictions.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test for ::marker property restrictions.</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="property_database.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
+<style id="s"></style>
+<div id="test"></div>
+<div id="control"></div>
+<script>
+const test = getComputedStyle($("test"), "::marker");
+const control = getComputedStyle($("control"), "::marker");
+
+for (const prop in gCSSProperties) {
+  const info = gCSSProperties[prop];
+  if (info.type == CSS_TYPE_TRUE_SHORTHAND)
+    continue;
+
+  let prereqs = "";
+  if (info.prerequisites)
+    for (let name in info.prerequisites)
+      prereqs += `${name}: ${info.prerequisites[name]}; `;
+
+  $("s").textContent = `
+    #control::marker { ${prop}: ${info.initial_values[0]}; ${prereqs} }
+    #test::marker { ${prop}: ${info.other_values[0]}; ${prereqs} }
+  `;
+
+  (info.applies_to_marker ? isnot : is)(
+    get_computed_value(test, prop),
+    get_computed_value(control, prop),
+    `${prop} should ${info.applies_to_marker ? "" : " not"} apply to ::marker`);
+}
+
+</script>
diff --git a/layout/style/test/test_mask_image_CORS.html b/layout/style/test/test_mask_image_CORS.html
new file mode 100644
index 0000000000..8edd8af48e
--- /dev/null
+++ b/layout/style/test/test_mask_image_CORS.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Test mask-image CORS anonymous retrieval</title>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/WindowSnapshot.js"></script>
+<style>
+.block100 {
+  width: 100px;
+  height: 100px;
+}
+#allow {
+  /*
+   * shape-outside is unnecessary for the mask, but using it ensures that the first frame
+   * of the image is decoded and reflow is called before onload is fired. Since the
+   * shape-outside uses the same url as the mask, this ensures that the css image resource
+   * is decoded and available for the repaint triggered by the call to snapshotRect.
+   */
+  shape-outside: url("support/blue-100x100.png");
+  mask-image: url("support/blue-100x100.png");
+  background-color: #00FF00
+}
+#refuse {
+  shape-outside: url("http://example.com/tests/layout/style/test/support/blue-100x100.png");
+  mask-image: url("http://example.com/tests/layout/style/test/support/blue-100x100.png");
+  background-color: #FF0000
+}
+</style>
+
+<script>
+SimpleTest.waitForExplicitFinish();
+
+function checkBothSquares() {
+  checkIsColor("allow", "0,255,0,255");
+  checkIsColor("refuse", "255,255,255,255");
+
+  SimpleTest.finish();
+}
+
+function checkIsColor(elementId, color) {
+  let e = document.getElementById(elementId);
+  let r = e.getBoundingClientRect();
+  info("Element " + elementId + " has rect " + r.top + ", " + r.left + ", " + r.width + ", " + r.height + ".");
+
+  let canvas = snapshotRect(window, r);
+  let context = canvas.getContext('2d');
+
+  // Only check the top left pixel.
+  let image = context.getImageData(0, 0, 1, 1);
+  let pixel = image.data.toString();
+  is(pixel, color, "Element " + elementId + " has expected color.");
+}
+</script>
+
+</head>
+<body onload="checkBothSquares()">
+  <p>There should be a green square, but no red square.</p>
+  <div id="allow" class="block100"></div>
+  <div id="refuse" class="block100"></div>
+</body>
+</html>
diff --git a/layout/style/test/test_media_queries.html b/layout/style/test/test_media_queries.html
new file mode 100644
index 0000000000..58c3e35558
--- /dev/null
+++ b/layout/style/test/test_media_queries.html
@@ -0,0 +1,867 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=156716
+-->
+<head>
+  <title>Test for Bug 156716</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome/chrome-only-media-queries.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=156716">Mozilla Bug 156716</a>
+<iframe id="subdoc" src="media_queries_iframe.html"></iframe>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+<script class="testbody" type="application/javascript">
+
+/** Test for Bug 156716 **/
+
+// Note that many other tests are in test_acid3_test46.html .
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(2);
+
+var iframe;
+
+function getScreenPixelsPerCSSPixel() {
+  return window.devicePixelRatio;
+}
+
+function run() {
+  iframe = document.getElementById("subdoc");
+  var subdoc = iframe.contentDocument;
+  var subwin = iframe.contentWindow;
+  var style = subdoc.getElementById("style");
+  var iframe_style = iframe.style;
+  var body_cs = subdoc.defaultView.getComputedStyle(subdoc.body);
+
+  function query_applies(q) {
+    style.setAttribute("media", q);
+    return body_cs.getPropertyValue("text-decoration-line") == "underline";
+  }
+
+  function should_apply(q) {
+    ok(query_applies(q), q + " should apply");
+    test_serialization(q, true, true);
+  }
+
+  function should_not_apply(q) {
+    ok(!query_applies(q), q + " should not apply");
+    test_serialization(q, true, false);
+  }
+
+  /* for queries that are parseable standalone but not within CSS */
+  function should_apply_unbalanced(q) {
+    ok(query_applies(q), q + " should apply");
+  }
+
+  /* for queries that are parseable standalone but not within CSS */
+  function should_not_apply_unbalanced(q) {
+    ok(!query_applies(q), q + " should not apply");
+  }
+
+  /*
+   * Functions to test whether a query is parseable at all.  (Should not
+   * be used for parse errors within expressions.)
+   */
+  var parse_test_style_element = document.createElement("style");
+  parse_test_style_element.type = "text/css";
+  parse_test_style_element.disabled = true; // for performance, hopefully
+  var parse_test_style_text = document.createTextNode("");
+  parse_test_style_element.appendChild(parse_test_style_text);
+  document.getElementsByTagName("head")[0]
+    .appendChild(parse_test_style_element);
+
+  function query_is_parseable(q) {
+    parse_test_style_text.data = "@media screen, " + q + " {}";
+    var sheet = parse_test_style_element.sheet; // XXX yikes, not live!
+    if (sheet.cssRules.length == 1 &&
+        sheet.cssRules[0].type == CSSRule.MEDIA_RULE)
+      return sheet.cssRules[0].media.mediaText != "screen, not all";
+    ok(false, "unexpected result testing whether query " + q +
+              " is parseable");
+    return true; // doesn't matter, we already failed
+  }
+
+  function query_should_be_parseable(q) {
+    ok(query_is_parseable(q), "query " + q + " should be parseable");
+    test_serialization(q, false, false);
+  }
+
+  function query_should_not_be_parseable(q) {
+    ok(!query_is_parseable(q), "query " + q + " should not be parseable");
+  }
+
+  function expression_should_be_known(e) {
+    should_apply(`(${e}) or (not (${e}))`);
+  }
+
+  function expression_should_not_be_known(e) {
+    should_not_apply(`(${e}) or (not (${e}))`);
+  }
+
+  // Helper to share code between -moz & -webkit device-pixel-ratio versions:
+  function test_device_pixel_ratio(equal_name, min_name, max_name) {
+    var real_dpr = 1.0 * getScreenPixelsPerCSSPixel();
+    var high_dpr = 1.1 * getScreenPixelsPerCSSPixel();
+    var low_dpr = 0.9 * getScreenPixelsPerCSSPixel();
+    should_apply("all and (" + max_name + ": " + real_dpr + ")");
+    should_apply("all and (" + min_name + ": " + real_dpr + ")");
+    should_not_apply("not all and (" + max_name + ": " + real_dpr + ")");
+    should_not_apply("not all and (" + min_name + ": " + real_dpr + ")");
+    should_apply("all and (" + min_name + ": " + low_dpr + ")");
+    should_apply("all and (" + max_name + ": " + high_dpr + ")");
+    should_not_apply("all and (" + max_name + ": " + low_dpr + ")");
+    should_not_apply("all and (" + min_name + ": " + high_dpr + ")");
+    should_apply("not all and (" + max_name + ": " + low_dpr + ")");
+    should_apply("not all and (" + min_name + ": " + high_dpr + ")");
+    should_apply("(" + equal_name + ": " + real_dpr + ")");
+    should_not_apply("(" + equal_name + ": " + high_dpr + ")");
+    should_not_apply("(" + equal_name + ": " + low_dpr + ")");
+    should_apply("(" + equal_name + ")");
+    expression_should_not_be_known(min_name);
+    expression_should_not_be_known(max_name);
+  }
+
+  function test_serialization(q, test_application, expected_to_apply) {
+    style.setAttribute("media", q);
+    var ser1 = style.sheet.media.mediaText;
+    isnot(ser1, "", "serialization of '" + q + "' should not be empty");
+    style.setAttribute("media", ser1);
+    var ser2 = style.sheet.media.mediaText;
+    is(ser2, ser1, "parse+serialize of '" + q + "' should be idempotent");
+    if (test_application) {
+      let applies = body_cs.getPropertyValue("text-decoration-line") ==
+                    "underline";
+      is(applies, expected_to_apply,
+         "Media query '" + q + "' should " + (expected_to_apply ? "" : "NOT ") +
+         "apply after serialize + reparse");
+    }
+
+    // Test cloning
+    var sheet = "@media " + q + " { body { text-decoration: underline } }"
+    var sheeturl = "data:text/css," + escape(sheet);
+    var link = "<link rel='stylesheet' href='" + sheeturl + "'>";
+    var htmldoc = "<!DOCTYPE HTML>" + link + link  + "<body>";
+    post_clone_test(htmldoc, function() {
+      var clonedoc = iframe.contentDocument;
+      var clonewin = iframe.contentWindow;
+      var links = clonedoc.getElementsByTagName("link");
+      // cause a clone
+      var clonedsheet = links[1].sheet;
+      clonedsheet.insertRule("#nonexistent { color: purple}", 1);
+      // remove the uncloned sheet
+      links[0].remove();
+
+      var ser3 = clonedsheet.cssRules[0].media.mediaText;
+      is(ser3, ser1, "cloning query '" + q + "' should not change " +
+                     "serialization");
+      if (test_application) {
+        let applies = clonewin.getComputedStyle(clonedoc.body).
+                        textDecorationLine == "underline";
+        is(applies, expected_to_apply,
+           "Media query '" + q + "' should " + (expected_to_apply ? "" : "NOT ") +
+           "apply after cloning");
+      }
+    });
+  }
+
+  // The no-type syntax doesn't mix with the not and only keywords.
+  expression_should_be_known("(orientation)");
+  expression_should_be_known("not (orientation)");
+  query_should_not_be_parseable("only (orientation)");
+  query_should_be_parseable("all and (orientation)");
+  query_should_be_parseable("not all and (orientation)");
+  query_should_be_parseable("only all and (orientation)");
+
+  query_should_not_be_parseable("not not (orientation)");
+  expression_should_be_known("(orientation) and (orientation)");
+  expression_should_be_known("(orientation) or (orientation)");
+  expression_should_be_known("(orientation) or ((orientation) and ((orientation) or (orientation) or (not (orientation))))");
+
+  query_should_not_be_parseable("all and (orientation) or (orientation)");
+  query_should_be_parseable("all and (orientation) and (orientation)");
+
+  query_should_not_be_parseable("(orientation) and (orientation) or (orientation)");
+  query_should_not_be_parseable("(orientation) and not (orientation)");
+
+  query_should_be_parseable("(-moz-device-orientation)");
+  query_should_be_parseable("not (-moz-device-orientation)");
+  query_should_not_be_parseable("only (-moz-device-orientation)");
+  query_should_be_parseable("all and (-moz-device-orientation)");
+  query_should_be_parseable("not all and (-moz-device-orientation)");
+  query_should_be_parseable("only all and (-moz-device-orientation)");
+
+  // Test that the 'not', 'only', 'and', and 'or' keywords are not
+  // allowed as media types.
+  query_should_not_be_parseable("not");
+  query_should_not_be_parseable("and");
+  query_should_not_be_parseable("or");
+  query_should_not_be_parseable("only");
+  query_should_be_parseable("unknowntype");
+  query_should_not_be_parseable("not not");
+  query_should_not_be_parseable("not and");
+  query_should_not_be_parseable("not or");
+  query_should_not_be_parseable("not only");
+  query_should_be_parseable("not unknowntype");
+  query_should_not_be_parseable("only not");
+  query_should_not_be_parseable("only and");
+  query_should_not_be_parseable("only or");
+  query_should_not_be_parseable("only only");
+  query_should_be_parseable("only unknowntype");
+  query_should_not_be_parseable("not and (width)");
+  query_should_not_be_parseable("and and (width)");
+  query_should_not_be_parseable("or and (width)");
+  query_should_not_be_parseable("only and (width)");
+  query_should_be_parseable("unknowntype and (width)");
+  query_should_not_be_parseable("not not and (width)");
+  query_should_not_be_parseable("not and and (width)");
+  query_should_not_be_parseable("not or and (width)");
+  query_should_not_be_parseable("not only and (width)");
+  query_should_be_parseable("not unknowntype and (width)");
+  query_should_not_be_parseable("only not and (width)");
+  query_should_not_be_parseable("only and and (width)");
+  query_should_not_be_parseable("only or and (width)");
+  query_should_not_be_parseable("only only and (width)");
+  query_should_be_parseable("only unknowntype and (width)");
+
+  var features = [ "width", "height", "device-width", "device-height" ];
+  var separators = [ ":", ">", ">=", "=", "<=", "<" ];
+
+  var feature;
+  var i;
+  for (i in features) {
+    feature = features[i];
+    expression_should_be_known(feature);
+    expression_should_not_be_known("min-" + feature);
+    expression_should_not_be_known("max-" + feature);
+    for (let separator of separators) {
+      expression_should_be_known(feature + " " + separator + " 0");
+      expression_should_be_known(feature + " " + separator + " 0px");
+      expression_should_be_known(feature + " " + separator + " 0em");
+      expression_should_be_known(feature + " " + separator + " -0");
+      expression_should_be_known(feature + " " + separator + " -0cm");
+      expression_should_be_known(feature + " " + separator + " 1px");
+      expression_should_be_known(feature + " " + separator + " 0.001mm");
+      expression_should_be_known(feature + " " + separator + " 100000px");
+      expression_should_be_known(feature + " " + separator + " -1px");
+      if (separator == ":") {
+        expression_should_be_known("min-" + feature + " " + separator + " -0");
+        expression_should_be_known("max-" + feature + " " + separator + " -0");
+        expression_should_be_known("min-" + feature + " " + separator + " -1px");
+        expression_should_be_known("max-" + feature + " " + separator + " -1px");
+        expression_should_be_known(feature + " " + separator + " -0.00001mm");
+        expression_should_be_known(feature + " " + separator + " -100000em");
+      } else {
+        expression_should_not_be_known("min-" + feature + " " + separator + " -0");
+        expression_should_not_be_known("max-" + feature + " " + separator + " -0");
+        expression_should_not_be_known("min-" + feature + " " + separator + " -1px");
+        expression_should_not_be_known("max-" + feature + " " + separator + " -1px");
+        let multi_range = "0px " + separator + " " + feature + " " + separator + " 100000px"
+        if (separator == "=") {
+          expression_should_not_be_known(multi_range);
+        } else {
+          expression_should_be_known(multi_range);
+        }
+      }
+      if (separator == ">=") {
+        expression_should_not_be_known(feature + " > = 0px");
+      } else if (separator == "<=") {
+        expression_should_not_be_known(feature + " < = 0px");
+      }
+    }
+  }
+
+  var mediatypes = ["browser", "minimal-ui", "standalone", "fullscreen"];
+
+  mediatypes.forEach(function(type) {
+    expression_should_be_known("display-mode: " + type);
+  });
+
+  expression_should_not_be_known("display-mode: invalid")
+
+  var content_div = document.getElementById("content");
+  content_div.style.font = "initial";
+  var em_size =
+    getComputedStyle(content_div, "").fontSize.match(/^(\d+)px$/)[1];
+
+  // in this test, assume the common underlying implementation is correct
+  var width_val = 117; // pick two not-too-round numbers
+  var height_val = 76;
+  change_state(function() {
+    iframe_style.width = width_val + "px";
+    iframe_style.height = height_val + "px";
+  });
+  var device_width = window.screen.width;
+  var device_height = window.screen.height;
+  features = {
+    "width": width_val,
+    "height": height_val,
+    "device-width": device_width,
+    "device-height": device_height
+  };
+  for (feature in features) {
+    var value = features[feature];
+    should_apply("all and (" + feature + ": " + value + "px)");
+    should_apply("all and (" + feature + " = " + value + "px)");
+    should_not_apply("all and (" + feature + ": " + (value + 1) + "px)");
+    should_not_apply("all and (" + feature + ": " + (value - 1) + "px)");
+    should_not_apply("all and (" + feature + " = " + (value + 1) + "px)");
+    should_not_apply("all and (" + feature + " = " + (value - 1) + "px)");
+
+    should_apply("all and (min-" + feature + ": " + value + "px)");
+    should_not_apply("all and (min-" + feature + ": " + (value + 1) + "px)");
+    should_apply("all and (min-" + feature + ": " + (value - 1) + "px)");
+    should_apply("all and (max-" + feature + ": " + value + "px)");
+    should_apply("all and (max-" + feature + ": " + (value + 1) + "px)");
+    should_not_apply("all and (max-" + feature + ": " + (value - 1) + "px)");
+    should_not_apply("all and (min-" + feature + ": " +
+                     (Math.ceil(value/em_size) + 1) + "em)");
+    should_apply("all and (min-" + feature + ": " +
+                 (Math.floor(value/em_size) - 1) + "em)");
+    should_apply("all and (max-" + feature + ": " +
+                 (Math.ceil(value/em_size) + 1) + "em)");
+    should_not_apply("all and (max-" + feature + ": " +
+                     (Math.floor(value/em_size) - 1) + "em)");
+    should_not_apply("all and (min-" + feature + ": " +
+                     (Math.ceil(value/em_size) + 1) + "rem)");
+    should_apply("all and (min-" + feature + ": " +
+                 (Math.floor(value/em_size) - 1) + "rem)");
+    should_apply("all and (max-" + feature + ": " +
+                 (Math.ceil(value/em_size) + 1) + "rem)");
+    should_not_apply("all and (max-" + feature + ": " +
+                     (Math.floor(value/em_size) - 1) + "rem)");
+
+    should_apply("(" + feature + " <= " + value + "px)");
+    should_apply("(" + feature + " >= " + value + "px)");
+
+    should_apply("(0px < " + feature + " <= " + value + "px)");
+    should_apply("(" + value + "px >= " + feature + " > 0px)");
+
+    should_not_apply("(0px < " + feature + " < " + value + "px)");
+    should_not_apply("(" + value + "px > " + feature + " > 0px)");
+
+    should_not_apply("(" + feature + " < " + value + "px)");
+    should_not_apply("(" + feature + " > " + value + "px)");
+
+    should_apply("(" + feature + " < " + (value + 1) + "px)");
+    should_apply("(" + feature + " <= " + (value + 1) + "px)");
+    should_not_apply("(" + feature + " > " + (value + 1) + "px)");
+    should_not_apply("(" + feature + " >= " + (value + 1) + "px)");
+
+    should_apply("(" + feature + " > " + (value - 1) + "px)");
+    should_apply("(" + feature + " >= " + (value - 1) + "px)");
+    should_not_apply("(" + feature + " < " + (value - 1) + "px)");
+    should_not_apply("(" + feature + " <= " + (value - 1) + "px)");
+  }
+
+  change_state(function() {
+    iframe_style.width = "0";
+  });
+  should_apply("all and (height)");
+  should_not_apply("all and (width)");
+  change_state(function() {
+    iframe_style.height = "0";
+  });
+  should_not_apply("all and (height)");
+  should_not_apply("all and (width)");
+  should_apply("all and (device-height)");
+  should_apply("all and (device-width)");
+  change_state(function() {
+    iframe_style.width = width_val + "px";
+  });
+  should_not_apply("all and (height)");
+  should_apply("all and (width)");
+  change_state(function() {
+    iframe_style.height = height_val + "px";
+  });
+  should_apply("all and (height)");
+  should_apply("all and (width)");
+
+  // ratio that reduces to 59/40
+  change_state(function() {
+    iframe_style.width = "236px";
+    iframe_style.height = "160px";
+  });
+  expression_should_be_known("orientation");
+  expression_should_be_known("orientation: portrait");
+  expression_should_be_known("orientation: landscape");
+  expression_should_not_be_known("min-orientation");
+  expression_should_not_be_known("min-orientation: portrait");
+  expression_should_not_be_known("min-orientation: landscape");
+  expression_should_not_be_known("max-orientation");
+  expression_should_not_be_known("max-orientation: portrait");
+  expression_should_not_be_known("max-orientation: landscape");
+  should_apply("(orientation)");
+  should_apply("(orientation: landscape)");
+  should_not_apply("(orientation: portrait)");
+  should_apply("not all and (orientation: portrait)");
+  // ratio that reduces to 59/80
+  change_state(function() {
+    iframe_style.height = "320px";
+  });
+  should_apply("(orientation)");
+  should_not_apply("(orientation: landscape)");
+  should_apply("not all and (orientation: landscape)");
+  should_apply("(orientation: portrait)");
+
+  expression_should_be_known("-moz-device-orientation");
+  expression_should_be_known("-moz-device-orientation: portrait");
+  expression_should_be_known("-moz-device-orientation: landscape");
+  expression_should_not_be_known("min--moz-device-orientation");
+  expression_should_not_be_known("min--moz-device-orientation: portrait");
+  expression_should_not_be_known("min--moz-device-orientation: landscape");
+  expression_should_not_be_known("max--moz-device-orientation");
+  expression_should_not_be_known("max--moz-device-orientation: portrait");
+  expression_should_not_be_known("max--moz-device-orientation: landscape");
+
+  // determine the actual configuration of the screen and test against it
+  var device_orientation = (device_width > device_height) ? "landscape" : "portrait";
+  var not_device_orientation = (device_orientation == "landscape") ? "portrait" : "landscape";
+  should_apply("(-moz-device-orientation)");
+  should_apply("(-moz-device-orientation: " + device_orientation + ")");
+  should_not_apply("(-moz-device-orientation: " + not_device_orientation + ")");
+  should_apply("not all and (-moz-device-orientation: " + not_device_orientation + ")");
+
+  should_apply("(aspect-ratio: 59/80)");
+  should_not_apply("(aspect-ratio: 58/80)");
+  should_not_apply("(aspect-ratio: 59/81)");
+  should_not_apply("(aspect-ratio: 60/80)");
+  should_not_apply("(aspect-ratio: 59/79)");
+  should_apply("(aspect-ratio: 177/240)");
+  should_apply("(aspect-ratio: 413/560)");
+  should_apply("(aspect-ratio: 5900/8000)");
+  should_not_apply("(aspect-ratio: 5901/8000)");
+  should_not_apply("(aspect-ratio: 5899/8000)");
+  should_not_apply("(aspect-ratio: 5900/8001)");
+  should_not_apply("(aspect-ratio: 5900/7999)");
+  should_apply("(aspect-ratio)");
+
+  // Test "unreasonable", but still valid aspect ratios, such as aspect ratios with negative numbers,
+  // and zeros, and with numbers near 2^32 and 2^64 (to check overflow).
+  should_not_apply("(aspect-ratio: 0/1)");
+  should_not_apply("(aspect-ratio: 1/0)");
+  should_not_apply("(aspect-ratio: -1/1)");
+  should_not_apply("(aspect-ratio: 1/-1)");
+  should_not_apply("(aspect-ratio: -1/-1)");
+  should_not_apply("(aspect-ratio: -59/-80)");
+  should_not_apply("(aspect-ratio: 4294967295/4294967295)");
+  should_not_apply("(aspect-ratio: 4294967297/4294967297)");
+  should_not_apply("(aspect-ratio: 18446744073709560000/18446744073709560000)");
+
+  // Test min and max aspect ratios.
+  should_apply("(min-aspect-ratio: 59/80)");
+  should_apply("(min-aspect-ratio: 58/80)");
+  should_apply("(min-aspect-ratio: 59/81)");
+  should_not_apply("(min-aspect-ratio: 60/80)");
+  should_not_apply("(min-aspect-ratio: 59/79)");
+  expression_should_not_be_known("min-aspect-ratio");
+
+  should_apply("(max-aspect-ratio: 59/80)");
+  should_not_apply("(max-aspect-ratio: 58/80)");
+  should_not_apply("(max-aspect-ratio: 59/81)");
+  should_apply("(max-aspect-ratio: 60/80)");
+  should_apply("(max-aspect-ratio: 59/79)");
+  expression_should_not_be_known("max-aspect-ratio");
+
+  var real_dar = device_width + "/" + device_height;
+  var high_dar_1 = (device_width + 1) + "/" + device_height;
+  var high_dar_2 = device_width + "/" + (device_height - 1);
+  var low_dar_1 = (device_width - 1) + "/" + device_height;
+  var low_dar_2 = device_width + "/" + (device_height + 1);
+  should_apply("(device-aspect-ratio: " + real_dar + ")");
+  should_apply("not all and (device-aspect-ratio: " + high_dar_1 + ")");
+  should_not_apply("all and (device-aspect-ratio: " + high_dar_2 + ")");
+  should_not_apply("all and (device-aspect-ratio: " + low_dar_1 + ")");
+  should_apply("not all and (device-aspect-ratio: " + low_dar_2 + ")");
+  should_apply("(device-aspect-ratio)");
+
+  should_apply("(min-device-aspect-ratio: " + real_dar + ")");
+  should_not_apply("all and (min-device-aspect-ratio: " + high_dar_1 + ")");
+  should_apply("not all and (min-device-aspect-ratio: " + high_dar_2 + ")");
+  should_not_apply("not all and (min-device-aspect-ratio: " + low_dar_1 + ")");
+  should_apply("all and (min-device-aspect-ratio: " + low_dar_2 + ")");
+  expression_should_not_be_known("min-device-aspect-ratio");
+
+  should_apply("all and (max-device-aspect-ratio: " + real_dar + ")");
+  should_apply("(max-device-aspect-ratio: " + high_dar_1 + ")");
+  should_apply("(max-device-aspect-ratio: " + high_dar_2 + ")");
+  should_not_apply("all and (max-device-aspect-ratio: " + low_dar_1 + ")");
+  should_apply("not all and (max-device-aspect-ratio: " + low_dar_2 + ")");
+  expression_should_not_be_known("max-device-aspect-ratio");
+
+  // Tests for -moz- & -webkit versions of "device-pixel-ratio"
+  // (Note that the vendor prefixes go in different places.)
+  test_device_pixel_ratio("-moz-device-pixel-ratio",
+                          "min--moz-device-pixel-ratio",
+                          "max--moz-device-pixel-ratio");
+  test_device_pixel_ratio("-webkit-device-pixel-ratio",
+                          "-webkit-min-device-pixel-ratio",
+                          "-webkit-max-device-pixel-ratio");
+
+  // Make sure that we don't accidentally start accepting *unprefixed*
+  // "device-pixel-ratio" expressions:
+  expression_should_be_known("-webkit-device-pixel-ratio: 1.0");
+  expression_should_not_be_known("device-pixel-ratio: 1.0");
+  expression_should_be_known("-webkit-min-device-pixel-ratio: 1.0");
+  expression_should_not_be_known("min-device-pixel-ratio: 1.0");
+  expression_should_be_known("-webkit-max-device-pixel-ratio: 1.0");
+  expression_should_not_be_known("max-device-pixel-ratio: 1.0");
+
+  should_apply("(-webkit-transform-3d)");
+
+  features = [ "max-aspect-ratio", "device-aspect-ratio" ];
+  for (i in features) {
+    feature = features[i];
+    expression_should_be_known(feature + ": 1/1");
+    expression_should_be_known(feature + ": 1  /1");
+    expression_should_be_known(feature + ": 1  / \t\n1");
+    expression_should_be_known(feature + ": 1/\r1");
+    expression_should_be_known(feature + ": 1");
+    expression_should_be_known(feature + ": 0.5");
+    expression_should_be_known(feature + ": 1.0/1");
+    expression_should_be_known(feature + ": 1/1.0");
+    expression_should_be_known(feature + ": 1.0/1.0");
+    expression_should_be_known(feature + ": 1.5/1.2");
+    expression_should_be_known(feature + ": 1.5");
+    expression_should_be_known(feature + ": calc(1.2 * 1.3)");
+    expression_should_be_known(feature + ": 1.1/calc(2.2 * 2.3)");
+    expression_should_be_known(feature + ": calc(1.2 * 1.3)/2.2");
+    expression_should_be_known(feature + ": calc(1.2 * 1.3)/calc(2.2 * 2.3)");
+    expression_should_be_known(feature + ": 0/1");
+    expression_should_be_known(feature + ": 1/0");
+    expression_should_be_known(feature + ": 0/0");
+    expression_should_not_be_known(feature + ": -1/1");
+    expression_should_not_be_known(feature + ": 1/-1");
+    expression_should_not_be_known(feature + ": -1/-1");
+    expression_should_not_be_known(feature + ": -1/-1");
+    expression_should_not_be_known(feature + ": -1/-1");
+    expression_should_not_be_known(feature + ": invalid");
+    expression_should_not_be_known(feature + ": 1 / invalid");
+    expression_should_not_be_known(feature + ": 1 invalid");
+  }
+
+  var is_monochrome = query_applies("all and (min-monochrome: 1)");
+  test_serialization("all and (min-monochrome: 1)", true, is_monochrome);
+  var is_color = query_applies("all and (min-color: 1)");
+  test_serialization("all and (min-color: 1)", true, is_color);
+  isnot(is_monochrome, is_color, "should be either monochrome or color");
+
+  function depth_query(prefix, depth) {
+    return "all and (" + prefix + (is_color ? "color" : "monochrome") +
+           ":" + depth + ")";
+  }
+
+  var depth = 0;
+  do {
+    if (depth > 50) {
+      ok(false, "breaking from loop, depth > 50");
+      break;
+    }
+  } while (query_applies(depth_query("min-", ++depth)));
+  --depth;
+
+  should_apply(depth_query("", depth));
+  should_not_apply(depth_query("", depth - 1));
+  should_not_apply(depth_query("", depth + 1));
+  should_apply(depth_query("max-", depth));
+  should_not_apply(depth_query("max-", depth - 1));
+  should_apply(depth_query("max-", depth + 1));
+
+  (is_color ? should_apply : should_not_apply)("all and (color)");
+  expression_should_not_be_known("max-color");
+  expression_should_not_be_known("min-color");
+  (is_color ? should_not_apply : should_apply)("all and (monochrome)");
+  expression_should_not_be_known("max-monochrome");
+  expression_should_not_be_known("min-monochrome");
+  (is_color ? should_apply : should_not_apply)("not all and (monochrome)");
+  (is_color ? should_not_apply : should_apply)("not all and (color)");
+  (is_color ? should_apply : should_not_apply)("only all and (color)");
+  (is_color ? should_not_apply : should_apply)("only all and (monochrome)");
+
+  features = [ "color", "min-monochrome", "max-color-index" ];
+  for (i in features) {
+    feature = features[i];
+    expression_should_be_known(feature + ": 1");
+    expression_should_be_known(feature + ": 327");
+    expression_should_be_known(feature + ": 0");
+    expression_should_be_known(feature + ": -1");
+    expression_should_not_be_known(feature + ": 1.0");
+    expression_should_not_be_known(feature + ": 1/1");
+  }
+
+  // Presume that we never support indexed color (at least not usefully
+  // enough to call it indexed color).
+  should_apply("(color-index: 0)");
+  should_not_apply("(color-index: 1)");
+  should_apply("(min-color-index: 0)");
+  should_not_apply("(min-color-index: 1)");
+  should_apply("(max-color-index: 0)");
+  should_apply("(max-color-index: 1)");
+  should_apply("(max-color-index: 157)");
+
+  features = [ "resolution", "min-resolution", "max-resolution" ];
+  for (i in features) {
+    feature = features[i];
+    expression_should_be_known(feature + ": 3dpi");
+    expression_should_be_known(feature + ":3dpi");
+    expression_should_be_known(feature + ": 3.0dpi");
+    expression_should_be_known(feature + ": 3.4dpi");
+    expression_should_be_known(feature + "\t: 120dpcm");
+    expression_should_be_known(feature + ": 1dppx");
+    expression_should_be_known(feature + ": 1x");
+    expression_should_be_known(feature + ": 1.5dppx");
+    expression_should_be_known(feature + ": 1.5x");
+    expression_should_be_known(feature + ": 2.0dppx");
+    expression_should_be_known(feature + ": 0dpi");
+    expression_should_be_known(feature + ": -3dpi");
+    expression_should_be_known(feature + ": 0dppx");
+    expression_should_be_known(feature + ": 0x");
+  }
+
+  // Find the resolution using max-resolution
+  var resolution = 0;
+  do {
+    ++resolution;
+    if (resolution > 10000) {
+      ok(false, "resolution greater than 10000dpi???");
+      break;
+    }
+  } while (!query_applies("(max-resolution: " + resolution + "dpi)"));
+
+  // resolution should now be Math.ceil() of the actual resolution.
+  var dpi_high;
+  var dpi_low = resolution - 1;
+  if (query_applies("(min-resolution: " + resolution + "dpi)")) {
+    // It's exact!
+    should_apply("(resolution: " + resolution + "dpi)");
+    should_apply("(resolution: " + Math.floor(resolution/96) + "dppx)");
+    should_apply("(resolution: " + Math.floor(resolution/96) + "x)");
+    should_not_apply("(resolution: " + (resolution + 1) + "dpi)");
+    should_not_apply("(resolution: " + (resolution - 1) + "dpi)");
+    dpi_high = resolution + 1;
+  } else {
+    // We have no way to test resolution applying since it need not be
+    // an integer.
+    should_not_apply("(resolution: " + resolution + "dpi)");
+    should_not_apply("(resolution: " + (resolution - 1) + "dpi)");
+    dpi_high = resolution;
+  }
+
+  should_apply("(min-resolution: " + dpi_low + "dpi)");
+  should_not_apply("not all and (min-resolution: " + dpi_low + "dpi)");
+  should_apply("not all and (min-resolution: " + dpi_high + "dpi)");
+  should_not_apply("all and (min-resolution: " + dpi_high + "dpi)");
+
+  // Test dpcm units based on what we computed in dpi.
+  var dpcm_high = Math.ceil(dpi_high / 2.54);
+  var dpcm_low = Math.floor(dpi_low / 2.54);
+  should_apply("(min-resolution: " + dpcm_low + "dpcm)");
+  should_apply("(max-resolution: " + dpcm_high + "dpcm)");
+  should_not_apply("(max-resolution: " + dpcm_low + "dpcm)");
+  should_apply("not all and (min-resolution: " + dpcm_high + "dpcm)");
+
+  expression_should_be_known("scan");
+  expression_should_be_known("scan: progressive");
+  expression_should_be_known("scan:interlace");
+  expression_should_not_be_known("min-scan:interlace");
+  expression_should_not_be_known("scan: 1");
+  expression_should_not_be_known("max-scan");
+  expression_should_not_be_known("max-scan: progressive");
+  // Assume we don't support tv devices.
+  should_not_apply("(scan)");
+  should_not_apply("(scan: progressive)");
+  should_not_apply("(scan: interlace)");
+  should_apply("not all and (scan)");
+  should_apply("not all and (scan: progressive)");
+  should_apply("not all and (scan: interlace)");
+
+  expression_should_be_known("grid");
+  expression_should_be_known("grid: 0");
+  expression_should_be_known("grid: 1");
+  expression_should_be_known("grid: 1");
+  expression_should_not_be_known("min-grid");
+  expression_should_not_be_known("min-grid:0");
+  expression_should_not_be_known("max-grid: 1");
+  expression_should_not_be_known("grid: 2");
+  expression_should_not_be_known("grid: -1");
+
+  // Assume we don't support grid devices
+  should_not_apply("(grid)");
+  should_apply("(grid: 0)");
+  should_not_apply("(grid: 1)");
+  should_not_apply("(grid: 2)");
+  should_not_apply("(grid: -1)");
+
+  for (let toggle of CHROME_ONLY_TOGGLES) {
+    expression_should_not_be_known(toggle);
+    expression_should_not_be_known(toggle + ": 1");
+    expression_should_not_be_known(toggle + ": 0");
+    expression_should_not_be_known(toggle + ": -1");
+    expression_should_not_be_known(toggle + ": true");
+    expression_should_not_be_known(toggle + ": false");
+  }
+
+  for (let query of CHROME_ONLY_QUERIES) {
+    expression_should_not_be_known(query);
+  }
+
+  {
+    let should_be_parseable_if_enabled = SpecialPowers.getBoolPref('layout.css.prefers-contrast.enabled')
+      ? expression_should_be_known
+      : expression_should_not_be_known;
+    should_be_parseable_if_enabled("prefers-contrast");
+    should_be_parseable_if_enabled("prefers-contrast: more");
+    should_be_parseable_if_enabled("prefers-contrast: less");
+    should_be_parseable_if_enabled("prefers-contrast: custom");
+    should_be_parseable_if_enabled("prefers-contrast: no-preference");
+  }
+
+  {
+    let should_be_parseable_if_enabled = SpecialPowers.getBoolPref('layout.css.forced-colors.enabled')
+      ? expression_should_be_known
+      : expression_should_not_be_known;
+    should_be_parseable_if_enabled("forced-colors");
+    should_be_parseable_if_enabled("forced-colors: none");
+    should_be_parseable_if_enabled("forced-colors: active");
+  }
+
+  // OpenType SVG media features
+  expression_should_not_be_known("(-moz-is-glyph)");
+  expression_should_not_be_known("not (-moz-is-glyph)");
+  expression_should_not_be_known("only (-moz-is-glyph)");
+  expression_should_not_be_known("all and (-moz-is-glyph)");
+  expression_should_not_be_known("not all and (-moz-is-glyph)");
+  expression_should_not_be_known("only all and (-moz-is-glyph)");
+
+  expression_should_not_be_known("(-moz-is-glyph:0)");
+  expression_should_not_be_known("not (-moz-is-glyph:0)");
+  expression_should_not_be_known("only (-moz-is-glyph:0)");
+  expression_should_not_be_known("all and (-moz-is-glyph:0)");
+  expression_should_not_be_known("not all and (-moz-is-glyph:0)");
+  expression_should_not_be_known("only all and (-moz-is-glyph:0)");
+
+  expression_should_not_be_known("(-moz-is-glyph:1)");
+  expression_should_not_be_known("not (-moz-is-glyph:1)");
+  expression_should_not_be_known("only (-moz-is-glyph:1)");
+  expression_should_not_be_known("all and (-moz-is-glyph:1)");
+  expression_should_not_be_known("not all and (-moz-is-glyph:1)");
+  expression_should_not_be_known("only all and (-moz-is-glyph:1)");
+
+  expression_should_not_be_known("(min--moz-is-glyph:0)");
+  expression_should_not_be_known("(max--moz-is-glyph:0)");
+  expression_should_not_be_known("(min--moz-is-glyph:1)");
+  expression_should_not_be_known("(max--moz-is-glyph:1)");
+
+  should_not_apply("not all and (-moz-is-glyph)");
+  should_not_apply("(-moz-is-glyph:0)");
+  should_not_apply("not all and (-moz-is-glyph:1)");
+  should_not_apply("only all and (-moz-is-glyph:0)");
+  should_not_apply("(-moz-is-glyph)");
+  should_not_apply("(-moz-is-glyph:1)");
+  should_not_apply("not all and (-moz-is-glyph:0)");
+  should_not_apply("only all and (-moz-is-glyph:1)");
+
+  // Resource documents (UA-only).
+  expression_should_not_be_known("(-moz-is-resource-document)");
+
+  // Parsing tests
+  // bug 454227
+  should_apply_unbalanced("(orientation");
+  should_not_apply_unbalanced("not all and (orientation");
+  should_not_apply_unbalanced("(orientation:");
+  should_apply_unbalanced("all,(orientation:");
+  should_not_apply_unbalanced("(orientation:,all");
+  should_apply_unbalanced("not all and (grid");
+  should_not_apply_unbalanced("only all and (grid");
+  should_not_apply_unbalanced("(grid");
+  should_apply_unbalanced("all,(grid");
+  should_not_apply_unbalanced("(grid,all");
+  // bug 454226
+  should_apply(",all");
+  should_apply("all,");
+  should_apply(",all,");
+  should_apply("all,badmedium");
+  should_apply("badmedium,all");
+  should_not_apply(",badmedium,");
+  should_apply("all,(badexpression)");
+  should_apply("(badexpression),all");
+  should_not_apply("(badexpression),badmedium");
+  should_not_apply("badmedium,(badexpression)");
+  should_apply("all,[badsyntax]");
+  should_apply("[badsyntax],all");
+  should_not_apply("badmedium,[badsyntax]");
+  should_not_apply("[badsyntax],badmedium");
+  // bug 528096
+  should_not_apply_unbalanced("((resolution),all");
+  should_not_apply_unbalanced("(resolution(),all");
+  should_not_apply_unbalanced("(resolution (),all");
+  should_not_apply_unbalanced("(resolution:(),all");
+
+  for (let rangeFeature of ["dynamic-range", "video-dynamic-range"]) {
+    should_apply("(" + rangeFeature + ": standard)");
+    expression_should_be_known("(" + rangeFeature + ": high)");
+    expression_should_not_be_known("(" + rangeFeature + ": low)");
+  }
+
+  handle_posted_items();
+}
+
+/*
+ * The cloning tests have to post tests that wait for onload.  However,
+ * we also make a bunch of state changes during the tests above.  So we
+ * always change state using the change_state call, with both makes the
+ * change immediately and posts an item in the same queue so that we
+ * make the same state change again later.
+ */
+
+var posted_items = [];
+
+function change_state(func)
+{
+  func();
+  posted_items.push({state: func});
+}
+
+function post_clone_test(srcdoc, testfunc)
+{
+  posted_items.push({srcdoc, testfunc});
+}
+
+function handle_posted_items()
+{
+  if (posted_items.length == 0) {
+    SimpleTest.finish();
+    return;
+  }
+
+  if ("state" in posted_items[0]) {
+    var item = posted_items.shift();
+    item.state();
+    handle_posted_items();
+    return;
+  }
+
+  var srcdoc = posted_items[0].srcdoc;
+  iframe.onload = handle_iframe_onload;
+  iframe.srcdoc = srcdoc;
+}
+
+function handle_iframe_onload(event)
+{
+  if (event.target != iframe)
+    return;
+
+  var item = posted_items.shift();
+  item.testfunc();
+  handle_posted_items();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_media_queries_dynamic.html b/layout/style/test/test_media_queries_dynamic.html
new file mode 100644
index 0000000000..52e5fda9ca
--- /dev/null
+++ b/layout/style/test/test_media_queries_dynamic.html
@@ -0,0 +1,207 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=473400
+-->
+<head>
+  <title>Test for Bug 473400</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=473400">Mozilla Bug 473400</a>
+<iframe id="subdoc" src="about:blank"></iframe>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script class="testbody" type="application/javascript">
+
+/** Test for Bug 473400 **/
+
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+  var subdoc = document.getElementById("subdoc").contentDocument;
+  var subwin = document.getElementById("subdoc").contentWindow;
+  var style = subdoc.createElement("style");
+  style.setAttribute("type", "text/css");
+  subdoc.getElementsByTagName("head")[0].appendChild(style);
+  var sheet = style.sheet;
+  var iframe_style = document.getElementById("subdoc").style;
+
+  // Create a style rule and an element now based on the given media
+  // query "q", and return the computed style that should be passed to
+  // query_applies to see if that query currently applies.
+  var n = 0;
+  function make_query(q) {
+    var i = ++n;
+    sheet.insertRule("@media " + q + " { #e" + i + " { text-decoration: underline; } }", sheet.cssRules.length);
+    var e = subdoc.createElement("div");
+    e.id = "e" + i;
+    subdoc.body.appendChild(e);
+    var cs = subdoc.defaultView.getComputedStyle(e);
+    cs._originalQueryText = q;
+    return cs;
+  }
+  function query_applies(cs) {
+    return cs.getPropertyValue("text-decoration-line") == "underline";
+  }
+
+  function should_apply(cs) {
+    ok(query_applies(cs), cs._originalQueryText + " should apply");
+  }
+
+  function should_not_apply(cs) {
+    ok(!query_applies(cs), cs._originalQueryText + " should not apply");
+  }
+
+  var content_div = document.getElementById("content");
+  content_div.style.font = "initial";
+  var em_size =
+    getComputedStyle(content_div, "").fontSize.match(/^(\d+)px$/)[1];
+
+  let width_val = 317; // pick two not-too-round numbers
+  let height_val = 228;
+  iframe_style.width = width_val + "px";
+  iframe_style.height = height_val + "px";
+  var wh_queries = [
+    make_query("all and (min-width: " +
+                     (Math.ceil(width_val/em_size) + 1) + "em)"),
+    make_query("all and (min-width: " +
+                 (Math.floor(width_val/em_size) - 1) + "em)"),
+    make_query("all and (max-width: " +
+                 (Math.ceil(width_val/em_size) + 1) + "em)"),
+    make_query("all and (max-width: " +
+                     (Math.floor(width_val/em_size) - 1) + "em)"),
+    make_query("all and (min-width: " +
+                     (Math.ceil(width_val/(em_size*2)) + 1) + "em)"),
+    make_query("all and (min-width: " +
+                 (Math.floor(width_val/(em_size*2)) - 1) + "em)"),
+    make_query("all and (max-width: " +
+                 (Math.ceil(width_val/(em_size*2)) + 1) + "em)"),
+    make_query("all and (max-width: " +
+                     (Math.floor(width_val/(em_size*2)) - 1) + "em)")
+  ];
+
+  is(wh_queries[0].fontSize, em_size + "px", "text zoom is 1.0");
+  should_not_apply(wh_queries[0]);
+  should_apply(wh_queries[1]);
+  should_apply(wh_queries[2]);
+  should_not_apply(wh_queries[3]);
+  SpecialPowers.setTextZoom(subwin, 2.0);
+  isnot(wh_queries[0].fontSize, em_size + "px", "text zoom is not 1.0");
+  should_not_apply(wh_queries[4]);
+  should_apply(wh_queries[5]);
+  should_apply(wh_queries[6]);
+  should_not_apply(wh_queries[7]);
+  SpecialPowers.setTextZoom(subwin, 1.0);
+  is(wh_queries[0].fontSize, em_size + "px", "text zoom is 1.0");
+  is(subwin.innerHeight, 228, "full zoom is 1.0");
+  should_not_apply(wh_queries[0]);
+  should_apply(wh_queries[1]);
+  should_apply(wh_queries[2]);
+  should_not_apply(wh_queries[3]);
+  SpecialPowers.setFullZoom(subwin, 2.0);
+  isnot(subwin.innerHeight, 228, "full zoom is not 1.0");
+  should_not_apply(wh_queries[4]);
+  should_apply(wh_queries[5]);
+  should_apply(wh_queries[6]);
+  should_not_apply(wh_queries[7]);
+  SpecialPowers.setFullZoom(subwin, 1.0);
+  is(subwin.innerHeight, 228, "full zoom is 1.0");
+
+
+  // Now test that certain things *don't* happen, i.e., that we're
+  // making the optimizations we expect.
+  subdoc.body.textContent = "";
+  subdoc.body.appendChild(subdoc.createElement("div"));
+  for (var ruleIdx = sheet.cssRules.length; ruleIdx-- != 0; ) {
+    sheet.deleteRule(ruleIdx);
+  }
+
+  var utils = SpecialPowers.getDOMWindowUtils(subwin);
+  var restyleGeneration, framesConstructed, framesReflowed;
+  function reset_change_counters()
+  {
+    restyleGeneration = utils.restyleGeneration;
+    framesConstructed = utils.framesConstructed;
+    framesReflowed = utils.framesReflowed;
+  }
+
+  function flush_and_assert_change_counters(desc, expected) {
+    subdoc.body.offsetHeight;
+
+    if (!("restyle" in expected) ||
+        !("construct" in expected) ||
+        !("reflow" in expected)) {
+      ok(false, "parameter missing expectation");
+      return;
+    }
+
+    var didRestyle = utils.restyleGeneration != restyleGeneration;
+    var constructs = utils.framesConstructed - framesConstructed;
+    var reflows = utils.framesReflowed - framesReflowed;
+
+    (expected.restyle ? isnot : is)(didRestyle, false, "restyle: " + desc);
+    (expected.construct ? isnot : is)(constructs, 0,
+                                      "frame construct count: " + desc);
+    (expected.reflow ? isnot : is)(reflows, 0, "reflow count: " + desc);
+
+    reset_change_counters();
+  }
+
+  subdoc.body.offsetHeight;
+  reset_change_counters();
+
+  iframe_style.width = "103px";
+  flush_and_assert_change_counters("change width with no media queries",
+    { restyle: false, construct: false, reflow: true });
+
+  flush_and_assert_change_counters("no change",
+    { restyle: false, construct: false, reflow: false });
+
+  iframe_style.height = "123px";
+  flush_and_assert_change_counters("change height with no media queries",
+    { restyle: false, construct: false, reflow: true });
+
+  sheet.insertRule("@media (min-width: 150px) { div { display:flex } }", 0);
+  flush_and_assert_change_counters("add non-matching media query",
+    { restyle: false, construct: false, reflow: false });
+
+  iframe_style.width = "177px";
+  flush_and_assert_change_counters("resize width across media query with 'display'",
+    { restyle: true, construct: true, reflow: true });
+
+  iframe_style.width = "162px";
+  flush_and_assert_change_counters("resize width without crossing media query",
+    { restyle: false, construct: false, reflow: true });
+
+  sheet.deleteRule(0);
+  flush_and_assert_change_counters("remove matching media query with 'display'",
+    { restyle: true, construct: true, reflow: true });
+
+  sheet.insertRule("@media (max-height: 150px) { div { display:flex } }", 0);
+  flush_and_assert_change_counters("add matching media query with 'display'",
+    { restyle: true, construct: true, reflow: true });
+
+  iframe_style.height = "111px";
+  flush_and_assert_change_counters("resize height without crossing media query",
+    { restyle: false, construct: false, reflow: true });
+
+  iframe_style.height = "184px";
+  flush_and_assert_change_counters("resize height across media query with 'display'",
+    { restyle: true, construct: true, reflow: true });
+
+  sheet.deleteRule(0);
+  flush_and_assert_change_counters("remove non-matching media query",
+    { restyle: false, construct: false, reflow: false });
+
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_media_query_list.html b/layout/style/test/test_media_query_list.html
new file mode 100644
index 0000000000..8fec174e96
--- /dev/null
+++ b/layout/style/test/test_media_query_list.html
@@ -0,0 +1,347 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=542058
+-->
+<head>
+  <title>Test for MediaQueryList (Bug 542058)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=542058">Mozilla Bug 542058</a>
+<iframe id="subdoc" src="about:blank"></iframe>
+<div id="content" style="display:none"></div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for MediaQueryList (Bug 542058) **/
+
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+  var iframe = document.getElementById("subdoc");
+  var subdoc = iframe.contentDocument;
+  var subwin = iframe.contentWindow;
+  var subroot = subdoc.documentElement;
+
+  var content_div = document.getElementById("content");
+  content_div.style.font = "initial";
+  var em_size =
+    getComputedStyle(content_div).fontSize.match(/^(\d+)px$/)[1];
+
+  var w = Math.floor(em_size * 9.3);
+  var h = Math.floor(em_size * 4.2);
+  iframe.style.width = w + "px";
+  iframe.style.height = h + "px";
+  subroot.offsetWidth; // flush layout
+
+  function setup_mql(str) {
+    var obj = {
+      str: str,
+      mql: subwin.matchMedia(str),
+      notifyCount: 0,
+      listener: function(event) {
+                  ok(event instanceof subwin.MediaQueryListEvent,
+                     "correct argument to listener: " + obj.str);
+                  is(event.media, obj.mql.media,
+                     "correct media in the event: " + obj.str);
+                  is(event.target, obj.mql,
+                     "correct target in the event: " + obj.str);
+                  ++obj.notifyCount;
+                  // Test the last match result only on odd
+                  // notifications.
+                  if (obj.notifyCount & 1) {
+                    obj.lastOddMatchResult = event.target.matches;
+                  }
+                }
+    }
+    obj.mql.addListener(obj.listener);
+    return obj;
+  }
+
+  function finish_mql(obj) {
+    obj.mql.removeListener(obj.listener);
+  }
+
+  var w_exact_w = setup_mql("(width: " + w + "px)");
+  var w_min_9em = setup_mql("(min-width : 9em)");
+  var w_min_10em = setup_mql("(  min-width: 10em ) ");
+  var w_max_9em = setup_mql("(max-width: 9em)");
+  var w_max_10em = setup_mql("(max-width: 10em)");
+
+  is(w_exact_w.mql.media, "(width: " + w + "px)", "serialization");
+  is(w_min_9em.mql.media, "(min-width: 9em)", "serialization");
+  is(w_min_10em.mql.media, "(min-width: 10em)", "serialization");
+  is(w_max_9em.mql.media, "(max-width: 9em)", "serialization");
+  is(w_max_10em.mql.media, "(max-width: 10em)", "serialization");
+
+  function check_match(obj, expected, desc) {
+    is(obj.mql.matches, expected,
+       obj.str + " media query list .matches " + desc);
+    if (obj.notifyCount & 1) { // odd notifications only
+      is(obj.lastOddMatchResult, expected,
+       obj.str + " media query list last notify result " + desc);
+    }
+  }
+  function check_notify(obj, expected, desc) {
+    is(obj.notifyCount, expected,
+       obj.str + " media query list .notify count " + desc);
+  }
+  check_match(w_exact_w, true, "initially");
+  check_notify(w_exact_w, 0, "initially");
+  check_match(w_min_9em, true, "initially");
+  check_notify(w_min_9em, 0, "initially");
+  check_match(w_min_10em, false, "initially");
+  check_notify(w_min_10em, 0, "initially");
+  check_match(w_max_9em, false, "initially");
+  check_notify(w_max_9em, 0, "initially");
+  check_match(w_max_10em, true, "initially");
+  check_notify(w_max_10em, 0, "initially");
+
+  var w2 = Math.floor(em_size * 10.3);
+  iframe.style.width = w2 + "px";
+  subroot.offsetWidth; // flush layout
+
+  check_match(w_exact_w, false, "after width increase to around 10.3em");
+  check_notify(w_exact_w, 1, "after width increase to around 10.3em");
+  check_match(w_min_9em, true, "after width increase to around 10.3em");
+  check_notify(w_min_9em, 0, "after width increase to around 10.3em");
+  check_match(w_min_10em, true, "after width increase to around 10.3em");
+  check_notify(w_min_10em, 1, "after width increase to around 10.3em");
+  check_match(w_max_9em, false, "after width increase to around 10.3em");
+  check_notify(w_max_9em, 0, "after width increase to around 10.3em");
+  check_match(w_max_10em, false, "after width increase to around 10.3em");
+  check_notify(w_max_10em, 1, "after width increase to around 10.3em");
+
+  var w3 = w * 2;
+  iframe.style.width = w3 + "px";
+  subroot.offsetWidth; // flush layout
+
+  check_match(w_exact_w, false, "after width double from original");
+  check_notify(w_exact_w, 1, "after width double from original");
+  check_match(w_min_9em, true, "after width double from original");
+  check_notify(w_min_9em, 0, "after width double from original");
+  check_match(w_min_10em, true, "after width double from original");
+  check_notify(w_min_10em, 1, "after width double from original");
+  check_match(w_max_9em, false, "after width double from original");
+  check_notify(w_max_9em, 0, "after width double from original");
+  check_match(w_max_10em, false, "after width double from original");
+  check_notify(w_max_10em, 1, "after width double from original");
+
+  SpecialPowers.setFullZoom(subwin, 2.0);
+  subroot.offsetWidth; // flush layout
+
+  check_match(w_exact_w, true, "after zoom");
+  check_notify(w_exact_w, 2, "after zoom");
+  check_match(w_min_9em, true, "after zoom");
+  check_notify(w_min_9em, 0, "after zoom");
+  check_match(w_min_10em, false, "after zoom");
+  check_notify(w_min_10em, 2, "after zoom");
+  check_match(w_max_9em, false, "after zoom");
+  check_notify(w_max_9em, 0, "after zoom");
+  check_match(w_max_10em, true, "after zoom");
+  check_notify(w_max_10em, 2, "after zoom");
+
+  SpecialPowers.setFullZoom(subwin, 1.0);
+
+  finish_mql(w_exact_w);
+  finish_mql(w_min_9em);
+  finish_mql(w_min_10em);
+  finish_mql(w_max_9em);
+  finish_mql(w_max_10em);
+
+  // Additional tests of listener mutation.
+  (function() {
+    var received = [];
+    var received_mql = [];
+    function listener1(event) {
+      received.push(1);
+      received_mql.push(event.target);
+    }
+    function listener2(event) {
+      received.push(2);
+      received_mql.push(event.target);
+    }
+
+    iframe.style.width = "200px";
+    subroot.offsetWidth; // flush layout
+
+    var mql = subwin.matchMedia("(min-width: 150px)");
+    mql.addListener(listener1);
+    mql.addListener(listener1);
+    mql.addListener(listener2);
+    is(JSON.stringify(received), "[]", "listeners before notification");
+
+    iframe.style.width = "100px";
+    subroot.offsetWidth; // flush layout
+
+    is(JSON.stringify(received), "[1,2]", "duplicate listeners removed");
+    received = [];
+    mql.removeListener(listener1);
+
+    iframe.style.width = "200px";
+    subroot.offsetWidth; // flush layout
+
+    is(JSON.stringify(received), "[2]", "listener removal");
+    received = [];
+    mql.addListener(listener1);
+
+    iframe.style.width = "100px";
+    subroot.offsetWidth; // flush layout
+
+    is(JSON.stringify(received), "[2,1]", "listeners notified in order");
+    received = [];
+    mql.addListener(listener2);
+
+    iframe.style.width = "200px";
+    subroot.offsetWidth; // flush layout
+
+    is(JSON.stringify(received), "[2,1]", "add of existing listener is no-op");
+    received = [];
+    mql.addListener(listener1);
+
+    iframe.style.width = "100px";
+    subroot.offsetWidth; // flush layout
+
+    is(JSON.stringify(received), "[2,1]", "add of existing listener is no-op");
+    mql.removeListener(listener2);
+    received = [];
+    received_mql = [];
+
+    var mql2 = subwin.matchMedia("(min-width: 160px)");
+    mql2.addListener(listener1);
+    mql.addListener(listener2);
+
+    iframe.style.width = "200px";
+    subroot.offsetWidth; // flush layout
+
+    // mql (1, 2), mql2 (1)
+    is(JSON.stringify(received), "[1,2,1]",
+       "notification of lists in order created");
+    is(received_mql[0], mql,
+       "notification of lists in order created");
+    is(received_mql[1], mql,
+       "notification of lists in order created");
+    is(received_mql[2], mql2,
+       "notification of lists in order created");
+    received = [];
+    received_mql = [];
+
+    function removing_listener(event) {
+      received.push(3);
+      received_mql.push(event.target);
+      event.target.removeListener(listener2);
+      mql2.removeListener(listener1);
+    }
+
+    mql.addListener(removing_listener);
+    mql.removeListener(listener2);
+    mql.addListener(listener2); // after removing_listener (3)
+
+    iframe.style.width = "100px";
+    subroot.offsetWidth; // flush layout
+
+    // mql(1, 3)
+    is(JSON.stringify(received), "[1,3]",
+       "listeners still notified after removed if change was before");
+    is(received_mql[0], mql,
+       "notification order (removal tests)");
+    is(received_mql[1], mql,
+       "notification order (removal tests)");
+    received = [];
+    received_mql = [];
+
+    iframe.style.width = "200px";
+    subroot.offsetWidth; // flush layout
+
+    // mql(1, 3)
+    is(JSON.stringify(received), "[1,3]",
+       "listeners not notified for changes after their removal");
+    is(received_mql[0], mql,
+       "notification order (removal tests)");
+    is(received_mql[1], mql,
+       "notification order (removal tests)");
+  })();
+
+  /* Bug 753777: test that things work in a freshly-created iframe */
+  (function() {
+    let newIframe = document.createElement("iframe");
+    document.body.appendChild(newIframe);
+
+    is(newIframe.contentWindow.matchMedia("all").matches, true,
+       "matchMedia should work in newly-created iframe");
+    is(newIframe.contentWindow.matchMedia("(min-width: 1px)").matches, true,
+       "(min-width: 1px) should match in newly-created iframe");
+    is(newIframe.contentWindow.matchMedia("(max-width: 1px)").matches, false,
+       "(max-width: 1px) should not match in newly-created iframe");
+
+    document.body.removeChild(newIframe);
+  })();
+
+  /* Bug 716751: listeners lost due to GC */
+  var gc_received = [];
+  (function() {
+    var received = [];
+    var listener1 = function(event) {
+      gc_received.push(1);
+    }
+
+    iframe.style.width = "200px";
+    subroot.offsetWidth; // flush layout
+
+    var mql = subwin.matchMedia("(min-width: 150px)");
+    mql.addListener(listener1);
+    is(JSON.stringify(gc_received), "[]", "GC test: before notification");
+
+    iframe.style.width = "100px";
+    subroot.offsetWidth; // flush layout
+
+    is(JSON.stringify(gc_received), "[1]", "GC test: after notification 1");
+
+    // Because of conservative GC, we need to go back to the event loop
+    // to GC properly.
+    setTimeout(step2, 0);
+  })();
+
+  function step2() {
+    SpecialPowers.DOMWindowUtils.garbageCollect();
+
+    iframe.style.width = "200px";
+    subroot.offsetWidth; // flush layout
+
+    is(JSON.stringify(gc_received), "[1,1]", "GC test: after notification 2");
+
+    bug1270626();
+  }
+
+  /* Bug 1270626: listeners that throw exceptions */
+  function bug1270626() {
+    var throwingListener = function(event) {
+      throw "error";
+    }
+
+    iframe.style.width = "200px";
+    subroot.offsetWidth; // flush layout
+
+    var mql = subwin.matchMedia("(min-width: 150px)");
+    mql.addListener(throwingListener);
+
+    SimpleTest.expectUncaughtException(true);
+    is(SimpleTest.isExpectingUncaughtException(), true,
+       "should be waiting for an uncaught exception");
+
+    iframe.style.width = "100px";
+    subroot.offsetWidth; // flush layout
+
+    is(SimpleTest.isExpectingUncaughtException(), false,
+       "should have gotten an uncaught exception");
+
+    SimpleTest.finish();
+  }
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_media_query_serialization.html b/layout/style/test/test_media_query_serialization.html
new file mode 100644
index 0000000000..ed82653db0
--- /dev/null
+++ b/layout/style/test/test_media_query_serialization.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Test media query list serialization</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+<style>
+  @media PrInT {}
+  @media screen, PrInT, SPEECH {}
+
+  @media GARbAGE7 {}
+  @media AAAAA {}
+  @media ZZZZZ {}
+
+  @media NotAValidMediaType_!000 {}
+  @media NotAValidMediaType_!000, AlsoInvalid!!!! {}
+
+  @media PrInT, GARbAGE7, notAValidMediaType_!000 {}
+</style>
+<script type="application/javascript">
+
+let expectedValues = [
+  // Valid types
+  ["print", "Valid media types are ascii lowercased."],
+  ["screen, print, speech", "Media query lists with only valid types are ascii lowercased."],
+
+  // Invalid types
+  ["garbage7", "Invalid media types are ascii lowercased."],
+  ["aaaaa", "Ascii conversion handles 'A' correctly."],
+  ["zzzzz", "Ascii conversion handles 'Z' correctly."],
+
+  // Malformed types
+  ["not all", "Malformed media types are serialized to 'not all'."],
+  ["not all, not all", "Multiple malformed media types are each serialized to 'not all'."],
+
+  // Mixes
+  ["print, garbage7, not all", "Media query lists with a mix of valid, invalid, and malformed types serialize " +
+                               "as lowercase with malformed types changed to 'not all'."],
+];
+
+let sheet = document.styleSheets[1];
+
+expectedValues.forEach(function (entry, index) {
+  let rule = sheet.cssRules[index];
+  let serializedList = rule.media.mediaText;
+  is(serializedList, entry[0], entry[1]);
+});
+
+</script>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/style/test/test_medialist_privilege.html b/layout/style/test/test_medialist_privilege.html
new file mode 100644
index 0000000000..bb021d75e4
--- /dev/null
+++ b/layout/style/test/test_medialist_privilege.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<title>Test whether it can access a filed in MediaList with normal privilege after accessing with chrome privilege.</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+
+<style>
+@media screen and (max-width: 800px) {
+  body {
+    background-color: lime;
+  }
+}
+</style>
+<script>
+"use strict";
+
+const chromeDocument = SpecialPowers.wrap(document);
+assertMediaText(chromeDocument);
+assertMediaText(document);
+
+function assertMediaText(doc) {
+  const stylesheet = doc.styleSheets[0];
+  const rule = stylesheet.cssRules[0];
+  const media = rule.media;
+  is(rule.media.mediaText, "screen and (max-width: 800px)");
+}
+</script>
diff --git a/layout/style/test/test_moz_device_pixel_ratio.html b/layout/style/test/test_moz_device_pixel_ratio.html
new file mode 100644
index 0000000000..0e3e143fe8
--- /dev/null
+++ b/layout/style/test/test_moz_device_pixel_ratio.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=474356
+-->
+<head>
+  <title>Test for Bug 474356</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style>.zoom-test { visibility: hidden; }</style>
+  <style><!-- placeholder for dynamic additions --></style>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=474356">Mozilla Bug 474356</a>
+<div id="content" style="display: none">
+  
+</div>
+<script type="text/javascript">
+</script>
+<pre id="test">
+<div id="zoom1" class="zoom-test"></div>
+<div id="zoom2" class="zoom-test"></div>
+<div id="zoom3" class="zoom-test"></div>
+<script class="testbody" type="application/javascript">
+
+/** Test for Bug 474356 **/
+
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+  function zoom(factor) {
+    var previous = SpecialPowers.getFullZoom(window);
+    SpecialPowers.setFullZoom(window, factor);
+    return previous;
+  }
+
+  function isVisible(divName) {
+    return window.getComputedStyle(document.getElementById(divName)).visibility == "visible";
+  }
+
+  var screenPixelsPerCSSPixel = window.devicePixelRatio;
+  var baseRatio = 1.0 * screenPixelsPerCSSPixel;
+  var doubleRatio = 2.0 * screenPixelsPerCSSPixel;
+  var halfRatio = 0.5 * screenPixelsPerCSSPixel;
+  var styleElem = document.getElementsByTagName("style")[1];
+  styleElem.textContent =
+      ["@media all and (-moz-device-pixel-ratio: " + baseRatio + ") {",
+         "#zoom1 { visibility: visible; }",
+       "}",
+       "@media all and (-moz-device-pixel-ratio: " + doubleRatio + ") {",
+         "#zoom2 { visibility: visible; }",
+       "}",
+       "@media all and (-moz-device-pixel-ratio: " + halfRatio + ") {",
+         "#zoom3 { visibility: visible; }",
+       "}"
+      ].join("\n");
+
+  ok(isVisible("zoom1"), "Base ratio rule should apply at base zoom level");
+  ok(!isVisible("zoom2") && !isVisible("zoom3"), "no other rules should apply");
+  var origZoom = zoom(2);
+  ok(isVisible("zoom2"), "Double ratio rule should apply at double zoom level");
+  ok(!isVisible("zoom1") && !isVisible("zoom3"), "no other rules should apply");
+  zoom(0.5);
+  ok(isVisible("zoom3"), "Half ratio rule should apply at half zoom level");
+  ok(!isVisible("zoom1") && !isVisible("zoom2"), "no other rules should apply");
+  zoom(origZoom);
+
+  SimpleTest.finish();
+}
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_moz_prefixed_cursor.html b/layout/style/test/test_moz_prefixed_cursor.html
new file mode 100644
index 0000000000..db7ffaaf56
--- /dev/null
+++ b/layout/style/test/test_moz_prefixed_cursor.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>Cursor aliases compute to the unprefixed keyword</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div></div>
+<script>
+test(function() {
+  let div = document.querySelector("div");
+  for (const kw of ["grab", "grabbing", "zoom-in", "zoom-out"]) {
+    div.style.cursor = "-moz-" + kw;
+    assert_equals(getComputedStyle(div).cursor, kw);
+  }
+}, "-moz- prefixed cursor keywords compute to its unprefixed version");
+</script>
diff --git a/layout/style/test/test_mq_any_hover_and_any_pointer.html b/layout/style/test/test_mq_any_hover_and_any_pointer.html
new file mode 100644
index 0000000000..1725af0725
--- /dev/null
+++ b/layout/style/test/test_mq_any_hover_and_any_pointer.html
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1483111
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1035774</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=1483111">Mozilla Bug 1483111</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+<script>
+
+const NO_POINTER            = 0x00;
+const COARSE_POINTER        = 0x01;
+const FINE_POINTER          = 0x02;
+const HOVER_CAPABLE_POINTER = 0x04;
+
+var isAndroid = navigator.appVersion.includes("Android");
+
+add_task(async () => {
+  await SpecialPowers.pushPrefEnv({
+    set: [ ['privacy.resistFingerprinting', true] ]
+  });
+
+  // When resistFingerprinting is enabled, we pretend that the system has a
+  // mouse pointer (or finger on mobile).
+  let invertIfAndroid = function(b) { return isAndroid ? !b : b; };
+
+  ok(!matchMedia("(any-pointer: none)").matches,
+                 "Doesn't match (any-pointer: none)");
+  ok(matchMedia("(any-pointer)").matches, "Matches (any-pointer)");
+  
+  ok(invertIfAndroid(!matchMedia("(any-pointer: coarse)").matches),
+                 "Doesn't match (any-pointer: coarse)");
+  ok(invertIfAndroid(matchMedia("(any-pointer: fine)").matches), "Matches (any-pointer: fine)");
+
+  ok(invertIfAndroid(!matchMedia("(any-hover: none)").matches),
+                 "Doesn't match (any-hover: none)");
+  ok(invertIfAndroid(matchMedia("(any-hover: hover)").matches),
+                "Matches (any-hover: hover)");
+  ok(invertIfAndroid(matchMedia("(any-hover)").matches), "Matches (any-hover)");
+
+  await SpecialPowers.flushPrefEnv();
+});
+
+add_task(async () => {
+  // No pointer.
+  await SpecialPowers.pushPrefEnv({
+    set: [ ['ui.allPointerCapabilities', NO_POINTER] ]
+  });
+
+  ok(matchMedia("(any-pointer: none)").matches, "Matches (any-pointer: none)");
+  ok(!matchMedia("(any-pointer: coarse)").matches,
+                 "Doesn't match (any-pointer: coarse)");
+  ok(!matchMedia("(any-pointer: fine)").matches,
+                 "Doesn't match (any-pointer: fine)");
+  ok(!matchMedia("(any-pointer)").matches, "Matches (any-pointer)");
+
+  ok(matchMedia("(any-hover: none)").matches, "Matches (any-hover: none)");
+  ok(!matchMedia("(any-hover: hover)").matches,
+                 "Doesn't match (any-hover: hover)");
+  ok(!matchMedia("(any-hover)").matches, "Doesn't match (any-hover)");
+});
+
+add_task(async () => {
+  // Mouse type pointer and touchscreen
+  await SpecialPowers.pushPrefEnv({
+    set: [ ['ui.allPointerCapabilities',
+            FINE_POINTER | COARSE_POINTER | HOVER_CAPABLE_POINTER] ]
+  });
+
+  ok(!matchMedia("(any-pointer: none)").matches,
+                 "Doesn't match (any-pointer: none)");
+  ok(matchMedia("(any-pointer: coarse)").matches,
+                 "Matches (any-pointer: coarse)");
+  ok(matchMedia("(any-pointer: fine)").matches, "Matches (any-pointer: fine)");
+  ok(matchMedia("(any-pointer)").matches, "Matches (any-pointer)");
+
+  ok(!matchMedia("(any-hover: none)").matches,
+                 "Doesn't match (any-hover: none)");
+  ok(matchMedia("(any-hover: hover)").matches,
+                "Matches (any-hover: hover)");
+  ok(matchMedia("(any-hover)").matches, "Matches (any-hover)");
+});
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_mq_changes_in_iframe.html b/layout/style/test/test_mq_changes_in_iframe.html
new file mode 100644
index 0000000000..3a36476c42
--- /dev/null
+++ b/layout/style/test/test_mq_changes_in_iframe.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Media feature value change propagation in an iframe</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none"></div>
+<iframe id="iframe"></iframe>
+<pre id="test"></pre>
+<script>
+add_task(async () => {
+  const mqString = "(prefers-reduced-motion: reduce)";
+
+  await SpecialPowers.pushPrefEnv({ set: [['ui.prefersReducedMotion', 0]]});
+
+  iframe.src = SimpleTest.getTestFileURL("mq_changes_child.html")
+                         .replace("mochi.test:8888", "example.com");
+  await new Promise(resolve => window.addEventListener("message", event => {
+    if (event.data == "ready") {
+      resolve();
+    }
+  }, { once: true } ));
+
+  const mql = matchMedia(mqString);
+  ok(!mql.matches, `Doesn't matches ${mqString}`);
+
+  const changedInThisDocument = new Promise(resolve => {
+    mql.addEventListener("change", event => { resolve(event.matches); });
+  });
+  const changedInIFrame = new Promise(resolve => {
+    window.addEventListener("message", event => {
+      if ("matches" in event.data) {
+        resolve(event.data.matches);
+      }
+    }, { once: true });
+  });
+
+  await SpecialPowers.pushPrefEnv({ set: [['ui.prefersReducedMotion', 1]]});
+
+  const results =
+      await Promise.allSettled([ changedInThisDocument, changedInIFrame ]);
+
+  results.forEach(result => {
+    is(result.status, "fulfilled");
+    ok(result.value, `Matches ${mqString}`);
+  });
+});
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_mq_hover_and_pointer.html b/layout/style/test/test_mq_hover_and_pointer.html
new file mode 100644
index 0000000000..40eaed5d0b
--- /dev/null
+++ b/layout/style/test/test_mq_hover_and_pointer.html
@@ -0,0 +1,127 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1035774
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1035774</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=1035774">Mozilla Bug 1035774</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+<script>
+
+const NO_POINTER            = 0x00;
+const COARSE_POINTER        = 0x01;
+const FINE_POINTER          = 0x02;
+const HOVER_CAPABLE_POINTER = 0x04;
+
+var isAndroid = navigator.appVersion.includes("Android");
+
+add_task(async () => {
+  await SpecialPowers.pushPrefEnv({
+    set: [ ['privacy.resistFingerprinting', true] ]
+  });
+
+  // When resistFingerprinting is enabled, we pretend that the system has a
+  // mouse pointer (or finger on mobile).
+  let invertIfAndroid = function(b) { return isAndroid ? !b : b; };
+
+  ok(!matchMedia("(pointer: none)").matches,
+                 "Doesn't match (pointer: none)");
+
+  ok(matchMedia("(pointer)").matches, "Matches (pointer)");
+
+  ok(invertIfAndroid(!matchMedia("(pointer: coarse)").matches),
+                 "Doesn't match (pointer: coarse)");
+  ok(invertIfAndroid(matchMedia("(pointer: fine)").matches), "Matches (pointer: fine)");
+
+  ok(invertIfAndroid(!matchMedia("(hover: none)").matches), "Doesn't match (hover: none)");
+  ok(invertIfAndroid(matchMedia("(hover: hover)").matches), "Matches (hover: hover)");
+  ok(invertIfAndroid(matchMedia("(hover)").matches), "Matches (hover)");
+
+  await SpecialPowers.flushPrefEnv();
+});
+
+add_task(async () => {
+  // No pointer.
+  await SpecialPowers.pushPrefEnv({
+    set: [ ['ui.primaryPointerCapabilities', NO_POINTER] ]
+  });
+
+  ok(matchMedia("(pointer: none)").matches, "Matches (pointer: none)");
+  ok(!matchMedia("(pointer: coarse)").matches,
+                 "Doesn't match (pointer: coarse)");
+  ok(!matchMedia("(pointer: fine)").matches, "Doesn't match (pointer: fine)");
+  ok(!matchMedia("(pointer)").matches, "Matches (pointer)");
+
+  ok(matchMedia("(hover: none)").matches, "Matches (hover: none)");
+  ok(!matchMedia("(hover: hover)").matches, "Doesn't match (hover: hover)");
+  ok(!matchMedia("(hover)").matches, "Doesn't match (hover)");
+});
+
+add_task(async () => {
+  // Mouse type pointer.
+  await SpecialPowers.pushPrefEnv({
+    set: [ ['ui.primaryPointerCapabilities', FINE_POINTER | HOVER_CAPABLE_POINTER] ]
+  });
+
+  ok(!matchMedia("(pointer: none)").matches,
+                 "Doesn't match (pointer: none)");
+  ok(!matchMedia("(pointer: coarse)").matches,
+                 "Doesn't match (pointer: coarse)");
+  ok(matchMedia("(pointer: fine)").matches, "Matches (pointer: fine)");
+  ok(matchMedia("(pointer)").matches, "Matches (pointer)");
+
+  ok(!matchMedia("(hover: none)").matches, "Doesn't match (hover: none)");
+  ok(matchMedia("(hover: hover)").matches, "Matches (hover: hover)");
+  ok(matchMedia("(hover)").matches, "Matches (hover)");
+});
+
+add_task(async () => {
+  // Mouse type pointer.
+  await SpecialPowers.pushPrefEnv({
+    set: [ ['ui.primaryPointerCapabilities',
+            FINE_POINTER |
+            HOVER_CAPABLE_POINTER] ]
+  });
+
+  ok(!matchMedia("(pointer: none)").matches,
+                 "Doesn't match (pointer: none)");
+  ok(!matchMedia("(pointer: coarse)").matches,
+                 "Doesn't match (pointer: coarse)");
+  ok(matchMedia("(pointer: fine)").matches, "Matches (pointer: fine)");
+  ok(matchMedia("(pointer)").matches, "Matches (pointer)");
+
+  ok(!matchMedia("(hover: none)").matches, "Doesn't match (hover: none)");
+  ok(matchMedia("(hover: hover)").matches, "Matches (hover: hover)");
+  ok(matchMedia("(hover)").matches, "Matches (hover)");
+});
+
+add_task(async () => {
+  // Touch screen.
+  await SpecialPowers.pushPrefEnv({
+    set: [ ['ui.primaryPointerCapabilities', COARSE_POINTER] ]
+  });
+
+  ok(!matchMedia("(pointer: none)").matches, "Doesn't match (pointer: none)");
+  ok(matchMedia("(pointer: coarse)").matches, "Matches (pointer: coarse)");
+  ok(!matchMedia("(pointer: fine)").matches, "Doesn't match (pointer: fine)");
+  ok(matchMedia("(pointer)").matches, "Matches (pointer)");
+
+  ok(matchMedia("(hover: none)").matches, "Match (hover: none)");
+  ok(!matchMedia("(hover: hover)").matches, "Doesn't match (hover: hover)");
+  ok(!matchMedia("(hover)").matches, "Doesn't match (hover)");
+});
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_mq_prefers_contrast_dynamic.html b/layout/style/test/test_mq_prefers_contrast_dynamic.html
new file mode 100644
index 0000000000..c3ccebbe82
--- /dev/null
+++ b/layout/style/test/test_mq_prefers_contrast_dynamic.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1691793
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1691793</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=1691793">Mozilla Bug 1691793</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+<script>
+"use strict";
+
+SimpleTest.registerCleanupFunction(async () => {
+  await SpecialPowers.flushPrefEnv();
+});
+
+// Returns a Promise which will be resolved when the "change" event is received
+// for the given media query string.
+function promiseForChange(mediaQuery) {
+  return new Promise(resolve => {
+    window.matchMedia(mediaQuery).addEventListener("change", event => {
+      resolve(event.matches);
+    }, { once: true });
+  });
+}
+
+add_task(async () => {
+  await SpecialPowers.pushPrefEnv({ set: [["layout.css.prefers-contrast.enabled", true]]});
+  const initiallyMatches =
+    window.matchMedia("(prefers-contrast: more)").matches;
+  const changePromise = initiallyMatches ?
+    promiseForChange("(prefers-contrast: more)") : null;
+  await SpecialPowers.pushPrefEnv({ set: [["ui.useAccessibilityTheme", 0]]});
+
+  if (changePromise) {
+    await changePromise;
+  }
+
+  ok(!window.matchMedia("(prefers-contrast: more)").matches,
+     "Does not match prefers-contrast: more) when the system unsets " +
+     "UseAccessibilityTheme");
+  ok(!window.matchMedia("(prefers-contrast)").matches,
+     "Does not match (prefers-contrast) when the system unsets " +
+     "UseAccessibilityTheme");
+  ok(window.matchMedia("(prefers-contrast: no-preference)").matches,
+     "Matches (prefers-contrast: no-preference) when the system unsets " +
+     "UseAccessibilityTheme");
+});
+
+add_task(async () => {
+  const more = promiseForChange("(prefers-contrast: more)");
+  const booleanContext = promiseForChange("(prefers-contrast)");
+  const noPreference = promiseForChange("(prefers-contrast: no-preference)");
+
+  await SpecialPowers.pushPrefEnv({ set: [["ui.useAccessibilityTheme", 1]]});
+
+  const [ moreResult, booleanContextResult, noPreferenceResult ] =
+    await Promise.all([ more, booleanContext, noPreference ]);
+
+  ok(moreResult,
+     "Matches (prefers-contrast: more) when the system sets " +
+     "UseAccessibilityTheme");
+  ok(booleanContextResult,
+     "Matches (prefers-contrast) when the system sets UseAccessibilityTheme");
+  ok(!noPreferenceResult,
+     "Does not match (prefers-contrast: no-preference) when the " +
+     "system sets UseAccessibilityTheme");
+});
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_mq_prefers_reduced_motion_dynamic.html b/layout/style/test/test_mq_prefers_reduced_motion_dynamic.html
new file mode 100644
index 0000000000..570c0d3954
--- /dev/null
+++ b/layout/style/test/test_mq_prefers_reduced_motion_dynamic.html
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1486971
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1478519</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=1486971">Mozilla Bug 1486971</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+<script>
+'use strict';
+
+async function waitForFrame() {
+  return new Promise(resolve => {
+    window.requestAnimationFrame(resolve);
+  });
+}
+
+// Returns a Promise which will be resolved when the 'change' event is received
+// for the given media query string.
+async function promiseForChange(mediaQuery) {
+  return new Promise(resolve => {
+    window.matchMedia(mediaQuery).addEventListener('change', event => {
+      resolve(event.matches);
+    }, { once: true });
+  });
+}
+
+add_task(async () => {
+  const initiallyMatches =
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  const changePromise = initiallyMatches ? promiseForChange('(prefers-reduced-motion: reduce)') : null;
+
+  await SpecialPowers.pushPrefEnv({ set: [['ui.prefersReducedMotion', 0]]});
+
+  if (changePromise) {
+    await changePromise;
+  }
+
+  ok(!window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+     'Does not matches prefers-reduced-motion: reduced) when the system sets ' +
+     'prefers-reduced-motion false');
+  ok(!window.matchMedia('(prefers-reduced-motion)').matches,
+     'Does not matches (prefers-reduced-motion) when the system sets ' +
+     'prefers-reduced-motion false');
+  ok(window.matchMedia('(prefers-reduced-motion: no-preference)').matches,
+     'Matches (prefers-reduced-motion: no-preference) when the system sets ' +
+     'prefers-reduced-motion false');
+});
+
+add_task(async () => {
+  const reduce = promiseForChange('(prefers-reduced-motion: reduce)');
+  const booleanContext = promiseForChange('(prefers-reduced-motion)');
+  const noPreference = promiseForChange('(prefers-reduced-motion: no-preference)');
+
+  await SpecialPowers.pushPrefEnv({ set: [['ui.prefersReducedMotion', 1]]});
+
+  const [ reduceResult, booleanContextResult, noPreferenceResult ] =
+    await Promise.all([ reduce, booleanContext, noPreference ]);
+
+  ok(reduceResult,
+     'Matches (prefers-reduced-motion: reduced) when the system sets ' +
+     'prefers-reduced-motion true');
+  ok(booleanContextResult,
+     'Matches (prefers-reduced-motion) when the system sets ' +
+     'prefers-reduced-motion true');
+  ok(!noPreferenceResult,
+     'Does not matches (prefers-reduced-motion: no-preference) when the ' +
+     'system sets prefers-reduced-motion true');
+
+  await SpecialPowers.flushPrefEnv();
+});
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_mql_event_listener_leaks.html b/layout/style/test/test_mql_event_listener_leaks.html
new file mode 100644
index 0000000000..3ceb5412a2
--- /dev/null
+++ b/layout/style/test/test_mql_event_listener_leaks.html
@@ -0,0 +1,43 @@
+<!--
+  Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Bug 1450271 - Test MediaQueryList event listener leak conditions</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="/tests/dom/events/test/event_leak_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<script class="testbody" type="text/javascript">
+// Manipulate MediaQueryList.  Its important here that we create a
+// listener callback from the DOM objects back to the frame's global
+// in order to exercise the leak condition.
+async function useMediaQuery(contentWindow) {
+  contentWindow.messageCount = 0;
+
+  let mql = contentWindow.matchMedia("(max-width: 600px)");
+  mql.onchange = _ => {
+    contentWindow.mediaCount += 1;
+  };
+}
+
+async function runTest() {
+  try {
+    await checkForEventListenerLeaks("MediaQueryList", useMediaQuery);
+  } catch (e) {
+    ok(false, e);
+  } finally {
+    SimpleTest.finish();
+  }
+}
+
+SimpleTest.waitForExplicitFinish();
+addEventListener("load", runTest, { once: true });
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/layout/style/test/test_namespace_rule.html b/layout/style/test/test_namespace_rule.html
new file mode 100644
index 0000000000..6e8ba52c90
--- /dev/null
+++ b/layout/style/test/test_namespace_rule.html
@@ -0,0 +1,461 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for CSS Namespace rules</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body onload="run()">
+<p id="display"><iframe id="iframe" src="data:application/xhtml+xml,<html%20xmlns='http://www.w3.org/1999/xhtml'><head/><body/></html>"></iframe></p>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+SimpleTest.waitForExplicitFinish();
+
+var HTML_NS = "http://www.w3.org/1999/xhtml";
+
+function run() {
+    var wrappedFrame = SpecialPowers.wrap($("iframe"));
+    var ifwin = wrappedFrame.contentWindow;
+    var ifdoc = wrappedFrame.contentDocument;
+    var ifbody = ifdoc.getElementsByTagName("body")[0];
+
+    function setup_style_text() {
+        var style_elem = ifdoc.createElement("style");
+        style_elem.setAttribute("type", "text/css");
+        ifdoc.getElementsByTagName("head")[0].appendChild(style_elem);
+        let style_text = ifdoc.createCDATASection("");
+        style_elem.appendChild(style_text);
+        return style_text;
+    }
+
+    let style_text = setup_style_text();
+    var gCounter = 0;
+
+    /*
+     * namespaceRules: the @namespace rules to use
+     * selector: the selector to test
+     * body_contents: what to set the body's innerHTML to
+     * match_fn: a function that, given the document object into which
+     *   body_contents has been inserted, produces an array of nodes that
+     *   should match selector
+     * notmatch_fn: likewise, but for nodes that should not match
+     */
+    function test_selector_in_html(namespaceRules, selector, body_contents,
+                                   match_fn, notmatch_fn)
+    {
+        var zi = ++gCounter;
+        if (typeof(body_contents) == "string") {
+            ifbody.innerHTML = body_contents;
+        } else {
+            // It's a function.
+            ifbody.innerHTML = "";
+            body_contents(ifbody);
+        }
+        style_text.data =
+          namespaceRules + " " + selector + "{ z-index: " + zi + " }";
+        var should_match = match_fn(ifdoc);
+        var should_not_match = notmatch_fn(ifdoc);
+        if (should_match.length + should_not_match.length == 0) {
+            ok(false, "nothing to check");
+        }
+
+        for (var i = 0; i < should_match.length; ++i) {
+            var e = should_match[i];
+            is(ifwin.getComputedStyle(e).zIndex, String(zi),
+               "element in " + body_contents + " matched " + selector);
+        }
+        for (var i = 0; i < should_not_match.length; ++i) {
+            var e = should_not_match[i];
+            is(ifwin.getComputedStyle(e).zIndex, "auto",
+               "element in " + body_contents + " did not match " + selector);
+        }
+
+        // Now, since we're here, may as well make sure serialization
+        // works correctly.  It need not produce the exact same text,
+        // but it should produce a selector that matches the same
+        // elements.
+        zi = ++gCounter;
+        var ruleList = style_text.parentNode.sheet.cssRules;
+        var ser1 = ruleList[ruleList.length-1].selectorText;
+        style_text.data =
+          namespaceRules + " " + ser1 + "{ z-index: " + zi + " }";
+        for (var i = 0; i < should_match.length; ++i) {
+            var e = should_match[i];
+            is(ifwin.getComputedStyle(e).zIndex, String(zi),
+               "element in " + body_contents + " matched " + ser1 +
+               " which is the reserialization of " + selector);
+        }
+        for (var i = 0; i < should_not_match.length; ++i) {
+            var e = should_not_match[i];
+            is(ifwin.getComputedStyle(e).zIndex, "auto",
+               "element in " + body_contents + " did not match " + ser1 +
+               " which is the reserialization of " + selector);
+        }
+
+        // But when we serialize the serialized result, we should get
+        // the same text.
+        var ser2 = ruleList[ruleList.length-1].selectorText;
+        is(ser2, ser1, "parse+serialize of selector \"" + selector +
+                       "\" is idempotent");
+
+        ifbody.innerHTML = "";
+        style_text.data = "";
+    }
+
+    // 2 tests from http://tc.labs.opera.com/css/namespaces/prefix-001.xml
+    test_selector_in_html(
+      '@namespace foo "x"; @namespace Foo "y";',
+      'Foo|test',
+      '<test xmlns="y"/>',
+      function (doc) { return doc.getElementsByTagName("test"); },
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace foo "x"; @namespace Foo "y";',
+      'foo|test',
+      '<test xmlns="y"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    // 2 tests from http://tc.labs.opera.com/css/namespaces/prefix-002.xml
+    test_selector_in_html(
+      '@namespace foo "";',
+      'test',
+      '<test xmlns=""/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace foo "";',
+      'foo|test',
+      '<test xmlns=""/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    // 2 tests from http://tc.labs.opera.com/css/namespaces/prefix-003.xml
+    test_selector_in_html(
+      '@namespace foo "";',
+      'test',
+      '<foo xmlns=""><test/></foo>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace foo "";',
+      'foo|test',
+      '<foo xmlns=""><test/></foo>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    // 4 tests from http://tc.labs.opera.com/css/namespaces/prefix-004.xml
+    test_selector_in_html(
+      '@namespace ""; @namespace x "test";',
+      'test[x]',
+      '<foo xmlns=""><test x=""/></foo>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace ""; @namespace x "test";',
+      '*|test',
+      '<foo xmlns=""><test x=""/></foo>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace ""; @namespace x "test";',
+      '*|test',
+      '<test xmlns="test"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace ""; @namespace x "test";',
+      'test',
+      '<test xmlns="test"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    // 2 tests from http://tc.labs.opera.com/css/namespaces/prefix-005.xml
+    test_selector_in_html(
+      '@namespace x "test";',
+      'test',
+      '<test/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace x "test";',
+      'test',
+      '<test xmlns="test"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    // Skipping the scope tests because they involve import, and we have no way
+    // to know when the import load completes.
+
+    // 1 test from http://tc.labs.opera.com/css/namespaces/syntax-001.xml
+    test_selector_in_html(
+      '@NAmespace x "http://www.w3.org/1999/xhtml";',
+      'x|test',
+      '<test/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    // 1 test from http://tc.labs.opera.com/css/namespaces/syntax-002.xml
+    test_selector_in_html(
+      '@NAmespac\\65  x "http://www.w3.org/1999/xhtml";',
+      'x|test',
+      '<test/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    // 3 tests from http://tc.labs.opera.com/css/namespaces/syntax-003.xml
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|test',
+      '<test xmlns="test"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      'test',
+      '<test xmlns="test"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      'test',
+      '<test/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    // 3 tests from http://tc.labs.opera.com/css/namespaces/syntax-004.xml
+    test_selector_in_html(
+      '@namespace u\\00072l("test");',
+      '*|test',
+      '<test xmlns="test"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace u\\00072l("test");',
+      'test',
+      '<test xmlns="test"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace u\\00072l("test");',
+      'test',
+      '<test/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    // Skipping http://tc.labs.opera.com/css/namespaces/syntax-005.xml because it
+    // involves import, and we have no way // to know when the import load completes.
+
+    // Skipping http://tc.labs.opera.com/css/namespaces/syntax-006.xml because it
+    // involves import, and we have no way // to know when the import load completes.
+
+    // 2 tests from http://tc.labs.opera.com/css/namespaces/syntax-007.xml
+    test_selector_in_html(
+      '@charset "x"; @namespace url("test"); @namespace url("test2");',
+      '*|test',
+      '<test xmlns="test"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@charset "x"; @namespace url("test"); @namespace url("test2");',
+      'test',
+      '<test xmlns="test"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    // 2 tests from http://tc.labs.opera.com/css/namespaces/syntax-008.xml
+    test_selector_in_html(
+      '@namespace \\72x url("test");',
+      'rx|test',
+      '<test xmlns="test"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace \\72x url("test");',
+      'test',
+      '<test xmlns="test"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    // And now some :not() tests
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|*:not(test)',
+      '<test xmlns="test"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|*:not(test)',
+      '<test xmlns="testing"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace x url("test");',
+      '*|*:not(x|test)',
+      '<test xmlns="test"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    test_selector_in_html(
+      '@namespace x url("test");',
+      '*|*:not(x|test)',
+      '<test xmlns="testing"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|*:not(*)',
+      '<test xmlns="testing"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|*:not(*)',
+      '<test xmlns="test"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    test_selector_in_html(
+      '@namespace x url("test");',
+      '*|*:not(x|*)',
+      '<test xmlns="testing"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace x url("test");',
+      '*|*:not(x|*)',
+      '<test xmlns="test"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|*:not([foo])',
+      '<test xmlns="testing" foo="bar"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|*:not([foo])',
+      '<test xmlns="test" foo="bar"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|*[foo]',
+      '<test foo="bar"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|*[|foo]',
+      '<test foo="bar"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace test url("test");',
+      '*|*[test|foo]',
+      '<test foo="bar"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    test_selector_in_html(
+      '@namespace test url("test");',
+      '*|*[test|foo]',
+      '<test xmlns:t="test" t:foo="bar"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|*[foo]',
+      '<test xmlns:t="test" t:foo="bar"/>',
+      function (doc) { return []; },
+      function (doc) { return doc.getElementsByTagName("test");}
+    );
+
+    test_selector_in_html(
+      '@namespace url("test");',
+      '*|*[*|foo]',
+      '<test xmlns:t="test" t:foo="bar"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    test_selector_in_html(
+      '',
+      '*|*[*|foo]',
+      '<test xmlns:t="test" t:foo="bar"/>',
+      function (doc) { return doc.getElementsByTagName("test");},
+      function (doc) { return []; }
+    );
+
+    SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_non_content_accessible_env_vars.html b/layout/style/test/test_non_content_accessible_env_vars.html
new file mode 100644
index 0000000000..f3fa474300
--- /dev/null
+++ b/layout/style/test/test_non_content_accessible_env_vars.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<iframe></iframe>
+<iframe srcdoc="Foo"></iframe>
+<script>
+const NON_CONTENT_ACCESSIBLE_ENV_VARS = [
+  "-moz-gtk-csd-titlebar-radius",
+  "-moz-gtk-csd-minimize-button-position",
+  "-moz-gtk-csd-maximize-button-position",
+  "-moz-gtk-csd-close-button-position",
+  "-moz-content-preferred-color-scheme",
+  "scrollbar-inline-size",
+];
+
+function testInWin(win) {
+  let doc = win.document;
+  const div = doc.createElement("div");
+  doc.documentElement.appendChild(div);
+  for (const envVar of NON_CONTENT_ACCESSIBLE_ENV_VARS) {
+    div.style.setProperty("--foo", `env(${envVar},FALLBACK_VALUE)`);
+
+    assert_equals(
+      win.getComputedStyle(div).getPropertyValue("--foo"),
+      "FALLBACK_VALUE",
+      `${envVar} shouldn't be exposed to content in ${doc.documentURI}`
+    );
+  }
+}
+
+let t = async_test("Test non-content-accessible env() vars");
+onload = t.step_func_done(function() {
+  testInWin(window);
+  for (let f of document.querySelectorAll("iframe")) {
+    testInWin(f.contentWindow);
+  }
+});
+</script>
diff --git a/layout/style/test/test_non_content_accessible_properties.html b/layout/style/test/test_non_content_accessible_properties.html
new file mode 100644
index 0000000000..0b3e22981f
--- /dev/null
+++ b/layout/style/test/test_non_content_accessible_properties.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<iframe></iframe>
+<iframe srcdoc="Foo"></iframe>
+<script>
+const NON_CONTENT_ACCESSIBLE_PROPERTIES = [
+  "-x-span",
+  "-x-lang",
+  "-x-text-scale",
+  "-moz-window-input-region-margin",
+  "-moz-window-shadow",
+  "-moz-window-opacity",
+  "-moz-window-transform",
+  "-moz-window-transform-origin",
+  "-moz-top-layer",
+  "-moz-script-size-multiplier",
+  "-moz-script-level",
+  "-moz-math-display",
+  "-moz-math-variant",
+  "-moz-script-min-size",
+  "-moz-font-smoothing-background-color",
+  "-moz-min-font-size-ratio",
+  "-moz-script-size-multiplier",
+  "-moz-default-appearance",
+  "-moz-inert",
+  "-moz-control-character-visibility",
+  "-moz-context-properties",
+];
+
+function testInWin(win) {
+  const doc = win.document;
+  const sheet = doc.createElement("style");
+  const div = doc.createElement("div");
+  doc.documentElement.appendChild(sheet);
+  doc.documentElement.appendChild(div);
+
+  sheet.textContent = `div { color: initial }`;
+  assert_equals(sheet.sheet.cssRules[0].style.length, 1, `sanity: ${doc.documentURI}`);
+
+  for (const prop of NON_CONTENT_ACCESSIBLE_PROPERTIES) {
+    sheet.textContent = `div { ${prop}: initial }`;
+    let block = sheet.sheet.cssRules[0].style;
+    assert_equals(
+      block.length,
+      0,
+      `${prop} shouldn't be parsed in ${doc.documentURI}`
+    );
+    block.setProperty(prop, "initial");
+    assert_equals(
+      block.length,
+      0,
+      `${prop} shouldn't be settable via CSSOM in ${doc.documentURI}`
+    );
+    assert_equals(
+      win.getComputedStyle(div).getPropertyValue(prop),
+      "",
+      `${prop} shouldn't be accessible via CSSOM in ${doc.documentURI}`
+    );
+    assert_false(
+      win.CSS.supports(prop + ': initial'),
+      `${prop} shouldn't be exposed in CSS.supports in ${doc.documentURI}`
+    );
+    assert_false(
+      win.CSS.supports(prop, 'initial'),
+      `${prop} shouldn't be exposed in CSS.supports in ${doc.documentURI} (2-value version)`
+    );
+  }
+}
+
+let t = async_test("test non-content-accessible props");
+onload = t.step_func_done(function() {
+  testInWin(window);
+  for (let f of document.querySelectorAll("iframe")) {
+    testInWin(f.contentWindow);
+  }
+});
+</script>
diff --git a/layout/style/test/test_non_content_accessible_pseudos.html b/layout/style/test/test_non_content_accessible_pseudos.html
new file mode 100644
index 0000000000..2ccefc2f48
--- /dev/null
+++ b/layout/style/test/test_non_content_accessible_pseudos.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style id="sheet"></style>
+<script>
+// Even though some of these no longer exist, we still do want to test that
+// they aren't exposed to the web.
+const NON_CONTENT_ACCESIBLE_PSEUDOS = [
+  "::-moz-complex-control-wrapper",
+  "::-moz-number-wrapper",
+  "::-moz-number-text",
+  "::-moz-number-spin-up",
+  "::-moz-number-spin-down",
+  "::-moz-number-spin-box",
+  "::-moz-search-clear-button",
+
+  ":-moz-native-anonymous",
+  ":-moz-use-shadow-tree-root",
+  ":-moz-table-border-nonzero",
+  ":-moz-browser-frame",
+  ":-moz-devtools-highlighted",
+  ":-moz-styleeditor-transitioning",
+  ":-moz-handler-clicktoplay",
+  ":-moz-handler-vulnerable-updatable",
+  ":-moz-handler-vulnerable-no-update",
+  ":-moz-handler-disabled",
+  ":-moz-handler-blocked",
+  ":-moz-handler-chrased",
+  ":-moz-has-dir-attr",
+  ":-moz-dir-attr-ltr",
+  ":-moz-dir-attr-rtl",
+  ":-moz-dir-attr-like-auto",
+  ":-moz-autofill-preview",
+  ":-moz-lwtheme",
+  ":-moz-locale-dir(rtl)",
+  ":-moz-locale-dir(ltr)",
+
+  "::-moz-tree-row",
+  "::-moz-tree-row(foo)",
+];
+
+test(function() {
+  sheet.textContent = `div { color: initial }`;
+  assert_equals(sheet.sheet.cssRules.length, 1);
+}, "sanity");
+
+for (const pseudo of NON_CONTENT_ACCESIBLE_PSEUDOS) {
+  test(function() {
+    sheet.textContent = `${pseudo} { color: blue; }`;
+    assert_equals(sheet.sheet.cssRules.length, 0,
+      pseudo + " shouldn't be accessible to content");
+    if (pseudo.indexOf("::") === 0) {
+      let pseudoStyle;
+      try {
+        pseudoStyle = getComputedStyle(document.documentElement, pseudo);
+      } catch (ex) {
+        // We can hit this when layout.css.computed-style.throw-on-invalid-pseudo is true
+        assert_true(true, `${pseudo} shouldn't be visible to content`);
+        return;
+      }
+      let elementStyle = getComputedStyle(document.documentElement);
+      for (prop of pseudoStyle) {
+        assert_equals(pseudoStyle[prop], elementStyle[prop],
+                      pseudo + " styles shouldn't be visible from getComputedStyle");
+      }
+    }
+  }, pseudo);
+}
+</script>
diff --git a/layout/style/test/test_non_content_accessible_values.html b/layout/style/test/test_non_content_accessible_values.html
new file mode 100644
index 0000000000..7ba1cf9f05
--- /dev/null
+++ b/layout/style/test/test_non_content_accessible_values.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style id="sheet"></style>
+<div></div>
+<script>
+const NON_CONTENT_ACCESSIBLE_VALUES = {
+  "color": [
+    "-moz-buttonactivetext",
+    "-moz-buttonactiveface",
+    "-moz-buttondisabledface",
+    "-moz-disabledfield",
+    "-moz-colheaderhovertext",
+    "-moz-colheadertext",
+    "-moz-nativevisitedhyperlinktext",
+    "text-select-disabled-background",
+    "text-select-attention-background",
+    "text-select-attention-foreground",
+    "-moz-autofill-background",
+  ],
+  "display": [
+    "-moz-box",
+    "-moz-inline-box",
+  ],
+  "font": [
+      "-moz-pull-down-menu",
+      "-moz-button",
+      "-moz-list",
+      "-moz-field",
+  ],
+  "-moz-appearance": [
+    "button-arrow-down",
+    "button-arrow-next",
+    "button-arrow-previous",
+    "button-arrow-up",
+    "button-focus",
+    "dualbutton",
+    "groupbox",
+    "menubar",
+    "menuitem",
+    "checkmenuitem",
+    "radiomenuitem",
+    "menuitemtext",
+    "menupopup",
+    "menucheckbox",
+    "menuradio",
+    "menuseparator",
+    "menuarrow",
+    "menuimage",
+    "-moz-menulist-arrow-button",
+    "checkbox-container",
+    "radio-container",
+    "checkbox-label",
+    "radio-label",
+    "resizerpanel",
+    "resizer",
+    "scrollbar",
+    "scrollbar-small",
+    "scrollbar-horizontal",
+    "scrollbar-vertical",
+    "scrollbarbutton-up",
+    "scrollbarbutton-down",
+    "scrollbarbutton-left",
+    "scrollbarbutton-right",
+    "scrollcorner",
+    "separator",
+    "spinner",
+    "spinner-upbutton",
+    "spinner-downbutton",
+    "spinner-textfield",
+    "splitter",
+    "statusbar",
+    "statusbarpanel",
+    "tab",
+    "tabpanel",
+    "tabpanels",
+    "tab-scroll-arrow-back",
+    "tab-scroll-arrow-forward",
+    "toolbar",
+    "toolbarbutton",
+    "toolbarbutton-dropdown",
+    "toolbargripper",
+    "toolbox",
+    "tooltip",
+    "treeheader",
+    "treeheadercell",
+    "treeheadersortarrow",
+    "treeitem",
+    "treeline",
+    "treetwisty",
+    "treetwistyopen",
+    "treeview",
+    "window",
+    "dialog",
+    "-moz-win-communications-toolbox",
+    "-moz-win-media-toolbox",
+    "-moz-win-browsertabbar-toolbox",
+    "-moz-win-borderless-glass",
+    "-moz-win-exclude-glass",
+    "-moz-mac-help-button",
+    "-moz-window-button-box",
+    "-moz-window-button-box-maximized",
+    "-moz-window-button-close",
+    "-moz-window-button-maximize",
+    "-moz-window-button-minimize",
+    "-moz-window-button-restore",
+    "-moz-window-titlebar",
+    "-moz-window-titlebar-maximized",
+    "-moz-mac-active-source-list-selection",
+    "-moz-mac-disclosure-button-closed",
+    "-moz-mac-disclosure-button-open",
+    "-moz-mac-source-list",
+    "-moz-mac-source-list-selection",
+
+    "button-bevel",
+    "caret",
+    "listitem",
+    "menulist-textfield",
+    "menulist-text",
+  ],
+  "user-select": [
+    "-moz-text",
+  ],
+  "line-height": [
+    "-moz-block-height",
+  ],
+  "text-align": [
+    "-moz-center-or-inherit",
+  ],
+};
+
+const sheet = document.getElementById("sheet");
+const div = document.querySelector("div");
+
+test(function() {
+  sheet.textContent = `div { color: initial }`;
+  assert_equals(sheet.sheet.cssRules[0].style.length, 1);
+}, "sanity");
+
+for (const prop in NON_CONTENT_ACCESSIBLE_VALUES) {
+  const values = NON_CONTENT_ACCESSIBLE_VALUES[prop];
+  test(function() {
+    for (const value of values) {
+      sheet.textContent = `div { ${prop}: ${value} }`;
+      const block = sheet.sheet.cssRules[0].style;
+      assert_equals(
+        block.length,
+        0,
+        `${prop}: ${value} should not be parsed in content`
+      );
+      block.setProperty(prop, value);
+      assert_equals(
+        block.length,
+        0,
+        `${prop}: ${value} should not be settable via CSSOM in content`
+      );
+      div.style.setProperty(prop, value);
+      assert_equals(
+        div.style.length,
+        0,
+        `${prop}: ${value} should not be settable via CSSOM in content (inline style)`
+      );
+      assert_not_equals(
+        getComputedStyle(div).getPropertyValue(prop),
+        value,
+        `${prop}: ${value} should not be settable via CSSOM in content (gcs)`
+      );
+
+      assert_false(CSS.supports(prop, value), `${prop}: ${value} should not claim to be supported`)
+    }
+  }, prop + " non-accessible values: " + values.join(", "))
+}
+</script>
diff --git a/layout/style/test/test_non_matching_sheet_media.html b/layout/style/test/test_non_matching_sheet_media.html
new file mode 100644
index 0000000000..a57444df45
--- /dev/null
+++ b/layout/style/test/test_non_matching_sheet_media.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1386840 -->
+<title>Test for Bug 1386840: non-matching media list doesn't block rendering</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+var t = async_test("Test that <link> doesn't block rendering with non-matching media");
+var loadFired = false;
+var scriptExecuted = false;
+
+function sheetLoaded() {
+  loadFired = true;
+  assert_true(scriptExecuted, "Shouldn't wait for load to execute script");
+  t.done();
+}
+</script>
+<!--
+  NOTE(emilio): This can theoretically race if an HTTP packet boundary with a
+  very long delay came right after the link and before the script.  If this
+  ever becomes a problem, the way to fix this is using document.write() as
+  explained in bug 1386840 comment 12.
+-->
+<link rel="stylesheet" href="data:text/css,foo {}" media="print" onload="t.step(sheetLoaded)">
+<script>
+  t.step(function() {
+    scriptExecuted = true;
+    assert_false(loadFired, "Shouldn't have waited for load");
+  });
+</script>
diff --git a/layout/style/test/test_of_type_selectors.xhtml b/layout/style/test/test_of_type_selectors.xhtml
new file mode 100644
index 0000000000..edf2e6ee97
--- /dev/null
+++ b/layout/style/test/test_of_type_selectors.xhtml
@@ -0,0 +1,97 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=75375
+-->
+<head>
+  <title>Test for *-of-type selectors in Bug 75375</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=75375">Mozilla Bug 75375</a>
+<div id="content" style="display: none"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+
+<p>This is a <code>p</code> element in the HTML namespace.</p>
+<p>This is a second <code>p</code> element in the HTML namespace.</p>
+<html:p>This is an <code>html:p</code> element in the HTML namespace.</html:p>
+<p xmlns="http://www.example.com/ns">This is a <code>p</code> element in the <code>http://www.example.com/ns</code> namespace.</p>
+<html:address>This is an <code>html:address</code> element in the HTML namespace.</html:address>
+<address xmlns="">This is a <code>address</code> element in no namespace.</address>
+<address xmlns="">This is a <code>address</code> element in no namespace.</address>
+<p xmlns="">This is a <code>p</code> element in no namespace.</p>
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+<![CDATA[
+
+/** Test for *-of-type selectors in Bug 75375 **/
+
+var HTML_NS = "http://www.w3.org/1999/xhtml";
+
+function setup_style_text() {
+    var result = document.createCDATASection("");
+    var style = document.createElementNS(HTML_NS, "style");
+    style.appendChild(result);
+    document.getElementsByTagName("head")[0].appendChild(style);
+    return result;
+}
+
+function run() {
+    var styleText = setup_style_text();
+
+    var elements = [];
+
+    var div = document.getElementById("content");
+    for (let i = 0; i < div.childNodes.length; ++i) {
+        var child = div.childNodes[i];
+        if (child.nodeType == Node.ELEMENT_NODE)
+            elements.push(child);
+    }
+
+    var counter = 0;
+
+    function test_selector(selector, match_indices, notmatch_indices)
+    {
+        var zi = ++counter;
+        styleText.data = selector + " { z-index: " + zi + " }";
+        let i;
+        for (i in match_indices) {
+            var e = elements[match_indices[i]];
+            is(getComputedStyle(e, "").zIndex, String(zi),
+               "element " + match_indices[i] + " matched " + selector);
+        }
+        for (i in notmatch_indices) {
+            var e = elements[notmatch_indices[i]];
+            is(getComputedStyle(e, "").zIndex, "auto",
+               "element " + notmatch_indices[i] + " did not match " + selector);
+        }
+    }
+
+    // 0 - html:p
+    // 1 - html:p
+    // 2 - html:p
+    // 3 - example:p
+    // 4 - html:address
+    // 5 - :address
+    // 6 - :address
+    // 7 - :p
+    test_selector(":nth-of-type(1)", [0, 3, 4, 5, 7], [1, 2, 6]);
+    test_selector(":nth-last-of-type(1)", [2, 3, 4, 6, 7], [0, 1, 5]);
+    test_selector(":nth-last-of-type(-n+1)", [2, 3, 4, 6, 7], [0, 1, 5]);
+    test_selector(":nth-of-type(even)", [1, 6], [0, 2, 3, 4, 5, 7]);
+    test_selector(":nth-last-of-type(odd)", [0, 2, 3, 4, 6, 7], [1, 5]);
+    test_selector(":nth-last-of-type(n+2)", [0, 1, 5], [2, 3, 4, 6, 7]);
+    test_selector(":first-of-type", [0, 3, 4, 5, 7], [1, 2, 6]);
+    test_selector(":last-of-type", [2, 3, 4, 6, 7], [0, 1, 5]);
+    test_selector(":only-of-type", [3, 4, 7], [0, 1, 2, 5, 6]);
+}
+
+run();
+
+]]>
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_overscroll_behavior_pref.html b/layout/style/test/test_overscroll_behavior_pref.html
new file mode 100644
index 0000000000..c12d4ce081
--- /dev/null
+++ b/layout/style/test/test_overscroll_behavior_pref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>Test pref for overscroll-behavior property</title>
+    <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  </head>
+<script class="testbody" type="text/javascript">
+function runTest() {
+  let css = "div { overscroll-behavior: auto; }";
+  let style = document.createElement('style');
+  style.appendChild(document.createTextNode(css));
+  document.head.appendChild(style);
+
+  is(document.styleSheets[0].cssRules[0].style.length,
+     0,
+     "overscroll-behavior shouldn't be parsed if the pref is off");
+  SimpleTest.finish();
+}
+SpecialPowers.pushPrefEnv({ set: [["layout.css.overscroll-behavior.enabled", false]] },
+                          runTest);
+SimpleTest.waitForExplicitFinish();
+</script>
+</html>
diff --git a/layout/style/test/test_page_parser.html b/layout/style/test/test_page_parser.html
new file mode 100644
index 0000000000..6f6860d0f2
--- /dev/null
+++ b/layout/style/test/test_page_parser.html
@@ -0,0 +1,93 @@
+<!DOCTYPE HTML>
+<html>
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=115199 -->
+<head>
+  <meta charset="UTF-8">
+  <title>Test of @page parser</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<p>@page parsing (<a
+  target="_blank"
+  href="https://bugzilla.mozilla.org/show_bug.cgi?id=115199"
+>bug 115199</a>)</p>
+<pre id="display"></pre>
+<style type="text/css" id="testbox"></style>
+<script class="testbody" type="text/javascript">
+  function _(b) { return "@page { " + b + " }"; };
+
+  var testset = [
+    // CSS 2.1 only allows margin properties in the page rule.
+
+    // Check a bad property.
+    { rule: _("position: absolute;") },
+
+    // Check good properties with invalid units.
+    { rule: _("margin: 2in; margin: 2vw;"), expected: {
+      "margin-top": "2in",
+      "margin-right": "2in",
+      "margin-bottom": "2in",
+      "margin-left": "2in"
+    }},
+    { rule: _("margin-top: 2in; margin-top: 2vw;"), expected: {"margin-top": "2in"}},
+    { rule: _("margin-top: 2in; margin-top: 2vh;"), expected: {"margin-top": "2in"}},
+    { rule: _("margin-top: 2in; margin-top: 2vmax;"), expected: {"margin-top": "2in"}},
+    { rule: _("margin-top: 2in; margin-top: 2vmin;"), expected: {"margin-top": "2in"}},
+
+    // Check good properties.
+    { rule: _("margin: 2in;"), expected: {
+      "margin-top": "2in",
+      "margin-right": "2in",
+      "margin-bottom": "2in",
+      "margin-left": "2in"
+    }},
+    { rule: _("margin-top: 2in;"), expected: {"margin-top": "2in"}},
+    { rule: _("margin-left: 2in;"), expected: {"margin-left": "2in"}},
+    { rule: _("margin-bottom: 2in;"), expected: {"margin-bottom": "2in"}},
+    { rule: _("margin-right: 2in;"), expected: {"margin-right": "2in"}}
+  ];
+
+  var display = document.getElementById("display");
+  var sheet = document.styleSheets[1];
+
+  for (var curTest = 0; curTest < testset.length; curTest++) {
+    while(sheet.cssRules.length > 0) {
+      sheet.deleteRule(0);
+    }
+    sheet.insertRule(testset[curTest].rule, 0);
+
+    try {
+      is(sheet.cssRules.length, 1,
+          testset[curTest].rule + " rule count");
+      is(sheet.cssRules[0].type, CSSRule.PAGE_RULE,
+          testset[curTest].rule + " rule type");
+
+      if (testset[curTest].expected) {
+        var expected = testset[curTest].expected;
+        var s = sheet.cssRules[0].style;
+        var n = 0;
+
+        // everything is set that should be
+        for (var name in expected) {
+          is(s.getPropertyValue(name), expected[name],
+             testset[curTest].rule + " (prop " + name + ")");
+          n++;
+        }
+        // nothing else is set
+        is(s.length, n, testset[curTest].rule + " prop count");
+        for (var i = 0; i < s.length; i++) {
+          ok(s[i] in expected, testset[curTest].rule +
+             " - Unexpected item #" + i + ": " + s[i]);
+        }
+      } else {
+        is(Object.keys(sheet.cssRules[0].style).length, 0,
+            testset[curTest].rule + " rule has no properties");
+      }
+    } catch (e) {
+      ok(false, testset[curTest].rule + " - During test: " + e);
+    }
+  }
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_parse_eof.html b/layout/style/test/test_parse_eof.html
new file mode 100644
index 0000000000..63ef95b980
--- /dev/null
+++ b/layout/style/test/test_parse_eof.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>Test parsing behaviour of backslash just before EOF</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+  <meta name="flags" content="">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+
+<style>#a::before { content: "ab\</style>
+<style>#b { background-image: url("ab\</style>
+<style>#c { background-image: url(ab\</style>
+<style>#d { counter-reset: ab\</style>
+
+<style>
+#a-ref::before { content: "ab"; }
+#b-ref { background-image: url("ab"); }
+#c-ref { background-image: url(ab�); }
+#d-ref { counter-reset: ab�; }
+</style>
+
+<div style="display: none">
+  <div id="a"></div>
+  <div id="b"></div>
+  <div id="c"></div>
+  <div id="d"></div>
+
+  <div id="a-ref"></div>
+  <div id="b-ref"></div>
+  <div id="c-ref"></div>
+  <div id="d-ref"></div>
+</div>
+
+<script>
+var a = document.getElementById("a");
+var b = document.getElementById("b");
+var c = document.getElementById("c");
+var d = document.getElementById("d");
+var a_ref = document.getElementById("a-ref");
+var b_ref = document.getElementById("b-ref");
+var c_ref = document.getElementById("c-ref");
+var d_ref = document.getElementById("d-ref");
+
+test(function() {
+  assert_equals(window.getComputedStyle(a, ":before").content,
+                window.getComputedStyle(a_ref, ":before").content);
+}, "test backslash before EOF inside a string");
+
+test(function() {
+  assert_equals(window.getComputedStyle(b).backgroundImage,
+                window.getComputedStyle(b_ref).backgroundImage);
+}, "test backslash before EOF inside a url(\"\")");
+
+test(function() {
+  assert_equals(window.getComputedStyle(c).backgroundImage,
+                window.getComputedStyle(c_ref).backgroundImage);
+}, "test backslash before EOF inside a url()");
+
+test(function() {
+  assert_equals(window.getComputedStyle(d).counterReset,
+                window.getComputedStyle(d_ref).counterReset);
+}, "test backslash before EOF outside a string");
+</script>
+
+</body>
+</html>
diff --git a/layout/style/test/test_parse_ident.html b/layout/style/test/test_parse_ident.html
new file mode 100644
index 0000000000..390412e2fc
--- /dev/null
+++ b/layout/style/test/test_parse_ident.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for CSS identifier parsing</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=">Mozilla Bug </a>
+<div id="content" style="display: none">
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+var div = document.getElementById("content");
+
+function counter_increment_parses(i)
+{
+  div.style.counterIncrement = "";
+  div.style.counterIncrement = i;
+  return div.style.counterIncrement != "";
+}
+
+function is_valid_identifier(i)
+{
+  ok(counter_increment_parses(i),
+     "'" + i + "' is a valid CSS identifier");
+}
+
+function is_invalid_identifier(i)
+{
+  ok(!counter_increment_parses(i),
+     "'" + i + "' is not a valid CSS identifier");
+}
+
+for (var i = 0x7B; i < 0x80; ++i) {
+  is_invalid_identifier(String.fromCharCode(i));
+  is_invalid_identifier("a" + String.fromCharCode(i));
+  is_invalid_identifier(String.fromCharCode(i) + "a");
+}
+
+for (var i = 0x80; i < 0xFF; ++i) {
+  is_valid_identifier(String.fromCharCode(i));
+}
+
+is_valid_identifier(String.fromCharCode(0x100));
+is_valid_identifier(String.fromCharCode(0x375));
+is_valid_identifier(String.fromCharCode(0xFEFF));
+is_valid_identifier(String.fromCharCode(0xFFFD));
+is_valid_identifier(String.fromCharCode(0xFFFE));
+is_valid_identifier(String.fromCharCode(0xFFFF));
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_parse_rule.html b/layout/style/test/test_parse_rule.html
new file mode 100644
index 0000000000..0fb1cc80ed
--- /dev/null
+++ b/layout/style/test/test_parse_rule.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang=en>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<body>
+<iframe></iframe>
+<!-- Note that the following style and div elements are duplicates
+     of the ones written into the iframe; they are here for convienience
+     in resolving the "standard" computed value for a given specification
+-->
+<style></style>
+<div id=a class='a b c' title='zxcv weeqweqeweasd&#13;&#10;a&#10;'></div>
+<script>
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(2);
+
+window.onload=function(){
+
+var base;
+
+// A short note about escaping: all of the strings in this test go through
+// Javascript unescaping before getting passed to CSS.  This means that
+// sequences like "\n" refer to a newline, a single backslash is written "\\",
+// a CSS escape sequence is something like "\\A", and some quotes must be
+// escaped.
+
+var testset = [
+
+// Color tests
+// Generic property for testing
+{ base : base = "div {color:green}",
+  tests : [
+// My misc tests
+"<!--#a {color:green}",
+base + "<!-#a {color:red}",
+base + "#a<!--{color:red}",
+"-->#a{color:green}",
+base + "--#a {color:red}",
+base + "--aasdf, #a {color:green}",
+base + "-0aasdf, #a {color:red}",
+"-asdf, #a {color:green}",
+base + "#a {color: rgb\n(255, 0, 0)}",
+"#a {font: \"Arial\n;color:green}",
+"#a {color: @charset{}\"\\\n'\"url(\na\na); color:green}",
+"#a\r{color:green}",
+"#a\n{color:green}",
+"#a\t{color:green}",
+"@threedee maroon url('asdf\n) ra('asdf\n); " + base,
+"@threedee {maroon url('asdf\n) ra('asdf\n);} " + base,
+"div[title='zxcv weeqweqeweasd\\D\\A a']{color:green}",
+"div[title~='weeqweqeweasd']{color:green}",
+base + "#a\\\n{color:red}",
+base + "#a\v{color:red}",
+
+// CSS1 section 7.1
+"#a {color: green; rotation: 70deg;}",
+"#a {color: green;} #a{color:invalidValue;}",
+base + "#a {color: \"red\"}",
+base + "@three-dee {\n @background-lighting {\n  azimuth: 30deg;\n  elevation: 190deg;\n  }\n #a { color: red }\n }",
+"#a {COLOR: GREEN}",
+base + "#a:wait {color: red}",
+"#a:lang(en) {color: green}",
+"#a:lang(\nen\r\t ) {color: green}",
+base + "div ! em, #a {color: red}",
+base + "//asdf.zxcv,\n#a {color: red}",
+"#a {rotation-code: \"}\"; color: green;}",
+"#a {rotation-code: \"\\\"}\\\"\"; color: green;}",
+"#a {rotation-code: '}'; color: green;}",
+"#a {rotation-code: '\\'}\\''; color: green;}",
+"#a {\n type-display: @threedee {rotation-code: '}';};\n color: green;\n }",
+base + "p {text-indent: 0.5in;} color: maroon #a {color: red;}",
+base + "p {text-indent: 0.5in;} color: maroon; #a {color: red;}",
+
+// string tokenization as error token, not EOF (bug 311566 comment 70)
+"#a { color: green; foo: { \"bar\n;color: red}",
+
+// CSS 2.1 section 4.1.3
+"@MediA All {#a {ColOR :RgB(\t0,\r128,\n0 ) } };",
+base + "\\#a{color:red;}",
+base + "#a\\{color:red;\\}",
+base + "#a{color\\:red;}",
+base + "#a{color:red\\;}",
+"#a {c\\o\\l\\o\\r:\\g\\ree\\n}",
+"#a{ co\\00006Cor: gr\\000065en; }",
+"#a{ co\\4C or: gr\\000045en; }",
+".IdE6n-3t0_6, #a { color: green }",
+"#IdE6n-3t0_6, #a { color: green }",
+"._ident, #a { color: green }",
+"#_ident, #a { color: green }",
+".-ident, .a { color: green; }", // Testsuite has incorrect version
+"#怀ident, .a { color: green }",
+"#iden怀t怀, .a { color: green }",
+"#\\6000ident, .a { color: green }",
+"#iden\\6000t\\6000, .a { color: green }",
+".怀ident, .a { color: green }",
+".iden怀t怀, .a { color: green }",
+".\\6000ident, .a { color: green }",
+".iden\\6000t\\6000, .a { color: green }",
+base + "#6ident, #a {color: red }",
+".id4ent6, .a { color: green }",
+"#\\ident, .a { color: green; }",
+"#ide\\n\\t, .a { color: green; }",
+".\\6ident, .a { color: green; }",
+".\\--ident, .a { color: green; }",
+
+// CSS2.1 section 4.1.5 and 4.2
+"@import 'data:text/css,%23a{color:green}';",
+"@import \"data:text/css,%23a{color:green}\";",
+"@import url(data:text/css,%23a{color:green});",
+"@import 'data:text/css,%23a{color:green}' screen;",
+base + "@import 'data:text/css,%23a{color:red}' blahblahblah;",
+"@import 'data:text/css,%23a{color:green}'",
+"@import 'data:text/css,%23a{color:green}",
+"@foo {}" + base,
+"@foo bar {}" + base,
+"@foo; " + base,
+"@foo bar baz; " + base,
+base + "@foo {}; #a {color: red}",
+
+// CSS2.1 section 4.1.9
+"/* This is a CSS comment. */" + base,
+base + "/* #a {color: red} */",
+"/*********** /*/" + base,
+
+// CSS2.1 section 4.3.6
+base + "#a {color: rgb(255, 0, 0%)}",
+base + "#a {color: rgb(100%, 0, 0)}",
+"#a {color: rgb(0, 128, 0)}",
+"#a {color: rgb(0%, 50%, 0%)}",
+"#a {color: rgb(0%, 49.999999999999%, 0%)}",
+
+// CSS-Color-4
+// https://drafts.csswg.org/css-color/#rgb-functions
+"#a {color: rgb(0, 128.0, 0)}",
+], prop: "color", pseudo: ""
+},
+
+// Border tests
+// For testing lengths
+{ base : base = "#a {border-style:solid}",
+  tests : [
+// CSS1 section 7.1
+base + "#a {border-width: funny}",
+base + "#a {border-width: 50zu}",
+base + "#a {border-width: px}",
+
+// Number/unit parsing
+base + "#a {border-width: 0.px}",
+base + "#a {border-width: ..0px}",
+base + "#a {border-width: 0..0px}",
+base + "#a {border-width: 0.}",
+base + "#a {border-width: ..0}",
+base + "#a {border-width: 0..0}",
+base + "#a {border-width: 0; border-width: .0px medium}",
+base + "#a {border-width: 0; border-width: .0 medium}",
+base + "#a {border-width: 0; border-width: 0.0px medium}",
+], prop: "borderRightWidth", pseudo: ""},
+
+// Content tests
+// Tests for strings and pseudos
+{base : base = ".a::before {content: 'This is \\a'}",
+ tests : [
+// CSS 2.1 section 4.1.3
+"#a::before {content: 'This is \\a '}",
+"#a::before {content: 'This is \\A '}",
+"#a::before {content: 'This is \\0000a '}",
+"#a::before {content: 'This is \\00000a '}",
+"#a::before {content: 'This is \\\n\\00000a '}",
+"#a::before {content: 'This is \\\015\012\\00000a '}",
+"#a::before {content: 'This is \\\015\\00000a '}",
+"#a::before {content: 'This is \\\f\\00000a '}",
+"#a::before {content: 'This is\\20\f\\a'}",
+"#a::before {content: 'This is\\20\r\\a'}",
+"#a::before {content: 'This is\\20\n\\a'}",
+"#a::before {content: 'This is\\20\r\n\\a'}",
+base + "#a::before {content: 'FAIL \f\\a'}",
+base + "#a::before {content: 'FAIL \\\n\r\\a'}",
+"#a:before {content: 'This is \\a'}",
+
+base + "#a:: before {content: 'FAIL'}",
+base + "#a ::before {content: 'FAIL'}",
+"#a::before {content: 'This is \\a",
+
+], prop: "content", pseudo: "::before"
+},
+
+// Background color tests
+// For basic URL parsing sanity checks
+{ base : base = "div {background: blue}",
+  tests : [
+"#a {background: url() blue}",
+"#a {background: url(怀) blue}",
+], prop: "backgroundColor", pseudo: ""
+},
+
+// A one-off test I couldn't come up with a better way to do
+{ base : base = "div {border-style: dotted}",
+  tests : [
+// Sanity-check to make sure this test will work
+// This test requires a color name that starts with a "-"
+base + "#a {border: dotted 0 -moz-menuhover}",
+// The actual test: check that 0-moz-menuhover get parsed as an unknown dimension
+// rather than a separate identifier
+base + "#a {border: solid 0-moz-menuhover}",
+], prop: "borderLeftStyle", pseudo: ""
+},
+
+];
+
+var curTest = -1;
+var curSubTest = 0;
+
+var styleElement = document.getElementsByTagName("style")[0];
+var divElement = document.getElementById("a");
+var frame = document.getElementsByTagName("iframe")[0];
+
+var canonical;
+
+var doTests = function() {
+  if (curTest >= 0) {
+    var curElement = frame.contentDocument.getElementsByTagName("div")[0];
+    var curStyle = frame.contentDocument.defaultView.getComputedStyle(curElement, testset[curTest].pseudo);
+    if (testset[curTest].todo && testset[curTest].todo[testset[curTest].tests[curSubTest]]) {
+      todo_is(curStyle[testset[curTest].prop], canonical, testset[curTest].tests[curSubTest]);
+    } else {
+      is(curStyle[testset[curTest].prop], canonical, testset[curTest].tests[curSubTest]);
+    }
+    curSubTest++;
+  }
+  if (curTest == -1 || curSubTest >= testset[curTest].tests.length) {
+    curTest++;
+    curSubTest = 0;
+  }
+  if (!(curTest < testset.length)) {
+    SimpleTest.finish();
+    return;
+  }
+  if (curSubTest == 0) {
+    styleElement.textContent = "";
+    let computedBase = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop];
+    styleElement.textContent = testset[curTest].base;
+    canonical = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop];
+    styleElement.textContent = "";
+    isnot(computedBase, canonical, "Sanity check for rule: " + testset[curTest].base);
+  }
+  frame.contentDocument.open();
+  frame.contentDocument.write("<html lang=en><style>" + testset[curTest].tests[curSubTest] + "</style><div id=a class='a b c' title='zxcv weeqweqeweasd&#13;&#10;a'></div>");
+  frame.contentWindow.onload = function(){setTimeout(doTests, 0);};
+  frame.contentDocument.close();
+};
+
+// Running a debug build on the Android emulator is slooow and collecting
+// all the session history this test amasses through repeated navigations
+// adds considerably to the running time. Therefore, we restrict the
+// amount of session history we keep around during this test.
+SpecialPowers.pushPrefEnv({"set": [['browser.sessionhistory.max_entries', 4]]}, doTests);
+
+};
+
+</script>
diff --git a/layout/style/test/test_parse_url.html b/layout/style/test/test_parse_url.html
new file mode 100644
index 0000000000..7a637c18e3
--- /dev/null
+++ b/layout/style/test/test_parse_url.html
@@ -0,0 +1,195 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=473914
+-->
+<head>
+  <title>Test for Bug 473914</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=473914">Mozilla Bug 473914</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 473914 **/
+
+var div = document.getElementById("content");
+
+// This test relies on normalization (insertion of quote marks) that
+// we're not really guaranteed to continue doing in the future.
+div.style.listStyleImage = 'url(http://example.org/**/)';
+is(div.style.listStyleImage, 'url("http://example.org/**/")',
+   "not treated as comment");
+div.style.listStyleImage = 'url("http://example.org/**/")';
+is(div.style.listStyleImage, 'url("http://example.org/**/")',
+   "not treated as comment");
+div.style.listStyleImage = 'url(/**/foo)';
+is(div.style.listStyleImage, 'url("/**/foo")',
+   "not treated as comment");
+div.style.listStyleImage = 'url("/**/foo")';
+is(div.style.listStyleImage, 'url("/**/foo")',
+   "not treated as comment");
+div.style.listStyleImage = 'url(/**/)';
+is(div.style.listStyleImage, 'url("/**/")',
+   "not treated as comment");
+div.style.listStyleImage = 'url("/**/")';
+is(div.style.listStyleImage, 'url("/**/")',
+   "not treated as comment");
+
+// Tests from Alfred Keyser's patch in bug 337287 (modified by dbaron)
+div.style.listStyleImage = 'url("bad")';
+div.style.listStyleImage = 'url(good /*bad comment*/)';
+is(div.style.listStyleImage, 'url("bad")',
+   "comment not allowed inside token");
+
+div.style.listStyleImage = 'url(good /*bad comments*/ /*Hello*/)';
+is(div.style.listStyleImage, 'url("bad")',
+   "comment not allowed inside token");
+
+div.style.listStyleImage = 'url(good/*commentaspartofurl*/)';
+is(div.style.listStyleImage, 'url("good/*commentaspartofurl*/")',
+   "comment-like syntax not comment inside of url");
+
+div.style.listStyleImage = 'url("bad")';
+div.style.listStyleImage = 'url(good/**/ /*secondcommentcanbeskipped*/ )';
+is(div.style.listStyleImage, 'url("bad")',
+   "comment not allowed inside token");
+
+div.style.listStyleImage = 'url(/*partofurl*/good)';
+is(div.style.listStyleImage, 'url("/*partofurl*/good")',
+   "comment not parsed as part of url");
+
+div.style.listStyleImage = 'url(good';
+is(div.style.listStyleImage, 'url("good")',
+   "URL ending with eof not correctly handled");
+
+div.style.listStyleImage = 'url("bad")';
+div.style.listStyleImage = 'url(good /*)*/';
+is(div.style.listStyleImage, 'url("bad")',
+   "comment not allowed inside token");
+
+div.style.listStyleImage = 'url("bad")';
+div.style.listStyleImage = 'url(good /*)*/ tokenaftercommentevenwithclosebracketisinvalid';
+is(div.style.listStyleImage, 'url("bad")',
+   "comment not allowed inside token");
+
+div.style.listStyleImage = 'url(bad)';
+div.style.listStyleImage = 'url("good"';
+is(div.style.listStyleImage, 'url("good")',
+   "URL as string without close bracket");
+
+div.style.listStyleImage = 'url(bad)';
+div.style.listStyleImage = 'url("good';
+is(div.style.listStyleImage, 'url("good")',
+   "URL as string without closing quote");
+
+div.style.listStyleImage = 'url("bad")';
+div.style.listStyleImage = 'url(good notgood';
+is(div.style.listStyleImage, 'url("bad")',
+   "second token should make url invalid");
+
+div.style.listStyleImage = 'url("bad")';
+div.style.listStyleImage = 'url(good(notgood';
+is(div.style.listStyleImage, 'url("bad")',
+   "open bracket in url not recognized as invalid");
+
+var longurl = '';
+for (i=0;i<1000;i++) {
+    longurl = longurl + 'verylongurlindeed_thequickbrownfoxjumpsoverthelazydoq';
+}
+div.style.listStyleImage = 'url(' + longurl;
+is(div.style.listStyleImage, 'url("' + longurl + '")',
+   "very long url not correctly parsed");
+
+
+// Additional tests from
+// https://bugzilla.mozilla.org/show_bug.cgi?id=337287#c21
+
+div.style.listStyleImage = 'url(good/*)';
+is(div.style.listStyleImage, 'url("good/*")',
+   "URL containing comment start is valid");
+
+div.style.listStyleImage = 'url("bad")';
+div.style.listStyleImage = 'url(good bad)';
+is(div.style.listStyleImage, 'url("bad")',
+   "unquoted URL with spaces not allowed");
+
+div.style.listStyleImage = 'url(\\g b)';
+is(div.style.listStyleImage, 'url("bad")',
+   "unquoted URL with spaces not allowed");
+
+div.style.listStyleImage = 'url( \\g b)';
+is(div.style.listStyleImage, 'url("bad")',
+   "unquoted URL with spaces not allowed");
+
+div.style.listStyleImage = 'url(c\\g b)';
+is(div.style.listStyleImage, 'url("bad")',
+   "unquoted URL with spaces not allowed");
+
+div.style.listStyleImage = 'url(cc\\g b)';
+is(div.style.listStyleImage, 'url("bad")',
+   "unquoted URL with spaces not allowed");
+
+div.style.listStyleImage = 'url(\\f  b)';
+is(div.style.listStyleImage, 'url("bad")',
+   "unquoted URL with spaces not allowed");
+
+div.style.listStyleImage = 'url( \\f  b)';
+is(div.style.listStyleImage, 'url("bad")',
+   "unquoted URL with spaces not allowed");
+
+div.style.listStyleImage = 'url(c\\f  b)';
+is(div.style.listStyleImage, 'url("bad")',
+   "unquoted URL with spaces not allowed");
+
+div.style.listStyleImage = 'url(cc\\f  b)';
+is(div.style.listStyleImage, 'url("bad")',
+   "unquoted URL with spaces not allowed");
+
+var chars = [ 1, 2, 3, 4, 5, 6, 7, 8, 11, 14, 15, 16, 17, 18, 19, 20,
+              21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 127];
+
+for (var i in chars) {
+  var charcode = chars[i];
+  div.style.listStyleImage = 'url(' + String.fromCharCode(charcode) + ')';
+  is(div.style.listStyleImage, 'url("bad")',
+     "unquoted URL with control character " + charcode + " not allowed");
+}
+
+div.style.listStyleImage = 'url(\u00ff)';
+is(div.style.listStyleImage, 'url("\u00ff")', "U+A0-U+FF allowed in unquoted URL");
+
+div.style.listStyleImage = 'url(\\f good)';
+is(div.style.listStyleImage, 'url("\\f good")', "URL allowed");
+div.style.listStyleImage = 'url( \\f good)';
+is(div.style.listStyleImage, 'url("\\f good")', "URL allowed");
+div.style.listStyleImage = 'url(f\\f good)';
+is(div.style.listStyleImage, 'url("f\\f good")', "URL allowed");
+div.style.listStyleImage = 'url(go\\od)';
+is(div.style.listStyleImage, 'url("good")', "URL allowed");
+div.style.listStyleImage = 'url(goo\\d)';
+is(div.style.listStyleImage, 'url("goo\\d ")', "URL allowed");
+div.style.listStyleImage = 'url(go\\o)';
+is(div.style.listStyleImage, 'url("goo")', "URL allowed");
+
+div.setAttribute("style", "color: url(/*); color: green");
+is(div.style.color, 'green',
+   "URL tokenized correctly outside properties taking URLs");
+
+div.style.listStyleImage = 'url("foo\\\nbar1")';
+is(div.style.listStyleImage, 'url("foobar1")',
+   "escaped newline allowed in string form of URL");
+div.style.listStyleImage = 'url(foo\\\nbar2)';
+is(div.style.listStyleImage, 'url("foobar1")',
+   "escaped newline NOT allowed in NON-string form of URL");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_parser_diagnostics_unprintables.html b/layout/style/test/test_parser_diagnostics_unprintables.html
new file mode 100644
index 0000000000..f872c00a8f
--- /dev/null
+++ b/layout/style/test/test_parser_diagnostics_unprintables.html
@@ -0,0 +1,220 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test for CSS parser diagnostics escaping unprintable
+         characters correctly</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<a target="_blank"
+   href="https://bugzilla.mozilla.org/show_bug.cgi?id=229827"
+>Mozilla Bug 229827</a>
+<style id="testbench"></style>
+<script type="application/javascript">
+// This test has intimate knowledge of how to get the CSS parser to
+// emit diagnostics that contain text under control of the user.
+// That's not the point of the test, though; the point is only that
+// *that text* is properly escaped.
+
+SpecialPowers.wrap(window).docShell.cssErrorReportingEnabled = true;
+
+// There is one "pattern" for each code path through the error reporter
+// that might need to escape some kind of user-supplied text.
+// Each "pattern" is tested once with each of the "substitution"s below:
+// <t>, <i>, and <s> are replaced by the t:, i:, and s: fields of
+// each substitution object in turn.
+let patterns = [
+  // REPORT_UNEXPECTED_P (only ever used in contexts where identifier-like
+  // escaping is appropriate)
+  { i: "<t>|x{}",                 o: "prefix \u2018<i>\u2019" },
+  // REPORT_UNEXPECTED_TOKEN with:
+  // _Ident
+  { i: "@namespace fnord <t>;",    o: "within @namespace: \u2018<i>\u2019" },
+  // _Ref
+  { i: "@namespace fnord #<t>;",   o: "within @namespace: \u2018#<i>\u2019" },
+  // _Function
+  { i: "@namespace fnord <t>();",  o: "within @namespace: \u2018<i>(\u2019" },
+  // _Dimension
+  { i: "@namespace fnord 14<t>;",  o: "within @namespace: \u201814<i>\u2019" },
+  // _AtKeyword
+  { i: "x{@<t>: }",                o: "declaration but found \u2018@<i>\u2019." },
+  // _String
+  { i: "x{ color: '<t>'}" ,        o: 'color but found \u2018"<s>"\u2019.' },
+  // _Bad_String
+  { i: "x{ color: '<t>\n}",        o: 'color but found \u2018"<s>\u2019.' },
+];
+
+// Blocks of characters to test, and how they should be escaped when
+// they appear in identifiers and string constants.
+const substitutions = [
+  // ASCII printables that _can_ normally appear in identifiers,
+  // so should of course _not_ be escaped.
+  { t: "-_0123456789",               i: "-_0123456789",
+                                     s: "-_0123456789" },
+  { t: "abcdefghijklmnopqrstuvwxyz", i: "abcdefghijklmnopqrstuvwxyz",
+                                     s: "abcdefghijklmnopqrstuvwxyz" },
+  { t: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", i: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+                                     s: "ABCDEFGHIJKLMNOPQRSTUVWXYZ" },
+
+  // ASCII printables that are not normally valid as the first character
+  // of an identifier, or the character immediately after a leading dash,
+  // but can be forced into that position with escapes.
+  { t: "\\-",    i: "\\-",    s: "-"  },
+  { t: "\\30 ",  i: "\\30 ",  s: "0"  },
+  { t: "\\31 ",  i: "\\31 ",  s: "1"  },
+  { t: "\\32 ",  i: "\\32 ",  s: "2"  },
+  { t: "\\33 ",  i: "\\33 ",  s: "3"  },
+  { t: "\\34 ",  i: "\\34 ",  s: "4"  },
+  { t: "\\35 ",  i: "\\35 ",  s: "5"  },
+  { t: "\\36 ",  i: "\\36 ",  s: "6"  },
+  { t: "\\37 ",  i: "\\37 ",  s: "7"  },
+  { t: "\\38 ",  i: "\\38 ",  s: "8"  },
+  { t: "\\39 ",  i: "\\39 ",  s: "9"  },
+  { t: "-\\-",   i: "--",     s: "--" },
+  { t: "-\\30 ", i: "-\\30 ", s: "-0" },
+  { t: "-\\31 ", i: "-\\31 ", s: "-1" },
+  { t: "-\\32 ", i: "-\\32 ", s: "-2" },
+  { t: "-\\33 ", i: "-\\33 ", s: "-3" },
+  { t: "-\\34 ", i: "-\\34 ", s: "-4" },
+  { t: "-\\35 ", i: "-\\35 ", s: "-5" },
+  { t: "-\\36 ", i: "-\\36 ", s: "-6" },
+  { t: "-\\37 ", i: "-\\37 ", s: "-7" },
+  { t: "-\\38 ", i: "-\\38 ", s: "-8" },
+  { t: "-\\39 ", i: "-\\39 ", s: "-9" },
+
+  // ASCII printables that must be escaped in identifiers.
+  // Most of these should not be escaped in strings.
+  { t: "\\!\\\"\\#\\$",   i: "\\!\\\"\\#\\$",   s: "!\\\"#$" },
+  { t: "\\%\\&\\'\\(",    i: "\\%\\&\\'\\(",    s: "%&'(" },
+  { t: "\\)\\*\\+\\,",    i: "\\)\\*\\+\\,",    s: ")*+," },
+  { t: "\\.\\/\\:\\;",    i: "\\.\\/\\:\\;",    s: "./:;" },
+  { t: "\\<\\=\\>\\?",    i: "\\<\\=\\>\\?",    s: "<=>?", },
+  { t: "\\@\\[\\\\\\]",   i: "\\@\\[\\\\\\]",   s: "@[\\\\]" },
+  { t: "\\^\\`\\{\\}\\~", i: "\\^\\`\\{\\}\\~", s: "^`{}~" },
+
+  // U+0000 - U+0020 (C0 controls, space)
+  // U+000A LINE FEED, U+000C FORM FEED, and U+000D CARRIAGE RETURN
+  // cannot be put into a CSS token as escaped literal characters, so
+  // we do them with hex escapes instead.
+  // The parser replaces U+0000 with U+FFFD.
+  { t: "\\\x00\\\x01\\\x02\\\x03",       i: "�\\1 \\2 \\3 ",
+                                         s: "�\\1 \\2 \\3 " },
+  { t: "\\\x04\\\x05\\\x06\\\x07",       i: "\\4 \\5 \\6 \\7 ",
+                                         s: "\\4 \\5 \\6 \\7 " },
+  { t: "\\\x08\\\x09\\000A\\\x0B",       i: "\\8 \\9 \\a \\b ",
+                                         s: "\\8 \\9 \\a \\b " },
+  { t: "\\000C\\000D\\\x0E\\\x0F",       i: "\\c \\d \\e \\f ",
+                                         s: "\\c \\d \\e \\f " },
+  { t: "\\\x10\\\x11\\\x12\\\x13",       i: "\\10 \\11 \\12 \\13 ",
+                                         s: "\\10 \\11 \\12 \\13 " },
+  { t: "\\\x14\\\x15\\\x16\\\x17",       i: "\\14 \\15 \\16 \\17 ",
+                                         s: "\\14 \\15 \\16 \\17 " },
+  { t: "\\\x18\\\x19\\\x1A\\\x1B",       i: "\\18 \\19 \\1a \\1b ",
+                                         s: "\\18 \\19 \\1a \\1b " },
+  { t: "\\\x1C\\\x1D\\\x1E\\\x1F\\ ",    i: "\\1c \\1d \\1e \\1f \\ ",
+                                         s: "\\1c \\1d \\1e \\1f  " },
+
+  // U+007F (DELETE) and U+0080 - U+009F (C1 controls)
+  { t: "\\\x7f\\\x80\\\x81\\\x82",       i: "\\7f \x80\x81\x82",
+                                         s: "\\7f \x80\x81\x82" },
+  { t: "\\\x83\\\x84\\\x85\\\x86",       i: "\x83\x84\x85\x86",
+                                         s: "\x83\x84\x85\x86" },
+  { t: "\\\x87\\\x88\\\x89\\\x8A",       i: "\x87\x88\x89\x8A",
+                                         s: "\x87\x88\x89\x8A" },
+  { t: "\\\x8B\\\x8C\\\x8D\\\x8E",       i: "\x8B\x8C\x8D\x8E",
+                                         s: "\x8B\x8C\x8D\x8E" },
+  { t: "\\\x8F\\\x90\\\x91\\\x92",       i: "\x8F\x90\x91\x92",
+                                         s: "\x8F\x90\x91\x92" },
+  { t: "\\\x93\\\x94\\\x95\\\x96",       i: "\x93\x94\x95\x96",
+                                         s: "\x93\x94\x95\x96" },
+  { t: "\\\x97\\\x98\\\x99\\\x9A",       i: "\x97\x98\x99\x9A",
+                                         s: "\x97\x98\x99\x9A" },
+  { t: "\\\x9B\\\x9C\\\x9D\\\x9E\\\x9F", i: "\x9B\x9C\x9D\x9E\x9F",
+                                         s: "\x9B\x9C\x9D\x9E\x9F" },
+
+  // CSS doesn't bother with the full Unicode rules for identifiers,
+  // instead declaring that any code point greater than or equal to
+  // U+0080 is a valid identifier character.  Test a small handful
+  // of both basic and astral plane characters.
+
+  // Arabic (caution to editors: there is a possibly-invisible U+200E
+  // LEFT-TO-RIGHT MARK in each string, just before the close quote)
+  { t: "أبجدهوزحطيكلمنسعفصقرشتثخذضظغ‎",
+    i: "أبجدهوزحطيكلمنسعفصقرشتثخذضظغ‎",
+    s: "أبجدهوزحطيكلمنسعفصقرشتثخذضظغ‎" },
+
+  // Box drawing
+  { t: "─│┌┐└┘├┤┬┴┼╭╮╯╰╴╵╶╷",
+    i: "─│┌┐└┘├┤┬┴┼╭╮╯╰╴╵╶╷",
+    s: "─│┌┐└┘├┤┬┴┼╭╮╯╰╴╵╶╷" },
+
+  // CJK Unified Ideographs
+  { t: "一丁丂七丄丅丆万丈三上下丌不与丏",
+    i: "一丁丂七丄丅丆万丈三上下丌不与丏",
+    s: "一丁丂七丄丅丆万丈三上下丌不与丏" },
+
+  // CJK Unified Ideographs Extension B (astral)
+  { t: "𠀀𠀁𠀂𠀃𠀄𠀅𠀆𠀇𠀈𠀉𠀊𠀋𠀌𠀍𠀎𠀏",
+    i: "𠀀𠀁𠀂𠀃𠀄𠀅𠀆𠀇𠀈𠀉𠀊𠀋𠀌𠀍𠀎𠀏",
+    s: "𠀀𠀁𠀂𠀃𠀄𠀅𠀆𠀇𠀈𠀉𠀊𠀋𠀌𠀍𠀎𠀏" },
+
+  // Devanagari
+  { t: "कखगघङचछजझञटठडढणतथदधनपफबभमयरलळवशषसह",
+    i: "कखगघङचछजझञटठडढणतथदधनपफबभमयरलळवशषसह",
+    s: "कखगघङचछजझञटठडढणतथदधनपफबभमयरलळवशषसह" },
+
+  // Emoticons (astral)
+  { t: "😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐",
+    i: "😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐",
+    s: "😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐" },
+
+  // Greek
+  { t: "αβγδεζηθικλμνξοπρςστυφχψω",
+    i: "αβγδεζηθικλμνξοπρςστυφχψω",
+    s: "αβγδεζηθικλμνξοπρςστυφχψω" }
+];
+
+const npatterns = patterns.length;
+const nsubstitutions = substitutions.length;
+
+function quotemeta(str) {
+  return str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+}
+function subst(str, sub) {
+  return str.replace("<t>", sub.t)
+    .replace("<i>", sub.i)
+    .replace("<s>", sub.s);
+}
+
+var curpat = 0;
+var cursubst = -1;
+var testbench = document.getElementById("testbench");
+
+function nextTest() {
+  cursubst++;
+  if (cursubst == nsubstitutions) {
+    curpat++;
+    cursubst = 0;
+  }
+  if (curpat == npatterns) {
+    SimpleTest.finish();
+    return;
+  }
+
+  let css = subst(patterns[curpat].i, substitutions[cursubst]);
+  let msg = quotemeta(subst(patterns[curpat].o, substitutions[cursubst]));
+
+  info(css);
+  info(msg);
+  SimpleTest.expectConsoleMessages(function () { testbench.innerHTML = css },
+                                   [{ errorMessage: new RegExp(msg) }],
+                                   nextTest);
+}
+
+SimpleTest.waitForExplicitFinish();
+nextTest();
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_pixel_lengths.html b/layout/style/test/test_pixel_lengths.html
new file mode 100644
index 0000000000..346547507c
--- /dev/null
+++ b/layout/style/test/test_pixel_lengths.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test that pixel lengths don't change based on DPI</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<div id="display">
+
+<div id="pt" style="width:90pt; height:90pt; background:lime;">pt</div>
+<div id="pc" style="width:5pc; height:5pc; background:yellow;">pc</div>
+<div id="mm" style="width:25.4mm; height:25.4mm; background:orange;">mm</div>
+<div id="cm" style="width:2.54cm; height:2.54cm; background:purple;">cm</div>
+<div id="in" style="width:1in; height:1in; background:magenta;">in</div>
+<div id="q" style="width:101.6q; height:101.6q; background:blue;">q</div>
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+var oldDPI = SpecialPowers.getIntPref("layout.css.dpi");
+var dpi = oldDPI;
+
+function check(id, val) {
+  var e = document.getElementById(id);
+  is(Math.round(e.getBoundingClientRect().width), Math.round(val),
+     "Checking width in " + id + " at " + dpi + " DPI");
+  is(Math.round(e.getBoundingClientRect().height), Math.round(val),
+     "Checking height in " + id + " at " + dpi + " DPI");
+}
+
+function checkPixelRelativeUnits() {
+  check("pt", 120);
+  check("pc", 80);
+  check("mm", 96);
+  check("cm", 96);
+  check("in", 96);
+  check("q", 96);
+}
+
+checkPixelRelativeUnits();
+
+SimpleTest.waitForExplicitFinish();
+
+SpecialPowers.pushPrefEnv({'set': [['layout.css.dpi', dpi=96]]}, test1);
+
+function test1() {
+  checkPixelRelativeUnits();
+  SpecialPowers.pushPrefEnv({'set': [['layout.css.dpi', dpi=192]]}, test2);
+}
+
+function test2() {
+  checkPixelRelativeUnits();
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_placeholder_restrictions.html b/layout/style/test/test_placeholder_restrictions.html
new file mode 100644
index 0000000000..4e3e87ef16
--- /dev/null
+++ b/layout/style/test/test_placeholder_restrictions.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1382786
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1382786</title>
+  <script 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"/>
+  <style id="s"></style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1382786">Mozilla Bug 1382786</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<input id="test">
+<input id="control">
+<script type="application/javascript">
+
+/** Test for Bug 1382786 **/
+var test = getComputedStyle($("test"), "::placeholder");
+var control = getComputedStyle($("control"), "::placeholder");
+for (let prop in gCSSProperties) {
+  var info = gCSSProperties[prop];
+  if (info.type == CSS_TYPE_TRUE_SHORTHAND) {
+    // Can't get useful info out of getComputedStyle.
+    continue;
+  }
+  let prereqs = "";
+  if (info.prerequisites) {
+    for (let name in info.prerequisites) {
+      prereqs += `${name}: ${info.prerequisites[name]}; `;
+    }
+  }
+  $("s").textContent = `
+    #control::placeholder { ${prop}: ${info.initial_values[0]}; ${prereqs} }
+    #test::placeholder { ${prop}: ${info.other_values[0]}; ${prereqs} }
+  `;
+  // line-height does apply to ::placeholder, but only on <textarea>. We could
+  // switch the test to use a <textarea>.
+  if (info.applies_to_placeholder && prop != "line-height") {
+    isnot(get_computed_value(test, prop),
+          get_computed_value(control, prop),
+          `${prop} should apply to ::placeholder`);
+  } else {
+    is(get_computed_value(test, prop),
+       get_computed_value(control, prop),
+       `${prop} should not apply to ::placeholder`);
+  }
+}
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_pointer-events.html b/layout/style/test/test_pointer-events.html
new file mode 100644
index 0000000000..faeb6c6335
--- /dev/null
+++ b/layout/style/test/test_pointer-events.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for pointer-events in HTML</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+
+  div       { height: 10px; width: 10px; background: black; }
+
+  </style>
+</head>
+<!-- need a set timeout because we need things to start after painting suppression ends -->
+<body onload="setTimeout(run_test, 0)">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
+<div id="display" style="position: absolute; top: 0; left: 0; width: 300px; height: 300px">
+
+  <div id="one"></div>
+  <div id="two" style="pointer-events: visiblePainted;"></div>
+  <div id="three" style="height: 20px; pointer-events: none;">
+    <div id="four"style="margin-top: 10px;"></div>
+  </div>
+  <a id="five" style="pointer-events: none;" href="http://mozilla.org/">link</a>
+  <input id="six" style="pointer-events: none;" type="button" value="button" />
+  <table>
+    <tr style="pointer-events: none;">
+      <td id="seven">no</td>
+      <td id="eight" style="pointer-events: visiblePainted;">yes</td>
+      <td id="nine" style="pointer-events: auto;">yes</td>
+    </td>
+    <tr style="opacity: 0.5; pointer-events: none;">
+      <td id="ten">no</td>
+      <td id="eleven" style="pointer-events: visiblePainted;">yes</td>
+     <td id="twelve" style="pointer-events: auto;">yes</td>
+    </td>
+  </table>
+  <iframe id="thirteen" style="pointer-events: none;" src="about:blank" width="100" height="100"></iframe>
+  <script type="application/javascript">
+    var iframe = document.getElementById("thirteen");
+    iframe.contentDocument.open();
+    iframe.contentDocument.writeln("<script type='application/javascript'>");
+    iframe.contentDocument.writeln("document.addEventListener('mousedown', fail, false);");
+    iframe.contentDocument.writeln("function fail() { parent.ok(false, 'thirteen: iframe content must not get pointer events with explicit none') }");
+    iframe.contentDocument.writeln("<"+"/script>");
+    iframe.contentDocument.close();
+  </script>
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+SimpleTest.expectAssertions(0, 1);
+
+SimpleTest.waitForExplicitFinish();
+
+function catches_pointer_events(element_id)
+{
+    // we just assume the element is on top here.
+    var element = document.getElementById(element_id);
+    var bounds = element.getBoundingClientRect();
+    var point = { x: bounds.left + bounds.width/2, y: bounds.top + bounds.height/2 };
+    return element == document.elementFromPoint(point.x, point.y);
+}
+
+function synthesizeMouseEvent(type,                // string
+                              x,                   // float
+                              y,                   // float
+                              button,              // long
+                              clickCount,          // long
+                              modifiers,           // long
+                              ignoreWindowBounds)  // boolean
+{
+  var utils = SpecialPowers.getDOMWindowUtils(window);
+  utils.sendMouseEvent(type, x, y, button, clickCount,
+                       modifiers, ignoreWindowBounds);
+}
+
+function run_test()
+{
+    ok(catches_pointer_events("one"), "one: div should default to catching pointer events");
+    ok(catches_pointer_events("two"), "two: div should catch pointer events with explicit visiblePainted");
+    ok(!catches_pointer_events("three"), "three: div should not catch pointer events with explicit none");
+    ok(!catches_pointer_events("four"), "four: div should not catch pointer events with inherited none");
+    ok(!catches_pointer_events("five"), "five: link should not catch pointer events with explicit none");
+    ok(!catches_pointer_events("six"), "six: native-themed form control should not catch pointer events with explicit none");
+    ok(!catches_pointer_events("seven"), "seven: td should not catch pointer events with inherited none");
+    ok(catches_pointer_events("eight"), "eight: td should catch pointer events with explicit visiblePainted overriding inherited none");
+    ok(catches_pointer_events("nine"), "nine: td should catch pointer events with explicit auto overriding inherited none");
+    ok(!catches_pointer_events("ten"), "ten: td should not catch pointer events with inherited none");
+    ok(catches_pointer_events("eleven"), "eleven: td should catch pointer events with explicit visiblePainted overriding inherited none");
+    ok(catches_pointer_events("twelve"), "twelve: td should catch pointer events with explicit auto overriding inherited none");
+
+    // elementFromPoint can't be used for iframe
+    var iframe = document.getElementById("thirteen");
+    iframe.parentNode.addEventListener('mousedown', handleIFrameClick);
+    var bounds = iframe.getBoundingClientRect();
+    var x = bounds.left + bounds.width/2;
+    var y = bounds.top + bounds.height/2;
+    synthesizeMouseEvent('mousedown', x, y, 0, 1, 0, true);
+}
+
+function handleIFrameClick()
+{
+    ok(true, "thirteen: iframe content must not get pointer events with explicit none");
+
+    document.getElementById("display").style.display = "none";
+    SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_position_float_display.html b/layout/style/test/test_position_float_display.html
new file mode 100644
index 0000000000..ee75144dcb
--- /dev/null
+++ b/layout/style/test/test_position_float_display.html
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1038929
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1038929</title>
+  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
+  <script 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=1038929">Mozilla Bug 1038929</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  <div id="float-left" style="float: left"></div>
+  <div id="float-right" style="float: right"></div>
+  <div id="position-absolute" style="position: absolute"></div>
+  <div id="position-fixed" style="position: fixed"></div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 1038929: Test that "display" on a floated or absolutely/fixed
+  position node is correctly converted to a block display as given in the table
+  in CSS 2.1 9.7. */
+
+// Maps from display value to expected conversion when floated/positioned
+// This loosely follows the spec in CSS 2.1 section 9.7. Except for "other"
+// values which the spec says should be "same as specified." For these, we do
+// whatever the spec for the value itself says.
+var mapping = {
+  "inline": "block",
+  "table-row-group": "block",
+  "table-column": "block",
+  "table-column-group": "block",
+  "table-header-group": "block",
+  "table-footer-group": "block",
+  "table-row": "block",
+  "table-cell": "block",
+  "table-caption": "block",
+  "inline-block": "block",
+  "block ruby": "block ruby",
+  "ruby": "block ruby",
+  "ruby-base": "block",
+  "ruby-base-container": "block",
+  "ruby-text": "block",
+  "ruby-text-container": "block",
+  "flex": "flex",
+  "grid": "grid",
+  "none": "none",
+  "table": "table",
+  "inline-grid": "grid",
+  "inline-flex": "flex",
+  "inline-table": "table",
+  "block": "block",
+  "contents": "contents",
+  "flow-root": "flow-root",
+  // Note: this is sometimes block
+  "list-item": "list-item",
+  "inline list-item": "list-item",
+  "inline flow-root list-item": "list-item",
+};
+
+function test_display_value(val)
+{
+  var floatLeftElem = document.getElementById("float-left");
+  floatLeftElem.style.display = val;
+  var floatLeftConversion = window.getComputedStyle(floatLeftElem).display;
+  floatLeftElem.style.display = "";
+
+  var floatRightElem = document.getElementById("float-right");
+  floatRightElem.style.display = val;
+  var floatRightConversion = window.getComputedStyle(floatRightElem).display;
+  floatRightElem.style.display = "";
+
+  var posAbsoluteElem = document.getElementById("position-absolute");
+  posAbsoluteElem.style.display = val;
+  var posAbsoluteConversion = window.getComputedStyle(posAbsoluteElem).display;
+  posAbsoluteElem.style.display = "";
+
+  var posFixedElem = document.getElementById("position-fixed");
+  posFixedElem.style.display = val;
+  var posFixedConversion = window.getComputedStyle(posFixedElem).display;
+  posFixedElem.style.display = "";
+
+  if (mapping[val]) {
+    is(floatLeftConversion, mapping[val], 
+        "Element display should be converted when floated left");
+    is(floatRightConversion, mapping[val],
+        "Element display should be converted when floated right");
+    is(posAbsoluteConversion, mapping[val],
+        "Element display should be converted when absolutely positioned");
+    is(posFixedConversion, mapping[val],
+        "Element display should be converted when fixed positioned");
+  } else {
+    ok(false, "missing rules for display value " + val);
+  }
+}
+
+var displayInfo = gCSSProperties.display;
+displayInfo.initial_values.forEach(test_display_value);
+displayInfo.other_values.forEach(test_display_value);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_position_sticky.html b/layout/style/test/test_position_sticky.html
new file mode 100644
index 0000000000..b542737e54
--- /dev/null
+++ b/layout/style/test/test_position_sticky.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=886646
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 886646</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+    #scroller {
+      width: 100px;
+      height: 100px;
+      padding: 10px;
+      border: 10px solid black;
+      margin: 10px;
+      overflow: hidden;
+    }
+    #container {
+      width: 50px;
+      height: 50px;
+    }
+    #sticky {
+      position: sticky;
+      width: 10px;
+      height: 10px;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=886646">Mozilla Bug 886646</a>
+<div id="display">
+  <div id="scroller">
+    <div id="container">
+      <div id="sticky"></div>
+    </div>
+  </div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+
+/** Test for Bug 886646 - Offsets for sticky positioning, when accessed through
+  * getComputedStyle(), should be accurately computed. In particular,
+  * percentage offsets should be computed in terms of the scroll container's
+  * content box. */
+
+// Test that percentage sticky offsets are computed in terms of the
+// scroll container's content box
+var offsets = {
+  "top":    10,
+  "left":   20,
+  "bottom": 30,
+  "right":  40,
+};
+
+var scroller = document.getElementById("scroller");
+var container = document.getElementById("container");
+var sticky = document.getElementById("sticky");
+var cs = getComputedStyle(sticky, "");
+
+for (var prop in offsets) {
+  sticky.style[prop] = offsets[prop] + "%";
+  is(cs[prop], offsets[prop] + "px");
+}
+
+// ... even in the presence of scrollbars
+scroller.style.overflow = "scroll";
+container.style.width = "100%";
+container.style.height = "100%";
+
+var ccs = getComputedStyle(container, "");
+
+function isApproximatelyEqual(a, b) {
+  return Math.abs(a - b) < 0.001;
+}
+
+for (var prop in offsets) {
+  sticky.style[prop] = offsets[prop] + "%";
+  var basis = parseFloat(ccs[prop == "left" || prop == "right" ?
+                             "width" : "height"]) / 100;
+  ok(isApproximatelyEqual(parseFloat(cs[prop]), offsets[prop] * basis));
+}
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_prefers_contrast_color_pairs.html b/layout/style/test/test_prefers_contrast_color_pairs.html
new file mode 100644
index 0000000000..f4a8945804
--- /dev/null
+++ b/layout/style/test/test_prefers_contrast_color_pairs.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<title>Test for Bug 922669</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css">
+<script>
+  function assertMatches(query) {
+    ok(matchMedia(query).matches, `${query} should match`);
+  }
+  function assertPrefersContrastIs(value) {
+    assertMatches(`(prefers-contrast: ${value})`);
+  }
+  add_task(async function setupPrefs() {
+    assertPrefersContrastIs("no-preference");
+    await SpecialPowers.pushPrefEnv({
+      set: [
+        ["browser.display.document_color_use", 2],
+        ["browser.display.use_system_colors", false],
+      ]
+    });
+    assertMatches("(prefers-contrast)");
+  });
+  async function testColors(foreground, background, expected) {
+    await SpecialPowers.pushPrefEnv({
+      set: [
+        ["browser.display.foreground_color", foreground],
+        ["browser.display.background_color", background],
+      ]
+    });
+
+    assertPrefersContrastIs(expected);
+
+    // Test the inversed order too.
+    await SpecialPowers.pushPrefEnv({
+      set: [
+        ["browser.display.foreground_color", background],
+        ["browser.display.background_color", foreground],
+      ]
+    });
+
+    assertPrefersContrastIs(expected);
+  }
+
+  add_task(async function test_prefers_contrast_colors() {
+    await testColors("black", "black", "less");
+    await testColors("black", "white", "more");
+    await testColors("red", "black", "custom");
+  });
+</script>
diff --git a/layout/style/test/test_priority_preservation.html b/layout/style/test/test_priority_preservation.html
new file mode 100644
index 0000000000..7177949555
--- /dev/null
+++ b/layout/style/test/test_priority_preservation.html
@@ -0,0 +1,141 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for property priority preservation</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/**
+ * Test that priorities are preserved correctly when setProperty is
+ * called, and during declaration block expansion/compression when other
+ * properties are manipulated.
+ */
+
+var div = document.getElementById("content");
+var s = div.style;
+
+s.setProperty("text-decoration", "underline", "");
+is(s.getPropertyValue("text-decoration"), "underline",
+   "text-decoration stored");
+is(s.getPropertyPriority("text-decoration"), "",
+   "text-decoration priority stored");
+s.setProperty("z-index", "7", "important");
+is(s.getPropertyValue("z-index"), "7",
+   "z-index stored");
+is(s.getPropertyPriority("z-index"), "important",
+   "z-index priority stored");
+s.setProperty("z-index", "3", "");
+is(s.getPropertyValue("z-index"), "3",
+   "z-index overridden by setting non-important");
+is(s.getPropertyPriority("z-index"), "",
+   "z-index priority overridden by setting non-important");
+is(s.getPropertyValue("text-decoration"), "underline",
+   "text-decoration still stored");
+is(s.getPropertyPriority("text-decoration"), "",
+   "text-decoration priority still stored");
+s.setProperty("text-decoration", "overline", "");
+is(s.getPropertyValue("text-decoration"), "overline",
+   "text-decoration stored");
+is(s.getPropertyPriority("text-decoration"), "",
+   "text-decoration priority stored");
+is(s.getPropertyValue("z-index"), "3",
+   "z-index still stored");
+is(s.getPropertyPriority("z-index"), "",
+   "z-index priority still stored");
+s.setProperty("text-decoration", "line-through", "important");
+is(s.getPropertyValue("text-decoration"), "line-through",
+   "text-decoration stored at new priority");
+is(s.getPropertyPriority("text-decoration"), "important",
+   "text-decoration priority overridden");
+is(s.getPropertyValue("z-index"), "3",
+   "z-index still stored");
+is(s.getPropertyPriority("z-index"), "",
+   "z-index priority still stored");
+
+  // also test setting a shorthand
+s.setProperty("font", "italic bold 12px/30px serif", "important");
+is(s.getPropertyValue("font-style"), "italic", "font-style stored");
+is(s.getPropertyPriority("font-style"), "important",
+   "font-style priority stored");
+is(s.getPropertyValue("font-weight"), "bold", "font-weight stored");
+is(s.getPropertyPriority("font-weight"), "important",
+   "font-weight priority stored");
+is(s.getPropertyValue("font-size"), "12px", "font-size stored");
+is(s.getPropertyPriority("font-size"), "important",
+   "font-size priority stored");
+is(s.getPropertyValue("line-height"), "30px", "line-height stored");
+is(s.getPropertyPriority("line-height"), "important",
+   "line-height priority stored");
+is(s.getPropertyValue("font-family"), "serif", "font-family stored");
+is(s.getPropertyPriority("font-family"), "important",
+   "font-family priority stored");
+
+is(s.getPropertyValue("text-decoration"), "line-through",
+   "text-decoration still stored");
+is(s.getPropertyPriority("text-decoration"), "important",
+   "text-decoration priority still stored");
+is(s.getPropertyValue("z-index"), "3",
+   "z-index still stored");
+is(s.getPropertyPriority("z-index"), "",
+   "z-index priority still stored");
+
+  // and overriding one element of that shorthand with some longhand
+  // test omitting the third argument to setProperty too (bug 655478)
+s.setProperty("font-style", "normal");
+
+is(s.getPropertyValue("font-style"), "normal", "font-style overridden");
+is(s.getPropertyPriority("font-style"), "", "font-style priority overridden");
+
+is(s.getPropertyValue("font-weight"), "bold", "font-weight unchanged");
+is(s.getPropertyPriority("font-weight"), "important",
+   "font-weight priority unchanged");
+is(s.getPropertyValue("font-size"), "12px", "font-size unchanged");
+is(s.getPropertyPriority("font-size"), "important",
+   "font-size priority unchanged");
+is(s.getPropertyValue("line-height"), "30px", "line-height unchanged");
+is(s.getPropertyPriority("line-height"), "important",
+   "line-height priority unchanged");
+is(s.getPropertyValue("font-family"), "serif", "font-family unchanged");
+is(s.getPropertyPriority("font-family"), "important",
+   "font-family priority unchanged");
+
+is(s.getPropertyValue("text-decoration"), "line-through",
+   "text-decoration still stored");
+is(s.getPropertyPriority("text-decoration"), "important",
+   "text-decoration priority still stored");
+is(s.getPropertyValue("z-index"), "3",
+   "z-index still stored");
+is(s.getPropertyPriority("z-index"), "",
+   "z-index priority still stored");
+
+s.setProperty("border-radius", "2em", "");
+is(s.getPropertyValue("border-radius"), "2em",
+   "border-radius serialization 1")
+
+s.setProperty("border-top-left-radius", "3em 4em", "");
+is(s.getPropertyValue("border-radius"),
+   "3em 2em 2em / 4em 2em 2em",
+   "border-radius serialization 2");
+
+s.setProperty("border-radius", "2em / 3em", "");
+is(s.getPropertyValue("border-radius"),
+   "2em / 3em",
+   "border-radius serialization 3")
+
+s.setProperty("border-top-left-radius", "4em", "");
+is(s.getPropertyValue("border-radius"),
+   "4em 2em 2em / 4em 3em 3em",
+   "border-radius serialization 3");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_property_database.html b/layout/style/test/test_property_database.html
new file mode 100644
index 0000000000..ba04ec341a
--- /dev/null
+++ b/layout/style/test/test_property_database.html
@@ -0,0 +1,173 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test that property_database.js contains all supported CSS properties</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="css_properties.js"></script>
+  <script type="text/javascript" src="property_database.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+<div id="testnode"></div>
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test that property_database.js contains all supported CSS properties **/
+
+/*
+ * Here we are testing the hand-written property_database.js against
+ * the autogenerated css_properties.js to make sure that everything in
+ * css_properties.js is in property_database.js.
+ *
+ * This prevents CSS properties from being added to the code without
+ * also being put under the minimal test coverage provided by the tests
+ * that use property_database.js.
+ */
+
+for (var idx in gLonghandProperties) {
+  var prop = gLonghandProperties[idx];
+  if (prop.pref && !IsCSSPropertyPrefEnabled(prop.pref)) {
+    continue;
+  }
+  var present = prop.name in gCSSProperties;
+  ok(present,
+     "'" + prop.name + "' listed in gCSSProperties");
+  if (present) {
+    is(gCSSProperties[prop.name].type, CSS_TYPE_LONGHAND,
+       "'" + prop.name + "' listed as CSS_TYPE_LONGHAND");
+    is(gCSSProperties[prop.name].domProp, prop.prop,
+       "'" + prop.name + "' listed with correct DOM property name");
+  }
+}
+for (var idx in gShorthandProperties) {
+  var prop = gShorthandProperties[idx];
+  if (prop.pref && !IsCSSPropertyPrefEnabled(prop.pref)) {
+    continue;
+  }
+  if (prop.name == "all") {
+    // "all" isn't listed in property_database.js.
+    continue;
+  }
+  var present = prop.name in gCSSProperties;
+  ok(present,
+     "'" + prop.name + "' listed in gCSSProperties");
+  if (present) {
+    ok(gCSSProperties[prop.name].type == CSS_TYPE_TRUE_SHORTHAND ||
+       gCSSProperties[prop.name].type == CSS_TYPE_LEGACY_SHORTHAND ||
+       gCSSProperties[prop.name].type == CSS_TYPE_SHORTHAND_AND_LONGHAND,
+       "'" + prop.name + "' listed as CSS_TYPE_TRUE_SHORTHAND, CSS_TYPE_LEGACY_SHORTHAND, or CSS_TYPE_SHORTHAND_AND_LONGHAND");
+    ok(gCSSProperties[prop.name].domProp == prop.prop,
+       "'" + prop.name + "' listed with correct DOM property name");
+  }
+}
+for (var idx in gShorthandPropertiesLikeLonghand) {
+  var prop = gShorthandPropertiesLikeLonghand[idx];
+  if (prop.pref && !IsCSSPropertyPrefEnabled(prop.pref)) {
+    continue;
+  }
+  var present = prop.name in gCSSProperties;
+  ok(present,
+     "'" + prop.name + "' listed in gCSSProperties");
+  if (present) {
+    ok(gCSSProperties[prop.name].type == CSS_TYPE_SHORTHAND_AND_LONGHAND,
+       "'" + prop.name + "' listed as CSS_TYPE_SHORTHAND_AND_LONGHAND");
+    ok(gCSSProperties[prop.name].domProp == prop.prop,
+       "'" + prop.name + "' listed with correct DOM property name");
+  }
+}
+
+/*
+ * Test that all shorthand properties have a subproperty list and all
+ * longhand properties do not.
+ */
+for (var prop in gCSSProperties) {
+  var entry = gCSSProperties[prop];
+  if (entry.pref && !IsCSSPropertyPrefEnabled(entry.pref)) {
+    continue;
+  }
+  if (entry.type == CSS_TYPE_LONGHAND) {
+    ok(!("subproperties" in entry),
+       "longhand property '" + prop + "' must not have subproperty list");
+  } else if (entry.type == CSS_TYPE_TRUE_SHORTHAND ||
+             entry.type == CSS_TYPE_SHORTHAND_AND_LONGHAND) {
+    ok("subproperties" in entry,
+       "shorthand property '" + prop + "' must have subproperty list");
+  }
+
+  if ("subproperties" in entry) {
+    var good = true;
+    if (entry.subproperties.length < 1) {
+      info("subproperty list for '" + prop + "' is empty");
+      good = false;
+    }
+    for (var idx in entry.subproperties) {
+      var subprop = entry.subproperties[idx];
+      if (!(subprop in gCSSProperties)) {
+        info("subproperty list for '" + prop + "' lists nonexistent subproperty '" + subprop + "'");
+        good = false;
+      }
+    }
+    ok(good, "property '" + prop + "' has a good subproperty list");
+  }
+
+  ok("initial_values" in entry && entry.initial_values.length >= 1,
+     "must have initial values for property '" + prop + "'");
+  ok("other_values" in entry && entry.other_values.length >= 1,
+     "must have non-initial values for property '" + prop + "'");
+}
+
+/*
+ * Test that only longhand properties or its aliases are listed as logical
+ * properties.
+ */
+for (var prop in gCSSProperties) {
+  var entry = gCSSProperties[prop];
+  if (entry.logical) {
+    ok(entry.type == CSS_TYPE_LONGHAND ||
+       (entry.alias_for && gCSSProperties[entry.alias_for].logical),
+       "property '" + prop + "' is listed as CSS_TYPE_LONGHAND or is an alias due to it " +
+       "being a logical property");
+  }
+}
+
+/*
+ * Test that axis is only specified for logical properties.
+ */
+for (var prop in gCSSProperties) {
+  var entry = gCSSProperties[prop];
+  if (entry.axis) {
+    ok(entry.logical,
+       "property '" + prop + "' is listed as an logical property due to its " +
+       "being listed as an axis-related property");
+  }
+}
+
+/*
+ * Test that DOM properties match the expected rules.
+ */
+for (var prop in gCSSProperties) {
+  var entry = gCSSProperties[prop];
+  var expectedDOMProp = prop.replace(/-([a-z])/g,
+                                     function(m, p1, offset, str) {
+                                       return p1.toUpperCase();
+                                     });
+  if (expectedDOMProp == "float") {
+    expectedDOMProp = "cssFloat";
+  } else if (prop.startsWith("-webkit")) {
+    // Our DOM accessors for webkit-prefixed properties start with lowercase w,
+    // not uppercase like standard DOM accessors.
+    expectedDOMProp = expectedDOMProp.replace(/^W/, "w");
+  }
+  is(entry.domProp, expectedDOMProp, "DOM property for " + prop);
+}
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_property_syntax_errors.html b/layout/style/test/test_property_syntax_errors.html
new file mode 100644
index 0000000000..1e3f382036
--- /dev/null
+++ b/layout/style/test/test_property_syntax_errors.html
@@ -0,0 +1,155 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test that we reject syntax errors listed in property_database.js</title>
+  <script 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 onload="run()">
+<p id="display"></p>
+<iframe id="quirks" src="data:text/html,<div id='testnode'></div>"></iframe>
+<div id="content" style="display: none">
+
+<div id="testnode"></div>
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(4);
+
+function check_not_accepted(decl, property, info, badval)
+{
+  decl.setProperty(property, badval, "");
+
+  is(decl.getPropertyValue(property), "",
+     "invalid value '" + badval + "' not accepted for '" + property +
+     "' property");
+
+  if ("subproperties" in info) {
+    for (var sidx in info.subproperties) {
+      var subprop = info.subproperties[sidx];
+      is(decl.getPropertyValue(subprop), "",
+         "invalid value '" + badval + "' not accepted for '" + property +
+         "' property when testing subproperty '" + subprop + "'");
+    }
+  }
+
+  decl.removeProperty(property);
+}
+
+function check_value_balanced(decl, property, badval)
+{
+  var goodProp =
+    (property == "background-color") ? "color" : "background-color";
+  decl.cssText = goodProp + ": red; " + property + ": " + badval + "; " +
+                 goodProp + ": green";
+  is(decl.getPropertyValue(goodProp), "green",
+     "invalid value '" + property + ": " + badval +
+     "' is balanced and does not lead to parsing errors afterwards");
+  decl.cssText = "";
+}
+
+function check_value_unbalanced(decl, property, badval)
+{
+  var goodProp =
+    (property == "background-color") ? "color" : "background-color";
+  decl.cssText = goodProp + ": green; " + property + ": " + badval + "; " +
+                 goodProp + ": red";
+  is(decl.getPropertyValue(goodProp), "green",
+     "invalid value '" + property + ": " + badval +
+     "' is unbalanced and absorbs what follows it");
+  decl.cssText = "";
+}
+
+function check_empty_value_rejected(decl, emptyval, property)
+{
+  var goodProp =
+    (property == "background-color") ? "color" : "background-color";
+  decl.cssText = goodProp + ": red; " + property + ":" + emptyval + "; " +
+                 goodProp + ": green";
+  is(decl.length, 1,
+     "empty value '" + property + ":" + emptyval +
+     "' is not accepted");
+  is(decl.getPropertyValue(goodProp), "green",
+     "empty value '" + property + ":" + emptyval +
+     "' is balanced and does not lead to parsing errors afterwards");
+  decl.cssText = "";
+}
+
+function run()
+{
+  var gDeclaration = document.getElementById("testnode").style;
+  var quirksFrame = document.getElementById("quirks");
+  var wrappedFrame = SpecialPowers.wrap(quirksFrame);
+  var gQuirksDeclaration = wrappedFrame.contentDocument
+                             .getElementById("testnode").style;
+
+  for (var property in gCSSProperties) {
+    var info = gCSSProperties[property];
+
+    check_empty_value_rejected(gDeclaration, "", property);
+    check_empty_value_rejected(gDeclaration, " ", property);
+
+    for (var idx in info.invalid_values) {
+      check_not_accepted(gDeclaration, property, info,
+                         info.invalid_values[idx]);
+      check_not_accepted(gQuirksDeclaration, property, info,
+                         info.invalid_values[idx]);
+      check_value_balanced(gDeclaration, property,
+                           info.invalid_values[idx]);
+    }
+
+    if ("quirks_values" in info) {
+      for (var quirkval in info.quirks_values) {
+        var standardval = info.quirks_values[quirkval];
+        check_not_accepted(gDeclaration, property, info, quirkval);
+        check_value_balanced(gDeclaration, property, quirkval);
+
+        gQuirksDeclaration.setProperty(property, quirkval, "");
+        gDeclaration.setProperty(property, standardval, "");
+        var quirkret = gQuirksDeclaration.getPropertyValue(property);
+        var standardret = gDeclaration.getPropertyValue(property);
+        isnot(quirkret, "", property + ": " + quirkval +
+                            " should be accepted in quirks mode");
+        is(quirkret, standardret, property + ": " + quirkval + " result");
+
+        if ("subproperties" in info) {
+          for (var sidx in info.subproperties) {
+            var subprop = info.subproperties[sidx];
+            var quirksub = gQuirksDeclaration.getPropertyValue(subprop);
+            var standardsub = gDeclaration.getPropertyValue(subprop);
+            isnot(quirksub, "", property + ": " + quirkval +
+                                " should be accepted in quirks mode" +
+                                " when testing subproperty " + subprop);
+            is(quirksub, standardsub, property + ": " + quirkval + " result" +
+                                      " when testing subproperty " + subprop);
+          }
+        }
+
+        gQuirksDeclaration.removeProperty(property);
+        gDeclaration.removeProperty(property);
+      }
+    }
+
+    for (var idx in info.unbalanced_values) {
+      check_not_accepted(gDeclaration, property, info,
+                         info.invalid_values[idx]);
+      check_not_accepted(gQuirksDeclaration, property, info,
+                         info.invalid_values[idx]);
+      check_value_unbalanced(gDeclaration, property,
+                             info.unbalanced_values[idx]);
+    }
+  }
+
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_pseudo_display_fixup.html b/layout/style/test/test_pseudo_display_fixup.html
new file mode 100644
index 0000000000..de4dd0f810
--- /dev/null
+++ b/layout/style/test/test_pseudo_display_fixup.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test item blockification of pseudo-elements</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #test {
+    display: flex;
+  }
+  #test::before, #test::after {
+    content: "test";
+    display: inline-block;
+    color: green;
+    /*
+     * NOTE(emilio): The transition rule is very intentional, to avoid testing
+     * the eagerly resolved style.
+     */
+    transition: color 1s ease;
+  }
+</style>
+<div id="test"></div>
+<script>
+test(function() {
+  document.body.offsetTop;
+  let test = document.getElementById("test");
+  assert_equals(getComputedStyle(test, "::before").display, "block");
+  assert_equals(getComputedStyle(test, "::after").display, "block");
+}, "::before and ::after pseudo-elements are blockified");
+</script>
diff --git a/layout/style/test/test_pseudoelement_parsing.html b/layout/style/test/test_pseudoelement_parsing.html
new file mode 100644
index 0000000000..b6fcf783f7
--- /dev/null
+++ b/layout/style/test/test_pseudoelement_parsing.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>Test for Bug 922669</title>
+<script src="/MochiKit/MochiKit.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+
+<style></style>
+
+<script>
+var style = document.querySelector("style");
+
+var gValidTests = [
+  "::-moz-progress-bar",
+  "::-moz-progress-bar:hover",
+  "::-moz-progress-bar:active",
+  "::-moz-progress-bar:focus",
+  "::-moz-progress-bar:hover:focus",
+  "#a::-moz-progress-bar:hover",
+  ":hover::-moz-progress-bar"
+];
+
+var gInvalidTests = [
+  "::foo",
+  "::-moz-progress-bar::-moz-progress-bar",
+  "::-moz-progress-bar::first-line",
+  "::-moz-progress-bar#a",
+  "::-moz-progress-bar:invalid",
+  "::-moz-focus-inner:active"
+];
+
+gValidTests.forEach(function(aTest) {
+  style.textContent = aTest + "{}";
+  is(style.sheet.cssRules.length, 1, aTest);
+  style.textContent = "";
+});
+
+gInvalidTests.forEach(function(aTest) {
+  style.textContent = aTest + "{}";
+  is(style.sheet.cssRules.length, 0, aTest);
+  style.textContent = "";
+});
+</script>
diff --git a/layout/style/test/test_pseudoelement_state.html b/layout/style/test/test_pseudoelement_state.html
new file mode 100644
index 0000000000..0a8c3d52f6
--- /dev/null
+++ b/layout/style/test/test_pseudoelement_state.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<title>Test for Bug 922669</title>
+<script src="/MochiKit/MochiKit.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+
+<iframe srcdoc="<!DOCTYPE html><style></style><div></div>"></iframe>
+
+<script>
+var gIsAndroid = navigator.appVersion.includes("Android");
+
+var gTests = [
+  // Interact with the ::-moz-progress-bar.
+  { markup:                 '<progress value="75" max="100"></progress>',
+    pseudoelement:          '::-moz-progress-bar',
+    common_style:           'progress { -moz-appearance: none; } progress::-moz-progress-bar { background: black; }',
+    hover_test_style:       'progress::-moz-progress-bar:hover { background: green; }',
+    hover_reference_style:  'progress::-moz-progress-bar { background: green; }',
+    active_test_style:      'progress::-moz-progress-bar:active { background: lime; }',
+    active_reference_style: 'progress::-moz-progress-bar { background: lime; }' },
+
+  // Interact with the part of the <progress> not covered by the ::-moz-progress-bar.
+  { markup:                 '<progress value="25" max="100"></progress>',
+    pseudoelement:          '::-moz-progress-bar',
+    common_style:           'progress { -moz-appearance: none; } progress::-moz-progress-bar { background: black; }',
+    hover_test_style:       'progress::-moz-progress-bar { background: green; } progress::-moz-progress-bar:hover { background: red; }',
+    hover_reference_style:  'progress::-moz-progress-bar { background: green; }',
+    active_test_style:      'progress::-moz-progress-bar { background: lime; } progress::-moz-progress-bar:active { background: red; }',
+    active_reference_style: 'progress::-moz-progress-bar { background: lime; }' },
+
+  // Interact with the ::-moz-range-thumb.
+  { markup:                 '<input type="range" value="50" min="0" max="100">',
+    pseudoelement:          '::-moz-range-thumb',
+    common_style:           'input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
+    hover_test_style:       'input::-moz-range-thumb:hover { background: green; }',
+    hover_reference_style:  'input::-moz-range-thumb { background: green; }',
+    active_test_style:      'input::-moz-range-thumb:active { background: lime; }',
+    active_reference_style: 'input::-moz-range-thumb { background: lime; }' },
+
+  // Interact with the part of the <input type="range"> not covered by the ::-moz-range-thumb.
+  { markup:                 '<input type="range" value="25" min="0" max="100">',
+    pseudoelement:          '::-moz-range-thumb',
+    common_style:           'input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
+    hover_test_style:       'input::-moz-range-thumb { background: green; } input::-moz-range-thumb:hover { background: red; }',
+    hover_reference_style:  'input::-moz-range-thumb { background: green; }',
+    active_test_style:      'input::-moz-range-thumb { background: lime; } input::-moz-range-thumb:active { background: red; }',
+    active_reference_style: 'input::-moz-range-thumb { background: lime; }' },
+
+  // Interact with the ::-moz-meter-bar.
+  { markup:                 '<meter value="75" min="0" max="100"></meter>',
+    pseudoelement:          '::-moz-meter-bar',
+    common_style:           'meter { -moz-appearance: none; } meter::-moz-meter-bar { background: black; }',
+    hover_test_style:       'meter::-moz-meter-bar:hover { background: green; }',
+    hover_reference_style:  'meter::-moz-meter-bar { background: green; }',
+    active_test_style:      'meter::-moz-meter-bar:active { background: lime; }',
+    active_reference_style: 'meter::-moz-meter-bar { background: lime; }' },
+
+  // Interact with the part of the <meter> not covered by the ::-moz-meter-bar.
+  { markup:                 '<meter value="25" min="0" max="100"></meter>',
+    pseudoelement:          '::-moz-meter-bar',
+    common_style:           'meter { -moz-appearance: none; } meter::-moz-meter-bar { background: black; }',
+    hover_test_style:       'meter::-moz-meter-bar { background: green; } meter::-moz-meter-bar:hover { background: red; }',
+    hover_reference_style:  'meter::-moz-meter-bar { background: green; }',
+    active_test_style:      'meter::-moz-meter-bar { background: lime; } meter::-moz-meter-bar:active { background: red; }',
+    active_reference_style: 'meter::-moz-meter-bar { background: lime; }' },
+
+  // Do the same as the "Interact with the ::-moz-range-thumb" subtest above,
+  // but with selectors that include descendant operators.
+  { markup:                 '<input type="range" value="50" min="0" max="100">',
+    pseudoelement:          '::-moz-range-thumb',
+    common_style:           'body input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
+    hover_test_style:       'body input::-moz-range-thumb:hover { background: green; }',
+    hover_reference_style:  'body input::-moz-range-thumb { background: green; }',
+    active_test_style:      'body input::-moz-range-thumb:active { background: lime; }',
+    active_reference_style: 'body input::-moz-range-thumb { background: lime; }' },
+
+  // Do the same as above, but using :is instead.
+  { markup:                 '<input type="range" value="50" min="0" max="100">',
+    pseudoelement:          '::-moz-range-thumb',
+    common_style:           'body input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
+    hover_test_style:       'body input::-moz-range-thumb:is(:hover) { background: green; }',
+    hover_reference_style:  'body input::-moz-range-thumb { background: green; }',
+    active_test_style:      'body input::-moz-range-thumb:is(:active) { background: lime; }',
+    active_reference_style: 'body input::-moz-range-thumb { background: lime; }' },
+
+  // Do the same as above, but using :not instead.
+  { markup:                 '<input type="range" value="50" min="0" max="100">',
+    pseudoelement:          '::-moz-range-thumb',
+    common_style:           'input { -moz-appearance: none; } input::-moz-range-thumb { background: green } input::-moz-range-thumb:not(:hover) { background: black; }',
+    hover_test_style:       '',
+    hover_reference_style:  'input::-moz-range-thumb { background: green !important; }',
+    active_test_style:      'input::-moz-range-thumb:active { background: lime !important; }',
+    active_reference_style: 'input::-moz-range-thumb { background: lime !important; }' },
+
+  // ::placeholder can't be tested, since the UA style sheet sets it to
+  // be pointer-events:none.
+];
+
+function countPixelDifferences(aCanvas1, aCanvas2) {
+  var ctx1 = aCanvas1.getContext("2d");
+  var ctx2 = aCanvas2.getContext("2d");
+  var data1 = ctx1.getImageData(0, 0, aCanvas1.width, aCanvas1.height);
+  var data2 = ctx2.getImageData(0, 0, aCanvas2.width, aCanvas2.height);
+  var n = 0;
+  for (var i = 0; i < data1.width * data2.height * 4; i += 4) {
+    if (data1.data[i] != data2.data[i] ||
+        data1.data[i + 1] != data2.data[i + 1] ||
+        data1.data[i + 2] != data2.data[i + 2] ||
+        data1.data[i + 3] != data2.data[i + 3]) {
+      n++;
+    }
+  }
+  return n;
+}
+
+function runTests() {
+  var iframe = document.querySelector("iframe");
+  var style = iframe.contentDocument.querySelector("style");
+  var div = iframe.contentDocument.querySelector("div");
+  var canvas1, canvas2;
+
+  function runTestPart1(aIndex) {
+    var test = gTests[aIndex];
+    div.innerHTML = test.markup;
+    style.textContent = test.common_style;
+    is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 0, 0)", "subtest #" + aIndex + ", computed style");
+    style.textContent += test.hover_test_style;
+    synthesizeMouseAtCenter(div.lastChild, { type: 'mouseover' }, iframe.contentWindow);
+  }
+
+  function runTestPart2(aIndex) {
+    var test = gTests[aIndex];
+    canvas1 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
+    style.textContent = test.common_style + test.hover_reference_style;
+  }
+
+  function runTestPart3(aIndex) {
+    var test = gTests[aIndex];
+    canvas2 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
+    ok(canvas1.width == canvas2.width && canvas1.height == canvas2.height, "hover subtest #" + aIndex + ", canvas sizes equal");
+    is(countPixelDifferences(canvas1, canvas2), 0, "hover subtest #" + aIndex + ", number of different pixels");
+    is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 128, 0)", "hover subtest #" + aIndex + ", computed style");
+
+    if (!gIsAndroid) {
+      style.textContent = test.common_style + test.active_test_style;
+      synthesizeMouseAtCenter(div.lastChild, { type: 'mousedown' }, iframe.contentWindow);
+    }
+  }
+
+  function runTestPart4(aIndex) {
+    if (!gIsAndroid) {
+      var test = gTests[aIndex];
+      canvas1 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
+      synthesizeMouseAtCenter(div.lastChild, { type: 'mouseup' }, iframe.contentWindow);
+      style.textContent = test.common_style + test.active_reference_style;
+    }
+  }
+
+  function runTestPart5(aIndex) {
+    if (!gIsAndroid) {
+      var test = gTests[aIndex];
+      canvas2 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
+      ok(canvas1.width == canvas2.width && canvas1.height == canvas2.height, "active subtest #" + aIndex + ", canvas sizes equal");
+      is(countPixelDifferences(canvas1, canvas2), 0, "active subtest #" + aIndex + ", number of different pixels");
+      is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 255, 0)", "active subtest #" + aIndex + ", computed style");
+    }
+  }
+
+  for (var i = 0; i < gTests.length; i++) {
+    setTimeout(runTestPart1, 0, i);
+    setTimeout(runTestPart2, 0, i);
+    setTimeout(runTestPart3, 0, i);
+    setTimeout(runTestPart4, 0, i);
+    setTimeout(runTestPart5, 0, i);
+  }
+  setTimeout(function() { SimpleTest.finish(); }, 0);
+}
+
+SimpleTest.waitForExplicitFinish();
+window.addEventListener("load", async function() {
+  await SpecialPowers.contentTransformsReceived(window);
+  runTests();
+});
+</script>
diff --git a/layout/style/test/test_query_container_for.html b/layout/style/test/test_query_container_for.html
new file mode 100644
index 0000000000..90dca9fab9
--- /dev/null
+++ b/layout/style/test/test_query_container_for.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<title>Test for bug 1789191</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
+<style>
+@container (min-width: 0px) {
+}
+
+@container name (min-width: 0px) {
+}
+
+@container (min-height: 0px) {
+}
+
+div {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  margin: 10px;
+}
+
+.container-height {
+  container-type: size;
+}
+
+.container-unnamed {
+  container-type: inline-size;
+}
+
+.container-named {
+  container-type: inline-size;
+  container-name: name;
+}
+</style>
+
+<div id="child1"></div>
+
+<div class="container-height" id="container1">
+  <div class="container-named" id="container2">
+    <div class="container-unnamed" id="container3">
+      <div id="child2"></div>
+    </div>
+  </div>
+</div>
+
+<script>
+  let sheet = document.querySelector("style").sheet;
+  let withoutFilter = SpecialPowers.wrap(sheet.cssRules[0]);
+  let withFilter = SpecialPowers.wrap(sheet.cssRules[1]);
+  let heightQuery = SpecialPowers.wrap(sheet.cssRules[2]);
+
+  // Container query selection requires up-to-date layout information.
+  document.body.getBoundingClientRect();
+
+  is(withoutFilter.queryContainerFor(child1), null, "No filter, no container");
+  is(withFilter.queryContainerFor(child1), null, "Filter, no container");
+  is(heightQuery.queryContainerFor(child1), null, "Height, no container");
+
+  is(SpecialPowers.unwrap(withoutFilter.queryContainerFor(child2)), container3, "No filter, container");
+  is(SpecialPowers.unwrap(withFilter.queryContainerFor(child2)), container2, "Filter");
+  is(SpecialPowers.unwrap(heightQuery.queryContainerFor(child2)), container1, "Height");
+</script>
diff --git a/layout/style/test/test_redundant_font_download.html b/layout/style/test/test_redundant_font_download.html
new file mode 100644
index 0000000000..c6930ae401
--- /dev/null
+++ b/layout/style/test/test_redundant_font_download.html
@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<html>
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=879963 -->
+<head>
+  <meta charset="utf-8">
+  <title>Test for bug 879963</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+
+<body>
+  <!-- Two <style> elements with identical @font-face rules.
+       Although multiple @font-face at-rules for the same family are legal,
+       and add faces to the family, we should NOT download the same resource
+       twice just because we have a duplicate face entry. -->
+  <style type="text/css">
+    @font-face {
+      font-family: foo;
+      src: url("redundant_font_download.sjs?q=font");
+    }
+    .test {
+      font-family: foo;
+    }
+  </style>
+
+  <style type="text/css">
+    @font-face {
+      font-family: foo;
+      src: url("redundant_font_download.sjs?q=font");
+    }
+    .test {
+      font-family: foo;
+    }
+  </style>
+
+  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=879963">Mozilla Bug 879963</a>
+
+  <div>
+    <!-- the 'init' request returns an image (just so we can see it's working)
+         and initializes the request logging in our sjs server -->
+    <img src="redundant_font_download.sjs?q=init">
+  </div>
+
+  <div id="test">
+    Test
+  </div>
+
+  <div>
+    <img id="image2" src="">
+  </div>
+
+  <script type="application/javascript">
+    // helper to retrieve the server's request log as text, synchronously
+    function getRequestLog() {
+      var xmlHttp = new XMLHttpRequest();
+      xmlHttp.open("GET", "redundant_font_download.sjs?q=report", false);
+      xmlHttp.send(null);
+      return xmlHttp.responseText;
+    }
+
+    // retrieve just the most recent request the server has seen
+    function getLastRequest() {
+      return getRequestLog().split(";").pop();
+    }
+
+    // poll the server at intervals of animation frame callback until it has
+    // seen a specific request, or until maxTime ms have passed
+    function waitForRequest(request, maxTime, func) {
+      timeLimit = Date.now() + maxTime;
+      requestAnimationFrame(function rAF() {
+        var req = getLastRequest();
+        if (req == request || Date.now() > timeLimit) {
+          func();
+          return;
+        }
+        requestAnimationFrame(rAF);
+      });
+    }
+
+    // initially disable the second of the <style> elements,
+    // so we only have a single copy of the font-face
+    document.getElementsByTagName("style")[1].disabled = true;
+
+    SimpleTest.waitForExplicitFinish();
+
+    // We perform a series of actions that trigger requests to the .sjs server,
+    // and poll the server's request log at each stage to check that it has
+    // seen the request we expected before we proceed to the next step.
+    function startTest() {
+      is(getRequestLog(), "init", "request log has been initialized");
+
+      // this should trigger a font download
+      document.getElementById("test").className = "test";
+
+      // wait to confirm that the server has received the request
+      waitForRequest("font", 5000, continueTest1);
+    }
+
+    function continueTest1() {
+      is(getRequestLog(), "init;font", "server received font request");
+
+      // trigger a request for the second image, to provide an explicit
+      // delimiter in the log before we enable the second @font-face rule
+      document.getElementById("image2").src = "redundant_font_download.sjs?q=image";
+
+      waitForRequest("image", 5000, continueTest2);
+    }
+
+    function continueTest2() {
+      is(getRequestLog(), "init;font;image", "server received image request");
+
+      // enable the second <style> element: we should NOT see a second font request,
+      // we expect waitForRequest to time out instead
+      document.getElementsByTagName("style")[1].disabled = false;
+
+      waitForRequest("font", 1000, continueTest3);
+    }
+
+    function continueTest3() {
+      is(getRequestLog(), "init;font;image", "should NOT have re-requested the font");
+
+      SimpleTest.finish();
+    }
+
+    waitForRequest("init", 5000, startTest);
+
+  </script>
+
+</body>
+
+</html>
diff --git a/layout/style/test/test_reframe_cb.html b/layout/style/test/test_reframe_cb.html
new file mode 100644
index 0000000000..549d04c5c0
--- /dev/null
+++ b/layout/style/test/test_reframe_cb.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>
+  Test for bug 1519371: We don't reframe for changes that affect our containing
+  block status unless whether we're a containing block really changed.
+</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<div id="content"></div>
+<script>
+SimpleTest.waitForExplicitFinish();
+const utils = SpecialPowers.getDOMWindowUtils(window);
+
+function expectReframe(shouldHaveReframed, callback) {
+  document.documentElement.offsetTop;
+  const previousConstructCount = utils.framesConstructed;
+  const previousRestyleGeneration = utils.restyleGeneration;
+
+  callback();
+
+  document.documentElement.offsetTop;
+  isnot(previousRestyleGeneration, utils.restyleGeneration,
+        "We should have restyled");
+  (shouldHaveReframed ? isnot : is)(previousConstructCount,
+                                    utils.framesConstructed,
+    `We should ${shouldHaveReframed ? "" : "not"} have reframed`);
+}
+
+const content = document.getElementById("content");
+
+// Without fixed-pos descendants, we should not reframe.
+expectReframe(false, () => {
+  content.style.transform = "scale(1)";
+});
+
+content.style.transform = "";
+content.innerHTML = `<div style="position: fixed"></div>`;
+
+// With fixed-pos descendants, got to reframe.
+expectReframe(true, () => {
+  content.style.transform = "scale(1)";
+});
+
+// If our containing-block-ness didn't change, we should not need to reframe.
+expectReframe(false, () => {
+  content.style.willChange = "transform";
+});
+
+// If it does change, we need to reframe.
+expectReframe(true, () => {
+  content.style.willChange = "";
+  content.style.transform = "";
+});
+
+SimpleTest.finish();
+</script>
diff --git a/layout/style/test/test_reframe_image_loading.html b/layout/style/test/test_reframe_image_loading.html
new file mode 100644
index 0000000000..2f8a44c361
--- /dev/null
+++ b/layout/style/test/test_reframe_image_loading.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>
+  Test for bug 1395964: We don't reframe for image loading state changes.
+</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<img id="content" src="support/1x1-transparent.png"></div>
+<script>
+SimpleTest.waitForExplicitFinish();
+const utils = SpecialPowers.getDOMWindowUtils(window);
+
+const content = document.getElementById("content");
+
+onload = function() {
+  content.offsetTop;
+
+  const previousConstructCount = utils.framesConstructed;
+
+  content.addEventListener("load", function() {
+    content.offsetTop;
+    is(previousConstructCount, utils.framesConstructed,
+       "We should not have reframed");
+    SimpleTest.finish();
+  });
+
+  content.src = "support/blue-100x100.png";
+}
+</script>
diff --git a/layout/style/test/test_reframe_input.html b/layout/style/test/test_reframe_input.html
new file mode 100644
index 0000000000..2887548abf
--- /dev/null
+++ b/layout/style/test/test_reframe_input.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test for bug 1658302: We don't reframe for placeholder attribute value changes.</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<input id="input">
+<textarea id="textarea"></textarea>
+<script>
+SimpleTest.waitForExplicitFinish();
+const utils = SpecialPowers.DOMWindowUtils;
+
+function expectReframe(shouldHaveReframed, callback) {
+  document.documentElement.offsetTop;
+  const previousConstructCount = utils.framesConstructed;
+  const previousReflowCount = utils.framesReflowed;
+
+  callback();
+
+  document.documentElement.offsetTop;
+  isnot(previousReflowCount, utils.framesReflowed, "We should have reflowed");
+  (shouldHaveReframed ? isnot : is)(previousConstructCount,
+                                    utils.framesConstructed,
+    `We should ${shouldHaveReframed ? "" : "not"} have reframed`);
+}
+
+for (const control of document.querySelectorAll("input, textarea")) {
+  // Creating the placeholder attribute reframes right now.
+  //
+  // TODO: Could be avoided with some more work.
+  expectReframe(true, () => {
+    control.placeholder = "foo";
+  });
+
+  // Incrementally changing it should not reframe, just reflow.
+  expectReframe(false, () => {
+    control.placeholder = "bar";
+  });
+
+  // Removing the placeholder attribute reframes right now.
+  //
+  // TODO: Could maybe be avoided with some more work.
+  expectReframe(true, () => {
+    control.removeAttribute("placeholder");
+  });
+}
+
+SimpleTest.finish();
+</script>
diff --git a/layout/style/test/test_reframe_pseudo_element.html b/layout/style/test/test_reframe_pseudo_element.html
new file mode 100644
index 0000000000..0e0b418e81
--- /dev/null
+++ b/layout/style/test/test_reframe_pseudo_element.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>
+  Test for bug 1376352: We don't reframe all the time a replaced element that
+  matches generated content rules.
+</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<style>
+#flex::before,
+input::before {
+  content: "Foo";
+}
+</style>
+<input type="text">
+<div id="flex"></div>
+<script>
+SimpleTest.waitForExplicitFinish();
+const utils = SpecialPowers.getDOMWindowUtils(window);
+
+function testNoReframe(callback) {
+  document.documentElement.offsetTop;
+  const previousConstructCount = utils.framesConstructed;
+  const previousRestyleGeneration = utils.restyleGeneration;
+
+  callback();
+
+  document.documentElement.offsetTop;
+  isnot(previousRestyleGeneration, utils.restyleGeneration,
+        "We should have restyled");
+  is(previousConstructCount, utils.framesConstructed,
+     "We shouldn't have reframed");
+}
+
+testNoReframe(function() {
+  const input = document.querySelector('input');
+  input.style.color = "blue";
+});
+
+testNoReframe(function() {
+  const flex = document.getElementById('flex');
+  flex.style.color = "blue";
+});
+
+SimpleTest.finish();
+</script>
diff --git a/layout/style/test/test_rem_unit.html b/layout/style/test/test_rem_unit.html
new file mode 100644
index 0000000000..bd46524798
--- /dev/null
+++ b/layout/style/test/test_rem_unit.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=478321
+-->
+<head>
+  <title>Test for CSS 'rem' unit</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=478321">Mozilla Bug 478321</a>
+<p id="display"></p>
+<p id="display2"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for CSS 'rem' unit **/
+
+function px_to_num(str)
+{
+    return Number(String(str).match(/^([\d.]+)px$/)[1]);
+}
+
+function fs(elt)
+{
+    return px_to_num(getComputedStyle(elt, "").fontSize);
+}
+
+var html = document.documentElement;
+var body = document.body;
+var p = document.getElementById("display");
+var p2 = document.getElementById("display2");
+
+html.style.font = "initial";
+
+var defaultFontSize = fs(html);
+
+// NOTE:  This test assumes that the default font size is an
+// integral number of pixels (which is always the case at present).
+// If that ever becomes false, the calls to "is" may need to be replaced by
+// calls to "isapprox" that allows errors of up to some small fraction
+// of a pixel.
+
+html.style.fontSize = "3rem";
+is(fs(html), 3 * defaultFontSize,
+   "3rem on root should triple root's font size");
+body.style.font = "initial";
+is(fs(body), defaultFontSize,
+   "initial should produce initial font size");
+body.style.fontSize = "1em";
+is(fs(body), 3 * defaultFontSize, "1em should inherit from parent");
+body.style.fontSize = "200%";
+is(fs(body), 6 * defaultFontSize, "200% should double parent");
+body.style.fontSize = "2rem";
+is(fs(body), 6 * defaultFontSize, "2rem should double root");
+p.style.font = "inherit";
+is(fs(p), 6 * defaultFontSize, "inherit should inherit from parent");
+p2.style.fontSize = "2rem";
+is(fs(p2), 6 * defaultFontSize, "2rem should double root");
+body.style.font = "initial";
+is(fs(p), defaultFontSize, "inherit should inherit from parent");
+is(fs(p2), 6 * defaultFontSize, "2rem should double root");
+body.style.fontSize = "5em";
+html.style.fontSize = "200%";
+is(fs(p), 10 * defaultFontSize, "inherit should inherit from parent");
+is(fs(p2), 4 * defaultFontSize, "2rem should double root");
+
+
+// Make things readable again.
+html.style.fontSize = "1em";
+body.style.fontSize = "1em";
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_restyle_table_wrapper.html b/layout/style/test/test_restyle_table_wrapper.html
new file mode 100644
index 0000000000..d8049b142e
--- /dev/null
+++ b/layout/style/test/test_restyle_table_wrapper.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>
+  Test for bug 1371955: We don't incorrectly think that a table wrapper style
+  is the main table element style.
+</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<style>
+/* Test implicitly ::before and ::after too */
+span::before, span::after {
+  content: "";
+  display: table;
+}
+</style>
+<table id="realTable" style="margin: 10px"></table>
+<span id="spanTable" style="display: table; padding: 10px;"></span>
+<script>
+SimpleTest.waitForExplicitFinish();
+const utils = SpecialPowers.getDOMWindowUtils(window);
+document.documentElement.offsetTop;
+for (const element of [realTable, spanTable]) {
+  const previousReflowCount = utils.framesReflowed;
+  const previousRestyleGeneration = utils.restyleGeneration;
+  element.style.color = "blue";
+  document.documentElement.offsetTop;
+  isnot(previousRestyleGeneration, utils.restyleGeneration,
+        "We should have restyled");
+  is(previousReflowCount, utils.framesReflowed,
+     "We shouldn't have reflowed");
+}
+SimpleTest.finish();
+</script>
diff --git a/layout/style/test/test_restyles_in_smil_animation.html b/layout/style/test/test_restyles_in_smil_animation.html
new file mode 100644
index 0000000000..1bfef49aa9
--- /dev/null
+++ b/layout/style/test/test_restyles_in_smil_animation.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<head>
+<meta charset=utf-8>
+<title>Tests restyles in smil animation</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/paint_listener.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+
+<div id="target-div">
+  <svg>
+    <rect id="svg-rect" width="100%" height="100%" fill="lime"/>
+  </svg>
+</div>
+
+<script>
+"use strict";
+
+// Waits for |frameCount| requestAnimationFrame callbacks.
+// Returns the number of frame actually waited.
+function waitForAnimationFrames(frameCount) {
+  return new Promise(function(resolve, reject) {
+    let previousTime = document.timeline.currentTime;
+    let framesWaited = 0;
+    function handleFrame() {
+      // SMIL uses a time resolution of 1ms but our software-based vsync timer
+      // sometimes produces ticks with an interval of less than 1ms. In such
+      // cases we will skip restyling for SMIL animations since the SMIL time
+      // will not change.
+      //
+      // In the following we attempt to detect such situations and wait an
+      // additional frame when we detect it. However, the detection is not
+      // completely accurate since it uses the timeline time which is based on
+      // the navigation start time whereas the SMIL start time is based on the
+      // refresh driver time.
+      //
+      // To account for this inaccuracy the Promise returned by this method
+      // resolves with the number of frames waited with the additional frames.
+      // This can be used by the call site to add a suitable tolerance to the
+      // number of restylings it expects to happen. For example, if a call site
+      // is anticipating each animation frame to cause restyling, then the
+      // number of restylings, x, it should expect is frameCount <= x <=
+      // framesWaited.
+      const difference = document.timeline.currentTime - previousTime;
+      framesWaited++;
+      if (difference >= 1.0 && --frameCount <= 0) {
+        resolve(framesWaited);
+        return;
+      }
+
+      previousTime = document.timeline.currentTime;
+      window.requestAnimationFrame(handleFrame); // wait another frame
+    }
+    window.requestAnimationFrame(handleFrame);
+  });
+}
+
+// Returns an object consisting of observed styling count and the number of
+// frames actually waited because we detected a possibly overflapping SMIL
+// time.
+function observeStyling(frameCount) {
+  var Ci = SpecialPowers.Ci;
+  var docShell = SpecialPowers.wrap(window).docShell;
+
+  docShell.recordProfileTimelineMarkers = true;
+  docShell.popProfileTimelineMarkers();
+
+  return new Promise(function(resolve) {
+    return waitForAnimationFrames(frameCount).then(framesWaited => {
+      var markers = docShell.popProfileTimelineMarkers();
+      docShell.recordProfileTimelineMarkers = false;
+      var stylingMarkers = Array.prototype.filter.call(markers, function(marker, index) {
+        return marker.name == 'Styles' && marker.isAnimationOnly;
+      });
+      resolve({
+        stylingCount: stylingMarkers.length,
+        framesWaited: framesWaited,
+      });
+    });
+  });
+}
+
+function ensureElementRemoval(aElement) {
+  return new Promise(function(resolve) {
+    aElement.remove();
+    waitForAllPaintsFlushed(resolve);
+  });
+}
+
+function waitForPaintFlushed() {
+  return new Promise(function(resolve) {
+    waitForAllPaintsFlushed(resolve);
+  });
+}
+
+SimpleTest.waitForExplicitFinish();
+
+add_task(async function smil_is_in_display_none_subtree() {
+  await waitForPaintFlushed();
+
+  var animate =
+    document.createElementNS("http://www.w3.org/2000/svg", "animate");
+  animate.setAttribute("attributeType", "XML");
+  animate.setAttribute("attributeName", "fill");
+  animate.setAttribute("values", "red;lime");
+  animate.setAttribute("dur", "1s");
+  animate.setAttribute("repeatCount", "indefinite");
+  document.getElementById("svg-rect").appendChild(animate);
+
+  await waitForAnimationFrames(2);
+
+  let result = await observeStyling(5);
+  // FIXME: Bug 866411: SMIL animations sometimes skip restyles when the target
+  // element is newly associated with an nsIFrame.
+  ok(result.stylingCount >= 4 &&
+     result.stylingCount <= result.framesWaited,
+     `should restyle in most frames (got ${result.stylingCount} restyles ` +
+     `over ${result.framesWaited} frames, expected 4~${result.framesWaited})`);
+
+  var div = document.getElementById("target-div");
+
+  div.style.display = "none";
+  getComputedStyle(div).display;
+  await waitForPaintFlushed();
+
+  result = await observeStyling(5);
+  is(result.stylingCount, 0, "should never restyle if display:none");
+
+  div.style.display = "";
+  getComputedStyle(div).display;
+  await waitForAnimationFrames(2);
+
+  result = await observeStyling(5);
+  // FIXME: Bug 866411: SMIL animations sometimes skip restyles when the target
+  // element is newly associated with an nsIFrame.
+  ok(result.stylingCount >= 4 &&
+     result.stylingCount <= result.framesWaited,
+     `should restyle again (got ${result.stylingCount} restyles over ` +
+     `${result.framesWaited} frames, expected 4~${result.framesWaited})`);
+
+  await ensureElementRemoval(animate);
+});
+</script>
+</body>
diff --git a/layout/style/test/test_revert.html b/layout/style/test/test_revert.html
new file mode 100644
index 0000000000..48897a75ca
--- /dev/null
+++ b/layout/style/test/test_revert.html
@@ -0,0 +1,103 @@
+<!DOCTYPE HTML>
+<title>Test for computation of CSS 'revert' on all properties</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="property_database.js"></script>
+<style id="stylesheet"></style>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css" />
+<div id="inheritanceParent">
+  <div id="inherited"></div>
+</div>
+<div id="nonInherited"></div>
+<div id="noAuthorStyleApplied"></div>
+<pre id="test">
+<script class="testbody">
+
+const kSheet = document.getElementById("stylesheet").sheet;
+const kAllDifferentFromInitialRule = kSheet.cssRules[kSheet.insertRule("#inheritanceParent {}", kSheet.cssRules.length)];
+const kPrerequisites = kSheet.cssRules[kSheet.insertRule("#inherited, #inheritanceParent, #nonInherited, #noAuthorStyleApplied {}", kSheet.cssRules.length)];
+const kResetPropRule = kSheet.cssRules[kSheet.insertRule("#nonInherited {}", kSheet.cssRules.length)];
+
+const kInheritedDiv = document.getElementById("inherited");
+const kResetDiv = document.getElementById("nonInherited");
+const kNoAuthorStylesDiv = document.getElementById("noAuthorStyleApplied");
+
+function computedValue(node, property) {
+  return get_computed_value(getComputedStyle(node), property);
+}
+
+function getInitialValue(node, property) {
+  node.style.setProperty(property, "initial");
+  const initial = computedValue(node, property);
+  node.style.removeProperty(property);
+  return initial;
+}
+
+function testResetProperty(property, info) {
+  kResetPropRule.style.setProperty(property, info.other_values[0]);
+
+  const div = kResetDiv;
+  const initial = getInitialValue(div, property);
+  const computed = computedValue(div, property);
+
+  isnot(computed, initial, `${property}: Should get something non-initial to begin with`);
+
+  const defaultValue = computedValue(kNoAuthorStylesDiv, property);
+
+  div.style.setProperty(property, "revert");
+  const reverted = computedValue(div, property);
+  is(reverted, defaultValue, `${property}: Should behave as if there was no author style`);
+  div.style.removeProperty(property);
+  kResetPropRule.style.removeProperty(property);
+}
+
+function testInheritedProperty(property, info) {
+  // Given how line-height works, and that it always returns the used value, we
+  // cannot test it. The prerequisites for line-height makes getComputedStyle
+  // and getDefaultComputedStyle return the same, even though the computed value
+  // is different (normal vs. 19px).
+  if (property == "line-height")
+    return;
+
+  const div = kInheritedDiv;
+  const initial = getInitialValue(div, property);
+  const parentValue = computedValue(div.parentNode, property);
+
+  isnot(parentValue, initial, `${property}: Should inherit something non-initial to begin with`);
+
+  const inheritedValue = computedValue(div, property);
+  const hasUARule = inheritedValue != parentValue;
+
+  const defaultValue = computedValue(kNoAuthorStylesDiv, property);
+  (hasUARule ? is : isnot)(defaultValue, inheritedValue, `${property}: Should get the non-inherited value from somewhere (expected ${hasUARule ? "UA Rule" : "inheritance"} - inherited: ${inheritedValue} - parent: ${parentValue} - default: ${defaultValue})`);
+
+  div.style.setProperty(property, "revert");
+  const reverted = computedValue(div, property);
+  if (hasUARule)
+    is(reverted, defaultValue, `${property}: Should behave as if there was no author style`);
+  else
+    is(reverted, inheritedValue, `${property}: Should behave as if there was no author style`);
+  div.style.removeProperty(property);
+}
+
+function testProperty(property, info) {
+  if (info.prerequisites)
+    for (const prereq in info.prerequisites)
+      kPrerequisites.style.setProperty(prereq, info.prerequisites[prereq]);
+  if (info.inherited)
+    testInheritedProperty(property, info);
+  else
+    testResetProperty(property, info);
+  kPrerequisites.style = "";
+}
+
+for (const prop in gCSSProperties) {
+  const info = gCSSProperties[prop];
+  if (info.type != CSS_TYPE_LONGHAND)
+    continue;
+  kAllDifferentFromInitialRule.style.setProperty(prop, info.other_values[0]);
+}
+
+for (const prop in gCSSProperties)
+  testProperty(prop, gCSSProperties[prop]);
+</script>
+</pre>
diff --git a/layout/style/test/test_root_node_display.html b/layout/style/test/test_root_node_display.html
new file mode 100644
index 0000000000..54dd9c222c
--- /dev/null
+++ b/layout/style/test/test_root_node_display.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=969460
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 969460</title>
+  <script 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=969460">Mozilla Bug 969460</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  <div id="float" style="float: left"></div>
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 969460: Test that "display" on the root node is computed
+    using the same conversion that we use for display on floated elements **/
+
+function test_display_value(val)
+{
+  var floatElem = document.getElementById("float");
+  floatElem.style.display = val;
+  var floatConversion = window.getComputedStyle(floatElem).display;
+  floatElem.style.display = "";
+
+  var rootNode = document.documentElement;
+  rootNode.style.display = val;
+  rootNode.offsetHeight; // (Flush layout, to be sure layout can handle 'val')
+  var rootConversion = window.getComputedStyle(rootNode).display;
+  rootNode.style.display = "";
+
+  // Special case: "display:list-item" does not get modified by 'float',
+  // but the spec allows us to convert it to 'block' on the root node
+  // (and we do convert it, so that we don't have to support documents whose
+  // root node is a list-item).
+  if (val == "list-item") {
+    is(floatConversion, val, "'float' shouldn't affect 'display:list-item'");
+    is(rootConversion, "block",
+       "We traditionally convert '" + val + "' on the root node to " +
+       "'display:block' (though if that changes, it's not technically a bug, " +
+       "as long as we support it properly).");
+} else if (val == "inline list-item" ||
+           val == "inline flow-root list-item") {
+    is(floatConversion, "list-item", "'float' should blockify '" + val + "'");
+    is(rootConversion, "block",
+       "We traditionally convert '" + val + "' on the root node to " +
+       "'display:block' (though if that changes, it's not technically a bug, " +
+       "as long as we support it properly).");
+  } else if (val == "contents") {
+    is(floatConversion, val, "'float' shouldn't affect 'display:contents'");
+    is(rootConversion, "block",
+       "'display:contents' on the root node computes to block-level per" +
+       "http://dev.w3.org/csswg/css-display/#transformations");
+  } else {
+    is(rootConversion, floatConversion,
+       "root node should make 'display:" + val + "' compute to the same " +
+       "value that it computes to on a floated element");
+  }
+}
+
+var displayInfo = gCSSProperties.display;
+displayInfo.initial_values.forEach(test_display_value);
+displayInfo.other_values.forEach(test_display_value);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_rule_insertion.html b/layout/style/test/test_rule_insertion.html
new file mode 100644
index 0000000000..fafa8444aa
--- /dev/null
+++ b/layout/style/test/test_rule_insertion.html
@@ -0,0 +1,244 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=816720
+-->
+<head>
+  <title>Test for Bug 816720</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css" id="style"></style>
+</head>
+<body>
+
+<pre id="test"></pre>
+
+<p><span id=control-serif>........</span></p>
+<p><span id=control-monospace>........</span></p>
+<p><span id=test-font>........</span></p>
+
+<style id=other-styles>
+  #test { font-size: 16px; animation: test 1s both }
+  #control-serif { font: 16px serif }
+  #test-font { font: 16px UnlikelyFontName, serif }
+</style>
+
+<p><span id=control-decimal></span></p>
+<p><span id=control-cjk-decimal></span></p>
+<p><span id=test-counter-style></span></p>
+
+<style>
+  #control-decimal::before { content: counter(a, decimal); }
+  #control-cjk-decimal::before { content: counter(a, cjk-decimal); }
+  #test-counter-style::before { content: counter(a, unlikely-counter-style); }
+</style>
+
+<script type="application/javascript">
+
+// Monospace fonts available on all the platforms we're testing on.
+//
+// XXX Once bug 817220 is fixed we could instead use the value of
+// font.name.monospace.x-western as the monospace font to use.
+var MONOSPACE_FONTS = [
+  "Courier",
+  "Courier New",
+  "Monaco",
+  "DejaVu Sans Mono",
+  "Droid Sans Mono"
+];
+
+var test = document.getElementById("test");
+var controlSerif = document.getElementById("control-serif");
+var controlMonospace = document.getElementById("control-monospace");
+var testFont = document.getElementById("test-font");
+var otherStyles = document.getElementById("other-styles");
+
+otherStyles.sheet.insertRule("#control-monospace { font: 16px " +
+                             MONOSPACE_FONTS + ", serif }", 0);
+
+var monospaceWidth = controlMonospace.getBoundingClientRect().width;
+var serifWidth = controlSerif.getBoundingClientRect().width;
+
+var controlDecimal = document.getElementById("control-decimal");
+var controlCJKDecimal = document.getElementById("control-cjk-decimal");
+var testCounterStyle = document.getElementById("test-counter-style");
+
+var decimalWidth = controlDecimal.getBoundingClientRect().width;
+var cjkDecimalWidth = controlCJKDecimal.getBoundingClientRect().width;
+
+// [at-rule type, passing condition, failing condition]
+var outerRuleInfo = [
+  ["@media", "all", "not all"],
+  ["@-moz-document", "url-prefix('')", "url-prefix('zzz')"],
+  ["@supports", "(color: green)", "(unknown: unknown)"]
+];
+
+// [rule, function to test whether the rule was successfully inserted and applied]
+var innerRuleInfo = [
+  ["#test { text-decoration: underline; }",
+   function(aApplied, aParent, aException) {
+     return !aException &&
+            window.getComputedStyle(test).textDecorationLine ==
+               (aApplied ? "underline" : "none");
+   }],
+  ["@page { margin: 4cm; }",
+   function(aApplied, aParent, aException) {
+     // just test whether it threw
+     return !aException;
+   }],
+  ["@keyframes test { from { font-size: 100px; } to { font-size: 100px; } }",
+   function(aApplied, aParent, aException) {
+     return !aException &&
+            window.getComputedStyle(test).fontSize ==
+                (aApplied ? "100px" : "16px")
+   }],
+  ["@font-face { font-family: UnlikelyFontName; src: " +
+     MONOSPACE_FONTS.map(function(s) { return "local('" + s + "')" }).join(", ") + "; }",
+   function(aApplied, aParent, aException) {
+     var width = testFont.getBoundingClientRect().width;
+     if (aException) {
+       return false;
+     }
+     if (navigator.oscpu.match(/Linux/) ||
+         navigator.oscpu.match(/Android/) ||
+         SpecialPowers.Services.appinfo.name == "B2G") {
+       return true;
+    }
+    return Math.abs(width - (aApplied ? monospaceWidth : serifWidth)) <= 1; // bug 769194 prevents local()
+                                             // fonts working on Android
+   }],
+  ["@import url(nothing.css);",
+   function(aApplied, aParent, aException) {
+     // just test whether it threw
+     return aParent instanceof CSSRule ? aException : !aException;
+   }],
+  ["@namespace test url(http://example.org);",
+   function(aApplied, aParent, aException) {
+     // just test whether it threw
+     return aParent instanceof CSSRule ? aException : !aException;
+   }],
+  ["@counter-style unlikely-counter-style { system: extends cjk-decimal; }",
+   function (aApplied, aParent, aException) {
+     var width = testCounterStyle.getBoundingClientRect().width;
+     if (aException) {
+       return false;
+     }
+     return width == (aApplied ? cjkDecimalWidth : decimalWidth);
+   }],
+];
+
+function runTest()
+{
+  // First, assert that our assumed available fonts are indeed available
+  // and have expected metrics.
+  ok(monospaceWidth > 0, "monospace text has width");
+  ok(serifWidth > 0, "serif text has width");
+  ok(Math.abs(monospaceWidth - serifWidth) > 1, "monospace and serif text have sufficiently different widths");
+
+  // And that the #test-font element starts off using the "serif" font.
+  var initialFontTestWidth = testFont.getBoundingClientRect().width;
+  is(initialFontTestWidth, serifWidth);
+
+  ok(decimalWidth > 0, "decimal counter has width");
+  ok(cjkDecimalWidth > 0, "cjk-decimal counter has width");
+  ok(decimalWidth != cjkDecimalWidth, "decimal and cjk-decimal counter have different width")
+
+  var initialCounterStyleWidth = testCounterStyle.getBoundingClientRect().width;
+  is(initialCounterStyleWidth, decimalWidth, "initial counter style is decimal");
+
+  // We construct a style sheet with zero, one or two levels of conditional
+  // grouping rules (taken from outerRuleInfo), with one of the inner rules
+  // at the deepest level.
+  var style = document.getElementById("style");
+
+  // For each of the outer rule types...
+  for (var outerRule1 = 0; outerRule1 < outerRuleInfo.length; outerRule1++) {
+    // For each of { 0 = don't create an outer rule,
+    //               1 = create an outer rule with a passing condition,
+    //               2 = create an outer rule with a failing condition }...
+    for (var outerRuleCondition1 = 0; outerRuleCondition1 <= 2; outerRuleCondition1++) {
+
+      // For each of the outer rule types again...
+      for (var outerRule2 = 0; outerRule2 < outerRuleInfo.length; outerRule2++) {
+        // For each of { 0 = don't create an outer rule,
+        //               1 = create an outer rule with a passing condition,
+        //               2 = create an outer rule with a failing condition } again...
+        for (var outerRuleCondition2 = 0; outerRuleCondition2 <= 2; outerRuleCondition2++) {
+
+          // For each of the inner rule types...
+          for (var innerRule = 0; innerRule < innerRuleInfo.length; innerRule++) {
+
+            // Clear rules
+            var object = style.sheet;
+            while (object.cssRules.length) {
+              object.deleteRule(0);
+            }
+
+            // We'll record whether the inner rule should have been applied,
+            // according to whether we put passing or failing conditional
+            // grouping rules around it.
+            var applied = true;
+
+            if (outerRuleCondition1) {
+              // Create an outer conditional rule.
+              object.insertRule([outerRuleInfo[outerRule1][0],
+                                 outerRuleInfo[outerRule1][outerRuleCondition1],
+                                 "{}"].join(" "), 0);
+              object = object.cssRules[0];
+
+              if (outerRuleCondition1 == 2) {
+                // If we used a failing condition, we don't expect the inner
+                // rule to be applied.
+                applied = false;
+              }
+            }
+
+            if (outerRuleCondition2) {
+              // Create another outer conditional rule as a child of the first
+              // outer conditional rule (or the style sheet, if we didn't create
+              // a first outer conditional rule).
+              object.insertRule([outerRuleInfo[outerRule2][0],
+                                 outerRuleInfo[outerRule2][outerRuleCondition2],
+                                 "{}"].join(" "), 0);
+              object = object.cssRules[0];
+
+              if (outerRuleCondition2 == 2) {
+                // If we used a failing condition, we don't expect the inner
+                // rule to be applied.
+                applied = false;
+              }
+            }
+
+            var outer = object instanceof CSSRule ? object.cssText : "style sheet";
+            var inner = innerRuleInfo[innerRule][0];
+
+            // Insert the inner rule.
+            var exception = null;
+            try {
+              object.insertRule(inner, 0);
+            } catch (e) {
+              exception = e;
+            }
+
+            ok(innerRuleInfo[innerRule][1](applied, object, exception),
+               "<" + [outerRule1, outerRuleCondition1, outerRule2,
+                      outerRuleCondition2, innerRule].join(",") + "> " +
+               "inserting " + inner + " into " + outer.replace(/ *\n */g, ' '));
+          }
+        }
+      }
+    }
+  }
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+
+SpecialPowers.pushPrefEnv(
+  { "set": [["layout.css.moz-document.content.enabled", true ]]},
+  runTest,
+);
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_rule_serialization.html b/layout/style/test/test_rule_serialization.html
new file mode 100644
index 0000000000..051174073d
--- /dev/null
+++ b/layout/style/test/test_rule_serialization.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=
+-->
+<head>
+  <title>Test for Bug </title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css" id="style"></style>
+</head>
+<body>
+<pre id="test">
+<script type="application/javascript">
+
+var rules = [
+  { rule: "@-moz-document url(http://www.example.com/) {}" },
+  { rule: "@-moz-document url('http://www.example.com/') {}" },
+  { rule: '@-moz-document url("http://www.example.com/") {}' },
+  { rule: "@-moz-document url-prefix('http://www.example.com/') {}" },
+  { rule: '@-moz-document url-prefix("http://www.example.com/") {}' },
+  { rule: "@-moz-document domain('example.com') {}" },
+  { rule: '@-moz-document domain("example.com") {}' },
+  { rule: "@-moz-document regexp('http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/') {}" },
+  { rule: '@-moz-document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {}' },
+];
+
+SimpleTest.waitForExplicitFinish();
+
+SpecialPowers.pushPrefEnv(
+  { "set": [["layout.css.moz-document.content.enabled", true ]]},
+  function() {
+    var style = document.getElementById("style");
+    var style_text = document.createTextNode("");
+    style.appendChild(style_text);
+
+    for (var i in rules) {
+      var obj = rules[i];
+      var rule = obj.rule;
+
+      style_text.data = rule;
+      is(style.sheet.cssRules.length, 1, "should have one rule");
+      var ser1 = style.sheet.cssRules[0].cssText;
+      if ("is_canonical" in obj) {
+        is(ser1, rule, "rule '" + rule + "' should serialize to itself");
+      }
+
+      style_text.data = ser1;
+      is(style.sheet.cssRules.length, 1, "should have one rule");
+      var ser2 = style.sheet.cssRules[0].cssText;
+      is(ser2, ser1,
+         "parse+serialize for rule '" + rule + "' should be idempotent");
+    }
+
+    SimpleTest.finish();
+  }
+)
+
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_rules_out_of_sheets.html b/layout/style/test/test_rules_out_of_sheets.html
new file mode 100644
index 0000000000..2ca53d31b7
--- /dev/null
+++ b/layout/style/test/test_rules_out_of_sheets.html
@@ -0,0 +1,115 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=634373
+-->
+<head>
+  <title>Test for Bug 634373</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=634373">Mozilla Bug 634373</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 634373 **/
+
+function make_rule_and_remove_sheet(text, getter) {
+  var style = document.createElement("style");
+  style.setAttribute("type", "text/css");
+  style.appendChild(document.createTextNode(text));
+  document.head.appendChild(style);
+  var result = style.sheet.cssRules[0];
+  if (getter) {
+    result = getter(result);
+  }
+  document.head.removeChild(style);
+  style = null;
+  SpecialPowers.DOMWindowUtils.garbageCollect();
+  return result;
+}
+
+var gDisplayCS = getComputedStyle(document.getElementById("display"), "");
+
+function keep_rule_alive_by_matching(rule) {
+  // It's the caller's job to guarantee that the rule matches a p.
+  // This just causes a style flush, which in turn keeps the rule alive
+  // until the next style flush.
+  var color = gDisplayCS.color;
+  return rule;
+}
+
+function get_rule_and_child(rule) {
+  return [rule, rule.cssRules[0]];
+}
+
+function get_only_child(rule) {
+  return rule.cssRules[0];
+}
+
+var rule;
+
+// In this case, the rule goes away immediately, so we're testing
+// the DOM wrapper's handling of a null rule, rather than the rule's
+// handling of a null sheet.
+rule = make_rule_and_remove_sheet("p { color: blue }");
+rule.style.color = "";
+try {
+  rule.style.color = "fuchsia";
+} catch(ex) {}
+
+rule = make_rule_and_remove_sheet("p { color: blue }",
+                                  keep_rule_alive_by_matching);
+try {
+  rule.style.color = "";
+} catch(ex) {}
+try {
+  rule.style.color = "fuchsia";
+} catch(ex) {}
+
+rule = make_rule_and_remove_sheet("@media screen { p { color: blue } }",
+                                   get_rule_and_child);
+rule[1].style.color = "";
+try {
+  rule[1].style.color = "fuchsia";
+} catch(ex) {}
+
+// In this case, the rule goes away immediately, so we're testing
+// the DOM wrapper's handling of a null rule, rather than the rule's
+// handling of a null sheet.
+rule = make_rule_and_remove_sheet("@media screen { p { color: blue } }",
+                                   get_only_child);
+rule.style.color = "";
+try {
+  rule.style.color = "fuchsia";
+} catch(ex) {}
+
+rule = make_rule_and_remove_sheet("@media screen { p { color: blue } }",
+                                  function(ruleInner) {
+                                    return keep_rule_alive_by_matching(
+                                             get_only_child(ruleInner));
+                                  });
+try {
+  rule.style.color = "";
+} catch(ex) {}
+try {
+  rule.style.color = "fuchsia";
+} catch(ex) {}
+
+rule = make_rule_and_remove_sheet("@keyframes a { from { color: blue } }");
+rule.appendRule("from { color: fuchsia}");
+rule.deleteRule("from");
+rule.name = "b";
+rule.cssRules[0].keyText = "50%";
+
+ok(true, "didn't crash");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_selectors.html b/layout/style/test/test_selectors.html
new file mode 100644
index 0000000000..3c5b36c449
--- /dev/null
+++ b/layout/style/test/test_selectors.html
@@ -0,0 +1,1349 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for CSS Selectors</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body onload="run()">
+<p id="display"><iframe id="iframe" src="about:blank"></iframe><iframe id="cloneiframe" src="about:blank"></iframe></p>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(2);
+
+var cloneiframe;
+
+function run() {
+  SpecialPowers.pushPrefEnv({ set: [["layout.css.xul-tree-pseudos.content.enabled", true]] }, runTests);
+}
+function runTests() {
+    var iframe = document.getElementById("iframe");
+    var ifwin = iframe.contentWindow;
+    var ifdoc = iframe.contentDocument;
+
+    cloneiframe = document.getElementById("cloneiframe");
+
+    var style_elem = ifdoc.createElement("style");
+    style_elem.setAttribute("type", "text/css");
+    ifdoc.getElementsByTagName("head")[0].appendChild(style_elem);
+    var style_text = ifdoc.createTextNode("");
+    style_elem.appendChild(style_text);
+
+    var gCounter = 0;
+
+    /*
+     * selector: the selector to test
+     * body_contents: what to set the body's innerHTML to
+     * match_fn: a function that, given the document object into which
+     *   body_contents has been inserted, produces an array of nodes that
+     *   should match selector
+     * notmatch_fn: likewise, but for nodes that should not match
+     * namespaces (optional): @namespace rules to be included in the sheet
+     */
+    function test_selector_in_html(selector, body_contents, match_fn, notmatch_fn, namespaces)
+    {
+        var zi = ++gCounter;
+        if (typeof(body_contents) == "string") {
+            ifdoc.body.innerHTML = body_contents;
+        } else {
+            // It's a function.
+            ifdoc.body.innerHTML = "";
+            body_contents(ifdoc.body);
+        }
+        if (!namespaces) {
+            namespaces = "";
+        }
+        style_text.data = namespaces + selector + "{ z-index: " + zi + " }";
+
+        var idx = style_text.parentNode.sheet.cssRules.length - 1;
+        if (namespaces == "") {
+            is(idx, 0, "unexpected rule index for " + selector);
+        }
+        if (idx < 0 ||
+            style_text.parentNode.sheet.cssRules[idx].type !=
+                CSSRule.STYLE_RULE)
+        {
+            ok(false, "selector " + selector + " could not be parsed");
+            return;
+        }
+
+        var should_match = match_fn(ifdoc);
+        var should_not_match = notmatch_fn(ifdoc);
+        if (should_match.length + should_not_match.length == 0) {
+            ok(false, "nothing to check");
+        }
+
+        for (let i = 0; i < should_match.length; ++i) {
+            let e = should_match[i];
+            is(ifwin.getComputedStyle(e).zIndex, String(zi),
+               "element in " + body_contents + " matched " + selector);
+        }
+        for (let i = 0; i < should_not_match.length; ++i) {
+            let e = should_not_match[i];
+            is(ifwin.getComputedStyle(e).zIndex, "auto",
+               "element in " + body_contents + " did not match " + selector);
+        }
+
+        // Now, since we're here, may as well make sure serialization
+        // works correctly.  It need not produce the exact same text,
+        // but it should produce a selector that matches the same
+        // elements.
+        zi = ++gCounter;
+        var ser1 = style_text.parentNode.sheet.cssRules[idx].selectorText;
+        style_text.data = namespaces + ser1 + "{ z-index: " + zi + " }";
+        for (let i = 0; i < should_match.length; ++i) {
+            let e = should_match[i];
+            is(ifwin.getComputedStyle(e).zIndex, String(zi),
+               "element in " + body_contents + " matched " + ser1 +
+               " which is the reserialization of " + selector);
+        }
+        for (let i = 0; i < should_not_match.length; ++i) {
+            let e = should_not_match[i];
+            is(ifwin.getComputedStyle(e).zIndex, "auto",
+               "element in " + body_contents + " did not match " + ser1 +
+               " which is the reserialization of " + selector);
+        }
+
+        // But when we serialize the serialized result, we should get
+        // the same text.
+        isnot(style_text.parentNode.sheet.cssRules[idx], undefined,
+              "parse of selector \"" + ser1 + "\" failed");
+
+        if (style_text.parentNode.sheet.cssRules[idx] !== undefined) {
+            var ser2 = style_text.parentNode.sheet.cssRules[idx].selectorText;
+            is(ser2, ser1, "parse+serialize of selector \"" + selector +
+                           "\" is idempotent");
+        }
+
+        ifdoc.body.innerHTML = "";
+        style_text.data = "";
+
+        // And now test that when we clone the style sheet, we end up
+        // with the same selector (serializes to same string, and
+        // matches the same things).
+        zi = ++gCounter;
+        var style_sheet = "data:text/css," +
+            escape(namespaces + selector + "{ z-index: " + zi + " }");
+        var style_sheet_link =
+            "<link rel='stylesheet' href='" + style_sheet + "'>";
+        var html_doc = "<!DOCTYPE HTML>" +
+                       style_sheet_link + style_sheet_link +
+                       "<body>";
+        if (typeof(body_contents) == "string") {
+            html_doc += body_contents;
+        }
+        var docurl = "data:text/html," + escape(html_doc);
+        defer_clonedoc_tests(docurl, function() {
+            var wrappedCloneFrame = SpecialPowers.wrap(cloneiframe);
+            var clonedoc = wrappedCloneFrame.contentDocument;
+            var clonewin = wrappedCloneFrame.contentWindow;
+
+            if (typeof(body_contents) != "string") {
+                body_contents(clonedoc.body);
+            }
+
+            var links = clonedoc.getElementsByTagName("link");
+            // cause a clone
+            links[1].sheet.insertRule("#nonexistent { color: purple}", idx + 1);
+            // remove the uncloned sheet
+            links[0].remove();
+
+            var should_match1 = match_fn(clonedoc);
+            var should_not_match1 = notmatch_fn(clonedoc);
+
+            if (should_match1.length + should_not_match1.length == 0) {
+                ok(false, "nothing to check");
+            }
+
+            for (let i = 0; i < should_match1.length; ++i) {
+                let e = should_match1[i];
+                is(clonewin.getComputedStyle(e).zIndex, String(zi),
+                   "element in " + body_contents + " matched clone of " +
+                   selector);
+            }
+            for (let i = 0; i < should_not_match1.length; ++i) {
+                let e = should_not_match1[i];
+                is(clonewin.getComputedStyle(e).zIndex, "auto",
+                   "element in " + body_contents + " did not match clone of " +
+                   selector);
+            }
+
+            var ser3 = links[0].sheet.cssRules[idx].selectorText;
+            is(ser3, ser1,
+               "selector " + selector + " serializes correctly after cloning");
+        });
+    }
+
+    function should_serialize_to(selector, serialization)
+    {
+        style_text.data = selector + "{ z-index: 0 }";
+        is(style_text.parentNode.sheet.cssRules[0].selectorText,
+           serialization,
+           "selector '" + selector + "' should serialize to '" +
+             serialization + "'.");
+    }
+
+    function test_parseable(selector)
+    {
+        ifdoc.body.innerHTML = "<p></p>";
+
+        var zi = ++gCounter;
+        style_text.data = "p, " + selector + "{ z-index: " + zi + " }";
+        var should_match = ifdoc.getElementsByTagName("p")[0];
+        var parsed = ifwin.getComputedStyle(should_match).zIndex == zi;
+        ok(parsed, "selector " + selector + " was parsed");
+        if (!parsed) {
+            return;
+        }
+
+        // Test that it serializes to something that is also parseable.
+        var ser1 = style_elem.sheet.cssRules[0].selectorText;
+        zi = ++gCounter;
+        style_text.data = ser1 + "{ z-index: " + zi + " }";
+        is(ifwin.getComputedStyle(should_match).zIndex, String(zi),
+           "serialization " + ser1 + " of selector p, " + selector +
+           " was parsed");
+        var ser2 = style_elem.sheet.cssRules[0].selectorText;
+        is(ser2, ser1,
+           "parse+serialize of selector " + selector + " is idempotent");
+
+        ifdoc.body.innerHTML = "";
+        style_text.data = "";
+
+        // Test that it clones to the same thing it serializes to.
+        zi = ++gCounter;
+        var style_sheet = "data:text/css," +
+                          escape("p, " + selector + "{ z-index: " + zi + " }");
+        var style_sheet_link =
+            "<link rel='stylesheet' href='" + style_sheet + "'>";
+        var html_doc = "<!DOCTYPE HTML>" +
+                       style_sheet_link + style_sheet_link +
+                       "<p></p>";
+        var docurl = "data:text/html," + escape(html_doc);
+
+        defer_clonedoc_tests(docurl, function() {
+            var wrappedCloneFrame = SpecialPowers.wrap(cloneiframe);
+            var clonedoc = wrappedCloneFrame.contentDocument;
+            var clonewin = wrappedCloneFrame.contentWindow;
+            var links = clonedoc.getElementsByTagName("link");
+            // cause a clone
+            links[1].sheet.insertRule("#nonexistent { color: purple}", 0);
+            // remove the uncloned sheet
+            links[0].remove();
+
+            should_match = clonedoc.getElementsByTagName("p")[0];
+            is(clonewin.getComputedStyle(should_match).zIndex, String(zi),
+               "selector " + selector + " was cloned correctly");
+            var ser3 = links[0].sheet.cssRules[1].selectorText;
+            is(ser3, ser1,
+               "selector " + selector + " serializes correctly after cloning");
+        });
+    }
+
+    function test_unparseable_via_api(selector)
+    {
+        try {
+          // Test that it is also unparseable when followed by EOF.
+          ifdoc.body.matches(selector);
+          ok(false, "selector '" + selector + "' plus EOF is parse error");
+        } catch(ex) {
+          is(ex.name, "SyntaxError",
+             "selector '" + selector + "' plus EOF is parse error");
+          is(ex.code, DOMException.SYNTAX_ERR,
+             "selector '" + selector + "' plus EOF is parse error");
+        }
+    }
+
+    function test_parseable_via_api(selector)
+    {
+        var threw = false;
+        try {
+          // Test that a selector is parseable when followed by EOF.
+          ifdoc.body.matches(selector);
+        } catch(ex) {
+          threw = true;
+        }
+        ok(!threw, "selector '" + selector + "' was parsed");
+    }
+
+    function test_balanced_unparseable(selector)
+    {
+        var zi1 = ++gCounter;
+        var zi2 = ++gCounter;
+        ifdoc.body.innerHTML = "<p></p><div></div>";
+        style_text.data = "p, " + selector + "{ z-index: " + zi1 + " }" +
+                          "div { z-index: " + zi2 + " }";
+        var should_not_match = ifdoc.getElementsByTagName("p")[0];
+        var should_match = ifdoc.getElementsByTagName("div")[0];
+        is(ifwin.getComputedStyle(should_not_match).zIndex, "auto",
+           "selector " + selector + " was a parser error");
+        is(ifwin.getComputedStyle(should_match).zIndex, String(zi2),
+           "selector " + selector + " error was recovered from");
+        ifdoc.body.innerHTML = "";
+        style_text.data = "";
+        test_unparseable_via_api(selector);
+    }
+
+    function test_unbalanced_unparseable(selector)
+    {
+        var zi1 = ++gCounter;
+        var zi2 = ++gCounter;
+        ifdoc.body.innerHTML = "<p></p>";
+        style_text.data = "p, " + selector + "{ z-index: " + zi1 + " }";
+        var should_not_match = ifdoc.getElementsByTagName("p")[0];
+        is(ifwin.getComputedStyle(should_not_match).zIndex, "auto",
+           "selector " + selector + " was a parser error");
+        is(style_text.parentNode.sheet.cssRules.length, 0,
+           "sheet should have no rules since " + selector + " is parse error");
+        ifdoc.body.innerHTML = "";
+        style_text.data = "";
+        test_unparseable_via_api(selector);
+    }
+
+    // [attr] selector
+    test_parseable("[attr]")
+    test_parseable_via_api("[attr");
+    test_parseable("[ATTR]")
+    should_serialize_to("[attr]", "[attr]");
+    should_serialize_to("[ATTR]", "[ATTR]");
+
+    // Whether we should drop the bar is debatable. This matches Edge
+    // and Safari at the time of writing.
+    should_serialize_to("[|attr]", "[attr]");
+    should_serialize_to("[|ATTR]", "[ATTR]");
+
+    // [attr= ] selector
+    test_parseable("[attr=\"x\"]");
+    test_parseable("[attr='x']");
+    test_parseable("[attr=x]");
+    test_parseable("[attr=\"\"]");
+    test_parseable("[attr='']");
+    test_parseable("[attr=\"foo bar\"]");
+    test_parseable_via_api("[attr=x");
+
+    test_balanced_unparseable("[attr=]");
+    test_balanced_unparseable("[attr=foo bar]");
+
+    test_selector_in_html(
+        '[title=""]',
+        '<p title=""></p>'
+        + '<div lang=" "></div><div lang="\t"></div><div lang="\n"></div>',
+        function(doc) { return doc.getElementsByTagName("p"); },
+        function(doc) { return doc.getElementsByTagName("div"); }
+    );
+
+    // [attr~= ] selector
+    test_parseable("[attr~=\"x\"]");
+    test_parseable("[attr~='x']");
+    test_parseable("[attr~=x]");
+    test_parseable("[attr~=\"\"]");
+    test_parseable("[attr~='']");
+    test_parseable("[attr~=\"foo bar\"]");
+    test_parseable_via_api("[attr~=x");
+
+    test_balanced_unparseable("[attr~=]");
+    test_balanced_unparseable("[attr~=foo bar]");
+
+    test_selector_in_html(
+        '[class~="x x"]',
+        '<div class="x x"></div><div class="x"></div><div class="x\tx"></div>div class="x\nx"></div>',
+        function(doc) { return []; },
+        function(doc) { return doc.getElementsByTagName("div"); }
+    );
+
+    // [attr|="x"]
+    test_parseable('[attr|="x"]');
+    test_parseable("[attr|='x']");
+    test_parseable('[attr|=x]');
+    test_parseable_via_api("[attr|=x");
+
+    test_parseable('[attr|=""]');
+    test_parseable("[attr|='']");
+    test_balanced_unparseable('[attr|=]');
+
+    test_selector_in_html(
+        '[lang|=""]',
+        '<p lang=""></p><p lang="-"></p><p lang="-GB"></p>'
+        + '<div lang="en-GB"></div><div lang="en-"></div>',
+        function(doc) { return doc.getElementsByTagName("p"); },
+        function(doc) { return doc.getElementsByTagName("div"); }
+    );
+
+    // [attr$= ] selector
+    test_parseable("[attr$=\"x\"]");
+    test_parseable("[attr$='x']");
+    test_parseable("[attr$=x]");
+    test_parseable("[attr$=\"\"]");
+    test_parseable("[attr$='']");
+    test_parseable("[attr$=\"foo bar\"]");
+    test_parseable_via_api("[attr$=x");
+
+    test_balanced_unparseable("[attr$=]");
+    test_balanced_unparseable("[attr$=foo bar]");
+
+    // [attr^= ] selector
+    test_parseable("[attr^=\"x\"]");
+    test_parseable("[attr^='x']");
+    test_parseable("[attr^=x]");
+    test_parseable("[attr^=\"\"]");
+    test_parseable("[attr^='']");
+    test_parseable("[attr^=\"foo bar\"]");
+    test_parseable_via_api("[attr^=x");
+
+    test_balanced_unparseable("[attr^=]");
+    test_balanced_unparseable("[attr^=foo bar]");
+
+    // attr[*= ] selector
+    test_parseable("[attr*=\"x\"]");
+    test_parseable("[attr*='x']");
+    test_parseable("[attr*=x]");
+    test_parseable("[attr*=\"\"]");
+    test_parseable("[attr*='']");
+    test_parseable("[attr*=\"foo bar\"]");
+    test_parseable_via_api("[attr^=x");
+
+    test_balanced_unparseable("[attr*=]");
+    test_balanced_unparseable("[attr*=foo bar]");
+
+    // And now tests for correctness of matching of attr selectors.
+    var attrTestBody =
+        // Paragraphs 1-5
+        "<p attr></p> <p attr=''></p> <p attr='foo'></p> <p att></p> <p></p>" +
+        // Paragraphs 6-8
+        "<p attr='foo bar'></p> <p attr='foo-bar'></p> <p attr='foobar'></p>" +
+        // Paragraphs 9-10
+        "<p attr='foo bar baz'></p> <p attr='foo-bar-baz'></p>" +
+        // Paragraphs 11-12
+        "<p attr='foo-bar baz'></p> <p attr='   foo-bar  '></p> " +
+        // Paragraph 13-15
+        "<p attr=' foo '></p> <p attr='fo'></p> <p attr='bar baz-foo'></p>";
+    test_selector_in_html(
+        "[attr]", attrTestBody,
+        pset([1,2,3,6,7,8,9,10,11,12,13,14,15]), pset([4,5]));
+    test_selector_in_html(
+        "[attr=foo]", attrTestBody,
+        pset([3]), pset([1,2,4,5,6,7,8,9,10,11,12,13,14,15]));
+    test_selector_in_html(
+        "[attr~=foo]", attrTestBody,
+        pset([3,6,9,13]), pset([1,2,4,5,7,8,10,11,12,14,15]));
+    test_selector_in_html(
+        "[attr~=bar]", attrTestBody,
+        pset([6,9,15]), pset([1,2,3,4,5,7,8,10,11,12,13,14]));
+    test_selector_in_html(
+        "[attr~=baz]", attrTestBody,
+        pset([9,11]), pset([1,2,3,4,5,6,7,8,10,12,13,14,15]));
+    test_selector_in_html(
+        "[attr|=foo]", attrTestBody,
+        pset([3,7,10,11]), pset([1,2,4,5,6,8,9,12,13,14,15]));
+    test_selector_in_html(
+        "[attr|='bar baz']", attrTestBody,
+        pset([15]), pset([1,2,3,4,5,6,7,8,9,10,11,12,13,14]));
+    test_selector_in_html(
+        "[attr$=foo]", attrTestBody,
+        pset([3,15]), pset([1,2,4,5,6,7,8,9,10,11,12,13,14]));
+    test_selector_in_html(
+        "[attr$=bar]", attrTestBody,
+        pset([6,7,8]), pset([1,2,3,4,5,9,10,11,12,13,14,15]));
+    test_selector_in_html(
+        "[attr^=foo]", attrTestBody,
+        pset([3,6,7,8,9,10,11]), pset([1,2,4,5,12,13,14,15]));
+    test_selector_in_html(
+        "[attr*=foo]", attrTestBody,
+        pset([3,6,7,8,9,10,11,12,13,15]), pset([1,2,4,5,14]));
+
+    // Bug 420814
+    test_selector_in_html(
+        "div ~ div p",
+        "<div></div><div><div><p>match</p></div></div>",
+        function(doc) { return doc.getElementsByTagName("p"); },
+        function(doc) { return []; }
+    );
+
+    // Bug 420245
+    test_selector_in_html(
+        "p[attr$=\"\"]",
+        "<p attr=\"foo\">This should not match</p>",
+        function(doc) { return []; },
+        function(doc) { return doc.getElementsByTagName("p"); }
+    );
+    test_selector_in_html(
+        "div + p[attr~=\"\"]",
+        "<div>Dummy</div><p attr=\"foo\">This should not match</p>",
+        function(doc) { return []; },
+        function(doc) { return doc.getElementsByTagName("p"); }
+    );
+    test_selector_in_html(
+        "div[attr^=\"\"]",
+        "<div attr=\"dummy1\">Dummy</div><div attr=\"dummy2\">Dummy</div>",
+        function(doc) { return []; },
+        function(doc) { return doc.getElementsByTagName("div"); }
+    );
+    test_selector_in_html(
+        "div[attr*=\"\"]",
+        "<div attr=\"dummy1\">Dummy</div><div attr=\"dummy2\">Dummy</div>",
+        function(doc) { return []; },
+        function(doc) { return doc.getElementsByTagName("div"); }
+    );
+
+    // :nth-child(), etc.
+    // Follow the whitespace rules as proposed in
+    // http://lists.w3.org/Archives/Public/www-style/2008Mar/0121.html
+    test_balanced_unparseable(":nth-child()");
+    test_balanced_unparseable(":nth-of-type( )");
+    test_parseable(":nth-last-child( odd)");
+    test_parseable(":nth-last-of-type(even )");
+    test_parseable(":nth-child(n )");
+    test_parseable(":nth-of-type( 2n)");
+    test_parseable(":nth-last-child( -n)");
+    test_parseable(":nth-last-of-type(-2n )");
+    test_balanced_unparseable(":nth-child(- n)");
+    test_balanced_unparseable(":nth-of-type(-2 n)");
+    test_balanced_unparseable(":nth-last-of-type(2n1)");
+    test_balanced_unparseable(":nth-child(2n++1)");
+    test_balanced_unparseable(":nth-of-type(2n-+1)");
+    test_balanced_unparseable(":nth-last-child(2n+-1)");
+    test_balanced_unparseable(":nth-last-of-type(2n--1)");
+    test_parseable(":nth-child( 3n + 1 )");
+    test_parseable(":nth-child( +3n - 2 )");
+    test_parseable(":nth-child( -n+ 6)");
+    test_parseable(":nth-child( +6 )");
+    test_balanced_unparseable(":nth-child(3 n)");
+    test_balanced_unparseable(":nth-child(+ 2n)");
+    test_balanced_unparseable(":nth-child(+ 2)");
+    test_parseable(":nth-child(3)");
+    test_parseable(":nth-of-type(-3)");
+    test_parseable(":nth-last-child(+3)");
+    test_parseable(":nth-last-of-type(0)");
+    test_parseable(":nth-child(-0)");
+    test_parseable(":nth-of-type(3n)");
+    test_parseable(":nth-last-child(-3n)");
+    test_parseable(":nth-last-of-type(+3n)");
+    test_parseable(":nth-last-of-type(0n)");
+    test_parseable(":nth-child(-0n)");
+    test_parseable(":nth-of-type(n)");
+    test_parseable(":nth-last-child(-n)");
+    test_parseable(":nth-last-of-type(2n+1)");
+    test_parseable(":nth-child(2n-1)");
+    test_parseable(":nth-of-type(2n+0)");
+    test_parseable(":nth-last-child(2n-0)");
+    test_parseable(":nth-child(-0n+0)");
+    test_parseable(":nth-of-type(n+1)");
+    test_parseable(":nth-last-child(n-1)");
+    test_parseable(":nth-last-of-type(-n+1)");
+    test_parseable(":nth-child(-n-1)");
+    test_balanced_unparseable(":nth-child(2-n)");
+    test_balanced_unparseable(":nth-child(2-n-1)");
+    test_balanced_unparseable(":nth-child(n-2-1)");
+    // Bug 750388
+    test_parseable(":nth-child(+n)");
+    test_balanced_unparseable(":nth-child(+ n)");
+    test_parseable(":nth-child(+n+2)");
+    test_parseable(":nth-child(+n-2)");
+    test_parseable(":nth-child(+n + 2)");
+    test_parseable(":nth-child(+n - 2)");
+    test_balanced_unparseable(":nth-child(+ n+2)");
+    test_balanced_unparseable(":nth-child(+ n-2)");
+    test_balanced_unparseable(":nth-child(+ n + 2)");
+    test_balanced_unparseable(":nth-child(+ n - 2)");
+    test_parseable(":nth-child(+n-100)");
+    test_parseable(":nth-child(+n - 100)");
+    test_balanced_unparseable(":nth-child(+ n-100)");
+    test_balanced_unparseable(":nth-child(+-n+2)");
+    test_balanced_unparseable(":nth-child(+ -n+2)");
+    test_balanced_unparseable(":nth-child(+-n-100)");
+    test_balanced_unparseable(":nth-child(+ -n-100)");
+    test_balanced_unparseable(":nth-child(++n-100)");
+    test_balanced_unparseable(":nth-child(-+n-100)");
+    test_balanced_unparseable(":nth-child(++2n - 100)");
+    test_balanced_unparseable(":nth-child(+-2n - 100)");
+    test_balanced_unparseable(":nth-child(-+2n - 100)");
+    test_balanced_unparseable(":nth-child(--2n - 100)");
+    test_balanced_unparseable(":nth-child(+/**/+2n - 100)");
+    test_balanced_unparseable(":nth-child(+/**/-2n - 100)");
+    test_balanced_unparseable(":nth-child(-/**/+2n - 100)");
+    test_balanced_unparseable(":nth-child(-/**/-2n - 100)");
+    test_balanced_unparseable(":nth-child(+/**/+/**/2n - 100)");
+    test_balanced_unparseable(":nth-child(+/**/-/**/2n - 100)");
+    test_balanced_unparseable(":nth-child(-/**/+/**/2n - 100)");
+    test_balanced_unparseable(":nth-child(-/**/-/**/2n - 100)");
+    test_balanced_unparseable(":nth-child(++/**/2n - 100)");
+    test_balanced_unparseable(":nth-child(+-/**/2n - 100)");
+    test_balanced_unparseable(":nth-child(-+/**/2n - 100)");
+    test_balanced_unparseable(":nth-child(--/**/2n - 100)");
+    test_balanced_unparseable(":nth-child(-even)");
+    test_balanced_unparseable(":nth-child(-odd)");
+    test_balanced_unparseable(":nth-child(+even)");
+    test_balanced_unparseable(":nth-child(+odd)");
+    test_balanced_unparseable(":nth-child(+ even)");
+    test_balanced_unparseable(":nth-child(+ odd)");
+    test_balanced_unparseable(":nth-child(+-n)");
+    test_balanced_unparseable(":nth-child(+-n-)");
+    test_balanced_unparseable(":nth-child(-+n)");
+    test_balanced_unparseable(":nth-child(+n--)");
+    test_parseable(":nth-child(n+2)");
+    test_parseable(":nth-child(n/**/+/**/2)");
+    test_parseable(":nth-child(n-2)");
+    test_parseable(":nth-child(n/**/-/**/2)");
+    test_balanced_unparseable(":nth-child(n++2)");
+    test_balanced_unparseable(":nth-child(n+-2)");
+    test_balanced_unparseable(":nth-child(n-+2)");
+    test_balanced_unparseable(":nth-child(n--2)");
+    test_balanced_unparseable(":nth-child(n/**/++2)");
+    test_balanced_unparseable(":nth-child(n/**/+-2)");
+    test_balanced_unparseable(":nth-child(n/**/-+2)");
+    test_balanced_unparseable(":nth-child(n/**/--2)");
+    test_balanced_unparseable(":nth-child(n/**/+/**/+2)");
+    test_balanced_unparseable(":nth-child(n/**/+/**/-2)");
+    test_balanced_unparseable(":nth-child(n/**/-/**/+2)");
+    test_balanced_unparseable(":nth-child(n/**/-/**/-2)");
+    test_balanced_unparseable(":nth-child(n+/**/+2)");
+    test_balanced_unparseable(":nth-child(n+/**/-2)");
+    test_balanced_unparseable(":nth-child(n-/**/+2)");
+    test_balanced_unparseable(":nth-child(n-/**/-2)");
+    test_balanced_unparseable(":nth-child(n++/**/2)");
+    test_balanced_unparseable(":nth-child(n+-/**/2)");
+    test_balanced_unparseable(":nth-child(n-+/**/2)");
+    test_balanced_unparseable(":nth-child(n--/**/2)");
+    test_balanced_unparseable(":nth-child(n/**/++/**/2)");
+    test_balanced_unparseable(":nth-child(n/**/+-/**/2)");
+    test_balanced_unparseable(":nth-child(n/**/-+/**/2)");
+    test_balanced_unparseable(":nth-child(n/**/--/**/2)");
+    test_balanced_unparseable(":nth-child(n/**/+/**/+/**/2)");
+    test_balanced_unparseable(":nth-child(n/**/+/**/-/**/2)");
+    test_balanced_unparseable(":nth-child(n/**/-/**/+/**/2)");
+    test_balanced_unparseable(":nth-child(n/**/-/**/-/**/2)");
+    test_balanced_unparseable(":nth-child(n+/**/+/**/2)");
+    test_balanced_unparseable(":nth-child(n+/**/-/**/2)");
+    test_balanced_unparseable(":nth-child(n-/**/+/**/2)");
+    test_balanced_unparseable(":nth-child(n-/**/-/**/2)");
+    test_parseable(":nth-child(2n+2)");
+    test_parseable(":nth-child(2n/**/+/**/2)");
+    test_parseable(":nth-child(2n-2)");
+    test_parseable(":nth-child(2n/**/-/**/2)");
+    test_balanced_unparseable(":nth-child(2n++2)");
+    test_balanced_unparseable(":nth-child(2n+-2)");
+    test_balanced_unparseable(":nth-child(2n-+2)");
+    test_balanced_unparseable(":nth-child(2n--2)");
+    test_balanced_unparseable(":nth-child(2n/**/++2)");
+    test_balanced_unparseable(":nth-child(2n/**/+-2)");
+    test_balanced_unparseable(":nth-child(2n/**/-+2)");
+    test_balanced_unparseable(":nth-child(2n/**/--2)");
+    test_balanced_unparseable(":nth-child(2n/**/+/**/+2)");
+    test_balanced_unparseable(":nth-child(2n/**/+/**/-2)");
+    test_balanced_unparseable(":nth-child(2n/**/-/**/+2)");
+    test_balanced_unparseable(":nth-child(2n/**/-/**/-2)");
+    test_balanced_unparseable(":nth-child(2n+/**/+2)");
+    test_balanced_unparseable(":nth-child(2n+/**/-2)");
+    test_balanced_unparseable(":nth-child(2n-/**/+2)");
+    test_balanced_unparseable(":nth-child(2n-/**/-2)");
+    test_balanced_unparseable(":nth-child(2n++/**/2)");
+    test_balanced_unparseable(":nth-child(2n+-/**/2)");
+    test_balanced_unparseable(":nth-child(2n-+/**/2)");
+    test_balanced_unparseable(":nth-child(2n--/**/2)");
+    test_balanced_unparseable(":nth-child(2n/**/++/**/2)");
+    test_balanced_unparseable(":nth-child(2n/**/+-/**/2)");
+    test_balanced_unparseable(":nth-child(2n/**/-+/**/2)");
+    test_balanced_unparseable(":nth-child(2n/**/--/**/2)");
+    test_balanced_unparseable(":nth-child(2n/**/+/**/+/**/2)");
+    test_balanced_unparseable(":nth-child(2n/**/+/**/-/**/2)");
+    test_balanced_unparseable(":nth-child(2n/**/-/**/+/**/2)");
+    test_balanced_unparseable(":nth-child(2n/**/-/**/-/**/2)");
+    test_balanced_unparseable(":nth-child(2n+/**/+/**/2)");
+    test_balanced_unparseable(":nth-child(2n+/**/-/**/2)");
+    test_balanced_unparseable(":nth-child(2n-/**/+/**/2)");
+    test_balanced_unparseable(":nth-child(2n-/**/-/**/2)");
+    test_parseable(":nth-child(+/**/n+2)");
+    test_parseable(":nth-child(+n/**/+2)");
+    test_parseable(":nth-child(+n/**/+2)");
+    test_parseable(":nth-child(+n+/**/2)");
+    test_parseable(":nth-child(+n+2/**/)");
+    test_balanced_unparseable(":nth-child(+1/**/n+2)");
+    test_parseable(":nth-child(+1n/**/+2)");
+    test_parseable(":nth-child(+1n/**/+2)");
+    test_parseable(":nth-child(+1n+/**/2)");
+    test_parseable(":nth-child(+1n+2/**/)");
+    test_balanced_unparseable(":nth-child(-/**/n+2)");
+    test_parseable(":nth-child(-n/**/+2)");
+    test_parseable(":nth-child(-n/**/+2)");
+    test_parseable(":nth-child(-n+/**/2)");
+    test_parseable(":nth-child(-n+2/**/)");
+    test_balanced_unparseable(":nth-child(-1/**/n+2)");
+    test_parseable(":nth-child(-1n/**/+2)");
+    test_parseable(":nth-child(-1n/**/+2)");
+    test_parseable(":nth-child(-1n+/**/2)");
+    test_parseable(":nth-child(-1n+2/**/)");
+    test_balanced_unparseable(":nth-child(-/**/ n+2)");
+    test_balanced_unparseable(":nth-child(- /**/n+2)");
+    test_balanced_unparseable(":nth-child(+/**/ n+2)");
+    test_balanced_unparseable(":nth-child(+ /**/n+2)");
+    test_parseable(":nth-child(+/**/n-2)");
+    test_parseable(":nth-child(+n/**/-2)");
+    test_parseable(":nth-child(+n/**/-2)");
+    test_parseable(":nth-child(+n-/**/2)");
+    test_parseable(":nth-child(+n-2/**/)");
+    test_balanced_unparseable(":nth-child(+1/**/n-2)");
+    test_parseable(":nth-child(+1n/**/-2)");
+    test_parseable(":nth-child(+1n/**/-2)");
+    test_parseable(":nth-child(+1n-/**/2)");
+    test_parseable(":nth-child(+1n-2/**/)");
+    test_balanced_unparseable(":nth-child(-/**/n-2)");
+    test_parseable(":nth-child(-n/**/-2)");
+    test_parseable(":nth-child(-n/**/-2)");
+    test_parseable(":nth-child(-n-/**/2)");
+    test_parseable(":nth-child(-n-2/**/)");
+    test_balanced_unparseable(":nth-child(-1/**/n-2)");
+    test_parseable(":nth-child(-1n/**/-2)");
+    test_parseable(":nth-child(-1n/**/-2)");
+    test_parseable(":nth-child(-1n-/**/2)");
+    test_parseable(":nth-child(-1n-2/**/)");
+    test_balanced_unparseable(":nth-child(-/**/ n-2)");
+    test_balanced_unparseable(":nth-child(- /**/n-2)");
+    test_balanced_unparseable(":nth-child(+/**/ n-2)");
+    test_balanced_unparseable(":nth-child(+ /**/n-2)");
+    test_parseable(":nth-child(+/**/N-2)");
+    test_parseable(":nth-child(+N/**/-2)");
+    test_parseable(":nth-child(+N/**/-2)");
+    test_parseable(":nth-child(+N-/**/2)");
+    test_parseable(":nth-child(+N-2/**/)");
+    test_balanced_unparseable(":nth-child(+1/**/N-2)");
+    test_parseable(":nth-child(+1N/**/-2)");
+    test_parseable(":nth-child(+1N/**/-2)");
+    test_parseable(":nth-child(+1N-/**/2)");
+    test_parseable(":nth-child(+1N-2/**/)");
+    test_balanced_unparseable(":nth-child(-/**/N-2)");
+    test_parseable(":nth-child(-N/**/-2)");
+    test_parseable(":nth-child(-N/**/-2)");
+    test_parseable(":nth-child(-N-/**/2)");
+    test_parseable(":nth-child(-N-2/**/)");
+    test_balanced_unparseable(":nth-child(-1/**/N-2)");
+    test_parseable(":nth-child(-1N/**/-2)");
+    test_parseable(":nth-child(-1N/**/-2)");
+    test_parseable(":nth-child(-1N-/**/2)");
+    test_parseable(":nth-child(-1N-2/**/)");
+    test_balanced_unparseable(":nth-child(-/**/ N-2)");
+    test_balanced_unparseable(":nth-child(- /**/N-2)");
+    test_balanced_unparseable(":nth-child(+/**/ N-2)");
+    test_balanced_unparseable(":nth-child(+ /**/N-2)");
+    test_parseable(":nth-child( +n + 1 )");
+    test_parseable(":nth-child( +/**/n + 1 )");
+    test_balanced_unparseable(":nth-child( -/**/2/**/n/**/+/**/4 )");
+    test_parseable(":nth-child( -2n/**/ + /**/4 )");
+    test_parseable(":nth-child( -2n/**/+/**/4 )");
+    test_parseable(":nth-child( -2n  /**/+/**/4 )");
+    test_balanced_unparseable(":nth-child( -/**/n  /**/+ /**/ 4 )");
+    test_parseable(":nth-child( +/**/n  /**/+ /**/ 4 )");
+    test_balanced_unparseable(":nth-child(+1/**/n-1)");
+    test_balanced_unparseable(":nth-child(1/**/n-1)");
+    // bug 876570
+    test_balanced_unparseable(":nth-child(+2n-)");
+    test_balanced_unparseable(":nth-child(+n-)");
+    test_balanced_unparseable(":nth-child(-2n-)");
+    test_balanced_unparseable(":nth-child(-n-)");
+    test_balanced_unparseable(":nth-child(2n-)");
+    test_balanced_unparseable(":nth-child(n-)");
+    test_balanced_unparseable(":nth-child(+2n+)");
+    test_balanced_unparseable(":nth-child(+n+)");
+    test_balanced_unparseable(":nth-child(-2n+)");
+    test_balanced_unparseable(":nth-child(-n+)");
+    test_balanced_unparseable(":nth-child(2n+)");
+    test_balanced_unparseable(":nth-child(n+)");
+
+    // exercise the an+b matching logic particularly hard for
+    // :nth-child() (since we know we use the same code for all 4)
+    var seven_ps = "<p></p><p></p><p></p><p></p><p></p><p></p><p></p>";
+    function pset(indices) { // takes an array of 1-based indices
+        return function pset_filter(doc) {
+            var a = doc.getElementsByTagName("p");
+            var result = [];
+            for (var i in indices)
+                result.push(a[indices[i] - 1]);
+            return result;
+        }
+    }
+    test_selector_in_html(":nth-child(0)", seven_ps,
+                          pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
+    test_selector_in_html(":nth-child(-3)", seven_ps,
+                          pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
+    test_selector_in_html(":nth-child(3)", seven_ps,
+                          pset([3]), pset([1, 2, 4, 5, 6, 7]));
+    test_selector_in_html(":nth-child(0n+3)", seven_ps,
+                          pset([3]), pset([1, 2, 4, 5, 6, 7]));
+    test_selector_in_html(":nth-child(-0n+3)", seven_ps,
+                          pset([3]), pset([1, 2, 4, 5, 6, 7]));
+    test_selector_in_html(":nth-child(8)", seven_ps,
+                          pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
+    test_selector_in_html(":nth-child(odd)", seven_ps,
+                          pset([1, 3, 5, 7]), pset([2, 4, 6]));
+    test_selector_in_html(":nth-child(even)", seven_ps,
+                          pset([2, 4, 6]), pset([1, 3, 5, 7]));
+    test_selector_in_html(":nth-child(2n-1)", seven_ps,
+                          pset([1, 3, 5, 7]), pset([2, 4, 6]));
+    test_selector_in_html(":nth-child( 2n - 1 )", seven_ps,
+                          pset([1, 3, 5, 7]), pset([2, 4, 6]));
+    test_selector_in_html(":nth-child(2n+1)", seven_ps,
+                          pset([1, 3, 5, 7]), pset([2, 4, 6]));
+    test_selector_in_html(":nth-child( 2n + 1 )", seven_ps,
+                          pset([1, 3, 5, 7]), pset([2, 4, 6]));
+    test_selector_in_html(":nth-child(2n+0)", seven_ps,
+                          pset([2, 4, 6]), pset([1, 3, 5, 7]));
+    test_selector_in_html(":nth-child(2n-0)", seven_ps,
+                          pset([2, 4, 6]), pset([1, 3, 5, 7]));
+    test_selector_in_html(":nth-child(-n+3)", seven_ps,
+                          pset([1, 2, 3]), pset([4, 5, 6, 7]));
+    test_selector_in_html(":nth-child(-n-3)", seven_ps,
+                          pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
+    test_selector_in_html(":nth-child(n)", seven_ps,
+                          pset([1, 2, 3, 4, 5, 6, 7]), pset([]));
+    test_selector_in_html(":nth-child(n-3)", seven_ps,
+                          pset([1, 2, 3, 4, 5, 6, 7]), pset([]));
+    test_selector_in_html(":nth-child(n+3)", seven_ps,
+                          pset([3, 4, 5, 6, 7]), pset([1, 2]));
+    test_selector_in_html(":nth-child(2n+3)", seven_ps,
+                          pset([3, 5, 7]), pset([1, 2, 4, 6]));
+    test_selector_in_html(":nth-child(2n)", seven_ps,
+                          pset([2, 4, 6]), pset([1, 3, 5, 7]));
+    test_selector_in_html(":nth-child(2n-3)", seven_ps,
+                          pset([1, 3, 5, 7]), pset([2, 4, 6]));
+    test_selector_in_html(":nth-child(-1n+3)", seven_ps,
+                          pset([1, 2, 3]), pset([4, 5, 6, 7]));
+    test_selector_in_html(":nth-child(-2n+3)", seven_ps,
+                          pset([1, 3]), pset([2, 4, 5, 6, 7]));
+    // And a few spot-checks for the other :nth-* selectors
+    test_selector_in_html(":nth-child(4n+1)", seven_ps,
+                          pset([1, 5]), pset([2, 3, 4, 6, 7]));
+    test_selector_in_html(":nth-last-child(4n+1)", seven_ps,
+                          pset([3, 7]), pset([1, 2, 4, 5, 6]));
+    test_selector_in_html(":nth-of-type(4n+1)", seven_ps,
+                          pset([1, 5]), pset([2, 3, 4, 6, 7]));
+    test_selector_in_html(":nth-last-of-type(4n+1)", seven_ps,
+                          pset([3, 7]), pset([1, 2, 4, 5, 6]));
+    test_selector_in_html(":nth-child(6)", seven_ps,
+                          pset([6]), pset([1, 2, 3, 4, 5, 7]));
+    test_selector_in_html(":nth-last-child(6)", seven_ps,
+                          pset([2]), pset([1, 3, 4, 5, 6, 7]));
+    test_selector_in_html(":nth-of-type(6)", seven_ps,
+                          pset([6]), pset([1, 2, 3, 4, 5, 7]));
+    test_selector_in_html(":nth-last-of-type(6)", seven_ps,
+                          pset([2]), pset([1, 3, 4, 5, 6, 7]));
+
+    // Test [first|last|only]-[child|node|of-type]
+    var interesting_doc = "<!----> <div id='p1'> <!---->x<p id='s1'></p> <!----><p id='s2'></p> <!----></div> <!----><p id='p2'> <!----><span id='s3'></span> <!----><span id='s4'></span> <!---->x</p> <!----><div id='p3'> <!----><p id='s5'></p> <!----></div> <!---->";
+    function idset(ids) { // takes an array of ids
+        return function idset_filter(doc) {
+            var result = [];
+            for (var id of ids)
+                result.push(doc.getElementById(id));
+            return result;
+        }
+    }
+    function classset(classes) { // takes an array of classes
+        return function classset_filter(doc) {
+            var i, j, els;
+            var result = [];
+            for (i = 0; i < classes.length; i++) {
+                els = doc.getElementsByClassName(classes[i]);
+                for (j = 0; j < els.length; j++) {
+                    result.push(els[j]);
+                }
+            }
+            return result;
+        }
+    }
+    function emptyset(doc) { return []; }
+    test_parseable(":first-child");
+    test_parseable(":last-child");
+    test_parseable(":only-child");
+    test_parseable(":-moz-first-node");
+    test_parseable(":-moz-last-node");
+    test_parseable(":first-of-type");
+    test_parseable(":last-of-type");
+    test_parseable(":only-of-type");
+    test_selector_in_html(":first-child", seven_ps,
+                          pset([1]), pset([2, 3, 4, 5, 6, 7]));
+    test_selector_in_html(":first-child", interesting_doc,
+                          idset(["p1", "s1", "s3", "s5"]),
+                          idset(["s2", "p2", "s4", "p3"]));
+    test_selector_in_html(":-moz-first-node", interesting_doc,
+                          idset(["p1", "s3", "s5"]),
+                          idset(["s1", "s2", "p2", "s4", "p3"]));
+    test_selector_in_html(":last-child", seven_ps,
+                          pset([7]), pset([1, 2, 3, 4, 5, 6]));
+    test_selector_in_html(":last-child", interesting_doc,
+                          idset(["s2", "s4", "p3", "s5"]),
+                          idset(["p1", "s1", "p2", "s3"]));
+    test_selector_in_html(":-moz-last-node", interesting_doc,
+                          idset(["s2", "p3", "s5"]),
+                          idset(["p1", "s1", "p2", "s3", "s4"]));
+    test_selector_in_html(":only-child", seven_ps,
+                          pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
+    test_selector_in_html(":only-child", interesting_doc,
+                          idset(["s5"]),
+                          idset(["p1", "s1", "s2", "p2", "s3", "s4", "p3"]));
+    test_selector_in_html(":first-of-type", seven_ps,
+                          pset([1]), pset([2, 3, 4, 5, 6, 7]));
+    test_selector_in_html(":first-of-type", interesting_doc,
+                          idset(["p1", "s1", "p2", "s3", "s5"]),
+                          idset(["s2", "s4", "p3"]));
+    test_selector_in_html(":last-of-type", seven_ps,
+                          pset([7]), pset([1, 2, 3, 4, 5, 6]));
+    test_selector_in_html(":last-of-type", interesting_doc,
+                          idset(["s2", "p2", "s4", "p3", "s5"]),
+                          idset(["p1", "s1", "s3"]));
+    test_selector_in_html(":only-of-type", seven_ps,
+                          pset([]), pset([1, 2, 3, 4, 5, 6, 7]));
+    test_selector_in_html(":only-of-type", interesting_doc,
+                          idset(["p2", "s5"]),
+                          idset(["p1", "s1", "s2", "s3", "s4", "p3"]));
+
+    // And a bunch of tests for the of-type aspect of :nth-of-type() and
+    // :nth-last-of-type().  Note that the last div here contains two
+    // children.
+    var mixed_elements="<p></p><p></p><div></div><p></p><div><p></p><address></address></div><address></address>";
+    function pdaset(ps, divs, addresses) { // takes an array of 1-based indices
+        var l = { p: ps, div: divs, address: addresses };
+        return function pdaset_filter(doc) {
+            var result = [];
+            for (var tag in l) {
+                var a = doc.getElementsByTagName(tag);
+                var indices = l[tag];
+                for (var i in indices)
+                    result.push(a[indices[i] - 1]);
+            }
+            return result;
+        }
+    }
+    test_selector_in_html(":nth-of-type(odd)", mixed_elements,
+                          pdaset([1, 3, 4], [1], [1, 2]),
+                          pdaset([2], [2], []));
+    test_selector_in_html(":nth-of-type(2n-0)", mixed_elements,
+                          pdaset([2], [2], []),
+                          pdaset([1, 3, 4], [1], [1, 2]));
+    test_selector_in_html(":nth-last-of-type(even)", mixed_elements,
+                          pdaset([2], [1], []),
+                          pdaset([1, 3, 4], [2], [1, 2]));
+
+    // Test greediness of descendant combinators.
+    var four_children="<div id='a'><div id='b'><div id='c'><div id='d'><\/div><\/div><\/div><\/div>";
+    test_selector_in_html("#a > div div", four_children,
+                          idset(["c", "d"]), idset(["a", "b"]));
+    test_selector_in_html("#a > #b div", four_children,
+                          idset(["c", "d"]), idset(["a", "b"]));
+    test_selector_in_html("#a div > div", four_children,
+                          idset(["c", "d"]), idset(["a", "b"]));
+    test_selector_in_html("#a #b > div", four_children,
+                          idset(["c"]), idset(["a", "b", "d"]));
+    test_selector_in_html("#a > #b div", four_children,
+                          idset(["c", "d"]), idset(["a", "b"]));
+    test_selector_in_html("#a #c > div", four_children,
+                          idset(["d"]), idset(["a", "b", "c"]));
+    test_selector_in_html("#a > #c div", four_children,
+                          idset([]), idset(["a", "b", "c", "d"]));
+
+    // More descendant combinator greediness (bug 511147)
+    test_selector_in_html(".a > .b ~ .match", '<div class="a"><div class="b"></div><div class="match"></div></div>',
+                         classset(["match"]), classset(["a", "b"]));
+    test_selector_in_html(".a > .b ~ .match", '<div class="a"><div class="b"></div><div class="x"></div><div class="match"></div></div>',
+                         classset(["match"]), classset(["a", "b", "x"]));
+    test_selector_in_html(".a > .b ~ .match", '<div class="a"><div class="b"><p>filler filler <i>filler</i> filler</p></div><div class="match"></div></div>',
+                         classset(["match"]), classset(["a", "b", "x"]));
+    test_selector_in_html(".a > .b ~ .match", '<div class="a"><div class="x"><p>filler filler <i>filler</i> filler</p></div><div></div><div class="b"></div><div></div><div class="x"><p>filler filler <i>filler</i> filler</p></div><div class="match"></div></div>',
+                         classset(["match"]), classset(["a", "b", "x"]));
+    test_selector_in_html(".a > .b ~ .match", '<div class="a"><div class="b"></div><div class="match"></div><div class="match"></div></div>',
+                         classset(["match"]), classset(["a", "b"]));
+
+    test_selector_in_html(".a > .b ~ .nomatch", '<div class="a"><div><div class="b"></div><div class="nomatch"></div></div></div>',
+                         emptyset, classset(["a", "b", "nomatch"]));
+    test_selector_in_html(".a > .b ~ .nomatch", '<div class="a"><div><div class="b"></div><div class="nomatch"></div></div><div class="nomatch"></div></div>',
+                         emptyset, classset(["a", "b", "nomatch"]));
+    test_selector_in_html(".a > .b ~ .nomatch", '<div class="a"><div class="b"></div><div><div class="nomatch"></div></div><div></div></div>',
+                         emptyset, classset(["a", "b", "nomatch"]));
+    test_selector_in_html(".a > .b ~ .nomatch", '<div class="a"><div class="b"></div></div><div class="nomatch"></div>',
+                         emptyset, classset(["a", "b", "nomatch"]));
+
+    // Test serialization of pseudo-elements.
+    should_serialize_to("p::first-letter", "p::first-letter");
+    should_serialize_to("p:first-letter", "p::first-letter");
+    should_serialize_to("div>p:first-letter", "div > p::first-letter");
+    should_serialize_to("span +div:first-line", "span + div::first-line");
+    should_serialize_to("input::placeholder", "input::placeholder");
+    should_serialize_to("input:placeholder-shown", "input:placeholder-shown");
+
+    // Test serialization of ::-moz-placeholder.
+    should_serialize_to("input::-moz-placeholder", "input::placeholder");
+
+    should_serialize_to(':lang("foo\\"bar")', ':lang(foo\\"bar)');
+
+    // Test default namespaces, including inside :not().
+    var html_default_ns = "@namespace url(http://www.w3.org/1999/xhtml);";
+    var html_ns = "@namespace html url(http://www.w3.org/1999/xhtml);";
+    var xul_default_ns = "@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);";
+    var single_a = "<a id='a' href='data:text/plain,this_better_be_unvisited'></a>";
+    var set_single = idset(['a']);
+    var empty_set = idset([]);
+    test_selector_in_html("a", single_a, set_single, empty_set,
+                          html_default_ns);
+    test_selector_in_html("a", single_a, empty_set, set_single,
+                          xul_default_ns);
+    test_selector_in_html("*|a", single_a, set_single, empty_set,
+                          xul_default_ns);
+    test_selector_in_html("html|a", single_a, set_single, empty_set,
+                          xul_default_ns + html_ns);
+    // Type selectors inside :not() bring in default namespaces, but
+    // non-type selectors don't.
+    test_selector_in_html("*|a:not(*)", single_a, set_single, empty_set,
+                          xul_default_ns);
+    test_selector_in_html("*|a:not(a)", single_a, set_single, empty_set,
+                          xul_default_ns);
+    test_selector_in_html("*|a:not(*|*)", single_a, empty_set, set_single,
+                          xul_default_ns);
+    test_selector_in_html("*|a:not(*|a)", single_a, empty_set, set_single,
+                          xul_default_ns);
+    test_selector_in_html("*|a:not(:link)", single_a + "<a id='b'></a>",
+                          idset(["b"]), set_single,
+                          xul_default_ns);
+    test_selector_in_html("*|a:not(:visited)", single_a + "<a id='b'></a>",
+                          idset(["a", "b"]), empty_set,
+                          xul_default_ns);
+    test_selector_in_html("*|a:not(html|*)", single_a, empty_set, set_single,
+                          xul_default_ns + html_ns);
+    test_selector_in_html("*|a:not(html|a)", single_a, empty_set, set_single,
+                          xul_default_ns + html_ns);
+    test_selector_in_html("*|a:not(|*)", single_a, set_single, empty_set,
+                          xul_default_ns + html_ns);
+    test_selector_in_html("*|a:not(|a)", single_a, set_single, empty_set,
+                          xul_default_ns + html_ns);
+    test_selector_in_html("html|a:not(|*)", single_a, set_single, empty_set,
+                          xul_default_ns + html_ns);
+    test_selector_in_html("html|a:not(|a)", single_a, set_single, empty_set,
+                          xul_default_ns + html_ns);
+    test_selector_in_html("html|a:not(*|*)", single_a, empty_set, set_single,
+                          xul_default_ns + html_ns);
+    test_selector_in_html("html|a:not(*|a)", single_a, empty_set, set_single,
+                          xul_default_ns + html_ns);
+
+    // Test -moz-locale-dir
+    test_balanced_unparseable(":-moz-locale-dir(ltr)");
+    test_balanced_unparseable(":-moz-locale-dir(rtl)");
+    test_balanced_unparseable(":-moz-locale-dir(rTl)");
+    test_balanced_unparseable(":-moz-locale-dir(LTR)");
+    test_balanced_unparseable(":-moz-locale-dir(other)");
+
+    test_balanced_unparseable(":-moz-locale-dir()");
+    test_balanced_unparseable(":-moz-locale-dir(())");
+    test_balanced_unparseable(":-moz-locale-dir(3())");
+    test_balanced_unparseable(":-moz-locale-dir(f{})");
+    test_balanced_unparseable(":-moz-locale-dir('ltr')");
+    test_balanced_unparseable(":-moz-locale-dir(ltr, other)");
+    test_balanced_unparseable(":-moz-locale-dir(ltr other)");
+    test_balanced_unparseable(":-moz-locale-dir");
+
+    // Test :dir()
+    test_parseable(":dir(ltr)");
+    test_parseable(":dir(rtl)");
+    test_parseable(":dir(rTl)");
+    test_parseable(":dir(LTR)");
+    test_parseable(":dir(other)");
+    if (document.body.matches(":dir(ltr)")) {
+        test_selector_in_html("a:dir(LTr)", single_a,
+                              set_single, empty_set);
+        test_selector_in_html("a:dir(ltR)", single_a,
+                              set_single, empty_set);
+        test_selector_in_html("a:dir(LTR)", single_a,
+                              set_single, empty_set);
+        test_selector_in_html("a:dir(RTl)", single_a,
+                              empty_set, set_single);
+    } else {
+        test_selector_in_html("a:dir(RTl)", single_a,
+                              set_single, empty_set);
+        test_selector_in_html("a:dir(rtL)", single_a,
+                              set_single, empty_set);
+        test_selector_in_html("a:dir(RTL)", single_a,
+                              set_single, empty_set);
+        test_selector_in_html("a:dir(LTr)", single_a,
+                              empty_set, set_single);
+    }
+    test_selector_in_html("a:dir(other)", single_a,
+                          empty_set, set_single);
+
+    test_balanced_unparseable(":dir()");
+    test_balanced_unparseable(":dir(())");
+    test_balanced_unparseable(":dir(3())");
+    test_balanced_unparseable(":dir(f{})");
+    test_balanced_unparseable(":dir('ltr')");
+    test_balanced_unparseable(":dir(ltr, other)");
+    test_balanced_unparseable(":dir(ltr other)");
+    test_balanced_unparseable(":dir");
+
+    // Test chrome-only -moz-lwtheme
+    test_balanced_unparseable(":-moz-lwtheme");
+
+    test_balanced_unparseable(":-moz-tree-row(selected)");
+    test_balanced_unparseable("::-moz-tree-row(selected)");
+    test_balanced_unparseable("::-MoZ-trEE-RoW(sElEcTeD)");
+    test_balanced_unparseable(":-moz-tree-row(selected focus)");
+    test_balanced_unparseable(":-moz-tree-row(selected , focus)");
+    test_balanced_unparseable("::-moz-tree-row(selected ,focus)");
+    test_balanced_unparseable(":-moz-tree-row(selected, focus)");
+    test_balanced_unparseable("::-moz-tree-row(selected,focus)");
+    test_balanced_unparseable(":-moz-tree-row(selected     focus)");
+    test_balanced_unparseable("::-moz-tree-row(selected    ,   focus)");
+    test_balanced_unparseable("::-moz-tree-twisty(  hover open  )");
+    test_balanced_unparseable("::-moz-tree-row(selected {[]} )");
+    test_balanced_unparseable(":-moz-tree-twisty(open())");
+    test_balanced_unparseable("::-moz-tree-twisty(hover ())");
+
+    test_parseable(":-moz-window-inactive");
+    test_parseable("div p:-moz-window-inactive:hover span");
+
+    // Chrome-only
+    test_unbalanced_unparseable(":-moz-browser-frame");
+
+    // Plugin pseudoclasses are chrome-only:
+    test_unbalanced_unparseable(":-moz-type-unsupported");
+    test_unbalanced_unparseable(":-moz-type-unsupported-platform");
+    test_unbalanced_unparseable(":-moz-handler-clicktoplay");
+    test_unbalanced_unparseable(":-moz-handler-vulnerable-updatable");
+    test_unbalanced_unparseable(":-moz-handler-vulnerable-no-update");
+    test_unbalanced_unparseable(":-moz-handler-disabled");
+    test_unbalanced_unparseable(":-moz-handler-blocked");
+    test_unbalanced_unparseable(":-moz-handler-crashed");
+
+    // We're not in a UA sheet, so this should be invalid.
+    test_balanced_unparseable(":-moz-inert");
+    test_balanced_unparseable(":-moz-native-anonymous");
+    test_balanced_unparseable(":-moz-table-border-nonzero");
+
+    // Case sensitivity of tag selectors
+    function setup_cased_spans(body) {
+      var data = [
+        { tag: "span" },
+        { tag: "sPaN" },
+        { tag: "Span" },
+        { tag: "SPAN" },
+        { ns: "http://www.w3.org/1999/xhtml", tag: "span" },
+        { ns: "http://www.w3.org/1999/xhtml", tag: "sPaN" },
+        { ns: "http://www.w3.org/1999/xhtml", tag: "Span" },
+        { ns: "http://www.w3.org/1999/xhtml", tag: "SPAN" },
+        { ns: "http://example.com/useless", tag: "span" },
+        { ns: "http://example.com/useless", tag: "sPaN" },
+        { ns: "http://example.com/useless", tag: "Span" },
+        { ns: "http://example.com/useless", tag: "SPAN" },
+      ]
+      for (var i in data) {
+        var ent = data[i];
+        var elem;
+        if ("ns" in ent) {
+          elem = body.ownerDocument.createElementNS(ent.ns, ent.tag);
+        } else {
+          elem = body.ownerDocument.createElement(ent.tag);
+        }
+        body.appendChild(elem);
+      }
+    }
+    function bodychildset(indices) {
+      return function bodychildset_filter(doc) {
+        var body = doc.body;
+        var result = [];
+        for (var i in indices) {
+          result.push(body.childNodes[indices[i]]);
+        }
+        return result;
+      }
+    }
+    test_selector_in_html("span", setup_cased_spans,
+                          bodychildset([0, 1, 2, 3, 4, 8]),
+                          bodychildset([5, 6, 7, 9, 10, 11]));
+    test_selector_in_html("sPaN", setup_cased_spans,
+                          bodychildset([0, 1, 2, 3, 4, 9]),
+                          bodychildset([5, 6, 7, 8, 10, 11]));
+    test_selector_in_html("Span", setup_cased_spans,
+                          bodychildset([0, 1, 2, 3, 4, 10]),
+                          bodychildset([5, 6, 7, 8, 9, 11]));
+    test_selector_in_html("SPAN", setup_cased_spans,
+                          bodychildset([0, 1, 2, 3, 4, 11]),
+                          bodychildset([5, 6, 7, 8, 9, 10]));
+
+    // bug 528096 (tree pseudos)
+    test_unbalanced_unparseable(":-moz-tree-column((){} a");
+    test_unbalanced_unparseable(":-moz-tree-column(x(){} a");
+    test_unbalanced_unparseable(":-moz-tree-column(a b (){} a");
+    test_unbalanced_unparseable(":-moz-tree-column(a, b (){} a");
+
+    // Bug 543428 (escaping)
+    test_selector_in_html("\\32|a", single_a, set_single, empty_set,
+                          "@namespace \\32  url(http://www.w3.org/1999/xhtml);");
+    test_selector_in_html("-\\32|a", single_a, set_single, empty_set,
+                          "@namespace -\\32  url(http://www.w3.org/1999/xhtml);");
+    test_selector_in_html("\\2|a", single_a, set_single, empty_set,
+                          "@namespace \\0002  url(http://www.w3.org/1999/xhtml);");
+    test_selector_in_html("-\\2|a", single_a, set_single, empty_set,
+                          "@namespace -\\000002  url(http://www.w3.org/1999/xhtml);");
+    var spans = "<span class='2'></span><span class='&#x2;'></span>" +
+                "<span id='2'></span><span id='&#x2;'></span>"
+    test_selector_in_html(".\\32", spans,
+                          bodychildset([0]), bodychildset([1, 2, 3]));
+    test_selector_in_html("[class=\\32]", spans,
+                          bodychildset([0]), bodychildset([1, 2, 3]));
+    test_selector_in_html(".\\2", spans,
+                          bodychildset([1]), bodychildset([0, 2, 3]));
+    test_selector_in_html("[class=\\2]", spans,
+                          bodychildset([1]), bodychildset([0, 2, 3]));
+    test_selector_in_html("#\\32", spans,
+                          bodychildset([2]), bodychildset([0, 1, 3]));
+    test_selector_in_html("[id=\\32]", spans,
+                          bodychildset([2]), bodychildset([0, 1, 3]));
+    test_selector_in_html("#\\2", spans,
+                          bodychildset([3]), bodychildset([0, 1, 2]));
+    test_selector_in_html("[id=\\2]", spans,
+                          bodychildset([3]), bodychildset([0, 1, 2]));
+    test_balanced_unparseable("#2");
+
+    // Bug 553805:  :not() containing nothing is forbidden
+    test_balanced_unparseable(":not()");
+    test_balanced_unparseable(":not( )");
+    test_balanced_unparseable(":not( \t\n )");
+    test_balanced_unparseable(":not(/*comment*/)");
+    test_balanced_unparseable(":not( /*comment*/  /* comment */  )");
+    test_balanced_unparseable("p :not()");
+    test_balanced_unparseable("p :not( )");
+    test_balanced_unparseable("p :not( \t\n )");
+    test_balanced_unparseable("p :not(/*comment*/)");
+    test_balanced_unparseable("p :not( /*comment*/  /* comment */  )");
+    test_balanced_unparseable("p:not()");
+    test_balanced_unparseable("p:not( )");
+    test_balanced_unparseable("p:not( \t\n )");
+    test_balanced_unparseable("p:not(/*comment*/)");
+    test_balanced_unparseable("p:not( /*comment*/  /* comment */  )");
+
+    test_balanced_unparseable(":not(:nth-child(2k))");
+    test_balanced_unparseable(":not(:nth-child(()))");
+
+    // Bug 1685621 - Serialization of :not()
+    should_serialize_to(":not([disabled][selected])", ":not([disabled][selected])");
+    should_serialize_to(":not([disabled],[selected])", ":not([disabled], [selected])");
+
+    // :-moz-any()
+    test_parseable(":-moz-any()");
+    test_parseable(":-moz-any('foo')");
+    test_parseable(":-moz-any(div p)");
+    test_parseable(":-moz-any(div ~ p)");
+    test_parseable(":-moz-any(div~p)");
+    test_parseable(":-moz-any(div + p)");
+    test_parseable(":-moz-any(div+p)");
+    test_parseable(":-moz-any(div > p)");
+    test_parseable(":-moz-any(div>p)");
+    test_parseable(":-moz-any(div, p)");
+    test_parseable(":-moz-any( div , p  )");
+    test_parseable(":-moz-any(div,p)");
+    test_parseable(":-moz-any(div)");
+    test_parseable(":-moz-any(div,p,:link,span:focus)");
+    test_parseable(":-moz-any(:active,:focus)");
+    test_parseable(":-moz-any(:active,:link:focus)");
+    test_parseable(":-moz-any(div,:nonexistentpseudo)");
+    var any_elts = "<input type='text'><a href='http://www.example.com/'></a><div></div><a name='foo'>";
+    test_selector_in_html(":-moz-any(a,input)", any_elts,
+                          bodychildset([0, 1, 3]), bodychildset([2]));
+    test_selector_in_html(":-moz-any(:link,:not(a))", any_elts,
+                          bodychildset([0, 1, 2]), bodychildset([3]));
+    test_selector_in_html(":-moz-any([href],input[type],input[name])", any_elts,
+                          bodychildset([0, 1]), bodychildset([2, 3]));
+    test_selector_in_html(":-moz-any(div,a):-moz-any([type],[href],[name])",
+                          any_elts,
+                          bodychildset([1, 3]), bodychildset([0, 2]));
+
+    // Test that we don't tokenize an empty HASH.
+    test_balanced_unparseable("#");
+    test_balanced_unparseable("# ");
+    test_balanced_unparseable("#, p");
+    test_balanced_unparseable("# , p");
+    test_balanced_unparseable("p #");
+    test_balanced_unparseable("p # ");
+    test_balanced_unparseable("p #, p");
+    test_balanced_unparseable("p # , p");
+
+    // Test that a backslash alone at EOF outside of a string is treated
+    // as U+FFFD.
+    test_parseable_via_api("#a\\");
+    test_parseable_via_api("#\\");
+    test_parseable_via_api("\\");
+
+    // Test that newline escapes are only supported in strings.
+    test_balanced_unparseable("di\\\nv");
+    test_balanced_unparseable("div \\\n p");
+    test_balanced_unparseable("div\\\n p");
+    test_balanced_unparseable("div \\\np");
+    test_balanced_unparseable("div\\\np");
+
+    // Test that :-moz-placeholder is parsable.
+    test_parseable(":-moz-placeholder");
+
+    // Test that things other than user-action pseudo-classes are
+    // rejected after pseudo-elements.  Some of these tests rely on
+    // using a pseudo-element that supports a user-action pseudo-class
+    // after it, so we need to use the prefixed ::-moz-color-swatch,
+    // which is one of the ones with
+    // CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE (none of which are
+    // unprefixed).
+    test_parseable("::-moz-color-swatch:hover");
+    test_parseable("::-moz-color-swatch:is(:hover)");
+    test_parseable("::-moz-color-swatch:not(:hover)");
+    test_parseable("::-moz-color-swatch:where(:hover)");
+    test_balanced_unparseable("::-moz-color-swatch:not(.foo)");
+    test_balanced_unparseable("::-moz-color-swatch:first-child");
+    test_balanced_unparseable("::-moz-color-swatch:host");
+    test_balanced_unparseable("::-moz-color-swatch:host(div)");
+    test_balanced_unparseable("::-moz-color-swatch:nth-child(1)");
+    test_balanced_unparseable("::-moz-color-swatch:hover#foo");
+    test_balanced_unparseable(".foo::after:not(.bar) ~ h3");
+
+    for (let [selector, expected_serialization_when_parseable] of [
+      ["::-moz-color-swatch:where(.foo)", "::-moz-color-swatch:where()"],
+      ["::-moz-color-swatch:is(.foo)", "::-moz-color-swatch:is()"],
+      ["::-moz-color-swatch:where(p, :hover)", "::-moz-color-swatch:where(:hover)"],
+      ["::-moz-color-swatch:is(p, :hover)", "::-moz-color-swatch:is(:hover)"],
+    ]) {
+      test_parseable(selector);
+      should_serialize_to(selector, expected_serialization_when_parseable);
+    }
+
+    test_parseable(":-moz-broken");
+    test_parseable(":-moz-loading");
+
+    run_deferred_tests();
+}
+
+var deferred_tests = [];
+
+function defer_clonedoc_tests(docurl, onloadfunc)
+{
+    deferred_tests.push( { docurl: docurl, onloadfunc: onloadfunc } );
+}
+
+function run_deferred_tests()
+{
+    if (deferred_tests.length == 0) {
+        SimpleTest.finish();
+        return;
+    }
+
+    cloneiframe.onload = deferred_tests_onload;
+    cloneiframe.src = deferred_tests[0].docurl;
+}
+
+function deferred_tests_onload(event)
+{
+    if (event.target != cloneiframe)
+        return;
+
+    deferred_tests[0].onloadfunc();
+    deferred_tests.shift();
+
+    run_deferred_tests();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_setPropertyWithNull.html b/layout/style/test/test_setPropertyWithNull.html
new file mode 100644
index 0000000000..d54fd03cdd
--- /dev/null
+++ b/layout/style/test/test_setPropertyWithNull.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=830260
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 830260</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript">
+
+  /** Test for Bug 830260 **/
+    var div = document.createElement("div");
+    div.style.color = "green";
+    div.style.color = "null";
+    is(div.style.color, "green", 'Assigning "null" as a color should not parse');
+    div.style.setProperty("color", "null");
+    is(div.style.color, "green",
+       'Passing "null" as a color to setProperty should not parse');
+
+    div.style.setProperty("color", null);
+    is(div.style.color, "",
+       'Passing null as a color to setProperty should remove the property');
+
+    div.style.color = "green";
+    is(div.style.color, "green", 'Assigning "green" as a color should parse');
+
+    div.style.color = null;
+    is(div.style.color, "",
+       'Assigning null as a color should remove the property');
+
+
+
+
+  </script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=830260">Mozilla Bug 830260</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_shape_outside_CORS.html b/layout/style/test/test_shape_outside_CORS.html
new file mode 100644
index 0000000000..2d2ee1c32f
--- /dev/null
+++ b/layout/style/test/test_shape_outside_CORS.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test: shape-outside with a CORS violation</title>
+<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"/>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
+
+<style>
+.container {
+  clear: both;
+  width: 500px;
+}
+.shaper {
+  width: 50px;
+  height: 50px;
+  float: left;
+  background-color: green;
+}
+.shapeAllow {
+  shape-outside: url("support/1x1-transparent.png");
+}
+.shapeRefuse {
+  shape-outside: url("http://example.com/layout/style/test/support/1x1-transparent.png");
+}
+.sibling {
+  display: inline-block;
+}
+</style>
+
+<script>
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+  let divAllow = document.getElementById("allow");
+  let divAllowSib = divAllow.nextElementSibling;
+  ok(divAllowSib.getBoundingClientRect().left == divAllow.getBoundingClientRect().left,
+     "Test 1: Sibling should be at same left offset as div (shape-outside should be allowed), and onload should only fire after layout is complete.");
+
+  let divRefuse = document.getElementById("refuse");
+  let divRefuseSib = divRefuse.nextElementSibling;
+  ok(divRefuseSib.getBoundingClientRect().left != divRefuse.getBoundingClientRect().left,
+     "Test 2: Sibling should be at different left offset from div (shape-outside should be refused).");
+
+  SimpleTest.finish();
+}
+</script>
+</head>
+<body onload="runTests()">
+  <div class="container">
+    <div id="allow" class="shaper shapeAllow"></div><div class="sibling">allow (image is blank, so text is flush left)</div>
+  </div>
+  <div class="container">
+    <div id="refuse" class="shaper shapeRefuse"></div><div class="sibling">refuse (image unread, so text is moved to box edge)</div>
+  </div>
+</body>
+</html>
diff --git a/layout/style/test/test_shared_sheet_caching.html b/layout/style/test/test_shared_sheet_caching.html
new file mode 100644
index 0000000000..e59c0c139e
--- /dev/null
+++ b/layout/style/test/test_shared_sheet_caching.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<meta charset="utf-8">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script>
+  function childWindowLoaded(childWin) {
+    is(
+      childWin.getComputedStyle(childWin.document.documentElement).backgroundColor,
+      "rgb(0, 255, 0)",
+      "Sheet should apply",
+    )
+    is(
+      SpecialPowers.getDOMWindowUtils(childWin).parsedStyleSheets,
+      0,
+      `Shouldn't need to parse the stylesheet ${childWin.parent == window ? "frame" : "top"}`
+    );
+    if (childWin.top == childWin) {
+      SimpleTest.finish();
+    }
+  }
+</script>
+<link rel="stylesheet" href="file_shared_sheet_caching.css">
+<iframe src="file_shared_sheet_caching.html"></iframe>
+<a rel="opener" href="file_shared_sheet_caching.html" target="_blank">Navigation</a>
+<script>
+SimpleTest.waitForExplicitFinish();
+onload = function() {
+  info("Sheets parsed: " + SpecialPowers.DOMWindowUtils.parsedStyleSheets);
+  is(
+    getComputedStyle(document.documentElement).backgroundColor,
+    "rgb(0, 255, 0)",
+    "Sheet should apply",
+  )
+  document.querySelector("a").click();
+}
+</script>
diff --git a/layout/style/test/test_shorthand_property_getters.html b/layout/style/test/test_shorthand_property_getters.html
new file mode 100644
index 0000000000..733003974c
--- /dev/null
+++ b/layout/style/test/test_shorthand_property_getters.html
@@ -0,0 +1,263 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=376075
+-->
+<head>
+  <title>Test for Bug 376075</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=376075">Mozilla Bug 376075</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 376075 **/
+
+var e = document.getElementById("display");
+
+var borderExtras = "; border-image: none";
+
+// Test that we only serialize the 'border' shorthand when appropriate.
+e.setAttribute("style", "border-left: medium solid blue; border-right: medium solid blue; border-top: medium blue solid; border-bottom: blue medium solid" + borderExtras);
+isnot(e.style.border, "", "should be able to serialize border");
+e.setAttribute("style", "border-left: medium solid blue; border-right: medium solid blue; border-top: medium blue solid; border-bottom: green medium solid" + borderExtras);
+is(e.style.border, "", "should not be able to serialize border");
+e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: green" + borderExtras);
+isnot(e.style.border, "", "should be able to serialize border");
+e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: green blue blue blue" + borderExtras);
+is(e.style.border, "", "should not be able to serialize border");
+e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue green blue blue" + borderExtras);
+is(e.style.border, "", "should not be able to serialize border");
+e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue blue green blue" + borderExtras);
+is(e.style.border, "", "should not be able to serialize border");
+e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid; border-color: blue blue blue green" + borderExtras);
+is(e.style.border, "", "should not be able to serialize border");
+e.setAttribute("style", "border-width: 3px 2px 3px 3px; border-style: solid; border-color: green" + borderExtras);
+is(e.style.border, "", "should not be able to serialize border");
+e.setAttribute("style", "border-width: 3px 3px 3px 3px; border-style: solid dashed; border-color: green" + borderExtras);
+is(e.style.border, "", "should not be able to serialize border");
+
+// Test suppression of currentcolor in border shorthands.
+e.setAttribute("style", "border: medium solid");
+ok(e.style.border == "medium solid" ||
+   e.style.border == "solid medium",
+   "implied default color omitted serializing border");
+ok(e.style.borderLeft == "medium solid" ||
+   e.style.borderLeft == "solid medium",
+   "implied default color omitted serializing border-left");
+ok(e.style.cssText == "border: medium solid;" ||
+   e.style.cssText == "border: solid medium;",
+   "implied default color omitted serializing declaration");
+e.setAttribute("style", "border-right: medium solid");
+ok(e.style.borderRight == "medium solid" ||
+   e.style.borderRight == "solid medium",
+   "implied default color omitted serializing border-right");
+ok(e.style.borderRight == "medium solid" ||
+   e.style.borderRight == "solid medium",
+   "implied default color omitted serializing border-right");
+ok(e.style.cssText == "border-right: medium solid;" ||
+   e.style.cssText == "border-right: solid medium;",
+   "implied default color omitted serializing declaration");
+
+// Test that we shorten box properties to the shortest possible.
+e.setAttribute("style", "margin: 7px");
+is(e.style.margin, "7px", "should condense to shortest possible");
+is(e.style.cssText, "margin: 7px;", "should condense to shortest possible");
+e.setAttribute("style", "padding: 7px 7px 7px");
+is(e.style.padding, "7px", "should condense to shortest possible");
+is(e.style.cssText, "padding: 7px;", "should condense to shortest possible");
+e.setAttribute("style", "border-width: 7px 7px 7px 7px");
+is(e.style.borderWidth, "7px", "should condense to shortest possible");
+is(e.style.cssText, "border-width: 7px;", "should condense to shortest possible");
+e.setAttribute("style", "margin: 7px 7px 7px 6px");
+is(e.style.margin, "7px 7px 7px 6px", "should not condense");
+is(e.style.cssText, "margin: 7px 7px 7px 6px;", "should not condense");
+e.setAttribute("style", "border-style: solid dotted none dotted");
+is(e.style.borderStyle, "solid dotted none", "should condense");
+is(e.style.cssText, "border-style: solid dotted none;", "should condense");
+e.setAttribute("style", "border-color: green blue");
+is(e.style.borderColor, "green blue", "should condense");
+is(e.style.cssText, "border-color: green blue;", "should condense");
+e.setAttribute("style", "border-color: green blue green");
+is(e.style.borderColor, "green blue", "should condense");
+is(e.style.cssText, "border-color: green blue;", "should condense");
+e.setAttribute("style", "border-color: green blue green blue");
+is(e.style.borderColor, "green blue", "should condense");
+is(e.style.cssText, "border-color: green blue;", "should condense");
+e.setAttribute("style", "border-color: currentColor currentColor currentcolor CURRENTcolor");
+is(e.style.borderColor, "currentcolor", "should condense to canonical case");
+is(e.style.cssText, "border-color: currentcolor;", "should condense to canonical case");
+e.setAttribute("style", "border-style: ridge none none none");
+is(e.style.borderStyle, "ridge none none", "should condense");
+is(e.style.cssText, "border-style: ridge none none;", "should condense");
+e.setAttribute("style", "border-radius: 1px 1px 1px 1px");
+is(e.style.borderRadius, "1px", "should condense to shortest possible");
+is(e.style.cssText, "border-radius: 1px;", "should condense to shortest possible");
+e.setAttribute("style", "border-radius: 1px 1px 1px 1px / 2px 2px 2px 2px");
+is(e.style.borderRadius, "1px / 2px", "should condense to shortest possible");
+is(e.style.cssText, "border-radius: 1px / 2px;", "should condense to shortest possible");
+e.setAttribute("style", "border-radius: 1px 2px 1px 2px / 1% 2% 3% 2%");
+is(e.style.borderRadius, "1px 2px / 1% 2% 3%", "should condense to shortest possible");
+is(e.style.cssText, "border-radius: 1px 2px / 1% 2% 3%;", "should condense to shortest possible");
+
+// Test that we refuse to serialize the 'background' and 'font'
+// shorthands when some subproperties that can't be expressed in the
+// shorthand syntax are present.
+e.setAttribute("style", "font: medium serif");
+isnot(e.style.font, "", "should have font shorthand");
+e.setAttribute("style", "font: medium serif; font-size-adjust: 0.45");
+is(e.style.font, "", "should not have font shorthand");
+e.setAttribute("style", "font: medium serif; font-feature-settings: 'liga' off");
+is(e.style.font, "", "should not have font shorthand");
+
+// Test that all combinations of background-clip and background-origin
+// can be expressed in the shorthand (which wasn't the case previously).
+e.setAttribute("style", "background: red");
+isnot(e.style.background, "", "should have background shorthand");
+e.setAttribute("style", "background: red; background-origin: border-box");
+isnot(e.style.background, "", "should have background shorthand (origin:border-box)");
+e.setAttribute("style", "background: red; background-clip: padding-box");
+isnot(e.style.background, "", "should have background shorthand (clip:padding-box)");
+e.setAttribute("style", "background: red; background-origin: content-box");
+isnot(e.style.background, "", "should have background shorthand (origin:content-box)");
+e.setAttribute("style", "background: red; background-clip: content-box");
+isnot(e.style.background, "", "should have background shorthand (clip:content-box)");
+e.setAttribute("style", "background: red; background-clip: content-box; background-origin: content-box;");
+isnot(e.style.background, "", "should have background shorthand (clip:content-box;origin:content-box)");
+
+// Test background-size in the background shorthand.
+e.setAttribute("style", "background: red; background-size: 100% 100%");
+isnot(e.style.background, "", "should have background shorthand (size:100% 100%)");
+e.setAttribute("style", "background: red; background-size: 100% auto");
+isnot(e.style.background, "", "should have background shorthand (size:100% auto)");
+e.setAttribute("style", "background: red; background-size: auto 100%");
+isnot(e.style.background, "", "should have background shorthand (size:auto 100%)");
+
+// Check that we only serialize background when the lists (of layers) for
+// the subproperties are the same length.
+e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
+isnot(e.style.background, "", "should have background shorthand (all lists length 3)");
+e.setAttribute("style", "background-clip: border-box, padding-box, border-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
+is(e.style.background, "", "should not have background shorthand (background-clip too long)");
+e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
+is(e.style.background, "", "should not have background shorthand (background-origin too short)");
+e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png), none; background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
+is(e.style.background, "", "should not have background shorthand (background-image too long)");
+e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
+is(e.style.background, "", "should not have background shorthand (background-attachment too short)");
+e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px, bottom; background-repeat: repeat-x, repeat, no-repeat");
+is(e.style.background, "", "should not have background shorthand (background-position too long)");
+e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat");
+is(e.style.background, "", "should not have background shorthand (background-repeat too short)");
+e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
+is(e.style.background, "", "should not have background shorthand (background-size too long)");
+
+// Check that we only serialize background-position when the lists (of layers) for
+// the -x/-y subproperties are the same length.
+e.setAttribute("style", "background-position-x: 10%, left 2em, right; background-position-y: top 2em, bottom, 10%");
+is(e.style.backgroundPosition, "left 10% top 2em, left 2em bottom, right 10%", "should have background-position shorthand (both lists length 3)");
+e.setAttribute("style", "background-position-x: 10%, left 2em; background-position-y: top 2em, bottom, 10%");
+is(e.style.backgroundPosition, "", "should not have background-position shorthand (background-position-x too short)");
+e.setAttribute("style", "background-position-x: 10%, left 2em, right; background-position-y: top 2em");
+is(e.style.backgroundPosition, "", "should not have background-position shorthand (background-position-y too short)");
+
+// Check that background-position serialization doesn't produce invalid values.
+e.setAttribute("style", "background-position: 0px");
+is(e.style.backgroundPosition, "0px center", "1-value form should be accepted, with implied center value for background-position-y");
+e.setAttribute("style", "background-position: 0px center");
+is(e.style.backgroundPosition, "0px center", "2-value form 'x-offset' 'y-edge' should be accepted, and serialize to 2-value form");
+e.setAttribute("style", "background-position: left 0px center");
+is(e.style.backgroundPosition, "left 0px center", "3-value form 'x-edge' 'x-offset' 'y-edge' should be accepted and serialize to 3-value form");
+e.setAttribute("style", "background-position: left top 0px");
+is(e.style.backgroundPosition, "left top 0px", "3-value form 'x-edge' 'y-edge' 'y-offset' should be accepted and serialize to 3-value form");
+e.setAttribute("style", "background-position: left 0px top 0px");
+is(e.style.backgroundPosition, "left 0px top 0px", "4-value form should be accepted and serialize to 4-value form");
+e.setAttribute("style", "background-position-x: 0px; background-position-y: center");
+is(e.style.backgroundPosition, "0px center", "should always serialize to 2-value form if setting -x and -y with the 1-value form");
+e.setAttribute("style", "background-position-x: 0px; background-position-y: 0px");
+is(e.style.backgroundPosition, "0px 0px", "should always serialize to 2-value form if setting -x and -y with the 1-value form");
+e.setAttribute("style", "background-position-x: center; background-position-y: 0px");
+is(e.style.backgroundPosition, "center 0px", "should always serialize to 2-value form if setting -x and -y with the 1-value form");
+e.setAttribute("style", "background-position-x: left; background-position-y: top");
+is(e.style.backgroundPosition, "left top", "should always serialize to 2-value form if setting -x and -y with the 1-value form");
+e.setAttribute("style", "background-position-x: left 0px; background-position-y: center");
+is(e.style.backgroundPosition, "left 0px center", "should always serialize to 3-value form if both -x and -y specified an edge");
+e.setAttribute("style", "background-position-x: right; background-position-y: top 0px");
+is(e.style.backgroundPosition, "right top 0px", "should always serialize to 3-value form if both -x and -y specified an edge");
+e.setAttribute("style", "background-position-x: left 0px; background-position-y: 0px");
+is(e.style.backgroundPosition, "left 0px top 0px", "should serialize to 4-value form if 3-value form would only have one edge");
+e.setAttribute("style", "background-position-x: 0px; background-position-y: top 0px");
+is(e.style.backgroundPosition, "left 0px top 0px", "should serialize to 4-value form if 3-value form would only have one edge");
+
+// Check that we only serialize transition when the lists are the same length.
+e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
+isnot(e.style.transition, "", "should have transition shorthand (lists same length)");
+e.setAttribute("style", "transition-property: color, width, left; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
+is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
+e.setAttribute("style", "transition-property: all; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
+is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
+e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms, 300ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
+is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
+e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear, ease-out; transition-delay: 0s, 1s");
+is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
+e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s, 0s");
+is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
+e.setAttribute("style", "transition: color, width; transition-delay: 0s");
+is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
+
+e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;");
+isnot(e.style.animation, "", "should have animation shorthand (lists same length)");
+e.setAttribute("style", "animation-name: bounce, roll, left; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;");
+is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
+e.setAttribute("style", "animation-name: bounce; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;");
+is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
+e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms, 300ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;");
+is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
+e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear, ease-out; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto");
+is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
+e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s, 0s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;");
+is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
+e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;");
+is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
+e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards, both; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto;");
+is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
+e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2, 1; animation-play-state: paused, running; animation-timeline: auto, auto;");
+is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
+e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running, running; animation-timeline: auto, auto;");
+is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
+e.setAttribute("style", "animation-name: bounce, roll; animation-duration: 1s, 200ms; animation-timing-function: ease-in, linear; animation-delay: 0s, 1s; animation-direction: normal, reverse; animation-fill-mode: forwards, backwards; animation-iteration-count: infinite, 2; animation-play-state: paused, running; animation-timeline: auto, auto, auto;");
+is(e.style.animation, "", "should not have animation shorthand (lists different lengths)");
+
+// Check that the 'border' shorthand resets 'border-image' and
+// but that other 'border-*' shorthands don't
+// (bug 482692).
+e.setAttribute("style", 'border-image: url("foo.png") 5 5 5 5 / 5 5 5 5 / 5 5 5 5 repeat repeat; border-left: medium solid green');
+is(e.style.cssText,
+   'border-image: url("foo.png") 5 / 5 / 5 repeat; border-left: medium solid green;',
+   "border-left does NOT reset border-image");
+e.setAttribute("style", 'border-image: url("foo.png") 5 5 5 5; border: medium solid green');
+is(e.style.cssText,
+   'border: medium solid green;',
+   "border DOES reset border-image");
+
+// Test that the color goes at the beginning of the last item of the
+// background shorthand.
+e.setAttribute("style", "background: url(foo.png) blue");
+is(e.style.cssText,
+   "background: blue url(\"foo.png\");",
+   "color should be at start of single-item background");
+e.setAttribute("style", "background: url(bar.png), url(foo.png) blue");
+is(e.style.cssText,
+   "background: url(\"bar.png\"), blue url(\"foo.png\");",
+   "color should be at start of single-item background");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_specified_value_serialization.html b/layout/style/test/test_specified_value_serialization.html
new file mode 100644
index 0000000000..cb7e67dda7
--- /dev/null
+++ b/layout/style/test/test_specified_value_serialization.html
@@ -0,0 +1,281 @@
+<!doctype html>
+<html>
+<head>
+  <title>Test for miscellaneous specified value issues</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=">Mozilla Bug </a>
+<p id="display"></p>
+<div id="content" style="display: none">
+</div>
+
+<pre id="test">
+<script type="application/javascript">
+
+(function test_bug_721136() {
+  // Test for transform property serialization.
+  [
+    [" mAtRiX(1, 2,3,4, 5,6 ) ", "matrix(1, 2, 3, 4, 5, 6)"],
+    [" mAtRiX3d( 1,2,3,0,4 ,5,6,0,7,8 , 9,0,10, 11,12,1 )  ",
+     "matrix3d(1, 2, 3, 0, 4, 5, 6, 0, 7, 8, 9, 0, 10, 11, 12, 1)"],
+    [" pErSpEcTiVe( 400Px ) ", "perspective(400px)"],
+    [" rOtAtE( 90dEg ) ", "rotate(90deg)"],
+    [" rOtAtE3d( 0,0 , 1 ,180DeG ) ", "rotate3d(0, 0, 1, 180deg)"],
+    [" rOtAtEx( 100GrAD ) ", "rotateX(100grad)"],
+    [" rOtAtEy( 1.57RaD ) ", "rotateY(1.57rad)"],
+    [" rOtAtEz( 0.25TuRn ) ", "rotateZ(0.25turn)"],
+    [" sCaLe( 2 ) ", "scale(2)"],
+    [" sCaLe( 2,3 ) ", "scale(2, 3)"],
+    [" sCaLe3D( 2,4 ,  -9 )  ", "scale3d(2, 4, -9)"],
+    [" sCaLeX( 2 ) ", "scaleX(2)"],
+    [" sCaLeY( 2 ) ", "scaleY(2)"],
+    [" sCaLeZ( 2 ) ", "scaleZ(2)"],
+    [" sKeW( 45dEg ) ", "skew(45deg)"],
+    [" sKeW( 45dEg,45DeG ) ", "skew(45deg, 45deg)"],
+    [" sKeWx( 45DeG ) ", "skewX(45deg)"],
+    [" sKeWy( 45DeG ) ", "skewY(45deg)"],
+    [" tRaNsLaTe( 1Px ) ", "translate(1px)"],
+    [" tRaNsLaTe( 1Px,3Pt ) ", "translate(1px, 3pt)"],
+    [" tRaNsLaTe3D( 21pX,-6pX , 4pX )  ", "translate3d(21px, -6px, 4px)"],
+    [" tRaNsLaTeX( 1pT ) ", "translateX(1pt)"],
+    [" tRaNsLaTeY( 1iN ) ", "translateY(1in)"],
+    [" tRaNsLaTeZ( 15.4pX ) ", "translateZ(15.4px)"],
+    ["tranSlatex( 16px )rotatez(-90deg)  rotate(100grad)\ttranslate3d(12pt, 0pc, 0.0em)",
+     "translateX(16px) rotateZ(-90deg) rotate(100grad) translate3d(12pt, 0pc, 0em)"],
+  ].forEach(function(arr) {
+    document.documentElement.style.MozTransform = arr[0];
+    is(document.documentElement.style.MozTransform, arr[1],
+      "bug-721136 incorrect serialization");
+  });
+
+  var elt = document.documentElement;
+
+  elt.setAttribute("style",
+                   "transform: tRANslatEX(5px) TRanslATey(10px) translatez(2px) ROTATEX(30deg) rotateY(30deg) rotatez(5deg) SKEWx(10deg) skewy(10deg) scaleX(2) SCALEY(0.5) scalez(2)");
+  is(elt.style.getPropertyValue("transform"),
+     "translateX(5px) translateY(10px) translateZ(2px) rotateX(30deg) rotateY(30deg) rotateZ(5deg) skewX(10deg) skewY(10deg) scaleX(2) scaleY(0.5) scaleZ(2)",
+     "bug-721136 expected case canonicalization of transform functions");
+
+  elt.setAttribute("style",
+                   "font-variant-alternates: SWASH(fOo) stYLIStiC(Bar)");
+  is(elt.style.getPropertyValue("font-variant-alternates"),
+     "stylistic(Bar) swash(fOo)",
+     "expected case and ordering canonicalization of font-variant-alternates functions");
+
+  elt.setAttribute("style", ""); // leave the page in a useful state
+})();
+
+(function test_bug_1347164() {
+  // Test that specified color values are serialized as "rgb()"
+  // IFF they're fully-opaque (and otherwise as "rgba()").
+  var color = [
+    ["rgba(0, 0, 0, 1)", "rgb(0, 0, 0)"],
+    ["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0.5)"],
+    ["hsla(0, 0%, 0%, 1)", "rgb(0, 0, 0)"],
+    ["hsla(0, 0%, 0%, 0.5)", "rgba(0, 0, 0, 0.5)"],
+  ];
+
+  var css_color_4 = [
+    ["rgba(0 0 0 / 1)", "rgb(0, 0, 0)"],
+    ["rgba(0 0 0 / 0.1)", "rgba(0, 0, 0, 0.1)"],
+    ["rgb(0 0 0 / 1)", "rgb(0, 0, 0)"],
+    ["rgb(0 0 0 / 0.2)", "rgba(0, 0, 0, 0.2)"],
+    ["hsla(0 0% 0% / 1)", "rgb(0, 0, 0)"],
+    ["hsla(0deg 0% 0% / 0.3)", "rgba(0, 0, 0, 0.3)"],
+    ["hsl(0 0% 0% / 1)", "rgb(0, 0, 0)"],
+    ["hsl(0 0% 0% / 0.4)", "rgba(0, 0, 0, 0.4)"],
+  ];
+
+  var frame_container = document.getElementById("display");
+  var p = document.createElement("p");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < color.length; ++i) {
+    var test = color[i];
+    p.style.color = test[0];
+    is(p.style.color, test[1], "serialization value of " + test[0]);
+  }
+  for (var i = 0; i < css_color_4.length; ++i) {
+    var test = css_color_4[i];
+    p.style.color = test[0];
+    is(p.style.color, test[1], "css-color-4 serialization value of " + test[0]);
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1357117() {
+  // Test that vendor-prefixed gradient styles round-trip with the same prefix,
+  // or with no prefix.
+  var backgroundImages = [
+    // [ specified style,
+    //   expected serialization,
+    //   descriptionOfTestcase ],
+    // Linear gradient with legacy-gradient-line (needs prefixed syntax):
+    [ "-webkit-linear-gradient(10deg, red, blue)",
+      "-webkit-linear-gradient(10deg, red, blue)",
+      "-webkit-linear-gradient with angled legacy-gradient-line" ],
+
+    // Linear gradient with box corner (needs prefixed syntax):
+    [ "-webkit-linear-gradient(top left, red, blue)",
+      "-webkit-linear-gradient(left top, red, blue)",
+      "-webkit-linear-gradient with box corner" ],
+
+    // Servo keeps the original prefix form which is closer to other impls.
+    [ "-webkit-radial-gradient(contain, red, blue)",
+      "-webkit-radial-gradient(closest-side, red, blue)",
+      "-webkit-radial-gradient with legacy 'contain' keyword" ],
+  ];
+
+  var frame_container = document.getElementById("display");
+  var p = document.createElement("p");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundImages.length; ++i) {
+    var test = backgroundImages[i];
+    p.style.backgroundImage = test[0];
+    is(p.style.backgroundImage, test[1],
+       "serialization value of prefixed gradient expression (" + test[2] + ")");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1357932() {
+  // Test for box-position keyword ordering, in serialization of specified CSS
+  // gradients.
+  var backgroundImages = [
+    // [ specified style,
+    //   expected serialization,
+    //   descriptionOfTestcase ],
+    // Linear gradient to box position ordering:
+    [ "linear-gradient(to right top, gray, pink)",
+      "linear-gradient(to right top, gray, pink)",
+      "linear-gradient ordering to right top" ],
+    [ "linear-gradient(to top right, yellow, teal)",
+      "linear-gradient(to right top, yellow, teal)",
+      "linear-gradient ordering to top right" ],
+  ];
+
+  var frame_container = document.getElementById("display");
+  var p = document.createElement("p");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundImages.length; ++i) {
+    var test = backgroundImages[i];
+    p.style.backgroundImage = test[0];
+    is(p.style.backgroundImage, test[1],
+       "serialization value of gradient expression (" + test[2] + ")");
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1367028() {
+  const borderImageSubprops = [
+    "border-image-slice",
+    "border-image-outset",
+    "border-image-width"
+  ];
+  const rectValues = [
+    {
+      values: ["5 5 5 5", "5 5 5", "5 5", "5"],
+      expected: "5",
+      desc: "identical four sides",
+    },
+    {
+      values: ["5 6 5 6", "5 6 5", "5 6"],
+      expected: "5 6",
+      desc: "identical values on each axis",
+    },
+    {
+      values: ["5 6 7 6", "5 6 7"],
+      expected: "5 6 7",
+      desc: "identical values on left and right",
+    },
+    {
+      values: ["5 6 5 7"],
+      desc: "identical values on top and bottom",
+    },
+    {
+      values: ["5 5 6 6", "5 6 6 5"],
+      desc: "identical values on unrelated sides",
+    },
+    {
+      values: ["5 6 7 8"],
+      desc: "different values on all sides",
+    },
+  ];
+
+  let frameContainer = document.getElementById("display");
+  let p = document.createElement("p");
+  frameContainer.appendChild(p);
+
+  for (let prop of borderImageSubprops) {
+    for (let {values, expected, desc} of rectValues) {
+      for (let value of values) {
+        p.style.setProperty(prop, value);
+        is(p.style.getPropertyValue(prop),
+           expected ? expected : value, `${desc} for ${prop}`);
+        p.style.removeProperty(prop);
+      }
+    }
+  }
+
+  p.remove();
+})();
+
+(function test_bug_1397619() {
+  var borderRadius = [
+    // [ specified style,
+    //   expected serialization,
+    //   descriptionOfTestcase ],
+    [ "10px 10px",
+      "10px",
+      "Width and height specified for " ],
+    [ "10px",
+      "10px",
+      "Only width specified for " ],
+  ];
+
+
+  var frame_container = document.getElementById("display");
+  var p = document.createElement("p");
+  frame_container.appendChild(p);
+
+  [
+    "border-top-left-radius",
+    "border-bottom-left-radius",
+    "border-top-right-radius",
+    "border-bottom-right-radius",
+    "border-spacing",
+  ].forEach(function(property) {
+    for (var i = 0; i < borderRadius.length; ++i) {
+      var test = borderRadius[i];
+      p.style.setProperty(property, test[0]);
+      is(p.style.getPropertyValue(property), test[1], test[2] + property);
+    }
+  });
+
+  p.style.paintOrder = "markers";
+  is(p.style.paintOrder, "markers",
+     "specified value serialization for paint-order doesn't contain repetitive values");
+
+  p.remove();
+})();
+
+SimpleTest.waitForExplicitFinish();
+SpecialPowers.pushPrefEnv(
+  {
+    set: [['layout.css.individual-transform.enabled', true]],
+  },
+  () =>
+    window.open('file_specified_value_serialization_individual_transforms.html')
+);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_style_attr_listener.html b/layout/style/test/test_style_attr_listener.html
new file mode 100644
index 0000000000..b824fe7ff4
--- /dev/null
+++ b/layout/style/test/test_style_attr_listener.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test for Bug 338679 (from bug 1340341)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<div style=""></div>
+<script>
+SimpleTest.waitForExplicitFinish();
+
+// Run the test first with mutation events enabled and then disabled.
+SpecialPowers.pushPrefEnv(
+  { 'set': [['dom.mutation-events.cssom.disabled', false]] },
+  runTest
+);
+
+function runTest(stop) {
+  let div = document.querySelector('div');
+  let expectation;
+  let count = 0;
+  div.style.color = "red";
+  div.addEventListener('DOMAttrModified', function(evt) {
+    count++;
+    is(evt.prevValue, expectation.prevValue, `Previous value for event ${count}`);
+    is(evt.newValue, expectation.newValue, `New value for event ${count}`);
+  });
+  expectation = { prevValue: 'color: red;', newValue: 'color: green;' };
+  div.style.color = "green";
+  expectation = { prevValue: 'color: green;', newValue: '' };
+  div.style.color = '';
+  if (SpecialPowers.getBoolPref("dom.mutation-events.cssom.disabled")) {
+    is(count, 0, "No DOMAttrModified event should be triggered");
+  } else {
+    is(count, 2, "DOMAttrModified events should have been triggered");
+  }
+
+  if (!stop) {
+    div.setAttribute("style", "");
+    SpecialPowers.pushPrefEnv(
+      { 'set': [['dom.mutation-events.cssom.disabled', true]] },
+      function() {
+        runTest(true);
+        SimpleTest.finish();
+      }
+    );
+  }
+}
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_style_attribute_quirks.html b/layout/style/test/test_style_attribute_quirks.html
new file mode 100644
index 0000000000..5a5b87e122
--- /dev/null
+++ b/layout/style/test/test_style_attribute_quirks.html
@@ -0,0 +1,18 @@
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=915093
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 915093</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript" src="style_attribute_tests.js"></script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=915093">Mozilla Bug 915093</a>
+<div id="content"></div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_style_attribute_standards.html b/layout/style/test/test_style_attribute_standards.html
new file mode 100644
index 0000000000..e6e64afc24
--- /dev/null
+++ b/layout/style/test/test_style_attribute_standards.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=915093
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 915093</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <script type="application/javascript" src="style_attribute_tests.js"></script>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=915093">Mozilla Bug 915093</a>
+<div id="content"></div>
+<pre id="test">
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_style_struct_copy_constructors.html b/layout/style/test/test_style_struct_copy_constructors.html
new file mode 100644
index 0000000000..95f727a58d
--- /dev/null
+++ b/layout/style/test/test_style_struct_copy_constructors.html
@@ -0,0 +1,93 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test for style struct copy constructors</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="property_database.js"></script>
+  <style type="text/css" id="stylesheet"></style>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<p id="display"><span id="one"></span><span id="two"></span><span id="parent"><span id="child"></span></span></p>
+<div id="content" style="display: none">
+
+<div id="testnode"><span id="element"></span></div>
+
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for style struct copy constructors **/
+
+/**
+ * XXX Why doesn't putting a bug in the nsStyleFont copy-constructor for
+ * font-weight (initializing to normal) trigger a failure of this test?
+ * It works for leaving -moz-image-region uninitialized (both halves),
+ * overwriting text-decoration (only the first half, since it's not
+ * inherited), and leaving visibility uninitialized (only the second
+ * half; passes the first half ok).
+ */
+
+var gElementOne = document.getElementById("one");
+var gElementTwo = document.getElementById("two");
+var gElementParent = document.getElementById("parent");
+var gElementChild = document.getElementById("child");
+var gStyleSheet = document.getElementById("stylesheet").sheet;
+var gRule1 = gStyleSheet.cssRules[gStyleSheet.insertRule("#one, #two, #parent {}", gStyleSheet.cssRules.length)];
+var gRule2 = gStyleSheet.cssRules[gStyleSheet.insertRule("#two, #child {}", gStyleSheet.cssRules.length)];
+
+/** Test using aStartStruct **/
+
+for (var prop in gCSSProperties) {
+  var info = gCSSProperties[prop];
+  if (!("subproperties" in info)) {
+    gRule1.style.setProperty(prop, info.other_values[0], "");
+    gRule2.style.setProperty(prop, info.other_values[0], "");
+  }
+}
+
+for (var prop in gCSSProperties) {
+  var info = gCSSProperties[prop];
+  if (!("subproperties" in info)) {
+    gRule2.style.removeProperty(prop);
+
+    var one = getComputedStyle(gElementOne, "").getPropertyValue(prop);
+    var two = getComputedStyle(gElementTwo, "").getPropertyValue(prop);
+    is(two, one,
+       "property '" + prop + "' was copy-constructed correctly (aStartStruct)");
+
+    gRule2.style.setProperty(prop, info.other_values[0], "");
+  }
+}
+
+/** Test using inheritance **/
+for (var prop in gCSSProperties) {
+  var info = gCSSProperties[prop];
+  if (info.inherited && !("subproperties" in info)) {
+    gRule2.style.removeProperty(prop);
+
+    var parent = getComputedStyle(gElementParent, "").getPropertyValue(prop);
+    var child = getComputedStyle(gElementChild, "").getPropertyValue(prop);
+
+    is(child, parent,
+       "property '" + prop + "' was copy-constructed correctly (inheritance)");
+
+    gRule2.style.setProperty(prop, info.other_values[0], "");
+  }
+}
+
+for (var prop in gCSSProperties) {
+  var info = gCSSProperties[prop];
+  if (!("subproperties" in info)) {
+    gRule1.style.removeProperty(prop);
+    gRule2.style.removeProperty(prop);
+  }
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_stylesheet_additions.html b/layout/style/test/test_stylesheet_additions.html
new file mode 100644
index 0000000000..0e115e91f4
--- /dev/null
+++ b/layout/style/test/test_stylesheet_additions.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>
+  Test for bug 1273303: Stylesheet additions and removals known to not
+  affect the document don't trigger restyles
+</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<div class="classScope">
+  <div></div>
+</div>
+<div id="idScope">
+  <div></div>
+</div>
+<!--
+  We do it this way, using `disabled`, because appending stylesheets to the
+  document marks a restyle for that <style> element as needed, so we can't
+  accurately measure whether we've restyled or not.
+-->
+<style id="target" disabled></style>
+<script>
+SimpleTest.waitForExplicitFinish();
+const utils = SpecialPowers.getDOMWindowUtils(window);
+const TESTS = [
+  { selector: ".nonexistentClassScope", restyle: false },
+  { selector: ".nonexistentClassScope + div", restyle: true },
+  { selector: ".nonexistentClassScope div + div", restyle: false },
+  { selector: ".classScope", restyle: true },
+  { selector: ".classScope div", restyle: true },
+  { selector: "#idScope", restyle: true },
+  { selector: "#nonexistentIdScope", restyle: false },
+  { selector: "#nonexistentIdScope div + bar", restyle: false },
+  { selector: "baz", restyle: false },
+  { cssText: " ", restyle: false },
+  { cssText: "@keyframes foo { from { color: green } to { color: red } } #whatever { animation-name: foo; }", restyle: false },
+];
+
+for (const test of TESTS) {
+  let cssText = test.cssText ? test.cssText : (test.selector + " { color: green; }");
+  target.innerHTML = cssText;
+
+  document.body.offsetWidth;
+  const prevGeneration = utils.restyleGeneration;
+
+  target.disabled = true;
+
+  document.body.offsetWidth;
+  (test.restyle ? isnot : is)(utils.restyleGeneration, prevGeneration,
+     `Stylesheet removal with ${cssText} should ${test.restyle ? "have" : "not have"} caused a restyle`);
+
+  target.disabled = false; // Make the stylesheet effective.
+
+  if (test.selector) {
+    let element = document.querySelector(test.selector);
+    if (element) {
+      is(test.restyle, true, "How could we not expect a restyle?");
+      is(getComputedStyle(element).color, "rgb(0, 128, 0)",
+         "Element style should've changed appropriately");
+    }
+  }
+
+  document.body.offsetWidth;
+  (test.restyle ? isnot : is)(utils.restyleGeneration, prevGeneration,
+     `Stylesheet addition with ${cssText} should ${test.restyle ? "have" : "not have"} caused a restyle`);
+}
+
+SimpleTest.finish();
+</script>
diff --git a/layout/style/test/test_stylesheet_clone_font_face.html b/layout/style/test/test_stylesheet_clone_font_face.html
new file mode 100644
index 0000000000..e50bfec661
--- /dev/null
+++ b/layout/style/test/test_stylesheet_clone_font_face.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<link rel="stylesheet" href="data:text/css,@font-face { font-family: 'MarkA'; src: url(../fonts/markA.ttf); }">
+<link rel="stylesheet" href="data:text/css,@font-face { font-family: 'MarkA'; src: url(../fonts/markA.ttf); }">
+
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+<style>
+  body { font-family: "MarkA"; }
+</style>
+<div>ABC</div>
+<script>
+  function runTest() {
+    var links = document.getElementsByTagName("link");
+    links[0].sheet.cssRules[0].style.src = "../fonts/markB.ttf";
+
+    // Test that the cloned sheet is unaffected.
+    isnot(links[1].sheet.cssRules[0].style.src, "../fonts/markB.ttf", "Cloned sheet left unchanged.");
+
+    SimpleTest.finish();
+  }
+
+  SimpleTest.waitForExplicitFinish();
+  runTest();
+</script>
+</html>
diff --git a/layout/style/test/test_supports_rules.html b/layout/style/test/test_supports_rules.html
new file mode 100644
index 0000000000..8b88fd7836
--- /dev/null
+++ b/layout/style/test/test_supports_rules.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=649740
+-->
+<head>
+  <title>Test for Bug 649740</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style id="style">
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=649740">Mozilla Bug 649740</a>
+<p id="display1"></p>
+<p id="display2"></p>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 649740 **/
+
+function condition(s) {
+  return s.replace(/^@supports\s*/, '').replace(/ \s*{\s*}\s*$/, '');
+}
+
+var styleSheetText =
+  "@supports(color: green){ }\n" +
+  "@supports (color: green) { }\n" +
+  "@supports ((color: green)) { }\n" +
+  "@supports (color: green) and (color: blue) { }\n" +
+  "@supports ( Font:  20px serif ! Important)  { }";
+
+function runTest() {
+  var style = document.getElementById("style");
+  style.textContent = styleSheetText;
+
+  var sheet = style.sheet;
+
+  is(condition(sheet.cssRules[0].cssText), "(color: green)");
+  is(condition(sheet.cssRules[1].cssText), "(color: green)");
+  is(condition(sheet.cssRules[2].cssText), "((color: green))");
+  is(condition(sheet.cssRules[3].cssText), "(color: green) and (color: blue)");
+  is(condition(sheet.cssRules[4].cssText), "( Font:  20px serif ! Important)");
+
+  var cs1 = getComputedStyle(document.getElementById("display1"), "");
+  var cs2 = getComputedStyle(document.getElementById("display2"), "");
+  function check_balanced_condition(condition_inner, expected_match) {
+    style.textContent = "#display1, #display2 { text-decoration: overline }\n" +
+                        "@supports " + condition_inner + "{\n" +
+                        "  #display1 { text-decoration: line-through }\n" +
+                        "}\n" +
+                        "#display2 { text-decoration: underline }\n";
+    is(cs1.textDecorationLine,
+       expected_match ? "line-through" : "overline",
+       "@supports condition \"" + condition_inner + "\" should " +
+       (expected_match ? "" : "NOT ") + "match");
+    is(cs2.textDecorationLine, "underline",
+       "@supports condition \"" + condition_inner + "\" should be balanced");
+  }
+
+  check_balanced_condition("not (color: green)", false);
+  check_balanced_condition("not (colour: green)", true);
+  check_balanced_condition("not(color: green)", false);
+  check_balanced_condition("not(colour: green)", false);
+  check_balanced_condition("not/* */(color: green)", false);
+  check_balanced_condition("not/* */(colour: green)", true);
+  check_balanced_condition("not /* */ (color: green)", false);
+  check_balanced_condition("not /* */ (colour: green)", true);
+  check_balanced_condition("(color: green) and (color: blue)", true);
+  check_balanced_condition("(color: green) /* */ /* */ and /* */ /* */ (color: blue)", true);
+  check_balanced_condition("(color: green) and(color: blue)", false);
+  check_balanced_condition("(color: green) and/* */(color: blue)", true);
+  check_balanced_condition("(color: green)and (color: blue)", true);
+  check_balanced_condition("(color: green) or (color: blue)", true);
+  check_balanced_condition("(color: green) /* */ /* */ or /* */ /* */ (color: blue)", true);
+  check_balanced_condition("(color: green) or(color: blue)", false);
+  check_balanced_condition("(color: green) or/* */(color: blue)", true);
+  check_balanced_condition("(color: green)or (color: blue)", true);
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+runTest();
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_system_font_serialization.html b/layout/style/test/test_system_font_serialization.html
new file mode 100644
index 0000000000..10fb54c45a
--- /dev/null
+++ b/layout/style/test/test_system_font_serialization.html
@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=475214
+-->
+<head>
+  <title>Test for Bug 475214</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=475214">Mozilla Bug 475214</a>
+<p id="display"></p>
+<div id="content">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/* Helper copied from property_database.js */
+function IsCSSPropertyPrefEnabled(prefName)
+{
+  try {
+    if (SpecialPowers.getBoolPref(prefName)) {
+      return true;
+    }
+  } catch (ex) {
+    ok(false, "Failed to look up property-controlling pref '" +
+       prefName + "' (" + ex + ")");
+  }
+
+  return false;
+}
+
+/** Test for Bug 475214 **/
+
+var e = document.getElementById("content");
+var s = e.style;
+
+e.style.font = "menu";
+is(e.style.cssText, "font: menu;", "serialize system font alone");
+is(e.style.font, "menu", "font getter returns value");
+
+e.style.fontFamily = "inherit";
+is(e.style.font, "", "font getter should be empty");
+
+e.style.font = "message-box";
+is(e.style.cssText, "font: message-box;", "serialize system font alone");
+is(e.style.font, "message-box", "font getter returns value");
+
+e.setAttribute("style", "font-weight:bold;font:caption;line-height:3;");
+is(e.style.font, "", "font getter should be empty");
+
+e.setAttribute("style", "font: menu; font-weight: -moz-use-system-font");
+is(e.style.cssText, "font: menu;", "serialize system font alone");
+is(e.style.font, "menu", "font getter returns value");
+
+e.setAttribute("style", "font: inherit; font-family: Helvetica;");
+EXPECTED_DECLS = [
+  "font-family: Helvetica;",
+  "font-feature-settings: inherit;",
+  "font-kerning: inherit;",
+  "font-language-override: inherit;",
+  "font-size-adjust: inherit;",
+  "font-size: inherit;",
+  "font-stretch: inherit;",
+  "font-style: inherit;",
+  "font-variant: inherit;",
+  "font-weight: inherit;",
+  "line-height: inherit;",
+];
+if (IsCSSPropertyPrefEnabled("layout.css.font-variations.enabled")) {
+  EXPECTED_DECLS.push("font-optical-sizing: inherit;");
+  EXPECTED_DECLS.push("font-variation-settings: inherit;");
+}
+EXPECTED_DECLS = EXPECTED_DECLS.sort().join(" ");
+let sortedDecls = e.style.cssText.split(/ (?=font-|line-)/).sort().join(" ");
+is(sortedDecls, EXPECTED_DECLS, "don't serialize system font for font:inherit");
+is(e.style.font, "", "font getter returns nothing");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_text_decoration_shorthands.html b/layout/style/test/test_text_decoration_shorthands.html
new file mode 100644
index 0000000000..d2cfed6667
--- /dev/null
+++ b/layout/style/test/test_text_decoration_shorthands.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>Test parsing of text-decoration shorthands</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <link rel='stylesheet' href='/resources/testharness.css'>
+</head>
+<body>
+
+<script>
+
+var initial_values = {
+    textDecorationColor: "rgb(255, 0, 255)",
+    textDecorationLine: "none",
+    textDecorationStyle: "solid",
+    textDecorationThickness: "auto",
+};
+
+// For various specified values of the text-decoration shorthand,
+// test the computed values of the corresponding longhands.
+var text_decoration_test_cases = [
+    {
+        specified: "none",
+    },
+    {
+        specified: "red",
+        textDecorationColor: "rgb(255, 0, 0)",
+    },
+    {
+        specified: "line-through",
+        textDecorationLine: "line-through",
+    },
+    {
+        specified: "dotted",
+        textDecorationStyle: "dotted",
+    },
+    {
+        specified: "20px",
+        textDecorationThickness: "20px",
+    },
+    {
+        specified: "auto",
+        textDecorationThickness: "auto",
+    },
+    {
+        specified: "from-font",
+        textDecorationThickness: "from-font",
+    },
+    {
+        specified: "#00ff00 underline",
+        textDecorationColor: "rgb(0, 255, 0)",
+        textDecorationLine: "underline",
+    },
+    {
+        specified: "#ffff00 wavy",
+        textDecorationColor: "rgb(255, 255, 0)",
+        textDecorationStyle: "wavy",
+    },
+    {
+        specified: "overline double",
+        textDecorationLine: "overline",
+        textDecorationStyle: "double",
+    },
+    {
+        specified: "red underline solid",
+        textDecorationColor: "rgb(255, 0, 0)",
+        textDecorationLine: "underline",
+        textDecorationStyle: "solid",
+    },
+    {
+        specified: "double overline blue",
+        textDecorationColor: "rgb(0, 0, 255)",
+        textDecorationLine: "overline",
+        textDecorationStyle: "double",
+    },
+    {
+        specified: "solid underline 10px",
+        textDecorationStyle: "solid",
+        textDecorationLine: "underline",
+        textDecorationThickness: "10px",
+    },
+    {
+        specified: "line-through blue 200px",
+        textDecorationLine: "line-through",
+        textDecorationColor:  "rgb(0, 0, 255)",
+        textDecorationThickness: "200px",
+    },
+    {
+        specified: "underline wavy red 0",
+        textDecorationLine: "underline",
+        textDecorationStyle: "wavy",
+        textDecorationColor: "rgb(255, 0, 0)",
+        textDecorationThickness: "0px",
+    },
+    {
+        specified: "overline -30px",
+        textDecorationLine: "overline",
+        textDecorationThickness: "-30px",
+    },
+    {
+        specified: "underline red from-font",
+        textDecorationLine: "underline",
+        textDecorationColor: "rgb(255, 0, 0)",
+        textDecorationThickness: "from-font",
+    },
+];
+
+function run_tests(test_cases, shorthand, subproperties) {
+    test_cases.forEach(function(test_case) {
+        test(function() {
+            var element = document.createElement('div');
+            document.body.appendChild(element);
+            // Set text color to test initial value of text-decoration-color
+            // (currentColor).
+            element.style.color = "#ff00ff";
+            element.style[shorthand] = test_case.specified;
+            var computed = window.getComputedStyle(element);
+            subproperties.forEach(function(longhand) {
+                assert_equals(
+                    computed[longhand],
+                    test_case[longhand] || initial_values[longhand],
+                    longhand
+                );
+            });
+        }, "test parsing of 'text-decoration: " + test_case.specified + "'");
+    });
+}
+
+run_tests(text_decoration_test_cases, "textDecoration", [
+    "textDecorationColor", "textDecorationLine", "textDecorationStyle", "textDecorationThickness"]);
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions.html b/layout/style/test/test_transitions.html
new file mode 100644
index 0000000000..c26ba9be8f
--- /dev/null
+++ b/layout/style/test/test_transitions.html
@@ -0,0 +1,787 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=435441
+-->
+<head>
+  <title>Test for Bug 435441</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+  #display p { margin-top: 0; margin-bottom: 0; }
+  #display .before, #display .after {
+    width: -moz-fit-content; border: 1px solid black;
+  }
+  #display .before::before, #display .after::after {
+    display: block;
+    width: 0;
+    text-indent: 0;
+  }
+  #display .before.started::before, #display .after.started::after {
+    width: 100px;
+    text-indent: 100px;
+    transition: 8s width ease-in-out, 8s text-indent ease-in-out;
+  }
+  #display .before::before {
+    content: "Before";
+  }
+  #display .after::after {
+    content: "After";
+  }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=435441">Mozilla Bug 435441</a>
+<div id="display">
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 435441 **/
+
+// Run tests simultaneously so we don't have to take up too much time.
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout("untriaged");
+var gTestsRunning = 0;
+function TestStarted() { ++gTestsRunning; }
+function TestFinished() { if (--gTestsRunning == 0) SimpleTest.finish(); }
+
+// An array of arrays of functions to be called at the outer index number
+// of seconds after the present.
+var gFutureCalls = [];
+
+function add_future_call(index, func)
+{
+    if (!(index in gFutureCalls)) {
+        gFutureCalls[index] = [];
+    }
+    gFutureCalls[index].push(func);
+    TestStarted();
+}
+var gStartTime1, gStartTime2;
+var gCurrentTime;
+var gSetupComplete = false;
+
+function process_future_calls(index)
+{
+    var calls = gFutureCalls[index];
+    if (!calls)
+        return;
+    gCurrentTime = Date.now();
+    for (var i = 0; i < calls.length; ++i) {
+        calls[i]();
+        TestFinished();
+    }
+}
+
+var timingFunctions = {
+  // a map from the value of 'transition-timing-function' to an array of
+  // the portions this function yields at 0 (always 0), 1/4, 1/2, and
+  // 3/4 and all (always 1) of the way through the time of the
+  // transition.  Each portion is represented as a value and an
+  // acceptable error tolerance (based on a time error of 1%) for that
+  // value.
+
+  // ease
+  "ease": bezier(0.25, 0.1, 0.25, 1),
+  "cubic-bezier(0.25, 0.1, 0.25, 1.0)": bezier(0.25, 0.1, 0.25, 1),
+
+  // linear and various synonyms for it
+  "linear": function(x) { return x; },
+  "cubic-bezier(0.0, 0.0, 1.0, 1.0)": function(x) { return x; },
+  "cubic-bezier(0, 0, 1, 1)": function(x) { return x; },
+  "cubic-bezier(0, 0, 0, 0.0)": function(x) { return x; },
+  "cubic-bezier(1.0, 1, 0, 0)": function(x) { return x; },
+
+  // ease-in
+  "ease-in": bezier(0.42, 0, 1, 1),
+  "cubic-bezier(0.42, 0, 1.0, 1.0)": bezier(0.42, 0, 1, 1),
+
+  // ease-out
+  "ease-out": bezier(0, 0, 0.58, 1),
+  "cubic-bezier(0, 0, 0.58, 1.0)": bezier(0, 0, 0.58, 1),
+
+  // ease-in-out
+  "ease-in-out": bezier(0.42, 0, 0.58, 1),
+  "cubic-bezier(0.42, 0, 0.58, 1.0)": bezier(0.42, 0, 0.58, 1),
+
+  // other cubic-bezier values
+  "cubic-bezier(0.4, 0.1, 0.7, 0.95)": bezier(0.4, 0.1, 0.7, 0.95),
+  "cubic-bezier(1, 0, 0, 1)": bezier(1, 0, 0, 1),
+  "cubic-bezier(0, 1, 1, 0)": bezier(0, 1, 1, 0),
+
+};
+
+var div = document.getElementById("display");
+
+// Set up all the elements on which we are going to initiate transitions.
+
+// We have two reference elements to check the expected timing range.
+// They both have 16s linear transitions from 0 to 1000px.
+// This means they move through 62.5 pixels per second.
+const REF_PX_PER_SEC = 62.5;
+function make_reference_p() {
+    let p = document.createElement("p");
+    p.appendChild(document.createTextNode("reference"));
+    p.style.textIndent = "0px";
+    p.style.transition = "16s text-indent linear";
+    div.appendChild(p);
+    return p;
+}
+var earlyref = make_reference_p();
+var earlyrefcs = getComputedStyle(earlyref, "");
+
+// Test all timing functions using a set of 8-second transitions, which
+// we check at times 0, 2s, 4s, 6s, and 8s.
+var tftests = [];
+for (let tf in timingFunctions) {
+    let p = document.createElement("p");
+    let t = document.createTextNode("transition-timing-function: " + tf);
+    p.appendChild(t);
+    p.style.textIndent = "0px";
+    p.style.transition = "8s text-indent linear";
+    p.style.transitionTimingFunction = tf;
+    div.appendChild(p);
+    is(getComputedStyle(p, "").textIndent, "0px",
+       "should be zero before changing value");
+    tftests.push([ p, tf ]);
+}
+
+// Check that the timing function continues even when we restyle in the
+// middle.
+var interrupt_tests = [];
+for (var restyleParent of [true, false]) {
+    for (let itime = 2; itime < 8; itime += 2) {
+        let p = document.createElement("p");
+        let t = document.createTextNode("interrupt on " +
+                                        (restyleParent ? "parent" : "node itself") +
+                                        " at " + itime + "s");
+        p.appendChild(t);
+        p.style.textIndent = "0px";
+        p.style.transition = "8s text-indent cubic-bezier(0, 1, 1, 0)";
+        if (restyleParent) {
+          let d = document.createElement("div");
+          d.appendChild(p);
+          div.appendChild(d);
+        } else {
+          div.appendChild(p);
+        }
+        is(getComputedStyle(p, "").textIndent, "0px",
+           "should be zero before changing value");
+        setTimeout("interrupt_tests[" + interrupt_tests.length + "]" +
+                   "[0]" + (restyleParent ? ".parentNode" : "") +
+                   ".style.color = 'blue';" +
+                   "check_interrupt_tests()", itime*1000);
+        interrupt_tests.push([ p, itime ]);
+    }
+}
+
+// Test transition-delay values of -4s through 4s on a 4s transition
+// with 'ease-out' timing function.
+var delay_tests = {};
+for (let d = -4; d <= 4; ++d) {
+    let p = document.createElement("p");
+    let delay = d + "s";
+    let t = document.createTextNode("transition-delay: " + delay);
+    p.appendChild(t);
+    p.style.marginLeft = "0px";
+    p.style.transition = "4s margin-left ease-out " + delay;
+    div.appendChild(p);
+    is(getComputedStyle(p, "").marginLeft, "0px",
+       "should be zero before changing value");
+    delay_tests[d] = p;
+}
+
+// Test transition-delay values of -4s through 4s on a 4s transition
+// with duration of zero.
+var delay_zero_tests = {};
+for (let d = -4; d <= 4; ++d) {
+    let p = document.createElement("p");
+    let delay = d + "s";
+    let t = document.createTextNode("transition-delay: " + delay);
+    p.appendChild(t);
+    p.style.marginLeft = "0px";
+    p.style.transition = "0s margin-left linear " + delay;
+    div.appendChild(p);
+    is(getComputedStyle(p, "").marginLeft, "0px",
+       "should be zero before changing value");
+    delay_zero_tests[d] = p;
+}
+
+// Test that changing the value on an already-running transition to the
+// value it currently happens to have resets the transition.
+function make_reset_test(transition, description)
+{
+    let p = document.createElement("p");
+    let t = document.createTextNode(description);
+    p.appendChild(t);
+    p.style.marginLeft = "0px";
+    p.style.transition = transition;
+    div.appendChild(p);
+    is(getComputedStyle(p, "").marginLeft, "0px",
+       "should be zero before changing value");
+    return p;
+}
+var reset_test = make_reset_test("4s margin-left ease-out 4s", "transition-delay reset to starting point");
+var reset_test_reference = make_reset_test("4s margin-left linear -3s", "reference for previous test (reset test)");
+
+// Test that transitions on descendants start correctly when the
+// inherited value is itself transitioning.  In other words, when
+// ancestor and descendant both have a transition for the same property,
+// and the descendant inherits the property from the ancestor, the
+// descendant's transition starts as specified, based on the concepts of
+// the before-change style, the after-change style, and the
+// after-transition style.
+var descendant_tests = [
+    { parent_transition: "",
+      child_transition: "4s text-indent" },
+    { parent_transition: "4s text-indent",
+      child_transition: "" },
+    { parent_transition: "4s text-indent",
+      child_transition: "16s text-indent" },
+    { parent_transition: "4s text-indent",
+      child_transition: "1s text-indent" },
+    { parent_transition: "8s letter-spacing",
+      child_transition: "4s text-indent" },
+    { parent_transition: "4s text-indent",
+      child_transition: "8s letter-spacing" },
+    { parent_transition: "4s text-indent",
+      child_transition: "8s all" },
+    { parent_transition: "8s text-indent",
+      child_transition: "4s all" },
+    // examples with positive and negative delay
+    { parent_transition: "4s text-indent 1s",
+      child_transition: "8s text-indent" },
+    { parent_transition: "4s text-indent -1s",
+      child_transition: "8s text-indent" }
+];
+
+for (let i in descendant_tests) {
+    let test = descendant_tests[i];
+    test.parentNode = document.createElement("div");
+    test.childNode = document.createElement("p");
+    test.parentNode.appendChild(test.childNode);
+    test.childNode.appendChild(document.createTextNode(
+        "parent with \"" + test.parent_transition + "\" and " +
+        "child with \"" + test.child_transition + "\""));
+    test.parentNode.style.transition = test.parent_transition;
+    test.childNode.style.transition = test.child_transition;
+    test.parentNode.style.textIndent = "50px"; // transition from 50 to 150
+    test.parentNode.style.letterSpacing = "10px"; // transition from 10 to 5
+    div.appendChild(test.parentNode);
+    var parentCS = getComputedStyle(test.parentNode, "");
+    var childCS = getComputedStyle(test.childNode, "");
+    is(parentCS.textIndent, "50px",
+       "parent text-indent should be 50px before changing");
+    is(parentCS.letterSpacing, "10px",
+       "parent letter-spacing should be 10px before changing");
+    is(childCS.textIndent, "50px",
+       "child text-indent should be 50px before changing");
+    is(childCS.letterSpacing, "10px",
+       "child letter-spacing should be 10px before changing");
+    test.childCS = childCS;
+}
+
+// For all of these transitions, the transition for margin-left should
+// have a duration of 8s, and the default timing function (ease) and
+// delay (0).
+// This is because we're implementing the proposal in
+// http://lists.w3.org/Archives/Public/www-style/2009Aug/0109.html
+var number_tests = [
+  { style: "transition: 4s margin, 8s margin-left" },
+  { style: "transition: 4s margin-left, 8s margin" },
+  { style: "transition-property: margin-left; " +
+             "transition-duration: 8s, 2s" },
+  { style: "transition-property: margin-left, margin-left; " +
+             "transition-duration: 2s, 8s" },
+  { style: "transition-property: margin-left, margin-left, margin-left; " +
+             "transition-duration: 8s, 2s" },
+  { style: "transition-property: margin-left; " +
+             "transition-duration: 8s, 16s" },
+  { style: "transition-property: margin-left, margin-left; " +
+             "transition-duration: 16s, 8s" },
+  { style: "transition-property: margin-left, margin-left, margin-left; " +
+             "transition-duration: 8s, 16s" },
+  { style: "transition-property: text-indent,word-spacing,margin-left; " +
+             "transition-duration: 8s; " +
+             "transition-delay: 0, 8s" },
+  { style: "transition-property: text-indent,word-spacing,margin-left; " +
+             "transition-duration: 8s, 16s; " +
+             "transition-delay: 8s, 8s, 0, 8s, 8s, 8s" },
+];
+
+for (let i in number_tests) {
+    let test = number_tests[i];
+    let p = document.createElement("p");
+    p.setAttribute("style", test.style);
+    let t = document.createTextNode(test.style);
+    p.appendChild(t);
+    p.style.marginLeft = "100px";
+    div.appendChild(p);
+    is(getComputedStyle(p, "").marginLeft, "100px",
+       "should be 100px before changing value");
+    test.node = p;
+}
+
+// Test transitions that are also from-display:none, to-display:none, and
+// display:none throughout.
+var from_none_test, to_none_test, always_none_test;
+function make_display_test(initially_none, text)
+{
+    let p = document.createElement("p");
+    p.appendChild(document.createTextNode(text));
+    p.style.textIndent = "0px";
+    p.style.transition = "8s text-indent ease-in-out";
+    if (initially_none)
+        p.style.display = "none";
+    div.appendChild(p);
+    return p;
+}
+from_none_test   = make_display_test(true,  "transition from display:none");
+to_none_test     = make_display_test(false, "transition to display:none");
+always_none_test = make_display_test(true,  "transition always display:none");
+var display_tests = [ from_none_test, to_none_test, always_none_test ];
+
+// Test transitions on pseudo-elements
+var before_test, after_test;
+function make_pseudo_elem_test(pseudo)
+{
+    let p = document.createElement("p");
+    p.className = pseudo;
+    div.appendChild(p);
+    return {"pseudo": pseudo, element: p};
+}
+before_test = make_pseudo_elem_test("before");
+after_test = make_pseudo_elem_test("after");
+var pseudo_element_tests = [ before_test, after_test ];
+
+// FIXME (Bug 522599): Test a transition that reverses partway through.
+
+var lateref = make_reference_p();
+var laterefcs = getComputedStyle(lateref, "");
+
+// flush style changes
+var x = getComputedStyle(div, "").width;
+
+// Start our timer as close as possible to when we start the first
+// transition.
+// Do not use setInterval because once it gets off in time, it stays off.
+for (let i = 1; i <= 8; ++i) {
+    setTimeout(process_future_calls, i * 1000, i);
+}
+gStartTime1 = Date.now(); // set before any transitions have started
+
+// Start all the transitions.
+earlyref.style.textIndent = "1000px";
+for (let test in tftests) {
+    let p = tftests[test][0];
+    p.style.textIndent = "100px";
+}
+for (let test in interrupt_tests) {
+    let p = interrupt_tests[test][0];
+    p.style.textIndent = "100px";
+}
+for (let d in delay_tests) {
+    let p = delay_tests[d];
+    p.style.marginLeft = "100px";
+}
+for (let d in delay_zero_tests) {
+    let p = delay_zero_tests[d];
+    p.style.marginLeft = "100px";
+}
+reset_test.style.marginLeft = "100px";
+reset_test_reference.style.marginLeft = "100px";
+for (let i in descendant_tests) {
+    let test = descendant_tests[i];
+    test.parentNode.style.textIndent = "150px";
+    test.parentNode.style.letterSpacing = "5px";
+}
+for (let i in number_tests) {
+    let test = number_tests[i];
+    test.node.style.marginLeft = "50px";
+}
+from_none_test.style.textIndent = "100px";
+from_none_test.style.display = "";
+to_none_test.style.textIndent = "100px";
+to_none_test.style.display = "none";
+always_none_test.style.textIndent = "100px";
+for (let i in pseudo_element_tests) {
+    let test = pseudo_element_tests[i];
+    test.element.classList.add("started");
+}
+lateref.style.textIndent = "1000px";
+
+// flush style changes
+x = getComputedStyle(div, "").width;
+
+gStartTime2 = Date.now(); // set after all transitions have started
+gCurrentTime = gStartTime2;
+
+/**
+ * Assert that a transition whose timing function yields the bezier
+ * |func|, running from |start_time| to |end_time| (both in seconds
+ * relative to when the transitions were started) should have produced
+ * computed value |cval| given that the transition was from
+ * |start_value| to |end_value| (both numbers in CSS pixels).
+ */
+function check_transition_value(func, start_time, end_time,
+                                start_value, end_value, cval, desc,
+                                xfail)
+{
+    /**
+     * Compute the value at a given time |elapsed|, by normalizing the
+     * input to the timing function using start_time and end_time and
+     * then turning the output into a value using start_value and
+     * end_value.
+     *
+     * The |error_direction| argument should be either -1, 0, or 1,
+     * suggesting adding on a little bit of error, to allow for the
+     * cubic-bezier calculation being an approximation.  The amount of
+     * error is proportional to the slope of the timing function, since
+     * the error is added to the *input* of the timing function (after
+     * normalization to 0-1 based on start_time and end_time).
+     */
+    function value_at(elapsed, error_direction) {
+        var time_portion = (elapsed - start_time) / (end_time - start_time);
+        if (time_portion < 0)
+            time_portion = 0;
+        else if (time_portion > 1)
+            time_portion = 1;
+        // Assume a small error since bezier computation can be off slightly.
+        // (This test's computation is probably more accurate than Mozilla's.)
+        var value_portion = func(time_portion + error_direction * 0.0005);
+        if (value_portion < 0)
+            value_portion = 0;
+        else if (value_portion > 1)
+            value_portion = 1;
+        var value = (1 - value_portion) * start_value + value_portion * end_value;
+        if (start_value > end_value)
+            error_direction = -error_direction;
+        // Computed values get rounded to 1/60th of a pixel.
+        return value + error_direction * 0.02;
+    }
+
+    var time_range; // in seconds
+    var uns_range; // |range| before being sorted (so errors give it
+                   // in the original order
+    if (!gSetupComplete) {
+        // No timers involved
+        time_range = [0, 0];
+        if (start_time < 0) {
+            uns_range = [ value_at(0, -1), value_at(0, 1) ];
+        } else {
+            var val = value_at(0, 0);
+            uns_range = [val, val];
+        }
+    } else {
+        time_range = [ px_to_num(earlyrefcs.textIndent) / REF_PX_PER_SEC,
+                       px_to_num(laterefcs.textIndent) / REF_PX_PER_SEC ];
+        // seconds
+        uns_range = [ value_at(time_range[0], -1),
+                      value_at(time_range[1], 1) ];
+    }
+    var range = uns_range.concat(). /* concat to clone array */
+                  sort(function compareNumbers(a,b) { return a - b; });
+    var actual = px_to_num(cval);
+
+    var fn = ok;
+    if (xfail && xfail(range))
+      fn = todo;
+
+    fn(range[0] <= actual && actual <= range[1],
+       desc + ": computed value " + cval + " should be between " +
+       uns_range[0].toFixed(6) + "px and " + uns_range[1].toFixed(6) +
+       "px at time between " + time_range[0] + "s and " + time_range[1] + "s.");
+}
+
+function check_ref_range()
+{
+    // This is the only test where we compare the progress of the
+    // transitions to an actual time; we need considerable tolerance at
+    // the low end (we are using half a second).
+    var expected_range = [ (gCurrentTime - gStartTime2 - 40) / 16,
+                           (Date.now() - gStartTime1 + 20) / 16 ];
+    if (expected_range[0] > 1000) {
+        expected_range[0] = 1000;
+    }
+    if (expected_range[1] > 1000) {
+        expected_range[1] = 1000;
+    }
+    function check(desc, value) {
+        // The timing on the unit test VMs is not reliable, so make this
+        // test report PASS when it succeeds and TODO when it fails.
+        var passed = expected_range[0] <= value && value <= expected_range[1];
+        (passed ? ok : todo)(passed,
+           desc + ": computed value " + value + "px should be between " +
+           expected_range[0].toFixed(6) + "px and " +
+           expected_range[1].toFixed(6) + "px at time between " +
+           expected_range[0]/REF_PX_PER_SEC + "s and " +
+           expected_range[1]/REF_PX_PER_SEC + "s.");
+    }
+    check("early reference", px_to_num(earlyrefcs.textIndent));
+    check("late reference", px_to_num(laterefcs.textIndent));
+}
+
+for (let i = 1; i <= 8; ++i) {
+    add_future_call(i, check_ref_range);
+}
+
+function check_tf_test()
+{
+    for (var test in tftests) {
+        var p = tftests[test][0];
+        var tf = tftests[test][1];
+
+        check_transition_value(timingFunctions[tf], 0, 8, 0, 100,
+                               getComputedStyle(p, "").textIndent,
+                               "timing function test for timing function " + tf);
+
+    }
+
+    check_interrupt_tests();
+}
+
+check_tf_test();
+add_future_call(2, check_tf_test);
+add_future_call(4, check_tf_test);
+add_future_call(6, check_tf_test);
+add_future_call(8, check_tf_test);
+
+function check_interrupt_tests()
+{
+    for (let test in interrupt_tests) {
+        var p = interrupt_tests[test][0];
+        var itime = interrupt_tests[test][1];
+
+        check_transition_value(timingFunctions["cubic-bezier(0, 1, 1, 0)"],
+                               0, 8, 0, 100,
+                               getComputedStyle(p, "").textIndent,
+                               "interrupt " +
+                               (p.parentNode == div ? "" : "on parent ") +
+                               "test for time " + itime + "s");
+    }
+}
+
+// check_interrupt_tests is called from check_tf_test and from
+// where we reset the interrupts
+
+function check_delay_test(time)
+{
+    let tf = timingFunctions["ease-out"];
+    for (let d in delay_tests) {
+        let p = delay_tests[d];
+
+        check_transition_value(tf, Number(d), Number(d) + 4, 0, 100,
+                               getComputedStyle(p, "").marginLeft,
+                               "delay test for delay " + d + "s");
+    }
+}
+
+check_delay_test(0);
+for (let i = 1; i <= 8; ++i) {
+    add_future_call(i, check_delay_test);
+}
+
+function check_delay_zero_test(time)
+{
+    for (let d in delay_zero_tests) {
+        let p = delay_zero_tests[d];
+
+        time_range = [ px_to_num(earlyrefcs.textIndent) / REF_PX_PER_SEC,
+                       px_to_num(laterefcs.textIndent) / REF_PX_PER_SEC ];
+        var m = getComputedStyle(p, "").marginLeft;
+        var desc = "delay_zero test for delay " + d + "s";
+        if (time_range[0] < d && time_range[1] < d) {
+            is(m, "0px", desc);
+        } else if ((time_range[0] > d && time_range[1] > d) ||
+                   (d == 0 && time == 0)) {
+            is(m, "100px", desc);
+        }
+    }
+}
+
+check_delay_zero_test(0);
+for (let i = 1; i <= 8; ++i) {
+    add_future_call(i, check_delay_zero_test);
+}
+
+function reset_reset_test(time)
+{
+    reset_test.style.marginLeft = "0px";
+}
+function check_reset_test(time)
+{
+    is(getComputedStyle(reset_test, "").marginLeft, "0px",
+       "reset test value at time " + time + "s.");
+}
+check_reset_test(0);
+// reset the reset test right now so we don't have to worry about clock skew
+// To make sure that this is valid, check that a pretty-much-identical test is
+// already transitioning.
+is(getComputedStyle(reset_test_reference, "").marginLeft, "75px",
+   "reset test reference value");
+reset_reset_test();
+check_reset_test(0);
+for (let i = 1; i <= 8; ++i) {
+    (function(j) {
+        add_future_call(j, function() { check_reset_test(j); });
+    })(i);
+}
+
+check_descendant_tests();
+add_future_call(2, check_descendant_tests);
+add_future_call(6, check_descendant_tests);
+
+function check_descendant_tests() {
+    // text-indent: transition from 50px to 150px
+    // letter-spacing: transition from 10px to 5px
+    var values = {};
+    values["text-indent"] = [ 50, 150 ];
+    values["letter-spacing"] = [ 10, 5 ];
+    let tf = timingFunctions.ease;
+
+    var time = px_to_num(earlyrefcs.textIndent) / REF_PX_PER_SEC;
+
+    for (let i in descendant_tests) {
+        let test = descendant_tests[i];
+
+        /* ti=text-indent, ls=letter-spacing */
+        var child_ti_duration = 0;
+        var child_ls_duration = 0;
+        var child_ti_delay = 0;
+        var child_ls_delay = 0;
+
+        if (test.parent_transition != "") {
+            var props = test.parent_transition.split(" ");
+            var duration = parseInt(props[0]);
+            var delay = (props.length > 2) ? parseInt(props[2]) : 0;
+            var property = props[1];
+            if (property == "text-indent") {
+                child_ti_duration = duration;
+                child_ti_delay = delay;
+            } else if (property == "letter-spacing") {
+                child_ls_duration = duration;
+                child_ls_delay = delay;
+            } else {
+                ok(false, "fix this test (unexpected transition-property " +
+                          property + " on parent)");
+            }
+        }
+
+        if (test.child_transition != "") {
+            var props = test.child_transition.split(" ");
+            var duration = parseInt(props[0]);
+            var delay = (props.length > 2) ? parseInt(props[2]) : 0;
+            var property = props[1];
+            if (property != "text-indent" && property != "letter-spacing" &&
+                property != "all") {
+                ok(false, "fix this test (unexpected transition-property " +
+                          property + " on child)");
+            }
+
+            // Override the parent's transition with the child's as long
+            // as the child transition is still running.
+            if (property != "letter-spacing" && duration + delay > time) {
+                child_ti_duration = duration;
+                child_ti_delay = delay;
+            }
+            if (property != "text-indent" && duration + delay > time) {
+                child_ls_duration = duration;
+                child_ls_delay = delay;
+            }
+        }
+
+        var time_portions = {
+          "text-indent":
+            { duration: child_ti_duration, delay: child_ti_delay },
+          "letter-spacing":
+            { duration: child_ls_duration, delay: child_ls_delay },
+        };
+
+        for (var prop in {"text-indent": true, "letter-spacing": true}) {
+            var time_portion = time_portions[prop];
+
+            if (time_portion.duration == 0) {
+                time_portion.duration = 0.01;
+                time_portion.delay = -1;
+            }
+
+            check_transition_value(tf, time_portion.delay,
+                                   time_portion.delay + time_portion.duration,
+                                   values[prop][0], values[prop][1],
+                                   test.childCS.getPropertyValue(prop),
+                                   `descendant test #${Number(i)+1}, property ${prop}`);
+        }
+    }
+}
+
+function check_number_tests()
+{
+    let tf = timingFunctions.ease;
+    for (let d in number_tests) {
+        let test = number_tests[d];
+        let p = test.node;
+
+        check_transition_value(tf, 0, 8, 100, 50,
+                               getComputedStyle(p, "").marginLeft,
+                               "number of transitions test for style " +
+                                 test.style);
+    }
+}
+
+check_number_tests(0);
+add_future_call(2, check_number_tests);
+add_future_call(4, check_number_tests);
+add_future_call(6, check_number_tests);
+add_future_call(8, check_number_tests);
+
+function check_display_tests(time)
+{
+    for (let i in display_tests) {
+        let p = display_tests[i];
+
+        // There is no transition if the old or new style is display:none, so
+        // the computed value is always the end value.
+        var computedValue = getComputedStyle(p, "").textIndent;
+        is(computedValue, "100px",
+           "display test for test with " + p.childNodes[0].data +
+           ": computed value " + computedValue + " should be 100px.");
+    }
+}
+
+check_display_tests(0);
+add_future_call(2, function() { check_display_tests(2); });
+add_future_call(4, function() { check_display_tests(4); });
+add_future_call(6, function() { check_display_tests(6); });
+add_future_call(8, function() { check_display_tests(8); });
+
+function check_pseudo_element_tests(time)
+{
+    let tf = timingFunctions["ease-in-out"];
+    for (let i in pseudo_element_tests) {
+        let test = pseudo_element_tests[i];
+
+        check_transition_value(tf, 0, 8, 0, 100,
+                               getComputedStyle(test.element, "").width,
+                               "::"+test.pseudo+" test");
+        check_transition_value(tf, 0, 8, 0, 100,
+                               getComputedStyle(test.element,
+                                                "::"+test.pseudo).textIndent,
+                               "::"+test.pseudo+" indent test");
+    }
+}
+check_pseudo_element_tests(0);
+add_future_call(2, function() { check_pseudo_element_tests(2); });
+add_future_call(4, function() { check_pseudo_element_tests(4); });
+add_future_call(6, function() { check_pseudo_element_tests(6); });
+add_future_call(8, function() { check_pseudo_element_tests(8); });
+
+gSetupComplete = true;
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_and_reframes.html b/layout/style/test/test_transitions_and_reframes.html
new file mode 100644
index 0000000000..dfc16e54d1
--- /dev/null
+++ b/layout/style/test/test_transitions_and_reframes.html
@@ -0,0 +1,298 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=625289
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 625289</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+  :root,
+  #e1, #e2 > div,
+  #b1::before, #b2 > div::before,
+  #a1::after, #a2 > div::after {
+    margin-left: 0;
+  }
+  :root.t,
+  #e1.t, #e2.t > div,
+  #b1.t::before, #b2.t > div::before,
+  #a1.t::after, #a2.t > div::after {
+    transition: margin-left linear 1s;
+  }
+  #b1::before, #b2 > div::before,
+  #a1::after, #a2 > div::after {
+    content: "x";
+    display: block;
+  }
+  :root.m,
+  #e1.m, #e2.m > div,
+  #b1.m::before, #b2.m > div::before,
+  #a1.m::after, #a2.m > div::after {
+    margin-left: 100px;
+  }
+  .o { overflow: hidden }
+  .n { display: none }
+
+  #fline { color: blue; font-size: 20px; width: 800px; }
+  #fline::first-line { color: yellow }
+  #fline.narrow { width: 50px }
+  #fline i { transition: color linear 1s }
+
+  #flexboxtest #flex { display: flex; flex-direction: column }
+  #flexboxtest #flextransition { color: blue; transition: color 5s linear }
+
+  #flexboxtest #flexkid[newstyle] { resize: both }
+  #flexboxtest #flextransition[newstyle] { color: yellow }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=625289">Mozilla Bug 625289</a>
+<div id="container"></div>
+<div id="fline">
+  This text has an <i>i element</i> in it.
+</div>
+<div id="flexboxtest">
+  <div id="flex">
+    hello
+    <span id="flexkid">this appears</span>
+    hello
+    <div id="flextransition">color transition</div>
+  </div>
+</div>
+<pre id="test">
+<script>
+"use strict";
+
+function advance_clock(milliseconds) {
+  SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
+}
+
+var container = document.getElementById("container");
+
+function make_elements(idName, child) {
+  var e = document.createElement("div");
+  e.setAttribute("id", idName);
+  if (child) {
+    e.appendChild(document.createElement("div"));
+  }
+  container.appendChild(e);
+  return e;
+}
+
+function assert_margin_at_quarter(element, pseudo, passes)
+{
+  var desc;
+  var useParent = false;
+  if (element == document.documentElement) {
+    desc = "root element";
+  } else if (element.id) {
+    desc = "element " + element.id;
+  } else {
+    desc = "child of element " + element.parentNode.id;
+    useParent = true;
+  }
+  var classes = (useParent ? element.parentNode : element).getAttribute("class");
+  if (classes) {
+    desc += " (classes: " + classes + ")";
+  }
+  if (pseudo) {
+    desc += " " + pseudo + " pseudo-element";
+  }
+  (passes ? is : todo_is)(getComputedStyle(element, pseudo).marginLeft, "25px",
+                          "margin of " + desc);
+}
+
+function do_test(test)
+{
+  var expected_props = [ "element", "test_child", "pseudo", "passes",
+                         "dynamic_change_transition", "start_from_none" ];
+  for (var propidx in expected_props) {
+    if (! expected_props[propidx] in test) {
+      ok(false, "expected " + expected_props[propidx] + " on test object");
+    }
+  }
+
+  var e;
+  if (typeof(test.element) == "string") {
+    e = make_elements(test.element, test.test_child);
+  } else {
+    if (test.test_child) {
+      ok(false, "test_child unexpected");
+    }
+    e = test.element;
+  }
+
+  var target = test.test_child ? e.firstChild : e;
+
+  if (!test.dynamic_change_transition) {
+    e.classList.add("t");
+  }
+  if (test.start_from_none) {
+    e.classList.add("n");
+  }
+
+  advance_clock(100);
+  e.classList.add("m");
+  e.classList.add("o");
+  if (test.dynamic_change_transition) {
+    e.classList.add("t");
+  }
+  if (test.start_from_none) {
+    e.classList.remove("n");
+  }
+  advance_clock(0);
+  advance_clock(250);
+  assert_margin_at_quarter(target, test.pseudo, test.passes);
+  if (typeof(test.element) == "string") {
+    e.remove();
+  } else {
+    target.style.transition = "";
+    target.removeAttribute("class");
+  }
+}
+
+advance_clock(0);
+
+var tests = [
+  { element:"e1", test_child:false, pseudo:"", passes:true,
+    dynamic_change_transition:false, start_from_none:false },
+  { element:"e2", test_child:true, pseudo:"", passes:true,
+    dynamic_change_transition:false, start_from_none:false },
+  { element:"b1", test_child:false, pseudo:"::before", passes:true,
+    dynamic_change_transition:false, start_from_none:false },
+  { element:"b2", test_child:true, pseudo:"::before", passes:true,
+    dynamic_change_transition:false, start_from_none:false },
+  { element:"a1", test_child:false, pseudo:"::after", passes:true,
+    dynamic_change_transition:false, start_from_none:false },
+  { element:"a2", test_child:true, pseudo:"::after", passes:true,
+    dynamic_change_transition:false, start_from_none:false },
+  { element:document.documentElement, test_child:false, pseudo:"", passes:true,
+    dynamic_change_transition:false, start_from_none:false },
+  // Recheck with a dynamic change in transition
+  { element:"e1", test_child:false, pseudo:"", passes:true,
+    dynamic_change_transition:true, start_from_none:false },
+  { element:"e2", test_child:true, pseudo:"", passes:true,
+    dynamic_change_transition:true, start_from_none:false },
+  { element:"b1", test_child:false, pseudo:"::before", passes:true,
+    dynamic_change_transition:true, start_from_none:false },
+  { element:"b2", test_child:true, pseudo:"::before", passes:true,
+    dynamic_change_transition:true, start_from_none:false },
+  { element:"a1", test_child:false, pseudo:"::after", passes:true,
+    dynamic_change_transition:true, start_from_none:false },
+  { element:"a2", test_child:true, pseudo:"::after", passes:true,
+    dynamic_change_transition:true, start_from_none:false },
+  { element:document.documentElement, test_child:false, pseudo:"", passes:true,
+    dynamic_change_transition:true, start_from_none:false },
+  // Recheck starting from display:none.  Note that these tests all fail,
+  // although we could get *some* of them to pass by calling
+  // RestyleManager::TryInitiatingTransition from
+  // ElementRestyler::RestyleUndisplayedChildren.
+  { element:"e1", test_child:false, pseudo:"", passes:false,
+    dynamic_change_transition:false, start_from_none:true },
+  { element:"e2", test_child:true, pseudo:"", passes:false,
+    dynamic_change_transition:false, start_from_none:true },
+  { element:"b1", test_child:false, pseudo:"::before", passes:false,
+    dynamic_change_transition:false, start_from_none:true },
+  { element:"b2", test_child:true, pseudo:"::before", passes:false,
+    dynamic_change_transition:false, start_from_none:true },
+  { element:"a1", test_child:false, pseudo:"::after", passes:false,
+    dynamic_change_transition:false, start_from_none:true },
+  { element:"a2", test_child:true, pseudo:"::after", passes:false,
+    dynamic_change_transition:false, start_from_none:true },
+  { element:document.documentElement, test_child:false, pseudo:"", passes:false,
+    dynamic_change_transition:false, start_from_none:true },
+  // Recheck with a dynamic change in transition and starting from display:none
+  { element:"e1", test_child:false, pseudo:"", passes:false,
+    dynamic_change_transition:true, start_from_none:true },
+  { element:"e2", test_child:true, pseudo:"", passes:false,
+    dynamic_change_transition:true, start_from_none:true },
+  { element:"b1", test_child:false, pseudo:"::before", passes:false,
+    dynamic_change_transition:true, start_from_none:true },
+  { element:"b2", test_child:true, pseudo:"::before", passes:false,
+    dynamic_change_transition:true, start_from_none:true },
+  { element:"a1", test_child:false, pseudo:"::after", passes:false,
+    dynamic_change_transition:true, start_from_none:true },
+  { element:"a2", test_child:true, pseudo:"::after", passes:false,
+    dynamic_change_transition:true, start_from_none:true },
+  { element:document.documentElement, test_child:false, pseudo:"", passes:false,
+    dynamic_change_transition:true, start_from_none:true },
+];
+
+for (var testidx in tests) {
+  do_test(tests[testidx]);
+}
+
+var fline = document.getElementById("fline");
+var fline_i_cs = getComputedStyle(fline.firstElementChild, "");
+// Note that the color in the ::first-line is never used in the test
+// since we avoid reporting ::first-line data in getComputedStyle.
+// However, if we were to start a transition (incorrectly), that would
+// show up in getComputedStyle.
+var COLOR_IN_LATER_LINES = "rgb(0, 0, 255)";
+
+function do_firstline_test(test) {
+  if (test.widening) {
+    fline.classList.add("narrow");
+    is (fline_i_cs.color, COLOR_IN_LATER_LINES, "initial color");
+  } else {
+    is (fline_i_cs.color, COLOR_IN_LATER_LINES, "initial color");
+  }
+
+  if (test.widening) {
+    fline.classList.remove("narrow");
+  } else {
+    fline.classList.add("narrow");
+  }
+
+  if (test.set_overflow) {
+    fline.classList.add("o");
+  }
+
+  advance_clock(100);
+
+  if (test.widening) {
+    is (fline_i_cs.color, COLOR_IN_LATER_LINES,
+        "::first-line changes don't trigger transitions");
+  } else {
+    is (fline_i_cs.color, COLOR_IN_LATER_LINES,
+        "::first-line changes don't trigger transitions");
+  }
+
+  fline.removeAttribute("class");
+}
+
+var firstline_tests = [
+  { widening: true, set_overflow: false },
+  { widening: false, set_overflow: false },
+  { widening: true, set_overflow: true },
+  { widening: false, set_overflow: true },
+];
+
+for (var firstline_test_idx in firstline_tests) {
+  do_firstline_test(firstline_tests[firstline_test_idx]);
+}
+
+function do_flexbox_reframe_test()
+{
+  var flextransition = document.getElementById("flextransition");
+  var cs = getComputedStyle(flextransition, "");
+  cs.backgroundColor;
+  flextransition.setAttribute("newstyle", "");
+  document.getElementById("flexkid").setAttribute("newstyle", "");
+  is(cs.color, "rgb(0, 0, 255)",
+     "color at start of wrapped flexbox transition");
+  advance_clock(1000);
+  is(cs.color, "rgb(51, 51, 204)",
+     "color one second in to wrapped flexbox transition");
+}
+
+do_flexbox_reframe_test();
+
+SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_and_restyles.html b/layout/style/test/test_transitions_and_restyles.html
new file mode 100644
index 0000000000..35fc608c20
--- /dev/null
+++ b/layout/style/test/test_transitions_and_restyles.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1030993
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1030993</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+  #display {
+    background: blue; height: 10px; width: 0; color: black;
+    transition: width linear 1s, color linear 1s;
+  }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1030993">Mozilla Bug 1030993</a>
+<p id="display"></p>
+<pre id="test">
+</pre>
+<script type="application/javascript">
+
+/** Test for Bug 1030993 **/
+
+function advance_clock(milliseconds) {
+  SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
+}
+
+var p = document.getElementById("display");
+var cs = getComputedStyle(p, "");
+advance_clock(0);
+cs.width; // flush
+p.style.width = "1000px"; // initiate transition
+is(cs.width, "0px", "transition at 0ms"); // flush (and test)
+advance_clock(100);
+is(cs.width, "100px", "transition at 100ms"); // flush
+// restyle *and* trigger new transitions
+p.style.color = "blue";
+// flush again, at the same timestamp
+is(cs.width, "100px", "transition at 100ms, after restyle");
+
+SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_and_zoom.html b/layout/style/test/test_transitions_and_zoom.html
new file mode 100644
index 0000000000..e95581be32
--- /dev/null
+++ b/layout/style/test/test_transitions_and_zoom.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=583219
+-->
+<head>
+  <title>Test for Bug 583219</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+  #display {
+    transition: margin-left 1s linear;
+  }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=583219">Mozilla Bug 583219</a>
+<p id="display"></p>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 583219 **/
+
+var p = document.getElementById("display");
+var cs = getComputedStyle(p, "");
+cs.marginLeft;
+
+p.addEventListener("transitionend", TransitionEndHandler);
+p.style.marginLeft = "100px";
+cs.marginLeft;
+
+SpecialPowers.setFullZoom(window, 2.0)
+
+SimpleTest.waitForExplicitFinish();
+
+function TransitionEndHandler(event) {
+  ok(true, "transition has completed");
+  is(event.propertyName, "margin-left", "event.propertyName");
+  is(cs.marginLeft, "100px", "value of margin-left");
+  SpecialPowers.setFullZoom(window, 1.0)
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_at_start.html b/layout/style/test/test_transitions_at_start.html
new file mode 100644
index 0000000000..15805bbc09
--- /dev/null
+++ b/layout/style/test/test_transitions_at_start.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1380133
+-->
+<head>
+  <meta charset=utf-8>
+  <title>Test for transition value at start (Bug 1380133)</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <link rel="stylesheet" href="/resources/testharness.css">
+  <style>
+    a {
+      color: red;
+      transition: 100s color;
+    }
+    a.active {
+      color: blue;
+    }
+  </style>
+</head>
+<body>
+<a id=anchor><span id=span>Test</span></a>
+</body>
+<script>
+'use strict';
+
+const anchor = document.getElementById('anchor');
+const span   = document.getElementById('span');
+
+test(() => {
+  anchor.classList.add('active');
+  assert_equals(getComputedStyle(span).color, 'rgb(255, 0, 0)',
+                'The child of a transitioning element should inherit its'
+                + ' parent\'s transition start value');
+}, 'Transition start value should be inherited');
+</script>
+</html>
diff --git a/layout/style/test/test_transitions_bug537151.html b/layout/style/test/test_transitions_bug537151.html
new file mode 100644
index 0000000000..8d3b84a5fc
--- /dev/null
+++ b/layout/style/test/test_transitions_bug537151.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=537151
+-->
+<head>
+  <title>Test for Bug 537151</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+  #display {
+    transition: margin-left 200ms;
+  }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=537151">Mozilla Bug 537151</a>
+<p id="display">Paragraph</p>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 537151 **/
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout("untriaged");
+
+var p = document.getElementById("display");
+p.addEventListener("transitionend", listener);
+var ignored = getComputedStyle(p, "").marginLeft;
+p.style.marginLeft = "150px";
+
+var event_count = 0;
+function listener(event)
+{
+  ++event_count;
+  setTimeout(finish, 400);
+  p.style.color = "blue";
+}
+
+function finish()
+{
+  is(event_count, 1, "should have gotten only 1 transitionend event");
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_cancel_near_end.html b/layout/style/test/test_transitions_cancel_near_end.html
new file mode 100644
index 0000000000..496d95e6a1
--- /dev/null
+++ b/layout/style/test/test_transitions_cancel_near_end.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=613888
+-->
+<head>
+  <title>Test for Bug 613888</title>
+  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+    #animated-elements-container > span {
+      color: black;
+      background: white;
+      transition:
+        color 10s ease-out,
+        background 1s ease-out;
+    }
+    #animated-elements-container > span.another {
+      color: white;
+      background: black;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613888">Mozilla Bug 613888</a>
+<pre id="animated-elements-container">
+  <span should-restyle="true">canceled on a half of the animation</span>
+  <span should-restyle="true">canceled too fast, and restyled on transitionend</span>
+  <span>canceled too fast, but not restyled on transitionend</span>
+</pre>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 613888: that we don't cancel transitions when they're
+    about to end (current interpolated value rounds to ending value) and
+    they get an unrelated style change.  **/
+
+var count_remaining = 6;
+
+window.addEventListener('load', function() {
+  var cases = Array.from(document.querySelectorAll('#animated-elements-container > span'));
+
+  cases.forEach(function(aTarget) {
+    aTarget.addEventListener('transitionend', function(aEvent) {
+      if (aTarget.hasAttribute('should-restyle'))
+        aTarget.style.outline = '1px solid';
+      var attr = 'transitionend-' + aEvent.propertyName;
+      if (aTarget.hasAttribute(attr)) {
+        // It's possible, given bad timers, that we might get a
+        // transition that completed before we reversed it, which could
+        // lead to two transitionend events for the same thing.  We
+        // don't want to decrement count_remaining in this case.
+        return;
+      }
+      aTarget.setAttribute(attr, "true");
+      if (--count_remaining == 0) {
+        cases.forEach(function(aCase, aIndex) {
+          ok(aCase.hasAttribute('transitionend-color'),
+             "transitionend for color was fired for case "+aIndex);
+          ok(aCase.hasAttribute('transitionend-background-color'),
+             "transitionend for background-color was fired for case "+aIndex);
+        });
+        SimpleTest.finish();
+      }
+    });
+  });
+
+  cases.forEach(aCase => aCase.className = 'another' );
+
+  window.setTimeout(() => cases[0].className = '', 500);
+  window.setTimeout(() => cases[1].className = cases[2].className = '', 250);
+
+});
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout("untriaged");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_computed_value_combinations.html b/layout/style/test/test_transitions_computed_value_combinations.html
new file mode 100644
index 0000000000..3dfad41e58
--- /dev/null
+++ b/layout/style/test/test_transitions_computed_value_combinations.html
@@ -0,0 +1,170 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=435441
+-->
+<head>
+  <title>Test for Bug 435441</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=435441">Mozilla Bug 435441</a>
+<div id="content" style="display: none"></div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 435441 **/
+
+
+/**
+ * I want to test a reasonable number of combinations rather than all of
+ * them, but I also want the test results to be reproducable.  So use a
+ * simple random number generator with my own seed.  See
+ * http://en.wikipedia.org/wiki/Linear_congruential_generator
+ * (Using the numbers from Numerical Recipes.)
+ */
+var rand_state = 1938266273; // a randomly (once) generated number in [0,2^32)
+var all_integers = true;
+function myrand()
+{
+  rand_state = ((rand_state * 1664525) + 1013904223) % 0x100000000;
+  all_integers = all_integers &&
+                 Math.ceil(rand_state) == Math.floor(rand_state);
+  return rand_state / 0x100000000; // return value in [0,1)
+}
+
+// We want to test a bunch of values for each property.
+// Each of these values will also have a "computed" property filled in
+// below, so that we ensure it always computes to the same value.
+var values = {
+  "transition-duration":
+    [
+      { lone: true,  specified: "initial" },
+      { lone: false, specified: "2s" },
+      { lone: false, specified: "0s" },
+      { lone: false, specified: "430ms" },
+      { lone: false, specified: "1s" },
+    ],
+  "transition-property":
+    [
+      { lone: true,  specified: "initial" },
+      { lone: true,  specified: "none" },
+      { lone: true,  specified: "all" },
+      { lone: false, specified: "color" },
+      { lone: false, specified: "border-spacing" },
+      // Make sure to test the "unknown property" case.
+      { lone: false, specified: "unsupported-property" },
+      { lone: false, specified: "-other-unsupported-property" },
+    ],
+  "transition-timing-function":
+    [
+      { lone: true,  specified: "initial" },
+      { lone: false, specified: "linear" },
+      { lone: false, specified: "ease" },
+      { lone: false, specified: "ease-in-out" },
+      { lone: false, specified: "cubic-bezier(0, 0, 0.63, 1.00)" },
+    ],
+  "transition-delay":
+    [
+      { lone: true,  specified: "initial" },
+      { lone: false, specified: "2s" },
+      { lone: false, specified: "0s" },
+      { lone: false, specified: "430ms" },
+      { lone: false, specified: "-1s" },
+    ],
+};
+
+var elt = document.getElementById("content");
+var cs = getComputedStyle(elt, "");
+
+// Add the "computed" property to all of the above values.
+for (var prop in values) {
+  var valueset = values[prop];
+  for (var index in valueset) {
+    var item = valueset[index];
+    elt.style.setProperty(prop, item.specified, "");
+    item.computed = cs.getPropertyValue(prop);
+    elt.style.removeProperty(prop);
+    isnot(item.computed, "", "computed value must not be empty");
+    if (index != 0) {
+      isnot(item.computed, valueset[index-1].computed,
+            "computed value must not be the same as the last one");
+    }
+  }
+}
+
+var child = document.createElement("div");
+elt.appendChild(child);
+var child_cs = getComputedStyle(child, "");
+
+// Now test a hundred random combinations of values on the parent and
+// child.
+for (var iteration = 0; iteration < 100; ++iteration) {
+  // Figure out values on the parent.
+  var parent_vals = {};
+  for (var prop in values) {
+    var valueset = values[prop];
+    var list_length = Math.ceil(Math.pow(myrand(), 2) * 6);
+      // 41% chance of length 1
+    var specified = [];
+    var computed = [];
+    for (var i = 0; i < list_length; ++i) {
+      var index;
+      do {
+        index = Math.floor(myrand() * valueset.length);
+      } while (list_length != 1 && valueset[index].lone);
+      specified.push(valueset[index].specified);
+      computed.push(valueset[index].computed);
+    }
+    parent_vals[prop] = { specified: specified.join(", "),
+                          computed:  computed.join(", ") };
+    elt.style.setProperty(prop, parent_vals[prop].specified, "");
+  }
+
+  // Figure out values on the child.
+  var child_vals = {};
+  for (var prop in values) {
+    var valueset = values[prop];
+    // Use 0 as a magic value for "inherit".
+    var list_length = Math.floor(Math.pow(myrand(), 1.5) * 7);
+      // 27% chance of inherit
+      // 16% chance of length 1
+    if (list_length == 0) {
+      child_vals[prop] = { specified: "inherit",
+                           computed: parent_vals[prop].computed };
+    } else {
+      var specified = [];
+      var computed = [];
+      for (var i = 0; i < list_length; ++i) {
+        var index;
+        do {
+          index = Math.floor(myrand() * valueset.length);
+        } while (list_length != 1 && valueset[index].lone);
+        specified.push(valueset[index].specified);
+        computed.push(valueset[index].computed);
+      }
+      child_vals[prop] = { specified: specified.join(", "),
+                           computed:  computed.join(", ") };
+    }
+    child.style.setProperty(prop, child_vals[prop].specified, "");
+  }
+
+  // Test computed values
+  for (var prop in values) {
+    is(cs.getPropertyValue(prop), parent_vals[prop].computed,
+       "computed value of " + prop + ": " + parent_vals[prop].specified +
+       " on parent.");
+    is(child_cs.getPropertyValue(prop), child_vals[prop].computed,
+       "computed value of " + prop + ": " + child_vals[prop].specified +
+       " on child.");
+  }
+}
+
+ok(all_integers, "pseudo-random number generator kept its numbers " +
+                 "as integers throughout run");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_computed_values.html b/layout/style/test/test_transitions_computed_values.html
new file mode 100644
index 0000000000..7b350de6b2
--- /dev/null
+++ b/layout/style/test/test_transitions_computed_values.html
@@ -0,0 +1,113 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=435441
+-->
+<head>
+  <title>Test for Bug 435441</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=435441">Mozilla Bug 435441</a>
+<div id="content" style="display: none"></div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 435441 **/
+
+
+/*
+ * test that when transition properties are inherited, the length of the
+ * computed value stays the same
+ */
+
+var p = document.getElementById("content");
+var c = document.createElement("div");
+p.appendChild(c);
+var cs = getComputedStyle(c, "");
+
+p.style.transitionProperty = "margin-left, margin-right";
+c.style.transitionProperty = "inherit";
+is(cs.transitionProperty, "margin-left, margin-right",
+   "computed style match with no other properties");
+c.style.transitionDuration = "5s";
+is(cs.transitionProperty, "margin-left, margin-right",
+   "computed style match with shorter property");
+is(cs.transitionDuration, "5s",
+   "shorter property not extended");
+c.style.transitionDuration = "5s, 4s, 3s, 2000ms";
+is(cs.transitionProperty, "margin-left, margin-right",
+   "computed style match with longer property");
+is(cs.transitionDuration, "5s, 4s, 3s, 2s",
+   "longer property computed correctly");
+p.style.transitionProperty = "";
+c.style.transitionProperty = "";
+c.style.transitionDuration = "";
+
+// and repeat the above set of tests with property and duration swapped
+p.style.transitionDuration = "5s, 4s";
+c.style.transitionDuration = "inherit";
+is(cs.transitionDuration, "5s, 4s",
+   "computed style match with no other properties");
+c.style.transitionProperty = "margin-left";
+is(cs.transitionDuration, "5s, 4s",
+   "computed style match with shorter property");
+is(cs.transitionProperty, "margin-left",
+   "shorter property not extended");
+c.style.transitionProperty =
+  "margin-left, margin-right, margin-top, margin-bottom";
+is(cs.transitionDuration, "5s, 4s",
+   "computed style match with longer property");
+is(cs.transitionProperty,
+   "margin-left, margin-right, margin-top, margin-bottom",
+   "longer property computed correctly");
+p.style.transitionDuration = "";
+c.style.transitionDuration = "";
+c.style.transitionProperty = "";
+
+// And do the same pair of tests for animations:
+
+p.style.animationName = "bounce, roll";
+c.style.animationName = "inherit";
+is(cs.animationName, "bounce, roll",
+   "computed style match with no other properties");
+c.style.animationDuration = "5s";
+is(cs.animationName, "bounce, roll",
+   "computed style match with shorter property");
+is(cs.animationDuration, "5s",
+   "shorter property not extended");
+c.style.animationDuration = "5s, 4s, 3s, 2000ms";
+is(cs.animationName, "bounce, roll",
+   "computed style match with longer property");
+is(cs.animationDuration, "5s, 4s, 3s, 2s",
+   "longer property computed correctly");
+p.style.animationName = "";
+c.style.animationName = "";
+c.style.animationDuration = "";
+
+// and repeat the above set of tests with name and duration swapped
+p.style.animationDuration = "5s, 4s";
+c.style.animationDuration = "inherit";
+is(cs.animationDuration, "5s, 4s",
+   "computed style match with no other properties");
+c.style.animationName = "bounce";
+is(cs.animationDuration, "5s, 4s",
+   "computed style match with shorter property");
+is(cs.animationName, "bounce",
+   "shorter property not extended");
+c.style.animationName =
+  "bounce, roll, wiggle, spin";
+is(cs.animationDuration, "5s, 4s",
+   "computed style match with longer property");
+is(cs.animationName,
+   "bounce, roll, wiggle, spin",
+   "longer property computed correctly");
+p.style.animationDuration = "";
+c.style.animationDuration = "";
+c.style.animationName = "";
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_dynamic_changes.html b/layout/style/test/test_transitions_dynamic_changes.html
new file mode 100644
index 0000000000..4d49db1e3a
--- /dev/null
+++ b/layout/style/test/test_transitions_dynamic_changes.html
@@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=525530
+-->
+<head>
+  <title>Test for Bug 525530</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=525530">Mozilla Bug 525530</a>
+<p id="display" style="text-indent: 100px"></p>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 525530 **/
+
+var p = document.getElementById("display");
+var cs = getComputedStyle(p, "");
+var utils = SpecialPowers.DOMWindowUtils;
+
+p.style.transitionProperty = "all";
+p.style.transitionDuration = "4s";
+p.style.transitionDelay = "-2s";
+p.style.transitionTimingFunction = "linear";
+
+is(cs.textIndent, "100px", "initial value");
+
+p.style.textIndent = "0";
+is(cs.textIndent, "50px", "transition is halfway");
+p.style.transitionDuration = "0s";
+is(cs.textIndent, "50px", "changing duration doesn't change transitioning");
+p.style.transitionDelay = "0s";
+is(cs.textIndent, "50px", "changing delay doesn't change transitioning");
+p.style.transitionProperty = "text-indent";
+is(cs.textIndent, "50px",
+   "irrelevant change to transition property doesn't change transitioning");
+p.style.transitionProperty = "letter-spacing";
+is(cs.textIndent, "0px",
+   "relevant change to transition property does change transitioning");
+
+/** Test for Bug 522643 */
+p.style.transitionDuration = "4s";
+p.style.transitionDelay = "-2s";
+p.style.transitionProperty = "text-indent";
+p.style.textIndent = "100px";
+is(cs.textIndent, "50px", "transition is halfway");
+p.style.transitionDuration = "0s";
+p.style.transitionDelay = "0s";
+is(cs.textIndent, "50px",
+   "changing duration and delay doesn't change transitioning");
+p.style.textIndent = "0px";
+is(cs.textIndent, "0px",
+   "changing property after changing duration and delay stops transition");
+
+/** Test for Bug 1133375 */
+p.style.transitionDuration = "1s";
+p.style.transitionDelay = "-1s";
+p.style.transitionProperty = "text-indent";
+var endCount = 0;
+function incrementEndCount(event) { ++endCount; }
+p.addEventListener("transitionend", incrementEndCount);
+utils.advanceTimeAndRefresh(0);
+p.style.textIndent = "100px";
+is(cs.textIndent, "100px", "value should now be 100px");
+utils.advanceTimeAndRefresh(10);
+is(endCount, 0, "should not have started transition when combined duration less than or equal to 0");
+p.style.transitionDelay = "-2s";
+p.style.textIndent = "0";
+is(cs.textIndent, "0px", "value should now be 0px");
+utils.advanceTimeAndRefresh(10);
+is(endCount, 0, "should not have started transition when combined duration less than or equal to 0");
+utils.restoreNormalRefresh();
+p.style.textIndent = "";
+
+/** Test for bug 1144410 */
+utils.advanceTimeAndRefresh(0);
+p.style.transition = "opacity 200ms linear";
+p.style.opacity = "1";
+is(cs.opacity, "1", "bug 1144410 test - initial opacity");
+p.style.opacity = "0";
+is(cs.opacity, "1", "bug 1144410 test - opacity after starting transition");
+utils.advanceTimeAndRefresh(100);
+is(cs.opacity, "0.5", "bug 1144410 test - opacity during transition");
+utils.advanceTimeAndRefresh(200);
+is(cs.opacity, "0", "bug 1144410 test - opacity after transition");
+document.body.style.display = "none";
+is(cs.opacity, "0", "bug 1144410 test - opacity after display:none");
+p.style.opacity = "1";
+document.body.style.display = "";
+is(cs.opacity, "1", "bug 1144410 test - second transition, initial opacity");
+p.style.opacity = "0";
+is(cs.opacity, "1", "bug 1144410 test - opacity after starting second transition");
+utils.advanceTimeAndRefresh(100);
+is(cs.opacity, "0.5", "bug 1144410 test - opacity during second transition");
+utils.advanceTimeAndRefresh(200);
+is(cs.opacity, "0", "bug 1144410 test - opacity after second transition");
+utils.restoreNormalRefresh();
+p.style.opacity = "";
+p.style.transition = "";
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_events.html b/layout/style/test/test_transitions_events.html
new file mode 100644
index 0000000000..b5838a6d2d
--- /dev/null
+++ b/layout/style/test/test_transitions_events.html
@@ -0,0 +1,291 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=531585
+-->
+<head>
+  <title>Test for Bug 531585 (transitionend event)</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<style type="text/css">
+
+.bar { margin: 10px; }
+
+#one { transition-duration: 500ms; transition-property: all; }
+#two { transition: margin-left 1s; }
+#three { transition: margin 0.5s 0.25s; }
+
+#four, #five, #six, #seven::before, #seven::after {
+  transition: 500ms color;
+  border-color: black; /* don't derive from color */
+  column-rule-color: black; /* don't derive from color */
+  text-decoration-color: black; /* don't derive from color */
+  outline-color: black; /* don't derive from color */
+}
+
+#four {
+  /* give the reversing transition a long duration; the reversing will
+     still be quick */
+  transition-duration: 30s;
+  transition-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+#seven::before, #seven::after {
+  content: "x";
+  transition-duration: 50ms;
+}
+#seven[foo]::before, #seven[foo]::after { color: lime; }
+
+</style>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=531585">Mozilla Bug 531585</a>
+<p id="display">
+
+<span id="one" style="color:blue"></span>
+<span id="two"></span>
+<span id="three"></span>
+<span id="four" style="color: blue"></span>
+<span id="five" style="color: blue"></span>
+<span id="six" style="color: blue"></span>
+<span id="seven" style="color: blue"></span>
+
+</p>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 531585 (transitionend event) **/
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout("untriaged");
+var gTestCount = 0;
+function started_test() { ++gTestCount; }
+function finished_test() { if (--gTestCount == 0) { SimpleTest.finish(); } }
+
+function $(id) { return document.getElementById(id); }
+function cs(id) { return getComputedStyle($(id), ""); }
+
+var got_one_root = false;
+var got_one_target = false;
+var got_two_target = false;
+var got_three_top = false;
+var got_three_right = false;
+var got_three_bottom = false;
+var got_three_left = false;
+var got_four_root = false;
+var got_body = false;
+var did_finish_five = false;
+var did_finish_six = false;
+var got_before = false;
+var got_after = false;
+
+document.documentElement.addEventListener("transitionend",
+  function(event) {
+    if (event.target == $("one")) {
+      ok(!got_one_root, "transitionend on one on root");
+      is(event.propertyName, "border-right-color",
+         "propertyName for transitionend on one");
+      is(event.elapsedTime, 0.5,
+         "elapsedTime for transitionend on one");
+      is(cs("one").borderRightColor, "rgb(0, 255, 0)",
+         "computed style for transitionend on one");
+      got_one_root = true;
+      finished_test();
+    } else if (event.target == $("four")) {
+      ok(!got_four_root, "transitionend on four on root");
+      is(event.propertyName, "color",
+         "propertyName for transitionend on four");
+      // Reported time should (really?) be shortened by reversing.
+      ok(event.elapsedTime < 30,
+         "elapsedTime for transitionend on four");
+      is(cs("four").color, "rgb(0, 0, 255)",
+         "computed style for transitionend on four (end of reverse transition)");
+      got_four_root = true;
+      finished_test();
+    } else if (event.target == document.body) {
+      // A synthesized event.
+      ok(!got_body, "transitionend on body on root");
+      is(event.propertyName, "some-unknown-prop",
+         "propertyName for transitionend on body");
+      // Reported time should (really?) be shortened by reversing.
+      is(event.elapsedTime, 0.5,
+         "elapsedTime for transitionend on body");
+      got_body = true;
+      finished_test();
+    } else if (event.target == $("seven")) {
+      if (!got_before) {
+        got_before = true;
+        is(event.pseudoElement, "::before");
+      } else {
+        ok(!got_after, "transitionend on #seven::after");
+        got_after = true;
+        is(event.pseudoElement, "::after");
+      }
+      is(event.propertyName, "color");
+      is(event.isTrusted, true);
+      finished_test();
+    } else {
+      if ((event.target == $("five") && did_finish_five) ||
+          (event.target == $("six") && did_finish_six)) {
+        todo(false,
+             "it seems that transitionstart and transitionend had been " +
+             "processed in the same frame");
+        return;
+      }
+      ok(false,
+         "unexpected event on " + event.target.nodeName +
+         " element with id '" + event.target.id + "' " +
+         "elapsedTime=" + event.elapsedTime +
+         " propertyName='" + event.propertyName + "'");
+    }
+  });
+
+$("one").addEventListener("transitionend",
+  function(event) {
+    is(event.propertyName, "color", "unexpected " +
+       "property name for transitionend on one on target");
+    ok(!got_one_target,
+        "transitionend on one on target (color)");
+    got_one_target = true;
+    event.stopPropagation();
+    is(event.elapsedTime, 0.5,
+       "elapsedTime for transitionend on one");
+    is(cs("one").getPropertyValue(event.propertyName), "rgb(0, 255, 0)",
+       "computed style of " + event.propertyName + " for transitionend on one");
+    finished_test();
+  });
+
+started_test(); // color on #one
+$("one").style.color = "lime";
+
+
+$("two").addEventListener("transitionend",
+  function(event) {
+    event.stopPropagation();
+
+    ok(!got_two_target, "transitionend on two on target");
+    is(event.propertyName, "margin-left",
+       "propertyName for transitionend on two");
+    is(event.elapsedTime, 1,
+       "elapsedTime for transitionend on two");
+    is(event.bubbles, true,
+       "transitionend events should bubble");
+    is(event.cancelable, false,
+       "transitionend events should not be cancelable");
+    is(cs("two").marginLeft, "10px",
+       "computed style for transitionend on two");
+    got_two_target = true;
+    finished_test();
+  });
+
+started_test(); // #two
+$("two").className = "bar";
+
+$("three").addEventListener("transitionend",
+  function(event) {
+    event.stopPropagation();
+
+    switch (event.propertyName) {
+      case "margin-top":
+        ok(!got_three_top, "should only get margin-top once");
+        got_three_top = true;
+        break;
+      case "margin-right":
+        ok(!got_three_right, "should only get margin-right once");
+        got_three_right = true;
+        break;
+      case "margin-bottom":
+        ok(!got_three_bottom, "should only get margin-bottom once");
+        got_three_bottom = true;
+        break;
+      case "margin-left":
+        ok(!got_three_left, "should only get margin-left once");
+        got_three_left = true;
+        break;
+      default:
+        ok(false, "unexpected property name " + event.propertyName +
+                  " for transitionend on three");
+    }
+    is(event.elapsedTime, 0.5,
+       "elapsedTime for transitionend on three");
+    is(cs("three").getPropertyValue(event.propertyName), "10px",
+       "computed style for transitionend on three");
+    finished_test();
+  }, true);
+
+started_test(); // margin-top on #three
+started_test(); // margin-right on #three
+started_test(); // margin-bottom on #three
+started_test(); // margin-left on #three
+$("three").className = "bar";
+
+// We reverse the transition on four, and we should only get an event
+// at the end of the second transition.
+started_test(); // #four (listener on root)
+$("four").style.color = "lime";
+
+// We cancel the transition on five by changing 'transition-property',
+// and should thus get no event.
+$("five").style.color = "lime";
+
+// We cancel the transition on six by changing 'transition-duration' and
+// then changing the value, so we should get no event.
+$("six").style.color = "lime";
+
+started_test(); // #seven::before (listener on root)
+started_test(); // #seven::after (listener on root)
+$("seven").setAttribute("foo", "bar");
+
+$("five").addEventListener("transitionstart", function() {
+  if (cs("five").color == "rgb(0, 255, 0)") {
+    // The transition has finished already.
+    did_finish_five = true;
+  }
+  $("five").style.transitionProperty = "margin-left";
+});
+
+$("six").addEventListener("transitionstart", function() {
+  if (cs("six").color == "rgb(0, 255, 0)") {
+    // The transition has finished already.
+    did_finish_six = true;
+  }
+  $("six").style.transitionDuration = "0s";
+  $("six").style.transitionDelay = "0s";
+  $("six").style.color = "blue";
+});
+
+function poll_start_reversal() {
+  if (cs("four").color != "rgb(0, 0, 255)") {
+    // The forward transition has started.
+    $("four").style.color = "blue";
+  } else {
+    // The forward transition has not started yet.
+    setTimeout(poll_start_reversal, 20);
+  }
+}
+setTimeout(poll_start_reversal, 200);
+
+// And make our own event to dispatch to the body.
+started_test(); // synthesized event to body (listener on root)
+
+var e = new TransitionEvent("transitionend",
+                            {
+                              bubbles: true,
+                              cancelable: true,
+                              propertyName: "some-unknown-prop",
+                              elapsedTime: 0.5,
+                              pseudoElement: "pseudo"
+                            });
+is(e.bubbles, true);
+is(e.cancelable, true);
+is(e.propertyName, "some-unknown-prop");
+is(e.elapsedTime, 0.5);
+is(e.pseudoElement, "pseudo");
+is(e.isTrusted, false)
+
+document.body.dispatchEvent(e);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html
new file mode 100644
index 0000000000..e4915da19d
--- /dev/null
+++ b/layout/style/test/test_transitions_per_property.html
@@ -0,0 +1,3253 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=435441
+-->
+<head>
+  <title>Test for Bug 435441</title>
+  <meta charset=utf-8>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="property_database.js"></script>
+  <script type="text/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+  #display > p { margin-top: 0; margin-bottom: 0; }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=435441">Mozilla Bug 435441</a>
+
+<!--
+  fixed-height container so percentage heights compute to different
+  (i.e., nonzero) values
+  fixed-width container so that percentages for margin-top and
+  margin-bottom are all relative to the same size container (rather than
+  one that depends on whether we're tall enough to need a scrollbar)
+
+  Use a 20px font size and line-height so that percentage line-height
+  and vertical-align doesn't accumulate rounding error.
+  -->
+<div style="height: 50px; width: 300px; font-size: 20px; line-height: 20px">
+
+<div id="display">
+</div>
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/* eslint no-shadow: ["error", {"allow": ["prop", "div"]}] */
+/* eslint-disable dot-notation */
+
+
+/** Test for Bug 435441 **/
+
+SimpleTest.requestLongerTimeout(2);
+SimpleTest.waitForExplicitFinish();
+
+function has_num(str)
+{
+    return !!String(str).match(/^([\d.]+)/);
+}
+
+function any_unit_to_num(str)
+{
+    return Number(String(str).match(/^([\d.]+)/)[1]);
+}
+
+var FUNC_NEGATIVE = "cubic-bezier(0.25, -2, 0.75, 1)";
+var FUNC_OVERONE = "cubic-bezier(0.25, 0, 0.75, 3)";
+
+var supported_properties = {
+    "aspect-ratio" : [ test_aspect_ratio_transition ],
+    "border-bottom-left-radius": [ test_radius_transition ],
+    "border-bottom-right-radius": [ test_radius_transition ],
+    "border-top-left-radius": [ test_radius_transition ],
+    "border-top-right-radius": [ test_radius_transition ],
+    "border-start-start-radius": [ test_radius_transition ],
+    "border-start-end-radius": [ test_radius_transition ],
+    "border-end-start-radius": [ test_radius_transition ],
+    "border-end-end-radius": [ test_radius_transition ],
+    "-moz-box-flex": [ test_float_zeroToOne_transition,
+                       test_float_aboveOne_transition,
+                       test_float_zeroToOne_clamped ],
+    "box-shadow": [ test_shadow_transition ],
+    "column-count": [ test_pos_integer_or_auto_transition,
+                      test_integer_at_least_one_clamping ],
+    "column-rule-color": [ test_color_transition,
+                           test_currentcolor_transition ],
+    "column-rule-width": [ test_length_transition,
+                           test_length_clamped ],
+    "column-width": [ test_length_transition,
+                      test_length_clamped ],
+    "cx": [ test_length_transition, test_percent_transition,
+            test_length_unclamped, test_percent_unclamped ],
+    "cy": [ test_length_transition, test_percent_transition,
+            test_length_unclamped, test_percent_unclamped ],
+    "background-color": [ test_color_transition,
+                          test_currentcolor_transition ],
+    "background-position": [ test_background_position_transition,
+                             test_length_percent_pair_unclamped ],
+    "background-position-x": [ test_background_position_coord_transition,
+                               test_length_transition,
+                               test_percent_transition,
+                             // FIXME: We don't currently test clamping,
+                             // since background-position-x uses calc() as
+                             // an intermediate form.
+                             /* test_length_percent_pair_unclamped */ ],
+    "background-position-y": [ test_background_position_coord_transition,
+                               test_length_transition,
+                               test_percent_transition,
+                             // FIXME: We don't currently test clamping,
+                             // since background-position-y uses calc() as
+                             // an intermediate form.
+                             /* test_length_percent_pair_unclamped */ ],
+    "background-size": [ test_background_size_transition,
+                         test_length_percent_pair_clamped ],
+    "border-bottom-color": [ test_color_transition,
+                             test_currentcolor_transition ],
+    "border-bottom-width": [ test_length_transition,
+                             test_length_clamped ],
+    "border-left-color": [ test_color_transition,
+                           test_currentcolor_transition ],
+    "border-left-width": [ test_length_transition,
+                           test_length_clamped ],
+    "border-right-color": [ test_color_transition,
+                            test_currentcolor_transition ],
+    "border-right-width": [ test_length_transition,
+                            test_length_clamped ],
+    "border-spacing": [ test_length_pair_transition,
+                        test_length_pair_transition_clamped ],
+    "border-top-color": [ test_color_transition,
+                          test_currentcolor_transition ],
+    "border-top-width": [ test_length_transition,
+                          test_length_clamped ],
+    "bottom": [ test_length_transition, test_percent_transition,
+                test_length_percent_calc_transition,
+                test_length_unclamped, test_percent_unclamped ],
+    "accent-color": [ test_color_transition,
+                      test_currentcolor_transition,
+                      test_auto_color_transition ],
+    "caret-color": [ test_color_transition,
+                     test_currentcolor_transition,
+                     test_auto_color_transition ],
+    "clip": [ test_rect_transition ],
+    "clip-path": [ test_basic_shape_or_url_transition,
+                   test_path_function ],
+    "color": [ test_color_transition,
+               test_currentcolor_transition ],
+    "d": [ test_path_function ],
+    "fill": [ test_color_transition,
+              test_currentcolor_transition ],
+    "fill-opacity" : [ test_float_zeroToOne_transition,
+                       // opacity is clamped in computed style
+                       // (not parsing/interpolation)
+                       test_float_zeroToOne_clamped ],
+    "filter" : [ test_filter_transition ],
+    "flex-basis": [ test_length_transition, test_percent_transition,
+                    test_length_clamped, test_percent_clamped,
+                    test_flex_basis_content_transition ],
+    "flex-grow": [ test_float_zeroToOne_transition,
+                   test_float_aboveOne_transition ],
+    "flex-shrink": [ test_float_zeroToOne_transition,
+                     test_float_aboveOne_transition ],
+    "flood-color": [ test_color_transition,
+                     test_currentcolor_transition ],
+    "flood-opacity" : [ test_float_zeroToOne_transition,
+                        // opacity is clamped in computed style
+                        // (not parsing/interpolation)
+                        test_float_zeroToOne_clamped ],
+    "font-size": [ test_length_transition, test_percent_transition,
+                   test_length_percent_calc_transition,
+                   test_length_clamped, test_percent_clamped ],
+    "font-size-adjust": [ test_float_zeroToOne_transition,
+                          test_float_aboveOne_transition,
+                          /* FIXME: font-size-adjust treats zero specially */
+                          /* test_float_zeroToOne_clamped */ ],
+    "font-stretch": [ test_percent_transition, test_percent_clamped ],
+    "font-weight": [ test_font_weight ],
+    "column-gap": [ test_grid_gap ],
+    "row-gap": [ test_grid_gap ],
+    "height": [ test_length_transition, test_percent_transition,
+                test_length_percent_calc_transition,
+                test_length_clamped, test_percent_clamped ],
+    "left": [ test_length_transition, test_percent_transition,
+              test_length_percent_calc_transition,
+              test_length_unclamped, test_percent_unclamped ],
+    "letter-spacing": [ test_length_transition, test_length_unclamped ],
+    "lighting-color": [ test_color_transition,
+                        test_currentcolor_transition ],
+    // NOTE: when calc() is supported on 'line-height', we should add
+    // test_length_percent_calc_transition.
+    "line-height": [ test_length_transition, test_percent_transition,
+                     test_length_clamped, test_percent_clamped ],
+    "margin-bottom": [ test_length_transition, test_percent_transition,
+                       test_length_percent_calc_transition,
+                       test_length_unclamped, test_percent_unclamped ],
+    "margin-left": [ test_length_transition, test_percent_transition,
+                     test_length_percent_calc_transition,
+                     test_length_unclamped, test_percent_unclamped ],
+    "margin-right": [ test_length_transition, test_percent_transition,
+                      test_length_percent_calc_transition,
+                      test_length_unclamped, test_percent_unclamped ],
+    "margin-top": [ test_length_transition, test_percent_transition,
+                    test_length_percent_calc_transition,
+                    test_length_unclamped, test_percent_unclamped ],
+    "mask-position": [ test_background_position_transition,
+                       test_length_percent_pair_unclamped ],
+    "mask-position-x": [ test_background_position_coord_transition,
+                         test_length_transition,
+                         test_percent_transition,
+                         // FIXME: We don't currently test clamping,
+                         // since background-position-x uses calc() as
+                         // an intermediate form.
+                         /* test_length_percent_pair_unclamped */ ],
+    "mask-position-y": [ test_background_position_coord_transition,
+                         test_length_transition,
+                         test_percent_transition,
+                         // FIXME: We don't currently test clamping,
+                         // since background-position-y uses calc() as
+                         // an intermediate form.
+                         /* test_length_percent_pair_unclamped */ ],
+    "mask-size": [ test_background_size_transition,
+                   test_length_percent_pair_clamped ],
+    "max-height": [ test_length_transition, test_percent_transition,
+                    test_length_clamped, test_percent_clamped ],
+    "max-width": [ test_length_transition, test_percent_transition,
+                   test_length_clamped, test_percent_clamped ],
+    "min-height": [ test_length_transition, test_percent_transition,
+                    test_length_clamped, test_percent_clamped ],
+    "min-width": [ test_length_transition, test_percent_transition,
+                   test_length_clamped, test_percent_clamped ],
+    "object-position": [ test_background_position_transition ],
+    "overflow-clip-margin": [ test_length_transition ],
+    "opacity" : [ test_float_zeroToOne_transition,
+                  // opacity is clamped in computed style
+                  // (not parsing/interpolation)
+                  test_float_zeroToOne_clamped ],
+    "order": [ test_integer_transition ],
+    "outline-color": [ test_color_transition,
+                       test_currentcolor_transition ],
+    "outline-offset": [ test_length_transition, test_length_unclamped ],
+    "outline-width": [ test_length_transition, test_length_clamped ],
+    "padding-bottom": [ test_length_transition, test_percent_transition,
+                        test_length_percent_calc_transition,
+                        test_length_clamped, test_percent_clamped ],
+    "padding-left": [ test_length_transition, test_percent_transition,
+                      test_length_percent_calc_transition,
+                      test_length_clamped, test_percent_clamped ],
+    "padding-right": [ test_length_transition, test_percent_transition,
+                       test_length_percent_calc_transition,
+                       test_length_clamped, test_percent_clamped ],
+    "padding-top": [ test_length_transition, test_percent_transition,
+                     test_length_percent_calc_transition,
+                     test_length_clamped, test_percent_clamped ],
+    "perspective": [ test_length_transition ],
+    "perspective-origin": [ test_length_pair_transition,
+                            test_length_percent_pair_transition,
+                            test_length_percent_pair_unclamped ],
+    "right": [ test_length_transition, test_percent_transition,
+               test_length_percent_calc_transition,
+               test_length_unclamped, test_percent_unclamped ],
+    "r": [ test_length_transition, test_percent_transition,
+           test_length_clamped, test_percent_clamped ],
+    "rx": [ test_length_transition, test_percent_transition,
+            test_length_clamped, test_percent_clamped ],
+    "ry": [ test_length_transition, test_percent_transition,
+            test_length_clamped, test_percent_clamped ],
+    "shape-image-threshold": [ test_float_zeroToOne_transition,
+                               // shape-image-threshold (like opacity) is
+                               // clamped in computed style
+                               // (not parsing/interpolation)
+                               test_float_zeroToOne_clamped ],
+    "shape-margin": [ test_length_transition, test_percent_transition,
+                      test_length_clamped, test_percent_clamped ],
+    "shape-outside": [ test_basic_shape_or_url_transition ],
+    "stop-color": [ test_color_transition,
+                    test_currentcolor_transition ],
+    "stop-opacity" : [ test_float_zeroToOne_transition,
+                       // opacity is clamped in computed style
+                       // (not parsing/interpolation)
+                       test_float_zeroToOne_clamped ],
+    "stroke": [ test_color_transition,
+                test_currentcolor_transition ],
+    "stroke-dasharray": [ test_dasharray_transition ],
+    "stroke-dashoffset": [ test_length_transition, test_percent_transition,
+                           test_length_unclamped, test_percent_unclamped, ],
+    "stroke-miterlimit": [ test_float_zeroToOne_transition,
+                           test_float_aboveOne_transition,
+                           test_float_aboveZero_clamped ],
+    "stroke-opacity" : [ test_float_zeroToOne_transition,
+                         // opacity is clamped in computed style
+                         // (not parsing/interpolation)
+                         test_float_zeroToOne_clamped ],
+    "stroke-width": [ test_length_transition, test_percent_transition,
+                      test_length_clamped, test_percent_clamped, ],
+    "tab-size": [ test_float_zeroToOne_transition,
+                  test_float_aboveOne_transition, test_length_clamped ],
+    "text-decoration": [ test_color_shorthand_transition,
+                         test_currentcolor_shorthand_transition ],
+    "text-decoration-color": [ test_color_transition,
+                               test_currentcolor_transition ],
+    "text-emphasis-color": [ test_color_transition,
+                             test_currentcolor_transition ],
+    "text-indent": [ test_length_transition, test_percent_transition,
+                     test_length_unclamped, test_percent_unclamped ],
+    "text-shadow": [ test_shadow_transition ],
+    "top": [ test_length_transition, test_percent_transition,
+             test_length_percent_calc_transition,
+             test_length_unclamped, test_percent_unclamped ],
+    "transform": [ test_transform_transition ],
+    "transform-origin": [ test_length_pair_transition,
+                          test_length_percent_pair_transition,
+                          test_length_percent_pair_unclamped ],
+    "vertical-align": [ test_length_transition, test_percent_transition,
+                        test_length_unclamped, test_percent_unclamped ],
+    "visibility": [ test_visibility_transition ],
+    "width": [ test_length_transition, test_percent_transition,
+               test_length_percent_calc_transition,
+               test_length_clamped, test_percent_clamped ],
+    "word-spacing": [ test_length_transition, test_length_unclamped ],
+    "x": [ test_length_transition, test_percent_transition,
+           test_length_unclamped, test_percent_unclamped ],
+    "y": [ test_length_transition, test_percent_transition,
+           test_length_unclamped, test_percent_unclamped ],
+    "z-index": [ test_integer_transition, test_pos_integer_or_auto_transition ],
+    "-webkit-line-clamp": [ test_pos_integer_or_none_transition ],
+    "-webkit-text-fill-color": [ test_color_transition,
+                                 test_currentcolor_transition ],
+    "-webkit-text-stroke-color": [ test_color_transition,
+                                   test_currentcolor_transition ],
+    "text-underline-offset": [ test_length_transition ],
+    "text-decoration-thickness": [ test_length_transition ],
+    "scroll-margin-top": [
+      test_length_transition,
+    ],
+    "scroll-margin-right": [
+      test_length_transition,
+    ],
+    "scroll-margin-bottom": [
+      test_length_transition,
+    ],
+    "scroll-margin-left": [
+      test_length_transition,
+    ],
+    "scroll-padding-top": [
+      test_length_transition, test_percent_transition,
+      test_length_clamped, test_percent_clamped,
+    ],
+    "scroll-padding-right": [
+      test_length_transition, test_percent_transition,
+      test_length_clamped, test_percent_clamped,
+    ],
+    "scroll-padding-bottom": [
+      test_length_transition, test_percent_transition,
+      test_length_clamped, test_percent_clamped,
+    ],
+    "scroll-padding-left": [
+      test_length_transition, test_percent_transition,
+      test_length_clamped, test_percent_clamped,
+    ],
+};
+
+if (IsCSSPropertyPrefEnabled("layout.css.backdrop-filter.enabled")) {
+  supported_properties["backdrop-filter"] = [ test_filter_transition ];
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.motion-path.enabled")) {
+  supported_properties["offset-path"] = [ test_path_function ];
+  supported_properties["offset-distance"] =
+    [ test_length_transition,
+      test_percent_transition,
+      test_length_unclamped,
+      test_percent_unclamped,
+      test_calc_wrapped_calc_transition ];
+
+  function test_offset_rotate_transition(prop) {
+    [
+      // No transition between a keyword and a fixed angle.
+      { start: "auto", end: "0deg",
+        expected: "0deg" },
+      // "auto 45deg" to "auto 145 deg".
+      { start: "auto 45deg", end: "auto 145deg",
+        expected: "auto 70deg" },
+      // "auto 130deg" to "auto 90deg".
+      { start: "auto 130deg", end: "100grad auto",
+        expected: "auto 120deg" },
+      // "auto 0deg" to "auto 180deg".
+      { start: "auto", end: "reverse",
+        expected: "auto 45deg" },
+      // "auto 45deg" to "auto 225deg".
+      { start: "auto 45deg", end: "45deg reverse",
+        expected: "auto 90deg" },
+      // "auto -60deg" to "auto -360deg".
+      { start: "auto -60deg",
+        end: "auto calc(90deg - 0.5turn - 300grad + 0rad)",
+        expected: "auto -135deg" },
+    ].forEach(test => {
+      div.style.transitionProperty = 'none';
+      div.style[prop] = test.start;
+      is(cs[prop], test.start,
+         `offset-rotate: computed value before transition`);
+      div.style.transitionProperty = prop;
+      div.style[prop] = test.end;
+      is(cs[prop], test.expected,
+         `offset-rotate: interpolation of offset-rotate`);
+      // We check distance only if there is a transition.
+      if (test.end != test.expected) {
+        check_distance(prop, test.start, test.expected, test.end);
+      }
+    });
+  }
+  supported_properties["offset-rotate"] =
+    [ test_angle_transition,
+      test_offset_rotate_transition ];
+
+  // Note: offset-anchor supports "auto | <position>", and the tests for
+  // `auto` are already in wpt, so we don't test it here again.
+  supported_properties["offset-anchor"] =
+    [ test_background_position_transition ];
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.motion-path-offset-position.enabled")) {
+  supported_properties["offset-position"] =
+    [ test_background_position_transition ];
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.font-variations.enabled")) {
+  supported_properties["font-variation-settings"] = [ test_font_variations_transition ];
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.individual-transform.enabled")) {
+  supported_properties["rotate"] = [ test_rotate_transition ];
+  supported_properties["scale"] = [ test_scale_transition ];
+  supported_properties["translate"] = [ test_translate_transition ];
+}
+
+if (IsCSSPropertyPrefEnabled("layout.css.contain-intrinsic-size.enabled")) {
+  supported_properties["contain-intrinsic-width"] = [ test_length_transition, test_auto_with_length_transition ];
+  supported_properties["contain-intrinsic-height"] = supported_properties["contain-intrinsic-width"];
+}
+
+supported_properties["scrollbar-color"] = [
+  test_scrollbar_color_transition,
+];
+
+// For properties which are well-tested by web-platform-tests, we don't need to
+// test animations/transitions again on them.
+var skipped_transitionable_properties = [
+  "border-image-outset",
+  "border-image-slice",
+  "border-image-width",
+  "font-style",  // Tests being added in https://github.com/web-platform-tests/wpt/pull/37570
+  "grid-template-columns",
+  "grid-template-rows",
+]
+
+// Logical properties.
+for (const logical_side of ["inline-start", "inline-end", "block-start", "block-end"]) {
+  supported_properties["border-" + logical_side + "-color"] = supported_properties["border-top-color"];
+  supported_properties["border-" + logical_side + "-width"] = supported_properties["border-top-width"];
+  supported_properties["margin-" + logical_side] = supported_properties["margin-top"];
+  supported_properties["padding-" + logical_side] = supported_properties["padding-top"];
+  supported_properties["inset-" + logical_side] = supported_properties["top"];
+  supported_properties["scroll-margin-" + logical_side] = supported_properties["scroll-margin-top"];
+  supported_properties["scroll-padding-" + logical_side] = supported_properties["scroll-padding-top"];
+}
+
+for (const logical_size of ["inline", "block"]) {
+  supported_properties[logical_size + "-size"] = supported_properties["width"];
+  supported_properties["min-" + logical_size + "-size"] = supported_properties["min-width"];
+  supported_properties["max-" + logical_size + "-size"] = supported_properties["max-width"];
+  if (IsCSSPropertyPrefEnabled("layout.css.contain-intrinsic-size.enabled")) {
+    supported_properties["contain-intrinsic-" + logical_size + "-size"] = supported_properties["contain-intrinsic-width"];
+  }
+}
+
+var div = document.getElementById("display");
+var cs = getComputedStyle(div, "");
+var winUtils = SpecialPowers.getDOMWindowUtils(window);
+
+function computeMatrix(v) {
+  div.style.setProperty("transform", v, "");
+  var result = cs.getPropertyValue("transform");
+  div.style.removeProperty("transform");
+  return result;
+}
+var c_rot_15 = computeMatrix("rotate(15deg)");
+is(c_rot_15.substring(0,6), "matrix", "should compute to matrix value");
+var c_rot_60 = computeMatrix("rotate(60deg)");
+is(c_rot_60.substring(0,6), "matrix", "should compute to matrix value");
+
+var transformTests = [
+  // rotate
+  { start: 'none', end: 'rotate(60deg)',
+    expected_uncomputed: 'rotate(15deg)',
+    expected: c_rot_15 },
+  { start: 'rotate(0)', end: 'rotate(60deg)',
+    expected_uncomputed: 'rotate(15deg)',
+    expected: c_rot_15 },
+  { start: 'rotate(0deg)', end: 'rotate(60deg)',
+    expected_uncomputed: 'rotate(15deg)',
+    expected: c_rot_15 },
+  { start: 'none', end: c_rot_60,
+    expected: c_rot_15 },
+  { start: 'none', end: 'rotate(360deg)',
+    expected_uncomputed: 'rotate(90deg)',
+    expected: computeMatrix('rotate(90deg)') },
+  { start: 'none', end: 'rotatez(360deg)',
+    expected_uncomputed: 'rotate(90deg)',
+    expected: computeMatrix('rotate(90deg)') },
+  { start: 'none', end: 'rotate(720deg)',
+    expected_uncomputed: 'rotate(180deg)',
+    expected: computeMatrix('rotate(180deg)') },
+  { start: 'none', end: 'rotate(720deg)',
+    expected_uncomputed: 'rotatez(180deg)',
+    expected: computeMatrix('rotate(180deg)') },
+  { start: 'none', end: 'rotate(1080deg)',
+    expected_uncomputed: 'rotate(270deg)',
+    expected: computeMatrix('rotate(270deg)') },
+  { start: 'none', end: 'rotate(1080deg)',
+    expected_uncomputed: 'rotate(270deg)',
+    expected: computeMatrix('rotatez(270deg)') },
+  { start: 'none', end: 'rotate(1440deg)',
+    expected_uncomputed: 'rotate(360deg)',
+    expected: computeMatrix('scale(1)'),
+    round_error_ok: true },
+  { start: 'none', end: 'rotatey(60deg)',
+    expected_uncomputed: 'rotatey(15deg)',
+    expected: computeMatrix('rotatey(15deg)') },
+  { start: 'none', end: 'rotatey(720deg)',
+    expected_uncomputed: 'rotatey(180deg)',
+    expected: computeMatrix('rotatey(180deg)') },
+  { start: 'none', end: 'rotatex(60deg)',
+    expected_uncomputed: 'rotatex(15deg)',
+    expected: computeMatrix('rotatex(15deg)') },
+  { start: 'none', end: 'rotatex(720deg)',
+    expected_uncomputed: 'rotatex(180deg)',
+    expected: computeMatrix('rotatex(180deg)') },
+
+  // translate
+  { start: 'translate(20px)', end: 'none',
+    expected_uncomputed: 'translate(15px)',
+    expected: 'matrix(1, 0, 0, 1, 15, 0)' },
+  { start: 'translate(20px, 12px)', end: 'none',
+    expected_uncomputed: 'translate(15px, 9px)',
+    expected: 'matrix(1, 0, 0, 1, 15, 9)' },
+  { start: 'translateX(-20px)', end: 'none',
+    expected_uncomputed: 'translateX(-15px)',
+    expected: 'matrix(1, 0, 0, 1, -15, 0)' },
+  { start: 'translateY(-40px)', end: 'none',
+    expected_uncomputed: 'translateY(-30px)',
+    expected: 'matrix(1, 0, 0, 1, 0, -30)' },
+  { start: 'translateZ(40px)', end: 'none',
+    expected_uncomputed: 'translateZ(30px)',
+    expected: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 30, 1)' },
+  { start: 'none', end: 'translate3D(40px, 60px, -40px)',
+    expected_uncomputed: 'translate3D(10px, 15px, -10px)',
+    expected: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10, 15, -10, 1)' },
+  // percentages are relative to 300px (width) and 50px (height)
+  // per the prerequisites in property_database.js
+  { start: 'translate(20%)', end: 'none',
+    expected_uncomputed: 'translate(15%)',
+    expected: 'matrix(1, 0, 0, 1, 45, 0)',
+    round_error_ok: true },
+  { start: 'translate(20%, 12%)', end: 'none',
+    expected_uncomputed: 'translate(15%, 9%)',
+    expected: 'matrix(1, 0, 0, 1, 45, 4.5)',
+    round_error_ok: true },
+  { start: 'translateX(-20%)', end: 'none',
+    expected_uncomputed: 'translateX(-15%)',
+    expected: 'matrix(1, 0, 0, 1, -45, 0)',
+    round_error_ok: true },
+  { start: 'translateY(-40%)', end: 'none',
+    expected_uncomputed: 'translateY(-30%)',
+    expected: 'matrix(1, 0, 0, 1, 0, -15)',
+    round_error_ok: true },
+  { start: 'none', end: 'rotate(90deg) translate(20%, 20%) rotate(-90deg)',
+    expected_uncomputed: 'rotate(22.5deg) translate(5%, 5%) rotate(-22.5deg)',
+    round_error_ok: true },
+  { start: 'none', end: 'rotate(-90deg) translate(20%, 20%) rotate(90deg)',
+    expected_uncomputed: 'rotate(-22.5deg) translate(5%, 5%) rotate(22.5deg)',
+    round_error_ok: true },
+  // test percent translation using matrix decomposition
+  { start: 'matrix(1, 0, 0, 1, 0, 0)',
+    end: 'rotate(90deg) translate(20%, 20%) rotate(-90deg)',
+    expected: 'matrix(1, 0, 0, 1, -2.5, 15)',
+    round_error_ok: true },
+  { start: 'matrix(1, 0, 0, 1, 0, 0)',
+    end: 'rotate(-90deg) translate(20%, 20%) rotate(90deg)',
+    expected: 'matrix(1, 0, 0, 1, 2.5, -15)',
+    round_error_ok: true },
+  // test calc() in translate
+  // Note that font-size: is 20px, and that percentages are relative
+  // to 300px (width) and 50px (height) per the prerequisites in
+  // property_database.js
+  { start: 'translateX(20%)', /* 60px */
+    end: 'translateX(calc(10% + 1em))', /* 30px + 20px = 50px */
+    expected_uncomputed: 'translateX(calc(17.5% + 0.25em))',
+    expected: 'matrix(1, 0, 0, 1, 57.5, 0)' },
+  { start: 'translate(calc(0.75 * 3em + 1.5 * 10%), calc(0.5 * 5em + 0.5 * 8%))', /* 90px, 52px */
+    end: 'rotate(90deg) translateY(20%) rotate(90deg) translateY(calc(10% + 0.5em)) rotate(180deg)', /* -10px, -15px */
+    expected: 'matrix(1, 0, 0, 1, 65, 35.25)' },
+
+  // scale
+  { start: 'scale(2)', end: 'none',
+    expected_uncomputed: 'scale(1.75)',
+    expected: 'matrix(1.75, 0, 0, 1.75, 0, 0)' },
+  { start: 'none', end: 'scale(0.4)',
+    expected_uncomputed: 'scale(0.85)',
+    expected: 'matrix(0.85, 0, 0, 0.85, 0, 0)',
+    round_error_ok: true },
+  { start: 'scale(2)', end: 'scale(-2)',
+    expected_uncomputed: 'scale(1)',
+    expected: 'matrix(1, 0, 0, 1, 0, 0)' },
+  { start: 'scale(2)', end: 'scale(-6)',
+    expected_uncomputed: 'scale(0)',
+    expected: 'matrix(0, 0, 0, 0, 0, 0)' },
+  { start: 'scale(2, 0.4)', end: 'none',
+    expected_uncomputed: 'scale(1.75, 0.55)',
+    expected: 'matrix(1.75, 0, 0, 0.55, 0, 0)',
+    round_error_ok: true },
+  { start: 'scaleX(3)', end: 'none',
+    expected_uncomputed: 'scaleX(2.5)',
+    expected: 'matrix(2.5, 0, 0, 1, 0, 0)' },
+  { start: 'scaleY(5)', end: 'none',
+    expected_uncomputed: 'scaleY(4)',
+    expected: 'matrix(1, 0, 0, 4, 0, 0)' },
+  { start: 'scaleZ(5)', end: 'none',
+    expected_uncomputed: 'scaleZ(4)',
+    expected: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1)' },
+  { start: 'none', end: 'scale3D(5, 5, 5)',
+    expected_uncomputed: 'scale3D(2, 2, 2)',
+    expected: 'matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)' },
+
+  // skew
+  { start: 'skewX(45deg)', end: 'none',
+    expected_uncomputed: 'skewX(33.75deg)' },
+  { start: 'skewY(45deg)', end: 'none',
+    expected_uncomputed: 'skewY(33.75deg)' },
+  { start: 'skew(45deg)', end: 'none',
+    expected_uncomputed: 'skew(33.75deg)' },
+  { start: 'skew(45deg, 45deg)', end: 'none',
+    expected_uncomputed: 'skew(33.75deg, 33.75deg)' },
+  { start: 'skewX(45deg)', end: 'skewX(-45deg)',
+    expected_uncomputed: 'skewX(22.5deg)' },
+  { start: 'skewX(0)', end: 'skewX(-45deg)',
+    expected_uncomputed: 'skewX(-11.25deg)' },
+  { start: 'skewY(45deg)', end: 'skewY(-45deg)',
+    expected_uncomputed: 'skewY(22.5deg)' },
+
+  // matrix : skewX
+  { start: 'matrix(1, 0, 3, 1, 0, 0)', end: 'none',
+    expected: 'matrix(1, 0, ' + 3 * 0.75 + ', 1, 0, 0)',
+    round_error_ok: true },
+  { start: 'skewX(0)', end: 'skewX(-45deg) translate(0)',
+    expected_uncomputed: 'skewX(-11.25deg) translate(0)' },
+  // matrix : rotate
+  { start: 'rotate(-30deg)', end: 'matrix(0, 1, -1, 0, 0, 0)',
+    expected: 'matrix(1, 0, 0, 1, 0, 0)',
+    round_error_ok: true },
+  { start: 'rotate(-30deg) translateX(0)',
+    end: 'translateX(0) rotate(-90deg)',
+    expected: computeMatrix('rotate(-45deg)'),
+    round_error_ok: true },
+  // extended shorter transform list
+  { start: 'skewY(60deg)', end: 'skewY(-60deg) translateX(0)',
+    expected_uncomputed: 'skewY(30deg) translateX(0)' },
+
+
+  // matrix decomposition
+
+  // Four pairs of the same matrix expressed different ways.
+  { start: 'matrix(-1, 0, 0, -1, 0, 0)', /* rotate(180deg) */
+    end: 'matrix(1, 0, 0, 1, 0, 0)',
+    expected: computeMatrix('rotate(135deg)') },
+  { start: 'scale(-1)', end: 'none',
+    expected_uncomputed: 'scale(-0.5)',
+    expected: 'matrix(-0.5, 0, 0, -0.5, 0, 0)' },
+  { start: 'rotate(180deg)', end: 'none',
+    expected_uncomputed: 'rotate(135deg)' },
+  { start: 'rotate(-180deg)', end: 'none',
+    expected_uncomputed: 'rotate(-135deg)',
+    expected: computeMatrix('rotate(225deg)') },
+
+  // matrix followed by scale
+  { start: 'matrix(2, 0, 0, 2, 10, 20) scale(2)',
+    end: 'none',
+    expected: 'matrix(3.0625, 0, 0, 3.0625, 7.5, 15)' },
+
+  // ... and a bunch of similar possibilities.  The spec isn't settled
+  // here; there are multiple options.  See:
+  // http://lists.w3.org/Archives/Public/www-style/2010Jun/0602.html
+  { start: 'matrix(-1, 0, 0, 1, 0, 0)', /* scaleX(-1) */
+    end: 'matrix(1, 0, 0, 1, 0, 0)',
+    expected: computeMatrix('scaleX(-0.5)') },
+
+  { start: 'matrix(1, 0, 0, -1, 0, 0)', /* rotate(-180deg) scaleX(-1) */
+    end: 'matrix(1, 0, 0, 1, 0, 0)',
+    expected: computeMatrix('rotate(-135deg) scaleX(-0.5)') },
+
+  { start: 'matrix(0, 1, 1, 0, 0, 0)', /* rotate(-90deg) scaleX(-1) */
+    end: 'matrix(1, 0, 0, 1, 0, 0)',
+    expected: computeMatrix('rotate(-67.5deg) scaleX(-0.5)') },
+
+  { start: 'matrix(0, -1, 1, 0, 0, 0)', /* rotate(-90deg) */
+    end: 'matrix(1, 0, 0, 1, 0, 0)',
+    expected: computeMatrix('rotate(-67.5deg)') },
+
+  { start: 'matrix(0, 1, -1, 0, 0, 0)', /* rotate(90deg) */
+    end: 'matrix(1, 0, 0, 1, 0, 0)',
+    expected: computeMatrix('rotate(67.5deg)') },
+
+  { start: 'matrix(0, -1, -1, 0, 0, 0)', /* rotate(90deg) scaleX(-1) */
+    end: 'matrix(1, 0, 0, 1, 0, 0)',
+    expected: computeMatrix('rotate(67.5deg) scaleX(-0.5)') },
+
+  // Similar decomposition tests, but with skewX.  I checked visually
+  // that the sign of the skew was correct by checking visually that
+  // the animations in
+  // https://dbaron.org/css/test/2010/transition-negative-determinant
+  // don't flip when they finish, and then wrote tests corresponding
+  // to the current code's behavior.
+  // ... start with four with positive determinants
+  { start: 'none',
+    end: 'matrix(1, 0, 1.5, 1, 0, 0)',
+    /* skewX(atan(1.5)) */
+    expected: 'matrix(1, 0, ' + 1.5 * 0.25 + ', 1, 0, 0)',
+    round_error_ok: true },
+  { start: 'none',
+    end: 'matrix(-1, 0, 2, -1, 0, 0)',
+            /* rotate(180deg) skewX(atan(-2)) */
+    expected: computeMatrix('rotate(45deg) matrix(1, 0, ' + -2 * 0.25 + ', 1, 0, 0)'),
+    round_error_ok: true },
+  { start: 'none',
+    end: 'matrix(0, -1, 1, -3, 0, 0)',
+            /* rotate(-90deg) skewX(atan(3)) */
+    expected: computeMatrix('rotate(-22.5deg) matrix(1, 0, ' + 3 * 0.25 + ', 1, 0, 0)'),
+    round_error_ok: true },
+  { start: 'none',
+    end: 'matrix(0, 1, -1, 4, 0, 0)',
+            /* rotate(90deg) skewX(atan(4)) */
+    expected: computeMatrix('rotate(22.5deg) matrix(1, 0, ' + 4 * 0.25 + ', 1, 0, 0)'),
+    round_error_ok: true },
+  // and then four with negative determinants
+  { start: 'none',
+    end: 'matrix(1, 0, 1, -1, 0, 0)',
+            /* rotate(-180deg) skewX(atan(-1)) scaleX(-1) */
+    expected: computeMatrix('rotate(-45deg) matrix(1, 0, ' + -1 * 0.25 + ', 1, 0, 0) scaleX(0.5)'),
+    round_error_ok: true },
+  { start: 'none',
+    end: 'matrix(-1, 0, -1, 1, 0, 0)',
+            /* skewX(atan(-1)) scaleX(-1) */
+    expected: computeMatrix('matrix(1, 0, ' + -1 * 0.25 + ', 1, 0, 0) scaleX(0.5)') },
+  { start: 'none',
+    end: 'matrix(0, 1, 1, -2, 0, 0)',
+            /* rotate(-90deg) skewX(atan(2)) scaleX(-1) */
+    expected: computeMatrix('rotate(-22.5deg) matrix(1, 0, ' + 2 * 0.25 + ', 1, 0, 0) scaleX(0.5)'),
+    round_error_ok: true },
+  { start: 'none',
+    end: 'matrix(0, -1, -1, 0.5, 0, 0)',
+            /* rotate(90deg) skewX(atan(0.5)) scaleX(-1) */
+    expected: computeMatrix('rotate(22.5deg) matrix(1, 0, ' + 0.5 * 0.25 + ', 1, 0, 0) scaleX(0.5)'),
+    round_error_ok: true },
+
+  // lists
+  { start: 'translate(10px) skewY(45deg)',
+    end: 'translate(30px) skewY(-45deg)',
+    expected_uncomputed: 'translate(15px) skewY(22.5deg)' },
+  { start: 'skewY(45deg) rotate(90deg)',
+    end: 'skewY(-45deg) rotate(90deg)',
+    expected_uncomputed: 'skewY(22.5deg) rotate(90deg)' },
+  { start: 'skewX(45deg) rotate(90deg)',
+    end: 'skewX(-45deg) rotate(90deg)',
+    expected_uncomputed: 'skewX(22.5deg) rotate(90deg)' },
+
+  // extended lists
+  { start: 'skewY(45deg) rotate(90deg) translate(0)',
+    end: 'skewY(-45deg) rotate(90deg)',
+    expected_uncomputed: 'skewY(22.5deg) rotate(90deg) translate(0)' },
+  { start: 'skewX(-60deg) rotate(90deg) translate(0)',
+    end: 'skewX(60deg) rotate(90deg)',
+    expected_uncomputed: 'skewX(-30deg) rotate(90deg) translate(0)' },
+];
+
+// Even if the default reference-box of shape-outside is margin-box, which is
+// different from the default reference-box of clip-path, we still can reuse
+// these tests for both properties because we always explicitly assign a
+// reference-box (i.e. border-box or content-box) if needed.
+// Bug 1313619: Add some tests for two basic shapes with an explicit
+// reference-box and a default one.
+const basicShapesTests = [
+  { start: "none", end: "none",
+    expected: ["none"] },
+  // none to shape
+  { start: "none",
+    end: "circle(500px at 500px 500px) border-box",
+    expected: ["circle", ["500px at 500px 500px"], "border-box"]
+  },
+  { start: "none",
+    end: "ellipse(500px 500px at 500px 500px) border-box",
+    expected: ["ellipse", ["500px 500px at 500px 500px"], "border-box"]
+  },
+  { start: "none",
+    end: "polygon(evenodd, 500px 500px, 500px 500px) border-box",
+    expected: ["polygon", ["evenodd, 500px 500px, 500px 500px"], "border-box"]
+  },
+  { start: "none",
+    end: "inset(500px 500px 500px 500px round 500px 500px) border-box",
+    expected: ["inset", ["500px round 500px"], "border-box"]
+  },
+  // matching functions
+  { start: "circle(100px)", end: "circle(500px)",
+    expected: ["circle", ["200px at 50% 50%"]] },
+  { start: "ellipse(100px 100px)", end: "ellipse(500px 500px)",
+    expected: ["ellipse", ["200px 200px at 50% 50%"]] },
+  { start: "circle(100px at 100px 100px) border-box",
+    end: "circle(500px at 500px 500px) border-box",
+    expected: ["circle", ["200px at 200px 200px"], "border-box"]
+  },
+  { start: "ellipse(100px 100px at 100px 100px) border-box",
+    end: "ellipse(500px 500px at 500px 500px) border-box",
+    expected: ["ellipse", ["200px 200px at 200px 200px"], "border-box"]
+  },
+  { start: "polygon(evenodd, 100px 100px, 100px 100px) border-box",
+    end: "polygon(evenodd, 500px 500px, 500px 500px) border-box",
+    expected: ["polygon", ["evenodd, 200px 200px, 200px 200px"], "border-box"]
+  },
+  { start: "inset(100px 100px 100px 100px round 100px 100px) border-box",
+    end: "inset(500px 500px 500px 500px round 500px 500px) border-box",
+    expected: ["inset", ["200px round 200px"], "border-box"]
+  },
+  // matching functions percentage
+  { start: "circle(100%)", end: "circle(500%)",
+    expected: ["circle", ["200% at 50% 50%"]] },
+  { start: "ellipse(100% 100%)", end: "ellipse(500% 500%)",
+    expected: ["ellipse", ["200% 200% at 50% 50%"]] },
+  { start: "circle(100% at 100% 100%) border-box",
+    end: "circle(500% at 500% 500%) border-box",
+    expected: ["circle", ["200% at 200% 200%"], "border-box"]
+  },
+  { start: "ellipse(100% 100% at 100% 100%) border-box",
+    end: "ellipse(500% 500% at 500% 500%) border-box",
+    expected: ["ellipse", ["200% 200% at 200% 200%"], "border-box"]
+  },
+  { start: "polygon(evenodd, 100% 100%, 100% 100%) border-box",
+    end: "polygon(evenodd, 500% 500%, 500% 500%) border-box",
+    expected: ["polygon", ["evenodd, 200% 200%, 200% 200%"], "border-box"]
+  },
+  { start: "inset(100% 100% 100% 100% round 100% 100%) border-box",
+    end: "inset(500% 500% 500% 500% round 500% 500%) border-box",
+    expected: ["inset", ["200% round 200%"], "border-box"] },
+  // matching functions with calc() values
+  { start: "circle(calc(80px + 20px))", end: "circle(calc(200px + 300px))",
+    expected: ["circle", ["200px at 50% 50%"]] },
+  { start: "circle(calc(80% + 20%))", end: "circle(calc(200% + 300%))",
+    expected: ["circle", ["200% at 50% 50%"]] },
+  { start: "circle(calc(10px + 20%))", end: "circle(calc(50px + 40%))",
+    expected: ["circle", ["calc(25% + 20px) at 50% 50%"]] },
+  // matching functions with interpolation between percentage/pixel values
+  { start: "circle(20px)", end: "circle(100%)",
+    expected: ["circle", ["calc(25% + 15px) at 50% 50%"]] },
+  { start: "ellipse(100% 100px at 8px 20%) border-box",
+    end:   "ellipse(40px 4%    at 80% 60px) border-box",
+    expected: ["ellipse", ["calc(75% + 10px) calc(1% + 75px) at " +
+                           "calc(20% + 6px) calc(15% + 15px)"],
+               "border-box"] },
+  // no interpolation for keywords
+  { start: "circle()", end: "circle(50px)",
+    expected: ["circle", ["50px at 50% 50%"]] },
+  { start: "circle(closest-side)", end: "circle(500px)",
+    expected: ["circle", ["500px at 50% 50%"]] },
+  { start: "circle(farthest-side)", end: "circle(500px)",
+    expected: ["circle", ["500px at 50% 50%"]] },
+  { start: "circle(500px)", end: "circle(farthest-side)",
+    expected: ["circle", ["farthest-side at 50% 50%"]]},
+  { start: "circle(500px)", end: "circle(closest-side)",
+    expected: ["circle", ["at 50% 50%"]]},
+  { start: "ellipse()", end: "ellipse(50px 50px)",
+    expected: ["ellipse", ["50px 50px at 50% 50%"]] },
+  { start: "ellipse(closest-side closest-side)", end: "ellipse(500px 500px)",
+    expected: ["ellipse", ["500px 500px at 50% 50%"]] },
+  { start: "ellipse(farthest-side closest-side)", end: "ellipse(500px 500px)",
+    expected: ["ellipse", ["500px 500px at 50% 50%"]] },
+  { start: "ellipse(farthest-side farthest-side)", end: "ellipse(500px 500px)",
+    expected: ["ellipse", ["500px 500px at 50% 50%"]] },
+  { start: "ellipse(500px 500px)", end: "ellipse(farthest-side farthest-side)",
+    expected: ["ellipse", ["farthest-side farthest-side at 50% 50%"]] },
+  { start: "ellipse(500px 500px)", end: "ellipse(closest-side closest-side)",
+    expected: ["ellipse", ["at 50% 50%"]] },
+  // mismatching boxes
+  { start: "circle(100px at 100px 100px) border-box",
+    end: "circle(500px at 500px 500px) content-box",
+    expected: ["circle", ["500px at 500px 500px"], "content-box"]
+  },
+  { start: "ellipse(100px 100px at 100px 100px) border-box",
+    end: "ellipse(500px 500px at 500px 500px) content-box",
+    expected: ["ellipse", ["500px 500px at 500px 500px"], "content-box"]
+  },
+  { start: "polygon(evenodd, 100px 100px, 100px 100px) border-box",
+    end: "polygon(evenodd, 500px 500px, 500px 500px) content-box",
+    expected: ["polygon", ["evenodd, 500px 500px, 500px 500px"], "content-box"]
+  },
+  { start: "inset(100px 100px 100px 100px round 100px 100px) border-box",
+    end: "inset(500px 500px 500px 500px round 500px 500px) content-box",
+    expected: ["inset", ["500px round 500px"], "content-box"]
+  },
+  // mismatching functions
+  { start: "circle(100px at 100px 100px) border-box",
+    end: "ellipse(500px 500px at 500px 500px) border-box",
+    expected: ["ellipse", ["500px 500px at 500px 500px"], "border-box"]
+  },
+  { start: "inset(0px round 20px)", end: "ellipse(500px 500px)",
+    expected: ["ellipse", ["500px 500px at 50% 50%"]]
+  },
+  // shape to reference box
+  { start: "circle(20px)", end: "content-box", expected: ["content-box"] },
+  { start: "content-box", end: "circle(20px)", expected: ["circle", ["20px at 50% 50%"]] },
+  // url to shape
+  { start: "circle(20px)", end: "url(http://localhost/a.png)", expected: ["url", ["\"http://localhost/a.png\""]] },
+  { start: "url(http://localhost/a.png)", end: "circle(20px)", expected: ["circle", ["20px at 50% 50%"]] },
+  // url to none
+  { start: "none", end: "url(http://localhost/a.png)", expected: ["url", ["\"http://localhost/a.png\""]] },
+  { start: "http://localhost/a.png", end: "none", expected: ["none"] },
+];
+
+const basicShapesWithFragmentUrlTests = [
+  // Fragment url to shape
+  { start: "circle(20px)", end: "url('#a')", expected: ["url", ["\"#a\""]] },
+  { start: "url('#a')", end: "circle(20px)", expected: ["circle", ["20px at 50% 50%"]] },
+  // Fragment url to none
+  { start: "none", end: "url('#a')", expected: ["url", ["\"#a\""]] },
+  { start: "url('#a')", end: "none", expected: ["none"] },
+];
+
+// We have a lot of tests in web-platform-tests already, so here we only test
+// basic interpolation cases.
+const pathFunctionTests = [
+  { start: "none", end: "none",
+    expected: ["none"] },
+  // none to path
+  { start: "none",
+    end: "path('M 100 100')",
+    expected: ["path", '"M 100 100"']
+  },
+  // path to none
+  { start: "path('M 100 100')",
+    end: "none",
+    expected: ["none"]
+  },
+  // mismatch
+  {
+    start: "path('M 0 0 H 100 H 200')",
+    end: "path('M 0 0 H 500')",
+    expected: ["path", '"M 0 0 H 500"']
+  },
+  {
+    start: "path('M 0 0 V 100')",
+    end: "path('M 0 0 H 500')",
+    expected: ["path", '"M 0 0 H 500"']
+  },
+  // match
+  {
+    start: "path('M 100 100')",
+    end: "path('M 100 500')",
+    expected: ["path", '"M 100 200"']
+  },
+  {
+    start: "path('M 10 10 L 100 100')",
+    end: "path('M 10 10 L 100 500')",
+    expected: ["path", '"M 10 10 L 100 200"']
+  },
+  {
+    start: "path('M 10 10 H 100')",
+    end: "path('M 10 10 H 500')",
+    expected: ["path", '"M 10 10 H 200"']
+  },
+  {
+    start: "path('M 10 10 V 100')",
+    end: "path('M 10 10 V 500')",
+    expected: ["path", '"M 10 10 V 200"']
+  },
+  {
+    start: "path('M 10 10 C 32 42 52 62 120 2200')",
+    end: "path('M 10 10 C 40 50 60 70 200 3000')",
+    expected: ["path", '"M 10 10 C 34 44 54 64 140 2400"']
+  },
+  {
+    start: "path('M 10 10 S 45 67 89 123')",
+    end: "path('M 10 10 S 61 51 113 99')",
+    expected: ["path", '"M 10 10 S 49 63 95 117"']
+  },
+  {
+    start: "path('M 10 10 Q 32 42 120 2200')",
+    end: "path('M 10 10 Q 40 50 200 3000')",
+    expected: ["path", '"M 10 10 Q 34 44 140 2400"']
+  },
+  {
+    start: "path('M 10 10 T 100 200')",
+    end: "path('M 10 10 T 500 280')",
+    expected: ["path", '"M 10 10 T 200 220"']
+  },
+  {
+    start: "path('M 10 10 A 10 20 30 0 1 140 450')",
+    end: "path('M 10 10 A 50 60 70 0 1 380 290')",
+    expected: ["path", '"M 10 10 A 20 30 40 0 1 200 410"']
+  },
+  {
+    start: "path('M 10 10 A 10 20 30 1 0 140 450')",
+    end: "path('M 10 10 A 50 60 70 0 1 380 290')",
+    expected: ["path", '"M 10 10 A 20 30 40 1 0 200 410"']
+  },
+  // mix relative and absolute coordinates
+  {
+    start: "path('m 10 20 h 30 v 60 h 10 v -10 l 110 60')",
+    // =="path('M  10  20 H  40 V  80 H  50 V  70 L 160 130')"
+    end: "path('M 130 140 H 120 V 160 H 130 V 150 L 200 170')",
+    expected: ["path", '"M 40 50 H 60 V 100 H 70 V 90 L 170 140"']
+  },
+];
+
+const clipPathPathFunctionTests = [
+  // match fill-rule
+  {
+    start: "path(nonzero, 'M 100 100')",
+    end: "path(nonzero, 'M 100 500')",
+    expected: ["path", '"M 100 200"']
+  },
+  {
+    start: "path(evenodd, 'M 100 100')",
+    end: "path(evenodd, 'M 100 500')",
+    expected: ["path", 'evenodd, "M 100 200"']
+  },
+  // mismatch fill-rule
+  {
+    start: "path(nonzero, 'M 100 100')",
+    end: "path(evenodd, 'M 100 500')",
+    expected: ["path", 'evenodd, "M 100 500"']
+  },
+];
+
+var filterTests = [
+  { start: "none", end: "none",
+    expected: ["none"] },
+  // function from none (number/length)
+  { start: "none", end: "brightness(0.5)",
+    expected: ["brightness", 0.875] },
+  { start: "none", end: "contrast(0.5)",
+    expected: ["contrast", 0.875] },
+  { start: "none", end: "grayscale(0.5)",
+    expected: ["grayscale", 0.125] },
+  { start: "none", end: "invert(0.5)",
+    expected: ["invert", 0.125] },
+  { start: "none", end: "opacity(0.5)",
+    expected: ["opacity", 0.875] },
+  { start: "none", end: "saturate(0.5)",
+    expected: ["saturate", 0.875] },
+  { start: "none", end: "sepia(0.5)",
+    expected: ["sepia", 0.125] },
+  { start: "none", end: "blur(50px)",
+    expected: ["blur", 12.5] },
+  // function to none (number/length)
+  { start: "brightness(0.5)", end: "none",
+    expected: ["brightness", 0.625] },
+  { start: "contrast(0.5)", end: "none",
+    expected: ["contrast", 0.625] },
+  { start: "grayscale(0.5)", end: "none",
+    expected: ["grayscale", 0.375] },
+  { start: "invert(0.5)", end: "none",
+    expected: ["invert", 0.375] },
+  { start: "opacity(0.5)", end: "none",
+    expected: ["opacity", 0.625] },
+  { start: "saturate(0.5)", end: "none",
+    expected: ["saturate", 0.625] },
+  { start: "sepia(0.5)", end: "none",
+    expected: ["sepia", 0.375] },
+  { start: "blur(50px)", end: "none",
+    expected: ["blur", 37.5] },
+  // function to same function (number/length)
+  { start: "brightness(0.25)", end: "brightness(0.75)",
+    expected: ["brightness", 0.375] },
+  { start: "contrast(0.25)", end: "contrast(0.75)",
+    expected: ["contrast", 0.375] },
+  { start: "grayscale(0.25)", end: "grayscale(0.75)",
+    expected: ["grayscale", 0.375] },
+  { start: "invert(0.25)", end: "invert(0.75)",
+    expected: ["invert", 0.375] },
+  { start: "opacity(0.25)", end: "opacity(0.75)",
+    expected: ["opacity", 0.375] },
+  { start: "saturate(0.25)", end: "saturate(0.75)",
+    expected: ["saturate", 0.375] },
+  { start: "sepia(0.25)", end: "sepia(0.75)",
+    expected: ["sepia", 0.375] },
+  { start: "blur(25px)", end: "blur(75px)",
+    expected: ["blur", 37.5] },
+  // function to same function (percent)
+  { start: "brightness(25%)", end: "brightness(75%)",
+    expected: ["brightness", 0.375] },
+  { start: "contrast(25%)", end: "contrast(75%)",
+    expected: ["contrast", 0.375] },
+  { start: "grayscale(25%)", end: "grayscale(75%)",
+    expected: ["grayscale", 0.375] },
+  { start: "invert(25%)", end: "invert(75%)",
+    expected: ["invert", 0.375] },
+  { start: "opacity(25%)", end: "opacity(75%)",
+    expected: ["opacity", 0.375] },
+  { start: "saturate(25%)", end: "saturate(75%)",
+    expected: ["saturate", 0.375] },
+  { start: "sepia(25%)", end: "sepia(75%)",
+    expected: ["sepia", 0.375] },
+  // function to same function (percent, number/length)
+  { start: "brightness(0.25)", end: "brightness(75%)",
+    expected: ["brightness", 0.375] },
+  { start: "contrast(25%)", end: "contrast(0.75)",
+    expected: ["contrast", 0.375] },
+  // hue-rotate with different angle values
+  { start: "hue-rotate(0deg)", end: "hue-rotate(720deg)",
+    expected: ["hue-rotate", "180deg"] },
+  { start: "hue-rotate(0rad)", end: "hue-rotate("+4*Math.PI+"rad)",
+    expected: ["hue-rotate", "180deg"] },
+  { start: "hue-rotate(0grad)", end: "hue-rotate(800grad)",
+    expected: ["hue-rotate", "180deg"] },
+  { start: "hue-rotate(0turn)", end: "hue-rotate(2turn)",
+    expected: ["hue-rotate", "180deg"] },
+  { start: "hue-rotate(0deg)", end: "hue-rotate("+4*Math.PI+"rad)",
+    expected: ["hue-rotate", "180deg"] },
+  { start: "hue-rotate(0turn)", end: "hue-rotate(800grad)",
+    expected: ["hue-rotate", "180deg"] },
+  { start: "hue-rotate(0grad)", end: "hue-rotate("+4*Math.PI+"rad)",
+    expected: ["hue-rotate", "180deg"] },
+  { start: "hue-rotate(0grad)", end: "hue-rotate(0turn)",
+    expected: ["hue-rotate", "0deg"] },
+  // multiple matching functions, same length
+  { start: "contrast(25%) brightness(0.25) blur(25px) sepia(75%)",
+    end: "contrast(75%) brightness(0.75) blur(75px) sepia(25%)",
+    expected: ["contrast", 0.375, "brightness", 0.375, "blur", 37.5, "sepia", 0.625] },
+  { start: "invert(25%) brightness(0.25) blur(25px) invert(50%) brightness(0.5) blur(50px)",
+    end: "invert(75%) brightness(0.75) blur(75px)",
+    expected: ["invert", 0.375, "brightness", 0.375, "blur", 37.5, "invert", 0.375, "brightness", 0.625, "blur", 37.5] },
+  // multiple matching functions, different length
+  { start: "contrast(25%) brightness(0.5) blur(50px)",
+    end: "contrast(75%)",
+    expected: ["contrast", 0.375, "brightness", 0.625, "blur", 37.5] },
+  // mismatching filter functions
+  { start: "contrast(0%)", end: "blur(10px)",
+    expected: ["blur", 10] },
+  // not supported interpolations
+  { start: "none", end: "url('#b')",
+    expected: ["url", "\"#b\""] },
+  { start: "url('#a')", end: "none",
+    expected: ["none"] },
+  { start: "url('#a')", end: "url('#b')",
+    expected: ["url", "\"#b\""] },
+  { start: "url('#a')", end: "blur(10px)",
+    expected: ["blur", 10] },
+  { start: "blur(10px)", end: "url('#a')",
+    expected: ["url", "\"#a\""] },
+  { start: "blur(0px) url('#a')", end: "blur(20px)",
+    expected: ["blur", 20] },
+  { start: "blur(0px)", end: "blur(20px) url('#a')",
+    expected: ["blur", 20, "url", "\"#a\""] },
+  { start: "contrast(0.25) brightness(0.25) blur(25px)",
+    end: "contrast(0.75) url('#a')",
+    expected: ["contrast", 0.75, "url", "\"#a\""] },
+  { start: "contrast(0.25) brightness(0.25) blur(75px)",
+    end: "brightness(0.75) contrast(0.75) blur(25px)",
+    expected: ["brightness", 0.75, "contrast", 0.75, "blur", 25] },
+  { start: "contrast(0.25) brightness(0.25) blur(25px)",
+    end: "contrast(0.75) brightness(0.75) contrast(0.75)",
+    expected: ["contrast", 0.75, "brightness", 0.75, "contrast", 0.75] },
+  // drop-shadow animation
+  { start: "none",
+    end: "drop-shadow(rgb(0, 0, 0) 4px 4px 0px)",
+    expected: ["drop-shadow", "rgba(0, 0, 0, 0.25) 1px 1px 0px"] },
+  { start: "drop-shadow(rgb(0, 0, 0) 0px 0px 0px)",
+    end: "drop-shadow(rgb(0, 0, 0) 4px 4px 0px)",
+    expected: ["drop-shadow", "rgb(0, 0, 0) 1px 1px 0px"] },
+  { start: "drop-shadow(#038000 4px 4px)",
+    end: "drop-shadow(8px 8px 8px red)",
+    expected: ["drop-shadow", "rgb(66, 96, 0) 5px 5px 2px"] },
+  { start: "blur(25px) drop-shadow(8px 8px)",
+    end: "blur(75px)",
+    expected: ["blur", 37.5, "drop-shadow", "rgba(0, 0, 0, 0.75) 6px 6px 0px"] },
+  { start: "blur(75px)",
+    end: "blur(25px) drop-shadow(8px 8px)",
+    expected: ["blur", 62.5, "drop-shadow", "rgba(0, 0, 0, 0.25) 2px 2px 0px"] },
+  { start: "drop-shadow(2px 2px blue)",
+    end: "none",
+    expected: ["drop-shadow", "rgba(0, 0, 255, 0.75) 1.5px 1.5px 0px"] },
+];
+
+var prop;
+for (prop in supported_properties) {
+  // Test that prop is in the property database.
+  ok(prop in gCSSProperties, "property " + prop + " in gCSSProperties");
+
+  // Test that the entry has at least one test function.
+  ok(supported_properties[prop].length > 0,
+     "property " + prop + " must have at least one test function");
+}
+
+// Return a consistent sampling of |count| values out of |array|.
+function sample_array(array, count) {
+  if (count <= 0) {
+    ok(false, "unexpected count");
+    return [];
+  }
+  var ratio = array.length / count;
+  if (ratio <= 1) {
+    return array;
+  }
+  var result = new Array(count);
+  for (let i = 0; i < count; ++i) {
+    result[i] = array[Math.floor(i * ratio)];
+  }
+  return result;
+}
+
+// Test that transitions don't do anything (i.e., aren't supported) on
+// the properties not in our test list above (and not transition
+// properties themselves).
+for (prop in gCSSProperties) {
+  var info = gCSSProperties[prop];
+  if (!(prop in supported_properties) &&
+      !skipped_transitionable_properties.includes(prop) &&
+      info.type != CSS_TYPE_TRUE_SHORTHAND &&
+      info.type != CSS_TYPE_LEGACY_SHORTHAND &&
+      !("alias_for" in info) &&
+      !prop.match(/^transition-/) &&
+      prop != "mask") {
+
+    if ("prerequisites" in info) {
+      var prereqs = info.prerequisites;
+      for (var prereq in prereqs) {
+        div.style.setProperty(prereq, prereqs[prereq], "");
+      }
+    }
+
+    var all_values = info.initial_values.concat(info.other_values);
+
+    if (all_values.length > 50) {
+      // Since we're using an O(N^2) algorithm here, reduce the list of
+      // values that we want to test.  (This test is really only testing
+      // that somebody didn't make a property animatable without
+      // modifying this test.  The odds of somebody doing that without
+      // making at least one of the many pairs of values we have left
+      // animatable seems pretty low, at least relative to the chance
+      // that any pair of the values listed in property_database.js is
+      // animatable.)
+      //
+      // That said, we still try to use all of the start of the list on
+      // the assumption that the more basic values are likely to be at
+      // the beginning of the list.
+      all_values = [].concat(info.initial_values.slice(0,2),
+                             sample_array(info.initial_values.slice(2), 6),
+                             info.other_values.slice(0, 10),
+                             sample_array(info.other_values.slice(10), 40));
+    }
+
+    var all_computed = [];
+    for (var idx in all_values) {
+      let val = all_values[idx];
+      div.style.setProperty(prop, val, "");
+      all_computed.push(cs.getPropertyValue(prop));
+    }
+    div.style.removeProperty(prop);
+
+    div.style.setProperty("transition", prop + " 20s linear", "");
+    for (let i = 0; i < all_values.length; ++i) {
+      for (let j = i + 1; j < all_values.length; ++j) {
+        div.style.setProperty(prop, all_values[i], "");
+        is(cs.getPropertyValue(prop), all_computed[i],
+           "transitions not supported for property " + prop +
+           " value " + all_values[i]);
+        div.style.setProperty(prop, all_values[j], "");
+        is(cs.getPropertyValue(prop), all_computed[j],
+           "transitions not supported for property " + prop +
+           " value " + all_values[j]);
+      }
+    }
+
+    div.style.removeProperty("transition");
+    div.style.removeProperty(prop);
+    if ("prerequisites" in info) {
+      var prereqs = info.prerequisites;
+      for (var prereq in prereqs) {
+        div.style.removeProperty(prereq);
+      }
+    }
+  }
+}
+
+// Do 4-second linear transitions with -1 second transition delay and
+// linear timing function so that we can expect the transition to be
+// one quarter of the way through the value space right after changing
+// the property.
+div.style.setProperty("transition-duration", "4s", "");
+div.style.setProperty("transition-delay", "-1s", "");
+div.style.setProperty("transition-timing-function", "linear", "");
+for (prop in supported_properties) {
+  var tinfo = supported_properties[prop];
+  var info = gCSSProperties[prop];
+
+  isnot(info.type, CSS_TYPE_TRUE_SHORTHAND,
+        prop + " must not be a shorthand");
+  if ("prerequisites" in info) {
+    var prereqs = info.prerequisites;
+    for (var prereq in prereqs) {
+      // We don't want the 19px font-size prereq of line-height, since we
+      // want to leave it 20px.
+      if (prop != "line-height" || prereq != "font-size") {
+        div.style.setProperty(prereq, prereqs[prereq], "");
+      }
+    }
+  }
+
+  for (var idx in tinfo) {
+    tinfo[idx](prop);
+  }
+
+  // Make sure to unset the property and stop transitions on it.
+  div.style.setProperty("transition-property", "none", "");
+  div.style.removeProperty(prop);
+  cs.getPropertyValue(prop);
+
+  if ("prerequisites" in info) {
+    var prereqs = info.prerequisites;
+    for (var prereq in prereqs) {
+      div.style.removeProperty(prereq);
+    }
+  }
+}
+div.style.removeProperty("transition");
+
+function get_distance(prop, v1, v2)
+{
+  return SpecialPowers.DOMWindowUtils
+           .computeAnimationDistance(div, prop, v1, v2);
+}
+
+function check_distance(prop, start, quarter, end)
+{
+  var sq = get_distance(prop, start, quarter);
+  var se = get_distance(prop, start, end);
+  var qe = get_distance(prop, quarter, end);
+
+  ok(Math.abs((sq * 4 - se) / se) < 0.0001, "property '" + prop + "': distance " + sq + " from start '" + start + "' to quarter '" + quarter + "' should be quarter distance " + se + " from start '" + start + "' to end '" + end + "'");
+  ok(Math.abs((qe * 4 - se * 3) / se) < 0.0001, "property '" + prop + "': distance " + qe + " from quarter '" + quarter + "' to end '" + end + "' should be three quarters distance " + se + " from start '" + start + "' to end '" + end + "'");
+}
+
+function test_length_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "4px", "");
+  is(cs.getPropertyValue(prop), "4px",
+     "length-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "12px", "");
+  is(cs.getPropertyValue(prop), "6px",
+     "length-valued property " + prop + ": interpolation of lengths");
+  check_distance(prop, "4px", "6px", "12px");
+}
+
+function test_length_clamped(prop) {
+  test_length_clamped_or_unclamped(prop, true);
+}
+
+function test_length_unclamped(prop) {
+  test_length_clamped_or_unclamped(prop, false);
+}
+
+function test_length_clamped_or_unclamped(prop, is_clamped) {
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0px", "");
+  let zero_val = cs.getPropertyValue(prop); // Flushes
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "100px", "");
+  (is_clamped ? is : isnot)(cs.getPropertyValue(prop), zero_val,
+     "length-valued property " + prop + ": clamping of negatives");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+// Test transition to/from the special 'flex-basis: content' keyword.
+function test_flex_basis_content_transition(prop) {
+  is(prop, "flex-basis", "this test function should only be called for 'flex-basis'");
+
+  // Test transition from length to 'content':
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "8px", "");
+  is(cs.getPropertyValue(prop), "8px",
+     "property " + prop + ": computed value before transition to 'content'");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "content", "");
+  is(cs.getPropertyValue(prop), "content",
+     "property " + prop + ": transition to 'content' (should be discrete)");
+
+  // Test transition from 'content' to length:
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "content", "");
+  is(cs.getPropertyValue(prop), "content",
+     "property " + prop + ": computed value before transition from 'content'");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "6px", "");
+  is(cs.getPropertyValue(prop), "6px",
+     "property " + prop + ": transition from 'content' (should be discrete)");
+}
+
+// Test using float values in the range [0, 1] (e.g. opacity)
+function test_float_zeroToOne_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0.3", "");
+  is(cs.getPropertyValue(prop), "0.3",
+     "float-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "0.8", "");
+  is(cs.getPropertyValue(prop), "0.425",
+     "float-valued property " + prop + ": interpolation of floats");
+  check_distance(prop, "0.3", "0.425", "0.8");
+}
+
+function test_float_zeroToOne_clamped(prop) {
+  test_float_zeroToOne_clamped_or_unclamped(prop, true);
+}
+function test_float_zeroToOne_unclamped(prop) {
+  test_float_zeroToOne_clamped_or_unclamped(prop, false);
+}
+
+function test_float_zeroToOne_clamped_or_unclamped(prop, is_clamped) {
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0", "");
+  is(cs.getPropertyValue(prop), "0",
+     "float-valued property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "1", "");
+  (is_clamped ? is : isnot)(cs.getPropertyValue(prop), "0",
+     "float-valued property " + prop + ": clamping of negatives");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+// Test using float values in the range [1, infinity)
+function test_float_aboveOne_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "1", "");
+  is(cs.getPropertyValue(prop), "1",
+     "float-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "2.1", "");
+  is(cs.getPropertyValue(prop), "1.275",
+     "float-valued property " + prop + ": interpolation of floats");
+  check_distance(prop, "1", "1.275", "2.1");
+}
+
+function test_float_aboveZero_clamped(prop) {
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0", "");
+  is(cs.getPropertyValue(prop), "0",
+     "float-valued property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "5", "");
+  is(cs.getPropertyValue(prop), "0",
+     "float-valued property " + prop + ": clamping of negatives");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+function test_percent_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "25%", "");
+  var av = cs.getPropertyValue(prop);
+  var a = any_unit_to_num(av);
+  div.style.setProperty(prop, "75%", "");
+  var bv = cs.getPropertyValue(prop);
+  var b = any_unit_to_num(bv);
+  isnot(b, a, "different percentages (" + av + " and " + bv +
+              ") should be different for " + prop);
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "25%", "");
+  var res = cs.getPropertyValue(prop);
+  is(any_unit_to_num(res) * 4, 3 * b + a,
+     "percent-valued property " + prop + ": interpolation of percents: " +
+     res + " should be a quarter of the way between " + bv + " and " + av);
+  ok(has_num(res),
+     "percent-valued property " + prop + ": percent computes to number");
+  check_distance(prop, "25%", "37.5%", "75%");
+}
+
+function test_percent_clamped(prop) {
+  test_percent_clamped_or_unclamped(prop, true);
+}
+
+function test_percent_unclamped(prop) {
+  test_percent_clamped_or_unclamped(prop, false);
+}
+
+function test_percent_clamped_or_unclamped(prop, is_clamped) {
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0%", "");
+  var zero_val = cs.getPropertyValue(prop); // flushes too
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "150%", "");
+  (is_clamped ? is : isnot)(cs.getPropertyValue(prop), zero_val,
+     "percent-valued property " + prop + ": clamping of negatives");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+// FIXME: This doesn't deal well with properties for which the resolved value
+// is not the used value, like stroke-dashoffset or stroke-width.
+function test_length_percent_calc_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0%", "");
+  var av = cs.getPropertyValue(prop);
+  var a = any_unit_to_num(av);
+  div.style.setProperty(prop, "100%", "");
+  var bv = cs.getPropertyValue(prop);
+  var b = any_unit_to_num(bv);
+  div.style.setProperty(prop, "100px", "");
+  var cv = cs.getPropertyValue(prop);
+  var c = any_unit_to_num(cv);
+  isnot(b, a, "different percentages (" + av + " and " + bv +
+              ") should be different for " + prop);
+
+  div.style.setProperty(prop, "50%", "");
+  var v1v = cs.getPropertyValue(prop);
+  is(any_unit_to_num(v1v) * 2, a + b,
+     "computed value before transition for " + prop + ": '" +
+     v1v + "' should be halfway " +
+     "between '" + av + "' + and '" + bv + "'.");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "200px", "");
+  var v2v = cs.getPropertyValue(prop);
+  is(any_unit_to_num(v2v) * 8, 5*a + 3*b + 4*c,
+     "interpolation between length and percent for " + prop + ": '"
+     + v2v + "'");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "calc(25% + 100px)", "");
+  v1v = cs.getPropertyValue(prop);
+  is(any_unit_to_num(v1v) * 4, b + 4*c,
+     "computed value before transition for " + prop + ": '" + v1v + "'");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "75%", "");
+  v2v = cs.getPropertyValue(prop);
+  is(any_unit_to_num(v2v) * 8, 5*a + 3*b + 6*c,
+     "interpolation between calc() and percent for " + prop + ": '" +
+     v2v + "'");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "150px", "");
+  v1v = cs.getPropertyValue(prop);
+  is(any_unit_to_num(v1v) * 2, c * 3,
+     "computed value before transition for " + prop + ": '" + v1v + "'");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "calc(50% + 50px)", "");
+  v2v = cs.getPropertyValue(prop);
+  is(any_unit_to_num(v2v) * 8, 7 * a + b + 10*c,
+     "interpolation between length and calc() for " + prop + ": '" +
+     v2v + "'");
+
+  check_distance(prop, "50%", "calc(37.5% + 50px)", "200px");
+  check_distance(prop, "calc(25% + 100px)", "calc(37.5% + 75px)",
+                       "75%");
+  check_distance(prop, "150px", "calc(125px + 12.5%)",
+                       "calc(50% + 50px)");
+}
+
+// This can deal well with properties for which the computed value
+// is not the used value, e.g. offset-distance, translate.
+function test_calc_wrapped_calc_transition(prop) {
+  // Test interpolation that computes to calc() (transition from % to px)
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "20%", "");
+  is(cs.getPropertyValue(prop), "20%",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "12px", "");
+  is(cs.getPropertyValue(prop), "calc(15% + 3px)",
+     "property " + prop + ": interpolation that computes to calc()");
+
+  check_distance(prop, "20%", "calc(15% + 3px)", "12px");
+
+  // Test interpolation that computes to calc() (transition from px to %)
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "12px", "");
+  is(cs.getPropertyValue(prop), "12px",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "20%", "");
+  is(cs.getPropertyValue(prop), "calc(5% + 9px)",
+     "property " + prop + ": interpolation that computes to calc()");
+
+  check_distance(prop, "12px", "calc(5% + 9px)", "20%");
+
+  // Test interpolation between calc() and non-calc()
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "calc(40px + 10%)", "");
+  is(cs.getPropertyValue(prop), "calc(10% + 40px)",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "30%", "");
+  is(cs.getPropertyValue(prop), "calc(15% + 30px)",
+     "property " + prop + ": interpolation between calc() and non-calc()");
+
+  check_distance(prop, "calc(40px + 10%)", "calc(30px + 15%)", "30%");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "16px", "");
+  is(cs.getPropertyValue(prop), "16px",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "calc(8px + 60%)", "");
+  is(cs.getPropertyValue(prop), "calc(15% + 14px)",
+     "property " + prop + ": interpolation between calc() and non-calc()");
+
+  check_distance(prop, "16px", "calc(14px + 15%)", "calc(8px + 60%)");
+}
+
+function test_number_transition(prop) {
+  div.style.transitionProperty = 'none';
+  div.style[prop] = '10';
+  is(cs[prop], '10',
+     `number property ${prop}: computed value before transition`);
+  div.style.transitionProperty = prop;
+  div.style[prop] = '50';
+  is(cs[prop], '20', `number property ${prop}: interpolation of numbers`);
+  check_distance(prop, '10', '20', '50');
+}
+
+function test_angle_transition(prop) {
+  div.style.transitionProperty = 'none';
+  div.style[prop] = '45deg';
+  is(cs[prop], '45deg',
+     `angle property ${prop}: computed value before transition`);
+  div.style.transitionProperty = prop;
+  div.style[prop] = '145deg';
+  is(cs[prop], '70deg',
+     `angle property ${prop}: interpolation of angles`);
+  check_distance(prop, '45deg', '70deg', '145deg');
+}
+
+function get_color_options(options) {
+  let {
+    get_color = x => x,
+    set_color = x => x,
+    is_shorthand = false,
+  } = options;
+  return { get_color, set_color, is_shorthand };
+}
+
+function test_color_transition(prop, options={}) {
+  let { get_color, set_color, is_shorthand } = get_color_options(options);
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, set_color("rgb(255, 28, 0)"), "");
+  is(get_color(cs.getPropertyValue(prop)), "rgb(255, 28, 0)",
+     "color-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, set_color("rgb(75, 84, 128)"), "");
+  is(get_color(cs.getPropertyValue(prop)), "rgb(210, 42, 32)",
+     "color-valued property " + prop + ": interpolation of colors");
+
+  if (!is_shorthand) {
+    check_distance(prop, set_color("rgb(255, 28, 0)"),
+                   set_color("rgb(210, 42, 32)"),
+                   set_color("rgb(75, 84, 128)"));
+  }
+
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, set_color("rgb(0, 255, 0)"), "");
+  var color = get_color(cs.getPropertyValue(prop));
+  var vals = color.match(/rgb\(([^, ]*), ([^, ]*), ([^, ]*)\)/);
+  is(vals.length, 4,
+     "color-valued property " + prop + ": flush before clamping test (length)");
+  is(vals[1], "0",
+     "color-valued property " + prop + ": flush before clamping test (red)");
+  is(vals[2], "255",
+     "color-valued property " + prop + ": flush before clamping test (green)");
+  is(vals[3], "0",
+     "color-valued property " + prop + ": flush before clamping test (blue)");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, set_color("rgb(255, 0, 128)"), "");
+  // FIXME: Once we support non-sRGB colors, these tests will need fixing.
+  color = get_color(cs.getPropertyValue(prop));
+  vals = color.match(/rgb\(([^, ]*), ([^, ]*), ([^, ]*)\)/);
+  is(vals.length, 4,
+     "color-valued property " + prop + ": clamping of negatives (length)");
+  is(vals[1], "0",
+     "color-valued property " + prop + ": clamping of negatives (red)");
+  is(vals[2], "255",
+     "color-valued property " + prop + ": clamping of above-range (green)");
+  is(vals[3], "0",
+     "color-valued property " + prop + ": clamping of negatives (blue)");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+function test_currentcolor_transition(prop, options={}) {
+  let { get_color, set_color } = get_color_options(options);
+
+  const msg_prefix = `color-valued property ${prop}: `;
+  div.style.setProperty("transition-property", "none", "");
+  (prop == "color" ? div.parentNode : div).style.
+    setProperty("color", "rgb(128, 0, 0)", "");
+  div.style.setProperty(prop, set_color("rgb(0, 0, 128)"), "");
+  is(get_color(cs.getPropertyValue(prop)), "rgb(0, 0, 128)",
+     msg_prefix + "computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, set_color("currentcolor"), "");
+  is(get_color(cs.getPropertyValue(prop)), "rgb(32, 0, 96)",
+     msg_prefix + "interpolation of rgb color and currentcolor");
+
+  if (prop != "color") {
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty("color", "rgb(128, 0, 0)", "");
+    div.style.setProperty(prop, set_color("rgb(0, 0, 128)"), "");
+    is(get_color(cs.getPropertyValue(prop)), "rgb(0, 0, 128)",
+       msg_prefix + "computed value before transition");
+    div.style.setProperty("transition-property", `color, ${prop}`, "");
+    div.style.setProperty("color", "rgb(0, 128, 0)", "");
+    div.style.setProperty(prop, set_color("currentcolor"), "");
+    is(cs.getPropertyValue("color"), "rgb(96, 32, 0)",
+       "interpolation of rgb color property");
+    is(get_color(cs.getPropertyValue(prop)), "rgb(24, 8, 96)",
+       msg_prefix + "interpolation of rgb color and interpolated currentcolor");
+  }
+
+  div.style.setProperty("transition-property", "none", "");
+  (prop == "color" ? div.parentNode : div).style.
+    setProperty("color", "rgba(128, 0, 0, 0.6)", "");
+  div.style.setProperty(prop, set_color("rgba(0, 0, 128, 0.8)"), "");
+  is(get_color(cs.getPropertyValue(prop)), "rgba(0, 0, 128, 0.8)",
+     msg_prefix + "computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, set_color("currentcolor"), "");
+  is(get_color(cs.getPropertyValue(prop)), "rgba(26, 0, 102, 0.75)",
+     msg_prefix + "interpolation of rgba color and currentcolor");
+
+  // It is not possible to check distance, because there is a hidden
+  // dimension for ratio of currentcolor.
+
+  (prop == "color" ? div.parentNode : div).style.removeProperty("color");
+}
+
+function test_auto_color_transition(prop, options={}) {
+  let { get_color, set_color } = get_color_options(options);
+
+  const msg_prefix = `color-valued property ${prop}: `;
+  const test_color = "rgb(51, 102, 153)";
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "auto", "");
+  if (prop == "scrollbar-color") {
+    is(cs.getPropertyValue(prop), "auto",
+       msg_prefix + "auto should not be resolved to rgb color");
+  } else {
+    let used_value_of_auto = get_color(cs.getPropertyValue(prop));
+    isnot(used_value_of_auto, test_color,
+          msg_prefix + "ensure used auto value is different than our test color");
+  }
+
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, set_color(test_color), "");
+  is(get_color(cs.getPropertyValue(prop)), test_color,
+     msg_prefix + "not interpolatable between auto and rgb color");
+}
+
+function get_color_from_shorthand_value(value) {
+  var m = value.match(/rgba?\([^, ]*, [^, ]*, [^, ]*(?:, [^, ]*)?\)/);
+  isnot(m, null, "shorthand property value should contain color");
+  return m[0];
+}
+
+function test_color_shorthand_transition(prop) {
+  test_color_transition(prop, {
+    get_color: get_color_from_shorthand_value,
+    is_shorthand: true,
+  });
+}
+
+function test_currentcolor_shorthand_transition(prop) {
+  test_currentcolor_transition(prop, {
+    get_color: get_color_from_shorthand_value,
+    is_shorthand: true,
+  });
+}
+
+function test_scrollbar_color_transition(prop) {
+  function split_colors(value) {
+    const colors = value.match(/^(rgba?\(.+?\)) (rgba?\(.+?\))$/);
+    isnot(colors, null, "scrollbar-color should consist of two colors");
+    return { thumb: colors[1], track: colors[2] };
+  }
+  const TEST_FUNCS = [
+    test_color_transition,
+    test_currentcolor_transition,
+    test_auto_color_transition,
+  ];
+  for (let test_func of TEST_FUNCS) {
+    test_func(prop, {
+      get_color: value => split_colors(value).thumb,
+      set_color: value => value + " blue",
+    });
+    test_func(prop, {
+      get_color: value => split_colors(value).track,
+      set_color: value => "blue " + value,
+    });
+  }
+}
+
+function test_shape_or_url_equals(computedValStr, expected)
+{
+  // Check simple case "none"
+  if (computedValStr == "none" && computedValStr == expected[0]) {
+    return true;
+  }
+  // We will update the expected list in this function for checking the result,
+  // so we clone it first to avoid affecting the input parameter.
+  var expectedList = expected.slice();
+
+  var start = String(computedValStr);
+
+  var regBox = /\s*(content\-box|padding\-box|border\-box|margin\-box|view\-box|stroke\-box|fill\-box)/
+  var matches = computedValStr.split(regBox);
+  var expectRefBox = typeof expectedList[expectedList.length - 1] == "string" &&
+                     expectedList[expectedList.length - 1].match(regBox) !== null;
+
+  // Found a reference box? Format: "shape()" or "shape() reference-box"
+  if (matches.length > 1) {
+    // Our split() did actually split the string, which means computedValStr
+    // contains a reference box. That reference box should be at the end,
+    // which means split() will have produced an empty string as the final
+    // entry in |matches|. Let's first ditch that empty string.
+    var trailingJunk = matches.pop();
+    is(trailingJunk, "", "reference box shouldn't have anything after it");
+
+    // Do we expect a reference box?
+    if (!expectRefBox) {
+      ok(false, "unexpected reference box found");
+      matches.pop(); // Get rid of it, so we can test the rest...
+    } else {
+      is(matches.pop(), expectedList.pop(), "Reference boxes should match");
+    }
+  } else {
+    // No reference box found. Did we expect one?
+    if (expectRefBox) {
+      ok(false, "expected reference box");
+      return false;
+    }
+  }
+  computedValStr = matches[0];
+  if (expectedList.length == 0) {
+    if (computedValStr == "") {
+      return true;
+    }
+    ok(false, "expected basic shape");
+    return false;
+  }
+
+  // The regular expression does not filter out the last parenthesis.
+  // Remove last character for now.
+  is(computedValStr.substring(computedValStr.length - 1, computedValStr.length),
+                              ')', "Function should have close-paren");
+  computedValStr = computedValStr.substring(0, computedValStr.length - 1);
+
+  var regShape = /\)*\s*(circle|ellipse|polygon|inset|url)\(/
+  matches = computedValStr.split(regShape);
+  // First item must be empty. All other items are of functionName, functionValue.
+  if (!matches || matches.shift() != "") {
+    ok(false, "invalid value or unknown shape function");
+    return false;
+  }
+
+  // Check argument values.
+  if (matches[1] != expectedList[1]) {
+    ok(false, "function parameters mismatch");
+    return false;
+  }
+
+  return true;
+}
+
+function test_path_function_equals(computedValStr, expectedList)
+{
+  // Check simple case "none"
+  if (expectedList.length === 1 && computedValStr === expectedList[0]) {
+    return true;
+  }
+
+  var regex = /([a-z]+)\((.*)\)/;
+  matches = computedValStr.match(regex)
+  if (!matches || matches[0] != computedValStr) {
+    ok(false, "Invalid function value");
+    return false;
+  }
+
+  // Bug 1480665: Support ray() for motion path. For now, only path(...) is
+  // acceptable.
+  if (matches[1] != "path") {
+    ok(false, "Only support path function");
+    return false;
+  }
+
+  // Check argument values.
+  if (matches[2] != expectedList[1]) {
+    ok(false, "Function parameters mismatch");
+    return false;
+  }
+
+  return true;
+}
+
+function filter_function_list_equals(computedValStr, expectedList)
+{
+  // Check simple case "none"
+  if (computedValStr == "none" && computedValStr == expectedList[0]) {
+    return true;
+  }
+
+  // The regular expression does not filter out the last parenthesis.
+  // Remove last character for now.
+  is(computedValStr.substring(computedValStr.length - 1, computedValStr.length),
+                              ')', "Last character should be close-paren");
+  computedValStr = computedValStr.substring(0, computedValStr.length - 1);
+
+  var reg = /\)*\s*(blur|brightness|contrast|grayscale|hue\-rotate|invert|opacity|saturate|sepia|drop\-shadow|url)\(/
+  var matches = computedValStr.split(reg);
+  // First item must be empty. All other items are of functionName, functionValue.
+  if (!matches || matches.shift() != "") {
+    ok(false, "computed style of 'filter' isn't in the format we expect");
+    return false;
+  }
+
+  // Odd items are the function name, even items the function value.
+  if (!matches.length || matches.length % 2 ||
+      expectedList.length != matches.length) {
+    ok(false, "computed style of 'filter' isn't in the format we expect");
+    return false;
+  }
+  for (let i = 0; i < matches.length; i += 2) {
+    var functionName = matches[i];
+    var functionValue = matches[i+1];
+    var expected = expectedList[i+1]
+    var tolerance = 0;
+    // Check if we have the expected function.
+    if (functionName != expectedList[i]) {
+      return false;
+    }
+    if (functionName == "blur") {
+      // Last two characters must be "px".
+      if (functionValue.search("px") != functionValue.length - 2) {
+        return false;
+      }
+      functionValue = functionValue.substring(0, functionValue.length - 2);
+    } else if (functionName == "hue-rotate") {
+      // Just check for string equality.
+      return functionValue == expected;
+    } else if (functionName == "drop-shadow" || functionName == "url") {
+      if (functionValue != expected) {
+        return false;
+      }
+      continue;
+    }
+    // Check if string is not a number or difference is not in tolerance level.
+    if (isNaN(functionValue) ||
+      Math.abs(parseFloat(functionValue) - expected) > tolerance) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function test_basic_shape_or_url_transition(prop) {
+  let tests = basicShapesTests;
+  if (prop === "clip-path") {
+    // Clip-path won't resolve fragment URLs.
+    tests = tests.concat(basicShapesWithFragmentUrlTests);
+  }
+
+  for (let test of tests) {
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, test.start, "");
+    cs.getPropertyValue(prop);
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, test.end, "");
+    var actual = cs.getPropertyValue(prop);
+    ok(test_shape_or_url_equals(actual, test.expected),
+       prop + " property is " + actual + " expected values of " +
+       test.expected);
+  }
+}
+
+function test_path_function(prop) {
+  let tests = pathFunctionTests;
+  if (prop === "clip-path") {
+    // The syntax of path() in clip-path has fill-rule, so we have to test more.
+    tests = tests.concat(clipPathPathFunctionTests);
+  }
+
+  for (const test of tests) {
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, test.start, "");
+    cs.getPropertyValue(prop);
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, test.end, "");
+    const actual = cs.getPropertyValue(prop);
+    ok(test_path_function_equals(actual, test.expected),
+       prop + " property is " + actual + " expected values of " +
+       test.expected[0] + "(" + test.expected[1] + ")");
+  }
+}
+
+function test_filter_transition(prop) {
+  for (let i in filterTests) {
+    var test = filterTests[i];
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, test.start, "");
+    cs.getPropertyValue(prop);
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, test.end, "");
+    var actual = cs.getPropertyValue(prop);
+    ok(filter_function_list_equals(actual, test.expected),
+                                   "Filter property is " + actual + " expected values of " +
+                                   test.expected);
+  }
+}
+
+function test_shadow_transition(prop) {
+  var origTimingFunc = div.style.getPropertyValue("transition-timing-function");
+  var spreadStr = (prop == "box-shadow") ? " 0px" : "";
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "none", "");
+  is(cs.getPropertyValue(prop), "none",
+     "shadow-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "4px 8px 3px red", "");
+  is(cs.getPropertyValue(prop), "rgba(255, 0, 0, 0.25) 1px 2px 0.75px" + spreadStr,
+     "shadow-valued property " + prop + ": interpolation of shadows");
+  check_distance(prop, "none", "rgba(255, 0, 0, 0.25) 1px 2px 0.75px",
+                       "4px 8px 3px red");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "#038000 4px 4px, 2px 2px blue", "");
+  is(cs.getPropertyValue(prop), "rgb(3, 128, 0) 4px 4px 0px" + spreadStr + ", rgb(0, 0, 255) 2px 2px 0px" + spreadStr,
+     "shadow-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "8px 8px 8px red", "");
+  is(cs.getPropertyValue(prop), "rgb(66, 96, 0) 5px 5px 2px" + spreadStr + ", rgba(0, 0, 255, 0.75) 1.5px 1.5px 0px" + spreadStr,
+     "shadow-valued property " + prop + ": interpolation of shadows");
+  check_distance(prop, "#038000 4px 4px, 2px 2px blue",
+                       "rgb(66, 96, 0) 5px 5px 2px, rgba(0, 0, 255, 0.75) 1.5px 1.5px 0px",
+                       "8px 8px 8px red");
+
+  if (prop == "box-shadow") {
+    div.style.setProperty(prop, "8px 8px 8px red inset", "");
+    is(cs.getPropertyValue(prop), "rgb(255, 0, 0) 8px 8px 8px 0px inset",
+       "shadow-valued property " + prop + ": non-interpolable cases");
+    div.style.setProperty(prop, "8px 8px 8px 8px red inset", "");
+    is(cs.getPropertyValue(prop), "rgb(255, 0, 0) 8px 8px 8px 2px inset",
+       "shadow-valued property " + prop + ": interpolation of spread");
+    // Leave in same state whether in the |if| or not.
+    div.style.setProperty(prop, "8px 8px 8px red", "");
+    is(cs.getPropertyValue(prop), "rgb(255, 0, 0) 8px 8px 8px 0px",
+       "shadow-valued property " + prop + ": non-interpolable cases");
+    check_distance(prop, "8px 8px 8px red inset",
+                         "rgb(255, 0, 0) 8px 8px 8px 2px inset",
+                         "8px 8px 8px 8px red inset");
+  }
+
+  // Transition beween values with color and without color.
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty("color", "rgb(3, 0, 0)", "");
+  div.style.setProperty(prop, "2px 2px 2px", "");
+  is(cs.getPropertyValue(prop), "rgb(3, 0, 0) 2px 2px 2px" + spreadStr,
+     "shadow-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "8px 8px 8px red", "");
+  is(cs.getPropertyValue(prop), "rgb(66, 0, 0) 3.5px 3.5px 3.5px" + spreadStr,
+     "shadow-valued property " + prop +
+     ": interpolation values with/without color");
+
+  // Transition beween values without color.
+  var defaultColor = cs.getPropertyValue("color") + " ";
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "2px 2px 2px", "");
+  is(cs.getPropertyValue(prop), defaultColor + "2px 2px 2px" + spreadStr,
+     "shadow-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "6px 14px 10px", "");
+  is(cs.getPropertyValue(prop), defaultColor + "3px 5px 4px" + spreadStr,
+     "shadow-valued property " + prop + ": interpolation without color");
+  check_distance(prop, "2px 2px 2px", "3px 5px 4px", "6px 14px 10px");
+
+  // Transition between values with currentcolor transitioning.
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty("color", "rgb(0, 255, 0)", "");
+  div.style.setProperty(prop, "2px 2px 2px", "");
+  is(cs.getPropertyValue(prop), "rgb(0, 255, 0) 2px 2px 2px" + spreadStr,
+     "shadow-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", "color, " + prop, "");
+  div.style.setProperty("color", "rgb(0, 0, 255)", "");
+  div.style.setProperty(prop, "6px 10px 14px red", "");
+  is(cs.getPropertyValue(prop), "rgb(64, 143, 48) 3px 4px 5px" + spreadStr,
+     "shadow-valued property " + prop + ": interpolation with interpolating" +
+     "currentcolor");
+
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0px 0px 0px black", "");
+  is(cs.getPropertyValue(prop), "rgb(0, 0, 0) 0px 0px 0px" + spreadStr,
+     "shadow-valued property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "10px 10px 10px black", "");
+  var vals = cs.getPropertyValue(prop).split(" ");
+  is(vals.length, 6 + (prop == "box-shadow"), "unexpected number of values");
+  is(vals.slice(0, 3).join(" "), "rgb(0, 0, 0)",
+     "shadow-valued property " + prop + " (color): clamping of negatives");
+  isnot(vals[3], "0px",
+        "shadow-valued property " + prop + " (x): clamping of negatives");
+  isnot(vals[4], "0px",
+        "shadow-valued property " + prop + " (y): clamping of negatives");
+  is(vals[5], "0px",
+     "shadow-valued property " + prop + " (radius): clamping of negatives");
+  if (prop == "box-shadow") {
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, "0px 0px 0px 0px black", "");
+    is(cs.getPropertyValue(prop), "rgb(0, 0, 0) 0px 0px 0px 0px",
+       "shadow-valued property " + prop + ": flush before clamping test");
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, "10px 10px 10px 10px black", "");
+    var vals = cs.getPropertyValue(prop).split(" ");
+    is(vals.length, 7, "unexpected number of values");
+    is(vals.slice(0, 3).join(" "), "rgb(0, 0, 0)",
+       "shadow-valued property " + prop + " (color): clamping of negatives");
+    isnot(vals[3], "0px",
+          "shadow-valued property " + prop + " (x): clamping of negatives");
+    isnot(vals[4], "0px",
+          "shadow-valued property " + prop + " (y): clamping of negatives");
+    is(vals[5], "0px",
+       "shadow-valued property " + prop + " (radius): clamping of negatives");
+    isnot(vals[6], "0px",
+          "shadow-valued property " + prop + " (spread): clamping of negatives");
+  }
+
+  // A test case that timing function produces values greater than 1.0.
+  div.style.setProperty("transition-timing-function",
+                        // This function produces 1.2989961788069297 at 25%.
+                        "cubic-bezier(0, 1.5, 0, 1.5)", "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "none", "");
+  is(cs.getPropertyValue(prop), "none",
+     "shadow-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "0px 0px 0px rgba(100, 100, 100, 0.5)", "");
+  // The alpha value, 0.5 * 1.2989961788069297 * 255, is 165.622012798, and then
+  // converted to 0.649.
+  is(cs.getPropertyValue(prop), "rgba(100, 100, 100, 0.649) 0px 0px 0px" + spreadStr,
+     "shadow-valued property " + prop + ": interpolation of shadows with " +
+     "timing function which produces values greater than 1.0");
+
+  div.style.setProperty("transition-timing-function", origTimingFunc, "");
+}
+
+function test_dasharray_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "3", "");
+  is(cs.getPropertyValue(prop), "3px",
+     "dasharray-valued property " + prop +
+     ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "15px", "");
+  is(cs.getPropertyValue(prop), "6px",
+     "dasharray-valued property " + prop + ": interpolation of dasharray");
+  check_distance(prop, "3", "6", "15px");
+  div.style.setProperty(prop, "none", "");
+  is(cs.getPropertyValue(prop), "none",
+     "dasharray-valued property " + prop + ": non-interpolability of none");
+  div.style.setProperty(prop, "6,8px,4,4", "");
+  is(cs.getPropertyValue(prop), "6px, 8px, 4px, 4px",
+     "dasharray-valued property " + prop +
+     ": computed value before transition");
+  div.style.setProperty(prop, "14, 12,16,16px", "");
+  is(cs.getPropertyValue(prop), "8px, 9px, 7px, 7px",
+     "dasharray-valued property " + prop + ": interpolation of dasharray");
+  check_distance(prop, "6,8px,4,4", "8,9,7,7", "14, 12,16,16px");
+  div.style.setProperty(prop, "none", "");
+  is(cs.getPropertyValue(prop), "none",
+     "dasharray-valued property " + prop + ": non-interpolability of none");
+  div.style.setProperty(prop, "8,16,4", "");
+  is(cs.getPropertyValue(prop), "8px, 16px, 4px",
+     "dasharray-valued property " + prop +
+     ": computed value before transition");
+  div.style.setProperty(prop, "4,8,12,16", "");
+  is(cs.getPropertyValue(prop), "7px, 14px, 6px, 10px, 13px, 5px, 9px, 16px, 4px, 8px, 15px, 7px",
+     "dasharray-valued property " + prop + ": interpolation of dasharray");
+  check_distance(prop, "8,16,4", "7, 14, 6, 10, 13, 5, 9, 16, 4, 8, 15, 7",
+                       "4,8,12,16");
+  div.style.setProperty(prop, "2,50%,6,10", "");
+  is(cs.getPropertyValue(prop),
+     "5.75px, calc(12.5% + 10.5px), 6px, 10px, 10.25px, calc(12.5% + 3.75px), 8.25px, 14.5px, 3.5px, calc(12.5% + 6px), 12.75px, 7.75px",
+     "dasharray-valued property " + prop + ": interpolability of mixed units");
+  div.style.setProperty(prop, "none", "");
+  is(cs.getPropertyValue(prop), "none",
+     "dasharray-valued property " + prop + ": non-interpolability of none");
+  div.style.setProperty(prop, "2,50%,6,10", "");
+  is(cs.getPropertyValue(prop), "2px, 50%, 6px, 10px",
+     "dasharray-valued property " + prop + ": non-interpolability of none");
+  div.style.setProperty(prop, "6,30%,2,2", "");
+  is(cs.getPropertyValue(prop), "3px, 45%, 5px, 8px",
+     "dasharray-valued property " + prop + ": interpolation of dasharray");
+  check_distance(prop, "2,50%,6,10", "3, 45%, 5, 8", "6,30%,2,2");
+
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0,0%", "");
+  is(cs.getPropertyValue(prop), "0px, 0%",
+     "dasharray-valued property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "5px, 25%", "");
+  is(cs.getPropertyValue(prop), "0px, 0%",
+     "dasharray-valued property " + prop + ": clamping of negatives");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+function test_radius_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+
+  // FIXME: Test a square for now, since we haven't updated to the spec
+  // for vertical components being relative to the height.
+  // Note: We use powers of two here so the floating-point math comes out
+  // nicely.
+  div.style.setProperty("width", "256px", "");
+  div.style.setProperty("height", "256px", "");
+  div.style.setProperty("border", "none", "");
+  div.style.setProperty("padding", "0", "");
+
+  div.style.setProperty(prop, "3px", "");
+  is(cs.getPropertyValue(prop), "3px",
+     "radius-valued property " + prop +
+     ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "15px", "");
+  is(cs.getPropertyValue(prop), "6px",
+     "radius-valued property " + prop + ": interpolation of radius");
+  check_distance(prop, "3px", "6px", "15px");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "12.5%", "");
+  is(cs.getPropertyValue(prop), "12.5%",
+     "radius-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "25%", "");
+  is(cs.getPropertyValue(prop), "15.625%",
+     "radius-valued property " + prop + ": interpolation of radius");
+  check_distance(prop, "12.5%", "15.625%", "25%");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "3px 8px", "");
+  is(cs.getPropertyValue(prop), "3px 8px",
+     "radius-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "15px 12px", "");
+  is(cs.getPropertyValue(prop), "6px 9px",
+     "radius-valued property " + prop + ": interpolation of radius");
+  check_distance(prop, "3px 8px", "6px 9px", "15px 12px");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "12.5% 6.25%", "");
+  is(cs.getPropertyValue(prop), "12.5% 6.25%",
+     "radius-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "25%", "");
+  is(cs.getPropertyValue(prop), "15.625% 10.9375%",
+     "radius-valued property " + prop + ": interpolation of radius");
+  check_distance(prop, "12.5% 6.25%", "15.625% 10.9375%", "25%");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "6.25% 12.5%", "");
+  is(cs.getPropertyValue(prop), "6.25% 12.5%",
+     "radius-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "64px 16px", "");
+  is(cs.getPropertyValue(prop), "calc(4.6875% + 16px) calc(9.375% + 4px)",
+     "radius-valued property " + prop + ": interpolation of radius with mixed units");
+  check_distance(prop, "6.25% 12.5%",
+                 "calc(4.6875% + 16px) calc(9.375% + 4px)",
+                 "64px 16px");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "calc(5px) 10px", "");
+  is(cs.getPropertyValue(prop), "5px 10px",
+     "radius-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "calc(25px) calc(50px)", "");
+  is(cs.getPropertyValue(prop), "10px 20px",
+     "radius-valued property " + prop + ": interpolation of radius with calc() units");
+
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0px 0px", "");
+  is(cs.getPropertyValue(prop), "0px",
+     "radius-valued property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "10px 20px", "");
+  is(cs.getPropertyValue(prop), "0px",
+     "radius-valued property " + prop + ": clamping of negatives");
+  div.style.setProperty("transition-timing-function", "linear", "");
+
+  div.style.removeProperty("width");
+  div.style.removeProperty("height");
+  div.style.removeProperty("border");
+  div.style.removeProperty("padding");
+}
+
+function test_integer_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "4", "");
+  is(cs.getPropertyValue(prop), "4",
+     "integer-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "-14", "");
+  is(cs.getPropertyValue(prop), "0",
+     "integer-valued property " + prop + ": interpolation of integers");
+  check_distance(prop, "6", "1", "-14");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "-4", "");
+  is(cs.getPropertyValue(prop), "-4",
+     "integer-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "8", "");
+  is(cs.getPropertyValue(prop), "-1",
+     "integer-valued property " + prop + ": interpolation of integers");
+  check_distance(prop, "-4", "-1", "8");
+
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0", "");
+  is(cs.getPropertyValue(prop), "0",
+     "integer-valued property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "100", "");
+  isnot(cs.getPropertyValue(prop), "0",
+        "integer-valued property " + prop + ": clamping of negatives");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+function test_font_weight(prop) {
+  is(prop, "font-weight", "only designed for one property");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "normal", "");
+  is(cs.getPropertyValue(prop), "400",
+     "font-weight property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "900", "");
+  is(cs.getPropertyValue(prop), "525",
+     "font-weight property " + prop + ": interpolation of font-weights");
+  check_distance(prop, "400", "500", "800");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "900", "");
+  is(cs.getPropertyValue(prop), "900",
+     "font-weight property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "100", "");
+  is(cs.getPropertyValue(prop), "700",
+     "font-weight property " + prop + ": interpolation of font-weights");
+  check_distance(prop, "900", "700", "100");
+
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "1", "");
+  is(cs.getPropertyValue(prop), "1",
+     "font-weight property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "1000", "");
+  is(cs.getPropertyValue(prop), "1",
+     "font-weight property " + prop + ": clamping of values");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "1000", "");
+  is(cs.getPropertyValue(prop), "1000",
+     "font-weight property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "1", "");
+  is(cs.getPropertyValue(prop), "1000",
+     "font-weight property " + prop + ": clamping of values");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+function test_grid_gap(prop) {
+  test_length_transition(prop);
+  test_length_clamped(prop);
+  test_percent_transition(prop);
+  test_percent_clamped(prop);
+}
+
+function test_pos_integer_or_keyword_transition(prop, keyword) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "4", "");
+  is(cs.getPropertyValue(prop), "4",
+     "integer-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "11", "");
+  is(cs.getPropertyValue(prop), "6",
+     "integer-valued property " + prop + ": interpolation of integers");
+  check_distance(prop, "4", "6", "12");
+  div.style.setProperty(prop, keyword, "");
+  is(cs.getPropertyValue(prop), keyword,
+     "integer-valued property " + prop + ": " + keyword + " not interpolable");
+  div.style.setProperty(prop, "8", "");
+  is(cs.getPropertyValue(prop), "8",
+     "integer-valued property " + prop + ": computed value before transition");
+  div.style.setProperty(prop, "4", "");
+  is(cs.getPropertyValue(prop), "7",
+     "integer-valued property " + prop + ": interpolation of integers");
+  check_distance(prop, "8", "7", "4");
+}
+
+function test_pos_integer_or_auto_transition(prop) {
+  return test_pos_integer_or_keyword_transition(prop, "auto");
+}
+
+function test_pos_integer_or_none_transition(prop) {
+  return test_pos_integer_or_keyword_transition(prop, "none");
+}
+
+function test_integer_at_least_one_clamping(prop) {
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "1", "");
+  is(cs.getPropertyValue(prop), "1",
+     "integer-valued property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "5", "");
+  is(cs.getPropertyValue(prop), "1",
+     "integer-valued property " + prop + ": clamping of negatives");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+function test_length_pair_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "4px 6px", "");
+  is(cs.getPropertyValue(prop), "4px 6px",
+     "length-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "12px 10px", "");
+  is(cs.getPropertyValue(prop), "6px 7px",
+     "length-valued property " + prop + ": interpolation of lengths");
+  check_distance(prop, "4px 6px", "6px 7px", "12px 10px");
+}
+
+function test_length_pair_transition_clamped(prop) {
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0px 0px", "");
+  is(cs.getPropertyValue(prop), "0px 0px",
+     "length-valued property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "30px 50px", "");
+  is(cs.getPropertyValue(prop), "0px 0px",
+     "length-valued property " + prop + ": clamping of negatives");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+function test_length_percent_pair_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "4px 50%", "");
+  is(cs.getPropertyValue(prop), "4px 5px",
+     "length-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "12px 70%", "");
+  is(cs.getPropertyValue(prop), "6px 5.5px",
+     "length-valued property " + prop + ": interpolation of lengths");
+  check_distance(prop, "4px 50%", "6px 55%", "12px 70%");
+}
+
+function test_length_percent_pair_clamped(prop) {
+  test_length_percent_pair_clamped_or_unclamped(prop, true);
+}
+
+function test_length_percent_pair_unclamped(prop) {
+  test_length_percent_pair_clamped_or_unclamped(prop, false);
+}
+
+function test_length_percent_pair_clamped_or_unclamped(prop, is_clamped) {
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0px 0%", "");
+  var is_zero = function(val) {
+    if (prop == "transform-origin" || prop == "perspective-origin") {
+      // These two properties resolve percentages to pixels.
+      return val == "0px 0px";
+    }
+    return val == "0px 0%";
+  }
+  ok(is_zero(cs.getPropertyValue(prop)),
+     "length+percent-valued property " + prop + ": flush before clamping test");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "30px 25%", "");
+  is(is_zero(cs.getPropertyValue(prop)), is_clamped,
+     "length+percent-valued property " + prop + ": clamping of negatives");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+function test_rect_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "rect(4px, 16px, 12px, 6px)", "");
+  is(cs.getPropertyValue(prop), "rect(4px, 16px, 12px, 6px)",
+     "rect-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "rect(0px, 4px, 4px, 2px)", "");
+  is(cs.getPropertyValue(prop), "rect(3px, 13px, 10px, 5px)",
+     "rect-valued property " + prop + ": interpolation of rects");
+  check_distance(prop, "rect(4px, 16px, 12px, 6px)",
+                       "rect(3px, 13px, 10px, 5px)",
+                       "rect(0px, 4px, 4px, 2px)");
+  div.style.setProperty(prop, "rect(0px, 6px, 4px, auto)", "");
+  is(cs.getPropertyValue(prop), "rect(0px, 6px, 4px, auto)",
+     "rect-valued property " + prop + ": can't interpolate auto components");
+  div.style.setProperty(prop, "rect(0px, 6px, 4px, 2px)", "");
+  div.style.setProperty(prop, "auto", "");
+  is(cs.getPropertyValue(prop), "auto",
+     "rect-valued property " + prop + ": can't interpolate auto components");
+
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "rect(-10px, 30px, 0px, 0px)", "");
+  var vals = cs.getPropertyValue(prop).match(/rect\(([^, ]*), ([^, ]*), ([^, ]*), ([^, ]*)\)/);
+  is(vals.length, 5,
+     "rect-valued property " + prop + ": flush before clamping test (length)");
+  is(vals[1], "-10px",
+     "rect-valued property " + prop + ": flush before clamping test (top)");
+  is(vals[2], "30px",
+     "rect-valued property " + prop + ": flush before clamping test (right)");
+  is(vals[3], "0px",
+     "rect-valued property " + prop + ": flush before clamping test (bottom)");
+  is(vals[4], "0px",
+     "rect-valued property " + prop + ": flush before clamping test (left)");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "rect(0px, 40px, 10px, 10px)", "");
+  vals = cs.getPropertyValue(prop).match(/rect\(([^, ]*), ([^, ]*), ([^, ]*), ([^, ]*)\)/);
+  is(vals.length, 5,
+     "rect-valued property " + prop + ": clamping of negatives (length)");
+  isnot(vals[1], "-10px",
+     "rect-valued property " + prop + ": clamping of negatives (top)");
+  isnot(vals[2], "30px",
+     "rect-valued property " + prop + ": clamping of negatives (right)");
+  isnot(vals[3], "0px",
+     "rect-valued property " + prop + ": clamping of negatives (bottom)");
+  isnot(vals[4], "0px",
+     "rect-valued property " + prop + ": clamping of negatives (left)");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+function test_visibility_transition(prop) {
+  function do_test(from_value, to_value, interp_value) {
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, from_value, "");
+    is(cs.getPropertyValue(prop), from_value,
+       "visibility property " + prop + ": computed value before transition");
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, to_value, "");
+    is(cs.getPropertyValue(prop), interp_value,
+       "visibility property " + prop + ": interpolation of visibility");
+  }
+
+  do_test("visible", "hidden", "visible");
+  do_test("hidden", "visible", "visible");
+  do_test("hidden", "collapse", "collapse"); /* not interpolable */
+  do_test("collapse", "hidden", "hidden"); /* not interpolable */
+  do_test("visible", "collapse", "visible");
+  do_test("collapse", "visible", "visible");
+
+  isnot(get_distance(prop, "visible", "hidden"), 0,
+        "distance between visible and hidden should not be zero");
+  isnot(get_distance(prop, "visible", "collapse"), 0,
+        "distance between visible and collapse should not be zero");
+  is(get_distance(prop, "visible", "visible"), 0,
+     "distance between visible and visible should not be zero");
+  is(get_distance(prop, "hidden", "hidden"), 0,
+     "distance between hidden and hidden should not be zero");
+  is(get_distance(prop, "collapse", "collapse"), 0,
+     "distance between collapse and collapse should not be zero");
+
+  div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
+  function do_negative_test(from_value, to_value, interpolable) {
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, from_value, "");
+    is(cs.getPropertyValue(prop), from_value,
+       "visibility property " + prop + ": flush before clamping test");
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, to_value, "");
+    is(cs.getPropertyValue(prop), interpolable ? from_value : to_value,
+       "visibility property " + prop + ": clamping of negatives");
+  }
+  do_negative_test("visible", "hidden", true);
+  do_negative_test("hidden", "visible", true);
+  do_negative_test("hidden", "collapse", false);
+  do_negative_test("collapse", "hidden", false);
+  do_negative_test("visible", "collapse", true);
+  do_negative_test("collapse", "visible", true);
+
+  div.style.setProperty("transition-delay", "-3s", "");
+  div.style.setProperty("transition-timing-function", FUNC_OVERONE, "");
+
+  function do_overone_test(from_value, to_value) {
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, from_value, "");
+    is(cs.getPropertyValue(prop), from_value,
+       "visibility property " + prop + ": flush before clamping test");
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, to_value, "");
+    is(cs.getPropertyValue(prop), to_value,
+       "visibility property " + prop + ": clamping of over-ones");
+  }
+  do_overone_test("visible", "hidden");
+  do_overone_test("hidden", "visible");
+  do_overone_test("hidden", "collapse");
+  do_overone_test("collapse", "hidden");
+  do_overone_test("visible", "collapse");
+  do_overone_test("collapse", "visible");
+
+  div.style.setProperty("transition-delay", "-1s", "");
+  div.style.setProperty("transition-timing-function", "linear", "");
+}
+
+function test_background_size_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "50% 80%", "");
+  is(cs.getPropertyValue(prop), "50% 80%",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "100% 100%", "");
+  is(cs.getPropertyValue(prop), "62.5% 85%",
+     "property " + prop + ": interpolation of percents");
+  check_distance(prop, "50% 80%", "62.5% 85%", "100% 100%");
+  div.style.setProperty(prop, "contain", "");
+  is(cs.getPropertyValue(prop), "contain",
+     "property " + prop + ": can't interpolate 'contain'");
+  test_background_position_size_common(prop, true, true);
+}
+
+function test_background_position_transition(prop) {
+  var doesPropTakeListValues = (prop == "background-position") ||
+                               (prop == "mask-position");
+  var doesPropHaveDistanceComputation = (prop != "background-position") &&
+                                        (prop != "mask-position");
+
+  // Test interpolation between edge keywords, and between edge keyword and a
+  // percent value. (Note: edge keywords are really aliases for percent vals.)
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "center 80%", "");
+  is(cs.getPropertyValue(prop), "50% 80%",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "bottom right", "");
+  is(cs.getPropertyValue(prop), "62.5% 85%",
+     "property " + prop + ": interpolation of edge keywords & percents");
+  if (doesPropHaveDistanceComputation) {
+    check_distance(prop, "center 80%", "62.5% 85%", "bottom right");
+  }
+
+  // Test interpolation between edge keyword *with an offset* and non-keyword
+  // values.
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "right 20px bottom 30%", "");
+  is(cs.getPropertyValue(prop), "calc(100% - 20px) 70%",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "calc(40px + 20%) calc(12px + 30%)", "");
+  is(cs.getPropertyValue(prop), "calc(80% - 5px) calc(60% + 3px)",
+     "property " + prop + ": interpolation of edge keywords w/ offsets & calc");
+  if (doesPropHaveDistanceComputation) {
+    check_distance(prop, "right 20px bottom 30%",
+                         "calc(-5px + 80%) calc(3px + 60%)",
+                         "calc(40px + 20%) calc(12px + 30%)");
+  }
+
+  test_background_position_size_common(prop, doesPropTakeListValues,
+                                       doesPropHaveDistanceComputation);
+}
+
+function test_background_position_coord_transition(prop) {
+  var endEdge = prop.endsWith("-x") ? "right" : "bottom";
+
+  // Test interpolation between edge keywords, and between edge keyword and a
+  // percent value. (Note: edge keywords are really aliases for percent vals.)
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "center", "");
+  is(cs.getPropertyValue(prop), "50%",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, endEdge, "");
+  is(cs.getPropertyValue(prop), "62.5%",
+     "property " + prop + ": interpolation of edge keywords & percents");
+  check_distance(prop, "center", "62.5%", endEdge);
+
+  // Test interpolation between edge keyword *with an offset* and non-keyword
+  // values.
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, `${endEdge} 20px`, "");
+  is(cs.getPropertyValue(prop), "calc(100% - 20px)",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "calc(40px + 20%)", "");
+  is(cs.getPropertyValue(prop), "calc(80% - 5px)",
+     "property " + prop + ": interpolation of edge keywords w/ offsets & calc");
+  check_distance(prop, `${endEdge} 20px`,
+                       "calc(-5px + 80%)",
+                       "calc(40px + 20%)");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "10px, 50px, 30px", "");
+  is(cs.getPropertyValue(prop), "10px, 50px, 30px",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "50px, 70px, 30px", "");
+  is(cs.getPropertyValue(prop), "20px, 55px, 30px",
+     "property " + prop + ": interpolation of lists of lengths");
+  check_distance(prop, "10px, 50px, 30px",
+                       "20px, 55px, 30px",
+                       "50px, 70px, 30px");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "10px, 50%, 30%, 5px", "");
+  is(cs.getPropertyValue(prop), "10px, 50%, 30%, 5px",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "50px, 70%, 30%, 25px", "");
+  is(cs.getPropertyValue(prop), "20px, 55%, 30%, 10px",
+     "property " + prop + ": interpolation of lists of lengths and percents");
+  check_distance(prop, "10px, 50%, 30%, 5px",
+                       "20px, 55%, 30%, 10px",
+                       "50px, 70%, 30%, 25px");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "20%, 8px", "");
+  is(cs.getPropertyValue(prop), "20%, 8px",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "12px, 40%", "");
+  is(cs.getPropertyValue(prop), "calc(15% + 3px), calc(10% + 6px)",
+     "property " + prop + ": interpolation that computes to calc()");
+  check_distance(prop, "20%, 8px",
+                       "calc(3px + 15%), calc(6px + 10%)",
+                       "12px, 40%");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "calc(20% + 40px), 8px, calc(20px + 12%)", "");
+  is(cs.getPropertyValue(prop), "calc(20% + 40px), 8px, calc(12% + 20px)",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "12px, calc(20%), calc(8px + 20%)", "");
+  is(cs.getPropertyValue(prop), "calc(15% + 33px), calc(5% + 6px), calc(14% + 17px)",
+     "property " + prop + ": interpolation that computes to calc()");
+  check_distance(prop, "calc(20% + 40px), 8px, calc(20px + 12%)",
+                       "calc(33px + 15%), calc(6px + 5%), calc(17px + 14%)",
+                       "12px, calc(20%), calc(8px + 20%)");
+}
+
+/**
+ * Common tests for 'background-position', 'background-size', and other
+ * properties that take CSS value-type 'position' or 'bg-size'.
+ *
+ *  @arg prop The name of the property
+ *  @arg doesPropTakeListValues
+ *         If false, the property is assumed to just take a single 'position' or
+ *         'bg-size' value. If true, the property is assumed to also accept
+ *         comma-separated list of such values.
+ */
+function test_background_position_size_common(prop, doesPropTakeListValues,
+                                              doesPropHaveDistanceComputation) {
+  // Test non-list values
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "40% 0%", "");
+  is(cs.getPropertyValue(prop), "40% 0%",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "0% 0%", "");
+  is(cs.getPropertyValue(prop), "30% 0%",
+     "property " + prop + ": interpolation of percentages");
+  if (doesPropHaveDistanceComputation) {
+    check_distance(prop, "40% 0%", "30% 0%", "0% 0%");
+  }
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "0% 40%", "");
+  is(cs.getPropertyValue(prop), "0% 40%",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "0% 0%", "");
+  is(cs.getPropertyValue(prop), "0% 30%",
+     "property " + prop + ": interpolation of percentages");
+  if (doesPropHaveDistanceComputation) {
+    check_distance(prop, "0% 40%", "0% 30%", "0% 0%");
+  }
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "10px 40px", "");
+  is(cs.getPropertyValue(prop), "10px 40px",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "50px 0", "");
+  is(cs.getPropertyValue(prop), "20px 30px",
+     "property " + prop + ": interpolation of lengths");
+  if (doesPropHaveDistanceComputation) {
+    check_distance(prop, "10px 40px", "20px 30px", "50px 0");
+  }
+
+  // Test interpolation that computes to to calc() (transition from % to px)
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "20% 40%", "");
+  is(cs.getPropertyValue(prop), "20% 40%",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "12px 20px", "");
+  is(cs.getPropertyValue(prop),
+     "calc(15% + 3px) calc(30% + 5px)",
+     "property " + prop + ": interpolation that computes to calc()");
+  if (doesPropHaveDistanceComputation) {
+    check_distance(prop, "20% 40%",
+                         "calc(3px + 15%) calc(5px + 30%)",
+                         "12px 20px");
+  }
+
+  // Test interpolation that computes to to calc() (transition from px to %)
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "12px 20px", "");
+  is(cs.getPropertyValue(prop), "12px 20px",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "20% 40%", "");
+  is(cs.getPropertyValue(prop),
+     "calc(5% + 9px) calc(10% + 15px)",
+     "property " + prop + ": interpolation that computes to calc()");
+  if (doesPropHaveDistanceComputation) {
+    check_distance(prop, "12px 20px",
+                         "calc(9px + 5%) calc(15px + 10%)",
+                         "20% 40%");
+  }
+
+  // Test interpolation between calc() and non-calc()
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "calc(40px + 10%) 16px", "");
+  is(cs.getPropertyValue(prop), "calc(10% + 40px) 16px",
+     "property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "30% calc(8px + 60%)", "");
+  is(cs.getPropertyValue(prop), "calc(15% + 30px) calc(15% + 14px)",
+     "property " + prop + ": interpolation between calc() and non-calc()");
+  if (doesPropHaveDistanceComputation) {
+    check_distance(prop, "calc(40px + 10%) 16px",
+                         "calc(30px + 15%) calc(14px + 15%)",
+                         "30% calc(8px + 60%)");
+  }
+
+  // Test list values, if appropriate
+  if (doesPropTakeListValues) {
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, "10px 40px, 50px 50px, 30px 20px", "");
+    is(cs.getPropertyValue(prop), "10px 40px, 50px 50px, 30px 20px",
+       "property " + prop + ": computed value before transition");
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, "50px 20px, 70px 50px, 30px 40px", "");
+    is(cs.getPropertyValue(prop), "20px 35px, 55px 50px, 30px 25px",
+       "property " + prop + ": interpolation of lists of lengths");
+    if (doesPropHaveDistanceComputation) {
+      check_distance(prop, "10px 40px, 50px 50px, 30px 20px",
+                           "20px 35px, 55px 50px, 30px 25px",
+                           "50px 20px, 70px 50px, 30px 40px");
+    }
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, "10px 40%, 50% 50px, 30% 20%, 5px 10px", "");
+    is(cs.getPropertyValue(prop), "10px 40%, 50% 50px, 30% 20%, 5px 10px",
+       "property " + prop + ": computed value before transition");
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, "50px 20%, 70% 50px, 30% 40%, 25px 50px", "");
+    is(cs.getPropertyValue(prop), "20px 35%, 55% 50px, 30% 25%, 10px 20px",
+       "property " + prop + ": interpolation of lists of lengths and percents");
+    if (doesPropHaveDistanceComputation) {
+      check_distance(prop, "10px 40%, 50% 50px, 30% 20%, 5px 10px",
+                           "20px 35%, 55% 50px, 30% 25%, 10px 20px",
+                           "50px 20%, 70% 50px, 30% 40%, 25px 50px");
+    }
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, "20% 40%, 8px 12px", "");
+    is(cs.getPropertyValue(prop), "20% 40%, 8px 12px",
+       "property " + prop + ": computed value before transition");
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, "12px 20px, 40% 16%", "");
+    is(cs.getPropertyValue(prop),
+       "calc(15% + 3px) calc(30% + 5px), calc(10% + 6px) calc(4% + 9px)",
+       "property " + prop + ": interpolation that computes to calc()");
+    if (doesPropHaveDistanceComputation) {
+      check_distance(prop, "20% 40%, 8px 12px",
+                           "calc(3px + 15%) calc(5px + 30%), calc(6px + 10%) calc(9px + 4%)",
+                           "12px 20px, 40% 16%");
+    }
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, "calc(20% + 40px) calc(40px + 40%), 8px 12%, calc(20px + 12%) calc(24px + 8%)", "");
+    is(cs.getPropertyValue(prop),
+       "calc(20% + 40px) calc(40% + 40px), 8px 12%, calc(12% + 20px) calc(8% + 24px)",
+       "property " + prop + ": computed value before transition");
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, "12px 20%, calc(20%) calc(16px + 60%), calc(8px + 20%) calc(40px + 16%)", "");
+    is(cs.getPropertyValue(prop),
+        "calc(15% + 33px) calc(35% + 30px), calc(5% + 6px) calc(24% + 4px), calc(14% + 17px) calc(10% + 28px)",
+       "property " + prop + ": interpolation that computes to calc()");
+    if (doesPropHaveDistanceComputation) {
+      check_distance(prop, "calc(20% + 40px) calc(40px + 40%), 8px 12%, calc(20px + 12%) calc(24px + 8%)",
+                           "calc(33px + 15%) calc(30px + 35%), calc(6px + 5%) calc(4px + 24%), calc(17px + 14%) calc(28px + 10%)",
+                           "12px 20%, calc(20%) calc(16px + 60%), calc(8px + 20%) calc(40px + 16%)");
+    }
+  }
+}
+
+function test_transform_transition(prop) {
+  is(prop, "transform", "Unexpected transform property!  Test needs to be fixed");
+  var matrix_re = /^matrix\(([^,]*), ([^,]*), ([^,]*), ([^,]*), ([^,]*), ([^,]*)\)$/;
+  for (let i in transformTests) {
+    var test = transformTests[i];
+    if (!("expected" in test)) {
+      var v = test.expected_uncomputed;
+      if (v.match(matrix_re) && !test.force_compute) {
+        test.expected = v;
+      } else {
+        test.expected = computeMatrix(v);
+      }
+    }
+  }
+
+  for (let i in transformTests) {
+    var test = transformTests[i];
+    div.style.setProperty("transition-property", "none", "");
+    div.style.setProperty(prop, test.start, "");
+    cs.getPropertyValue(prop);
+    div.style.setProperty("transition-property", prop, "");
+    div.style.setProperty(prop, test.end, "");
+    var actual = cs.getPropertyValue(prop);
+    if (!test.round_error_ok || actual == test.expected) {
+      // In most cases, we'll get an exact match, but in some cases
+      // there can be a small amount of rounding error.
+      is(actual, test.expected,
+         "interpolation of transitions: " + test.start + " to " + test.end);
+    } else {
+      function s(mat) {
+        return mat.match(matrix_re).slice(1,7);
+      }
+      var pass = true;
+      var actual_split = s(actual);
+      var expected_split = s(test.expected);
+      for (let j = 0; j < 6; ++j) {
+        // Allow differences of 1 at the sixth decimal place, and allow
+        // a drop extra for floating point error from the subtraction.
+        if (Math.abs(Number(actual_split[j]) - Number(expected_split[j])) >
+              0.0000011) {
+          pass = false;
+        }
+      }
+      ok(pass,
+         "interpolation of transitions: " + test.start + " to " + test.end +
+         ": " + actual + " should approximately equal " + test.expected);
+    }
+  }
+
+  // FIXME: should perhaps test that no clamping occurs
+
+  runOMTATest(runAsyncTests, SimpleTest.finish);
+}
+
+function test_rotate_transition(prop) {
+  // One value: <angle>
+  test_angle_transition(prop);
+
+  // With axis: <number> <number> <number> <angle>
+  //
+  // We don't test for interpolation of the numbers here since it's quite
+  // complicated and this is tested by the web-platform tests for this property.
+  // Now that we have web-platform tests for animation properties the main
+  // purpose of the tests in this file is to check that transitions run on the
+  // properties we expect them to.
+  div.style.transitionProperty = 'none';
+  div.style[prop] = '0 1 0 45deg';
+  is(cs[prop], 'y 45deg',
+     `rotate property ${prop}: computed value before transition`);
+  div.style.transitionProperty = prop;
+  div.style[prop] = '0 1 0 145deg';
+  is(cs[prop], 'y 70deg',
+     `rotate property ${prop}: interpolation of angles`);
+  check_distance(prop, '0 1 0 45deg', '0 1 0 70deg', '0 1 0 145deg');
+}
+
+function test_scale_transition(prop) {
+  // One value: <number>
+  test_number_transition(prop);
+
+  // Two values: <number> <number>
+  div.style.transitionProperty = 'none';
+  div.style[prop] = '10 20';
+  is(cs[prop], '10 20',
+     `number property ${prop}: computed value before transition`);
+  div.style.transitionProperty = prop;
+  div.style[prop] = '50 60';
+  is(cs[prop], '20 30', `number property ${prop}: interpolation of numbers`);
+  check_distance(prop, '10 20', '20 30', '50 60');
+
+  // Three values: <number> <number> <number>
+  div.style.transitionProperty = 'none';
+  div.style[prop] = '10 20 30';
+  is(cs[prop], '10 20 30',
+     `number property ${prop}: computed value before transition`);
+  div.style.transitionProperty = prop;
+  div.style[prop] = '50 60 70';
+  is(cs[prop], '20 30 40', `number property ${prop}: interpolation of numbers`);
+  check_distance(prop, '10 20 30', '20 30 40', '50 60 70');
+}
+
+function test_translate_transition(prop) {
+  // One value: <length-percentage>
+  test_length_transition(prop);
+  test_length_unclamped(prop);
+  test_percent_transition(prop);
+  test_percent_unclamped(prop);
+  test_calc_wrapped_calc_transition(prop);
+
+  // Two values: <length-percentage> <length-percentage>
+  // Note: Cannot use test_length_percent_pair_transition(prop) because we
+  // don't resolve the percentage.
+  test_length_pair_transition(prop);
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "4px 50%", "");
+  is(cs.getPropertyValue(prop), "4px 50%",
+    `length-valued property ${prop}: computed value before transition`);
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "12px 70%", "");
+  is(cs.getPropertyValue(prop), "6px 55%",
+    `length-valued property ${prop}: interpolation of lengths`);
+  check_distance(prop, "4px 50%", "6px 55%", "12px 70%");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "4px 50%", "");
+  is(cs.getPropertyValue(prop), "4px 50%",
+    `length-valued property ${prop}: computed value before transition`);
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "20% 20px", "");
+  is(cs.getPropertyValue(prop), "calc(5% + 3px) calc(37.5% + 5px)",
+    `length-valued property ${prop}: interpolation of lengths`);
+  check_distance(prop, "4px 50%", "calc(5% + 3px) calc(37.5% + 5px)",
+                 "20% 20px");
+  // We can't use test_length_percent_pair_unclamped here since
+  // it assumes that "0px 0px" is serialized as "0px 0px" but
+  // translate should serialize it as "0px".
+
+  // Three values: <length-percentage> <length-percentage> <length>
+  div.style.transitionProperty = 'none';
+  div.style[prop] = '10px 200% 30px';
+  is(cs[prop], '10px 200% 30px',
+     `translate property ${prop}: computed value before transition`);
+  div.style.transitionProperty = prop;
+  div.style[prop] = '50px 600% 70px';
+  is(cs[prop], '20px 300% 40px',
+     `translate property ${prop}: interpolation of three values`);
+  check_distance(prop, '10px 20px 30px', '20px 30px 40px', '50px 60px 70px');
+}
+
+function test_font_variations_transition(prop) {
+  is(prop, "font-variation-settings", "only designed for one property");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "\"wght\" 0, \"wdth\" 1.5", "");
+  // Note that computed-style returns the tags in sorted order.
+  is(cs.getPropertyValue(prop), "\"wdth\" 1.5, \"wght\" 0",
+     "font-variation-settings property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "\"wght\" 2, \"wdth\" 0.5", "");
+  is(cs.getPropertyValue(prop), "\"wdth\" 1.25, \"wght\" 0.5",
+     "font-variation-settings property " + prop + ": interpolation of font-variation-settings");
+  check_distance(prop, "\"wght\" 0, \"wdth\" 1.5", "\"wght\" 0.5, \"wdth\" 1.25", "\"wght\" 2, \"wdth\" 0.5");
+
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "\"wght\" 2, \"wdth\" 0.5", "");
+  is(cs.getPropertyValue(prop), "\"wdth\" 0.5, \"wght\" 2",
+     "font-variation-settings property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "\"wght\" 0, \"wdth\" 1.5", "");
+  is(cs.getPropertyValue(prop), "\"wdth\" 0.75, \"wght\" 1.5",
+     "font-variation-settings property " + prop + ": interpolation of font-variation-settings");
+  check_distance(prop, "\"wght\" 2, \"wdth\" 0.5", "\"wght\" 1.5, \"wdth\" 0.75", "\"wght\" 0, \"wdth\" 1.5");
+}
+
+function test_aspect_ratio_transition(prop) {
+  [
+    // No transition between auto and <ratio>.
+    { start: "auto", end: "1 / 1",
+      expected: "1 / 1" },
+    // No transition between auto && <ratio> and <ratio>.
+    { start: "auto 1 / 1", end: "1 / 1",
+      expected: "1 / 1" },
+    // No transition between auto && <ratio> and auto.
+    { start: "auto 1 / 1", end: "auto",
+      expected: "auto" },
+    { start: "1 / 2", end: "8 / 1",
+      expected: "1 / 1" },
+    { start: "auto 1 / 2", end: "auto 8 / 1",
+      expected: "auto 1 / 1" },
+  ].forEach(test => {
+    div.style.transitionProperty = 'none';
+    div.style[prop] = test.start;
+    is(cs[prop], test.start,
+       `aspect-ratio: computed value before transition`);
+    div.style.transitionProperty = prop;
+    div.style[prop] = test.end;
+    is(cs[prop], test.expected,
+       `aspect-ratio: interpolation of aspect-ratio`);
+    // We check distance only if there is a transition.
+    if (test.end != test.expected) {
+      check_distance(prop, test.start, test.expected, test.end);
+    }
+  });
+}
+
+function test_auto_with_length_transition(prop) {
+  div.style.setProperty("transition-property", "none", "");
+  div.style.setProperty(prop, "auto 4px", "");
+  is(cs.getPropertyValue(prop), "auto 4px",
+     "auto+length-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("transition-property", prop, "");
+  div.style.setProperty(prop, "auto 12px", "");
+  is(cs.getPropertyValue(prop), "auto 6px",
+     "auto+length-valued property " + prop + ": interpolation of lengths");
+  check_distance(prop, "auto 4px", "auto 6px", "auto 12px");
+}
+
+var OMTAdiv;
+var OMTACs;
+
+function prepareForOMTATest() {
+  if (OMTAdiv) {
+    OMTAdiv.remove();
+  }
+  OMTAdiv = document.createElement("div");
+  OMTAdiv.style = "height:100px; width:100px; background-color:blue;";
+  OMTAdiv.style.setProperty("transition-duration", "300s", "");
+  OMTAdiv.style.setProperty("transition-timing-function", "linear", "");
+  document.body.appendChild(OMTAdiv);
+
+  OMTACs = getComputedStyle(OMTAdiv, "");
+}
+
+function runAsyncTests() {
+  // These tests check the value on the compositor 2/3rds of the way through
+  // the transition.
+  // For the transform tests we simply compare the value on the compositor
+  // with the computed value, but for the opacity test we check the absolute
+  // value as well.
+  addAsyncTransformTests();
+  addAsyncOpacityTest();
+  addAsyncDelayTest();
+
+  runAllAsyncAnimTests().then(function() {
+    OMTAdiv.style.removeProperty("transition");
+    SimpleTest.finish();
+  });
+}
+
+function addAsyncTransformTests() {
+  transformTests.forEach(function(test) {
+    addAsyncAnimTest(function () { return runTransformTest(test); } );
+  });
+}
+
+async function runTransformTest(test) {
+  prepareForOMTATest();
+
+  OMTAdiv.style.setProperty("transition-property", "none", "");
+  OMTAdiv.style.setProperty("transform", test.start, "");
+  OMTACs.getPropertyValue("transform");
+  OMTAdiv.style.setProperty("transition-property", "transform", "");
+  OMTAdiv.style.setProperty("transform", test.end, "");
+  OMTACs.getPropertyValue("transform");
+  await waitForPaints();
+
+  // If the start value produced a non-invertible matrix the layer won't be
+  // created yet so we need to force an extra sample.
+  if (!isTransformInvertible(test.start)) {
+    winUtils.advanceTimeAndRefresh(100000);
+    await waitForPaints();
+    winUtils.advanceTimeAndRefresh(100000);
+    await waitForPaints();
+  } else {
+    winUtils.advanceTimeAndRefresh(200000);
+    await waitForPaints();
+  }
+
+  omta_is_approx(OMTAdiv, "transform", OMTACs.getPropertyValue("transform"),
+                 0.0001, RunningOn.Compositor,
+                 "compositor transform transition " +
+                 "from '" + test.start + "' " +
+                 "to '" + test.end + "' " +
+                 "at 2/3rds duration matches computed style");
+}
+
+function addAsyncOpacityTest() {
+  addAsyncAnimTest(async function() {
+    prepareForOMTATest();
+
+    OMTAdiv.style.setProperty("transition-property", "none", "");
+    OMTAdiv.style.setProperty("opacity", 0, "");
+    OMTACs.getPropertyValue("opacity");
+    OMTAdiv.style.setProperty("transition-property", "opacity", "");
+    OMTAdiv.style.setProperty("opacity", 1, "");
+    OMTACs.getPropertyValue("opacity");
+
+    await waitForPaints();
+
+    winUtils.advanceTimeAndRefresh(200000);
+
+    omta_is_approx(OMTAdiv, "opacity", 2/3, 0.00001, RunningOn.Compositor,
+                   "compositor opacity transition at 2/3rds duration");
+  });
+}
+
+function addAsyncDelayTest() {
+  addAsyncAnimTest(async function() {
+    prepareForOMTATest();
+
+    OMTAdiv.style.setProperty("transition-property", "none", "");
+    OMTAdiv.style.setProperty("transition-delay", "100s", "");
+    OMTAdiv.style.setProperty("transition-duration", "200s", "");
+    OMTAdiv.style.setProperty("transform", "", "");
+    OMTACs.getPropertyValue("transform");
+    OMTAdiv.style.setProperty("transition-property", "transform", "");
+    OMTAdiv.style.setProperty("transform", "translate(100px)", "");
+    OMTACs.getPropertyValue("transform");
+
+    winUtils.advanceTimeAndRefresh(200000);
+    await waitForPaints();
+
+    omta_is_approx(OMTAdiv, "transform", { tx: 50 }, 0.0001,
+                   RunningOn.Compositor,
+                   "compositor transform transition with delay at 1/2"
+                   + " duration");
+  });
+}
+
+function isTransformInvertible(transformStr) {
+  var computedStr = transformStrToComputedStr(transformStr);
+  if (!transformStr)
+    return false;
+  var matrix = convertTo3dMatrix(computedStr);
+  if (matrix === null)
+    return false;
+  return isInvertible(matrix);
+}
+
+function transformStrToComputedStr(transformStr) {
+  var div = document.createElement("div");
+  div.style.transform = transformStr;
+  return window.getComputedStyle(div).transform;
+}
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_replacement_on_busy_frame.html b/layout/style/test/test_transitions_replacement_on_busy_frame.html
new file mode 100644
index 0000000000..527c98ae85
--- /dev/null
+++ b/layout/style/test/test_transitions_replacement_on_busy_frame.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1167519
+-->
+<head>
+  <meta charset=utf-8>
+  <title>Test for bug 1167519</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style>
+    #target {
+      height: 100px;
+      width: 100px;
+      background: green;
+      transition: transform 100s linear;
+    }
+  </style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+const OMTAPrefKey = 'layers.offmainthreadcomposition.async-animations';
+const omtaEnabled =
+  SpecialPowers.DOMWindowUtils.layerManagerRemote &&
+  SpecialPowers.getBoolPref(OMTAPrefKey);
+
+window.addEventListener('load', async function() {
+  if (!omtaEnabled) {
+    ok(true, 'Skipping the test since OMTA is disabled');
+    SimpleTest.finish();
+    return;
+  }
+
+  const div = document.getElementById('target');
+
+  // Start first transition
+  div.style.transform = 'translateX(300px)';
+  const firstTransition = div.getAnimations()[0];
+
+  // Wait for first transition to start running on the main thread and
+  // compositor.
+  await firstTransition.ready;
+  await waitForPaints();
+
+  await new Promise(resolve => requestAnimationFrame(resolve));
+
+  // Start second transition
+  div.style.transform = 'translateX(600px)';
+  const secondTransition = div.getAnimations()[0];
+
+  const originalProperties = SpecialPowers.wrap(
+    secondTransition.effect
+  ).getProperties();
+  const previousPropertyValue = originalProperties[0].values[0].value;
+  const previousKeyframeValue = secondTransition.effect.getKeyframes()[0]
+    .transform;
+
+  // Tie up main thread for 300ms. In the meantime, the first transition
+  // will continue running on the compositor. If we don't update the start
+  // point of the second transition, it will appear to jump when it starts.
+  const startTime = performance.now();
+  while (performance.now() - startTime < 300);
+
+  // Ensure that our paint process has been done.
+  //
+  // Note that requestAnimationFrame is not suitable here since on Android
+  // there is a case where the paint process has not completed even when the
+  // requestAnimationFrame callback is run (and it is during the paint
+  // process that we update the transition start point).
+  await waitForPaints();
+
+  const updatedProperties = SpecialPowers.wrap(
+    secondTransition.effect
+  ).getProperties();
+  const currentPropertyValue = updatedProperties[0].values[0].value;
+  isnot(
+    currentPropertyValue,
+    previousPropertyValue,
+    'From value of transition is updated since the moment when ' +
+      'it was generated'
+  );
+  isnot(
+    secondTransition.effect.getKeyframes()[0].transform,
+    previousKeyframeValue,
+    'Keyframe value of transition is updated since the moment when ' +
+      'it was generated'
+  );
+  SimpleTest.finish();
+});
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_replacement_with_setKeyframes.html b/layout/style/test/test_transitions_replacement_with_setKeyframes.html
new file mode 100644
index 0000000000..85e9e40127
--- /dev/null
+++ b/layout/style/test/test_transitions_replacement_with_setKeyframes.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1292001
+-->
+<head>
+  <meta charset=utf-8>
+  <title>Test for bug 1292001</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/paint_listener.js"></script>
+  <script src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
+  <style>
+    #target {
+      height: 100px;
+      width: 100px;
+      background: green;
+      transition: transform 100s linear;
+    }
+  </style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+const OMTAPrefKey = 'layers.offmainthreadcomposition.async-animations';
+const omtaEnabled =
+  SpecialPowers.DOMWindowUtils.layerManagerRemote &&
+  SpecialPowers.getBoolPref(OMTAPrefKey);
+
+window.addEventListener('load', async function() {
+  if (!omtaEnabled) {
+    ok(true, 'Skipping the test since OMTA is disabled');
+    SimpleTest.finish();
+    return;
+  }
+
+  const div = document.getElementById('target');
+
+  // Start first transition
+  div.style.transform = 'translateX(300px)';
+  const firstTransition = div.getAnimations()[0];
+
+  // But then change its keyframes to something completely different.
+  firstTransition.effect.setKeyframes({ 'opacity': ['0', '1'] });
+
+  // Wait for the transition to start running on the main thread and
+  // compositor.
+  await firstTransition.ready;
+  await waitForPaints();
+  await new Promise(resolve => requestAnimationFrame(resolve));
+
+  // Start second transition
+  div.style.transform = 'translateX(600px)';
+  const secondTransition = div.getAnimations()[0];
+
+  const previousKeyframeValue = secondTransition.effect.getKeyframes()[0]
+    .transform;
+
+  // Tie up main thread for 300ms. In the meantime, the first transition
+  // will continue running on the compositor. If we don't update the start
+  // point of the second transition, it will appear to jump when it starts.
+  const startTime = performance.now();
+  while (performance.now() - startTime < 300);
+
+  // Ensure that our paint process has been done.
+  //
+  // (See explanation in test_transitions_replacement_on_busy_frame.html for
+  // why we don't use requestAnimationFrame here.)
+  await waitForPaints();
+
+  // Now check that the keyframes are NOT updated.
+  is(
+    secondTransition.effect.getKeyframes()[0].transform,
+    previousKeyframeValue,
+    'Keyframe value of transition is NOT updated since the moment when ' +
+      'it was generated'
+  );
+
+  SimpleTest.finish();
+});
+
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_transitions_step_functions.html b/layout/style/test/test_transitions_step_functions.html
new file mode 100644
index 0000000000..c0205a8d2f
--- /dev/null
+++ b/layout/style/test/test_transitions_step_functions.html
@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=435441
+-->
+<head>
+  <title>Test for Bug 435441</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript" src="animation_utils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+  p.transition {
+    transition: margin-top 100s linear;
+  }
+
+  </style>
+</head>
+<body>
+<div id="display">
+
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for transition step functions **/
+
+var display = document.getElementById("display");
+
+function run_test(tf, percent, value)
+{
+  var p = document.createElement("p");
+  p.className = "transition";
+  p.style.marginTop = "0px";
+  // be this percent of the way through a 100s transition
+  p.style.transitionDelay = (percent * -100) + "s";
+  p.style.transitionTimingFunction = tf;
+  display.appendChild(p);
+  var cs = getComputedStyle(p, "");
+  var flush1 = cs.marginTop;
+
+  p.style.marginTop = "1000px";
+  var result = px_to_num(cs.marginTop) / 1000
+
+  is(result, value, 100 * percent + "% of the way through " + tf);
+
+  display.removeChild(p);
+}
+
+run_test("step-start", 0, 1);
+run_test("step-start", 0.001, 1);
+run_test("step-start", 0.999, 1);
+run_test("step-start", 1, 1);
+run_test("step-end", 0, 0);
+run_test("step-end", 0.001, 0);
+run_test("step-end", 0.999, 0);
+run_test("step-end", 1, 1);
+
+run_test("steps(2)", 0.00, 0.0);
+run_test("steps(2)", 0.49, 0.0);
+run_test("steps(2)", 0.50, 0.5);
+run_test("steps(2)", 0.99, 0.5);
+run_test("steps(2)", 1.00, 1.0);
+
+run_test("steps(2, end)", 0.00, 0.0);
+run_test("steps(2, end)", 0.49, 0.0);
+run_test("steps(2, end)", 0.50, 0.5);
+run_test("steps(2, end)", 0.99, 0.5);
+run_test("steps(2, end)", 1.00, 1.0);
+
+run_test("steps(2, start)", 0.00, 0.5);
+run_test("steps(2, start)", 0.49, 0.5);
+run_test("steps(2, start)", 0.50, 1.0);
+run_test("steps(2, start)", 0.99, 1.0);
+run_test("steps(2, start)", 1.00, 1.0);
+
+run_test("steps(8,end)", 0.00, 0.0);
+run_test("steps(8,end)", 0.10, 0.0);
+run_test("steps(8,end)", 0.20, 0.125);
+run_test("steps(8,end)", 0.30, 0.25);
+run_test("steps(8,end)", 0.40, 0.375);
+run_test("steps(8,end)", 0.49, 0.375);
+run_test("steps(8,end)", 0.50, 0.5);
+run_test("steps(8,end)", 0.60, 0.5);
+run_test("steps(8,end)", 0.70, 0.625);
+run_test("steps(8,end)", 0.80, 0.75);
+run_test("steps(8,end)", 0.90, 0.875);
+run_test("steps(8,end)", 1.00, 1.0);
+
+// steps(_, jump-*)
+run_test("steps(2, jump-start)", 0.00, 0.5);
+run_test("steps(2, jump-start)", 0.49, 0.5);
+run_test("steps(2, jump-start)", 0.50, 1.0);
+run_test("steps(2, jump-start)", 0.99, 1.0);
+run_test("steps(2, jump-start)", 1.00, 1.0);
+
+run_test("steps(2, jump-end)", 0.00, 0.0);
+run_test("steps(2, jump-end)", 0.49, 0.0);
+run_test("steps(2, jump-end)", 0.50, 0.5);
+run_test("steps(2, jump-end)", 0.99, 0.5);
+run_test("steps(2, jump-end)", 1.00, 1.0);
+
+run_test("steps(1, jump-both)", 0.00, 0.5);
+run_test("steps(1, jump-both)", 0.10, 0.5);
+run_test("steps(1, jump-both)", 0.99, 0.5);
+run_test("steps(1, jump-both)", 1.00, 1.0);
+
+run_test("steps(3, jump-both)", 0.00, 0.25);
+run_test("steps(3, jump-both)", 0.33, 0.25);
+run_test("steps(3, jump-both)", 0.34, 0.5);
+run_test("steps(3, jump-both)", 0.66, 0.5);
+run_test("steps(3, jump-both)", 0.67, 0.75);
+run_test("steps(3, jump-both)", 0.99, 0.75);
+run_test("steps(3, jump-both)", 1.00, 1.0);
+
+run_test("steps(2, jump-none)", 0.00, 0.0);
+run_test("steps(2, jump-none)", 0.49, 0.0);
+run_test("steps(2, jump-none)", 0.50, 1.0);
+run_test("steps(2, jump-none)", 1.00, 1.0);
+
+run_test("steps(3, jump-none)", 0.00, 0.0);
+run_test("steps(3, jump-none)", 0.33, 0.0);
+run_test("steps(3, jump-none)", 0.34, 0.5);
+run_test("steps(3, jump-none)", 0.66, 0.5);
+run_test("steps(3, jump-none)", 0.67, 1.0);
+run_test("steps(3, jump-none)", 1.00, 1.0);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_unclosed_parentheses.html b/layout/style/test/test_unclosed_parentheses.html
new file mode 100644
index 0000000000..0aed6c3225
--- /dev/null
+++ b/layout/style/test/test_unclosed_parentheses.html
@@ -0,0 +1,273 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=575672
+-->
+<head>
+  <title>Test for Bug 575672</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <style type="text/css" id="style"></style>
+  <style type="text/css">
+    #display { position: relative }
+  </style>
+  <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=575672">Mozilla Bug 575672</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for unclosed parentheses in CSS values. **/
+
+// Each of the following semicolon-terminated @-rules should have a
+// single missing ')' in the value.
+var semirules = [
+  "@import (",
+  "@import url(",
+  "@import url(foo",
+  "@import url('foo'",
+  "@import foo(",
+];
+
+// Each of the following declarations should have a single missing ')'
+// in the value.
+var declarations = [
+  "content: url(",
+  "content: url( ",
+  "content: url(http://www.foo.com",
+  "content: url('http://www.foo.com'",
+  "content: foobar(",
+  "content: foobar( ",
+  "content: foobar(http://www.foo.com",
+  "content: foobar('http://www.foo.com'",
+  "color: url(",
+  "color: url( ",
+  "color: url(http://www.foo.com",
+  "color: url('http://www.foo.com'",
+  "background-image: linear-gradient(",
+  "background-image: linear-gradient( ",
+  "background-image: linear-gradient(to",
+  "background-image: linear-gradient(to top",
+  "background-image: linear-gradient(to top left",
+  "background-image: linear-gradient(to top left,",
+  "background-image: repeating-linear-gradient(to top left, red, blue",
+  "background-image: linear-gradient(to top left, red, yellow, blue",
+  "background-image: linear-gradient(to top left, red 1px, yellow 5px, blue 10px",
+  "background-image: linear-gradient(to top left, red, yellow, rgb(0, 0, 255)",
+  "background-image: linear-gradient(red, blue",
+  "background-image: linear-gradient(red, yellow, blue",
+  "background-image: linear-gradient(red 1px, yellow 5px, blue 10px",
+  "background-image: linear-gradient(red, yellow, rgb(0, 0, 255)",
+  "background-image: radial-gradient(",
+  "background-image: radial-gradient( ",
+  "background-image: radial-gradient(at",
+  "background-image: radial-gradient(at ",
+  "background-image: radial-gradient(at center",
+  "background-image: radial-gradient(at center,",
+  "background-image: radial-gradient(at center ",
+  "background-image: radial-gradient(closest-corner",
+  "background-image: radial-gradient(farthest-side ",
+  "background-image: radial-gradient(closest-corner ellipse",
+  "background-image: radial-gradient(farthest-side circle ",
+  "background-image: radial-gradient(closest-corner ellipse at",
+  "background-image: radial-gradient(farthest-side circle at ",
+  "background-image: radial-gradient(closest-corner ellipse at center",
+  "background-image: radial-gradient(farthest-side circle at center ",
+  "background-image: radial-gradient(50px",
+  "background-image: radial-gradient(50px,",
+  "background-image: radial-gradient(50px ",
+  "background-image: radial-gradient(50px at",
+  "background-image: radial-gradient(50px at ",
+  "background-image: radial-gradient(50px at center",
+  "background-image: radial-gradient(50px at center ",
+  "background-image: radial-gradient(50px at center,",
+  "background-image: radial-gradient(50px 50px",
+  "background-image: radial-gradient(50px 50px,",
+  "background-image: radial-gradient(50px 50px ",
+  "background-image: radial-gradient(50px 50px at",
+  "background-image: radial-gradient(50px 50px at ",
+  "background-image: radial-gradient(50px 50px at center",
+  "background-image: radial-gradient(50px 50px at center ",
+  "background-image: radial-gradient(50px 50px at center,",
+  "background-image: radial-gradient(50px 50px at center, red, blue",
+  "background-image: radial-gradient(ellipse at",
+  "background-image: radial-gradient(ellipse at ",
+  "background-image: radial-gradient(circle",
+  "background-image: radial-gradient(circle ",
+  "background-image: radial-gradient(circle closest-corner",
+  "background-image: radial-gradient(circle farthest-side ",
+  "background-image: radial-gradient(ellipse closest-corner at center",
+  "background-image: radial-gradient(ellipse farthest-side at center,",
+  "background-image: radial-gradient(circle at center",
+  "background-image: radial-gradient(circle at center,",
+  "background-image: radial-gradient(circle at center ",
+  "background-image: radial-gradient(circle at 50px center",
+  "background-image: radial-gradient(circle at 50px center ",
+  "background-image: radial-gradient(ellipse 50px",
+  "background-image: radial-gradient(ellipse 50px ",
+  "background-image: radial-gradient(ellipse 50px 50px",
+  "background-image: radial-gradient(ellipse 50px 50px,",
+  "background-image: radial-gradient(ellipse 50px 50px ",
+  "background-image: radial-gradient(ellipse 50px 50px at",
+  "background-image: radial-gradient(ellipse 50px 50px at ",
+  "background-image: radial-gradient(ellipse 50px 50px at center",
+  "background-image: radial-gradient(ellipse 50px 50px at center ",
+  "background-image: radial-gradient(ellipse 50px 50px at center,",
+  "background-image: radial-gradient(ellipse 50px 50px at center, red, blue",
+  "background-image: radial-gradient(at top left, red, blue",
+  "background-image: radial-gradient(farthest-corner, red, blue",
+  "background-image: radial-gradient(ellipse closest-corner, red, hsl(240, 50%, 50%)",
+  "background-image: radial-gradient(farthest-side circle, red, blue",
+  "background-image: repeating-radial-gradient(50%",
+  "background-image: repeating-radial-gradient(50% ",
+  "background-image: repeating-radial-gradient(50% 50%",
+  "background-image: repeating-radial-gradient(50% 50%,",
+  "background-image: repeating-radial-gradient(50% 50%, red, blue",
+  "background-image: repeating-radial-gradient(circle, red, blue",
+  "background-image: -moz-image-rect(",
+  "background-image: -moz-image-rect( ",
+  "background-image: -moz-image-rect(url(foo.jpg)",
+  "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10",
+  "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10 ",
+  "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10,",
+  "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10, ",
+  "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10, 10",
+  "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10, 10 ",
+  "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10, 10,",
+  "background-image: -moz-image-rect(url(foo.jpg), 2, 10, 10, 10, ",
+  "color: rgb(",
+  "color: rgb( ",
+  "color: rgb(128, 0",
+  "color: rgb(128, 0, 128",
+  "color: rgb(128, 0, 128, 128",
+  "color: rgba(",
+  "color: rgba( ",
+  "color: rgba(128, 0",
+  "color: rgba(128, 0, 128",
+  "color: rgba(128, 0, 128, 1",
+  "color: rgba(128, 0, 128, 1, 1",
+  "color: hsl(",
+  "color: hsl( ",
+  "color: hsl(240, 50%",
+  "color: hsl(240, 50%, 50%",
+  "color: hsl(240, 50%, 50%, 50%",
+  "color: hsla(",
+  "color: hsla( ",
+  "color: hsla(240, 50%",
+  "color: hsla(240, 50%, 50%",
+  "color: hsla(240, 50%, 50%, 1",
+  "color: hsla(240, 50%, 50%, 1, 1",
+  "content: counter(",
+  "content: counter( ",
+  "content: counter(foo",
+  "content: counter(foo ",
+  "content: counter(foo,",
+  "content: counter(foo, ",
+  "content: counter(foo, upper-roman",
+  "content: counter(foo, upper-roman ",
+  "content: counter(foo, upper-roman,",
+  "content: counter(foo, upper-roman, ",
+  "content: counters(",
+  "content: counters( ",
+  "content: counters(foo, ','",
+  "content: counters(foo, ',' ",
+  "content: counters(foo, ',',",
+  "content: counters(foo, ',', ",
+  "content: counters(foo, ',', upper-roman",
+  "content: counters(foo, ',', upper-roman ",
+  "content: counters(foo, ',', upper-roman,",
+  "content: counters(foo, ',', upper-roman, ",
+  "content: attr(",
+  "content: attr( ",
+  "content: attr(href",
+  "content: attr(href ",
+  "content: attr(html",
+  "content: attr(html ",
+  "content: attr(html|",
+  "content: attr(html| ",
+  "content: attr(html|href",
+  "content: attr(html|href ",
+  "content: attr(|",
+  "content: attr(| ",
+  "content: attr(|href",
+  "content: attr(|href ",
+  "transition-timing-function: cubic-bezier(",
+  "transition-timing-function: cubic-bezier( ",
+  "transition-timing-function: cubic-bezier(0, 0, 1",
+  "transition-timing-function: cubic-bezier(0, 0, 1 ",
+  "transition-timing-function: cubic-bezier(0, 0, 1,",
+  "transition-timing-function: cubic-bezier(0, 0, 1, ",
+  "transition-timing-function: cubic-bezier(0, 0, 1, 1",
+  "transition-timing-function: cubic-bezier(0, 0, 1, 1 ",
+  "transition-timing-function: cubic-bezier(0, 0, 1, 1,",
+  "transition-timing-function: cubic-bezier(0, 0, 1, 1, ",
+  "border-top-width: calc(",
+  "border-top-width: calc( ",
+  "border-top-width: calc(2em",
+  "border-top-width: calc(2em ",
+  "border-top-width: calc(2em +",
+  "border-top-width: calc(2em + ",
+  "border-top-width: calc(2em *",
+  "border-top-width: calc(2em * ",
+  "border-top-width: calc((2em)",
+  "border-top-width: calc((2em) ",
+];
+
+var selectors = [
+  ":not(",
+  ":not( ",
+  ":not(-",
+  ":not(- ",
+  ":not(>",
+  ":not(> ",
+  ":not(div p",
+  ":not(div p ",
+  ":not(div >",
+  ":not(div > ",
+];
+
+var textNode = document.createTextNode("");
+document.getElementById("style").appendChild(textNode);
+var cs = getComputedStyle(document.getElementById("display"), "");
+
+for (var i = 0; i < semirules.length; ++i) {
+  var sheet = semirules[i] +
+              "p#display { color: red } ) ; p { color: green; z-index: " + (i + 1) + " }";
+  textNode.data = sheet;
+  is(cs.color, "rgb(0, 128, 0)",
+     "color for rule '" + semirules[i] + "'");
+  is(cs.zIndex, String(i + 1),
+     "z-index for rule '" + semirules[i] + "'");
+}
+
+for (var i = 0; i < declarations.length; ++i) {
+  var sheet = "@namespace html url(http://www.w3.org/1999/xhtml);\n" +
+              "#display { color: green; " + declarations[i] +
+              " x x x x x x x ; color: red; ) ; z-index: " + (i + 1) + " }";
+  textNode.data = sheet;
+  is(cs.color, "rgb(0, 128, 0)",
+     "color for declaration '" + declarations[i] + "'");
+  is(cs.zIndex, String(i + 1),
+     "z-index for declaration '" + declarations[i] + "'");
+}
+
+for (var i = 0; i < selectors.length; ++i) {
+  var sheet = "@namespace html url(http://www.w3.org/1999/xhtml);\n" +
+              "#display { color: green } " +
+              selectors[i] + " x x x x x x x , #display { color: red } #display { color: red } ) , #display { color: red } " +
+              "#display { z-index: " + (i + 1) + " }";
+  textNode.data = sheet;
+  is(cs.color, "rgb(0, 128, 0)",
+     "color for selector '" + selectors[i] + "'");
+  is(cs.zIndex, String(i + 1),
+     "z-index for selector '" + selectors[i] + "'");
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_unicode_range_loading.html b/layout/style/test/test_unicode_range_loading.html
new file mode 100644
index 0000000000..43622e2ae5
--- /dev/null
+++ b/layout/style/test/test_unicode_range_loading.html
@@ -0,0 +1,366 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset=utf-8>
+  <title>unicode-range load tests using font loading api</title>
+  <link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-fonts-3/#unicode-range-desc" />
+  <link rel="help" href="http://dev.w3.org/csswg/css-font-loading/" />
+  <meta name="assert" content="unicode-range descriptor defines precisely which fonts should be loaded" />
+  <script type="text/javascript" src="/resources/testharness.js"></script>
+  <script type="text/javascript" src="/resources/testharnessreport.js"></script>
+  <style type="text/css">
+  </style>
+</head>
+<body>
+<div id="log"></div>
+<pre id="display"></pre>
+<style id="testfonts"></style>
+<style id="teststyle"></style>
+<div id="testcontent"></div>
+
+<script>
+
+const kSheetFonts = 1;
+const kSheetStyles = 2;
+
+const redSquDataURL = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='100%' height='100%'><rect fill='red' x='0' y='0' width='10' height='10'/></svg>";
+
+var unicodeRangeTests = [
+  { test: "simple load sanity check, unused fonts not loaded",
+    fonts: [{ family: "a", src: "markA", descriptors: { }, loaded: false}],
+    content: "AAA", style: { "font-family": "unused" } },
+  { test: "simple load sanity check, font for a used character loaded",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: true}],
+    content: "AAA" },
+  { test: "simple load sanity check, font for an unused character not loaded",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: false}],
+    content: "BBB" },
+  { test: "simple load sanity check, with two fonts only font for used character loaded A",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: true},
+            { family: "a", src: "markB", descriptors: { unicodeRange: "u+42" }, loaded: false}],
+    content: "AAA" },
+  { test: "simple load sanity check, with two fonts only font for used character loaded B",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: false},
+            { family: "a", src: "markB", descriptors: { unicodeRange: "u+42" }, loaded: true}],
+    content: "BBB" },
+  { test: "simple load sanity check, two fonts but neither supports characters used",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: false},
+            { family: "a", src: "markB", descriptors: { unicodeRange: "u+42" }, loaded: false}],
+    content: "CCC" },
+  { test: "simple load sanity check, two fonts and both are used",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: true},
+            { family: "a", src: "markB", descriptors: { unicodeRange: "u+42" }, loaded: true}],
+    content: "ABC" },
+  { test: "simple load sanity check, one with Han ranges",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+3???,u+5???,u+7???,u+8???" }, loaded: true},
+            { family: "a", src: "markB", descriptors: { unicodeRange: "u+42" }, loaded: false}],
+    content: "納豆嫌い" },
+  { test: "simple load sanity check, two fonts with different styles A",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: true},
+            { family: "a", src: "markB", descriptors: { weight: "bold", unicodeRange: "u+42" }, loaded: false}],
+    content: "ABC" },
+  { test: "simple load sanity check, two fonts with different styles B",
+    fonts: [{ family: "a", src: "markA", descriptors: { weight: "bold", unicodeRange: "u+41" }, loaded: false},
+            { family: "a", src: "markB", descriptors: { unicodeRange: "u+42" }, loaded: true}],
+    content: "ABC" },
+  { test: "multiple fonts with overlapping ranges, all with default ranges, only last one supports character used",
+    fonts: [{ family: "a", src: "markC", descriptors: { }, loaded: true},
+            { family: "a", src: "markA", descriptors: { }, loaded: true},
+            { family: "a", src: "markB", descriptors: { }, loaded: true}],
+    content: "CCC" },
+  { test: "multiple fonts with overlapping ranges, all with default ranges, first one supports character used",
+    fonts: [{ family: "a", src: "markB", descriptors: { }, loaded: false},
+            { family: "a", src: "markA", descriptors: { }, loaded: false},
+            { family: "a", src: "markC", descriptors: { }, loaded: true}],
+    content: "CCC" },
+  { test: "multiple fonts with overlapping ranges, one with default value in the fallback position",
+    fonts: [{ family: "a", src: "markC", descriptors: { }, loaded: true},
+            { family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: true},
+            { family: "a", src: "markB", descriptors: { unicodeRange: "u+42" }, loaded: true}],
+    content: "ABC" },
+  { test: "multiple fonts with overlapping ranges, one with default value in the primary use position, fallback to one",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: true},
+            { family: "a", src: "markB", descriptors: { unicodeRange: "u+42" }, loaded: false},
+            { family: "a", src: "markC", descriptors: { }, loaded: true}],
+    content: "AAA" },
+  { test: "multiple fonts with overlapping ranges, one with default value in the primary use position, fallback to two",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: true},
+            { family: "a", src: "markB", descriptors: { unicodeRange: "u+42" }, loaded: true},
+            { family: "a", src: "markC", descriptors: { }, loaded: true}],
+    content: "ABC" },
+  { test: "multiple fonts with overlapping ranges, one with default value in the primary use position, no fallback",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+41" }, loaded: false},
+            { family: "a", src: "markB", descriptors: { unicodeRange: "u+42" }, loaded: false},
+            { family: "a", src: "markC", descriptors: { }, loaded: true}],
+    content: "CCC" },
+  { test: "metrics only case, ex-sized image, single font with space in range",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+0??" }, loaded: true}],
+    content: "<img style='width: 2ex' src=\"" + redSquDataURL + "\">" },
+  { test: "metrics only case, ex-sized image, single font with space outside range",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+1??" }, loaded: false}],
+    content: "<img style='width: 2ex' src=\"" + redSquDataURL + "\">" },
+  { test: "metrics only case, ch-sized image, single font with space in range",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+0??" }, loaded: true}],
+    content: "<img style='width: 2ch' src=\"" + redSquDataURL + "\">" },
+  { test: "metrics only case, ch-sized image, single font with space outside range",
+    fonts: [{ family: "a", src: "markA", descriptors: { unicodeRange: "u+1??" }, loaded: false}],
+    content: "<img style='width: 2ch' src=\"" + redSquDataURL + "\">" },
+];
+
+// map font loading descriptor names to @font-face rule descriptor names
+var mapDescriptorNames = {
+  style: "font-style",
+  weight: "font-weight",
+  stretch: "font-stretch",
+  unicodeRange: "unicode-range",
+  variant: "font-variant",
+  featureSettings: "font-feature-settings"
+};
+
+var kBaseFontURL;
+if ("SpecialPowers" in window) {
+  kBaseFontURL = "";
+} else {
+  kBaseFontURL = "fonts/";
+}
+
+var mapFontURLs = {
+  markA: "url(" + kBaseFontURL + "markA.woff" + ")",
+  markB: "url(" + kBaseFontURL + "markB.woff" + ")",
+  markC: "url(" + kBaseFontURL + "markC.woff" + ")",
+  markD: "url(" + kBaseFontURL + "markD.woff" + ")",
+
+  /* twourl versions include a bogus url followed by a valid url */
+  markAtwourl: "url(" + kBaseFontURL + "bogus-markA.woff" + "), url(" + kBaseFontURL + "markA.woff" + ")",
+  markBtwourl: "url(" + kBaseFontURL + "bogus-markB.woff" + "), url(" + kBaseFontURL + "markB.woff" + ")",
+  markCtwourl: "url(" + kBaseFontURL + "bogus-markC.woff" + "), url(" + kBaseFontURL + "markC.woff" + ")",
+  markDtwourl: "url(" + kBaseFontURL + "bogus-markD.woff" + "), url(" + kBaseFontURL + "markD.woff" + ")",
+
+  /* localfont versions include a bogus local ref followed by a valid url */
+  markAlocalfirst: "local(bogus-markA), url(" + kBaseFontURL + "markA.woff" + ")",
+  markBlocalfirst: "local(bogus-markB), url(" + kBaseFontURL + "markB.woff" + ")",
+  markClocalfirst: "local(bogus-markC), url(" + kBaseFontURL + "markC.woff" + ")",
+  markDlocalfirst: "local(bogus-markD), url(" + kBaseFontURL + "markD.woff" + ")",
+};
+
+function familyName(name, i) {
+  return "test" + i + "-" + name;
+}
+
+function fontFaceRule(name, fontdata, ft) {
+  var desc = [];
+  desc.push("font-family: " + name);
+  var srckey = fontdata.src + ft;
+  desc.push("src: " + mapFontURLs[srckey]);
+  for (var d in fontdata.descriptors) {
+    desc.push(mapDescriptorNames[d] + ": " + fontdata.descriptors[d]);
+  }
+  return "@font-face { " + desc.join(";") + " }";
+}
+
+function clearRules(sheetIndex) {
+  var sheet = document.styleSheets[sheetIndex];
+  while(sheet.cssRules.length > 0) {
+    sheet.deleteRule(0);
+  }
+}
+
+function clearAllRulesAndFonts() {
+  clearRules(kSheetFonts);
+  clearRules(kSheetStyles);
+  document.fonts.clear();
+}
+
+function addStyleRulesAndText(testdata, i) {
+  // add style rules for testcontent
+  var sheet = document.styleSheets[kSheetStyles];
+  while(sheet.cssRules.length > 0) {
+    sheet.deleteRule(0);
+  }
+  var rule = [];
+  var family = familyName(testdata.fonts[0].family, i);
+  rule.push("#testcontent { font-family: " + family);
+  if ("style" in testdata) {
+    for (s in testdata.style) {
+      rule.push(s + ": " + testdata.style[s]);
+    }
+  }
+  rule.push("}");
+  sheet.insertRule(rule.join("; "), 0);
+
+  var content = document.getElementById("testcontent");
+  content.innerHTML = testdata.content;
+  content.offsetHeight;
+}
+
+// work arounds
+function getFonts() {
+  if ("forEach" in document.fonts) {
+    return document.fonts;
+  }
+  return Array.from(document.fonts);
+}
+
+function getSize() {
+  if ("size" in document.fonts) {
+    return document.fonts.size;
+  }
+  return getFonts().length;
+}
+
+function getReady() {
+  if (typeof(document.fonts.ready) == "function") {
+    return document.fonts.ready();
+  }
+  return document.fonts.ready;
+}
+
+function setTimeoutPromise(aDelay) {
+  return new Promise(function(aResolve, aReject) {
+    setTimeout(aResolve, aDelay);
+  });
+}
+
+function addFontFaceRules(testdata, i, ft) {
+  var sheet = document.styleSheets[kSheetFonts];
+  var createdFonts = [];
+  testdata.fonts.forEach(function(f) {
+    var n = sheet.cssRules.length;
+    var fn = familyName(f.family, i);
+    sheet.insertRule(fontFaceRule(fn, f, ft), n);
+    var newfont;
+    var fonts = getFonts();
+    try {
+      fonts.forEach(function(font) { newfont = font; });
+      createdFonts.push({family: fn, data: f, font: newfont});
+    } catch (e) {
+      console.log(e);
+    }
+  });
+  return createdFonts;
+}
+
+function addDocumentFonts(testdata, i, ft) {
+  var createdFonts = [];
+  testdata.fonts.forEach(function(fd) {
+    var fn = familyName(fd.family, i);
+    var srckey = fd.src + ft;
+    var f = new FontFace(fn, mapFontURLs[srckey], fd.descriptors);
+    document.fonts.add(f);
+    createdFonts.push({family: fn, data: fd, font: f});
+  });
+  return createdFonts;
+}
+
+var q = Promise.resolve();
+
+function runTests() {
+  function setupTests() {
+    setup({explicit_done: true});
+  }
+
+  function checkFontsBeforeLoad(name, testdata, fd) {
+    test(function() {
+      assert_equals(document.fonts.status, "loaded", "before initializing test, no fonts should be loading - found: " + document.fonts.status);
+      var size = getSize();
+      assert_equals(size, testdata.fonts.length,
+                    "fonts where not added to the font set object");
+      var i = 0;
+      fonts = getFonts();
+      fonts.forEach(function(ff) {
+        assert_equals(ff.status, "unloaded", "added fonts should be in unloaded state");
+      });
+    }, name + " before load");
+  }
+
+  function checkFontsAfterLoad(name, testdata, fd, afterTimeout) {
+    test(function() {
+      assert_equals(document.fonts.status, "loaded", "after ready promise resolved, no fonts should be loading");
+      var i = 0;
+      fd.forEach(function(f) {
+        assert_true(f.font instanceof FontFace, "font needs to be an instance of FontFace object");
+        if (f.data.loaded) {
+          assert_equals(f.font.status, "loaded", "font not loaded - font " + i + " " + f.data.src + " "
+                        + JSON.stringify(f.data.descriptors) + " for content " + testdata.content);
+        } else {
+          assert_equals(f.font.status, "unloaded", "font loaded - font " + i + " " + f.data.src + " "
+                        + JSON.stringify(f.data.descriptors) + " for content " + testdata.content);
+        }
+        i++;
+      });
+    }, name + " after load" + (afterTimeout ? " and timeout" : ""));
+  }
+
+  function testFontLoads(testdata, i, name, fd) {
+    checkFontsBeforeLoad(name, testdata, fd);
+    addStyleRulesAndText(testdata, i);
+
+    var ready = getReady();
+    return ready.then(function() {
+      checkFontsAfterLoad(name, testdata, fd, false);
+    }).then(function() {
+      return setTimeoutPromise(0).then(function() {
+        checkFontsAfterLoad(name, testdata, fd, true);
+      });
+    }).then(function() {
+      var ar = getReady();
+      return ar.then(function() {
+        test(function() {
+          assert_equals(document.fonts.status, "loaded", "after ready promise fulfilled once, fontset should not be loading");
+          var fonts = getFonts();
+          fonts.forEach(function(f) {
+            assert_not_equals(f.status, "loading", "after ready promise fulfilled once, no font should be loading");
+          });
+        }, name + " test done check");
+      });
+    }).then(function() {
+      clearAllRulesAndFonts();
+    });
+  }
+
+  function testUnicodeRangeFontFace(testdata, i, ft) {
+    var name = "TEST " + i + " " + testdata.test + " (@font-face rules)" + (ft != "" ? " " + ft : ft);
+
+    var fd = addFontFaceRules(testdata, i, ft);
+    return testFontLoads(testdata, i, name, fd);
+  }
+
+  function testUnicodeRangeDocumentFonts(testdata, i, ft) {
+    var name = "TEST " + i + " " + testdata.test + " (document.fonts)" + (ft != "" ? " " + ft : ft);
+
+    var fd = addDocumentFonts(testdata, i, ft);
+    return testFontLoads(testdata, i, name, fd);
+  }
+
+  q = q.then(function() {
+    setupTests();
+  });
+
+  var fontTypes = ["", "twourl", "localfirst"];
+
+  unicodeRangeTests.forEach(function(testdata, i) {
+    fontTypes.forEach(function(ft) {
+      q = q.then(function() {
+        return testUnicodeRangeFontFace(testdata, i, ft);
+      }).then(function() {
+        return testUnicodeRangeDocumentFonts(testdata, i, ft);
+      });
+    });
+  });
+
+  q = q.then(function() {
+    done();
+  });
+}
+
+if ("fonts" in document) {
+  runTests();
+} else {
+  test(function() {
+    assert_true(true, "CSS Font Loading API is not enabled.");
+  }, "CSS Font Loading API is not enabled");
+}
+</script>
+</body>
+</html>
diff --git a/layout/style/test/test_units_angle.html b/layout/style/test/test_units_angle.html
new file mode 100644
index 0000000000..269bdc11b9
--- /dev/null
+++ b/layout/style/test/test_units_angle.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for serialization and equivalence of angle units</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=">Mozilla Bug </a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for serialization and equivalence of angle units **/
+
+/**
+ * We test that for each of the following:
+ *  + they reserialize to exactly what is given
+ *  + if a mapping is provided, they compute to the same result as the mapping
+ */
+var tests = {
+  "45deg": "50grad",
+  "150grad": "135deg",
+  "1rad": null
+};
+
+var p = document.getElementById("display");
+
+for (var test in tests) {
+  p.setAttribute("style", "-moz-transform: rotate(" + test + ")");
+  is(p.style.getPropertyValue("-moz-transform"), "rotate(" + test + ")",
+     test + " serializes to exactly itself");
+  // We can't test any equivalence since we don't have any properties
+  // with angle values that we compute.  (-moz-transform doesn't help.)
+/*
+  var equiv = tests[test];
+  if (equiv) {
+    var cm1 = getComputedStyle(p, "").elevation;
+    p.style.elevation = equiv;
+    var cm2 = getComputedStyle(p, "").elevation;
+    is(cm1, cm2, test + " should compute to the same as " + equiv);
+  }
+*/
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_units_frequency.html b/layout/style/test/test_units_frequency.html
new file mode 100644
index 0000000000..cb5c0de20d
--- /dev/null
+++ b/layout/style/test/test_units_frequency.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for serialization and equivalence of frequency units</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=">Mozilla Bug </a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for serialization and equivalence of frequency units **/
+
+/**
+ * We test that for each of the following:
+ *  + they reserialize to exactly what is given
+ *  + if a mapping is provided, they compute to the same result as the mapping
+ */
+var tests = {
+  "7kHz": "7000Hz",
+  "300Hz": "0.3khz"
+};
+
+var p = document.getElementById("display");
+
+for (var test in tests) {
+  // We can't test this because we no longer support any properties
+  // with frequency values.
+  todo(false, "no tests to run, for now");
+  /*
+  p.setAttribute("style", "pitch: " + test);
+  is(p.style.getPropertyValue("pitch"), test,
+     test + " serializes to exactly itself");
+  */
+  // We can't test any equivalence since we don't have any properties
+  // with frequency values that we compute.
+/*
+  var equiv = tests[test];
+  if (equiv) {
+    var cm1 = getComputedStyle(p, "").pitch;
+    p.style.pitch = equiv;
+    var cm2 = getComputedStyle(p, "").pitch;
+    is(cm1, cm2, test + " should compute to the same as " + equiv);
+  }
+*/
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_units_length.html b/layout/style/test/test_units_length.html
new file mode 100644
index 0000000000..623f13df33
--- /dev/null
+++ b/layout/style/test/test_units_length.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for serialization and equivalence of length units</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=">Mozilla Bug </a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for serialization and equivalence of length units **/
+
+/**
+ * We test that for each of the following:
+ *  + they reserialize to exactly what is given
+ *  + if a mapping is provided, they compute to the same result as the mapping
+ */
+var tests = {
+  "1in": "72pt",
+  "20mm": "2cm",
+  "2.54cm": "1in",
+  "36pt": "0.5in",
+  "4pc": "48pt",
+  "1em": null,
+  "3ex": null,
+  "57px": null,
+  "5rem": null
+};
+
+var p = document.getElementById("display");
+
+for (var test in tests) {
+  p.setAttribute("style", "margin-left: " + test);
+  is(p.style.getPropertyValue("margin-left"), test,
+     test + " serializes to exactly itself");
+  var equiv = tests[test];
+  if (equiv) {
+    var cm1 = getComputedStyle(p, "").marginLeft;
+    p.style.marginLeft = equiv;
+    var cm2 = getComputedStyle(p, "").marginLeft;
+
+    ok(Math.abs(parseFloat(cm1, 10) - parseFloat(cm2, 10)) <= 0.0001, test + " should compute to the same as " + equiv + ", modulo floating point math error");
+  }
+}
+
+// Bug 393910
+p.setAttribute("style", "margin-left: 0");
+is(p.style.getPropertyValue("margin-left"), "0px",
+  "0 serializes to 0px");
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_units_time.html b/layout/style/test/test_units_time.html
new file mode 100644
index 0000000000..16211c0207
--- /dev/null
+++ b/layout/style/test/test_units_time.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for serialization and equivalence of time units</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=">Mozilla Bug </a>
+<p id="display"></p>
+<div id="content" style="display: none">
+  
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for serialization and equivalence of time units **/
+
+/**
+ * We test that for each of the following:
+ *  + they reserialize to exactly what is given
+ *  + if a mapping is provided, they compute to the same result as the mapping
+ */
+var tests = {
+  "3s": "3000ms",
+  "500ms": "0.5s"
+};
+
+var p = document.getElementById("display");
+
+for (var test in tests) {
+  p.setAttribute("style", "transition-duration: " + test);
+  is(p.style.getPropertyValue("transition-duration"), test,
+     test + " serializes to exactly itself");
+  var equiv = tests[test];
+  if (equiv) {
+    var cm1 = getComputedStyle(p, "").transitionDuration;
+    p.style.transitionDuration = equiv;
+    var cm2 = getComputedStyle(p, "").transitionDuration;
+    is(cm1, cm2, test + " should compute to the same as " + equiv);
+  }
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_use_counters.html b/layout/style/test/test_use_counters.html
new file mode 100644
index 0000000000..6e676b5344
--- /dev/null
+++ b/layout/style/test/test_use_counters.html
@@ -0,0 +1,167 @@
+<!doctype html>
+<title>Test for Bug 1425700: CSS properties use-counters</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<body>
+<iframe id="iframe"></iframe>
+<iframe id="second-iframe"></iframe>
+<script>
+const iframe = document.getElementById("iframe");
+
+function iframe_reload(frame = iframe) {
+  return new Promise(resolve => {
+    frame.addEventListener("load", _ => resolve());
+    frame.contentWindow.location.reload();
+  });
+}
+
+function assert_recorded(win, recorded, properties, desc) {
+  const utils = SpecialPowers.getDOMWindowUtils(win);
+  isnot(properties.length, 0, "Sanity check");
+  for (const prop of properties) {
+    try {
+      is(utils.isCssPropertyRecordedInUseCounter(prop), recorded,
+         `${desc} - ${prop}`)
+    } catch(ex) {
+      ok(false, "Threw: " + prop);
+    }
+  }
+}
+
+// NOTE(emilio): This is no longer meaningful now we always record in the style
+// system itself, which is what this tests. But we could conceivably change
+// it so it doesn't hurt.
+add_task(async () => {
+  await SpecialPowers.pushPrefEnv({
+    "set": [
+      ["layout.css.use-counters.enabled", true],
+      ["layout.css.use-counters-unimplemented.enabled", true]
+    ]
+  });
+});
+
+// TODO(emilio): Make work (and test) inline style and maybe even CSSOM and
+// such?
+//
+// Make sure that something on the lines of the following passes:
+//
+//   element.style.webkitTransform = "rotate(1deg)"
+//   assert_recorded(true, ["-webkit-transform"]);
+//   assert_recorded(false, ["transform"]);
+//
+const IMPLEMENTED_PROPERTIES = {
+  description: "unimplemented properties",
+  css: `
+    * {
+      grid-gap: 1px; /* shorthand alias */
+      -webkit-background-size: 100px 100px; /* longhand alias */
+      transform-origin: top left; /* longhand */
+      background: green; /* shorthand */
+    }
+  `,
+  recorded: [
+    "grid-gap",
+    "-webkit-background-size",
+    "transform-origin",
+    "background",
+  ],
+  // Should only record the aliases, not the non-aliased property.
+  // Should only record shorthands, not the longhands it expands to.
+  not_recorded: [
+    "gap",
+    "background-size",
+    "-moz-transform-origin",
+    "-webkit-transform-origin",
+    "background-color",
+  ],
+};
+
+const UNIMPLEMENTED_PROPERTIES = {
+  description: "unimplemented properties",
+  css: `
+    * {
+      grid-gap: 1px; /* shorthand alias */
+      -webkit-background-size: 100px 100px; /* longhand alias */
+      transform-origin: top left; /* longhand */
+      background: green; /* shorthand */
+      -webkit-font-smoothing: auto; /* counted unknown */
+      zoom: 0.5; /* counted unknown */
+    }
+  `,
+  recorded: [
+    "grid-gap",
+    "-webkit-background-size",
+    "transform-origin",
+    "background",
+    "-webkit-font-smoothing",
+    "zoom",
+  ],
+  not_recorded: [
+    "size",
+    "speak",
+  ],
+};
+
+// Test on regular <style> elements.
+add_task(async () => {
+  for (let test of [IMPLEMENTED_PROPERTIES, UNIMPLEMENTED_PROPERTIES]) {
+    await iframe_reload();
+
+    const win = iframe.contentWindow;
+    const style = document.createElement('style');
+    style.textContent = test.css;
+
+    iframe.contentDocument.body.appendChild(style);
+
+    assert_recorded(win, true, test.recorded, `Test ${test.description} in <style> elements`);
+    assert_recorded(win, false, test.not_recorded, `Test ${test.description} in <style> elements`);
+  }
+});
+
+// Test on constructable stylesheets.
+add_task(async () => {
+  await SpecialPowers.pushPrefEnv({
+    "set": [
+      ["layout.css.constructable-stylesheets.enabled", true]
+    ]
+  });
+
+  for (let test of [IMPLEMENTED_PROPERTIES, UNIMPLEMENTED_PROPERTIES]) {
+    for (let method of ["replace", "replaceSync"]) {
+      await iframe_reload();
+      const win = iframe.contentWindow;
+
+      const sheet = new win.CSSStyleSheet();
+      await sheet[method](test.css);
+
+      assert_recorded(win, true, test.recorded, `Test ${test.description} in constructed sheet`);
+      assert_recorded(win, false, test.not_recorded, `Test ${test.description} in constructed sheet`);
+    }
+  }
+});
+
+add_task(async () => {
+  // Test for <link rel="stylesheet">. One iteration for the uncached version, one for the cached one.
+  for (let test of [IMPLEMENTED_PROPERTIES, UNIMPLEMENTED_PROPERTIES]) {
+    const uri = "data:text/css," + encodeURIComponent(test.css);
+    for (let frame of [iframe, document.getElementById("second-iframe")]) {
+      await iframe_reload(frame);
+      const win = frame.contentWindow;
+      const doc = frame.contentDocument;
+
+      const link = doc.createElement("link");
+      link.rel = "stylesheet";
+      const linkLoaded = new Promise(resolve => {
+        link.onload = resolve;
+      });
+      link.href = uri;
+      doc.body.appendChild(link);
+      await linkLoaded;
+      assert_recorded(win, true, test.recorded, `Test ${test.description} in <link> ${frame.id}`);
+      assert_recorded(win, false, test.not_recorded, `Test ${test.description} in <link> ${frame.id}`);
+    }
+  }
+});
+
+</script>
+</body>
diff --git a/layout/style/test/test_user_sheet_shadow_dom.html b/layout/style/test/test_user_sheet_shadow_dom.html
new file mode 100644
index 0000000000..cd7a44b308
--- /dev/null
+++ b/layout/style/test/test_user_sheet_shadow_dom.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<title>Test for bug 1576229 - Nodes in Shadow DOM react properly to dynamic changes in user sheets</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css">
+<div></div>
+<span id="host" style="display: block"></span>
+<script>
+const gIOService = SpecialPowers.Cc["@mozilla.org/network/io-service;1"]
+  .getService(SpecialPowers.Ci.nsIIOService)
+
+const gSSService = SpecialPowers.Cc["@mozilla.org/content/style-sheet-service;1"]
+  .getService(SpecialPowers.Ci.nsIStyleSheetService);
+
+const windowUtils = SpecialPowers.getDOMWindowUtils(window);
+
+function loadUserSheet(style) {
+  const uri = gIOService.newURI("data:text/css," + style);
+  windowUtils.loadSheet(uri, windowUtils.USER_SHEET);
+}
+
+SimpleTest.waitForExplicitFinish();
+
+onload = function() {
+  loadUserSheet(`
+    div {
+      width: 100px;
+      height: 100px;
+      background-color: red;
+    }
+    .foo {
+      background-color: green;
+    }
+  `);
+  let host = document.querySelector("#host");
+  host.attachShadow({ mode: "open" }).innerHTML = `
+    <div></div>
+  `;
+  let light = document.querySelector('div');
+  let shadow = host.shadowRoot.querySelector('div');
+  is(getComputedStyle(light).backgroundColor, "rgb(255, 0, 0)", "User sheet works in light DOM");
+  is(getComputedStyle(shadow).backgroundColor, "rgb(255, 0, 0)", "User sheet works in shadow DOM");
+  light.classList.add("foo");
+  shadow.classList.add("foo");
+  is(getComputedStyle(light).backgroundColor, "rgb(0, 128, 0)", "Dynamic change for user sheet works in light DOM");
+  is(getComputedStyle(shadow).backgroundColor, "rgb(0, 128, 0)", "Dynamic change for user sheet works in shadow DOM");
+  SimpleTest.finish();
+}
+</script>
diff --git a/layout/style/test/test_value_cloning.html b/layout/style/test/test_value_cloning.html
new file mode 100644
index 0000000000..fb1ed83ee9
--- /dev/null
+++ b/layout/style/test/test_value_cloning.html
@@ -0,0 +1,184 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=375363
+-->
+<head>
+  <title>Test for cloning of CSS property values (including 'inherit', 'initial' and 'unset')</title>
+  <script 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>
+<p id="display"><iframe id="iframe" src="about:blank"></iframe></p>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+const { AppConstants } = SpecialPowers.ChromeUtils.import(
+  "resource://gre/modules/AppConstants.jsm"
+);
+
+/** Test for cloning of CSS property values (including 'inherit', 'initial' and 'unset') **/
+var test_queue = [];
+var iframe = document.getElementById("iframe");
+
+SimpleTest.waitForExplicitFinish();
+
+for (var prop in gCSSProperties) {
+  let info = gCSSProperties[prop];
+
+  test_queue.push({ prop: prop, value: "inherit",
+                    inherited_value: info.initial_values[0] });
+  test_queue.push({ prop: prop, value: "inherit",
+                    inherited_value: info.other_values[0] });
+  test_queue.push({ prop: prop, value: "initial" });
+  if (info.inherited) {
+    test_queue.push({ prop: prop, value: "unset",
+                      inherited_value: info.initial_values[0] });
+    test_queue.push({ prop: prop, value: "unset",
+                      inherited_value: info.other_values[0] });
+  } else {
+    test_queue.push({ prop: prop, value: "unset" });
+  }
+  for (let idx in info.initial_values) {
+    test_queue.push({ prop: prop, value: info.initial_values[idx] });
+  }
+  for (let idx in info.other_values) {
+    test_queue.push({ prop: prop, value: info.other_values[idx] });
+  }
+}
+
+test_queue.reverse();
+
+doTest();
+
+function doTest()
+{
+  var sheet_data = "";
+
+  for (let idx = 0; idx < test_queue.length; ++idx) {
+    var current_item = test_queue[idx];
+
+    let info = gCSSProperties[current_item.prop];
+
+    sheet_data += "#parent"+idx+", #test"+idx+" { ";
+    for (var prereq in info.prereqs) {
+      sheet_data += prereq + ": " + info.prereqs[prereq] + ";";
+    }
+    sheet_data += " }";
+
+    sheet_data += "#parent"+idx+" { ";
+    if ("inherited_value" in current_item) {
+      sheet_data += current_item.prop + ": " + current_item.inherited_value;
+    }
+    sheet_data += "}";
+
+    sheet_data += "#test"+idx+" { ";
+    sheet_data += current_item.prop + ": " + current_item.value;
+    sheet_data += "}";
+  }
+
+  var sheet_url = "data:text/css," + escape(sheet_data);
+
+  var doc_data =
+    "<!DOCTYPE HTML>\n" +
+    "<link rel='stylesheet' type='text/css' href='" + sheet_url + "'>\n" +
+    "<link rel='stylesheet' type='text/css' href='" + sheet_url + "'>\n" +
+    "<body>\n";
+
+
+  for (let idx = 0; idx < test_queue.length; ++idx) {
+    var current_item = test_queue[idx];
+
+    if ("inherited_value" in current_item) {
+      doc_data += "<span id='parent"+idx+"'>";
+    }
+    doc_data += "<span id='test"+idx+"'></span>";
+    if ("inherited_value" in current_item) {
+      doc_data += "</span>";
+    }
+  }
+
+  var doc_url = "data:text/html," + escape(doc_data);
+  iframe.onload = iframe_loaded;
+  iframe.src = doc_url;
+}
+
+function iframe_loaded(event)
+{
+  if (event.target != iframe)
+    return;
+
+  var start_ser = [];
+  var start_compute = [];
+  var test_cs = [];
+  var wrappedFrame = SpecialPowers.wrap(iframe);
+  var ifdoc = wrappedFrame.contentDocument;
+  var ifwin = wrappedFrame.contentWindow;
+
+  for (let idx = 0; idx < test_queue.length; ++idx) {
+    var current_item = test_queue[idx];
+    var info = gCSSProperties[current_item.prop];
+
+    var test = ifdoc.getElementById("test" + idx);
+    var cur_cs = ifwin.getComputedStyle(test);
+    test_cs.push(cur_cs);
+    var cur_ser = ifdoc.styleSheets[0].cssRules[3*idx+2].style.getPropertyValue(current_item.prop);
+    if (cur_ser == "") {
+      isnot(cur_ser, "",
+	    "serialization should be nonempty for " +
+	    current_item.prop + ": " + current_item.value);
+    }
+    start_ser.push(cur_ser);
+
+    var cur_compute = get_computed_value(cur_cs, current_item.prop);
+    if (cur_compute == "") {
+      isnot(cur_compute, "",
+            "computed value should be nonempty for " +
+            current_item.prop + ": " + current_item.value);
+    }
+    start_compute.push(cur_compute);
+  }
+
+  // In case the above access didn't force a clone already (though it
+  // currently does), clone the second style sheet's inner and then
+  // remove the first.
+  ifdoc.styleSheets[1].insertRule("#nonexistent { color: red }", 0);
+  var firstlink = ifdoc.getElementsByTagName("link")[0];
+  firstlink.remove();
+
+  // Force a flush
+  ifdoc.body.style.display="none";
+  var ow = ifdoc.body.offsetWidth;
+  ifdoc.body.style.display="";
+
+  for (let idx = 0; idx < test_queue.length; ++idx) {
+    var current_item = test_queue[idx];
+    var info = gCSSProperties[current_item.prop];
+
+    var end_ser =
+      ifdoc.styleSheets[0].cssRules[3*idx+3].style.getPropertyValue(current_item.prop);
+    is(end_ser, start_ser[idx],
+       "serialization should match when cloning " +
+       current_item.prop + ": " + current_item.value);
+
+    var end_compute = get_computed_value(test_cs[idx], current_item.prop);
+    // Output computed values only when the test failed.
+    // Computed values may be very long.
+    if (end_compute == start_compute[idx]) {
+      ok(true,
+         "computed values should match when cloning " +
+         current_item.prop + ": " + current_item.value);
+    } else {
+      is(end_compute, start_compute[idx],
+         "computed values should match when cloning " +
+         current_item.prop + ": " + current_item.value);
+    }
+  }
+
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_value_computation.html b/layout/style/test/test_value_computation.html
new file mode 100644
index 0000000000..df38a24b9b
--- /dev/null
+++ b/layout/style/test/test_value_computation.html
@@ -0,0 +1,236 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test for computation of values in property database</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="property_database.js"></script>
+  <style type="text/css" id="stylesheet"></style>
+  <style type="text/css">
+  /* For 'width', 'height', etc., need a constant size container. */
+  #display { width: 500px; height: 200px }
+  </style>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <script type="text/javascript">
+  SimpleTest.waitForExplicitFinish();
+  SimpleTest.requestLongerTimeout(2);
+
+  var load_count = 0;
+  function load_done() {
+    if (++load_count == 3)
+      run_tests();
+  }
+  </script>
+</head>
+<body>
+<iframe id="unstyledn" src="unstyled.xml" height="10" width="10" onload="load_done()"></iframe>
+<iframe id="unstyledf" src="unstyled-frame.xml" height="10" width="10" onload="load_done()"></iframe>
+<p id="display"><span><span id="elementf"></span></span></p>
+<div id="content" style="display: none">
+
+<div><span id="elementn"></span></div>
+
+  
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for computation of values in property database **/
+
+var gBadComputedNoFrame = {
+  // These are probably bogus tests...
+  "-moz-margin-end": [ "0%", "calc(0% + 0px)" ],
+  "-moz-margin-start": [ "0%", "calc(0% + 0px)" ],
+  "-moz-padding-end": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
+  "-moz-padding-start": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
+  "margin": [ "0% 0px 0em 0pt" ],
+  "margin-block-end": [ "0%", "calc(0% + 0px)" ],
+  "margin-block-start": [ "0%", "calc(0% + 0px)" ],
+  "margin-bottom": [ "0%", "calc(0% + 0px)" ],
+  "margin-inline-end": [ "0%", "calc(0% + 0px)" ],
+  "margin-inline-start": [ "0%", "calc(0% + 0px)" ],
+  "margin-left": [ "0%", "calc(0% + 0px)" ],
+  "margin-right": [ "0%", "calc(0% + 0px)" ],
+  "margin-top": [ "0%", "calc(0% + 0px)" ],
+  "padding": [ "0% 0px 0em 0pt", "calc(0px) calc(0em) calc(-2px) calc(-1%)" ],
+  "padding-block-end": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
+  "padding-block-start": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
+  "padding-bottom": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
+  "padding-inline-end": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
+  "padding-inline-start": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
+  "padding-left": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
+  "padding-right": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
+  "padding-top": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
+};
+
+function xfail_value(property, value, is_initial, has_frame) {
+  if (!has_frame && (property in gBadComputedNoFrame) &&
+      gBadComputedNoFrame[property].includes(value))
+    return true;
+
+  return false;
+}
+
+var gSwapInitialWhenHaveFrame = {
+  // When there's a frame, '-moz-available' works out to the same as
+  // 'auto' given the prerequisites of only 'display: block'.
+  "width": [ "-moz-available" ],
+  // When there's a frame, these keywords works out to the same as the initial
+  // value, i.e. `auto`, given the prerequisites of only 'display: block'.
+  "height": [ "-moz-max-content", "-moz-min-content", "-moz-fit-content",
+              "-moz-available", "max-content", "min-content", "fit-content",
+              "fit-content(100px)", "fit-content(10%)",
+              "fit-content(calc(3*25px + 50%))" ],
+  "block-size": [ "-moz-max-content", "-moz-min-content", "-moz-fit-content",
+                  "-moz-available", "max-content", "min-content", "fit-content",
+                  "fit-content(100px)", "fit-content(10%)",
+                  "fit-content(calc(3*25px + 50%))" ],
+};
+
+function swap_when_frame(property, value) {
+  return (property in gSwapInitialWhenHaveFrame) &&
+         gSwapInitialWhenHaveFrame[property].includes(value);
+}
+
+var gDisplayTree = document.getElementById("display");
+var gElementN = document.getElementById("elementn");
+var gElementF = document.getElementById("elementf");
+var gStyleSheet = document.getElementById("stylesheet").sheet;
+var gRule1 = gStyleSheet.cssRules[gStyleSheet.insertRule("#elementn, #elementf {}", gStyleSheet.cssRules.length)];
+var gRule2 = gStyleSheet.cssRules[gStyleSheet.insertRule("#elementn, #elementf {}", gStyleSheet.cssRules.length)];
+
+var gInitialValuesN;
+var gInitialValuesF;
+var gInitialPrereqsRuleN;
+var gInitialPrereqsRuleF;
+
+function setup_initial_values(id, ivalprop, prereqprop) {
+  var iframe = document.getElementById(id);
+  window[ivalprop] = iframe.contentWindow.getComputedStyle(
+                       iframe.contentDocument.documentElement.firstChild);
+  var sheet = iframe.contentDocument.styleSheets[0];
+  // For 'width', 'height', etc., need a constant size container.
+  sheet.insertRule(":root { height: 200px; width: 500px }", sheet.cssRules.length);
+
+  window[prereqprop] = sheet.cssRules[sheet.insertRule(":root > * {}", sheet.cssRules.length)];
+}
+
+function test_value(property, val, is_initial)
+{
+  var info = gCSSProperties[property];
+
+  if ("prerequisites" in info) {
+    var prereqs = info.prerequisites;
+    for (var prereq in prereqs) {
+      gRule1.style.setProperty(prereq, prereqs[prereq], "");
+      gInitialPrereqsRuleN.style.setProperty(prereq, prereqs[prereq], "");
+      gInitialPrereqsRuleF.style.setProperty(prereq, prereqs[prereq], "");
+    }
+  }
+  if (info.inherited && is_initial) {
+    gElementN.parentNode.style.setProperty(property, info.other_values[0], "");
+    gElementF.parentNode.style.setProperty(property, info.other_values[0], "");
+  }
+
+  var initial_computed_n = get_computed_value(gInitialValuesN, property);
+  var initial_computed_f = get_computed_value(gInitialValuesF, property);
+  if (is_initial) {
+    gRule1.style.setProperty(property, info.other_values[0], "");
+    var other_computed_n = get_computed_value(getComputedStyle(gElementN, ""), property);
+    var other_computed_f = get_computed_value(getComputedStyle(gElementF, ""), property);
+    isnot(other_computed_n, initial_computed_n,
+          "should be testing with values that compute to different things " +
+          "for '" + property + "'");
+    isnot(other_computed_f, initial_computed_f,
+          "should be testing with values that compute to different things " +
+          "for '" + property + "'");
+  }
+  // It used to be important for values that are supposed to compute to the
+  // initial value (given the design of the old rule tree, nsRuleNode) that
+  // we're modifying the most specific rule that matches the element, and
+  // that we've already requested style while that rule was empty.  This
+  // means we'd have a cached aStartStruct from the parent in the rule
+  // tree (caching the "other" value), so we'd make sure we don't get the
+  // initial value from the luck of default-initialization.  This means
+  // that it would've been important that we set the prereqs on
+  // gRule1.style rather than on gElement.style.
+  //
+  // However, the rule tree no longer stores cached structs, and we only
+  // temporarily cache reset structs during a single restyle.  So the
+  // particular failure mode this was designed to test for isn't as
+  // likely to eventuate.
+  gRule2.style.setProperty(property, val, "");
+  var val_computed_n = get_computed_value(getComputedStyle(gElementN, ""), property);
+  var val_computed_f = get_computed_value(getComputedStyle(gElementF, ""), property);
+  isnot(val_computed_n, "",
+        "should not get empty value for '" + property + ":" + val + "'");
+  isnot(val_computed_f, "",
+        "should not get empty value for '" + property + ":" + val + "'");
+  if (is_initial) {
+    (xfail_value(property, val, is_initial, false) ? todo_is : is)(
+       val_computed_n, initial_computed_n,
+       "should get initial value for '" + property + ":" + val + "'");
+    (xfail_value(property, val, is_initial, true) ? todo_is : is)(
+       val_computed_f, initial_computed_f,
+       "should get initial value for '" + property + ":" + val + "'");
+  } else {
+    (xfail_value(property, val, is_initial, false) ? todo_isnot : isnot)(
+       val_computed_n, initial_computed_n,
+       "should not get initial value for '" + property + ":" + val + "' on elementn.");
+    var swap = swap_when_frame(property, val);
+    (xfail_value(property, val, is_initial, true) ? todo_isnot : (swap ? is : isnot))(
+       val_computed_f, initial_computed_f,
+       "should " + (swap ? "" : "not ") +
+       "get initial value for '" + property + ":" + val + "' on elementf.");
+  }
+  if (is_initial)
+    gRule1.style.removeProperty(property);
+  gRule2.style.removeProperty(property);
+
+  if ("prerequisites" in info) {
+    var prereqs = info.prerequisites;
+    for (var prereq in prereqs) {
+      gRule1.style.removeProperty(prereq);
+      gInitialPrereqsRuleN.style.removeProperty(prereq);
+      gInitialPrereqsRuleF.style.removeProperty(prereq);
+    }
+  }
+  if (info.inherited && is_initial) {
+    gElementN.parentNode.style.removeProperty(property);
+    gElementF.parentNode.style.removeProperty(property);
+  }
+}
+
+function test_property(prop) {
+  var info = gCSSProperties[prop];
+  for (var idx in info.initial_values)
+    test_value(prop, info.initial_values[idx], true);
+  for (var idx in info.other_values)
+    test_value(prop, info.other_values[idx], false);
+}
+
+function run_tests() {
+  setup_initial_values("unstyledn", "gInitialValuesN", "gInitialPrereqsRuleN");
+  setup_initial_values("unstyledf", "gInitialValuesF", "gInitialPrereqsRuleF");
+  var props = [];
+  for (var prop in gCSSProperties)
+    props.push(prop);
+  props = props.reverse();
+  function do_one() {
+    if (props.length == 0) {
+      SimpleTest.finish();
+      return;
+    }
+    test_property(props.pop());
+    SimpleTest.executeSoon(do_one);
+  }
+  SimpleTest.executeSoon(do_one);
+}
+
+load_done();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_value_storage.html b/layout/style/test/test_value_storage.html
new file mode 100644
index 0000000000..542cad91ed
--- /dev/null
+++ b/layout/style/test/test_value_storage.html
@@ -0,0 +1,365 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+-->
+<head>
+  <title>Test for parsing, storage, and serialization of CSS values</title>
+  <script 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" />
+  <style type="text/css" id="prereqsheet">
+  #testnode {}
+  </style>
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+<div id="testnode"></div>
+
+</div>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for parsing, storage, and serialization of CSS values **/
+
+/*
+ * The idempotence tests here deserve a little bit of explanation.  What
+ * we're testing here are the following operations:
+ *   parse: string -> CSS rule
+ *   serialize: CSS rule -> string (normalization 1)
+ *     (this actually has two variants that go through partly different
+ *     codepaths, which we exercise with getPropertyValue and cssText)
+ *   compute: CSS rule -> computed style
+ *   cserialize: computed style -> string (normalization 2)
+ *
+ * Both serialize and cserialize do some normalization, so we can't test
+ * for pure round-tripping, and we also can't compare their output since
+ * they could normalize differently.  (We might at some point in the
+ * future want to guarantee that any output of cserialize is
+ * untouched by going through parse+serialize, though.)
+ *
+ * So we test idempotence of parse + serialize by running the whole
+ * operation twice.  Likewise for parse + compute + cserialize.
+ *
+ * Slightly more interestingly, we test that serialize + parse is the
+ * identity transform by comparing the output of parse + compute +
+ * cserialize to the output of parse + serialize + parse + compute +
+ * cserialize.
+ */
+
+var gSystemFont = [
+  "caption",
+  "icon",
+  "menu",
+  "message-box",
+  "small-caption",
+  "status-bar",
+  "-moz-button",
+  "-moz-pull-down-menu",
+  "-moz-list",
+  "-moz-field",
+];
+
+var gBadCompute = {
+  // output wrapped around to positive, in exponential notation
+  "-moz-box-ordinal-group": [ "-1", "-1000" ],
+};
+
+function xfail_compute(property, value)
+{
+  if (property in gBadCompute &&
+      gBadCompute[property].includes(value))
+    return true;
+
+  return false;
+}
+
+// constructed to map longhands ==> list of containing shorthands
+var gPropertyShorthands = {};
+
+var gElement = document.getElementById("testnode");
+var gDeclaration = gElement.style;
+var gComputedStyle = window.getComputedStyle(gElement);
+
+var gPrereqDeclaration =
+  document.getElementById("prereqsheet").sheet.cssRules[0].style;
+
+// On Android, avoid most 'TEST-PASS' logging by overriding
+// SimpleTest.is/isnot, to improve performance
+if (navigator.appVersion.includes("Android")) {
+  is = function is(a, b, name)
+  {
+    var pass = Object.is(a, b);
+    if (!pass)
+      SimpleTest.is(a, b, name);
+  }
+
+  isnot = function isnot(a, b, name)
+  {
+    var pass = !Object.is(a, b);
+    if (!pass)
+      SimpleTest.isnot(a, b, name);
+  }
+}
+
+// Returns true if propA and propB are equivalent, considering aliasing.
+// (i.e. if one is an alias of the other, or if they're both aliases of
+// the same 3rd property)
+function are_properties_aliased(propA, propB)
+{
+  // If either property is an alias, replace it with the property it aliases.
+  if ("alias_for" in gCSSProperties[propA]) {
+    propA = gCSSProperties[propA].alias_for;
+  }
+  if ("alias_for" in gCSSProperties[propB]) {
+    propB = gCSSProperties[propB].alias_for;
+  }
+
+  return propA == propB;
+}
+
+function test_property(property)
+{
+  var info = gCSSProperties[property];
+
+  // can all properties be removed from the style?
+  function test_remove_all_properties(propName, value) {
+    var i, p = [];
+    for (i = 0; i < gDeclaration.length; i++) p.push(gDeclaration[i]);
+    for (i = 0; i < p.length; i++) gDeclaration.removeProperty(p[i]);
+    var errstr = "when setting property " + propName + " to " + value;
+    is(gDeclaration.length, 0, "unremovable properties " + errstr);
+    is(gDeclaration.cssText, "", "non-empty serialization after removing all properties " + errstr);
+  }
+
+  function test_other_shorthands_empty(value, subprop) {
+    if (!(subprop in gPropertyShorthands)) return;
+    var shorthands = gPropertyShorthands[subprop];
+    for (idx in shorthands) {
+      var sh = shorthands[idx];
+      if (are_properties_aliased(sh, property)) {
+        continue;
+      }
+      is(gDeclaration.getPropertyValue(sh), "",
+         "setting '" + value + "' on '" + property + "' (for shorthand '" + sh + "')");
+    }
+  }
+
+  function test_value(value, resolved_value) {
+    var value_has_variable_reference = resolved_value != null;
+    var is_system_font = property == "font" && gSystemFont.includes(value);
+
+    var colon = ": ";
+    gDeclaration.setProperty(property, value, "");
+
+    var idx;
+
+    var step1val = gDeclaration.getPropertyValue(property);
+    var step1vals = [];
+    var step1ser = gDeclaration.cssText;
+    if ("subproperties" in info)
+      for (idx in info.subproperties)
+        step1vals.push(gDeclaration.getPropertyValue(info.subproperties[idx]));
+    var step1comp;
+    var step1comps = [];
+    if (info.type != CSS_TYPE_TRUE_SHORTHAND)
+      step1comp = gComputedStyle.getPropertyValue(property);
+    if ("subproperties" in info)
+      for (idx in info.subproperties)
+        step1comps.push(gComputedStyle.getPropertyValue(info.subproperties[idx]));
+
+    SimpleTest.isnot(step1val, "", "setting '" + value + "' on '" + property + "'");
+    if ("subproperties" in info &&
+        // System font doesn't produce meaningful value for subproperties.
+        !is_system_font)
+      for (idx in info.subproperties) {
+        var subprop = info.subproperties[idx];
+        if (value_has_variable_reference &&
+            (!info.alias_for || info.type == CSS_TYPE_TRUE_SHORTHAND ||
+            info.type == CSS_TYPE_LEGACY_SHORTHAND)) {
+          is(gDeclaration.getPropertyValue(subprop), "",
+             "setting '" + value + "' on '" + property + "' (for '" + subprop + "')");
+          test_other_shorthands_empty(value, subprop);
+        } else {
+          isnot(gDeclaration.getPropertyValue(subprop), "",
+                "setting '" + value + "' on '" + property + "' (for '" + subprop + "')");
+        }
+      }
+
+    // We don't care particularly about the whitespace or the placement of
+    // semicolons, but for simplicity we'll test the current behavior.
+    var expected_serialization = "";
+    if (step1val != "") {
+      if ("alias_for" in info) {
+        let newValue = info.legacy_mapping && info.legacy_mapping[step1val]
+          ? info.legacy_mapping[step1val] : step1val;
+        // FIXME(emilio): This is a bit unfortunate:
+        // https://github.com/w3c/csswg-drafts/issues/3332
+        if (info.type == CSS_TYPE_LEGACY_SHORTHAND && value_has_variable_reference)
+          newValue = "";
+        expected_serialization = info.alias_for + colon + newValue + ";";
+      } else if (info.type == CSS_TYPE_LEGACY_SHORTHAND) {
+        is(property, "zoom", "Zoom is a bit special because it never " +
+                             "serializes as-is, we always serialize the longhands, " +
+                             "but it doesn't just map to a single property " +
+                             "(and thus we can't use the 'alias_for' mechanism)");
+        let transform = step1val == "1" ? "none" : "scale(" + step1val + ")";
+        let origin = step1val == "1" ? "50% 50% 0px" : "0px 0px 0px";
+        if (value_has_variable_reference) { // See above.
+          transform = "";
+          origin = "";
+        }
+        expected_serialization = "transform" + colon + transform + "; transform-origin" + colon + origin + ";";
+      } else {
+        expected_serialization = property + colon + step1val + ";";
+      }
+    }
+    is(step1ser, expected_serialization,
+       "serialization should match property value");
+
+    gDeclaration.removeProperty(property);
+    gDeclaration.setProperty(property, step1val, "");
+
+    is(gDeclaration.getPropertyValue(property), step1val,
+       "parse+serialize should be idempotent for '" +
+         property + colon + value + "'");
+    if (info.type != CSS_TYPE_TRUE_SHORTHAND) {
+      is(gComputedStyle.getPropertyValue(property), step1comp,
+         "serialize+parse should be identity transform for '" +
+         property + ": " + value + "'");
+    }
+
+    if ("subproperties" in info &&
+        // Using setProperty over subproperties is not sufficient for
+        // system fonts, since the shorthand does more than its parts.
+        !is_system_font &&
+        !value_has_variable_reference) {
+      gDeclaration.removeProperty(property);
+      for (idx in info.subproperties) {
+        var subprop = info.subproperties[idx];
+        gDeclaration.setProperty(subprop, step1vals[idx], "");
+      }
+
+      // Now that all the subprops are set, check their values.  Note that we
+      // need this in a separate loop, in case parts of the shorthand affect
+      // the computed values of other parts.
+      for (idx in info.subproperties) {
+        var subprop = info.subproperties[idx];
+        is(gComputedStyle.getPropertyValue(subprop), step1comps[idx],
+           "serialize(" + subprop + ")+parse should be the identity " +
+           "transform for '" + property + ": " + value + "'");
+      }
+      is(gDeclaration.getPropertyValue(property), step1val,
+         "parse+split+serialize should be idempotent for '" +
+         property + colon + value + "'");
+    }
+
+    // FIXME(emilio): Why is mask special?
+    if (info.type != CSS_TYPE_TRUE_SHORTHAND &&
+        property != "mask") {
+      gDeclaration.removeProperty(property);
+      gDeclaration.setProperty(property, step1comp, "");
+      var func = xfail_compute(property, value) ? todo_is : is;
+      func(gComputedStyle.getPropertyValue(property), step1comp,
+           "parse+compute+serialize should be idempotent for '" +
+           property + ": " + value + "'");
+    }
+    if ("subproperties" in info && !is_system_font) {
+      gDeclaration.removeProperty(property);
+      for (idx in info.subproperties) {
+        var subprop = info.subproperties[idx];
+        gDeclaration.setProperty(subprop, step1comps[idx], "");
+      }
+
+      // Now that all the subprops are set, check their values.  Note that we
+      // need this in a separate loop, in case parts of the shorthand affect
+      // the computed values of other parts.
+      for (idx in info.subproperties) {
+        var subprop = info.subproperties[idx];
+        is(gComputedStyle.getPropertyValue(subprop), step1comps[idx],
+           "parse+compute+serialize(" + subprop + ") should be idempotent for '" +
+           property + ": " + value + "'");
+      }
+    }
+
+    // sanity check shorthands to make sure disabled props aren't exposed
+    if (info.type != CSS_TYPE_LONGHAND) {
+      gDeclaration.setProperty(property, value, "");
+      test_remove_all_properties(property, value);
+    }
+
+    gDeclaration.removeProperty(property);
+  }
+
+  function test_value_without_variable(value) {
+    test_value(value, null);
+  }
+
+  function test_value_with_variable(value) {
+    gPrereqDeclaration.setProperty("--a", value, "");
+    test_value("var(--a)", value);
+    gPrereqDeclaration.removeProperty("--a");
+  }
+
+  if ("prerequisites" in info) {
+    var prereqs = info.prerequisites;
+    for (var prereq in prereqs) {
+      gPrereqDeclaration.setProperty(prereq, prereqs[prereq], "");
+    }
+  }
+
+  var idx;
+  for (idx in info.initial_values) {
+    test_value_without_variable(info.initial_values[idx]);
+    test_value_with_variable(info.initial_values[idx]);
+  }
+  for (idx in info.other_values) {
+    test_value_without_variable(info.other_values[idx]);
+    test_value_with_variable(info.other_values[idx]);
+  }
+
+  if ("prerequisites" in info) {
+    for (var prereq in info.prerequisites) {
+      gPrereqDeclaration.removeProperty(prereq);
+    }
+  }
+
+}
+
+function runTest() {
+  // To avoid triggering the slow script dialog, we have to test one
+  // property at a time.
+  var props = [];
+  for (var prop in gCSSProperties) {
+    var info = gCSSProperties[prop];
+    if ("subproperties" in info) {
+      for (var idx in info.subproperties) {
+        var subprop = info.subproperties[idx];
+        if (!(subprop in gPropertyShorthands)) {
+          gPropertyShorthands[subprop] = [];
+        }
+        gPropertyShorthands[subprop].push(prop);
+      }
+    }
+    props.push(prop);
+  }
+  props = props.reverse();
+  function do_one() {
+    if (props.length == 0) {
+      SimpleTest.finish();
+      return;
+    }
+    test_property(props.pop());
+    SimpleTest.executeSoon(do_one);
+  }
+  SimpleTest.executeSoon(do_one);
+}
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestLongerTimeout(7);
+runTest();
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_variable_serialization_computed.html b/layout/style/test/test_variable_serialization_computed.html
new file mode 100644
index 0000000000..8798d52e4a
--- /dev/null
+++ b/layout/style/test/test_variable_serialization_computed.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<title>Test serialization of computed CSS variable values</title>
+<script src="/MochiKit/MochiKit.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
+
+<div>
+  <span></span>
+</div>
+
+<script>
+// Each entry is an entire declaration followed by the property to check and
+// its expected computed value.
+var values = [
+  ["", "--z", "an-inherited-value"],
+  ["--a: ", "--a", ""],
+  ["--a: initial", "--a", ""],
+  ["--z: initial", "--z", ""],
+  ["--a: inherit", "--a", ""],
+  ["--z: inherit", "--z", "an-inherited-value"],
+  ["--a: unset", "--a", ""],
+  ["--z: unset", "--z", "an-inherited-value"],
+  ["--a: 1px", "--a", "1px"],
+  ["--a: var(--a)", "--a", ""],
+  ["--a: var(--b)", "--a", ""],
+  ["--a: var(--b); --b: 1px", "--a", "1px"],
+  ["--a: var(--b, 1px)", "--a", "1px"],
+  ["--a: var(--a, 1px)", "--a", ""],
+  ["--a: something 3px url(whereever) calc(var(--a) + 1px)", "--a", ""],
+  ["--a: something 3px url(whereever) calc(var(--b,1em) + 1px)", "--a", "something 3px url(whereever) calc(1em + 1px)"],
+  ["--a: var(--b, var(--c, var(--d, Black)))", "--a", "Black"],
+  ["--a: a var(--b) c; --b:b", "--a", "a b c"],
+  ["--a: a var(--b,b var(--c) d) e; --c:c", "--a", "a b c d e"],
+  ["--a: var(--b)red; --b:orange;", "--a", "orange/**/red"],
+  ["--a: var(--b)var(--c); --b:orange; --c:red;", "--a", "orange/**/red"],
+  ["--a: var(--b)var(--c,red); --b:orange;", "--a", "orange/**/red"],
+  ["--a: var(--b,orange)var(--c); --c:red;", "--a", "orange/**/red"],
+  ["--a: var(--b)-; --b:-;", "--a", "-/**/-"],
+  ["--a: var(--b)--; --b:-;", "--a", "-/**/--"],
+  ["--a: var(--b)--x; --b:-;", "--a", "-/**/--x"],
+  ["--a: var(--b)var(--c); --b:-; --c:-;", "--a", "-/**/-"],
+  ["--a: var(--b)var(--c); --b:--; --c:-;", "--a", "--/**/-"],
+  ["--a: var(--b)var(--c); --b:--x; --c:-;", "--a", "--x/**/-"],
+  ["counter-reset: var(--a)red; --a:orange;", "counter-reset", "orange 0 red 0"],
+  ["--a: var(--b)var(--c); --c:[c]; --b:('ab", "--a", "('ab')[c]"],
+  ["--a: '", "--a", "''"],
+  ["--a: '\\", "--a", "''"],
+  ["--a: \\", "--a", "\\\ufffd"],
+  ["--a: \"", "--a", "\"\""],
+  ["--a: \"\\", "--a", "\"\""],
+  ["--a: url(http://example.org/", "--a", "url(http://example.org/)"],
+  ["--a: url(http://example.org/\\", "--a", "url(http://example.org/\\\ufffd)"],
+  ["--a: url('http://example.org/", "--a", "url('http://example.org/')"],
+  ["--a: url('http://example.org/\\", "--a", "url('http://example.org/')"],
+  ["--a: url(\"http://example.org/", "--a", "url(\"http://example.org/\")"],
+  ["--a: url(\"http://example.org/\\", "--a", "url(\"http://example.org/\")"]
+];
+
+function runTest() {
+  var div = document.querySelector("div");
+  var span = document.querySelector("span");
+
+  div.setAttribute("style", "--z:an-inherited-value");
+
+  values.forEach(function(entry, i) {
+    var declaration = entry[0];
+    var property = entry[1];
+    var expected = entry[2];
+    span.setAttribute("style", declaration);
+    var cs = getComputedStyle(span, "");
+    is(cs.getPropertyValue(property), expected, "subtest #" + i);
+  });
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+runTest();
+</script>
diff --git a/layout/style/test/test_variable_serialization_specified.html b/layout/style/test/test_variable_serialization_specified.html
new file mode 100644
index 0000000000..cae8871cb2
--- /dev/null
+++ b/layout/style/test/test_variable_serialization_specified.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<title>Test serialization of specified CSS variable values</title>
+<script src="/MochiKit/MochiKit.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
+
+<style id=style1>#test { }</style>
+<style id=style2></style>
+
+<script>
+// Values that should be serialized back to the same string.
+var values_with_unchanged_specified_value_serialization = [
+  "var(--a)",
+  "var(--a)",
+  "var(--a) ",
+  "var( --a ) ",
+  "var(--a, )",
+  "var(--a,/**/a)",
+  "1px var(--a)",
+  "var(--a) 1px",
+  "something 3px url(whereever) calc(var(--a) + 1px)",
+  "var(--a)",
+  "var(--a)var(--b)",
+  "var(--a, var(--b, var(--c, black)))",
+  "var(--a) <!--",
+  "--> var(--a)",
+  "{ [ var(--a) ] }",
+  "[;] var(--a)",
+  "var(--a,(;))",
+  "VAR(--a)",
+  "var(--0)",
+  "var(--\\30)",
+  "var(--\\d800)",
+  "var(--\\ffffff)",
+];
+
+// Values that serialize differently, due to additional implied closing
+// characters at EOF.
+var values_with_changed_specified_value_serialization = [
+  ["var(--a",                       "var(--a)"],
+  ["var(--a , ",                    "var(--a , )"],
+  ["var(--a, ",                     "var(--a, )"],
+  ["var(--a, var(--b",              "var(--a, var(--b))"],
+  ["var(--a /* unclosed comment",   "var(--a /* unclosed comment*/)"],
+  ["var(--a /* unclosed comment *", "var(--a /* unclosed comment */)"],
+  ["[{(((var(--a",                  "[{(((var(--a))))}]"],
+  ["var(--a, \"unclosed string",    "var(--a, \"unclosed string\")"],
+  ["var(--a, 'unclosed string",     "var(--a, 'unclosed string')"],
+  ["var(--a) \"unclosed string\\",  "var(--a) \"unclosed string\""],
+  ["var(--a) 'unclosed string\\",   "var(--a) 'unclosed string'"],
+  ["var(--a) \\",                   "var(--a) \\\ufffd"],
+  ["var(--a) url(unclosedurl",      "var(--a) url(unclosedurl)"],
+  ["var(--a) url('unclosedurl",     "var(--a) url('unclosedurl')"],
+  ["var(--a) url(\"unclosedurl",    "var(--a) url(\"unclosedurl\")"],
+  ["var(--a) url(unclosedurl\\",    "var(--a) url(unclosedurl\\\ufffd)"],
+  ["var(--a) url('unclosedurl\\",   "var(--a) url('unclosedurl')"],
+  ["var(--a) url(\"unclosedurl\\",  "var(--a) url(\"unclosedurl\")"],
+];
+
+var style1 = document.getElementById("style1");
+var style2 = document.getElementById("style2");
+
+var decl = style1.sheet.cssRules[0].style;
+
+function test_specified_value_serialization(value, expected) {
+  // Test setting value on a custom property with setProperty.
+  decl.setProperty("--test", value, "");
+  is(decl.getPropertyValue("--test"), expected,
+     "value with identical serialization set on custom property with setProperty");
+
+  // Test setting value on a custom property via style sheet parsing.
+  style2.textContent = "#test { --test:" + value;
+  is(style2.sheet.cssRules[0].style.getPropertyValue("--test"), expected,
+     "value with identical serialization set on custom property via parsing");
+
+  // Test setting value on a non-custom longhand property with setProperty.
+  decl.setProperty("color", value, "");
+  is(decl.getPropertyValue("color"), expected,
+     "value with identical serialization set on non-custom longhand property with setProperty");
+
+  // Test setting value on a non-custom longhand property via style sheet parsing.
+  style2.textContent = "#test { color:" + value;
+  is(style2.sheet.cssRules[0].style.getPropertyValue("color"), expected,
+     "value with identical serialization set on non-custom longhand property via parsing");
+
+  // Test setting value on a non-custom shorthand property with setProperty.
+  decl.setProperty("margin", value, "");
+  is(decl.getPropertyValue("margin"), expected,
+     "value with identical serialization set on non-custom shorthand property with setProperty");
+
+  // Test setting value on a non-custom shorthand property via style sheet parsing.
+  style2.textContent = "#test { margin:" + value;
+  is(style2.sheet.cssRules[0].style.getPropertyValue("margin"), expected,
+     "value with identical serialization set on non-custom shorthand property via parsing");
+
+  // Clean up.
+  decl.removeProperty("--test");
+  decl.removeProperty("color");
+  decl.removeProperty("margin");
+}
+
+function runTest() {
+  values_with_unchanged_specified_value_serialization.forEach(function(value) {
+    test_specified_value_serialization(value, value);
+  });
+
+  values_with_changed_specified_value_serialization.forEach(function(pair) {
+    test_specified_value_serialization(pair[0], pair[1]);
+  });
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+runTest();
+</script>
diff --git a/layout/style/test/test_variables.html b/layout/style/test/test_variables.html
new file mode 100644
index 0000000000..e26dc5a0f7
--- /dev/null
+++ b/layout/style/test/test_variables.html
@@ -0,0 +1,129 @@
+<!DOCTYPE type>
+<title>Assorted CSS variable tests</title>
+<script src="/MochiKit/MochiKit.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
+
+<style id="test1">
+</style>
+
+<style id="test2">
+</style>
+
+<style id="test3">
+</style>
+
+<style id="test4">
+</style>
+
+<div id="t4"></div>
+
+<style id="test5">
+</style>
+
+<div id="t5"></div>
+
+<style id="test6">
+</style>
+
+<style id="test7">
+</style>
+
+<style id="test8">
+</style>
+
+<script>
+var tests = [
+  function() {
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
+    var test1 = document.getElementById("test1");
+    test1.textContent = "p { --a:123!important; }";
+    var declaration = test1.sheet.cssRules[0].style;
+    declaration.cssText;
+    declaration.setProperty("color", "black");
+    is(declaration.getPropertyValue("--a"), "123");
+  },
+
+  function() {
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
+    var test2 = document.getElementById("test2");
+    test2.textContent = "p { --a: a !important; }";
+    var declaration = test2.sheet.cssRules[0].style;
+    is(declaration.getPropertyPriority("--a"), "important");
+  },
+
+  function() {
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=955913
+    var test3 = document.getElementById("test3");
+    test3.textContent = "p { border-left-style: inset; padding: 1px; --decoration: line-through; }";
+    var declaration = test3.sheet.cssRules[0].style;
+    is(declaration[declaration.length - 1], "--decoration");
+  },
+
+  function() {
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=959973
+    var test4 = document.getElementById("test4");
+    test4.textContent = "#t4 { background-image: var(--a); }";
+
+    var element = document.getElementById("t4");
+    var path = window.location.pathname;
+    var currentDir = path.substring(0, path.lastIndexOf('/'));
+    var imageURL = "http://mochi.test:8888" + currentDir + "/image.png";
+
+    is(window.getComputedStyle(element).getPropertyValue("background-image"), "url(\"" + imageURL +"\")");
+  },
+
+  function() {
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1043713
+    var test5 = document.getElementById("test5");
+    test5.textContent = "#t5 { --SomeVariableName: a; }";
+
+    var declaration = test5.sheet.cssRules[0].style;
+    is(declaration.item(0), "--SomeVariableName", "custom property name returned by item() on style declaration");
+    is(declaration[0], "--SomeVariableName", "custom property name returned by indexed getter on style declaration");
+
+    var element = document.getElementById("t5");
+    var cs = window.getComputedStyle(element);
+
+    is(cs.item(cs.length - 1), "--SomeVariableName", "custom property name returned by item() on computed style");
+    is(cs[cs.length - 1], "--SomeVariableName", "custom property name returned by indexed getter on style declaration");
+  },
+
+  function() {
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1154356
+    var test7 = document.getElementById("test7");
+    test7.textContent = "p { --weird\\;name: green; }";
+    is(test7.sheet.cssRules[0].style.cssText, "--weird\\;name: green;");
+    test7.textContent = "p { --0: green; }";
+    is(test7.sheet.cssRules[0].style.cssText, "--0: green;");
+  },
+
+  function() {
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1330172
+    var test8 = document.getElementById("test8");
+    test8.textContent = "p { --a:inHerit; }";
+    is(test8.sheet.cssRules[0].style.cssText, "--a: inherit;");
+    test8.textContent = "p { --b: initial!important; }";
+    is(test8.sheet.cssRules[0].style.cssText, "--b: initial !important;");
+    test8.textContent = "p { --c:   UNSET  !important }";
+    is(test8.sheet.cssRules[0].style.cssText, "--c: unset !important;");
+  },
+];
+
+function prepareTest() {
+  // Load an external style sheet for test 4.
+  var e = document.createElement("link");
+  e.addEventListener("load", runTest);
+  e.setAttribute("rel", "stylesheet");
+  e.setAttribute("href", "support/external-variable-url.css");
+  document.head.appendChild(e);
+}
+
+function runTest() {
+  tests.forEach(function(fn) { fn(); });
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+prepareTest();
+</script>
diff --git a/layout/style/test/test_variables_loop.html b/layout/style/test/test_variables_loop.html
new file mode 100644
index 0000000000..76e97e26f3
--- /dev/null
+++ b/layout/style/test/test_variables_loop.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>CSS variables loop resolving</title>
+<script src="/MochiKit/MochiKit.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
+<style id="test">
+  #outer {
+    --a: a;
+    --b: b;
+    --c: c;
+    --d: d;
+    --e: e;
+  }
+  #inner {
+    --a: var(--d, ad);
+    --b: var(--d, ad);
+    --c: var(--d, ad);
+    --d: var(--e, de);
+    --e: var(--a, ea) var(--b, eb) var(--c, ec);
+  }
+</style>
+<div id="outer">
+  <div id="inner"></div>
+</div>
+<script>
+let inner_cs = getComputedStyle(document.getElementById("inner"));
+for (let v of ['a', 'b', 'c', 'd', 'e']) {
+  is(inner_cs.getPropertyValue(`--${v}`), "",
+     `Variable --${v} should be eliminated`);
+}
+</script>
diff --git a/layout/style/test/test_variables_order.html b/layout/style/test/test_variables_order.html
new file mode 100644
index 0000000000..5adb9edf75
--- /dev/null
+++ b/layout/style/test/test_variables_order.html
@@ -0,0 +1,53 @@
+<!DOCTYPE type>
+<title>CSS variables order tests</title>
+<script src="/MochiKit/MochiKit.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
+
+<style id="test">
+</style>
+
+<div id="t4"></div>
+
+<script>
+
+/*
+ * Although the spec does not enforce any specific order, Gecko and Servo
+ * implement a consistent ordering for CSSDeclaration objects in the DOM.
+ * CSSDeclarations expose property names as indexed properties, which need
+ * to be stable. This order is the order that properties are cascaded in.
+ *
+ * We have this test just to prevent regressions, rather than testing specific
+ * mandated behavior.
+ */
+
+function prepareTest() {
+  var e = document.createElement("link");
+  e.addEventListener("load", runTest);
+  e.setAttribute("rel", "stylesheet");
+  e.setAttribute("href", "support/external-variable-url.css");
+  document.head.appendChild(e);
+}
+
+function runTest() {
+  var test = document.getElementById("test");
+  test.textContent = "div { --SomeVariableName: a; }";
+
+  var declaration = test.sheet.cssRules[0].style;
+  is(declaration.item(0), "--SomeVariableName", "custom property name returned by item() on style declaration");
+  is(declaration[0], "--SomeVariableName", "custom property name returned by indexed getter on style declaration");
+
+  var element = document.getElementById("t4");
+  var cs = window.getComputedStyle(element);
+
+  ["--SomeVariableName", "--a"].forEach((varName, index) => {
+    is(cs.item(cs.length - (index + 1)), varName, "custom property name returned by item() on computed style");
+    is(cs[cs.length - (index + 1)], varName, "custom property name returned by indexed getter on style declaration");
+  });
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+prepareTest();
+</script>
diff --git a/layout/style/test/test_video_object_fit.html b/layout/style/test/test_video_object_fit.html
new file mode 100644
index 0000000000..e673ba204e
--- /dev/null
+++ b/layout/style/test/test_video_object_fit.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1065766
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1065766</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=1065766">Mozilla Bug 1065766</a>
+<div id="content" style="display: none">
+  <video id="myVideo"></video>
+</div>
+<pre id="test">
+<script type="application/javascript">
+"use strict";
+
+/**
+ * Test for Bug 1065766
+ *
+ * This test verifies that <video> has 'object-fit:contain' by default, set via
+ * a UA stylesheet. (This is different from the property's initial value, which
+ * is "fill".)
+ *
+ * Spec reference:
+ * https://html.spec.whatwg.org/multipage/rendering.html#video-object-fit
+ */
+
+function checkStyle(elem, expectedVal, message) {
+  is(window.getComputedStyle(elem).objectFit, expectedVal, message);
+}
+
+function main() {
+  const videoElem = document.getElementById("myVideo");
+
+  checkStyle(videoElem, "contain",
+             "<video> should have 'object-fit:contain' by default");
+
+  // Make sure we can override this behavior (i.e. that the UA stylesheet
+  // doesn't use "!important" to make this style mandatory):
+  videoElem.style.objectFit = "cover";
+  checkStyle(videoElem, "cover",
+             "<video> should honor 'object-fit:cover' in inline style");
+}
+
+main();
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_viewport_scrollbar_causing_reflow.html b/layout/style/test/test_viewport_scrollbar_causing_reflow.html
new file mode 100644
index 0000000000..ced14f352a
--- /dev/null
+++ b/layout/style/test/test_viewport_scrollbar_causing_reflow.html
@@ -0,0 +1,130 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1367568
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1367568</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=">Mozilla Bug 1367568</a>
+<div id="content">
+  <!-- Some fixed-width divs that we shouldn't have to reflow when the viewport
+       changes. More than 5 so that our leeway for scrollbar parts doesn't
+       accidentally cause the test to pass -->
+  <div style="width: 100px">fixed-width <div>(child)</div></div>
+  <div style="width: 100px">fixed-width <div>(child)</div></div>
+  <div style="width: 100px">fixed-width <div>(child)</div></div>
+  <div style="width: 100px">fixed-width <div>(child)</div></div>
+  <div style="width: 100px">fixed-width <div>(child)</div></div>
+  <div style="width: 100px">fixed-width <div>(child)</div></div>
+  <div style="position: absolute; width: 150px">
+    abs-fixed-width
+    <div>(child)</div>
+  </div>
+</div>
+<pre id="test">
+<script>
+"use strict";
+
+/** Test for Bug 1367568 **/
+
+/**
+ * This test verifies that "overflow" changes on the <body> don't cause
+ * an unnecessarily large amount of reflow.
+ */
+
+// Vars used in setStyleAndMeasure that we really only have to look up once:
+const gUtils = SpecialPowers.getDOMWindowUtils(window);
+
+function setStyleAndMeasure(initialStyle, finalStyle) {
+  is(document.body.style.length, 0,
+     "Bug in test - body should start with empty style");
+  let unusedVal = document.body.offsetHeight; // flush layout
+  let constructCount = gUtils.framesConstructed;
+
+  document.body.style = initialStyle;
+  unusedVal = document.body.offsetHeight; // flush layout
+  let reflowCountBeforeTweak = gUtils.framesReflowed;
+
+  document.body.style = finalStyle;
+  unusedVal = document.body.offsetHeight; // flush layout
+  let reflowCountAfterTweak = gUtils.framesReflowed;
+
+  // Clean up:
+  document.body.style = "";
+
+  is(gUtils.framesConstructed, constructCount,
+     "Style tweak shouldn't have triggered frame construction");
+
+  // ...and return the delta:
+  return reflowCountAfterTweak - reflowCountBeforeTweak;
+}
+
+function main() {
+  // First, we sanity-check that our measurement make sense -- if we leave
+  // styles unchanged, we should measure no frames being reflowed:
+  let count = setStyleAndMeasure("width: 50px; height: 80px",
+                                 "width: 50px; height: 80px");
+  is(count, 0,
+     "Shouldn't reflow anything when we leave 'width' & 'height' unchanged");
+
+  // Now: see how many frames are reflowed when the "width" & "height" change.
+  // We'll use this as the reference when measuring reflow counts for various
+  // changes to "overflow" below.
+  count = setStyleAndMeasure("width: 50px; height: 80px",
+                             "width: 90px; height: 60px");
+  ok(count > 0,
+     "Should reflow some frames when 'width' & 'height' change");
+
+  const scrollbarsHaveButtons = navigator.platform.includes("Win");
+  // This is to allow for reflowing scrollbar parts themselves.
+  const scrollbarReflows = scrollbarsHaveButtons ? 5 : 2;
+  // Expected maximum number of frames reflowed for "overflow" changes
+  const expectedMax = count + scrollbarReflows;
+
+  // Shared ending for messages in all ok() checks below:
+  const messageSuffix =
+    " shouldn't be greater than count for tweaking width/height on body (" +
+    expectedMax + ")";
+
+  // OK, here is where the relevant tests actually begin!!
+  // See how many frames we reflow for various tweaks to "overflow" on
+  // the body -- we expect the count to be no larger than |expectedMax|.
+  count = setStyleAndMeasure("", "overflow: scroll");
+  ok(count <= expectedMax,
+     "Reflow count when setting 'overflow: scroll' on body (" + count + ")" +
+     messageSuffix);
+
+  count = setStyleAndMeasure("", "overflow: hidden");
+  ok(count <= expectedMax,
+     "Reflow count when setting 'overflow: hidden' on body (" + count + ")" +
+     messageSuffix);
+
+  // Test removal of "overflow: scroll":
+  count = setStyleAndMeasure("overflow: scroll", "");
+  ok(count <= expectedMax,
+     "Reflow count when removing 'overflow: scroll' from body (" + count + ")" +
+     messageSuffix);
+
+  count = setStyleAndMeasure("overflow: hidden", "");
+  ok(count <= expectedMax,
+     "Reflow count when removing 'overflow: hidden' from body (" + count + ")" +
+     messageSuffix);
+
+  // Test change between two non-'visible' overflow values:
+  count = setStyleAndMeasure("overflow: scroll", "overflow: hidden");
+  ok(count <= expectedMax,
+     "Reflow count when changing 'overflow' on body (" + count + ")" +
+     messageSuffix);
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_viewport_units.html b/layout/style/test/test_viewport_units.html
new file mode 100644
index 0000000000..fa7df88eb6
--- /dev/null
+++ b/layout/style/test/test_viewport_units.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=804970
+-->
+<head>
+  <title>Test for dynamic changes to CSS 'vh', 'vw', 'vmin', and 'vmax' units</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=804970">Mozilla Bug 804970</a>
+<iframe id="iframe" src="viewport_units_iframe.html"></iframe>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for CSS vh/vw/vmin/vmax units **/
+
+function px_to_num(str)
+{
+    return Number(String(str).match(/^([\d.]+)px$/)[1]);
+}
+
+function width(elt)
+{
+    return px_to_num(elt.ownerDocument.defaultView.getComputedStyle(elt).width);
+}
+
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+    var iframe = document.getElementById("iframe");
+    var idoc = iframe.contentDocument;
+    var vh = idoc.getElementById("vh");
+    var vw = idoc.getElementById("vw");
+    var vmin = idoc.getElementById("vmin");
+    var vmax = idoc.getElementById("vmax");
+
+    iframe.style.width = "100px";
+    iframe.style.height = "250px";
+    is(width(vh), 250, "vh should be 250px");
+    is(width(vw), 100, "vw should be 100px");
+    is(width(vmin), 100, "vmin should be 100px");
+    is(width(vmax), 250, "vmax should be 250px");
+
+    iframe.style.width = "300px";
+    is(width(vh), 250, "vh should be 250px");
+    is(width(vw), 300, "vw should be 300px");
+    is(width(vmin), 250, "vmin should be 250px");
+    is(width(vmax), 300, "vmax should be 300px");
+
+    iframe.style.height = "200px";
+    is(width(vh), 200, "vh should be 200px");
+    is(width(vw), 300, "vw should be 300px");
+    is(width(vmin), 200, "vmin should be 200px");
+    is(width(vmax), 300, "vmax should be 300px");
+
+    SimpleTest.finish();
+}
+
+window.addEventListener("load", run);
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_visited_image_loading.html b/layout/style/test/test_visited_image_loading.html
new file mode 100644
index 0000000000..09aae8e53c
--- /dev/null
+++ b/layout/style/test/test_visited_image_loading.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=557287
+-->
+<head>
+  <title>Test for Bug 557287</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=557287">Mozilla Bug 147777</a>
+<pre id="test">
+<script type="application/ecmascript" src="visited_image_loading.sjs?reset"></script>
+<script type="application/javascript">
+
+/** Test for Bug 557287 **/
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout("untriaged");
+
+var subdoc, subwin;
+
+window.addEventListener("load", run);
+
+function run()
+{
+  subwin = window.open("visited_image_loading_frame.html", "_blank");
+  subwin.addEventListener("load", function() {
+    subdoc = subwin.document;
+    setTimeout(check_link_styled, 50);
+  });
+}
+
+function visitedDependentComputedStyle(win, elem, property) {
+  return SpecialPowers.DOMWindowUtils
+           .getVisitedDependentComputedStyle(elem, "", property);
+}
+
+function check_link_styled()
+{
+  var vislink = subdoc.getElementById("visited");
+  var bgcolor =
+    visitedDependentComputedStyle(subwin, vislink, "background-color");
+  if (bgcolor == "rgb(128, 0, 128)") {
+    // We've done our async :visited processing and restyled accordingly.
+    // Make sure that we've actually painted before finishing the test.
+    subwin.addEventListener("MozAfterPaint", paint_listener);
+    // do something that forces a paint
+    subdoc.body.appendChild(subdoc.createTextNode("new text node"));
+  } else {
+    setTimeout(check_link_styled, 50);
+  }
+}
+
+function paint_listener(event)
+{
+  subwin.removeEventListener("MozAfterPaint", paint_listener);
+  var s = document.createElement("script");
+  s.src = "visited_image_loading.sjs?waitforresult";
+  document.body.appendChild(s);
+  subwin.close();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_visited_image_loading_empty.html b/layout/style/test/test_visited_image_loading_empty.html
new file mode 100644
index 0000000000..6687254720
--- /dev/null
+++ b/layout/style/test/test_visited_image_loading_empty.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=557287
+-->
+<head>
+  <title>Test for Bug 557287</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=557287">Mozilla Bug 147777</a>
+<pre id="test">
+<script type="application/ecmascript" src="visited_image_loading.sjs?reset"></script>
+<script type="application/javascript">
+
+/** Test for Bug 557287 **/
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout("untriaged");
+
+var subdoc, subwin;
+
+window.addEventListener("load", run);
+
+function run()
+{
+  subwin = window.open("visited_image_loading_frame_empty.html", "_blank");
+  subwin.addEventListener("load", function() {
+    subdoc = subwin.document;
+    setTimeout(check_link_styled, 50);
+  });
+}
+
+function visitedDependentComputedStyle(win, elem, property) {
+  return SpecialPowers.DOMWindowUtils
+           .getVisitedDependentComputedStyle(elem, "", property);
+}
+
+function check_link_styled()
+{
+  var vislink = subdoc.getElementById("visited");
+  var bgcolor =
+    visitedDependentComputedStyle(subwin, vislink, "background-color");
+  if (bgcolor == "rgb(128, 0, 128)") {
+    // We've done our async :visited processing and restyled accordingly.
+    // Make sure that we've actually painted before finishing the test.
+    subwin.addEventListener("MozAfterPaint", paint_listener);
+    // do something that forces a paint
+    subdoc.body.appendChild(subdoc.createTextNode("new text node"));
+  } else {
+    setTimeout(check_link_styled, 50);
+  }
+}
+
+function paint_listener(event)
+{
+  subwin.removeEventListener("MozAfterPaint", paint_listener);
+  var s = document.createElement("script");
+  s.src = "visited_image_loading.sjs?waitforresult";
+  document.body.appendChild(s);
+  subwin.close();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_visited_lying.html b/layout/style/test/test_visited_lying.html
new file mode 100644
index 0000000000..116d301cf1
--- /dev/null
+++ b/layout/style/test/test_visited_lying.html
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=147777
+-->
+<head>
+  <title>Test for Bug 147777</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/WindowSnapshot.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=147777">Mozilla Bug 147777</a>
+<iframe id="iframe" src="visited-lying-inner.html" style="width: 20em; height: 5em"></iframe>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 147777 **/
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout("untriaged");
+window.addEventListener("load", start);
+
+var iframe;
+var visitedlink, unvisitedlink;
+var snapshot1;
+
+function start()
+{
+  // Our load event has fired, so we know our iframe is loaded.
+  iframe = document.getElementById("iframe");
+  visitedlink = iframe.contentDocument.getElementById("visitedlink");
+  unvisitedlink = iframe.contentDocument.getElementById("unvisitedlink");
+
+  // First, take a snapshot of it with both links unvisited.
+  snapshot1 = snapshotWindow(iframe.contentWindow, false);
+
+  // Then, change one of the links in the iframe to being visited.
+  visitedlink.href = top.location;
+
+  // Then, start polling to see when the history has updated the display.
+  setTimeout(poll_for_restyle, 100);
+}
+
+function poll_for_restyle()
+{
+  var snapshot2 = snapshotWindow(iframe.contentWindow, false);
+  var equal = compareSnapshots(snapshot1, snapshot2, true)[0];
+  if (equal) {
+    // keep polling
+    setTimeout(poll_for_restyle, 100);
+  } else {
+    // We now know that the link is visited, so we're ready to run
+    // tests.
+    run_tests();
+  }
+}
+
+function run_tests()
+{
+  // Test querySelector and querySelectorAll.
+  var subdoc = iframe.contentDocument;
+  is(subdoc.querySelector(":link"), unvisitedlink,
+     "first :link should be the unvisited link");
+  is(subdoc.querySelector(":visited"), null,
+     "querySelector should not find anything :visited");
+  var qsr = subdoc.querySelectorAll(":link");
+  is(qsr.length, 2, "querySelectorAll(:link) should find 2 results");
+  is(qsr[0], unvisitedlink, "querySelectorAll(:link)[0]");
+  is(qsr[1], visitedlink, "querySelectorAll(:link)[1]");
+  qsr = subdoc.querySelectorAll(":visited");
+  is(qsr.length, 0, "querySelectorAll(:visited) should find 0 results");
+
+  // Test getComputedStyle.
+  var subwin = iframe.contentWindow;
+  is(subwin.getComputedStyle(unvisitedlink).color, "rgb(0, 0, 255)",
+     "getComputedStyle on unvisited link should report color is blue");
+  is(subwin.getComputedStyle(visitedlink).color, "rgb(0, 0, 255)",
+     "getComputedStyle on visited link should report color is blue");
+
+  // Test matches.
+  is(unvisitedlink.matches(":link"), true,
+     "unvisited link matches :link");
+  is(visitedlink.matches(":link"), true,
+     "visited link matches :link");
+  is(unvisitedlink.matches(":visited"), false,
+     "unvisited link does not match :visited");
+  is(visitedlink.matches(":visited"), false,
+     "visited link does not match :visited");
+
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_visited_pref.html b/layout/style/test/test_visited_pref.html
new file mode 100644
index 0000000000..481a71bfef
--- /dev/null
+++ b/layout/style/test/test_visited_pref.html
@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=147777
+-->
+<head>
+  <title>Test for visited link coloring pref Bug 147777</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style type="text/css">
+
+  :link { float: left; }
+
+  :visited { float: right; }
+
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=147777">Mozilla Bug 147777</a>
+<iframe id="iframe" src="visited-pref-iframe.html" style="width: 10em; height: 5em"></iframe>
+<pre id="test">
+<script type="application/javascript">
+/** Test for Bug 147777 **/
+
+function reinsert_node(e) {
+  var sib = e.nextSibling;
+  var par = e.parentNode;
+  par.removeChild(e);
+  par.insertBefore(e, sib);
+}
+
+function get_pref()
+{
+    return SpecialPowers.getBoolPref("layout.css.visited_links_enabled");
+}
+
+function snapshotsEqual(snap1, snap2)
+{
+  return compareSnapshots(snap1, snap2, true)[0];
+}
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout("untriaged");
+window.addEventListener("load", step1);
+
+var iframe, subdoc, subwin;
+var link;
+var start;
+var timeout;
+
+var unvisref; // reference image for unvisited style
+
+function step1()
+{
+  is(get_pref(), true, "pref defaults to true");
+
+  iframe = document.getElementById("iframe");
+  subdoc = iframe.contentDocument;
+  subwin = iframe.contentWindow;
+  link = subdoc.getElementById("link");
+
+  unvisref = snapshotWindow(subwin, false);
+
+  // Now set the href of the link to a location that's actually visited.
+  link.href = top.location;
+
+  start = Date.now();
+
+  // And wait for the link to get restyled when the history lets us
+  // know it is (asynchronously).
+  setTimeout(poll_for_visited_style, 100);
+}
+
+function poll_for_visited_style()
+{
+  var snapshot = snapshotWindow(subwin, false);
+  if (snapshotsEqual(unvisref, snapshot)) {
+    // hasn't been styled yet
+    setTimeout(poll_for_visited_style, 100);
+
+    // If it never gets styled correctly, this test will fail because
+    // this loop will never complete.
+  } else {
+    var end = Date.now();
+    timeout = 3 * Math.max(end - start, 300);
+    SpecialPowers.pushPrefEnv({"set":[["layout.css.visited_links_enabled", false]]}, step2);
+  }
+}
+
+function step2()
+{
+  // we don't handle dynamic changes of this pref; it only takes effect
+  // when a new page loads
+  reinsert_node(link);
+
+  setTimeout(step3, timeout);
+}
+
+function step3()
+{
+  var snapshot = snapshotWindow(subwin, false);
+  ok(snapshotsEqual(unvisref, snapshot),
+     ":visited selector does not apply given false preference");
+
+  SimpleTest.finish();
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_visited_reftests.html b/layout/style/test/test_visited_reftests.html
new file mode 100644
index 0000000000..d8979c212e
--- /dev/null
+++ b/layout/style/test/test_visited_reftests.html
@@ -0,0 +1,209 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=147777
+-->
+<head>
+  <title>Test for Bug 147777</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/WindowSnapshot.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=147777">Mozilla Bug 147777</a>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 147777 **/
+
+// Because link-coloring for visited links is asynchronous, running
+// reftests that involve link coloring requires that we poll for the
+// correct result until all links are styled correctly.
+
+// A requirement of these reftests is that the reference rendering is
+// styled correctly when loaded.  We only poll for the tests.
+
+var gTests = [
+  // there's also an implicit "load visited-page.html" at the start,
+  // thanks to the code below.
+
+  // IMPORTANT NOTE: For these tests, the test and reference are not
+  // snapshotted in the same way.  The REFERENCE (second file) is
+  // assumed to be complete when loaded, but we poll for visited link
+  // coloring on the TEST (first file) until the test passes.
+  "== pseudo-classes-02.svg pseudo-classes-02-ref.svg",
+  "needs-focus == caret-color-on-visited-1.html caret-color-on-visited-1-ref.html",
+  "!= color-on-link-1-ref.html color-on-visited-1-ref.html",
+  "== color-on-link-1.html color-on-link-1-ref.html",
+  "== color-on-link-before-1.html color-on-link-1-ref.html",
+  "== color-on-visited-1.html color-on-visited-1-ref.html",
+  "== color-on-visited-before-1.html color-on-visited-1-ref.html",
+  "== color-on-visited-text-1.html color-on-visited-text-1-ref.html",
+  "!= content-color-on-link-before-1-ref.html content-color-on-visited-before-1-ref.html",
+  "== content-color-on-link-before-1.html content-color-on-link-before-1-ref.html",
+  "== content-color-on-visited-before-1.html content-color-on-visited-before-1-ref.html",
+  "== content-on-link-before-1.html content-before-1-ref.html",
+  "== content-on-visited-before-1.html content-before-1-ref.html",
+  "== color-on-text-decoration-1.html color-on-text-decoration-1-ref.html",
+  "== color-on-bullets-1.html color-on-bullets-1-ref.html",
+  // NOTE: background-color is tested by all the selector tests (and
+  // also color-choice-1) and therefore doesn't have its own tests.
+  // FIXME: Maybe add a test for selection colors (foreground and
+  // background), if possible.
+  "== width-on-link-1.html width-1-ref.html",
+  "== width-on-visited-1.html width-1-ref.html",
+  "== border-1.html border-1-ref.html",
+  "== border-2a.html border-2-ref.html",
+  "== border-2b.html border-2-ref.html",
+  // FIXME: Commented out because of dynamic change handling bugs in
+  // border-collapse tables that mean we get an incorrect rendering when
+  // the asynchronous restyle-from-history arrives.
+  //"== border-collapse-1.html border-collapse-1-ref.html",
+  "== outline-1.html outline-1-ref.html",
+  "== column-rule-1.html column-rule-1-ref.html",
+  "!= column-rule-1.html column-rule-1-notref.html",
+  "== color-choice-1.html color-choice-1-ref.html",
+  "== selector-descendant-1.html selector-descendant-1-ref.html",
+  "== selector-descendant-2.xhtml selector-descendant-2-ref.xhtml",
+  "== selector-child-1.html selector-child-1-ref.html",
+  "== selector-child-2.xhtml selector-child-2-ref.xhtml",
+  "== selector-adj-sibling-1.html selector-adj-sibling-1-ref.html",
+  "== selector-adj-sibling-2.html selector-adj-sibling-2-ref.html",
+  "== selector-adj-sibling-3.xhtml selector-adj-sibling-3-ref.xhtml",
+  "== selector-any-sibling-1.html selector-any-sibling-1-ref.html",
+  "== selector-any-sibling-2.html selector-any-sibling-2-ref.html",
+  "== subject-of-selector-descendant-1.html subject-of-selector-1-ref.html",
+  "== subject-of-selector-descendant-2.xhtml subject-of-selector-descendant-2-ref.xhtml",
+  "== subject-of-selector-child-1.html subject-of-selector-1-ref.html",
+  "== subject-of-selector-adj-sibling-1.html subject-of-selector-1-ref.html",
+  "== subject-of-selector-any-sibling-1.html subject-of-selector-1-ref.html",
+  "== inherit-keyword-1.xhtml inherit-keyword-1-ref.html",
+  "== svg-image-visited-1a.html svg-image-visited-1-ref.html",
+  "== svg-image-visited-1b.html svg-image-visited-1-ref.html",
+  "== svg-image-visited-1c.html svg-image-visited-1-ref.html",
+  "== svg-image-visited-1d.html svg-image-visited-1-ref.html",
+  // FIXME: commented out because dynamic changes on the non-first-line
+  // part of the test don't work right when the link becomes visited.
+  //"== first-line-1.html first-line-1-ref.html",
+  "== white-to-transparent-1.html white-to-transparent-1-ref.html",
+  "== link-root-1.xhtml link-root-1-ref.xhtml",
+  "== mathml-links.html mathml-links-ref.html",
+  "== placeholder-1.html placeholder-1-ref.html",
+  "== visited-inherit-1.html visited-inherit-1-ref.html",
+  "== transition-on-visited.html transition-on-visited-ref.html",
+  "== logical-box-border-color-visited-link-001.html logical-box-border-color-visited-link-ref.html",
+  "== logical-box-border-color-visited-link-002.html logical-box-border-color-visited-link-ref.html",
+  "== logical-box-border-color-visited-link-003.html logical-box-border-color-visited-link-ref.html",
+  "== svg-paint-currentcolor-visited.svg svg-paint-currentcolor-visited-ref.svg",
+];
+
+// We record the maximum number of times we had to look at a test before
+// it switched to the passing state (though we assume it's 10 to start
+// rather than 0 so that we have a reasonable default).  Then we make a
+// test "time out" if it takes more than gTimeoutFactor times that
+// amount of time.  This allows us to report a test failure rather than
+// making a test failure just show up as a timeout.
+var gMaxPassingTries = 10;
+var gTimeoutFactor = 10;
+
+function startIframe(url) {
+  return new Promise(resolve => {
+    var element = document.createElement("iframe");
+    element.addEventListener("load", () => {
+      element.contentDocument.fonts.ready.then(() => {
+        resolve(element.contentWindow);
+      });
+    }, {once: true});
+    // smaller than normal reftests, but enough for these
+    element.setAttribute("style", "width: 30em; height: 10em");
+    element.src = "css-visited/" + url;
+    document.body.appendChild(element);
+  });
+}
+
+async function runTests() {
+  SimpleTest.waitForExplicitFinish();
+  SimpleTest.requestFlakyTimeout("async link coloring");
+  // Set caret to a known size, for tests of :visited caret-color styling
+  await SpecialPowers.pushPrefEnv({'set': [['ui.caretWidth', 16]]});
+  info("opening visited page");
+  let win = window.open("css-visited/visited-page.html", "_blank");
+  await new Promise(resolve => {
+    win.onload = resolve;
+  });
+  info("running tests");
+  await Promise.all(gTests.map(runTest));
+  win.close();
+  SimpleTest.finish();
+}
+
+function passes(equal, shot1, shot2)
+{
+  let [correct] = compareSnapshots(shot1, shot2, equal);
+  return correct;
+}
+
+function waitFor100msAndIdle() {
+  return new Promise(resolve => setTimeout(function() {
+    requestIdleCallback(resolve);
+  }, 100));
+}
+
+async function runTest(testLine) {
+  let splitData = testLine.split(" ");
+  let isEqual;
+  let needsFocus = false;
+  while (true) {
+    let op = splitData.shift();
+    if (op == "needs-focus") {
+      needsFocus = true;
+    } else if (op == "==" || op == "!=") {
+      isEqual = op == "==";
+      break;
+    } else {
+      ok(false, "Unknown syntax");
+      return;
+    }
+  }
+  let [testFile, refFile] = splitData;
+
+  let promiseTestWin = startIframe(testFile);
+  let promiseRefWin = startIframe(refFile);
+  let refSnapshot = snapshotWindow(await promiseRefWin);
+  let testWindow = await promiseTestWin;
+  // Always wait at least 100ms, so that any test that switches
+  // from passing to failing when the asynchronous link coloring
+  // happens should fail at least some of the time.
+  await waitFor100msAndIdle();
+
+  let tries;
+  let testSnapshot;
+  for (tries = 0; tries < gMaxPassingTries * gTimeoutFactor; ++tries) {
+    if (needsFocus) {
+      await SimpleTest.promiseFocus(testWindow, false);
+    }
+    testSnapshot = snapshotWindow(testWindow, true);
+    if (passes(isEqual, testSnapshot, refSnapshot)) {
+      if (tries > gMaxPassingTries) {
+        gMaxPassingTries = tries;
+      }
+      break;
+    }
+    // Links might not have been colored yet. Try again in 100ms.
+    await waitFor100msAndIdle();
+  }
+
+  let result = assertSnapshots(testSnapshot, refSnapshot,
+                               isEqual, null, testFile, refFile);
+  if (!result) {
+    info(`Gave up after ${tries} tries, ` +
+         `maxp=${gMaxPassingTries}, fact=${gTimeoutFactor}`);
+  }
+}
+
+runTests();
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_webkit_device_pixel_ratio.html b/layout/style/test/test_webkit_device_pixel_ratio.html
new file mode 100644
index 0000000000..69e50c58ff
--- /dev/null
+++ b/layout/style/test/test_webkit_device_pixel_ratio.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1176968
+-->
+<head>
+  <title>Test for Bug 1176968</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style>.zoom-test { visibility: hidden; }</style>
+  <style><!-- placeholder for dynamic additions --></style>
+</head>
+<body onload="run()">
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176968">Mozilla Bug 1176968</a>
+<div id="content" style="display: none">
+  
+</div>
+<script type="text/javascript">
+</script>
+<pre id="test">
+<div id="zoom1" class="zoom-test"></div>
+<div id="zoom2" class="zoom-test"></div>
+<div id="zoom3" class="zoom-test"></div>
+<script class="testbody" type="application/javascript">
+
+/** Test for Bug 1176968 **/
+
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+  function zoom(factor) {
+    var previous = SpecialPowers.getFullZoom(window);
+    SpecialPowers.setFullZoom(window, factor);
+    return previous;
+  }
+
+  function isVisible(divName) {
+    return window.getComputedStyle(document.getElementById(divName)).visibility == "visible";
+  }
+
+  var screenPixelsPerCSSPixel = window.devicePixelRatio;
+  var baseRatio = 1.0 * screenPixelsPerCSSPixel;
+  var doubleRatio = 2.0 * screenPixelsPerCSSPixel;
+  var halfRatio = 0.5 * screenPixelsPerCSSPixel;
+  var styleElem = document.getElementsByTagName("style")[1];
+  styleElem.textContent =
+      ["@media all and (-webkit-device-pixel-ratio: " + baseRatio + ") {",
+         "#zoom1 { visibility: visible; }",
+       "}",
+       "@media all and (-webkit-device-pixel-ratio: " + doubleRatio + ") {",
+         "#zoom2 { visibility: visible; }",
+       "}",
+       "@media all and (-webkit-device-pixel-ratio: " + halfRatio + ") {",
+         "#zoom3 { visibility: visible; }",
+       "}"
+      ].join("\n");
+
+  ok(isVisible("zoom1"), "Base ratio rule should apply at base zoom level");
+  ok(!isVisible("zoom2") && !isVisible("zoom3"), "no other rules should apply");
+  var origZoom = zoom(2);
+  ok(isVisible("zoom2"), "Double ratio rule should apply at double zoom level");
+  ok(!isVisible("zoom1") && !isVisible("zoom3"), "no other rules should apply");
+  zoom(0.5);
+  ok(isVisible("zoom3"), "Half ratio rule should apply at half zoom level");
+  ok(!isVisible("zoom1") && !isVisible("zoom2"), "no other rules should apply");
+  zoom(origZoom);
+
+  SimpleTest.finish();
+}
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/test_webkit_flex_display.html b/layout/style/test/test_webkit_flex_display.html
new file mode 100644
index 0000000000..2f329ed67d
--- /dev/null
+++ b/layout/style/test/test_webkit_flex_display.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1274096
+-->
+<head>
+  <title>Test for Bug 1274096</title>
+  <script src="/tests/SimpleTest/SimpleTest.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=1274096">Mozilla Bug 1274096</a>
+<div id="content" style="display: none">
+  <div id="testElem"></div>
+</div>
+<script type="text/javascript">
+</script>
+<pre id="test">
+<script class="testbody" type="application/javascript">
+
+/** Test for Bug 1274096 **/
+
+SimpleTest.waitForExplicitFinish();
+runTest();
+
+function runTest() {
+  testValue("display", "-webkit-flex", "flex");
+  testValue("display", "-webkit-inline-flex", "inline-flex");
+
+  SimpleTest.finish();
+}
+
+function testValue(propName, specifiedVal, serializedVal) {
+  var testElem = document.getElementById("testElem");
+  testElem.style[propName] = specifiedVal;
+
+  is(testElem.style[propName], serializedVal,
+     `CSS '${propName}:${specifiedVal} should serialize as '${serializedVal}'`);
+  is(window.getComputedStyle(testElem)[propName], serializedVal,
+     `CSS 'display:${specifiedVal} should compute to '${serializedVal}'`);
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/test/unstyled-frame.css b/layout/style/test/unstyled-frame.css
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/layout/style/test/unstyled-frame.css
diff --git a/layout/style/test/unstyled-frame.xml b/layout/style/test/unstyled-frame.xml
new file mode 100644
index 0000000000..833b4f112f
--- /dev/null
+++ b/layout/style/test/unstyled-frame.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="unstyled-frame.css" type="text/css"?>
+<!-- The root element is forced to display:block, so look at its child -->
+<root><child/></root>
diff --git a/layout/style/test/unstyled.css b/layout/style/test/unstyled.css
new file mode 100644
index 0000000000..82767f9b2f
--- /dev/null
+++ b/layout/style/test/unstyled.css
@@ -0,0 +1,2 @@
+/* we're testing computed style on elements without frames */
+root { display: none }
diff --git a/layout/style/test/unstyled.xml b/layout/style/test/unstyled.xml
new file mode 100644
index 0000000000..86b7c54acd
--- /dev/null
+++ b/layout/style/test/unstyled.xml
@@ -0,0 +1,3 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="unstyled.css" type="text/css"?>
+<root><child/></root>
diff --git a/layout/style/test/viewport_units_iframe.html b/layout/style/test/viewport_units_iframe.html
new file mode 100644
index 0000000000..fd71a3cd3e
--- /dev/null
+++ b/layout/style/test/viewport_units_iframe.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<title>viewport units test</title>
+<div id="vh" style="width: 100vh"></div>
+<div id="vw" style="width: 100vw"></div>
+<div id="vmin" style="width: 100vmin"></div>
+<div id="vmax" style="width: 100vmax"></div>
diff --git a/layout/style/test/visited-lying-inner.html b/layout/style/test/visited-lying-inner.html
new file mode 100644
index 0000000000..ad1dac7587
--- /dev/null
+++ b/layout/style/test/visited-lying-inner.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<title>Test document for test_visited_lying.html</title>
+<style>
+:link { color: blue }
+:visited { color: purple }
+</style>
+<div><a id="unvisitedlink" href="http://www.example.com/url-that-was-never-visited">unvisited link</a></div>
+<div><a id="visitedlink" href="http://www.example.com/url-that-was-never-visited">visited link</a></div>
diff --git a/layout/style/test/visited-pref-iframe.html b/layout/style/test/visited-pref-iframe.html
new file mode 100644
index 0000000000..31da176e44
--- /dev/null
+++ b/layout/style/test/visited-pref-iframe.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<title>iframe for test_visited_pref.html</title>
+<style>
+:link { color: blue }
+:visited { color: purple }
+</style>
+<a href="http://www.example.com/url-that-has-not-been-visited" id="link">link</a>
diff --git a/layout/style/test/visited_image_loading.sjs b/layout/style/test/visited_image_loading.sjs
new file mode 100644
index 0000000000..79c03d7b54
--- /dev/null
+++ b/layout/style/test/visited_image_loading.sjs
@@ -0,0 +1,83 @@
+function handleRequest(request, response) {
+  response.setHeader("Cache-Control", "no-cache", false);
+  var query = request.queryString;
+  switch (query) {
+    case "reset":
+      response.setHeader("Content-Type", "application/ecmascript", false);
+      setState("1l", "");
+      setState("1v", "");
+      setState("2l", "");
+      setState("2v", "");
+      break;
+    case "1l":
+    case "1v":
+    case "2l":
+    case "2v":
+      setState(query, getState(query) + "load");
+      response.setStatusLine("1.1", 302, "Found");
+      // redirect to a solid blue image
+      response.setHeader(
+        "Location",
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12NgYPgPAAEDAQDZqt2zAAAAAElFTkSuQmCC"
+      );
+      response.setHeader("Content-Type", "text/plain", false);
+      break;
+
+    case "waitforresult":
+      response.setHeader("Content-Type", "application/ecmascript", false);
+      response.write("var start = Date.now();\n");
+    // fall through!
+
+    case "waitforresult-internal":
+      response.setHeader("Content-Type", "application/ecmascript", false);
+      response.write(
+        "if ('" +
+          getState("1l") +
+          "' == 'load' && '" +
+          getState("1v") +
+          "' == '' && '" +
+          getState("2l") +
+          "' == 'load' && '" +
+          getState("2v") +
+          "' == '') { \n"
+      );
+      response.write("setTimeout(function() {\n");
+      response.write("var s = document.createElement('script');\n");
+      response.write("s.src = 'visited_image_loading.sjs?result';\n");
+      response.write("document.body.appendChild(s);");
+      response.write("}, Math.max(100, 2 * (Date.now() - start)));\n");
+      response.write("} else setTimeout(function() {\n");
+      response.write("var s = document.createElement('script');\n");
+      response.write(
+        "s.src = 'visited_image_loading.sjs?waitforresult-internal';\n"
+      );
+      response.write("document.body.appendChild(s);");
+      response.write("}, 10);\n");
+      break;
+
+    case "result":
+      response.setHeader("Content-Type", "application/ecmascript", false);
+      response.write(
+        "is('" +
+          getState("1l") +
+          "', 'load', 'image 1l should have been loaded once')\n"
+      );
+      response.write(
+        "is('" +
+          getState("1v") +
+          "', '', 'image 1v should not have been loaded')\n"
+      );
+      response.write(
+        "is('" +
+          getState("2l") +
+          "', 'load', 'image 2l should have been loaded once')\n"
+      );
+      response.write(
+        "is('" +
+          getState("2v") +
+          "', '', 'image 2v should not have been loaded')\n"
+      );
+      response.write("SimpleTest.finish()");
+      break;
+  }
+}
diff --git a/layout/style/test/visited_image_loading_frame.html b/layout/style/test/visited_image_loading_frame.html
new file mode 100644
index 0000000000..f919f5eb75
--- /dev/null
+++ b/layout/style/test/visited_image_loading_frame.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<title>Test for :visited image loading</title>
+<style type="text/css">
+
+:link { background-color: blue }
+:visited { background-color: purple }
+
+#link:link       { background-image: url("visited_image_loading.sjs?1l"); }
+#link:visited    { background-image: url("visited_image_loading.sjs?1v"); }
+#visited:link    { background-image: url("visited_image_loading.sjs?2l"); }
+#visited:visited { background-image: url("visited_image_loading.sjs?2v"); }
+
+</style>
+<a id="link" href="do-not-visit-this-link.html">unvisited link</a>
+<a id="visited" href="visited_image_loading_frame.html">visited link</a>
diff --git a/layout/style/test/visited_image_loading_frame_empty.html b/layout/style/test/visited_image_loading_frame_empty.html
new file mode 100644
index 0000000000..21579bb9ca
--- /dev/null
+++ b/layout/style/test/visited_image_loading_frame_empty.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<title>Test for :visited image loading</title>
+<style type="text/css">
+
+:link { background-color: blue }
+:visited { background-color: purple }
+
+#link:link       { background-image: url("visited_image_loading.sjs?1l"); }
+#link:visited    { background-image: url("visited_image_loading.sjs?1v"); }
+#visited:link    { background-image: url("visited_image_loading.sjs?2l"); }
+#visited:visited { background-image: url("visited_image_loading.sjs?2v"); }
+
+</style>
+<a id="link" href="do-not-visit-this-link.html"></a>
+<a id="visited" href="visited_image_loading_frame_empty.html"></a>