chromium/src/third_party/blink/web_tests/external/wpt/pointerevents/pointerevent_coalesced_events_attributes.html - manifest_repos/chromium_src - Git at Google

 <!doctype html>
 <html>
     <head>
         <title>Pointer Events coalesced events count and properties</title>
         <meta name="viewport" content="width=device-width">
         <link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
         <script src="/resources/testharness.js"></script>
         <script src="/resources/testharnessreport.js"></script>
         <script src="/resources/testdriver.js"></script>
         <script src="/resources/testdriver-actions.js"></script>
         <script src="/resources/testdriver-vendor.js"></script>
         <!-- Additional helper script for common checks across event types -->
         <script type="text/javascript" src="pointerevent_support.js"></script>
         <script>
             var eventList = All_Pointer_Events;
             PhaseEnum = {
               WaitingForCancel:   0,
               WaitingForOver:     1,
               WaitingForEnter:    2,
               WaitingForDown:     3,
               WaitingForMove:     4,
               WaitingForUp:       5,
               WaitingForOut:      6,
               WaitingForLeave:    7,
               Done:               8,
             };
             var phase = PhaseEnum.WaitingForCancel;

             function resetTestState() {
                 phase = PhaseEnum.WaitingForCancel;
             }
             function expect_no_coalesced_events(event, eventName) {
                 test(function () {
                     assert_equals(event.getCoalescedEvents().length, 0, eventName + ' should not have any coalesced events');
                 }, expectedPointerType + ' ' + eventName + ' should not have any coalesced events');
             }
             function getInViewPoint(element) {
                 var rectangles = element.getClientRects();
                 if (rectangles.length === 0) {
                   return false;
                 }

                 var rect = rectangles[0];
                 var left = Math.max(0, rect.left);
                 var right = Math.min(window.innerWidth, rect.right);
                 var top = Math.max(0, rect.top);
                 var bottom = Math.min(window.innerHeight, rect.bottom);

                 var x = parseInt(0.5 * (left + right));
                 var y = parseInt(0.5 * (top + bottom));

                 return [x, y];
             }
             function run() {
                 var test_pointerEvent = setup_pointerevent_test("coalesced events attributes in pointerevents", ['touch']);
                 var target0 = document.getElementById("target0");
                 var target1 = document.getElementById("target1");
                 var actions_promise;

                 on_event(target0, 'pointercancel', function (event) {
                     if (phase == PhaseEnum.WaitingForCancel) {
                         expect_no_coalesced_events(event, 'pointercancel');
                         phase++;
                     }
                 });
                 eventList.forEach(function(eventName) {
                     on_event(target1, eventName, function (event) {
                         switch (phase) {
                           case PhaseEnum.WaitingForOver:
                             if (eventName == 'pointerover') {
                               expect_no_coalesced_events(event, eventName);
                               phase++;
                             }
                             break;
                           case PhaseEnum.WaitingForEnter:
                             if (eventName == 'pointerenter') {
                               expect_no_coalesced_events(event, eventName);
                               phase++;
                             }
                             break;
                           case PhaseEnum.WaitingForDown:
                             if (eventName == 'pointerdown') {
                               expect_no_coalesced_events(event, eventName);
                               phase++;
                               step_timeout(function(){
                                 // This is just a way to block the main thread.
                                 var current = new Date().getTime();
                                 for (; new Date().getTime() - current < 500;);
                               }, 0);
                             }
                             break;
                           case PhaseEnum.WaitingForMove:
                             if (eventName == 'pointermove') {
                               var coalescedEvents = event.getCoalescedEvents();
                               test (function() {
                                 assert_greater_than(event.getCoalescedEvents().length, 1, 'pointermove should have at least 2 coalesced events.');
                               }, expectedPointerType + ' pointermove should have >2 coalesced events as main thread is busy.');
                               test (function() {
                                 for (var i=0; i<coalescedEvents.length; i++) {
                                   assert_equals(coalescedEvents[i].isTrusted, true, 'isTrusted flag should be true for coalesced events.');
                                   if (i > 0)
                                     assert_greater_than_equal(coalescedEvents[i].timeStamp, coalescedEvents[i-1].timeStamp, 'Time stamps of coalesced events must be ascending.');
                                 }
                               }, expectedPointerType + ' pointermove coalesced events should all be marked as trusted.');
                               test (function() {
                                 for (var i=1; i<coalescedEvents.length; i++)
                                   assert_greater_than_equal(coalescedEvents[i].timeStamp, coalescedEvents[i-1].timeStamp, 'Time stamps of coalesced events must be ascending.');
                               }, expectedPointerType + ' time stamps of coalesced events must be ascending.');
                               test (function() {
                                 for (var i=0; i<coalescedEvents.length; i++) {
                                   assert_equals(coalescedEvents[i].bubbles, false, 'Bubbles attribute should be false for coalesced events.');
                                   assert_equals(coalescedEvents[i].cancelable, false, 'Cancelable attribute should be false for coalesced events.');
                                 }
                               }, expectedPointerType + ' pointermove coalesced events should all bubbles and cancelable as false.');
                               phase++;
                             }
                             break;
                           case PhaseEnum.WaitingForUp:
                             if (eventName == 'pointerup') {
                               expect_no_coalesced_events(event, eventName);
                               phase++;
                             }
                             break;
                           case PhaseEnum.WaitingForOut:
                             if (eventName == 'pointerout') {
                               expect_no_coalesced_events(event, eventName);
                               phase++;
                             }
                             break;
                           case PhaseEnum.WaitingForLeave:
                             if (eventName == 'pointerleave') {
                               expect_no_coalesced_events(event, eventName);
                               phase++;
                               actions_promise.then( () => {
                                 test_pointerEvent.done();
                               });
                             }
                             break;
                         }
                     });
                 });

                 // Inject touch inputs.
                 var elementPoint1 = getInViewPoint(target0);
                 var x1 = elementPoint1[0];
                 var y1 = elementPoint1[1];
                 var elementPoint2 = getInViewPoint(target1);
                 var x2 = elementPoint2[0];
                 var y2 = elementPoint2[1];
                 actions_promise = new test_driver.Actions(0)
                    .addPointer("touchPointer1", "touch")
                    .pointerMove(x1, y1)
                    .pointerDown()
                    .pointerMove(x1 + 10, y1)
                    .pointerMove(x1 + 20, y1)
                    .pointerMove(x1 + 30, y1)
                    .addTick(20)
                    .pointerUp()
                    .pointerMove(x2, y2)
                    .pointerDown()
                    .pointerMove(x2 + 10, y2)
                    .pointerMove(x2 + 20, y2)
                    .pointerMove(x2 + 30, y2)
                    .addTick(20)
                    .pointerUp()
                    .send();
              }
         </script>
     </head>
     <body onload="run()">
         <h1>Pointer Events coalesced events count and properties</h1>
         <h2 id="pointerTypeDescription"></h2>
         <h4>
             Test Description: This test checks the coalesced events of all types of pointer events.
             <ol>
                  <li>Pointer down in the black square and drag inside the black square immediately</li>
                  <li>Release the pointer.</li>
                  <li>Pointer down in the purple square and drag inside the purple square immediately</li>
                  <li>Release the pointer and move out of the purple square</li>
             </ol>

             Test passes if the proper behavior of the events is observed.
         </h4>
         <div id="target0"></div>
         <div id="target1" class="touchActionNone"></div>
         <div id="complete-notice">
             <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
             <p>Refresh the page to run the tests again with a different pointer type.</p>
         </div>
     </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Pointer Events coalesced events count and properties</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="/resources/testdriver.js"></script>
	<script src="/resources/testdriver-actions.js"></script>
	<script src="/resources/testdriver-vendor.js"></script>
	<!-- Additional helper script for common checks across event types -->
	<script type="text/javascript" src="pointerevent_support.js"></script>
	<script>
	var eventList = All_Pointer_Events;
	PhaseEnum = {
	WaitingForCancel: 0,
	WaitingForOver: 1,
	WaitingForEnter: 2,
	WaitingForDown: 3,
	WaitingForMove: 4,
	WaitingForUp: 5,
	WaitingForOut: 6,
	WaitingForLeave: 7,
	Done: 8,
	};
	var phase = PhaseEnum.WaitingForCancel;

	function resetTestState() {
	phase = PhaseEnum.WaitingForCancel;
	}
	function expect_no_coalesced_events(event, eventName) {
	test(function () {
	assert_equals(event.getCoalescedEvents().length, 0, eventName + ' should not have any coalesced events');
	}, expectedPointerType + ' ' + eventName + ' should not have any coalesced events');
	}
	function getInViewPoint(element) {
	var rectangles = element.getClientRects();
	if (rectangles.length === 0) {
	return false;
	}

	var rect = rectangles[0];
	var left = Math.max(0, rect.left);
	var right = Math.min(window.innerWidth, rect.right);
	var top = Math.max(0, rect.top);
	var bottom = Math.min(window.innerHeight, rect.bottom);

	var x = parseInt(0.5 * (left + right));
	var y = parseInt(0.5 * (top + bottom));

	return [x, y];
	}
	function run() {
	var test_pointerEvent = setup_pointerevent_test("coalesced events attributes in pointerevents", ['touch']);
	var target0 = document.getElementById("target0");
	var target1 = document.getElementById("target1");
	var actions_promise;

	on_event(target0, 'pointercancel', function (event) {
	if (phase == PhaseEnum.WaitingForCancel) {
	expect_no_coalesced_events(event, 'pointercancel');
	phase++;
	}
	});
	eventList.forEach(function(eventName) {
	on_event(target1, eventName, function (event) {
	switch (phase) {
	case PhaseEnum.WaitingForOver:
	if (eventName == 'pointerover') {
	expect_no_coalesced_events(event, eventName);
	phase++;
	}
	break;
	case PhaseEnum.WaitingForEnter:
	if (eventName == 'pointerenter') {
	expect_no_coalesced_events(event, eventName);
	phase++;
	}
	break;
	case PhaseEnum.WaitingForDown:
	if (eventName == 'pointerdown') {
	expect_no_coalesced_events(event, eventName);
	phase++;
	step_timeout(function(){
	// This is just a way to block the main thread.
	var current = new Date().getTime();
	for (; new Date().getTime() - current < 500;);
	}, 0);
	}
	break;
	case PhaseEnum.WaitingForMove:
	if (eventName == 'pointermove') {
	var coalescedEvents = event.getCoalescedEvents();
	test (function() {
	assert_greater_than(event.getCoalescedEvents().length, 1, 'pointermove should have at least 2 coalesced events.');
	}, expectedPointerType + ' pointermove should have >2 coalesced events as main thread is busy.');
	test (function() {
	for (var i=0; i<coalescedEvents.length; i++) {
	assert_equals(coalescedEvents[i].isTrusted, true, 'isTrusted flag should be true for coalesced events.');
	if (i > 0)
	assert_greater_than_equal(coalescedEvents[i].timeStamp, coalescedEvents[i-1].timeStamp, 'Time stamps of coalesced events must be ascending.');
	}
	}, expectedPointerType + ' pointermove coalesced events should all be marked as trusted.');
	test (function() {
	for (var i=1; i<coalescedEvents.length; i++)
	assert_greater_than_equal(coalescedEvents[i].timeStamp, coalescedEvents[i-1].timeStamp, 'Time stamps of coalesced events must be ascending.');
	}, expectedPointerType + ' time stamps of coalesced events must be ascending.');
	test (function() {
	for (var i=0; i<coalescedEvents.length; i++) {
	assert_equals(coalescedEvents[i].bubbles, false, 'Bubbles attribute should be false for coalesced events.');
	assert_equals(coalescedEvents[i].cancelable, false, 'Cancelable attribute should be false for coalesced events.');
	}
	}, expectedPointerType + ' pointermove coalesced events should all bubbles and cancelable as false.');
	phase++;
	}
	break;
	case PhaseEnum.WaitingForUp:
	if (eventName == 'pointerup') {
	expect_no_coalesced_events(event, eventName);
	phase++;
	}
	break;
	case PhaseEnum.WaitingForOut:
	if (eventName == 'pointerout') {
	expect_no_coalesced_events(event, eventName);
	phase++;
	}
	break;
	case PhaseEnum.WaitingForLeave:
	if (eventName == 'pointerleave') {
	expect_no_coalesced_events(event, eventName);
	phase++;
	actions_promise.then( () => {
	test_pointerEvent.done();
	});
	}
	break;
	}
	});
	});

	// Inject touch inputs.
	var elementPoint1 = getInViewPoint(target0);
	var x1 = elementPoint1[0];
	var y1 = elementPoint1[1];
	var elementPoint2 = getInViewPoint(target1);
	var x2 = elementPoint2[0];
	var y2 = elementPoint2[1];
	actions_promise = new test_driver.Actions(0)
	.addPointer("touchPointer1", "touch")
	.pointerMove(x1, y1)
	.pointerDown()
	.pointerMove(x1 + 10, y1)
	.pointerMove(x1 + 20, y1)
	.pointerMove(x1 + 30, y1)
	.addTick(20)
	.pointerUp()
	.pointerMove(x2, y2)
	.pointerDown()
	.pointerMove(x2 + 10, y2)
	.pointerMove(x2 + 20, y2)
	.pointerMove(x2 + 30, y2)
	.addTick(20)
	.pointerUp()
	.send();
	}
	</script>
	</head>
	<body onload="run()">
	<h1>Pointer Events coalesced events count and properties</h1>
	<h2 id="pointerTypeDescription"></h2>
	<h4>
	Test Description: This test checks the coalesced events of all types of pointer events.
	<ol>
	<li>Pointer down in the black square and drag inside the black square immediately</li>
	<li>Release the pointer.</li>
	<li>Pointer down in the purple square and drag inside the purple square immediately</li>
	<li>Release the pointer and move out of the purple square</li>
	</ol>

	Test passes if the proper behavior of the events is observed.
	</h4>
	<div id="target0"></div>
	<div id="target1" class="touchActionNone"></div>
	<div id="complete-notice">
	<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
	<p>Refresh the page to run the tests again with a different pointer type.</p>
	</div>
	</body>
	</html>