1 files changed, 68 insertions, 0 deletions
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>