| <!DOCTYPE html> |
| <title>Custom elements: performing a microtask checkpoint after construction</title> |
| <meta name="author" title="Domenic Denicola" href="mailto:d@domenic.me"> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#concept-upgrade-an-element"> |
| <link rel="help" href="https://dom.spec.whatwg.org/#concept-create-element"> |
| <link rel="help" href="https://github.com/whatwg/html/issues/2381"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <div id="log"></div> |
| |
| <x-upgrade></x-upgrade> |
| |
| <script> |
| "use strict"; |
| setup({ allow_uncaught_exception: true }); |
| |
| window.doMicrotasks = (callback1, callback2 = callback1) => { |
| Promise.resolve().then(callback1); |
| |
| const mo = new MutationObserver(callback2); |
| const node = document.createTextNode(""); |
| mo.observe(node, { characterData: true }); |
| node.data = "x"; |
| }; |
| |
| window.logMicrotasks = events => { |
| window.doMicrotasks(() => events.push("promise microtask"), |
| () => events.push("MutationObserver microtask")); |
| }; |
| |
| window.flushAsyncEvents = () => { |
| return new Promise(resolve => step_timeout(resolve, 0)); |
| }; |
| |
| window.x0Events = []; |
| customElements.define("x-0", class extends HTMLElement { |
| constructor() { |
| super(); |
| logMicrotasks(window.x0Events); |
| } |
| }); |
| </script> |
| |
| <x-0></x-0> |
| |
| <script> |
| "use strict"; |
| |
| test(() => { |
| assert_array_equals(window.x0Events, ["promise microtask", "MutationObserver microtask"]); |
| }, "Microtasks evaluate immediately when the stack is empty inside the parser"); |
| |
| customElements.define("x-bad", class extends HTMLElement { |
| constructor() { |
| super(); |
| doMicrotasks(() => this.setAttribute("attribute", "value")); |
| } |
| }); |
| </script> |
| |
| <x-bad></x-bad> |
| |
| <script> |
| "use strict"; |
| |
| test(() => { |
| const xBad = document.querySelector("x-bad"); |
| assert_false(xBad.hasAttribute("attribute"), "The attribute must not be present"); |
| assert_true(xBad instanceof HTMLUnknownElement, "The element must be a HTMLUnknownElement"); |
| }, "Microtasks evaluate immediately when the stack is empty inside the parser, causing the " + |
| "checks on no attributes to fail") |
| |
| promise_test(() => { |
| const events = []; |
| customElements.define("x-1", class extends HTMLElement { |
| constructor() { |
| super(); |
| logMicrotasks(events); |
| } |
| }); |
| |
| document.createElement("x-1"); |
| events.push("after"); |
| |
| return flushAsyncEvents().then(() => { |
| assert_array_equals(events, ["after", "promise microtask", "MutationObserver microtask"]); |
| }); |
| }, "Microtasks evaluate afterward when the stack is not empty using createElement()"); |
| |
| promise_test(() => { |
| const events = []; |
| class X2 extends HTMLElement { |
| constructor() { |
| super(); |
| logMicrotasks(events); |
| } |
| } |
| customElements.define("x-2", X2); |
| |
| new X2(); |
| events.push("after"); |
| |
| return flushAsyncEvents().then(() => { |
| assert_array_equals(events, ["after", "promise microtask", "MutationObserver microtask"]); |
| }); |
| }, "Microtasks evaluate afterward when the stack is not empty using the constructor"); |
| |
| promise_test(() => { |
| const events = []; |
| customElements.define("x-upgrade", class extends HTMLElement { |
| constructor() { |
| super(); |
| logMicrotasks(events); |
| } |
| }); |
| events.push("after"); |
| |
| return flushAsyncEvents().then(() => { |
| assert_array_equals(events, ["after", "promise microtask", "MutationObserver microtask"]); |
| }); |
| }, "Microtasks evaluate afterward when the stack is not empty due to upgrades"); |
| </script> |