popovertarget.html (3701B)
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 13 <body> 14 <button id="toggle-button-1" popovertarget="x-popover-1">Toggle the popover</button> 15 <x-popover-1 id="x-popover-1" popover> 16 <template shadowrootmode="open" shadowrootreferencetarget="popover"> 17 <div id="popover" popover>Popover content inside shadow root</div> 18 </template> 19 </x-popover-1> 20 21 <button id="toggle-button-2" popovertarget="x-popover-2">Toggle the popover</button> 22 <x-popover-2 id="x-popover-2" popover></x-popover-2> 23 <script> 24 const customPopover2 = document.querySelector('x-popover-2'); 25 customPopover2.attachShadow({ mode: 'open', referenceTarget: 'popover' }); 26 customPopover2.shadowRoot.innerHTML = '<div id="popover" popover>Popover content inside shadow root</div>'; 27 </script> 28 29 <button id="toggle-button-3">Toggle the popover</button> 30 <x-popover-3 id="x-popover-3" popover> 31 <template shadowrootmode="open" shadowrootreferencetarget="popover"> 32 <div id="popover" popover>Popover content inside shadow root</div> 33 </template> 34 </x-popover-3> 35 36 <script> 37 function testPopoverTarget(popoverId, buttonId, name) { 38 test(function () { 39 const xPopover = document.getElementById(popoverId); 40 const popover = xPopover.shadowRoot.getElementById("popover"); 41 42 let xPopoverShowCount = 0; 43 xPopover.addEventListener('beforetoggle', (e) => { 44 if (e.newState === "open") 45 ++xPopoverShowCount; 46 }); 47 48 let popoverShowCount = 0; 49 popover.addEventListener('beforetoggle', (e) => { 50 if (e.newState === "open") 51 ++popoverShowCount; 52 }); 53 54 const toggleButton = document.getElementById(buttonId); 55 toggleButton.click(); 56 57 assert_equals(xPopoverShowCount, 0, "host should not be toggled if valid reference target is set"); 58 assert_equals(popoverShowCount, 1, "inner element should be target of toggle if reference target is set"); 59 popover.hidePopover(); 60 61 // Setting referenceTarget to null means the host element is the target of the idref. 62 xPopover.shadowRoot.referenceTarget = null; 63 toggleButton.click(); 64 assert_equals(xPopoverShowCount, 1, "host should be toggled if reference target is null"); 65 assert_equals(popoverShowCount, 1, "inner element should not be toggled if reference target is null"); 66 popover.hidePopover(); 67 68 // Setting referenceTarget to empty string means the idref is treated as invalid. 69 xPopover.shadowRoot.referenceTarget = ""; 70 toggleButton.click(); 71 assert_equals(xPopoverShowCount, 1, "no additional toggle on host if reference target is empty string"); 72 assert_equals(popoverShowCount, 1, "no additional toggle on inner element if reference target is empty string"); 73 }, name); 74 } 75 testPopoverTarget('x-popover-1', 'toggle-button-1', "Shadow root reference target works with popovertarget attribute."); 76 testPopoverTarget('x-popover-2', 'toggle-button-2', "Shadow root reference target works with popovertarget attribute via options."); 77 document.getElementById('toggle-button-3').popoverTargetElement = document.getElementById('x-popover-3'); 78 testPopoverTarget('x-popover-3', 'toggle-button-3', "Shadow root reference target works with .popoverTargetElement property."); 79 </script> 80 </body> 81 82 </html>