| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <link id="import1" rel="import" href="resources/connected-upgrade.html"> |
| <script> |
| 'use strict'; |
| |
| let reactions = []; |
| |
| customElements.define('a-a', class extends HTMLElement { |
| connectedCallback() { |
| reactions.push(this); |
| } |
| disconnectedCallback() { |
| reactions.push(this); |
| } |
| }); |
| </script> |
| <link id="import2" rel="import" href="resources/connected-parsercreate.html"> |
| <script> |
| 'use strict'; |
| |
| test(() => { |
| let importDoc1 = import1.import; |
| let importDoc2 = import2.import; |
| |
| let a = importDoc1.querySelector('#a'); |
| let b = importDoc1.querySelector('#b'); |
| let c = importDoc2.querySelector('#c'); |
| let d = importDoc2.querySelector('#d'); |
| |
| assert_array_equals(reactions, [a, b, c, d], |
| 'connectedCallback should be called for both upgrade and create.'); |
| |
| reactions = []; |
| |
| d.remove(); |
| c.remove(); |
| b.remove(); |
| a.remove(); |
| |
| assert_array_equals(reactions, [d, c, b, a], |
| 'disconnectedCallback should be called in imports.'); |
| |
| reactions = []; |
| |
| let div1 = document.createElement('div'); |
| let div2 = document.createElement('div'); |
| let div3 = document.createElement('div'); |
| |
| div1.appendChild(div2); |
| div1.appendChild(a); |
| div1.appendChild(div3); |
| |
| div2.appendChild(d); |
| div2.appendChild(c); |
| div3.appendChild(b); |
| |
| importDoc1.body.appendChild(div1); |
| |
| assert_array_equals(reactions, [d, c, a, b], |
| 'connectedCallback should be called in document order.'); |
| |
| reactions = []; |
| |
| div1.remove(); |
| assert_array_equals(reactions, [d, c, a, b], |
| 'disconnectedCallback should be called in document order.'); |
| }, 'connectedCallback and disconnectedCallback should be invoked for elements in import'); |
| </script> |
