diff options
Diffstat (limited to 'layout/style/test/chrome/test_stylesheet_clone_import_rule.html')
-rw-r--r-- | layout/style/test/chrome/test_stylesheet_clone_import_rule.html | 86 |
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> |