| <!DOCTYPE html> |
| <title>Declarative Shadow DOM</title> |
| <link rel='author' href='mailto:masonf@chromium.org'> |
| <link rel='help' href='https://github.com/whatwg/dom/issues/831'> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| |
| <body> |
| <script> |
| let templatesSeen = 0; |
| function myObserver(mutationsList, observer) { |
| for (let mutation of mutationsList) { |
| for (let n of mutation.addedNodes) { |
| if (n.localName === 'template') { |
| templatesSeen++; |
| switch (mutation.target.id) { |
| case 'openhost': |
| case 'closedhost': |
| const shadowroot = n.getAttribute('shadowroot'); |
| assert_in_array(shadowroot, ['open','closed'], 'Declarative template should have shadowroot attribute'); |
| assert_equals(n.content, null, 'Declarative template content should be null'); |
| assert_equals(n.innerHTML, "", 'Declarative template innerHTML should be empty'); |
| assert_equals(n.getInnerHTML({includeShadowRoots: true}), "", 'Declarative template getInnerHTML() should be empty'); |
| |
| // Make sure removing the shadowroot attribute doesn't affect things. |
| n.removeAttribute('shadowroot'); |
| assert_equals(n.content, null, 'Declarative template content should *still* be null'); |
| assert_equals(n.innerHTML, "", 'Declarative template innerHTML should *still* be empty'); |
| assert_equals(n.getInnerHTML({includeShadowRoots: true}), "", 'Declarative template getInnerHTML() should *still* be empty'); |
| |
| // Try cloning the in-progress declarative template - shouldn't work. |
| const clone = n.cloneNode(true); |
| assert_equals(clone.children.length,0,'Clone should not contain anything'); |
| assert_equals(clone.content.children.length,0,'Clone should not contain anything'); |
| break; |
| case 'noroot': |
| // Make sure adding 'shadowroot' attribute doesn't trigger a shadow root, |
| // even if added before parsing completes. |
| n.setAttribute('shadowroot','open'); |
| assert_not_equals(n.content, null, 'Regular template should have content, even after adding shadowroot attribute'); |
| assert_not_equals(n.innerHTML, "", 'Regular template should have innerHTML, even after adding shadowroot attribute'); |
| assert_not_equals(n.getInnerHTML({includeShadowRoots: true}), "", 'Regular template should have getInnerHTML(), even after adding shadowroot attribute'); |
| break; |
| default: |
| assert_unreached('Unrecognized template'); |
| } |
| } |
| } |
| } |
| } |
| const observer = new MutationObserver(myObserver); |
| observer.observe(document.body, { childList: true, subtree: true }); |
| assert_equals(templatesSeen, 0, 'No mutations yet'); |
| </script> |
| |
| <div id=openhost> |
| <template shadowroot=open> |
| <slot></slot> |
| </template> |
| </div> |
| |
| <div id=closedhost> |
| <template shadowroot=closed> |
| <slot></slot> |
| </template> |
| </div> |
| |
| <div id=noroot> |
| <template> |
| <slot></slot> |
| </template> |
| </div> |
| |
| <script> |
| test(t => { |
| t.add_cleanup(function() { observer.disconnect(); }); |
| |
| assert_equals(templatesSeen, 3); |
| |
| // Open shadow root |
| let host = document.querySelector('#openhost'); |
| assert_equals(host.querySelector('template'), null, 'No leftover template node'); |
| assert_true(!!host.shadowRoot, 'Shadow root should exist'); |
| |
| // Closed shadow root |
| host = document.querySelector('#closedhost'); |
| assert_equals(host.querySelector('template'), null, 'No leftover template node'); |
| assert_true(!host.shadowRoot, 'Closed shadow root (can\'t detect)'); |
| |
| // No shadow root |
| host = document.querySelector('#noroot'); |
| assert_true(!!host.querySelector('template'), 'Template node still present'); |
| assert_true(!host.shadowRoot, 'No shadow root'); |
| },'Declarative Shadow DOM: template .content() should be null'); |
| </script> |
| </body> |
