test_wheel_scroll.html (3404B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1013412 5 https://bugzilla.mozilla.org/show_bug.cgi?id=1168182 6 --> 7 <head> 8 <title>Test for Bug 1013412 and 1168182</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="/tests/SimpleTest/EventUtils.js"></script> 11 <script src="/tests/SimpleTest/paint_listener.js"></script> 12 <script type="application/javascript" src="apz_test_utils.js"></script> 13 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 14 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 15 <style> 16 #content { 17 height: 800px; 18 overflow: scroll; 19 } 20 21 #scroller { 22 height: 2000px; 23 background: repeating-linear-gradient(#EEE, #EEE 100px, #DDD 100px, #DDD 200px); 24 } 25 26 #scrollbox { 27 margin-top: 200px; 28 width: 500px; 29 height: 500px; 30 border-radius: 250px; 31 box-shadow: inset 0 0 0 60px #555; 32 background: #777; 33 } 34 35 #circle { 36 position: relative; 37 left: 240px; 38 top: 20px; 39 border: 10px solid white; 40 border-radius: 10px; 41 width: 0px; 42 height: 0px; 43 transform-origin: 10px 230px; 44 will-change: transform; 45 } 46 </style> 47 </head> 48 <body> 49 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1013412">Mozilla Bug 1013412</a> 50 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1168182">Mozilla Bug 1168182</a> 51 <p id="display"></p> 52 <div id="content"> 53 <p>Scrolling the page should be async, but scrolling over the dark circle should not scroll the page and instead rotate the white ball.</p> 54 <div id="scroller"> 55 <div id="scrollbox"> 56 <div id="circle"></div> 57 </div> 58 </div> 59 </div> 60 <pre id="test"> 61 <script type="application/javascript"> 62 63 var rotation = 0; 64 var rotationAdjusted = false; 65 66 var incrementForMode = function(mode) { 67 switch (mode) { 68 case WheelEvent.DOM_DELTA_PIXEL: return 1; 69 case WheelEvent.DOM_DELTA_LINE: return 15; 70 case WheelEvent.DOM_DELTA_PAGE: return 400; 71 } 72 return 0; 73 }; 74 75 document.getElementById("scrollbox").addEventListener("wheel", function(e) { 76 rotation += e.deltaY * incrementForMode(e.deltaMode) * 0.2; 77 document.getElementById("circle").style.transform = "rotate(" + rotation + "deg)"; 78 rotationAdjusted = true; 79 e.preventDefault(); 80 }); 81 82 async function test() { 83 var content = document.getElementById("content"); 84 // enough iterations that we would scroll to the bottom of 'content' 85 for (let i = 0; i < 600 && content.scrollTop != content.scrollTopMax; i++) { 86 await promiseNativeWheelAndWaitForWheelEvent(content, 100, 150, 0, -5); 87 } 88 is(content.scrollTop > 0, true, "We should have scrolled down somewhat"); 89 is(content.scrollTop, content.scrollTopMax, "We should have scrolled to the bottom of the scrollframe"); 90 is(rotationAdjusted, false, "The rotation should not have been adjusted"); 91 } 92 93 SimpleTest.waitForExplicitFinish(); 94 95 // If we allow smooth scrolling the "smooth" scrolling may cause the page to 96 // glide past the scrollbox (which is supposed to stop the scrolling) and so 97 // we might end up at the bottom of the page. 98 pushPrefs([["general.smoothScroll", false], 99 ["mousewheel.transaction.timeout", 100000], 100 ["dom.event.wheel-event-groups.enabled", true]]) 101 .then(waitUntilApzStable) 102 .then(test) 103 .then(SimpleTest.finish, SimpleTest.finishWithFailure); 104 105 </script> 106 </pre> 107 108 </body> 109 </html>