helper_hittest_fixed.html (2271B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>APZ hit-testing of fixed content when async-scrolled</title> 5 <script type="application/javascript" src="apz_test_utils.js"></script> 6 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 7 <script src="/tests/SimpleTest/paint_listener.js"></script> 8 <meta name="viewport" content="width=device-width"/> 9 <style> 10 html, body { 11 margin: 0; 12 } 13 #fixed { 14 position: fixed; 15 height: 300px; 16 width: 100%; 17 top: 0; 18 background: blue; 19 } 20 #target { 21 margin-top: 100px; 22 margin-left: 100px; 23 height: 20px; 24 width: 20px; 25 background: red; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="fixed"> 31 <div id="target"></div> 32 </div> 33 <div id="make_root_scrollable" style="height: 5000px"></div> 34 </body> 35 <script type="application/javascript"> 36 37 async function test() { 38 var config = getHitTestConfig(); 39 var utils = config.utils; 40 41 // Async scroll the page by 50 pixels. The scroll does not move 42 // the fixed element. 43 utils.setAsyncScrollOffset(document.documentElement, 0, 50); 44 // Tick the refresh driver once to make sure the compositor has applied the 45 // async scroll offset (for WebRender hit-testing we need to make sure WR has 46 // the latest info). 47 utils.advanceTimeAndRefresh(16); 48 utils.restoreNormalRefresh(); 49 50 let clickPromise = new Promise(resolve => { 51 target.addEventListener("click", e => { 52 ok(true, "Target was hit"); 53 e.stopPropagation(); // do not propagate event to |fixed| ancestor 54 resolve(); 55 }); 56 fixed.addEventListener("click", () => { 57 // Since target's listener calls stopPropagation(), if we get here 58 // then the coordinates of the click event did not correspond to 59 // |target|, but somewhere else on |fixed|. 60 ok(false, "Fixed ancestor should not be hit"); 61 resolve(); 62 }); 63 }); 64 65 // Synthesize a click at (110, 110), which should hit |target| (a 66 // descendant of |fixed|) regardless of the async scroll. 67 await synthesizeNativeMouseEventWithAPZ({ 68 type: "click", 69 target: window, 70 offsetX: 110, 71 offsetY: 110 72 }); 73 74 await clickPromise; 75 } 76 77 waitUntilApzStable() 78 .then(test) 79 .then(subtestDone, subtestFailed); 80 81 </script> 82 </html>