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
|
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:bar="bar">
<head>
<title>Test for Shadow DOM innerHTML setter in XML</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
<![CDATA[
// We define our custom elements lazily so we don't mess
// with the DOM during parsing.
customElements.define("custom-el-1",
class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
try { this.shadowRoot.innerHTML = "<span/>"; } catch (e) {}
}
});
function defineElements() {
// We define our custom elements whose behavior involves
// ancestors of our parent lazily, because otherwise the
// constructor runs before the element is in the DOM and has
// the ancestors set up.
customElements.define("custom-el-2",
class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
try { this.shadowRoot.innerHTML = "<span/>"; } catch (e) {}
}
});
customElements.define("custom-el-with-prefix",
class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
try {
this.shadowRoot.innerHTML = "<bar:span/>";
} catch (e) {
// Test will fail due to us not having the kid
}
}
});
}
]]>
</script>
</head>
<body>
<custom-el-1 id="htmlDefault"/>
<span xmlns="foo" xmlns:html="http://www.w3.org/1999/xhtml">
<html:custom-el-2 id="fooDefault"/>
</span>
<custom-el-with-prefix id="prefixTest"/>
<script>
<![CDATA[
const htmlNS = "http://www.w3.org/1999/xhtml";
test(() => {
var el = document.getElementById("htmlDefault");
var kid = el.shadowRoot.firstChild;
assert_equals(kid.namespaceURI, htmlNS,
"Kid's namespace should be our default");
}, "InnerHTML behavior on custom element in default XHTML namespace");
test(defineElements, "Setting up the custom elements");
test(() => {
var el = document.getElementById("fooDefault");
var kid = el.shadowRoot.firstChild;
assert_equals(kid.namespaceURI, "foo",
"Kid's namespace should be our default");
}, "InnerHTML behavior on custom element in default 'foo' namespace");
test(() => {
var el = document.getElementById("prefixTest");
var kid = el.shadowRoot.firstChild;
assert_equals(kid.namespaceURI, "bar",
"Kid's namespace should be based on ancestor prefix");
}, "InnerHTML behavior with prefixes on custom element");
]]>
</script>
</body>
</html>
|
