third_party/blink/web_tests/external/wpt/pointerevents/pointerevent_attributes_hoverable_pointers-manual.html - chromium/src - Git at Google

 <!doctype html>
 <html>
     <head>
         <title>Pointer Events properties tests</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>
         <!-- Additional helper script for common checks across event types -->
         <script type="text/javascript" src="pointerevent_support.js"></script>
         <script>
             var detected_pointertypes = {};
             var detected_eventTypes = {};
             var eventList = ['pointerover', 'pointerenter', 'pointermove', 'pointerdown', 'pointerup', 'pointerout', 'pointerleave'];
             var expectedPointerId = NaN;

             function resetTestState() {
                 detected_eventTypes = {};
                 document.getElementById("square1").style.visibility = 'visible';
                 document.getElementById('innerFrame').contentDocument.getElementById("square2").style.visibility = 'hidden';
                 expectedPointerId = NaN;
             }
             function checkPointerEventAttributes(event, targetBoundingClientRect, testNamePrefix) {
                 if (detected_eventTypes[event.type])
                     return;
                 var expectedEventType =  eventList[Object.keys(detected_eventTypes).length];
                 detected_eventTypes[event.type] = true;
                 var pointerTestName = testNamePrefix + ' ' + expectedPointerType + ' ' + expectedEventType;

                 detected_pointertypes[event.pointerType] = true;

                 test(function() {
                     assert_equals(event.type, expectedEventType, "Event.type should be " + expectedEventType)
                 }, pointerTestName + "'s type should be " + expectedEventType);

                 // Test button and buttons
                 if (event.type == 'pointerdown') {
                     test(function() {
                         assert_true(event.button == 0, "Button attribute is 0")
                     }, pointerTestName + "'s button attribute is 0 when left mouse button is pressed.");
                     test(function() {
                         assert_true(event.buttons == 1, "Buttons attribute is 1")
                     }, pointerTestName + "'s buttons attribute is 1 when left mouse button is pressed.");
                 } else if (event.type == 'pointerup') {
                     test(function() {
                         assert_true(event.button == 0, "Button attribute is 0")
                     }, pointerTestName + "'s button attribute is 0 when left mouse button is just released.");
                     test(function() {
                         assert_true(event.buttons == 0, "Buttons attribute is 0")
                     }, pointerTestName + "'s buttons attribute is 0 when left mouse button is just released.");
                 } else {
                     test(function() {
                         assert_true(event.button == -1, "Button attribute is -1")
                     }, pointerTestName + "'s button is -1 when mouse buttons are in released state.");
                     test(function() {
                         assert_true(event.buttons == 0, "Buttons attribute is 0")
                     }, pointerTestName + "'s buttons is 0 when mouse buttons are in released state.");
                 }

                 // Test clientX and clientY
                 if (event.type != 'pointerout' && event.type != 'pointerleave' ) {
                     test(function () {
                         assert_greater_than_equal(event.clientX, targetBoundingClientRect.left, "clientX should be greater or equal than left of the box");
                         assert_greater_than_equal(event.clientY, targetBoundingClientRect.top, "clientY should be greater or equal than top of the box");
                         assert_less_than_equal(event.clientX, targetBoundingClientRect.right, "clientX should be less or equal than right of the box");
                         assert_less_than_equal(event.clientY, targetBoundingClientRect.bottom, "clientY should be less or equal than bottom of the box");
                     }, pointerTestName + "'s ClientX and ClientY attributes are correct.");
                 } else {
                     test(function () {
                         assert_true(event.clientX < targetBoundingClientRect.left || event.clientX >= targetBoundingClientRect.right || event.clientY < targetBoundingClientRect.top || event.clientY >= targetBoundingClientRect.bottom, "ClientX/Y should be out of the boundaries of the box");
                     }, pointerTestName + "'s ClientX and ClientY attributes are correct.");
                 }

                 check_PointerEvent(event, testNamePrefix);

                 // Test isPrimary value
                 test(function () {
                     assert_equals(event.isPrimary, true, "isPrimary should be true");
                 }, pointerTestName + ".isPrimary attribute is correct.");

                 // Test pointerId value
                 if (isNaN(expectedPointerId)) {
                     expectedPointerId = event.pointerId;
                 } else {
                     test(function () {
                         assert_equals(event.pointerId, expectedPointerId, "pointerId should remain the same for the same active pointer");
                     }, pointerTestName + ".pointerId should be the same as previous pointer events for this active pointer.");
                 }
             }

             function run() {
                 var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", HOVERABLE_POINTERS);
                 var square1 = document.getElementById("square1");
                 var rectSquare1 = square1.getBoundingClientRect();
                 var innerFrame = document.getElementById('innerFrame');
                 var square2 = innerFrame.contentDocument.getElementById('square2');
                 var rectSquare2 = square2.getBoundingClientRect();

                 eventList.forEach(function(eventName) {
                     on_event(square1, eventName, function (event) {
                         if (square1.style.visibility == 'hidden')
                             return;
                         checkPointerEventAttributes(event, rectSquare1, "");
                         if (Object.keys(detected_eventTypes).length == eventList.length) {
                             square1.style.visibility = 'hidden';
                             detected_eventTypes = {};
                             square2.style.visibility = 'visible';
                             expectedPointerId = NaN;
                         }
                     });
                     on_event(square2, eventName, function (event) {
                         checkPointerEventAttributes(event, rectSquare2, "Inner frame ");
                         if (Object.keys(detected_eventTypes).length == eventList.length) {
                             square2.style.visibility = 'hidden';
                             test_pointerEvent.done();
                         }
                     });
                 });
             }
         </script>
     </head>
     <body onload="run()">
         <h1>Pointer Events hoverable pointer attributes test</h1>
         <h2 id="pointerTypeDescription"></h2>
         <h4>
             Test Description: This test checks the properties of hoverable pointer events. If you are using hoverable pen don't leave the range of digitizer while doing the instructions.
             <ol>
                  <li>Move your pointer over the black square and click on it.</li>
                  <li>Then move it off the black square so that it disappears.</li>
                  <li>When red square appears move your pointer over the red square and click on it.</li>
                  <li>Then move it off the red square.</li>
             </ol>

             Test passes if the proper behavior of the events is observed.
         </h4>
         <div id="square1" class="square"></div>
         <iframe id="innerFrame" src="resources/pointerevent_attributes_hoverable_pointers-iframe.html"></iframe>
         <div class="spacer"></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>
         <div id="log"></div>
     </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Pointer Events properties tests</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>
	<!-- Additional helper script for common checks across event types -->
	<script type="text/javascript" src="pointerevent_support.js"></script>
	<script>
	var detected_pointertypes = {};
	var detected_eventTypes = {};
	var eventList = ['pointerover', 'pointerenter', 'pointermove', 'pointerdown', 'pointerup', 'pointerout', 'pointerleave'];
	var expectedPointerId = NaN;

	function resetTestState() {
	detected_eventTypes = {};
	document.getElementById("square1").style.visibility = 'visible';
	document.getElementById('innerFrame').contentDocument.getElementById("square2").style.visibility = 'hidden';
	expectedPointerId = NaN;
	}
	function checkPointerEventAttributes(event, targetBoundingClientRect, testNamePrefix) {
	if (detected_eventTypes[event.type])
	return;
	var expectedEventType = eventList[Object.keys(detected_eventTypes).length];
	detected_eventTypes[event.type] = true;
	var pointerTestName = testNamePrefix + ' ' + expectedPointerType + ' ' + expectedEventType;

	detected_pointertypes[event.pointerType] = true;

	test(function() {
	assert_equals(event.type, expectedEventType, "Event.type should be " + expectedEventType)
	}, pointerTestName + "'s type should be " + expectedEventType);

	// Test button and buttons
	if (event.type == 'pointerdown') {
	test(function() {
	assert_true(event.button == 0, "Button attribute is 0")
	}, pointerTestName + "'s button attribute is 0 when left mouse button is pressed.");
	test(function() {
	assert_true(event.buttons == 1, "Buttons attribute is 1")
	}, pointerTestName + "'s buttons attribute is 1 when left mouse button is pressed.");
	} else if (event.type == 'pointerup') {
	test(function() {
	assert_true(event.button == 0, "Button attribute is 0")
	}, pointerTestName + "'s button attribute is 0 when left mouse button is just released.");
	test(function() {
	assert_true(event.buttons == 0, "Buttons attribute is 0")
	}, pointerTestName + "'s buttons attribute is 0 when left mouse button is just released.");
	} else {
	test(function() {
	assert_true(event.button == -1, "Button attribute is -1")
	}, pointerTestName + "'s button is -1 when mouse buttons are in released state.");
	test(function() {
	assert_true(event.buttons == 0, "Buttons attribute is 0")
	}, pointerTestName + "'s buttons is 0 when mouse buttons are in released state.");
	}

	// Test clientX and clientY
	if (event.type != 'pointerout' && event.type != 'pointerleave' ) {
	test(function () {
	assert_greater_than_equal(event.clientX, targetBoundingClientRect.left, "clientX should be greater or equal than left of the box");
	assert_greater_than_equal(event.clientY, targetBoundingClientRect.top, "clientY should be greater or equal than top of the box");
	assert_less_than_equal(event.clientX, targetBoundingClientRect.right, "clientX should be less or equal than right of the box");
	assert_less_than_equal(event.clientY, targetBoundingClientRect.bottom, "clientY should be less or equal than bottom of the box");
	}, pointerTestName + "'s ClientX and ClientY attributes are correct.");
	} else {
	test(function () {
	assert_true(event.clientX < targetBoundingClientRect.left \|\| event.clientX >= targetBoundingClientRect.right \|\| event.clientY < targetBoundingClientRect.top \|\| event.clientY >= targetBoundingClientRect.bottom, "ClientX/Y should be out of the boundaries of the box");
	}, pointerTestName + "'s ClientX and ClientY attributes are correct.");
	}

	check_PointerEvent(event, testNamePrefix);

	// Test isPrimary value
	test(function () {
	assert_equals(event.isPrimary, true, "isPrimary should be true");
	}, pointerTestName + ".isPrimary attribute is correct.");

	// Test pointerId value
	if (isNaN(expectedPointerId)) {
	expectedPointerId = event.pointerId;
	} else {
	test(function () {
	assert_equals(event.pointerId, expectedPointerId, "pointerId should remain the same for the same active pointer");
	}, pointerTestName + ".pointerId should be the same as previous pointer events for this active pointer.");
	}
	}

	function run() {
	var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", HOVERABLE_POINTERS);
	var square1 = document.getElementById("square1");
	var rectSquare1 = square1.getBoundingClientRect();
	var innerFrame = document.getElementById('innerFrame');
	var square2 = innerFrame.contentDocument.getElementById('square2');
	var rectSquare2 = square2.getBoundingClientRect();

	eventList.forEach(function(eventName) {
	on_event(square1, eventName, function (event) {
	if (square1.style.visibility == 'hidden')
	return;
	checkPointerEventAttributes(event, rectSquare1, "");
	if (Object.keys(detected_eventTypes).length == eventList.length) {
	square1.style.visibility = 'hidden';
	detected_eventTypes = {};
	square2.style.visibility = 'visible';
	expectedPointerId = NaN;
	}
	});
	on_event(square2, eventName, function (event) {
	checkPointerEventAttributes(event, rectSquare2, "Inner frame ");
	if (Object.keys(detected_eventTypes).length == eventList.length) {
	square2.style.visibility = 'hidden';
	test_pointerEvent.done();
	}
	});
	});
	}
	</script>
	</head>
	<body onload="run()">
	<h1>Pointer Events hoverable pointer attributes test</h1>
	<h2 id="pointerTypeDescription"></h2>
	<h4>
	Test Description: This test checks the properties of hoverable pointer events. If you are using hoverable pen don't leave the range of digitizer while doing the instructions.
	<ol>
	<li>Move your pointer over the black square and click on it.</li>
	<li>Then move it off the black square so that it disappears.</li>
	<li>When red square appears move your pointer over the red square and click on it.</li>
	<li>Then move it off the red square.</li>
	</ol>

	Test passes if the proper behavior of the events is observed.
	</h4>
	<div id="square1" class="square"></div>
	<iframe id="innerFrame" src="resources/pointerevent_attributes_hoverable_pointers-iframe.html"></iframe>
	<div class="spacer"></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>
	<div id="log"></div>
	</body>
	</html>