third_party/WebKit/LayoutTests/fast/forms/datalist/range-snap-to-datalist.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <p id="description">Tests if clicking close to a tick mark snaps to it. Result will change depending on the return value of LayoutTheme::sliderTickSnappingThreshold().</p>
   8 <div id="console"></div>
   9 <input id="input" type=range min=0 max=1000 step=1 list=target style="width: 100px">
  10 <datalist id="target">
  11     <option>500</option>
  12 </datalist>
  13 <script>
  14 var input = document.getElementById("input");
  15 function clickSlider(offsetLeft) {
  16     var centerY = input.offsetTop + input.offsetHeight / 2;
  17     eventSender.mouseMoveTo(input.offsetLeft + offsetLeft, centerY);
  18     eventSender.mouseDown();
  19     eventSender.mouseUp();
  20 }
  21 function resetSliderPosition() {
  22     clickSlider(0);
  23     if (input.value !== "0") {
  24         testFailed('Failed to reset slider position');
  25     }
  26 }
  27 function test(position) {
  28         resetSliderPosition();
  29         clickSlider(position);
  30         var value = parseInt(input.value, 10);
  31         if (value < 500) {
  32                 debug('value for ' + position + ' is &lt;500');
  33         } else if (value > 500) {
  34                 debug('value for ' + position + ' is &gt;500');
  35         } else {
  36                 debug('value for ' + position + ' is =500');
  37         }
  38 }
  39
  40 for (var i = 40; i <= 60; ++i) {
  41         test(i);
  42 }
  43 </script>
  44
  45 </body>
  46 </html>