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
|
<!DOCTYPE html>
<html>
<head>
<title>@scope - implicit scope root (external sheet)</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div class="a outside"></div>
<div id=main></div>
<div class="a outside"></div>
<template id=templateLink>
<div id=root>
<link id=importElement rel="stylesheet" href="resources/scope.css">
<div class=a></div>
</div>
</template>
<template id=templateImport>
<div id=root>
<style id="importElement">
@import url("resources/scope.css");
</style>
<div class=a></div>
</div>
</template>
<script>
function test_external(template_element, description) {
promise_test(async t => {
t.add_cleanup(() => main.replaceChildren());
const cloned = template_element.content.cloneNode(true);
const importElement = cloned.querySelector('#importElement');
const p = new Promise((resolve, reject) => importElement.addEventListener('load', () => {
try {
assert_equals(getComputedStyle(root).zIndex, '1');
assert_equals(getComputedStyle(document.querySelector('#root > .a')).zIndex, '2');
let outside = document.querySelectorAll('.outside');
assert_equals(outside.length, 2);
for (let div of outside) {
assert_equals(getComputedStyle(div).zIndex, 'auto');
}
resolve();
} catch(e) {
reject(e);
}
}));
main.append(cloned);
return p;
}, description);
}
test_external(templateLink, '@scope with external stylesheet through link element');
test_external(templateImport, '@scope with external stylesheet through @import');
</script>
</body>
</html>
|
