third_party/WebKit/LayoutTests/fast/events/wheelevent-ctrl.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link rel="help" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-WheelEvent">
   5 <script src="../../resources/js-test.js"></script>
   6 <script>
   7 var deltaY = 0;
   8 var scrollAmount = -2;
   9 var expectedDeltaY = scrollAmount * -40;
  10
  11 var testDiv;
  12 function runTest() {
  13
  14     testDiv = document.getElementById('target');
  15     document.addEventListener('wheel', wheelHandler);
  16     if (!window.eventSender) {
  17         debug("FAIL: This test requires window.eventSender.");
  18         return;
  19     }
  20
  21     debug('Test mousewheel events over scrollable div');
  22
  23     debug('With ctrl modifier set and canScroll set to be false');
  24     wheelEventCount = 0;
  25     eventSender.mouseMoveTo(testDiv.offsetLeft + 5, testDiv.offsetTop + 5);
  26     eventSender.mouseScrollBy(0, scrollAmount, false, true, "ctrlKey", false);
  27     shouldBe("wheelEventCount", "1");
  28     shouldEvaluateTo("deltaY", expectedDeltaY);
  29     shouldBeTrue("ctrlKey");
  30     shouldBe("testDiv.scrollTop", "0");
  31
  32     debug('Without ctrl and canScroll set to be default true');
  33     wheelEventCount = 0;
  34     eventSender.mouseMoveTo(testDiv.offsetLeft + 5, testDiv.offsetTop + 5);
  35     eventSender.mouseScrollBy(0, scrollAmount, false, true);
  36     shouldBe("wheelEventCount", "1");
  37     shouldEvaluateTo("deltaY", expectedDeltaY);
  38     shouldBeFalse("ctrlKey");
  39     shouldBe("testDiv.scrollTop", "deltaY");
  40
  41     debug('');
  42     debug('Test mousewheel events over the document');
  43     testDiv = document.getElementById('target2');
  44
  45     debug('With ctrl modifier set and canScroll set to be false');
  46     wheelEventCount = 0;
  47     eventSender.mouseMoveTo(testDiv.offsetLeft + 5, testDiv.offsetTop + 5);
  48     eventSender.mouseScrollBy(0, scrollAmount, false, true, "ctrlKey", false);
  49     shouldBe("wheelEventCount", "1");
  50     shouldEvaluateTo("deltaY", expectedDeltaY);
  51     shouldBeTrue("ctrlKey");
  52     shouldBe("window.scrollY", "0");
  53
  54     debug('With ctrl modifier set and canScroll set to be true');
  55     wheelEventCount = 0;
  56     eventSender.mouseMoveTo(testDiv.offsetLeft + 5, testDiv.offsetTop + 5);
  57     eventSender.mouseScrollBy(0, scrollAmount, false, true, "ctrlKey", true);
  58     shouldBe("wheelEventCount", "1");
  59     shouldEvaluateTo("deltaY", expectedDeltaY);
  60     shouldBeTrue("ctrlKey");
  61     shouldBe("window.scrollY", "deltaY");
  62
  63     debug('Now without ctrl and canScroll set to be default true');
  64     wheelEventCount = 0;
  65     eventSender.mouseMoveTo(testDiv.offsetLeft + 5, testDiv.offsetTop + 5);
  66     eventSender.mouseScrollBy(0, scrollAmount, false, true);
  67     shouldBe("wheelEventCount", "1");
  68     shouldEvaluateTo("deltaY", expectedDeltaY);
  69     shouldBeFalse("ctrlKey");
  70     shouldEvaluateTo("window.scrollY", 2 * expectedDeltaY);
  71 }
  72
  73 var wheelEventCount = 0;
  74 var ctrlKey = false;
  75 function wheelHandler(e) {
  76     wheelEventCount++;
  77     deltaY = e.deltaY;
  78     ctrlKey = e.ctrlKey;
  79 }
  80
  81 </script>
  82 </head>
  83 <body>
  84 <span id="parent">
  85     <div id="target" style="border:solid 1px green; width:220px; height:70px; overflow:scroll; white-space:nowrap;">
  86         TOP<br/><br/><br/><br/>
  87         Scroll mouse wheel over here<br/><br/><br/><br/>
  88         END
  89     </div>
  90     <div id="target2" style="border:solid 1px blue;">
  91        And scroll the document here
  92     </div>
  93     <div style="height: 2000px;"></div>
  94 </span>
  95 <div id="console"></div>
  96 <script>
  97 description("Tests that wheel events with the ctrl modifier are handled properly");
  98
  99 runTest();
 100 </script>
 101 </body>
 102 </html>