| <!DOCTYPE HTML> |
| <html> |
| |
| <head> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/wai-aria/scripts/aria-utils.js"></script> |
| </head> |
| |
| <body> |
| <button id="toggle-button-1" command="toggle-popover" commandfor="x-popover-1">Toggle the popover</button> |
| <x-popover-1 id="x-popover-1"> |
| <template shadowrootmode="open" shadowrootreferencetarget="popover"> |
| <div id="popover" popover>Popover content inside shadow root</div> |
| </template> |
| </x-popover-1> |
| |
| <button id="toggle-button-2" command="toggle-popover" commandfor="x-popover-2">Toggle the popover</button> |
| <x-popover-2 id="x-popover-2"></x-popover-2> |
| <script> |
| const customPopover2 = document.querySelector('x-popover-2'); |
| customPopover2.attachShadow({ mode: 'open', referenceTarget: 'popover' }); |
| customPopover2.shadowRoot.innerHTML = '<div id="popover" popover>Popover content inside shadow root</div>'; |
| </script> |
| |
| <button id="toggle-button-3" command="toggle-popover">Toggle the popover</button> |
| <x-popover-3 id="x-popover-3"> |
| <template shadowrootmode="open" shadowrootreferencetarget="popover"> |
| <div id="popover" popover>Popover content inside shadow root</div> |
| </template> |
| </x-popover-3> |
| |
| <script> |
| function testCommandFor(popoverId, buttonId, name) { |
| test(function () { |
| const xPopover = document.getElementById(popoverId); |
| const popover = xPopover.shadowRoot.getElementById("popover"); |
| |
| let showCount = 0; |
| popover.addEventListener('beforetoggle', (e) => { |
| if (e.newState === "open") |
| ++showCount; |
| }); |
| |
| const toggleButton = document.getElementById(buttonId); |
| toggleButton.click(); |
| |
| assert_equals(showCount, 1, "showCount"); |
| }, name); |
| } |
| testCommandFor('x-popover-1', 'toggle-button-1', "Shadow root reference target works with commandfor attribute."); |
| testCommandFor('x-popover-2', 'toggle-button-2', "Shadow root reference target works with commandfor attribute via options."); |
| document.getElementById('toggle-button-3').commandForElement = document.getElementById('x-popover-3'); |
| testCommandFor('x-popover-3', 'toggle-button-3', "Shadow root reference target works with .commandForElement property."); |
| </script> |
| </body> |
| |
| </html> |
