src/third_party/WebKit/LayoutTests/fast/forms/range/slider-onchange-event.html

   1 <html>
   2     <head>
   3         <script>
   4             function log(msg)
   5             {
   6                 var res = document.getElementById('res');
   7                 res.innerHTML = res.innerHTML + msg + "<br>";
   8             }
   9             function test()
  10             {
  11                 var slider = document.getElementById('slider');
  12                 if (window.testRunner) {
  13                     testRunner.dumpAsText();
  14                     // slider drag
  15                     eventSender.mouseMoveTo(slider.offsetLeft + 7, slider.offsetTop + 7);
  16                     eventSender.mouseDown();
  17                     eventSender.mouseMoveTo(slider.offsetLeft + 50, slider.offsetTop + 50);
  18                     eventSender.mouseUp();
  19                     // single click
  20                     eventSender.mouseMoveTo(slider.offsetLeft + 7, slider.offsetTop + 7);
  21                     eventSender.mouseDown();
  22                     eventSender.mouseUp();
  23                     // single click again, should send no onchange event
  24                     eventSender.mouseMoveTo(slider.offsetLeft + 7, slider.offsetTop + 7);
  25                     eventSender.mouseDown();
  26                     eventSender.mouseUp();
  27                     // On touch events, check if change event is dispatched at touch end
  28                     var x = slider.offsetLeft;
  29                     var y = slider.offsetTop + slider.clientHeight / 2;
  30                     var w = slider.clientWidth;
  31
  32                     eventSender.clearTouchPoints();
  33                     eventSender.addTouchPoint(x + w / 2, y);
  34                     eventSender.touchStart();
  35                     eventSender.touchMove();
  36                     eventSender.releaseTouchPoint(0);
  37                     eventSender.touchEnd();
  38                 }
  39             }
  40         </script>
  41     </head>
  42     <body onload="test()">
  43         This tests that slider controls get the onchange event and that it is sent after the DOMInput event.<br>
  44         <input type="range" id="slider" onchange="log('change')" oninput="log('input')" value=0 width=200px height=300px>
  45         <div id="res"></div>
  46     </body>
  47 </html>