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