select-disabled.html (1501B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://issues.chromium.org/issues/40265812"> 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 <select id=defaultbutton disabled style="appearance:base-select"> 10 <option>one</option> 11 <option>two</option> 12 </select> 13 14 <select id=custombutton disabled style="appearance:base-select"> 15 <button>button</button> 16 <option>one</option> 17 <option>two</option> 18 </select> 19 20 <script> 21 ['defaultbutton', 'custombutton'].forEach(id => { 22 promise_test(async () => { 23 assert_true(CSS.supports('appearance', 'base-select'), 24 'This test requires appearance:base-select in order to run.'); 25 26 const select = document.getElementById(id); 27 select.focus(); 28 assert_not_equals(document.activeElement, select, 29 'select should not be focusable when disabled.'); 30 31 await test_driver.click(select); 32 assert_false(select.matches(':open'), 33 'select should not be open after clicking when disabled.'); 34 35 const button = select.querySelector('button'); 36 if (button) { 37 button.focus(); 38 assert_not_equals(document.activeElement, button, 39 'select button should not be focusable when select is disabled.'); 40 } 41 }, `${id}: <select disabled> should prevent focus and activation with appearance:base-select.`); 42 }); 43 </script>