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
|
<!DOCTYPE html>
<title>CSSStyleSheet Disallow Import Rules</title>
<link rel="author" title="Erik Nordin" href="mailto:enordin@mozilla.com">
<link rel="help" href="https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-597733392">
<div id="target"></div>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script>
const greenStyleText = ".green { color: green; }";
const import_text = '@import url("support/constructable-import.css");';
function attachShadowDiv(host) {
const shadowRoot = host.attachShadow({mode: 'open'});
const shadowDiv = document.createElement("div");
shadowRoot.appendChild(shadowDiv);
return shadowDiv;
}
test(() => {
assert_throws_dom("SyntaxError", () => { (new CSSStyleSheet).insertRule(import_text) });
}, 'Inserting an @import rule through insertRule on a constructed stylesheet throws an exception');
promise_test(async t => {
const importUrl = "support/constructable-import.css";
const sheet = new CSSStyleSheet();
sheet.replaceSync(import_text);
await sheet.replace(import_text);
assert_throws_dom("SyntaxError", () => { sheet.insertRule(import_text) });
const timeAfterImportsInvoked = performance.now();
let link = document.createElement("link");
t.add_cleanup(() => { link.remove(); });
link.rel = "stylesheet";
link.href = importUrl;
await new Promise((resolve, reject) => {
link.addEventListener("load", resolve);
link.addEventListener("error", reject);
document.body.appendChild(link);
});
let entries = window.performance.getEntriesByType('resource').filter(entry => entry.name.includes(importUrl));
assert_equals(entries.length, 1, "There should be only one entry for the import URL");
assert_greater_than_equal(entries[0].startTime, timeAfterImportsInvoked, "The entry's start time should be after all throws");
}, "@import rules should not trigger any loads.")
promise_test(() => {
const span = document.createElement("span");
target.appendChild(span);
const shadowDiv = attachShadowDiv(span);
shadowDiv.classList.add("green");
const sheet = new CSSStyleSheet();
span.shadowRoot.adoptedStyleSheets = [sheet];
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");
const sheet_promise = sheet.replace(`${import_text} ${greenStyleText}`);
return sheet_promise.then((sheet) => {
assert_equals(sheet.cssRules.length, 1);
assert_equals(sheet.cssRules[0].cssText, greenStyleText);
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 128, 0)");
}).catch((reason) => {
assert_unreached(`Promise was rejected (${reason}) when it should have been resolved`);
});
}, '@import rules are not parsed in CSSStyleSheet.replace');
test(() => {
const span = document.createElement("span");
target.appendChild(span);
const shadowDiv = attachShadowDiv(span);
shadowDiv.classList.add("green");
const sheet = new CSSStyleSheet();
span.shadowRoot.adoptedStyleSheets = [sheet];
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");
// Replace and assert that the imported rule is applied.
const sheet_promise = sheet.replaceSync(`${import_text} ${greenStyleText}`);
assert_equals(sheet.cssRules.length, 1);
assert_equals(sheet.cssRules[0].cssText, greenStyleText);
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 128, 0)");
}, '@import rules are not parsed in CSSStyleSheet.replaceSync');
</script>
|
