test_shadowdom_active_pseudo_class.html (2206B)
1 <!DOCTYPE HTML> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=1782142 4 --> 5 <title>Test :active pseudo-class in shadow DOM</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="/tests/SimpleTest/EventUtils.js"></script> 8 <script src="/tests/SimpleTest/paint_listener.js"></script> 9 <script src="/tests/gfx/layers/apz/test/mochitest/apz_test_utils.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1062578">Bug 1782142</a> 12 <div id="host"></div> 13 <script> 14 let { ContentTaskUtils } = SpecialPowers.ChromeUtils.importESModule( 15 "resource://testing-common/ContentTaskUtils.sys.mjs" 16 ); 17 18 // Setup shadow DOM 19 const host = document.querySelector("#host"); 20 const sr = host.attachShadow({mode: "closed"}); 21 const button = document.createElement("button"); 22 button.innerText = "button"; 23 sr.appendChild(button); 24 25 add_task(async function init() { 26 await SpecialPowers.pushPrefEnv({set: [["test.events.async.enabled", true]]}); 27 await waitUntilApzStable(); 28 }); 29 30 add_task(async function mouse_input() { 31 ok(!button.matches(":active"), "Button should not be active initially"); 32 33 synthesizeMouseAtCenter(button, { type: "mousedown" }); 34 await ContentTaskUtils.waitForCondition(() => { 35 return button.matches(":active"); 36 }, "Button should be active"); 37 38 synthesizeMouseAtCenter(button, { type: "mouseup" }); 39 await ContentTaskUtils.waitForCondition(() => { 40 return !button.matches(":active"); 41 }, "Button should not be active"); 42 }); 43 44 add_task(async function touch_input() { 45 // To avoid contextmenu showing up during test. 46 document.addEventListener("contextmenu", (e) => { 47 e.preventDefault(); 48 }, { once: true }); 49 50 ok(!button.matches(":active"), "Button should not be active initially"); 51 52 synthesizeTouchAtCenter(button, { type: "touchstart" }); 53 await ContentTaskUtils.waitForCondition(() => { 54 return button.matches(":active"); 55 }, "Button should be active"); 56 57 synthesizeTouchAtCenter(button, { type: "touchend" }); 58 await ContentTaskUtils.waitForCondition(() => { 59 return !button.matches(":active"); 60 }, "Button should not be active"); 61 }); 62 </script>