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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<!DOCTYPE html>
<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-defined">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<iframe id="iframe"></iframe>
<script>
const testList = [
{ tag_name: 'div', defined: true },
{ tag_name: 'a-a', defined: false },
{ tag_name: 'font-face', defined: true },
{ tag_name: 'abbr', is: 'my-abbr', defined: false },
{ tag_name: 'p', is: '', defined: false },
];
// Setup iframe to test the parser.
const neither = 'rgb(255, 0, 0)';
const defined = 'rgb(255, 165, 0)';
const not_defined = 'rgb(0, 0, 255)';
const iframe = document.getElementById("iframe");
iframe.srcdoc = `<style>
* { color:${neither}; }
:defined { color:${defined}; }
:not(:defined) { color:${not_defined}; }
</style>`
+ testList.map(d => `<${d.tag_name}${d.is !== undefined ? ' is=' + d.is : ''}></${d.tag_name}>`).join('');
setup({ explicit_done: true });
iframe.onload = () => {
const doc = iframe.contentDocument;
const doc_without_browsing_context = doc.implementation.createHTMLDocument();
for (const data of testList) {
// Test elements inserted by parser.
test_defined(data.defined, doc.getElementsByTagName(data.tag_name)[0],
`<${data.tag_name}${data.is ? ' is=' + data.is : ''}>`);
// Test DOM createElement() methods.
let try_upgrade = !data.defined && (data.is === undefined || data.is.length > 0);
test_defined_for_createElement(data.defined, try_upgrade, doc, data.tag_name, data.is);
// Documents without browsing context should behave the same.
test_defined_for_createElement(data.defined, false, doc_without_browsing_context, data.tag_name, data.is, 'Without browsing context: ');
}
done();
};
function test_defined_for_createElement(defined, should_test_change, doc, tag_name, is, description = '') {
let has_is = is !== undefined;
let is_desc = has_is ? `, { is: "${is}" }` : '';
// Test document.createElement().
let element = has_is ? doc.createElement(tag_name, { is: is }) : doc.createElement(tag_name);
doc.body.appendChild(element);
test_defined(defined, element, `${description}createElement("${tag_name}"${is_desc})`);
// Test document.createElementNS().
let html_element = has_is ? doc.createElementNS('http://www.w3.org/1999/xhtml', tag_name, { is: is })
: doc.createElementNS('http://www.w3.org/1999/xhtml', tag_name);
doc.body.appendChild(html_element);
test_defined(defined, html_element, `${description}createElementNS("http://www.w3.org/1999/xhtml", "${tag_name}"${is_desc})`);
// If the element namespace is not HTML, it should be "uncustomized"; i.e., "defined".
let svg_element = has_is ? doc.createElementNS('http://www.w3.org/2000/svg', tag_name, { is: is })
: doc.createElementNS('http://www.w3.org/2000/svg', tag_name);
doc.body.appendChild(svg_element);
test_defined(true, svg_element, `${description}createElementNS("http://www.w3.org/2000/svg", "${tag_name}"${is_desc})`);
// Test ":defined" changes when the custom element was defined.
if (should_test_change) {
let w = doc.defaultView;
assert_false(!w, 'defaultView required to test change');
if (is) {
w.customElements.define(is, class extends w.HTMLElement {}, { extends: tag_name });
} else {
w.customElements.define(tag_name, class extends w.HTMLElement {
constructor() { super(); }
});
}
test_defined(true, element, `Upgraded ${description}createElement("${tag_name}"${is_desc})`);
test_defined(true, html_element, `Upgraded ${description}createElementNS("http://www.w3.org/1999/xhtml", "${tag_name}"${is_desc})`);
}
}
function test_defined(expected, element, description) {
test(() => {
assert_equals(element.matches(':defined'), expected, 'matches(":defined")');
assert_equals(element.matches(':not(:defined)'), !expected, 'matches(":not(:defined")');
const view = element.ownerDocument.defaultView;
if (!view)
return;
const style = view.getComputedStyle(element);
assert_equals(style.color, expected ? defined : not_defined, 'getComputedStyle');
}, `${description} should ${expected ? 'be' : 'not be'} :defined`);
}
test(function () {
var log = [];
var instance = document.createElement('my-custom-element-2');
document.body.appendChild(instance);
assert_false(instance.matches(":defined"), "Prior to definition, instance should not match :defined");
customElements.define('my-custom-element-2',class extends HTMLElement {
constructor() {
assert_false(instance.matches(":defined"), "During construction, prior to super(), instance should not match :defined");
super();
log.push([this, 'begin']);
assert_false(this.matches(":defined"), "During construction, after super(), this should not match :defined");
log.push([this, 'end']);
}
});
assert_true(instance.matches(":defined"), "After construction, instance should match :defined");
assert_equals(log.length, 2);
assert_array_equals(log[0], [instance, 'begin']);
assert_array_equals(log[1], [instance, 'end']);
}, 'this.matches(:defined) should not match during an upgrade');
</script>
|
