test_stylesheet_clone_import_rule.html (3165B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 4 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/> 5 6 <style>div { color: green; }</style> 7 8 <link id="theOnlyLink" rel="stylesheet" type="text/css" href="import_useless1.css"> 9 10 <div id="theOnlyDiv">This text will change colors several times.</div> 11 12 <script> 13 SimpleTest.waitForExplicitFinish(); 14 15 const Cu = SpecialPowers.Components.utils; 16 17 18 let theOnlyDiv = document.getElementById("theOnlyDiv"); 19 let link = document.getElementById("theOnlyLink"); 20 let stylesheet = link.sheet; 21 22 runTest().catch(function(reason) { 23 ok(false, "Failed with reason: " + reason); 24 }).then(function() { 25 SimpleTest.finish(); 26 }); 27 28 function cssRulesToString(cssRules) { 29 return Array.from(cssRules).map(rule => rule.cssText).join(''); 30 } 31 32 async function runTest() { 33 // Test that the div is initially red (from base.css) 34 is(getComputedStyle(theOnlyDiv).color, "rgb(0, 128, 0)", "div begins as green."); 35 36 // Insert some import rules. 37 stylesheet.insertRule('@import url("import_useless2.css")', 0); 38 stylesheet.insertRule('@import url("import_useless2.css")', 1); 39 40 // Do some sanity checking of our import rules. 41 let primaryRules = stylesheet.cssRules; 42 await SimpleTest.promiseWaitForCondition(function() { 43 try { 44 primaryRules[0].styleSheet.cssRules; 45 primaryRules[1].styleSheet.cssRules; 46 return true; 47 } catch (ex) { 48 return false; 49 } 50 }); 51 52 // Make some helper variables for the comparison tests. 53 let importSheet1 = primaryRules[0].styleSheet; 54 let rules1 = importSheet1.cssRules; 55 56 let importSheet2 = primaryRules[1].styleSheet; 57 let rules2 = importSheet2.cssRules; 58 59 // Confirm that these two sheets are meaningfully the same. 60 is(cssRulesToString(rules1), cssRulesToString(rules2), "Cloned sheet rules are equivalent."); 61 62 // Add a color-changing rule to the first stylesheet. 63 importSheet1.insertRule('div { color: blue; }'); 64 rules1 = importSheet1.cssRules; 65 66 // And make sure that it has an effect. 67 is(getComputedStyle(theOnlyDiv).color, "rgb(0, 0, 255)", "div becomes blue."); 68 69 // Make sure that the two sheets have different rules now. 70 isnot(cssRulesToString(rules1), cssRulesToString(rules2), "Cloned sheet rules are no longer equivalent."); 71 72 // Add a color-changing rule to the second stylesheet (that will mask the first). 73 importSheet2.insertRule('div { color: red; }'); 74 // And make sure that it has an effect. 75 is(getComputedStyle(theOnlyDiv).color, "rgb(255, 0, 0)", "div becomes red."); 76 77 // Delete the second sheet by removing the import rule, and make sure the color changes back. 78 stylesheet.deleteRule(1); 79 is(getComputedStyle(theOnlyDiv).color, "rgb(0, 0, 255)", "div goes back to blue."); 80 81 // Delete the first sheet by removing the import rule, and make sure the color changes back. 82 stylesheet.deleteRule(0); 83 is(getComputedStyle(theOnlyDiv).color, "rgb(0, 128, 0)", "div goes back to green."); 84 } 85 </script> 86 </html>