helper_hittest_basic.html (5269B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Various tests to exercise the APZ hit-testing codepaths</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 </head> 10 <body> 11 <div id="scroller" style="width: 300px; height: 300px; overflow:scroll; margin-top: 100px; margin-left: 50px"> 12 <div id="contents" style="width: 500px; height: 500px; background-image: linear-gradient(blue,red)"> 13 <div id="apzaware" style="position: relative; width: 100px; height: 100px; top: 300px; background-color: red" onwheel="return false;"></div> 14 </div> 15 </div> 16 <div id="make_root_scrollable" style="height: 5000px"></div> 17 </body> 18 <script type="application/javascript"> 19 20 async function test() { 21 var config = getHitTestConfig(); 22 var utils = config.utils; 23 24 var scroller = document.getElementById("scroller"); 25 var apzaware = document.getElementById("apzaware"); 26 27 let expectedHitInfo = APZHitResultFlags.VISIBLE; 28 if (!config.activateAllScrollFrames) { 29 expectedHitInfo |= APZHitResultFlags.INACTIVE_SCROLLFRAME; 30 } 31 checkHitResult(hitTest(centerOf(scroller)), 32 expectedHitInfo, 33 (config.activateAllScrollFrames ? utils.getViewId(scroller) 34 : utils.getViewId(document.scrollingElement)), 35 utils.getLayersId(), 36 "inactive scrollframe"); 37 38 // The apz-aware div (which has a non-passive wheel listener) is not visible 39 // and so the hit-test should just return the root scrollframe area that's 40 // covering it 41 checkHitResult(hitTest(centerOf(apzaware)), 42 APZHitResultFlags.VISIBLE, 43 utils.getViewId(document.scrollingElement), 44 utils.getLayersId(), 45 "inactive scrollframe - apzaware block"); 46 47 // Hit test where the scroll thumbs should be. 48 hitTestScrollbar({ 49 element: scroller, 50 directions: { vertical: true, horizontal: true }, 51 expectedScrollId: utils.getViewId(document.scrollingElement), 52 expectedLayersId: utils.getLayersId(), 53 trackLocation: ScrollbarTrackLocation.START, 54 expectThumb: true, 55 layerState: LayerState.INACTIVE, 56 }); 57 58 // activate the scrollframe but keep the main-thread scroll position at 0. 59 // also apply a async scroll offset in the y-direction such that the 60 // scrollframe scrolls to the bottom of its range. 61 utils.setDisplayPortForElement(0, 0, 500, 500, scroller, 1); 62 await promiseApzFlushedRepaints(); 63 var scrollY = scroller.scrollTopMax; 64 utils.setAsyncScrollOffset(scroller, 0, scrollY); 65 // Tick the refresh driver once to make sure the compositor has applied the 66 // async scroll offset (for WebRender hit-testing we need to make sure WR has 67 // the latest info). 68 utils.advanceTimeAndRefresh(16); 69 utils.restoreNormalRefresh(); 70 71 var scrollerViewId = utils.getViewId(scroller); 72 73 // Now we again test the middle of the scrollframe, which is now active 74 checkHitResult(hitTest(centerOf(scroller)), 75 APZHitResultFlags.VISIBLE, 76 scrollerViewId, 77 utils.getLayersId(), 78 "active scrollframe"); 79 80 // Test the apz-aware block 81 var apzawarePosition = centerOf(apzaware); // main thread position 82 apzawarePosition.y -= scrollY; // APZ position 83 checkHitResult(hitTest(apzawarePosition), 84 APZHitResultFlags.VISIBLE | 85 APZHitResultFlags.APZ_AWARE_LISTENERS, 86 scrollerViewId, 87 utils.getLayersId(), 88 "active scrollframe - apzaware block"); 89 90 // Test the scrollbars. Note that this time the vertical scrollthumb is 91 // going to be at the bottom of the track. We'll test both the top and the 92 // bottom. 93 94 // top of scrollbar track 95 hitTestScrollbar({ 96 element: scroller, 97 directions: { vertical: true }, 98 expectedScrollId: scrollerViewId, 99 expectedLayersId: utils.getLayersId(), 100 trackLocation: ScrollbarTrackLocation.START, 101 expectThumb: false, 102 layerState: LayerState.ACTIVE, 103 }); 104 // bottom of scrollbar track (scrollthumb) 105 hitTestScrollbar({ 106 element: scroller, 107 directions: { vertical: true }, 108 expectedScrollId: scrollerViewId, 109 expectedLayersId: utils.getLayersId(), 110 trackLocation: ScrollbarTrackLocation.END, 111 expectThumb: true, 112 layerState: LayerState.ACTIVE, 113 }); 114 // left part of scrollbar track (has scrollthumb) 115 hitTestScrollbar({ 116 element: scroller, 117 directions: { horizontal: true }, 118 expectedScrollId: scrollerViewId, 119 expectedLayersId: utils.getLayersId(), 120 trackLocation: ScrollbarTrackLocation.START, 121 expectThumb: true, 122 layerState: LayerState.ACTIVE, 123 }); 124 // right part of scrollbar track 125 hitTestScrollbar({ 126 element: scroller, 127 directions: { horizontal: true }, 128 expectedScrollId: scrollerViewId, 129 expectedLayersId: utils.getLayersId(), 130 trackLocation: ScrollbarTrackLocation.END, 131 expectThumb: false, 132 layerState: LayerState.ACTIVE, 133 }); 134 } 135 136 waitUntilApzStable() 137 .then(test) 138 .then(subtestDone, subtestFailed); 139 140 </script> 141 </html>