helper_overscroll_behavior_bug1425603.html (2951B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Scrolling over checkerboarded area respects overscroll-behavior</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 #subframe { 11 width: 100px; 12 height: 100px; 13 overflow: scroll; 14 margin-top: 10px; 15 margin-left: 10px; 16 overscroll-behavior: contain; 17 } 18 #contents { 19 width: 100%; 20 height: 1000px; 21 background-image: linear-gradient(red, blue); 22 } 23 </style> 24 </head> 25 <body> 26 <div id="subframe"> 27 <div id="contents"></div> 28 </div> 29 <div id="make_root_scrollable" style="height: 5000px"></div> 30 </body> 31 <script type="application/javascript"> 32 33 async function test() { 34 var config = getHitTestConfig(); 35 var utils = config.utils; 36 37 var subframe = document.getElementById("subframe"); 38 39 // Activate the scrollframe but keep the main-thread scroll position at 0. 40 // Also apply an async scroll offset in the y-direction large enough 41 // to make the scrollframe checkerboard. 42 // Note: We have to be careful with the numbers here. 43 // promiseMoveMouseAndScrollWheelOver() relies on the main thread receiving 44 // the synthesized mouse-move and wheel events. However, the async 45 // transform created by setAsyncScrollOffset() will cause an untransform 46 // to be applied to the synthesized events' coordinates before they're 47 // passed to the main thread. We have to make sure the transform is 48 // large enough to cause the scroll frame to checkerboard, but not so 49 // large that the untransformed coordinates hit-test out of bounds for 50 // the browser's content area. This is why we make the scroll frame 51 // small (100x100), and give it a display port that's also just 100x100, 52 // so we can keep the async scroll offset small enough (300 in this case) 53 // that the untransformed coordinates are still in-bounds for the window. 54 utils.setDisplayPortForElement(0, 0, 100, 100, subframe, 1); 55 await promiseAllPaintsDone(); 56 var scrollY = 300; 57 utils.setAsyncScrollOffset(subframe, 0, scrollY); 58 // Tick the refresh driver once to make sure the compositor has applied the 59 // async scroll offset (for WebRender hit-testing we need to make sure WR has 60 // the latest info). 61 utils.advanceTimeAndRefresh(16); 62 utils.restoreNormalRefresh(); 63 64 // Scroll over the subframe, and make sure that the page does not scroll, 65 // i.e. overscroll-behavior is respected. 66 var waitForScroll = false; // don't wait for a scroll event, it will never come 67 await promiseMoveMouseAndScrollWheelOver(subframe, 50, 50, waitForScroll); 68 is(window.scrollY, 0, "overscroll-behavior was respected"); 69 } 70 71 waitUntilApzStable() 72 .then(test) 73 .then(subtestDone, subtestFailed); 74 75 </script> 76 </html>