| Surma | 5f8b267 | 2017-07-12 06:51:08 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>Shadow DOM: slotchange customelements</title> |
| 5 | <meta name="author" title="Surma" href="mailto:surma@google.com"> |
| 6 | <link rel="help" href="https://dom.spec.whatwg.org/#signaling-slot-change"> |
| 7 | <script src="/resources/testharness.js"></script> |
| 8 | <script src="/resources/testharnessreport.js"></script> |
| 9 | </head> |
| 10 | <body> |
| 11 | <slots-in-constructor id="constructor-upgrade"><div></div></slots-in-constructor> |
| 12 | <slots-in-callback id="callback-upgrade"><div></div></slots-in-callback> |
| 13 | <script> |
| 14 | var calls = []; |
| 15 | class SlotsInConstructor extends HTMLElement { |
| 16 | constructor() { |
| 17 | super(); |
| 18 | this.attachShadow({mode: 'open'}); |
| 19 | this.shadowRoot.innerHTML = '<slot></slot>'; |
| 20 | var slot = this.shadowRoot.children[0]; |
| 21 | slot.addEventListener('slotchange', function() { |
| 22 | calls.push(this.id); |
| 23 | }.bind(this)); |
| 24 | } |
| 25 | } |
| 26 | customElements.define('slots-in-constructor', SlotsInConstructor); |
| 27 | class SlotsInCallback extends HTMLElement { |
| 28 | constructor() { |
| 29 | super(); |
| 30 | } |
| 31 | |
| 32 | connectedCallback() { |
| 33 | this.attachShadow({mode: 'open'}); |
| 34 | this.shadowRoot.innerHTML = '<slot></slot>'; |
| 35 | var slot = this.shadowRoot.children[0]; |
| 36 | slot.addEventListener('slotchange', function() { |
| 37 | calls.push(this.id); |
| 38 | }.bind(this)); |
| 39 | } |
| 40 | } |
| 41 | customElements.define('slots-in-callback', SlotsInCallback); |
| 42 | </script> |
| 43 | <slots-in-constructor id="constructor-parser"><div></div></slots-in-constructor> |
| 44 | <slots-in-callback id="callback-parser"><div></div></slots-in-callback> |
| 45 | <script> |
| 46 | test(function () { |
| 47 | assert_true(calls.includes("constructor-parser")); |
| 48 | assert_true(calls.includes("callback-parser")); |
| 49 | assert_true(calls.includes("constructor-upgrade")); |
| 50 | assert_true(calls.includes("callback-upgrade")); |
| 51 | }, 'slotchange must fire on initialization of custom elements with slotted children'); |
| 52 | done(); |
| 53 | </script> |
| 54 | </body> |
| 55 | </html> |
