dom/events/test/test_bug1013412.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1013412
   5 -->
   6 <head>
   7   <title>Test for Bug 1013412</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <script src="/tests/SimpleTest/paint_listener.js"></script>
  10   <script src="/tests/SimpleTest/EventUtils.js"></script>
  11   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  12   <style>
  13   #content {
  14     height: 800px;
  15     overflow: scroll;
  16   }
  17
  18   #scroller {
  19     height: 2000px;
  20     background: repeating-linear-gradient(#EEE, #EEE 100px, #DDD 100px, #DDD 200px);
  21   }
  22
  23   #scrollbox {
  24     margin-top: 200px;
  25     width: 500px;
  26     height: 500px;
  27     border-radius: 250px;
  28     box-shadow: inset 0 0 0 60px #555;
  29     background: #777;
  30   }
  31
  32   #circle {
  33     position: relative;
  34     left: 240px;
  35     top: 20px;
  36     border: 10px solid white;
  37     border-radius: 10px;
  38     width: 0px;
  39     height: 0px;
  40     transform-origin: 10px 230px;
  41     will-change: transform;
  42   }
  43   </style>
  44 </head>
  45 <body>
  46 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1013412">Mozilla Bug 1013412</a>
  47 <p id="display"></p>
  48 <div id="content">
  49   <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>
  50   <div id="scroller">
  51    <div id="scrollbox">
  52     <div id="circle"></div>
  53    </div>
  54   </div>
  55 </div>
  56 <pre id="test">
  57 <script type="application/javascript">
  58
  59 /** Test for Bug 1013412 **/
  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   if (iteration < 300) { // enough iterations that we would scroll to the bottom of 'content'
  84     iteration++;
  85     sendWheelAndPaint(content, 100, 10,
  86                      { deltaMode: WheelEvent.DOM_DELTA_LINE,
  87                        deltaY: 1.0, lineOrPageDeltaY: 1 },
  88                      runTest);
  89     return;
  90   }
  91   var scrollbox = document.getElementById('scrollbox');
  92   is(content.scrollTop < content.scrollTopMax, true, "We should not have scrolled to the bottom of the scrollframe");
  93   is(rotationAdjusted, true, "The rotation should have been adjusted");
  94   SimpleTest.finish();
  95 }
  96
  97 function startTest() {
  98   // If we allow smooth scrolling the "smooth" scrolling may cause the page to
  99   // glide past the scrollbox (which is supposed to stop the scrolling) and so
 100   // we might end up at the bottom of the page.
 101   SpecialPowers.pushPrefEnv({"set": [["general.smoothScroll", false]]}, runTest);
 102 }
 103
 104 SimpleTest.waitForExplicitFinish();
 105 SimpleTest.waitForFocus(startTest, window);
 106
 107 </script>
 108 </pre>
 109
 110 </body>
 111 </html>