interestfor.tentative.html (4166B)
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 <script src="/html/semantics/interestfor/resources/invoker-utils.js"></script> 12 </head> 13 14 <body> 15 <style> 16 [interestfor] { 17 interest-delay: 0s; 18 } 19 </style> 20 <button id="toggle-button-1" interestfor="x-popover-1">Toggle the popover</button> 21 <x-popover-1 id="x-popover-1" popover> 22 <template shadowrootmode="open" shadowrootreferencetarget="popover"> 23 <div id="popover" popover>Popover content inside shadow root</div> 24 </template> 25 </x-popover-1> 26 27 <button id="toggle-button-2" interestfor="x-popover-2">Toggle the popover</button> 28 <x-popover-2 id="x-popover-2" popover></x-popover-2> 29 <script> 30 const customPopover2 = document.querySelector('x-popover-2'); 31 customPopover2.attachShadow({ mode: 'open', referenceTarget: 'popover' }); 32 customPopover2.shadowRoot.innerHTML = '<div id="popover" popover>Popover content inside shadow root</div>'; 33 </script> 34 35 <button id="toggle-button-3">Toggle the popover</button> 36 <x-popover-3 id="x-popover-3" popover> 37 <template shadowrootmode="open" shadowrootreferencetarget="popover"> 38 <div id="popover" popover>Popover content inside shadow root</div> 39 </template> 40 </x-popover-3> 41 42 <button id="#other-hover-target">Other hover target</button> 43 44 <script> 45 function testInterestFor(popoverId, buttonId, name) { 46 promise_test(async function () { 47 const xPopover = document.getElementById(popoverId); 48 const popover = xPopover.shadowRoot.getElementById("popover"); 49 const otherHoverTarget = document.getElementById('#other-hover-target'); 50 51 let xPopoverShowCount = 0; 52 xPopover.addEventListener('beforetoggle', (e) => { 53 if (e.newState === "open") 54 ++xPopoverShowCount; 55 }); 56 let popoverShowCount = 0; 57 popover.addEventListener('beforetoggle', (e) => { 58 if (e.newState === "open") 59 ++popoverShowCount; 60 }); 61 62 const toggleButton = document.getElementById(buttonId); 63 await hoverOver(toggleButton); 64 65 assert_equals(xPopoverShowCount, 0, "host should not be toggled if valid reference target is set"); 66 assert_equals(popoverShowCount, 1, "inner element should be target of toggle if reference target is set"); 67 popover.hidePopover(); 68 69 // Setting referenceTarget to null means the host element is the target of the idref. 70 xPopover.shadowRoot.referenceTarget = null; 71 await hoverOver(otherHoverTarget); // Move mouse away first 72 await hoverOver(toggleButton); 73 assert_equals(xPopoverShowCount, 1, "host should be toggled if reference target is null"); 74 assert_equals(popoverShowCount, 1, "inner element should not be toggled if reference target is null"); 75 popover.hidePopover(); 76 77 // Setting referenceTarget to empty string means the idref is treated as invalid. 78 xPopover.shadowRoot.referenceTarget = ""; 79 await hoverOver(otherHoverTarget); // Move mouse away first 80 await hoverOver(toggleButton); 81 assert_equals(xPopoverShowCount, 1, "no additional toggle on host if reference target is empty string"); 82 assert_equals(popoverShowCount, 1, "no additional toggle on inner element if reference target is empty string"); 83 }, name); 84 } 85 testInterestFor('x-popover-1', 'toggle-button-1', "Shadow root reference target works with interestfor attribute."); 86 testInterestFor('x-popover-2', 'toggle-button-2', "Shadow root reference target works with interestfor attribute via options."); 87 document.getElementById('toggle-button-3').interestForElement = document.getElementById('x-popover-3'); 88 testInterestFor('x-popover-3', 'toggle-button-3', "Shadow root reference target works with .interestForElement property."); 89 </script> 90 </body> 91 92 </html>