attachShadow-with-ShadowRoot.html (2492B)
1 <!DOCTYPE html> 2 <head> 3 <title>Shadow DOM: Element.attachShadow with ShadowRoot</title> 4 <meta name="author" title="Jesse Jurman" href="mailto:j.r.jurman@gmail.com"> 5 <meta name="assert" content="It should be possible to use an existing ShadowRoot as input for Element.attachShadow"> 6 <link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=295174"> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 </head> 14 15 16 <body> 17 <div id="elementSource"> 18 <span> 19 <template shadowrootmode="open"></template> 20 </span> 21 </div> 22 23 <div id="elementTarget"></div> 24 25 <template id="templateSource"> 26 <span> 27 <template shadowrootmode="open"></template> 28 </span> 29 </template> 30 31 <div id="templateTarget"></div> 32 </body> 33 34 <script> 35 'use strict'; 36 37 // test that we can use a ShadowRoot as an input for attachShadow 38 promise_test(async () => { 39 const shadowRoot = elementSource.children[0].shadowRoot; 40 41 // validate that the ShadowRoot is an object, and has properties we expect (like "mode") 42 assert_equals(typeof shadowRoot, 'object'); 43 assert_equals(shadowRoot.mode, 'open'); 44 45 // attach the shadowRoot to our target element 46 elementTarget.attachShadow(shadowRoot); 47 48 // validate that our target element has a shadowRoot with the same options 49 assert_equals(typeof elementTarget.shadowRoot, 'object'); 50 assert_equals(elementTarget.shadowRoot.mode, 'open'); 51 }, 'can use ShadowRoot as options for attachShadow'); 52 53 // test that we can use a ShadowRoot in a template element as an input for attachShadow 54 promise_test(async () => { 55 const shadowRoot = templateSource.content.children[0].shadowRoot; 56 57 // validate that the ShadowRoot is an object, and has properties we expect (like "mode") 58 assert_equals(typeof shadowRoot, 'object'); 59 assert_equals(shadowRoot.mode, 'open'); 60 61 // attach the shadowRoot to our target element 62 templateTarget.attachShadow(shadowRoot); 63 64 // validate that our target element has a shadowRoot with the same options 65 assert_equals(typeof templateTarget.shadowRoot, 'object'); 66 assert_equals(templateTarget.shadowRoot.mode, 'open'); 67 }, 'can use ShadowRoot in document fragment as options for attachShadow'); 68 69 </script>