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
|
// Looks for <template> elements, and runs each test in turn, for example:
//
// <template data-name="Example test">
// <style>
// @function --f() returns <length> {
// result: calc(1px + 1px);
// }
// #target {
// --actual: --f();
// --expected: 2px;
// }
// </style>
// </template>
//
// The test passes if the computed value of --actual matches
// the computed value of --expected on #target.
//
// Elements <div id=target> and <div=main> are assumed to exist.
function test_all_templates() {
let templates = document.querySelectorAll('template');
for (let template of templates) {
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
let cs = getComputedStyle(target);
let actual = cs.getPropertyValue('--actual');
let expected = cs.getPropertyValue('--expected');
assert_equals(actual, expected);
}, template.getAttribute('data-name'));
}
}
// Within an array of elements, find an element with id=target (recursively,
// including shadows).
function find_target(elements) {
for (let e of (elements ?? [])) {
let t = e.id == 'target' ? e : null;
t ??= find_target(e.children);
t ??= find_target(e.shadowRoot?.children);
if (t) {
return t;
}
}
return null;
}
// Similar to test_all_templates(), but treats each <div data-name="...">
// as a test, and lets ShadowDOM do the "inflation".
function test_all_shadows() {
let hosts = document.querySelectorAll('div[data-name]');
for (let host of hosts) {
test((t) => {
let target = find_target([host]);
assert_true(target != null);
let cs = getComputedStyle(target);
let actual = cs.getPropertyValue('--actual');
let expected = cs.getPropertyValue('--expected');
assert_equals(actual, expected);
}, host.getAttribute('data-name'));
}
}
|
