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
97
98
99
100
101
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1111633
-->
<head>
<title>Test template element in stale document.</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
<style>
:unresolved {
color: rgb(0, 0, 255);
background-color: rgb(0, 0, 255);
}
x-foo { color: rgb(255, 0, 0); }
[is="x-del"]:not(:unresolved) { color: rgb(255, 0, 0); }
[is="x-bar"]:not(:unresolved) { color: rgb(255, 0, 0); }
[is="x-bar"]:unresolved { background-color: rgb(255, 0, 0); }
x-baz:not(:unresolved) {
color: rgb(255, 0, 0);
background-color: rgb(255, 0, 0);
}
span { color: rgb(0,255,0); }
x-foo:unresolved + span { color: rgb(255,0,0); }
</style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1111633">Bug 1111633</a>
<div id="container"></div>
<x-foo id="foo"></x-foo>
<span id="span1">This text should be green</span>
<span id="bar" is="x-bar"></span>
<x-baz id="baz"></x-baz>
<span id="del" is="x-del"></span>
<script>
// Before define
var foo = document.querySelector('#foo');
is(getComputedStyle(foo).color, "rgb(0, 0, 255)", "foo - color");
is(getComputedStyle(foo).backgroundColor, "rgb(0, 0, 255)", "foo - backgroundColor");
var bar = document.querySelector('#bar');
is(getComputedStyle(bar).color, "rgb(0, 0, 255)", "bar - color");
is(getComputedStyle(bar).backgroundColor, "rgb(255, 0, 0)", "bar - backgroundColor");
var baz = document.querySelector('#baz');
is(getComputedStyle(baz).color, "rgb(0, 0, 255)", "baz - color");
is(getComputedStyle(baz).backgroundColor, "rgb(0, 0, 255)", "baz - backgroundColor");
var span1 = document.querySelector('#span1');
is(getComputedStyle(span1).color, "rgb(255, 0, 0)", "span1 - color");
customElements.define('x-foo', class extends HTMLElement {});
customElements.define('x-bar', class extends HTMLSpanElement {}, { extends: 'span' });
customElements.define('x-baz', class extends HTMLElement {});
// After define
is(getComputedStyle(foo).color, "rgb(255, 0, 0)",
"foo - color (after define)");
is(getComputedStyle(bar).color,
"rgb(255, 0, 0)", "bar - color (after define)");
is(getComputedStyle(baz).color,
"rgb(255, 0, 0)", "baz - color (after define)");
is(getComputedStyle(baz).backgroundColor,
"rgb(255, 0, 0)", "baz - backgroundColor (after define)");
is(getComputedStyle(span1).color, "rgb(0, 255, 0)", "span1 - color (after define)");
// After tree removal
var del = document.querySelector('#del');
is(getComputedStyle(del).color, "rgb(0, 0, 255)", "del - color");
var par = del.parentNode;
par.removeChild(del);
// Changing is attribute after creation should not change the type
// of a custom element, even if the element was removed and re-append to the tree.
del.setAttribute("is", "foobar");
par.appendChild(del);
is(getComputedStyle(del).color, "rgb(0, 0, 255)", "del - color (after reappend)");
class Del extends HTMLSpanElement {};
customElements.define('x-del', Del, { extends: 'span' });
// [is="x-del"] will not match any longer so the rule of span will apply
is(getComputedStyle(del).color, "rgb(0, 255, 0)", "del - color (after define)");
// but the element should have been upgraded:
ok(del instanceof Del, "element was upgraded correctly after changing |is|");
</script>
</body>
</html>
|
