third_party/WebKit/LayoutTests/fast/forms/range/range-hit-test-with-padding.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <p id="description">Clicking middle of input type=range with padding should set the value to middle.</p>
   8 <div id="console"></div>
   9 <input id="ltr" type=range min=0 max=50 step=1 value="0" style="width: 100px; padding: 0 40px;">
  10 <input id="rtl" dir="rtl" type=range min=0 max=50 step=1 value="0" style="width: 100px; padding: 0 40px;">
  11 <input id="vertical_ltr" type=range min=0 max=50 step=1 value="0" style="-webkit-appearance:slider-vertical; width: 20px; height: 100px; padding: 40px 0;">
  12 <input id="vertical_rtl" dir="rtl" type=range min=0 max=50 step=1 value="0" style="-webkit-appearance:slider-vertical; width: 20px; height: 100px; padding: 40px 0;">
  13 <script>
  14 function clickHorizontalSlider(input, offsetLeft) {
  15     var centerY = input.offsetTop + input.offsetHeight / 2;
  16     if (!window.eventSender)
  17         return;
  18     eventSender.mouseMoveTo(input.offsetLeft + offsetLeft, centerY);
  19     eventSender.mouseDown();
  20     eventSender.mouseUp();
  21 }
  22
  23 function clickVerticalSlider(input, offsetTop) {
  24     var centerX = input.offsetLeft + input.offsetWidth / 2;
  25     if (!window.eventSender)
  26         return;
  27     eventSender.mouseMoveTo(centerX, input.offsetTop + offsetTop);
  28     eventSender.mouseDown();
  29     eventSender.mouseUp();
  30 }
  31
  32 var input_ltr = document.getElementById("ltr");
  33 clickHorizontalSlider(input_ltr, 90); // left padding (40px) + middle (50px)
  34 shouldBe('input_ltr.value', '"25"');
  35
  36 var input_rtl = document.getElementById("rtl");
  37 clickHorizontalSlider(input_rtl, 90); // left padding (40px) + middle (50px)
  38 shouldBe('input_rtl.value', '"25"');
  39
  40 var input_vertical_ltr = document.getElementById("vertical_rtl");
  41 clickVerticalSlider(input_vertical_ltr, 90); // top padding (40px) + middle (50px)
  42 shouldBe('input_vertical_ltr.value', '"25"');
  43
  44 var input_vertical_rtl = document.getElementById("vertical_rtl");
  45 clickVerticalSlider(input_vertical_rtl, 90); // top padding (40px) + middle (50px)
  46 shouldBe('input_vertical_rtl.value', '"25"');
  47 </script>
  48
  49 </body>
  50 </html>