<!DOCTYPE html> <html> <head> <title>Custom Elements: Upgrading custom elements should enqueue attributeChanged and connected callbacks</title> <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> <meta name="assert" content="Upgrading custom elements should enqueue attributeChanged and connected callbacksml"> <meta name="help" content="https://html.spec.whatwg.org/#upgrades"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="../resources/custom-elements-helpers.js"></script> </head> <body> <div id="log"></div> <script> setup({allow_uncaught_exception:true}); test_with_window(function (contentWindow) { const contentDocument = contentWindow.document; contentDocument.write('<test-element id="some" title="This is a test">'); const undefinedElement = contentDocument.querySelector('test-element'); assert_equals(Object.getPrototypeOf(undefinedElement), contentWindow.HTMLElement.prototype); let log = []; class TestElement extends contentWindow.HTMLElement { constructor() { super(); log.push(create_constructor_log(this)); } attributeChangedCallback(...args) { log.push(create_attribute_changed_callback_log(this, ...args)); } static get observedAttributes() { return ['id', 'title']; } } contentWindow.customElements.define('test-element', TestElement); assert_equals(Object.getPrototypeOf(undefinedElement), TestElement.prototype); assert_equals(log.length, 3); assert_constructor_log_entry(log[0], undefinedElement); assert_attribute_log_entry(log[1], {name: 'id', oldValue: null, newValue: 'some', namespace: null}); assert_attribute_log_entry(log[2], {name: 'title', oldValue: null, newValue: 'This is a test', namespace: null}); }, 'Upgrading a custom element must enqueue attributeChangedCallback on each attribute'); test_with_window(function (contentWindow) { const contentDocument = contentWindow.document; contentDocument.write('<test-element id="some" title="This is a test" class="foo">'); const undefinedElement = contentDocument.querySelector('test-element'); assert_equals(Object.getPrototypeOf(undefinedElement), contentWindow.HTMLElement.prototype); let log = []; class TestElement extends contentWindow.HTMLElement { constructor() { super(); log.push(create_constructor_log(this)); } attributeChangedCallback(...args) { log.push(create_attribute_changed_callback_log(this, ...args)); } static get observedAttributes() { return ['class', 'id']; } } contentWindow.customElements.define('test-element', TestElement); assert_equals(Object.getPrototypeOf(undefinedElement), TestElement.prototype); assert_equals(log.length, 3); assert_constructor_log_entry(log[0], undefinedElement); assert_attribute_log_entry(log[1], {name: 'id', oldValue: null, newValue: 'some', namespace: null}); assert_attribute_log_entry(log[2], {name: 'class', oldValue: null, newValue: 'foo', namespace: null}); }, 'Upgrading a custom element not must enqueue attributeChangedCallback on unobserved attributes'); test_with_window(function (contentWindow) { const contentDocument = contentWindow.document; contentDocument.write('<test-element id="some" title="This is a test" class="foo">'); const undefinedElement = contentDocument.querySelector('test-element'); assert_equals(Object.getPrototypeOf(undefinedElement), contentWindow.HTMLElement.prototype); let log = []; class TestElement extends contentWindow.HTMLElement { constructor() { super(); log.push(create_constructor_log(this)); } connectedCallback(...args) { log.push(create_connected_callback_log(this, ...args)); } } contentWindow.customElements.define('test-element', TestElement); assert_equals(Object.getPrototypeOf(undefinedElement), TestElement.prototype); assert_equals(log.length, 2); assert_constructor_log_entry(log[0], undefinedElement); assert_connected_log_entry(log[1], undefinedElement); }, 'Upgrading a custom element must enqueue connectedCallback if the element in the document'); test_with_window(function (contentWindow) { const contentDocument = contentWindow.document; contentDocument.write('<test-element id="some" title="This is a test" class="foo">'); const undefinedElement = contentDocument.querySelector('test-element'); assert_equals(Object.getPrototypeOf(undefinedElement), contentWindow.HTMLElement.prototype); let log = []; class TestElement extends contentWindow.HTMLElement { constructor() { super(); log.push(create_constructor_log(this)); } connectedCallback(...args) { log.push(create_connected_callback_log(this, ...args)); } attributeChangedCallback(...args) { log.push(create_attribute_changed_callback_log(this, ...args)); } static get observedAttributes() { return ['class', 'id']; } } contentWindow.customElements.define('test-element', TestElement); assert_equals(Object.getPrototypeOf(undefinedElement), TestElement.prototype); assert_equals(log.length, 4); assert_constructor_log_entry(log[0], undefinedElement); assert_attribute_log_entry(log[1], {name: 'id', oldValue: null, newValue: 'some', namespace: null}); assert_attribute_log_entry(log[2], {name: 'class', oldValue: null, newValue: 'foo', namespace: null}); assert_connected_log_entry(log[3], undefinedElement); }, 'Upgrading a custom element must enqueue attributeChangedCallback before connectedCallback'); test_with_window(function (contentWindow) { const contentDocument = contentWindow.document; contentDocument.write('<test-element id="some" title="This is a test" class="foo">'); const undefinedElement = contentDocument.querySelector('test-element'); assert_equals(Object.getPrototypeOf(undefinedElement), contentWindow.HTMLElement.prototype); let log = []; class TestElement extends contentWindow.HTMLElement { constructor() { super(); log.push(create_constructor_log(this)); throw 'Exception thrown as a part of test'; } connectedCallback(...args) { log.push(create_connected_callback_log(this, ...args)); } attributeChangedCallback(...args) { log.push(create_attribute_changed_callback_log(this, ...args)); } static get observedAttributes() { return ['class', 'id']; } } contentWindow.customElements.define('test-element', TestElement); assert_equals(Object.getPrototypeOf(undefinedElement), TestElement.prototype); assert_equals(log.length, 1); assert_constructor_log_entry(log[0], undefinedElement); }, 'Upgrading a custom element must not invoke attributeChangedCallback and connectedCallback when the element failed to upgrade'); </script> </body> </html>