-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathheadingoffset-polyfill-mutations.test.html
96 lines (87 loc) · 3.18 KB
/
headingoffset-polyfill-mutations.test.html
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
87
88
89
90
91
92
93
94
95
96
<html>
<body>
<div id="headingOffsetMutation" headingoffset="3">
<h1><!-- Level 2 --></h1>
</div>
<div headingoffset="1">
<h1 id="ariaLevelMutation" aria-level="3"><!-- Level 2 --></h1>
</div>
<div headingoffset="3">
<h1 id="ariaLevelRemoval" aria-level="6"><!-- Level 4 --></h1>
</div>
<template id="headingOffsetAddition">
<div id="headingOffsetNestedAddition" headingoffset="3">
<h1><!-- Level 4 --></h1>
<h1 aria-level="2"><!-- Level 2 --></h1>
</div>
</template>
<div id="shadowRootAddition"></div>
<closed-shadow-host title="container shadowroot with closed shadowroot">
<template shadowrootmode="closed">
<div headingoffset="2">
<h1><!-- Level 3 --></h1>
</div>
</template>
</closed-shadow-host>
<script>
globalThis.readyForTests = new Promise((resolve) => {
window.setTimeout(() => {
// Change `headingoffset` from 3 to 1
headingOffsetMutation.setAttribute("headingoffset", "1");
// Change `aria-level` from 3 to 2
ariaLevelMutation.setAttribute("aria-level", "2");
// Remove `aria-level`
ariaLevelRemoval.removeAttribute("aria-level");
// Insert an element with `headingoffset`
// Insert an element with `aria-level`
document.body.append(headingOffsetAddition.content.cloneNode(true));
// Insert a heading
const headingAddition = document.createElement("h2");
headingAddition.innerHTML = "<!-- Level 5 -->";
headingOffsetNestedAddition.append(headingAddition);
// Attach a shadow root
const shadowRoot = shadowRootAddition.attachShadow({ mode: "open" });
shadowRoot.innerHTML = `
<div headingoffset="2">
<h2><!-- Level 4 --></h2>
</div>
`;
// Insert a shadow host
const shadowHost = document.createElement("div");
const shadowHostRoot = shadowHost.attachShadow({ mode: "open" });
shadowHostRoot.innerHTML = `
<div headingoffset="2">
<h2><!-- Level 4 --></h2>
</div>
`;
document.body.append(shadowHost);
// Insert a child shadow host
const hostParent = document.createElement("div");
const childShadowHost = document.createElement("div");
const childShadowRoot = childShadowHost.attachShadow({
mode: "open",
});
childShadowRoot.innerHTML = `
<div headingoffset="2">
<h2><!-- Level 4 --></h2>
</div>
`;
hostParent.append(childShadowHost);
document.body.append(hostParent);
// Test a closed shadow root
class ClosedShadowHost extends HTMLElement {
constructor() {
super();
this.internals = this.attachInternals();
}
get shadowRoot() {
return this.internals.shadowRoot;
}
}
customElements.define("closed-shadow-host", ClosedShadowHost);
resolve();
}, 100);
});
</script>
</body>
</html>