chromium/src/third_party/blink/web_tests/accessibility/press-works-on-control-types-pointer-events.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE HTML>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.5">
   <script src="../resources/testharness.js"></script>
   <script src="../resources/testharnessreport.js"></script>
   <style>
     #tab {
       transform: rotate(20deg);
     }
     #checkbox {
       transform: scaleY(1.5);
     }
     #group {
       transform: skewY(30deg);
     }
   </style>
 </head>
 <body>

 <div id="container">
   <div role="group" id="group" tabindex="0">group</div>
   <div role="button" id="button" tabindex="0">button</div>
   <div role="tab" id="tab" tabindex="0">tab button</div>
   <div role="radio" id="radio" tabindex="0">radio</div>
   <div role="checkbox" id="checkbox" tabindex="0">checkbox</div>
   <div role="menuitem" id="menuitem" tabindex="0">menu item</div>
   <div role="menuitemcheckbox" id="menuitemcheckbox" tabindex="0">menu item checkbox</div>
   <div role="menuitemradio" id="menuitemradio" tabindex="0">menu item radio</div>
   <input id="radiobutton" type="radio" name="radiobutton" value="Radio Button">
   <label for="Radio Button">Radio Button</label>
   <button id="htmlbutton" >Click Me</button>
   <input id="inputbutton" type="button" value="Click Me">
 </div>


 <script>

 const container = document.getElementById("container");
 const events = ["pointerdown", "pointerup", "mousedown", "mouseup", "click"];
 const htmlElementIds = ["group", "button", "tab", "radio", "checkbox", "menuitem",
     "menuitemcheckbox", "menuitemradio", "radiobutton", "htmlbutton", "inputbutton"];
 const chromeMousePointerId = 1;
 const mousePointerType = "mouse";
 let eventLog = [];
 let currentTest = null;
 let preventDefaultOnPointerDown = false;

 // Computes the center of the line segment defined by knownPoint and (unknownX, knownY)
 // given the length of the segment.
 function center_of_line_segment_knownY(knownPoint, knownY, length){
   let unknownX = knownPoint.x + Math.sqrt(Math.pow(length, 2) - Math.pow(knownY-knownPoint.y, 2));
   return {x:(knownPoint.x + unknownX)/2,
           y:(knownPoint.y + knownY)/2};
 }

 test(()=>{
   assert_object_equals(center_of_line_segment_knownY({x:0, y:0}, 10, 10), {x:0, y:5}, "Vertical line starting at 0,0");
   assert_object_equals(center_of_line_segment_knownY({x:0, y:5}, 15, 10), {x:0, y:10}, "Vertical line starting at 0,5");
   assert_object_equals(center_of_line_segment_knownY({x:0, y:0}, 8, 10), {x:3, y:4}, "Diagonal line starting at 0,0");
   assert_object_equals(center_of_line_segment_knownY({x:0, y:1}, 9, 10), {x:3, y:5}, "Diagonal line starting at 0,1");
 }, "Center of line when starting point and end point's y coordinate is known");

 // Computes the center of the line segment defined by knownPoint and (knownX, unknownY)
 // given the length of the segment.
 function center_of_line_segment_knownX(knownPoint, knownX, length){
   let transposed_center = center_of_line_segment_knownY({x:knownPoint.y, y:knownPoint.x}, knownX, length);
   return {x:transposed_center.y, y:transposed_center.x};
 }

 test(()=>{
   assert_object_equals(center_of_line_segment_knownX({x:0, y:0}, 10, 10), {x:5, y:0}, "Horizontal line starting at 0,0");
   assert_object_equals(center_of_line_segment_knownX({x:5, y:0}, 15, 10), {x:10, y:0}, "Horizontal line starting at 0,5");
   assert_object_equals(center_of_line_segment_knownX({x:0, y:0}, 8, 10), {x:4, y:3}, "Diagonal line starting at 0,0");
   assert_object_equals(center_of_line_segment_knownX({x:1, y:0}, 9, 10), {x:5, y:3}, "Diagonal line starting at 0,1");
 }, "Center of line when starting point and end point's x coordinate is known");

 function compute_rect_center(domRect){
   if((domRect.x === domRect.left || domRect.x === domRect.right) && (domRect.y === domRect.top || domRect.y === domRect.bottom))
     return {x: (domRect.left + domRect.right) / 2,
             y: (domRect.top + domRect.bottom) / 2};
   let diagonal_length = Math.sqrt(Math.pow(domRect.height, 2) + Math.pow(domRect.width, 2));
   let origin_point = {x:domRect.x, y:domRect.y};
   if(domRect.x !== domRect.left && domRect.x !== domRect.right){
     // We must have domRect.y be either top or bottom.
     if(domRect.y === domRect.top)
       return center_of_line_segment_knownY(origin_point, domRect.bottom, diagonal_length);
     return center_of_line_segment_knownY(origin_point, domRect.top, diagonal_length);
   }
   if(domRect.x === domRect.left)
     return center_of_line_segment_knownX(origin_point, domRect.right, diagonal_length);
   return center_of_line_segment_knownX(origin_point, domRect.left, diagonal_length);
 }

 test(()=>{
   assert_object_equals(compute_rect_center({x:2,y:2,top:2,left:2,bottom:12, right:12, width:10, height:10}), {x:7, y:7}, "Not rotated rectangle");
   assert_object_equals(compute_rect_center({x:1,y:2,top:2,left:-1,bottom:-2, right:3, width:Math.sqrt(8), height:Math.sqrt(8)}), {x:1, y:0}, "Rotated rectangle, origin at (1,2)");
   assert_object_equals(compute_rect_center({x:-1,y:0,top:2,left:-1,bottom:-2, right:3, width:Math.sqrt(8), height:Math.sqrt(8)}), {x:1, y:0}, "Rotated rectangle, origin at (-1,0)");
   assert_object_equals(compute_rect_center({x:3,y:0,top:2,left:-1,bottom:-2, right:3, width:Math.sqrt(8), height:Math.sqrt(8)}), {x:1, y:0}, "Rotated rectangle, origin at (3,0)");
 }, "Center of rectangle given a DomRect");

 events.forEach((ev)=>container.addEventListener(ev, (e)=>{
   let message = e.target.id + "_" + ev;
   eventLog.push(message);

   if(e.type === "pointerdown" || e.type === "pointerup" || e.type === "click"){
     currentTest.step(()=>{
       assert_equals(e.pointerId, chromeMousePointerId, `Event's ${ev} pointer Id matches the pointer id of the mouse`);
       assert_equals(e.pointerType, mousePointerType, `Event's ${ev} pointer type is "mouse"`);
       assert_true(e.isPrimary, `Event's ${ev} pointer is the primary pointer`);
     });
   }
   currentTest.step(()=>{
     let elementRect = document.getElementById(e.target.id).getBoundingClientRect();
     let center = compute_rect_center(elementRect);
     assert_approx_equals(e.x, center.x, 1, `Event's ${ev} x position is the same with x position of the center of element with ${e.target.id} id`);
     assert_approx_equals(e.y, center.y, 1, `Event's ${ev} y position is the same with y position of the center of element with ${e.target.id} id`);
     assert_approx_equals(e.screenX, window.screenX + center.x, 1, `Event's ${ev} screenX position is the same correct for element with ${e.target.id} id`);
     assert_approx_equals(e.screenY, window.screenY + center.y, 1, `Event's ${ev} screenX position is the same correct for element with ${e.target.id} id`);
     assert_equals(e.movementX, 0, `Event's ${ev} movementX must be 0.`);
     assert_equals(e.movementY, 0, `Event's ${ev} movementY must be 0.`);
     assert_equals(e.button, 0, `Event's ${ev} primary button pressed.`);
     if(ev === "pointerdown" || ev === "mousedown" || ev === "click")
       assert_equals(e.buttons, 1, `Event's ${ev} primary button pressed.`);
     else
       assert_equals(e.buttons, 0, `For event ${ev} there are no buttons pressed.`);
     if(ev === "click")
       assert_equals(e.detail, 1, "Click event has a click count of 1");
     else
       assert_equals(e.detail, 0, `For event ${ev} click count should not be populated.`);
   });

   if(preventDefaultOnPointerDown && ev === "pointerdown")
     e.preventDefault();
 }));

 function test_without_pointerdown_prevented(test, zoom_factor){
   assert_true(!!window.testRunner, "window.testRunner unavailable");
   testRunner.setPageZoomFactor(zoom_factor);
   currentTest = test;
   eventLog = [];
   let eventList = ["pointerdown", "mousedown",
                   "pointerup", "mouseup", "click"];

   assert_true(focusElements(true), "window.accessibilityController unavailable");
   // All events coordinates are tested in the generic event handlers.
   assert_array_equals(eventLog, generateExpectedLog(eventList, htmlElementIds));
 }

 promise_test((test) => new Promise((resolve, reject)=>{
   test_without_pointerdown_prevented(test, 1) ;
   resolve();
 }), 'Tests that pointer events, mouse events and click are fired for accessibility press');

 promise_test((test) => new Promise((resolve, reject)=>{
   assert_true(!!window.testRunner, "window.testRunner unavailable");
   testRunner.setPageZoomFactor(5);
   currentTest = test;
   eventLog = [];
   let eventList = ["pointerdown", "mousedown",
                   "pointerup", "mouseup", "click"];
   assert_true(!!window.accessibilityController, "window.accessibilityController unavailable");
   let element = document.getElementById("tab");
   tab.focus();
   accessibilityController.focusedElement.press();
   // All events coordinates are tested in the generic event handlers.
   assert_array_equals(eventLog, generateExpectedLog(eventList, ["tab"]));
   resolve();
 }), "Tests that pointer events, mouse events and click's coordinates are populated correctly for accessibility press when zoomed in");


 function test_with_pointerdown_prevented(test, zoom_factor, makeButtonDirty){
   assert_true(!!window.testRunner, "window.testRunner unavailable");
   testRunner.setPageZoomFactor(zoom_factor);
   currentTest = test;
   eventLog = [];
   let eventList = ["pointerdown", "pointerup", "click"];
   preventDefaultOnPointerDown = true;

   assert_true(focusElements(makeButtonDirty), "window.accessibilityController unavailable");
   // All events coordinates are tested in the generic event handlers.
   assert_array_equals(eventLog, generateExpectedLog(eventList, htmlElementIds));
 }

 function generateExpectedLog(eventList, items){
   let expectedLog = [];
   items.forEach((item)=>
     eventList.forEach((ev)=>
       expectedLog.push(item + "_" + ev)));
   return expectedLog;
 }

 // Returns true if accessibilityController exists.
 function focusElements(makeButtonDirty){
   if (window.accessibilityController) {
     for (var k = 0; k < htmlElementIds.length; k++) {
        let element = document.getElementById(htmlElementIds[k]);
        // For button, change position so we test that the coordinates are calculated correctly.
        if(element.id === "button" && makeButtonDirty)
          element.style.left = '100px';
        element.focus();
        accessibilityController.focusedElement.press();
     }
   }
   return !!window.accessibilityController;
 }
 </script>
 </body>
	<!DOCTYPE HTML>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.5">
	<script src="../resources/testharness.js"></script>
	<script src="../resources/testharnessreport.js"></script>
	<style>
	#tab {
	transform: rotate(20deg);
	}
	#checkbox {
	transform: scaleY(1.5);
	}
	#group {
	transform: skewY(30deg);
	}
	</style>
	</head>
	<body>

	<div id="container">
	<div role="group" id="group" tabindex="0">group</div>
	<div role="button" id="button" tabindex="0">button</div>
	<div role="tab" id="tab" tabindex="0">tab button</div>
	<div role="radio" id="radio" tabindex="0">radio</div>
	<div role="checkbox" id="checkbox" tabindex="0">checkbox</div>
	<div role="menuitem" id="menuitem" tabindex="0">menu item</div>
	<div role="menuitemcheckbox" id="menuitemcheckbox" tabindex="0">menu item checkbox</div>
	<div role="menuitemradio" id="menuitemradio" tabindex="0">menu item radio</div>
	<input id="radiobutton" type="radio" name="radiobutton" value="Radio Button">
	<label for="Radio Button">Radio Button</label>
	<button id="htmlbutton" >Click Me</button>
	<input id="inputbutton" type="button" value="Click Me">
	</div>



	<script>

	const container = document.getElementById("container");
	const events = ["pointerdown", "pointerup", "mousedown", "mouseup", "click"];
	const htmlElementIds = ["group", "button", "tab", "radio", "checkbox", "menuitem",
	"menuitemcheckbox", "menuitemradio", "radiobutton", "htmlbutton", "inputbutton"];
	const chromeMousePointerId = 1;
	const mousePointerType = "mouse";
	let eventLog = [];
	let currentTest = null;
	let preventDefaultOnPointerDown = false;

	// Computes the center of the line segment defined by knownPoint and (unknownX, knownY)
	// given the length of the segment.
	function center_of_line_segment_knownY(knownPoint, knownY, length){
	let unknownX = knownPoint.x + Math.sqrt(Math.pow(length, 2) - Math.pow(knownY-knownPoint.y, 2));
	return {x:(knownPoint.x + unknownX)/2,
	y:(knownPoint.y + knownY)/2};
	}

	test(()=>{
	assert_object_equals(center_of_line_segment_knownY({x:0, y:0}, 10, 10), {x:0, y:5}, "Vertical line starting at 0,0");
	assert_object_equals(center_of_line_segment_knownY({x:0, y:5}, 15, 10), {x:0, y:10}, "Vertical line starting at 0,5");
	assert_object_equals(center_of_line_segment_knownY({x:0, y:0}, 8, 10), {x:3, y:4}, "Diagonal line starting at 0,0");
	assert_object_equals(center_of_line_segment_knownY({x:0, y:1}, 9, 10), {x:3, y:5}, "Diagonal line starting at 0,1");
	}, "Center of line when starting point and end point's y coordinate is known");

	// Computes the center of the line segment defined by knownPoint and (knownX, unknownY)
	// given the length of the segment.
	function center_of_line_segment_knownX(knownPoint, knownX, length){
	let transposed_center = center_of_line_segment_knownY({x:knownPoint.y, y:knownPoint.x}, knownX, length);
	return {x:transposed_center.y, y:transposed_center.x};
	}

	test(()=>{
	assert_object_equals(center_of_line_segment_knownX({x:0, y:0}, 10, 10), {x:5, y:0}, "Horizontal line starting at 0,0");
	assert_object_equals(center_of_line_segment_knownX({x:5, y:0}, 15, 10), {x:10, y:0}, "Horizontal line starting at 0,5");
	assert_object_equals(center_of_line_segment_knownX({x:0, y:0}, 8, 10), {x:4, y:3}, "Diagonal line starting at 0,0");
	assert_object_equals(center_of_line_segment_knownX({x:1, y:0}, 9, 10), {x:5, y:3}, "Diagonal line starting at 0,1");
	}, "Center of line when starting point and end point's x coordinate is known");

	function compute_rect_center(domRect){
	if((domRect.x === domRect.left \|\| domRect.x === domRect.right) && (domRect.y === domRect.top \|\| domRect.y === domRect.bottom))
	return {x: (domRect.left + domRect.right) / 2,
	y: (domRect.top + domRect.bottom) / 2};
	let diagonal_length = Math.sqrt(Math.pow(domRect.height, 2) + Math.pow(domRect.width, 2));
	let origin_point = {x:domRect.x, y:domRect.y};
	if(domRect.x !== domRect.left && domRect.x !== domRect.right){
	// We must have domRect.y be either top or bottom.
	if(domRect.y === domRect.top)
	return center_of_line_segment_knownY(origin_point, domRect.bottom, diagonal_length);
	return center_of_line_segment_knownY(origin_point, domRect.top, diagonal_length);
	}
	if(domRect.x === domRect.left)
	return center_of_line_segment_knownX(origin_point, domRect.right, diagonal_length);
	return center_of_line_segment_knownX(origin_point, domRect.left, diagonal_length);
	}

	test(()=>{
	assert_object_equals(compute_rect_center({x:2,y:2,top:2,left:2,bottom:12, right:12, width:10, height:10}), {x:7, y:7}, "Not rotated rectangle");
	assert_object_equals(compute_rect_center({x:1,y:2,top:2,left:-1,bottom:-2, right:3, width:Math.sqrt(8), height:Math.sqrt(8)}), {x:1, y:0}, "Rotated rectangle, origin at (1,2)");
	assert_object_equals(compute_rect_center({x:-1,y:0,top:2,left:-1,bottom:-2, right:3, width:Math.sqrt(8), height:Math.sqrt(8)}), {x:1, y:0}, "Rotated rectangle, origin at (-1,0)");
	assert_object_equals(compute_rect_center({x:3,y:0,top:2,left:-1,bottom:-2, right:3, width:Math.sqrt(8), height:Math.sqrt(8)}), {x:1, y:0}, "Rotated rectangle, origin at (3,0)");
	}, "Center of rectangle given a DomRect");

	events.forEach((ev)=>container.addEventListener(ev, (e)=>{
	let message = e.target.id + "_" + ev;
	eventLog.push(message);

	if(e.type === "pointerdown" \|\| e.type === "pointerup" \|\| e.type === "click"){
	currentTest.step(()=>{
	assert_equals(e.pointerId, chromeMousePointerId, `Event's ${ev} pointer Id matches the pointer id of the mouse`);
	assert_equals(e.pointerType, mousePointerType, `Event's ${ev} pointer type is "mouse"`);
	assert_true(e.isPrimary, `Event's ${ev} pointer is the primary pointer`);
	});
	}
	currentTest.step(()=>{
	let elementRect = document.getElementById(e.target.id).getBoundingClientRect();
	let center = compute_rect_center(elementRect);
	assert_approx_equals(e.x, center.x, 1, `Event's ${ev} x position is the same with x position of the center of element with ${e.target.id} id`);
	assert_approx_equals(e.y, center.y, 1, `Event's ${ev} y position is the same with y position of the center of element with ${e.target.id} id`);
	assert_approx_equals(e.screenX, window.screenX + center.x, 1, `Event's ${ev} screenX position is the same correct for element with ${e.target.id} id`);
	assert_approx_equals(e.screenY, window.screenY + center.y, 1, `Event's ${ev} screenX position is the same correct for element with ${e.target.id} id`);
	assert_equals(e.movementX, 0, `Event's ${ev} movementX must be 0.`);
	assert_equals(e.movementY, 0, `Event's ${ev} movementY must be 0.`);
	assert_equals(e.button, 0, `Event's ${ev} primary button pressed.`);
	if(ev === "pointerdown" \|\| ev === "mousedown" \|\| ev === "click")
	assert_equals(e.buttons, 1, `Event's ${ev} primary button pressed.`);
	else
	assert_equals(e.buttons, 0, `For event ${ev} there are no buttons pressed.`);
	if(ev === "click")
	assert_equals(e.detail, 1, "Click event has a click count of 1");
	else
	assert_equals(e.detail, 0, `For event ${ev} click count should not be populated.`);
	});

	if(preventDefaultOnPointerDown && ev === "pointerdown")
	e.preventDefault();
	}));

	function test_without_pointerdown_prevented(test, zoom_factor){
	assert_true(!!window.testRunner, "window.testRunner unavailable");
	testRunner.setPageZoomFactor(zoom_factor);
	currentTest = test;
	eventLog = [];
	let eventList = ["pointerdown", "mousedown",
	"pointerup", "mouseup", "click"];

	assert_true(focusElements(true), "window.accessibilityController unavailable");
	// All events coordinates are tested in the generic event handlers.
	assert_array_equals(eventLog, generateExpectedLog(eventList, htmlElementIds));
	}

	promise_test((test) => new Promise((resolve, reject)=>{
	test_without_pointerdown_prevented(test, 1) ;
	resolve();
	}), 'Tests that pointer events, mouse events and click are fired for accessibility press');

	promise_test((test) => new Promise((resolve, reject)=>{
	assert_true(!!window.testRunner, "window.testRunner unavailable");
	testRunner.setPageZoomFactor(5);
	currentTest = test;
	eventLog = [];
	let eventList = ["pointerdown", "mousedown",
	"pointerup", "mouseup", "click"];
	assert_true(!!window.accessibilityController, "window.accessibilityController unavailable");
	let element = document.getElementById("tab");
	tab.focus();
	accessibilityController.focusedElement.press();
	// All events coordinates are tested in the generic event handlers.
	assert_array_equals(eventLog, generateExpectedLog(eventList, ["tab"]));
	resolve();
	}), "Tests that pointer events, mouse events and click's coordinates are populated correctly for accessibility press when zoomed in");


	function test_with_pointerdown_prevented(test, zoom_factor, makeButtonDirty){
	assert_true(!!window.testRunner, "window.testRunner unavailable");
	testRunner.setPageZoomFactor(zoom_factor);
	currentTest = test;
	eventLog = [];
	let eventList = ["pointerdown", "pointerup", "click"];
	preventDefaultOnPointerDown = true;

	assert_true(focusElements(makeButtonDirty), "window.accessibilityController unavailable");
	// All events coordinates are tested in the generic event handlers.
	assert_array_equals(eventLog, generateExpectedLog(eventList, htmlElementIds));
	}

	function generateExpectedLog(eventList, items){
	let expectedLog = [];
	items.forEach((item)=>
	eventList.forEach((ev)=>
	expectedLog.push(item + "_" + ev)));
	return expectedLog;
	}

	// Returns true if accessibilityController exists.
	function focusElements(makeButtonDirty){
	if (window.accessibilityController) {
	for (var k = 0; k < htmlElementIds.length; k++) {
	let element = document.getElementById(htmlElementIds[k]);
	// For button, change position so we test that the coordinates are calculated correctly.
	if(element.id === "button" && makeButtonDirty)
	element.style.left = '100px';
	element.focus();
	accessibilityController.focusedElement.press();
	}
	}
	return !!window.accessibilityController;
	}
	</script>
	</body>