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