test_stylesheet_clone_import_rule.html

Enable keyboard shortcuts

<!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>