reaction-timing.html (4194B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Custom Elements: Custom element reactions must be invoked before returning to author scripts</title> 5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> 6 <meta name="assert" content="Custom element reactions must be invoked before returning to author scripts"> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#invoke-custom-element-reactions"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body> 12 <div id="log"></div> 13 <script> 14 15 class MyCustomElement extends HTMLElement { 16 attributeChangedCallback(...args) { 17 this.handler(...args); 18 } 19 20 handler() { } 21 } 22 MyCustomElement.observedAttributes = ['data-title', 'title']; 23 customElements.define('my-custom-element', MyCustomElement); 24 25 test(function () { 26 var instance = document.createElement('my-custom-element'); 27 var anotherInstance = document.createElement('my-custom-element'); 28 29 var callbackOrder = []; 30 instance.handler = function () { 31 callbackOrder.push([this, 'begin']); 32 anotherInstance.setAttribute('data-title', 'baz'); 33 callbackOrder.push([this, 'end']); 34 } 35 anotherInstance.handler = function () { 36 callbackOrder.push([this, 'begin']); 37 callbackOrder.push([this, 'end']); 38 } 39 40 instance.setAttribute('title', 'foo'); 41 assert_equals(callbackOrder.length, 4); 42 43 assert_array_equals(callbackOrder[0], [instance, 'begin']); 44 assert_array_equals(callbackOrder[1], [anotherInstance, 'begin']); 45 assert_array_equals(callbackOrder[2], [anotherInstance, 'end']); 46 assert_array_equals(callbackOrder[3], [instance, 'end']); 47 48 }, 'setAttribute and removeAttribute must enqueue and invoke attributeChangedCallback'); 49 50 test(function () { 51 var instance = document.createElement('my-custom-element'); 52 var anotherInstance = document.createElement('my-custom-element'); 53 54 var callbackOrder = []; 55 instance.handler = function () { 56 callbackOrder.push([this, 'begin']); 57 anotherInstance.toggleAttribute('data-title'); 58 callbackOrder.push([this, 'end']); 59 } 60 anotherInstance.handler = function () { 61 callbackOrder.push([this, 'begin']); 62 callbackOrder.push([this, 'end']); 63 } 64 65 instance.toggleAttribute('title'); 66 assert_equals(callbackOrder.length, 4); 67 68 assert_array_equals(callbackOrder[0], [instance, 'begin']); 69 assert_array_equals(callbackOrder[1], [anotherInstance, 'begin']); 70 assert_array_equals(callbackOrder[2], [anotherInstance, 'end']); 71 assert_array_equals(callbackOrder[3], [instance, 'end']); 72 73 }, 'toggleAttribute must enqueue and invoke attributeChangedCallback'); 74 75 test(function () { 76 var shouldCloneAnotherInstance = false; 77 var anotherInstanceClone; 78 var log = []; 79 80 class SelfCloningElement extends HTMLElement { 81 constructor() { 82 super(); 83 log.push([this, 'begin']); 84 if (shouldCloneAnotherInstance) { 85 shouldCloneAnotherInstance = false; 86 anotherInstanceClone = anotherInstance.cloneNode(false); 87 } 88 log.push([this, 'end']); 89 } 90 } 91 customElements.define('self-cloning-element', SelfCloningElement); 92 93 var instance = document.createElement('self-cloning-element'); 94 var anotherInstance = document.createElement('self-cloning-element'); 95 shouldCloneAnotherInstance = true; 96 97 assert_equals(log.length, 4); 98 var instanceClone = instance.cloneNode(false); 99 100 assert_equals(log.length, 8); 101 assert_array_equals(log[0], [instance, 'begin']); 102 assert_array_equals(log[1], [instance, 'end']); 103 assert_array_equals(log[2], [anotherInstance, 'begin']); 104 assert_array_equals(log[3], [anotherInstance, 'end']); 105 assert_array_equals(log[4], [instanceClone, 'begin']); 106 assert_array_equals(log[5], [anotherInstanceClone, 'begin']); 107 assert_array_equals(log[6], [anotherInstanceClone, 'end']); 108 assert_array_equals(log[7], [instanceClone, 'end']); 109 }, 'Calling Node.prototype.cloneNode(false) must push a new element queue to the processing stack'); 110 111 </script> 112 </body> 113 </html>