commandfor.html (3745B)
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" command="toggle-popover" commandfor="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" command="toggle-popover" commandfor="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" command="toggle-popover">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 testCommandFor(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 let popoverShowCount = 0; 48 popover.addEventListener('beforetoggle', (e) => { 49 if (e.newState === "open") 50 ++popoverShowCount; 51 }); 52 53 const toggleButton = document.getElementById(buttonId); 54 toggleButton.click(); 55 56 assert_equals(xPopoverShowCount, 0, "host should not be toggled if valid reference target is set"); 57 assert_equals(popoverShowCount, 1, "inner element should be target of toggle if reference target is set"); 58 popover.hidePopover(); 59 60 // Setting referenceTarget to null means the host element is the target of the idref. 61 xPopover.shadowRoot.referenceTarget = null; 62 toggleButton.click(); 63 assert_equals(xPopoverShowCount, 1, "host should be toggled if reference target is null"); 64 assert_equals(popoverShowCount, 1, "inner element should not be toggled if reference target is null"); 65 popover.hidePopover(); 66 67 // Setting referenceTarget to empty string means the idref is treated as invalid. 68 xPopover.shadowRoot.referenceTarget = ""; 69 toggleButton.click(); 70 assert_equals(xPopoverShowCount, 1, "no additional toggle on host if reference target is empty string"); 71 assert_equals(popoverShowCount, 1, "no additional toggle on inner element if reference target is empty string"); 72 }, name); 73 } 74 testCommandFor('x-popover-1', 'toggle-button-1', "Shadow root reference target works with commandfor attribute."); 75 testCommandFor('x-popover-2', 'toggle-button-2', "Shadow root reference target works with commandfor attribute via options."); 76 document.getElementById('toggle-button-3').commandForElement = document.getElementById('x-popover-3'); 77 testCommandFor('x-popover-3', 'toggle-button-3', "Shadow root reference target works with .commandForElement property."); 78 </script> 79 </body> 80 81 </html>