layout/xul/test/test_bug511075.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=511075
   5 -->
   6 <head>
   7   <title>Test for Bug 511075</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <script src="/tests/SimpleTest/EventUtils.js"></script>
  10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  11   <style>
  12   #scroller {
  13     border: 1px solid black;
  14   }
  15   </style>
  16 </head>
  17 <body onload="runTests()">
  18 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=511075">Mozilla Bug 511075</a>
  19 <p id="display"></p>
  20 <div id="content" style="display: none">
  21
  22 </div>
  23 <pre id="test">
  24 <script type="application/javascript">
  25
  26 /** Test for Bug 511075 **/
  27
  28 SimpleTest.waitForExplicitFinish();
  29 SimpleTest.requestFlakyTimeout("untriaged");
  30
  31 var tests = [
  32   function() {
  33     ok(true, "Setting location.hash should scroll.");
  34     nextTest();
  35     // Click the top scroll arrow.
  36     var x = scroller.getBoundingClientRect().width - 5;
  37     var y = 5;
  38     // On MacOSX the top scroll arrow can be below the slider just above
  39     // the bottom scroll arrow.
  40     if (navigator.platform.includes("Mac"))
  41       y = scroller.getBoundingClientRect().height - 40;
  42     synthesizeMouse(scroller, x, y, { type : "mousedown" }, window);
  43     synthesizeMouse(scroller, x, y, { type: "mouseup" }, window);
  44   },
  45   function() {
  46     ok(true, "Clicking the top scroll arrow should scroll.");
  47     nextTest();
  48     // Click the bottom scroll arrow.
  49     var x = scroller.getBoundingClientRect().width - 5;
  50     var y = scroller.getBoundingClientRect().height - 25;
  51     synthesizeMouse(scroller, x, y, { type : "mousedown" }, window);
  52     synthesizeMouse(scroller, x, y, { type: "mouseup" }, window);
  53   },
  54   function() {
  55     ok(true, "Clicking the bottom scroll arrow should scroll.");
  56     nextTest();
  57     // Click the scrollbar.
  58     var x = scroller.getBoundingClientRect().width - 5;
  59     synthesizeMouse(scroller, x, 40, { type : "mousedown" }, window);
  60     synthesizeMouse(scroller, x, 40, { type: "mouseup" }, window);
  61   },
  62   function() {
  63     ok(true, "Clicking the scrollbar should scroll");
  64     nextTest();
  65     // Click the scrollbar.
  66     var x = scroller.getBoundingClientRect().width - 5;
  67     var y = scroller.getBoundingClientRect().height - 50;
  68     synthesizeMouse(scroller, x, y, { type : "mousedown" }, window);
  69     synthesizeMouse(scroller, x, y, { type: "mouseup" }, window);
  70   },
  71   function() {
  72     scroller.onscroll = null;
  73     ok(true, "Clicking the scrollbar should scroll");
  74     finish();
  75   }
  76 ];
  77
  78 document.onmousedown = function () { return false; };
  79 document.onmouseup = function () { return true; };
  80
  81
  82 var scroller;
  83 var timer = 0;
  84
  85 function failure() {
  86   ok(false, scroller.onscroll + " did not run!");
  87   scroller.onscroll = null;
  88   finish();
  89 }
  90
  91 function nextTest() {
  92   clearTimeout(timer);
  93   scroller.onscroll = tests.shift();
  94   timer = setTimeout(failure, 2000);
  95 }
  96
  97 function runTests() {
  98   scroller = document.getElementById("scroller");
  99   nextTest();
 100   window.location.hash = "initialPosition";
 101 }
 102
 103 function finish() {
 104   document.onmousedown = null;
 105   document.onmouseup = null;
 106   clearTimeout(timer);
 107   window.location.hash = "topPosition";
 108   SimpleTest.finish();
 109 }
 110
 111
 112 </script>
 113 </pre>
 114 <div id="scroller" style="overflow: scroll; width: 100px; height: 150px;">
 115 <a id="topPosition" name="topPosition">top</a>
 116 <div style="width: 20000px; height: 20000px;"></div>
 117 <a id="initialPosition" name="initialPosition">initialPosition</a>
 118 <div style="width: 20000px; height: 20000px;"></div>
 119 </div>
 120 </body>
 121 </html>