touch-action-range-input-csp.html | Explore in Territory

<!DOCTYPE html>
<meta http-equiv="Content-Security-Policy" content="style-src 'self'">
<script src='../../../resources/testharness.js'></script>
<script src='../../../resources/testharnessreport.js'></script>
<div id='space1'></div>
<div><input type='range' id='slider' min = '0' max = '100' step = '10'></input></div>
<div id='space2'></div>

<script>
function forceLayoutUpdate() {
   document.body.offsetTop;
}

function buildPage() {
  var space1 = document.getElementById('space1');
  var space2 = document.getElementById('space2');
  for (var i = 0; i < 50; ++i) {
    var br = document.createElement('br');
    space1.appendChild(br);
    space2.appendChild(br);
  }
}

forceLayoutUpdate();
buildPage();
forceLayoutUpdate();

var slider = document.getElementById('slider');
var container = internals.shadowRoot(slider).children[0];
const touchSourceType = 1;


var isMac = navigator.platform.indexOf('Mac') == 0;
if (!isMac) {
  testSliderH();
} else {
  testTouchAction();
}

function testSliderH() {
  var testSliderH = async_test('Changes the value of a horizontal slider.');
  testSliderH.step(function () {
    var offsetX = window.pageXOffset;
    var offsetY = window.pageYOffset;
    var w = slider.clientWidth;
    var h = slider.clientHeight;
    var x = slider.offsetLeft + w / 2 - offsetX;
    var y = slider.offsetTop + h / 2 - offsetY;
    assert_equals(parseInt(slider.value), 50);
  // Perform a left drag with a bit up on the thumb.
  chrome.gpuBenchmarking.smoothDrag(x, y, x - w, y - w / 2,
    function() {
      // Should set slider's value to 0.
      assert_equals(parseInt(slider.value), 0);
      // Should not drag the page vertically.
      assert_approx_equals(window.pageYOffset, offsetY, 10);
      // Should not drag the page horizontally.
      assert_approx_equals(window.pageXOffset, offsetX, 0);
      testSliderV();
      testSliderH.done();
    }, touchSourceType);
});
}

function testSliderV() {
  var testSliderV = async_test('Drags up on a horizontal slider.');
  testSliderV.step(function () {
    var offsetX = window.pageXOffset;
    var offsetY = window.pageYOffset;
    var w = slider.clientWidth;
    var h = slider.clientHeight;
    var x = slider.offsetLeft - offsetX;
    var y = slider.offsetTop - offsetY;
    assert_equals(parseInt(slider.value), 0);
  // Perform an up drag with a bit right on the thumb.
  chrome.gpuBenchmarking.smoothDrag(x, y, x + 10, y - 100,
    function() {
      // Should not change slider's value.
      assert_equals(parseInt(slider.value), 0);
      // Should drag the page upwards.
      assert_approx_equals(window.pageYOffset, offsetY + 85, 10);
      // Should not drag the page horizontally.
      assert_approx_equals(window.pageXOffset, offsetX, 0);
      testTouchAction();
      testSliderV.done();
    }, touchSourceType);
});
}

function testTouchAction() {
  test(() => {
    assert_equals(getComputedStyle(container).touchAction, 'pan-y');
  }, 'Tests that <input range="type"> has the correct pan-x or pan-y touch-action inside its shadow element: container.');
}
</script>
chromium/third_party/blink/web_tests/fast/events/touch/touch-action-range-input-csp.html
