helper_bug1806400-3.html (1319B)
1 <!DOCTYPE html> 2 <html> 3 <meta name="viewport" content="width=device-width; initial-scale=1.0"> 4 <title>Tests that :active state is changed on a scrollable container without any touch event listeners</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="/tests/SimpleTest/paint_listener.js"></script> 7 <script src="apz_test_utils.js"></script> 8 <script src="apz_test_native_event_utils.js"></script> 9 <style> 10 #scrollable { 11 height: 50vh; 12 width: 50vw; 13 background: yellow; 14 overflow: scroll; 15 } 16 17 #scrollabletarget { 18 height: 200vh; 19 width: 200vh; 20 background: green; 21 } 22 23 #scrollabletarget:active { 24 background: red; 25 } 26 27 </style> 28 <div id="scrollable"> 29 <div id="scrollabletarget"> 30 </div> 31 </div> 32 <script> 33 async function test() { 34 ok(!scrollabletarget.matches(":active"), "should not be active initially"); 35 36 await synthesizeNativeTap(scrollabletarget, 50, 50); 37 38 // In JS there's no way to ensure `APZStateChange::eStartTouch` notification 39 // has been processed. So we wait for `:active` state change here. 40 await SimpleTest.promiseWaitForCondition( 41 () => scrollabletarget.matches(":active"), 42 "Waiting for :active state change"); 43 ok(scrollabletarget.matches(":active"), "should be active"); 44 } 45 waitUntilApzStable() 46 .then(test) 47 .then(subtestDone, subtestFailed); 48 </script> 49 </html>