button-in-popover.html (2775B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/9799"> 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 9 <style> 10 select, select::picker(select) { 11 appearance: base-select; 12 } 13 </style> 14 15 <select> 16 <button id=invoker>invoker</button> 17 <option id=option1>one</option> 18 <option>two</option> 19 <button id=popover>popover button</button> 20 <span id=other>other text</span> 21 </select> 22 23 <script> 24 const select = document.querySelector('select'); 25 const option1 = document.getElementById('option1'); 26 const popoverButton = document.getElementById('popover'); 27 const otherContent = document.getElementById('other'); 28 29 function assertAppearance() { 30 assert_equals(getComputedStyle(select).appearance, 'base-select', 31 'appearance:base-select must be supported in order to run this test.'); 32 } 33 34 promise_test(async () => { 35 assertAppearance(); 36 assert_false(select.matches(':open'), 37 'Select should be closed at the start of the test.'); 38 await test_driver.click(select); 39 assert_true(select.matches(':open'), 40 'Select should open after clicking the invoker button.'); 41 42 let popoverButtonClicked = false; 43 popoverButton.onclick = () => popoverButtonClicked = true; 44 await test_driver.click(popoverButton); 45 assert_true(select.matches(':open'), 46 'Clicking the button should not have closed the popover.'); 47 assert_true(popoverButtonClicked, 48 'The button in the popover should have gotten a click event when clicked.'); 49 50 popoverButton.focus(); 51 const ENTER_KEY = '\uE007'; 52 await test_driver.send_keys(popoverButton, ENTER_KEY); 53 assert_true(select.matches(':open'), 54 'Keyboard-activating the button should also not have closed the popover.'); 55 56 await test_driver.click(select); 57 assert_false(select.matches(':open'), 58 'Clicking invoker button should close select.'); 59 }, 'Buttons in the popover should be rendered and should not close the popover when clicked.'); 60 61 promise_test(async () => { 62 assertAppearance(); 63 assert_false(select.matches(':open'), 64 'Select should be closed at the start of the test.'); 65 await test_driver.click(select); 66 assert_true(select.matches(':open'), 67 'Select should open after clicking it.'); 68 69 await test_driver.click(other); 70 assert_true(select.matches(':open'), 71 'Clicking non-interactive, non-option content should not close the popover.'); 72 73 await test_driver.click(select); 74 assert_false(select.matches(':open'), 75 'Clicking invoker button should close select.'); 76 }, 'Non-interactive content in the popover should not close the popover when clicked.'); 77 </script>