chromium/src/third_party/blink/web_tests/fast/scrolling/resize-corner-tracking-touch.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <script src='../../resources/gesture-util.js'></script>
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <style>
 div {
         overflow: auto;
         resize: both;
         border: blue 2px solid;
 }

 textarea {
         resize: both;
 }

 iframe {
         border: blue 2px solid;
 }
 </style>

 <div id="placeholder" style="width: 150px; height: 150px;">a placeholder so that we have enough elements to scroll the page</div>
 <div id="div" style="width: 150px; height: 100px;;"></div>
 <textarea id="textarea1" style="width: 150px; height: 100px;"></textarea>
 <br>
 <iframe id="iframe1" src="resources/resize-corner-tracking-touch-iframe.html" style="resize:both; width: 200px; height: 200px"></iframe>

 <script type="text/javascript">
     async function resize(target, offset, touch_delta, device)
     {
         var rect = target.getBoundingClientRect();
         if (typeof(device) == "undefined")
            device = GestureSourceType.TOUCH_INPUT;
         await smoothScrollWithXY(-touch_delta.touch_delta_x, -touch_delta.touch_delta_y,
                                  rect.right + offset.x, rect.bottom + offset.y, device,
                                  SPEED_INSTANT);
     }

     promise_test(async () => {
         // Scroll the page first to test that resize works with scrolled page.
         document.scrollingElement.scrollTop = 50;

         // Touch scrolling starting at inside the object, and within the normal
         // resizer area (15x15), e.g. offset (-6, -7) from bottom right corner of
         // the object, will do the resize.
         var target = document.getElementById("div");
         var old_width = target.offsetWidth;
         var old_height = target.offsetHeight;
         await resize(target, {x: -6, y: -7}, {touch_delta_x: 20, touch_delta_y: 10});
         // The resize expectation includes the touch slop region and is one frame
         // in the future based on the addition of the values of position and delta.
         assert_equals(target.offsetWidth - old_width, 53);
         assert_equals(target.offsetHeight - old_height, 17);
     }, 'Touch scrolling inside the resizer area of div will do the resize.');

     promise_test(async () => {
         // Touch scrolling starting at outside of the object, e.g. offset (6, 7)
         // from bottom right corner of the object, won't do the resize.
         var target = document.getElementById("div");
         var old_width = target.offsetWidth;
         var old_height = target.offsetHeight;
         await resize(target, {x: 6, y: 7}, {touch_delta_x: 20, touch_delta_y: 10});
         assert_equals(target.offsetWidth - old_width, 0);
         assert_equals(target.offsetHeight - old_height, 0);
     }, 'Touch scrolling outside of div will not do the resize.');

     promise_test(async () => {
         // Touch scrolling starting at inside the object, and only a little bit
         // off the resizer area, e.g. offset (-20, -20) from bottom right corner of
         // the object, will do the resize.
         var target = document.getElementById("textarea1");
         var old_width = target.offsetWidth;
         var old_height = target.offsetHeight;
         await resize(target, {x: -20, y: -20}, {touch_delta_x: 20, touch_delta_y: 10});
         // The resize expectation includes the touch slop region and is one frame
         // in the future based on the addition of the values of position and delta.
         assert_equals(target.offsetWidth - old_width, 53);
         assert_equals(target.offsetHeight - old_height, 17);
     }, 'Touch scrolling a little off the resizer area of textarea will do the resize.');

     promise_test(async () => {
         var target = document.getElementById("textarea1");
         var old_width = target.offsetWidth;
         var old_height = target.offsetHeight;
         await resize(target, {x: -6, y: -7}, {touch_delta_x: 20, touch_delta_y: 10},
                      GestureSourceType.TOUCHPAD_INPUT);
         assert_equals(target.offsetWidth - old_width, 0);
         assert_equals(target.offsetHeight - old_height, 0);
     }, 'Touchpad scroll should not resize textarea');

     promise_test(async () => {
         // Scroll the page again
         document.scrollingElement.scrollTop += 100;

         var iframe = document.getElementById("iframe1");
         var old_width = iframe.offsetWidth;
         var old_height = iframe.offsetHeight;
         await resize(iframe, {x: -6, y: -7}, {touch_delta_x: 20, touch_delta_y: 10});
         assert_equals(iframe.offsetWidth - old_width, 53);
         assert_equals(iframe.offsetHeight - old_height, 17);
     }, 'Touch scrolling inside the resizer area of iframe will do the resize after scroll.');

     promise_test(async () => {
         var iframe = document.getElementById("iframe1");
         var old_width = iframe.offsetWidth;
         var old_height = iframe.offsetHeight;
         await resize(iframe, {x: -20, y: -20}, {touch_delta_x: 20, touch_delta_y: 10});
         assert_equals(iframe.offsetWidth - old_width, 53);
         assert_equals(iframe.offsetHeight - old_height, 17);
     }, 'Touch scrolling a little off the resizer area of iframe will do the resize after scroll.');

     promise_test(async () => {
         var iframe = document.getElementById("iframe1");
         var rect = iframe.getBoundingClientRect();
         var target = iframe.contentDocument.getElementById("textarea2");
         var old_width = target.offsetWidth;
         var old_height = target.offsetHeight;
         await resize(target, {x: rect.left - 6, y: rect.top - 7},
                      {touch_delta_x: 20, touch_delta_y: 10});
         assert_equals(target.offsetWidth - old_width, 53);
         assert_equals(target.offsetHeight - old_height, 17);
     }, 'Touch scrolling inside the resizer area of textarea in iframe will do the resize after scroll.');
 </script>
	<!DOCTYPE html>
	<script src='../../resources/gesture-util.js'></script>
	<script src="../../resources/testharness.js"></script>
	<script src="../../resources/testharnessreport.js"></script>
	<style>
	div {
	overflow: auto;
	resize: both;
	border: blue 2px solid;
	}

	textarea {
	resize: both;
	}

	iframe {
	border: blue 2px solid;
	}
	</style>

	<div id="placeholder" style="width: 150px; height: 150px;">a placeholder so that we have enough elements to scroll the page</div>
	<div id="div" style="width: 150px; height: 100px;;"></div>
	<textarea id="textarea1" style="width: 150px; height: 100px;"></textarea>
	<br>
	<iframe id="iframe1" src="resources/resize-corner-tracking-touch-iframe.html" style="resize:both; width: 200px; height: 200px"></iframe>

	<script type="text/javascript">
	async function resize(target, offset, touch_delta, device)
	{
	var rect = target.getBoundingClientRect();
	if (typeof(device) == "undefined")
	device = GestureSourceType.TOUCH_INPUT;
	await smoothScrollWithXY(-touch_delta.touch_delta_x, -touch_delta.touch_delta_y,
	rect.right + offset.x, rect.bottom + offset.y, device,
	SPEED_INSTANT);
	}

	promise_test(async () => {
	// Scroll the page first to test that resize works with scrolled page.
	document.scrollingElement.scrollTop = 50;

	// Touch scrolling starting at inside the object, and within the normal
	// resizer area (15x15), e.g. offset (-6, -7) from bottom right corner of
	// the object, will do the resize.
	var target = document.getElementById("div");
	var old_width = target.offsetWidth;
	var old_height = target.offsetHeight;
	await resize(target, {x: -6, y: -7}, {touch_delta_x: 20, touch_delta_y: 10});
	// The resize expectation includes the touch slop region and is one frame
	// in the future based on the addition of the values of position and delta.
	assert_equals(target.offsetWidth - old_width, 53);
	assert_equals(target.offsetHeight - old_height, 17);
	}, 'Touch scrolling inside the resizer area of div will do the resize.');

	promise_test(async () => {
	// Touch scrolling starting at outside of the object, e.g. offset (6, 7)
	// from bottom right corner of the object, won't do the resize.
	var target = document.getElementById("div");
	var old_width = target.offsetWidth;
	var old_height = target.offsetHeight;
	await resize(target, {x: 6, y: 7}, {touch_delta_x: 20, touch_delta_y: 10});
	assert_equals(target.offsetWidth - old_width, 0);
	assert_equals(target.offsetHeight - old_height, 0);
	}, 'Touch scrolling outside of div will not do the resize.');

	promise_test(async () => {
	// Touch scrolling starting at inside the object, and only a little bit
	// off the resizer area, e.g. offset (-20, -20) from bottom right corner of
	// the object, will do the resize.
	var target = document.getElementById("textarea1");
	var old_width = target.offsetWidth;
	var old_height = target.offsetHeight;
	await resize(target, {x: -20, y: -20}, {touch_delta_x: 20, touch_delta_y: 10});
	// The resize expectation includes the touch slop region and is one frame
	// in the future based on the addition of the values of position and delta.
	assert_equals(target.offsetWidth - old_width, 53);
	assert_equals(target.offsetHeight - old_height, 17);
	}, 'Touch scrolling a little off the resizer area of textarea will do the resize.');

	promise_test(async () => {
	var target = document.getElementById("textarea1");
	var old_width = target.offsetWidth;
	var old_height = target.offsetHeight;
	await resize(target, {x: -6, y: -7}, {touch_delta_x: 20, touch_delta_y: 10},
	GestureSourceType.TOUCHPAD_INPUT);
	assert_equals(target.offsetWidth - old_width, 0);
	assert_equals(target.offsetHeight - old_height, 0);
	}, 'Touchpad scroll should not resize textarea');

	promise_test(async () => {
	// Scroll the page again
	document.scrollingElement.scrollTop += 100;

	var iframe = document.getElementById("iframe1");
	var old_width = iframe.offsetWidth;
	var old_height = iframe.offsetHeight;
	await resize(iframe, {x: -6, y: -7}, {touch_delta_x: 20, touch_delta_y: 10});
	assert_equals(iframe.offsetWidth - old_width, 53);
	assert_equals(iframe.offsetHeight - old_height, 17);
	}, 'Touch scrolling inside the resizer area of iframe will do the resize after scroll.');

	promise_test(async () => {
	var iframe = document.getElementById("iframe1");
	var old_width = iframe.offsetWidth;
	var old_height = iframe.offsetHeight;
	await resize(iframe, {x: -20, y: -20}, {touch_delta_x: 20, touch_delta_y: 10});
	assert_equals(iframe.offsetWidth - old_width, 53);
	assert_equals(iframe.offsetHeight - old_height, 17);
	}, 'Touch scrolling a little off the resizer area of iframe will do the resize after scroll.');

	promise_test(async () => {
	var iframe = document.getElementById("iframe1");
	var rect = iframe.getBoundingClientRect();
	var target = iframe.contentDocument.getElementById("textarea2");
	var old_width = target.offsetWidth;
	var old_height = target.offsetHeight;
	await resize(target, {x: rect.left - 6, y: rect.top - 7},
	{touch_delta_x: 20, touch_delta_y: 10});
	assert_equals(target.offsetWidth - old_width, 53);
	assert_equals(target.offsetHeight - old_height, 17);
	}, 'Touch scrolling inside the resizer area of textarea in iframe will do the resize after scroll.');
	</script>