inert-attribute-overriding.html (1703B)
1 <!DOCTYPE html> 2 <link rel="author" href="mailto:masonf@chromium.org"> 3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12049"> 4 <link rel="help" href="https://github.com/whatwg/html/pull/10956"> 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-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 11 <div id="buttons"> 12 <button data-expect="normal">normal button</button> 13 <button data-expect="inert" inert>just inert</button> 14 <button data-expect="inert" inert style="interactivity: auto">interactivity: auto</button> 15 <button data-expect="inert" inert style="all: initial">all: initial</button> 16 </div> 17 18 <script> 19 async function clickOn(element) { 20 // Because the button is disabled, we need to click at its coordinates. 21 let rect = element.getBoundingClientRect(); 22 let actions = new test_driver.Actions(); 23 await actions 24 .pointerMove(Math.round(rect.x + rect.width / 2), Math.round(rect.y + rect.height / 2), {}) 25 .pointerDown({button: actions.ButtonType.LEFT}) 26 .pointerUp({button: actions.ButtonType.LEFT}) 27 .send(); 28 } 29 document.querySelectorAll('#buttons>*').forEach(button => { 30 const expectInert = button.dataset.expect === 'inert'; 31 button.removeAttribute('data-expect'); 32 promise_test(async (t) => { 33 let clicked = false; 34 button.addEventListener('click',() => (clicked = true),{signal: t.get_signal()}); 35 await clickOn(button); 36 assert_equals(clicked, !expectInert); 37 }, `Expect ${button.outerHTML} to be ${expectInert ? 'inert' : 'non-inert'}`); 38 }); 39 </script>