1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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>
|
