Google Git
Sign in
chromium / external / w3c / web-platform-tests / 5f55f54f0cb925e5008ffc3362574fcd95f2b372 / . / custom-elements / disconnected-callbacks.html
blob: 7f5a4d0f8e76d495acfdedfe172ef5acfdac75b4 [file] [log] [blame]
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]1<!DOCTYPE html>
2<html>
3<head>
4<title>Custom Elements: disconnectedCallback</title>
5<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
6<meta name="assert" content="disconnectedCallback must be enqueued whenever custom element is removed from 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 doc.documentElement.appendChild(instance);
31 calls = [];
32 doc.documentElement.removeChild(instance);
33 assert_array_equals(calls, ['disconnected', instance]);
34 });
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]35 }, 'Removing a custom element from ' + documentName + ' must enqueue and invoke disconnectedCallback');
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]36
37 promise_test(function () {
38 return getDocument().then(function (doc) {
39 var instance = document.createElement('my-custom-element');
40 var parent = document.createElement('div');
41 parent.appendChild(instance);
42 doc.documentElement.appendChild(parent);
43 calls = [];
44 doc.documentElement.removeChild(parent);
45 assert_array_equals(calls, ['disconnected', instance]);
46 });
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]47 }, 'Removing an ancestor of custom element from ' + documentName + ' must enqueue and invoke disconnectedCallback');
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]48
49 promise_test(function () {
50 return getDocument().then(function (doc) {
51 var instance = document.createElement('my-custom-element');
52 var host = doc.createElementNS('http://www.w3.org/1999/xhtml', 'div');
53 var shadowRoot = host.attachShadow({mode: 'closed'});
54 doc.documentElement.appendChild(host);
55 shadowRoot.appendChild(instance);
56
57 calls = [];
58 shadowRoot.removeChild(instance);
59 assert_array_equals(calls, ['disconnected', instance]);
60 });
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]61 }, 'Removing a custom element from a shadow tree in ' + documentName + ' must enqueue and invoke disconnectedCallback');
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]62
63 promise_test(function () {
64 return getDocument().then(function (doc) {
65 var instance = document.createElement('my-custom-element');
66 var host = doc.createElementNS('http://www.w3.org/1999/xhtml', 'div');
67 var shadowRoot = host.attachShadow({mode: 'closed'});
68 shadowRoot.appendChild(instance);
69 doc.documentElement.appendChild(host);
70
71 calls = [];
72 doc.documentElement.removeChild(host);
73 assert_array_equals(calls, ['disconnected', instance]);
74 });
75 }, 'Removing the shadow host of a custom element from a' + documentName + ' must enqueue and invoke disconnectedCallback');
76
77 promise_test(function () {
78 return getDocument().then(function (doc) {
79 var instance = document.createElement('my-custom-element');
80 var host = doc.createElementNS('http://www.w3.org/1999/xhtml', 'div');
81 var shadowRoot = host.attachShadow({mode: 'closed'});
82 shadowRoot.appendChild(instance);
83
84 calls = [];
85 shadowRoot.removeChild(instance);
86 assert_array_equals(calls, []);
87 });
Ryosuke Niwac7fbe2d2016-10-06 06:19:47[diff] [blame]88 }, 'Removing a custom element from a detached shadow tree that belongs to ' + documentName + ' must not enqueue and invoke disconnectedCallback');
Ryosuke Niwae09776a2016-09-29 07:14:40[diff] [blame]89});
90
91</script>
92</body>
93</html>