declarative-shadow-dom-repeats.html (3798B)
1 <!DOCTYPE html> 2 <title>Declarative Shadow DOM Element Attachment</title> 3 <link rel='author' href='mailto:masonf@chromium.org'> 4 <link rel='help' href='https://github.com/whatwg/dom/issues/1235'> 5 <link rel='help' href='https://github.com/whatwg/html/pull/10069'> 6 <link rel='help' href='https://github.com/whatwg/dom/pull/1246'> 7 8 <script src='/resources/testharness.js'></script> 9 <script src='/resources/testharnessreport.js'></script> 10 <script src='../../html/resources/common.js'></script> 11 12 <div id=multiple1> 13 <template shadowrootmode=open>Open</template> 14 <template shadowrootmode=closed>Closed</template> 15 </div> 16 17 <div id=multiple2> 18 <template shadowrootmode=closed>Closed</template> 19 <template shadowrootmode=open>Open</template> 20 </div> 21 22 <script> 23 test((t) => { 24 t.add_cleanup(() => { 25 multiple1.remove(); 26 multiple2.remove(); 27 }); 28 let shadow = multiple1.shadowRoot; 29 assert_true(!!shadow,'Remaining shadow root should be open'); 30 assert_equals(shadow.textContent,"Open"); 31 assert_equals(multiple1.childElementCount, 1); 32 assert_equals(multiple1.firstElementChild.shadowRootMode, "closed"); 33 shadow = multiple2.shadowRoot; 34 assert_false(!!shadow,'Remaining shadow root should be closed'); 35 assert_equals(multiple2.childElementCount, 1); 36 assert_equals(multiple2.firstElementChild.shadowRootMode, "open"); 37 },'Repeated declarative shadow roots keep only the first'); 38 </script> 39 40 <div id=open1> 41 <template shadowrootmode=open>Open</template> 42 </div> 43 44 <script> 45 test((t) => { 46 assert_throws_dom("NotSupportedError",() => { 47 open1.attachShadow({mode: "closed"}); 48 },'Mismatched shadow root mode should throw'); 49 const initialShadow = open1.shadowRoot; 50 const shadow = open1.attachShadow({mode: "open"}); // Shouldn't throw 51 assert_equals(shadow,initialShadow,'Same shadow should be returned'); 52 assert_equals(shadow.textContent,'','Shadow should be empty'); 53 },'Calling attachShadow() on declarative shadow root must match mode'); 54 </script> 55 56 <div id=open2> 57 <template shadowrootmode=open shadowrootdelegatesfocus shadowrootclonable shadowrootserializable> 58 Open, delegates focus (not the default), clonable (not the default) 59 serializable (not the default), named slot assignment (the default) 60 </template> 61 </div> 62 63 <script> 64 test((t) => { 65 t.add_cleanup(() => open2.remove()); 66 assert_true(!!open2.shadowRoot); 67 // Changing the mode should throw. 68 assert_throws_dom("NotSupportedError",() => { 69 open2.attachShadow({mode: "closed"}); 70 },'Mismatched shadow root mode should throw'); 71 assert_throws_dom("NotSupportedError",() => { 72 open2.attachShadow({mode: "closed", delegatesFocus: true, slotAssignment: "named", clonable: true, serializable: true}); 73 },'Mismatched shadow root mode should throw (explicit args)'); 74 75 // Changing other things should not throw, and should not change the shadow root's settings 76 const initialShadow = open2.shadowRoot; 77 assert_equals(initialShadow.delegatesFocus,true); 78 assert_equals(initialShadow.slotAssignment,"named"); 79 assert_true(initialShadow.clonable); 80 assert_true(initialShadow.serializable); 81 let newShadow = open2.attachShadow({mode: "open", delegatesFocus: false, slotAssignment: "manual", clonable: false, serializable: false}); 82 assert_equals(newShadow,initialShadow,'Same shadow should be returned'); 83 assert_equals(newShadow.textContent,'','Shadow should be empty'); 84 assert_equals(newShadow.delegatesFocus,true); 85 assert_equals(newShadow.slotAssignment,"named"); 86 assert_true(newShadow.clonable); 87 assert_true(newShadow.serializable); 88 assert_throws_dom("NotSupportedError",() => { 89 open2.attachShadow({mode: "open"}); 90 },'Invoking attachShadow() on a non-declarative shadow root should throw'); 91 },'Calling attachShadow() on declarative shadow root must match all parameters'); 92 </script>