slider-hit-testing.html | Explore in Territory

<!DOCTYPE html>
<html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<title>Test for input type range hit slider.</title>
<body></body>

<script>

function createSlider(dir, wm) {
  let slider = document.createElement('input');
  slider.type = 'range';
  if (dir) {
    slider.style.direction = dir;
  }
  if (wm) {
    slider.style.writingMode = wm;
  }
  slider.style.height = '10px';
  slider.style.margin = 0;
  slider.min = 1;
  slider.max = 3;
  return slider;
}

function hitSlider(x, y) {
  eventSender.mouseMoveTo(x, y);
  eventSender.mouseDown();
  eventSender.mouseUp();
}

async_test(t => {
  if (!window.eventSender)
    return;
  const slider = createSlider(undefined, undefined);
  document.body.appendChild(slider);

  var x = slider.offsetLeft + (slider.clientWidth * .75);
  var y = slider.offsetTop + (slider.clientHeight * .2);
  hitSlider(x, y);

  assert_equals(slider.value, slider.max);
  document.body.removeChild(slider);
  t.done();
}, 'Clicking on the right side of slider should cause the value to increase.');

async_test(t => {
  if (!window.eventSender)
    return;
  const slider = createSlider('rtl', undefined);
  document.body.appendChild(slider);

  var x = slider.offsetLeft + (slider.clientWidth * .25);
  var y = slider.offsetTop + (slider.clientHeight * .2);
  hitSlider(x, y);

  assert_equals(slider.value, slider.max);
  document.body.removeChild(slider);
  t.done();
}, 'Clicking on the left side of RTL slider should cause the value to increase.');

async_test(t => {
  if (!window.eventSender)
    return;
  const slider = createSlider('rtl', 'vertical-rl');
  document.body.appendChild(slider);

  var x = slider.offsetLeft + (slider.clientWidth * .2);
  var y = slider.offsetTop + (slider.clientHeight * .25);
  hitSlider(x, y);

  assert_equals(slider.value, slider.max);
  document.body.removeChild(slider);
  t.done();
}, 'Clicking on the top side of vertical slider should cause the value to increase.');

async_test(t => {
  if (!window.eventSender)
    return;
  const slider = createSlider('ltr', 'vertical-lr');
  document.body.appendChild(slider);

  var x = slider.offsetLeft + (slider.clientWidth * .2);
  var y = slider.offsetTop + (slider.clientHeight * .75);
  hitSlider(x, y);

  assert_equals(slider.value, slider.max);
  document.body.removeChild(slider);
  t.done();
}, 'Clicking on the bottom side of LTR vertical slider should cause the value to increase.');

</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/range/slider-hit-testing.html
