| <!DOCTYPE html> |
| <title>Custom Elements: Create an element when definition is non-null and synchronous flag not set</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="resources/custom-elements-helpers.js"></script> |
| <body> |
| <script> |
| 'use strict'; |
| |
| (() => { |
| // "Upgrade an element" |
| // https://html.spec.whatwg.org/multipage/scripting.html#upgrades |
| |
| // 1. For each attribute in element's attribute list, in order, enqueue a |
| // custom element callback reaction with element, callback name |
| // "attributeChangedCallback", and an argument list containing attribute's |
| // local name, null, attribute's value, and attribute's namespace. |
| |
| // 2. If element is currently in a shadow-including document, then enqueue a |
| // custom element callback reaction with element, callback name |
| // "connectedCallback", and an empty argument list. |
| |
| const constructor = 'constructor'; |
| const connected = 'connected'; |
| const disconnected = 'disconnected'; |
| const attributeChanged = 'attributeChanged'; |
| |
| function define_logger(w, observedAttributes) { |
| let logs = []; |
| w.customElements.define('a-a', class extends w.HTMLElement { |
| constructor() { super(); logs.push([constructor, this, arguments]); } |
| connectedCallback() { logs.push([connected, this, arguments]); } |
| disconnectedCallback() { logs.push([disconnected, this, arguments]); } |
| static get observedAttributes() { return observedAttributes; } |
| attributeChangedCallback() { logs.push([attributeChanged, this, arguments]); } |
| }); |
| return logs; |
| } |
| |
| function assert_log_is_type(logs, i, type, element, argv) { |
| assert_equals(logs[i][0], type, `[${i}] should be ${type}`); |
| assert_equals(logs[i][1], element, `this in ${type} should be the element`); |
| if (argv) { |
| assert_array_equals(logs[i][2], argv, `${type} should have arguments ${argv}`); |
| } else { |
| assert_equals(logs[i][2].length, 0, `${type} should have no arguments`); |
| } |
| } |
| |
| test_with_window(w => { |
| let document = w.document; |
| let element = document.createElement('a-a'); |
| document.body.appendChild(element); |
| let logs = define_logger(w); |
| assert_log_is_type(logs, 0, constructor, element); |
| assert_log_is_type(logs, 1, connected, element); |
| assert_equals(logs.length, 2); |
| }, 'upgrade should enqueue connectedCallback'); |
| |
| test_with_window(w => { |
| let document = w.document; |
| let element = document.createElement('a-a'); |
| element.setAttribute('x', '1'); |
| element.setAttribute('y', '2'); |
| element.setAttribute('z', '3'); |
| document.body.appendChild(element); |
| let logs = define_logger(w, ['x', 'y']); |
| assert_log_is_type(logs, 0, constructor, element); |
| assert_log_is_type(logs, 1, attributeChanged, element, ['x', null, '1', '']); |
| assert_log_is_type(logs, 2, attributeChanged, element, ['y', null, '2', '']); |
| assert_log_is_type(logs, 3, connected, element); |
| assert_equals(logs.length, 4); |
| }, 'upgrade should enqueue attributeChangedCallback and connectedCallback'); |
| |
| test_with_window(w => { |
| let document = w.document; |
| let element = document.createElement('a-a'); |
| element.setAttribute('x', '1'); |
| document.body.appendChild(element); |
| let logs = define_logger(w, ['x', 'y']); |
| |
| logs.length = 0; |
| element.setAttribute('z', '0'); |
| element.setAttribute('y', '2'); |
| element.setAttribute('x', '9'); |
| assert_log_is_type(logs, 0, attributeChanged, element, ['y', null, '2', '']); |
| assert_log_is_type(logs, 1, attributeChanged, element, ['x', '1', '9', '']); |
| assert_equals(logs.length, 2); |
| }, 'setAttribute should enqueue attributeChangedCallback'); |
| |
| test_with_window(w => { |
| let document = w.document; |
| let element = document.createElement('a-a'); |
| document.body.appendChild(element); |
| let logs = define_logger(w, ['style']); |
| |
| logs.length = 0; |
| element.style.color = 'red'; |
| assert_equals(logs.length, 1); |
| assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'color: red;', '']); |
| |
| element.style.color = 'green'; |
| assert_equals(logs.length, 2); |
| assert_log_is_type(logs, 1, attributeChanged, element, ['style', 'color: red;', 'color: green;', '']); |
| |
| element.style.color = ''; |
| assert_equals(logs.length, 3); |
| assert_log_is_type(logs, 2, attributeChanged, element, ['style', 'color: green;', null, '']); |
| }, 'style.color should enqueue attributeChangedCallback for style attribute'); |
| |
| test_with_window(w => { |
| let document = w.document; |
| let element = document.createElement('a-a'); |
| document.body.appendChild(element); |
| let logs = define_logger(w, ['style']); |
| |
| logs.length = 0; |
| element.style.cssText = 'color: red'; |
| assert_equals(logs.length, 1); |
| assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'color: red;', '']); |
| }, 'style.cssText should enqueue attributeChangedCallback for style attribute'); |
| |
| test_with_window(w => { |
| let document = w.document; |
| let element = document.createElement('a-a'); |
| document.body.appendChild(element); |
| let logs = define_logger(w, ['style']); |
| |
| logs.length = 0; |
| element.style.setProperty('color', 'red'); |
| assert_equals(logs.length, 1); |
| assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'color: red;', '']); |
| |
| element.style.removeProperty('color', 'red'); |
| assert_equals(logs.length, 2); |
| assert_log_is_type(logs, 1, attributeChanged, element, ['style', 'color: red;', null, '']); |
| }, 'style.setProperty/removeProperty should enqueue attributeChangedCallback for style attribute'); |
| |
| test_with_window(w => { |
| let document = w.document; |
| let element = document.createElement('a-a'); |
| document.body.appendChild(element); |
| let logs = define_logger(w, ['style']); |
| |
| logs.length = 0; |
| element.style.cssFloat = 'left'; |
| assert_equals(logs.length, 1); |
| assert_log_is_type(logs, 0, attributeChanged, element, ['style', null, 'float: left;', '']); |
| }, 'style.cssFloat should enqueue attributeChangedCallback for style attribute'); |
| |
| test_with_window(w => { |
| let document = w.document; |
| let element = document.createElement('a-a'); |
| document.body.appendChild(element); |
| let logs = define_logger(w, ['lang']); |
| |
| logs.length = 0; |
| element.lang = 'ja-jp'; |
| assert_equals(logs.length, 1); |
| assert_log_is_type(logs, 0, attributeChanged, element, ['lang', null, 'ja-jp', '']); |
| }, 'lang property setter should enqueue attributeChangedCallback for lang attribute'); |
| |
| test_with_window(w => { |
| let document = w.document; |
| let element = document.createElement('a-a'); |
| element.setAttribute('x', '1'); |
| document.body.appendChild(element); |
| let logs = define_logger(w, ['x']); |
| |
| logs.length = 0; |
| element.removeAttribute('x'); |
| assert_log_is_type(logs, 0, attributeChanged, element, ['x', '1', null, '']); |
| assert_equals(logs.length, 1); |
| }, 'removeAttribute should enqueue attributeChangedCallback'); |
| |
| test_with_window(w => { |
| let document = w.document; |
| let element = document.createElement('a-a'); |
| document.body.appendChild(element); |
| let logs = define_logger(w); |
| |
| logs.length = 0; |
| element.remove(); |
| assert_log_is_type(logs, 0, disconnected, element); |
| assert_equals(logs.length, 1); |
| }, 'remove should enqueue disconnectedCallback'); |
| })(); |
| </script> |
| </body> |
