reference-target-basics.html (2740B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 </head> 9 <body> 10 11 <div id="host1"> 12 <template shadowrootmode="open"></template> 13 </div> 14 15 <div id="host2"> 16 <template shadowrootmode="open" shadowrootreferencetarget></template> 17 </div> 18 19 <div id="host3"> 20 <template shadowrootmode="open" shadowrootreferencetarget="targetID"></template> 21 </div> 22 23 <script> 24 25 test(() => { 26 const shadow1 = document.querySelector("#host1").shadowRoot; 27 assert_equals(shadow1.referenceTarget, null); 28 }, "ShadowRoot.referenceTarget defaults to null when shadow is created declaratively"); 29 30 test(() => { 31 const shadow2 = document.querySelector("#host2").shadowRoot; 32 assert_equals(shadow2.referenceTarget, ""); 33 }, "Empty shadowrootreferencetarget attribute is reflected as empty string"); 34 35 test(() => { 36 const shadow1 = document.querySelector("#host3").shadowRoot; 37 assert_equals(shadow1.referenceTarget, "targetID"); 38 }, "<template> shadowrootreferencetarget sets referenceTarget on shadow root"); 39 40 test(() => { 41 const host1 = document.createElement("div"); 42 const shadow1 = host1.attachShadow({"mode": "open"}); 43 assert_equals(shadow1.referenceTarget, null); 44 45 const host2 = document.createElement("div"); 46 const shadow2 = host2.attachShadow({"mode": "open", "referenceTarget": null}); 47 assert_equals(shadow2.referenceTarget, null); 48 }, "ShadowRoot.referenceTarget defaults to null when shadow is created imperatively"); 49 50 test(() => { 51 const host3 = document.createElement("div"); 52 const shadow3 = host3.attachShadow({"mode": "open", "referenceTarget": ""}); 53 assert_equals(shadow3.referenceTarget, ""); 54 }, "Passing empty string referencetarget in ShadowRootInit is reflected as empty string"); 55 56 test(() => { 57 const host1 = document.createElement("div"); 58 const shadow1 = host1.attachShadow({"mode": "open", "referenceTarget": "targetID"}); 59 assert_equals(shadow1.referenceTarget, "targetID"); 60 61 const host2 = document.createElement("div"); 62 const shadow2 = host2.attachShadow({"mode": "open", "referenceTarget": 42}); 63 assert_equals(shadow2.referenceTarget, "42"); 64 65 const host3 = document.createElement("div"); 66 const shadow3 = host3.attachShadow({"mode": "open", "referenceTarget": true}); 67 assert_equals(shadow3.referenceTarget, "true"); 68 69 const host4 = document.createElement("div"); 70 const shadow4 = host4.attachShadow({"mode": "open", "referenceTarget": {"foo": "bar"}}); 71 assert_equals(shadow4.referenceTarget, "[object Object]"); 72 }, "ShadowRootInitDict can be used to set referenceTarget on shadow root"); 73 74 </script> 75 </body> 76 </html>