chromium/src/third_party/blink/web_tests/fast/events/touch/touch-action-range-input.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <script src='../../../resources/testharness.js'></script>
 <script src='../../../resources/testharnessreport.js'></script>
 <style type='text/css'>
   #box {
     width: 100px;
     height: 100px;
     background: red;
     padding: 0px;
     margin: 0px;
   }

   td {
     padding: 0px;
   }

 </style>

 <table id='table1'>
   <tr><td><div id='box'></div></td></tr>
 </table>
 <div><input type='range' id='slider1' min = '0' max = '100' step = '10'></input></div>
 <div><input type='range' id='slider2' min = '0' max = '100' step = '10' style='touch-action:none;'></div>
 <div><input type='range' id='slider3' min = '0' max = '100' step = '10' style='-webkit-appearance: slider-vertical;'></div>
 <table id = 'table2'><tbody /></table>

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

 function buildPage() {
   var tbody1 = document.getElementById('table1').children[0];
   var tbody2 = document.getElementById('table2').children[0];
   var targetHeight = window.innerHeight;
   var targetWidth = window.innerWidth;
   var row = targetHeight / tbody1.offsetHeight;
   var col = targetWidth / tbody1.offsetWidth * 2;

   var i = 0;
   var j = 0;
   // Create some room at the top for scrolling.
   var tr = document.createElement('tr');
   for (j = 0; j < col; ++j) {
     var td = document.createElement('td');
     td.innerHTML = '<div id="box"></div>';
     tr.appendChild(td);
   }
   tbody1.appendChild(tr);
   // Take up enough space to overflow the page horizontally and vertically.
   for (i = 0; i < row; ++i) {
     var tr = document.createElement('tr');
     for (j = 0; j < col; ++j) {
       var td = document.createElement('td');
       td.innerHTML = '<div id="box"></div>';
       tr.appendChild(td);
     }
     tbody2.appendChild(tr);
   }
 }

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

 var slider1 = document.getElementById('slider1');
 var slider2 = document.getElementById('slider2');
 var slider3 = document.getElementById('slider3')
 var container1 = internals.shadowRoot(slider1).children[0];
 var container2 = internals.shadowRoot(slider2).children[0];
 var container3 = internals.shadowRoot(slider3).children[0];
 const touchSourceType = 1;


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

 function testSlider1H() {
   var testSlider1H = async_test('Changes the value of a horizontal slider.');
   testSlider1H.step(function () {
     var offsetX = window.pageXOffset;
     var offsetY = window.pageYOffset;
     var w = slider1.clientWidth;
     var h = slider1.clientHeight;
     var x = slider1.offsetLeft + w / 2 - offsetX;
     var y = slider1.offsetTop + h / 2 - offsetY;
     assert_equals(parseInt(slider1.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 slider1's value to 0.
       assert_equals(parseInt(slider1.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);
       testSlider1V();
       testSlider1H.done();
     }, touchSourceType);
 });
 }

 function testSlider1V() {
   var testSlider1V = async_test('Drags up on a horizontal slider.');
   testSlider1V.step(function () {
     var offsetX = window.pageXOffset;
     var offsetY = window.pageYOffset;
     var w = slider1.clientWidth;
     var h = slider1.clientHeight;
     var x = slider1.offsetLeft - offsetX;
     var y = slider1.offsetTop - offsetY;
     assert_equals(parseInt(slider1.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 slider1's value.
       assert_equals(parseInt(slider1.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);
       testSlider2();
       testSlider1V.done();
     }, touchSourceType);
 });
 }

 function testSlider2() {
   var testSlider2 = async_test('Drags up on a horizontal slider with touch-action=none.');
   testSlider2.step(function () {
     var offsetX = window.pageXOffset;
     var offsetY = window.pageYOffset;
     var w = slider2.clientWidth;
     var h = slider2.clientHeight;
     var x = slider2.offsetLeft + w / 2 - offsetX;
     var y = slider2.offsetTop + h / 2 - offsetY;
     assert_equals(parseInt(slider2.value), 50);
   // Perform an up drag with a bit right on the thumb.
   chrome.gpuBenchmarking.smoothDrag(x, y, x + 10, y - 100,
     function() {
       // Should not change slider2's value.
       assert_equals(parseInt(slider2.value), 50);
       // 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, 10);
       testSlider3V();
       testSlider2.done();
     }, touchSourceType);
 });
 }

 function testSlider3V() {
   var testSlider3V = async_test('Changes value of a vertical slider.');
   testSlider3V.step(function () {
     var offsetX = window.pageXOffset;
     var offsetY = window.pageYOffset;
     var w = slider3.clientWidth;
     var h = slider3.clientHeight;
     var x = slider3.offsetLeft + w / 2 - offsetX;
     var y = slider3.offsetTop + h / 2 - offsetY;
     assert_equals(parseInt(slider3.value), 50);
   // Perform an up drag with a bit left on the thumb.
   chrome.gpuBenchmarking.smoothDrag(x, y, x - h / 2, y - h,
     function() {
       // Should set slider3' value to 100.
       assert_equals(parseInt(slider3.value), 100);
       // 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, 10);
       testSlider3H();
       testSlider3V.done();
     }, touchSourceType);
 });
 }

 function testSlider3H() {
   var testSlider3H = async_test('Drags left on a vertical slider.');
   testSlider3H.step(function () {
     var offsetX = window.pageXOffset;
     var offsetY = window.pageYOffset;
     var w = slider3.clientWidth;
     var h = slider3.clientHeight;
     var x = slider3.offsetLeft - offsetX;
     var y = slider3.offsetTop - offsetY;
     assert_equals(parseInt(slider3.value), 100);
   // Perform a left drag with a bit down on the thumb.
   chrome.gpuBenchmarking.smoothDrag(x, y, x - 100, slider2.offsetTop + 10,
     function() {
       // Should not change slider3' value.
       assert_equals(parseInt(slider3.value), 100);
       // Should not drag the page vertically.
       assert_approx_equals(window.pageYOffset, offsetY, 10);
       // Should drag the page leftwards.
       assert_approx_equals(window.pageXOffset, offsetX + 85, 10);
       testTouchAction();
       testSlider3H.done();
     }, touchSourceType);
 });
 }

 function testTouchAction() {
   test(() => {
     assert_equals(getComputedStyle(container1).touchAction, 'pan-y');
     assert_equals(getComputedStyle(container2).touchAction, 'pan-y');
     assert_equals(getComputedStyle(container3).touchAction, 'pan-x');
     assert_equals(getComputedStyle(slider2).touchAction, 'none');

     slider1.style='-webkit-appearance: slider-vertical;';
     slider3.style='';
     forceLayoutUpdate();
     assert_equals(getComputedStyle(container1).touchAction, 'pan-x');
     assert_equals(getComputedStyle(container3).touchAction, 'pan-y');
   }, 'Tests that each <input range="type"> has the correct pan-x or pan-y touch-action inside its shadow element: container. This touch-action is under the user-specified touch-action, and will update with the -webkit-appearance.');
 }
 </script>
	<!DOCTYPE html>
	<script src='../../../resources/testharness.js'></script>
	<script src='../../../resources/testharnessreport.js'></script>
	<style type='text/css'>
	#box {
	width: 100px;
	height: 100px;
	background: red;
	padding: 0px;
	margin: 0px;
	}

	td {
	padding: 0px;
	}

	</style>

	<table id='table1'>
	<tr><td><div id='box'></div></td></tr>
	</table>
	<div><input type='range' id='slider1' min = '0' max = '100' step = '10'></input></div>
	<div><input type='range' id='slider2' min = '0' max = '100' step = '10' style='touch-action:none;'></div>
	<div><input type='range' id='slider3' min = '0' max = '100' step = '10' style='-webkit-appearance: slider-vertical;'></div>
	<table id = 'table2'><tbody /></table>

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

	function buildPage() {
	var tbody1 = document.getElementById('table1').children[0];
	var tbody2 = document.getElementById('table2').children[0];
	var targetHeight = window.innerHeight;
	var targetWidth = window.innerWidth;
	var row = targetHeight / tbody1.offsetHeight;
	var col = targetWidth / tbody1.offsetWidth * 2;

	var i = 0;
	var j = 0;
	// Create some room at the top for scrolling.
	var tr = document.createElement('tr');
	for (j = 0; j < col; ++j) {
	var td = document.createElement('td');
	td.innerHTML = '<div id="box"></div>';
	tr.appendChild(td);
	}
	tbody1.appendChild(tr);
	// Take up enough space to overflow the page horizontally and vertically.
	for (i = 0; i < row; ++i) {
	var tr = document.createElement('tr');
	for (j = 0; j < col; ++j) {
	var td = document.createElement('td');
	td.innerHTML = '<div id="box"></div>';
	tr.appendChild(td);
	}
	tbody2.appendChild(tr);
	}
	}

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

	var slider1 = document.getElementById('slider1');
	var slider2 = document.getElementById('slider2');
	var slider3 = document.getElementById('slider3')
	var container1 = internals.shadowRoot(slider1).children[0];
	var container2 = internals.shadowRoot(slider2).children[0];
	var container3 = internals.shadowRoot(slider3).children[0];
	const touchSourceType = 1;


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

	function testSlider1H() {
	var testSlider1H = async_test('Changes the value of a horizontal slider.');
	testSlider1H.step(function () {
	var offsetX = window.pageXOffset;
	var offsetY = window.pageYOffset;
	var w = slider1.clientWidth;
	var h = slider1.clientHeight;
	var x = slider1.offsetLeft + w / 2 - offsetX;
	var y = slider1.offsetTop + h / 2 - offsetY;
	assert_equals(parseInt(slider1.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 slider1's value to 0.
	assert_equals(parseInt(slider1.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);
	testSlider1V();
	testSlider1H.done();
	}, touchSourceType);
	});
	}

	function testSlider1V() {
	var testSlider1V = async_test('Drags up on a horizontal slider.');
	testSlider1V.step(function () {
	var offsetX = window.pageXOffset;
	var offsetY = window.pageYOffset;
	var w = slider1.clientWidth;
	var h = slider1.clientHeight;
	var x = slider1.offsetLeft - offsetX;
	var y = slider1.offsetTop - offsetY;
	assert_equals(parseInt(slider1.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 slider1's value.
	assert_equals(parseInt(slider1.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);
	testSlider2();
	testSlider1V.done();
	}, touchSourceType);
	});
	}

	function testSlider2() {
	var testSlider2 = async_test('Drags up on a horizontal slider with touch-action=none.');
	testSlider2.step(function () {
	var offsetX = window.pageXOffset;
	var offsetY = window.pageYOffset;
	var w = slider2.clientWidth;
	var h = slider2.clientHeight;
	var x = slider2.offsetLeft + w / 2 - offsetX;
	var y = slider2.offsetTop + h / 2 - offsetY;
	assert_equals(parseInt(slider2.value), 50);
	// Perform an up drag with a bit right on the thumb.
	chrome.gpuBenchmarking.smoothDrag(x, y, x + 10, y - 100,
	function() {
	// Should not change slider2's value.
	assert_equals(parseInt(slider2.value), 50);
	// 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, 10);
	testSlider3V();
	testSlider2.done();
	}, touchSourceType);
	});
	}

	function testSlider3V() {
	var testSlider3V = async_test('Changes value of a vertical slider.');
	testSlider3V.step(function () {
	var offsetX = window.pageXOffset;
	var offsetY = window.pageYOffset;
	var w = slider3.clientWidth;
	var h = slider3.clientHeight;
	var x = slider3.offsetLeft + w / 2 - offsetX;
	var y = slider3.offsetTop + h / 2 - offsetY;
	assert_equals(parseInt(slider3.value), 50);
	// Perform an up drag with a bit left on the thumb.
	chrome.gpuBenchmarking.smoothDrag(x, y, x - h / 2, y - h,
	function() {
	// Should set slider3' value to 100.
	assert_equals(parseInt(slider3.value), 100);
	// 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, 10);
	testSlider3H();
	testSlider3V.done();
	}, touchSourceType);
	});
	}

	function testSlider3H() {
	var testSlider3H = async_test('Drags left on a vertical slider.');
	testSlider3H.step(function () {
	var offsetX = window.pageXOffset;
	var offsetY = window.pageYOffset;
	var w = slider3.clientWidth;
	var h = slider3.clientHeight;
	var x = slider3.offsetLeft - offsetX;
	var y = slider3.offsetTop - offsetY;
	assert_equals(parseInt(slider3.value), 100);
	// Perform a left drag with a bit down on the thumb.
	chrome.gpuBenchmarking.smoothDrag(x, y, x - 100, slider2.offsetTop + 10,
	function() {
	// Should not change slider3' value.
	assert_equals(parseInt(slider3.value), 100);
	// Should not drag the page vertically.
	assert_approx_equals(window.pageYOffset, offsetY, 10);
	// Should drag the page leftwards.
	assert_approx_equals(window.pageXOffset, offsetX + 85, 10);
	testTouchAction();
	testSlider3H.done();
	}, touchSourceType);
	});
	}

	function testTouchAction() {
	test(() => {
	assert_equals(getComputedStyle(container1).touchAction, 'pan-y');
	assert_equals(getComputedStyle(container2).touchAction, 'pan-y');
	assert_equals(getComputedStyle(container3).touchAction, 'pan-x');
	assert_equals(getComputedStyle(slider2).touchAction, 'none');

	slider1.style='-webkit-appearance: slider-vertical;';
	slider3.style='';
	forceLayoutUpdate();
	assert_equals(getComputedStyle(container1).touchAction, 'pan-x');
	assert_equals(getComputedStyle(container3).touchAction, 'pan-y');
	}, 'Tests that each <input range="type"> has the correct pan-x or pan-y touch-action inside its shadow element: container. This touch-action is under the user-specified touch-action, and will update with the -webkit-appearance.');
	}
	</script>