helper_hittest_fixed-3.html (3376B)
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 iframe { 14 width: 100%; 15 height: 400px; 16 margin-top: 100px; 17 padding: 0px; 18 border: 0px; 19 display: block; 20 } 21 </style> 22 </head> 23 <body> 24 <iframe id="subdoc" srcdoc="<!DOCTYPE HTML> 25 <html> 26 <style> 27 html, body { 28 margin: 0; 29 } 30 #fixed { 31 position: fixed; 32 height: 300px; 33 width: 100%; 34 top: 0; 35 background: blue; 36 } 37 #target { 38 margin-top: 100px; 39 margin-left: 100px; 40 height: 20px; 41 width: 20px; 42 background: red; 43 } 44 </style> 45 <div id='fixed'> 46 <div id='target'></div> 47 </div> 48 <div id='make_scrollable' style='height: 5000px'></div> 49 </html> 50 "></iframe> 51 <div id="make_root_scrollable" style="height: 5000px"></div> 52 </body> 53 <script type="application/javascript"> 54 55 async function test() { 56 // Async scroll the root content document by 50 pixels. 57 // This test uses a touch-drag (with relevant prefs set in 58 // test_group_hittest-2.html to e.g. disable flings) 59 // rather than mousewheel so that we have control over the 60 // precise amount scrolled. 61 let transformEndPromise = promiseTransformEnd(); 62 await synthesizeNativeTouchDrag(document.documentElement, 10, 10, 0, -50); 63 await transformEndPromise; 64 65 // Set up listeners that pass the test if we correctly hit |target| 66 // but fail it if we hit something else. 67 let target = subdoc.contentWindow.target; 68 let fixed = subdoc.contentWindow.fixed; 69 let clickPromise = new Promise(resolve => { 70 target.addEventListener("click", e => { 71 ok(true, "Target was hit"); 72 e.stopPropagation(); // do not propagate event to ancestors 73 resolve(); 74 }); 75 fixed.addEventListener("click", () => { 76 // Since target's listener calls stopPropagation(), if we get here 77 // then the coordinates of the click event did not correspond to 78 // |target|, but somewhere else on |fixed|. 79 // 80 // TODO(bug 1786369): Ensure the parent is not hit once this is 81 // no longer an intermittent failure. 82 todo(false, "Fixed ancestor should not be hit"); 83 resolve(); 84 }); 85 window.addEventListener("click", () => { 86 // Similarly, the root content document's window should not be hit. 87 ok(false, "Root document should not be hit"); 88 resolve(); 89 }); 90 }); 91 92 // Synthesize a click which should hit |target|. 93 // The y-coordinate relative to the window is: 94 // 100 pixel margin of iframe from top of root content doc 95 // + 100 pixel margin of target from top of iframe 96 // - 50 pixels async scrolled 97 // + 10 pixels to get us to the middle of the 20px-width target 98 await synthesizeNativeMouseEventWithAPZ({ 99 type: "click", 100 target: window, 101 offsetX: 110, 102 offsetY: 160 103 }); 104 105 await clickPromise; 106 } 107 108 waitUntilApzStable() 109 .then(test) 110 .then(subtestDone, subtestFailed); 111 112 </script> 113 </html>