Move document.defineElement to customElements.define
[WebKit-https.git] / LayoutTests / fast / custom-elements / attribute-changed-callback.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Custom Elements: attributeChangedCallback</title>
5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
6 <meta name="assert" content="attributeChangedCallback must be enqueued whenever custom element's attribute is added, changed or removed">
7 <link rel="help" href="https://w3c.github.io/webcomponents/spec/custom/#dfn-attribute-changed-callback">
8 <script src="../../resources/testharness.js"></script>
9 <script src="../../resources/testharnessreport.js"></script>
10 <link rel='stylesheet' href='../../resources/testharness.css'>
11 </head>
12 <body>
13 <div id="log"></div>
14 <script>
15
16 var argumentList = [];
17 class MyCustomElement extends HTMLElement {
18     attributeChangedCallback(name, oldValue, newValue, namespace) {
19         argumentList.push({arguments: arguments, value: this.getAttributeNS(namespace, name)});
20     }
21 }
22 customElements.define('my-custom-element', MyCustomElement);
23
24 test(function () {
25     var instance = document.createElement('my-custom-element');
26     argumentList = [];
27
28     instance.setAttribute('title', 'foo');
29     assert_equals(instance.getAttribute('title'), 'foo');
30     assert_equals(argumentList.length, 1);
31     assert_equals(argumentList[0].value, 'foo');
32     assert_array_equals(argumentList[0].arguments, ['title', null, 'foo', null]);
33
34     instance.removeAttribute('title');
35     assert_equals(instance.getAttribute('title'), null);
36     assert_equals(argumentList.length, 2);
37     assert_equals(argumentList[1].value, null);
38     assert_array_equals(argumentList[1].arguments, ['title', 'foo', null, null]);
39
40 }, 'setAttribute and removeAttribute must enqueue and invoke attributeChangedCallback');
41
42 test(function () {
43     var instance = document.createElement('my-custom-element');
44     argumentList = [];
45
46     instance.setAttributeNS('http://www.w3.org/2000/svg', 'title', 'hello');
47     assert_equals(instance.getAttribute('title'), 'hello');
48     assert_equals(argumentList.length, 1);
49     assert_equals(argumentList[0].value, 'hello');
50     assert_array_equals(argumentList[0].arguments, ['title', null, 'hello', 'http://www.w3.org/2000/svg']);
51
52     instance.removeAttributeNS('http://www.w3.org/2000/svg', 'title');
53     assert_equals(instance.getAttribute('title'), null);
54     assert_equals(argumentList.length, 2);
55     assert_equals(argumentList[1].value, null);
56     assert_array_equals(argumentList[1].arguments, ['title', 'hello', null, 'http://www.w3.org/2000/svg']);
57
58 }, 'setAttributeNS and removeAttributeNS must enqueue and invoke attributeChangedCallback');
59
60 test(function () {
61     var instance = document.createElement('my-custom-element');
62     argumentList = [];
63
64     var attr = document.createAttribute('id');
65     attr.value = 'bar';
66     instance.setAttributeNode(attr);
67
68     assert_equals(instance.getAttribute('id'), 'bar');
69     assert_equals(argumentList.length, 1);
70     assert_equals(argumentList[0].value, 'bar');
71     assert_array_equals(argumentList[0].arguments, ['id', null, 'bar', null]);
72
73     instance.removeAttributeNode(attr);
74     assert_equals(instance.getAttribute('id'), null);
75     assert_equals(argumentList.length, 2);
76     assert_equals(argumentList[1].value, null);
77     assert_array_equals(argumentList[1].arguments, ['id', 'bar', null, null]);
78
79 }, 'setAttributeNode and removeAttributeNS must enqueue and invoke attributeChangedCallback');
80
81 test(function () {
82     var instance = document.createElement('my-custom-element');
83     argumentList = [];
84
85     var attr = document.createAttributeNS('http://www.w3.org/2000/svg', 'r');
86     attr.value = '100';
87     instance.setAttributeNode(attr);
88
89     assert_equals(instance.getAttribute('r'), '100');
90     assert_equals(argumentList.length, 1);
91     assert_equals(argumentList[0].value, '100');
92     assert_array_equals(argumentList[0].arguments, ['r', null, '100', 'http://www.w3.org/2000/svg']);
93
94     instance.removeAttributeNode(attr);
95     assert_equals(instance.getAttribute('r'), null);
96     assert_equals(argumentList.length, 2);
97     assert_equals(argumentList[1].value, null);
98     assert_array_equals(argumentList[1].arguments, ['r', '100', null, 'http://www.w3.org/2000/svg']);
99
100 }, 'setAttributeNode and removeAttributeNS must enqueue and invoke attributeChangedCallback');
101
102 </script>
103 </body>
104 </html>