Google Git
Sign in
chromium / external / w3c / web-platform-tests / 06000cecb5cf248e8edc9e73ccb71b0ce8f09c44 / . / custom-elements / connected-callbacks.html
blob: d6e68262a850a9a952877264fdf64594e8025375 [file] [log] [blame]
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]1<!DOCTYPE html>
2<html>
3<head>
4<title>Custom Elements: connectedCallback</title>
5<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
6<meta name="assert" content="connectedCallback must be enqueued whenever custom element is inserted into a document">
7<link rel="help" href="https://w3c.github.io/webcomponents/spec/custom/#dfn-connected-callback">
8<script src="/resources/testharness.js"></script>
9<script src="/resources/testharnessreport.js"></script>
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]10<script src="resources/custom-elements-helpers.js"></script>
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]11</head>
12<body>
13<div id="log"></div>
14<script>
15
16var calls = [];
17class MyCustomElement extends HTMLElement {
18 connectedCallback() { calls.push('connected', this); }
19 disconnectedCallback() { calls.push('disconnected', this); }
20}
21customElements.define('my-custom-element', MyCustomElement);
22
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]23document_types().forEach(function (entry) {
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]24 var documentName = entry.name;
25 var getDocument = entry.create;
26
27 promise_test(function () {
28 return getDocument().then(function (doc) {
29 var instance = document.createElement('my-custom-element');
30 calls = [];
31 doc.documentElement.appendChild(instance);
32 assert_array_equals(calls, ['connected', instance]);
33 });
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]34 }, 'Inserting a custom element into ' + documentName + ' must enqueue and invoke connectedCallback');
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]35
36 promise_test(function () {
37 return getDocument().then(function (doc) {
38 var instance = document.createElement('my-custom-element');
39 var parent = document.createElement('div');
40 parent.appendChild(instance);
41 calls = [];
42 doc.documentElement.appendChild(parent);
43 assert_array_equals(calls, ['connected', instance]);
44 });
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]45 }, 'Inserting an ancestor of custom element into ' + documentName + ' must enqueue and invoke connectedCallback');
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]46
47 promise_test(function () {
48 return getDocument().then(function (doc) {
49 var instance = document.createElement('my-custom-element');
50 var host = doc.createElementNS('http://www.w3.org/1999/xhtml', 'div');
51 var shadowRoot = host.attachShadow({mode: 'closed'});
52 doc.documentElement.appendChild(host);
53
54 calls = [];
55 shadowRoot.appendChild(instance);
56 assert_array_equals(calls, ['connected', instance]);
57 });
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]58 }, 'Inserting a custom element into a shadow tree in ' + documentName + ' must enqueue and invoke connectedCallback');
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]59
60 promise_test(function () {
61 return getDocument().then(function (doc) {
62 var instance = document.createElement('my-custom-element');
63 var host = doc.createElementNS('http://www.w3.org/1999/xhtml', 'div');
64 var shadowRoot = host.attachShadow({mode: 'closed'});
65 shadowRoot.appendChild(instance);
66
67 calls = [];
68 doc.documentElement.appendChild(host);
69 assert_array_equals(calls, ['connected', instance]);
70 });
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]71 }, 'Inserting the shadow host of a custom element into ' + documentName + ' must enqueue and invoke connectedCallback');
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]72
73 promise_test(function () {
74 return getDocument().then(function (doc) {
75 var instance = document.createElement('my-custom-element');
76 var host = doc.createElementNS('http://www.w3.org/1999/xhtml', 'div');
77 var shadowRoot = host.attachShadow({mode: 'closed'});
78
79 calls = [];
80 shadowRoot.appendChild(instance);
81 assert_array_equals(calls, []);
82 });
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]83 }, 'Inserting a custom element into a detached shadow tree that belongs to ' + documentName + ' must not enqueue and invoke connectedCallback');
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]84});
85
86</script>
87</body>
88</html>