tests/pointerevents-v1/submissions/jQuery/pointerdown.html
author jrossi2
Fri, 18 Apr 2014 16:26:12 -0700
changeset 138 c979a3e19faa
parent 78 dc30ba5f1911
permissions -rw-r--r--
ACTION-70: Update spec to reflect 11-feb-2014 discussion of action-68
https://www.w3.org/2012/pointerevents/track/actions/70/
     1 <!doctype html>
     2 <html>
     3 <!--
     4 	Test cases for Pointer Events v1 spec
     5 
     6 	This document references Test Assertions (abbrev TA below) written by Cathy Chan
     7 	http://www.w3.org/wiki/PointerEvents/TestAssertions
     8 -->
     9 <head>
    10 	<title>Pointer Events pointerdown Tests</title>
    11 	<meta name="viewport" content="width=device-width">
    12 	<script src="http://w3c-test.org/resources/testharness.js"></script>
    13 	<script>
    14 	setup({ explicit_done: true });
    15 
    16 	var detected_pointertypes = {};
    17 	add_completion_callback(showPointerTypes);
    18 
    19 	// Check for conformance to PointerEvent interface
    20 	// TA: 1.1, 1.2, 1.6, 1.7, 1.8, 1.9, 1.10, 1.11, 1.12, 1.13
    21 	function check_PointerEvent(event) {
    22 		test(function() {
    23 			assert_true(event instanceof PointerEvent,
    24 				"event is a PointerEvent event");
    25 		}, event.type + " event is a PointerEvent event");
    26 
    27 		// Check attributes for conformance to WebIDL:
    28 		// * attribute exists
    29 		// * has proper type
    30 		// * if the attribute is "readonly", it cannot be changed
    31 		// TA: 1.1, 1.2
    32 		[
    33 			["readonly", "long", "pointerId"],
    34 			["readonly", "long", "width"],
    35 			["readonly", "long", "height"],
    36 			["readonly", "float", "pressure"],
    37 			["readonly", "long", "tiltX"],
    38 			["readonly", "long", "tiltY"],
    39 			["readonly", "DOMString", "pointerType"],
    40 			["readonly", "boolean", "isPrimary"]
    41 		].forEach(function(attr) {
    42 			var readonly = attr[0];
    43 			var type = attr[1];
    44 			var name = attr[2];
    45 
    46 			// existence check
    47 			test(function() {
    48 				assert_true(name in event,
    49 					name + " attribute in " + event.type + " event");
    50 			}, event.type + "." + name + " attribute exists");
    51 
    52 			// readonly check
    53 			if (readonly === "readonly") {
    54 				test(function() {
    55 					assert_readonly(event.type, name,
    56 						event.type + "." + name + " cannot be changed");
    57 				}, event.type + "." + name + " is readonly");
    58 			}
    59 
    60 			// type check
    61 			if ( type === "float" || type === "long" ) {
    62 				test(function() {
    63 					assert_equals(typeof event[name], "number",
    64 						name + " attribute of type " + type);
    65 				}, event.type + "." + name + " attribute is of type number (" + type + ")");
    66 			} else {
    67 				test(function() {
    68 					assert_equals(typeof event[name], type,
    69 						name + " attribute of type " + type);
    70 				}, event.type + "." + name + " attribute is of type " + type);
    71 			}
    72 		});
    73 
    74 		// Check the pressure value
    75 		// TA: 1.6, 1.7, 1.8
    76 		test(function() {
    77 			// TA: 1.6
    78 			assert_greater_than_equal(event.pressure, 0,
    79 				"pressure is greater than or equal to 0");
    80 			assert_less_than_equal(event.pressure, 1,
    81 				"pressure is less than or equal to 1");
    82 
    83 			// TA: 1.7, 1.8
    84 			if ( event.pointerType === "mouse" ) {
    85 				if ( event.buttons === 0 ) {
    86 					assert_equals( event.pressure, 0,
    87 						"pressure is 0 for mouse with no buttons pressed");
    88 				} else {
    89 					assert_equals( event.pressure, 0.5,
    90 						"pressure is 0.5 for mouse with a button pressed");
    91 				}
    92 			}
    93 		}, event.type + ".pressure value is valid" );
    94 
    95 		// Check mouse-specific properties
    96 		if ( event.pointerType === "mouse" ) {
    97 			// TA: 1.9, 1.10, 1.11, 1.13
    98 			test(function() {
    99 				assert_equals(event.tiltX, 0,
   100 					event.type + ".tiltX is 0 for mouse");
   101 				assert_equals(event.tiltY, 0,
   102 					event.type + ".tiltY is 0 for mouse");
   103 				assert_equals(event.pointerId, 1,
   104 					event.type + ".pointerId is 1 for mouse");
   105 				assert_true(event.isPrimary,
   106 					event.type + ".isPrimary is true for mouse");
   107 			}, event.type + " properties for pointerType=mouse");
   108 		// Check properties for pointers other than mouse
   109 		} else {
   110 			// TA: 1.12
   111 			test(function() {
   112 				assert_true(event.pointerId !== 1,
   113 					event.type + ".pointerId is not 1 for " + event.pointerType);
   114 			}, event.type + " properties for pointerType=" + event.pointerType);
   115 		}
   116 	}
   117 
   118 	function run() {
   119 		var target0 = document.getElementById("target0");
   120 		var test_pointerdown = async_test("pointerdown event received");
   121 		var pointerover_event;
   122 
   123 		on_event(target0, "pointerover", function(event) {
   124 			pointerover_event = event;
   125 			check_PointerEvent(event);
   126 
   127 			detected_pointertypes[ event.pointerType ] = true;
   128 		});
   129 
   130 		// TA: 2.1, 2.2, 2.3
   131 		on_event(target0, "pointerdown", function(event) {
   132 			check_PointerEvent(event);
   133 
   134 			// TA: 2.4
   135 			test_pointerdown.step(function() {
   136 				assert_equals(event.pointerType, pointerover_event.pointerType,
   137 					"pointerType is same for pointerover and pointerdown");
   138 				assert_equals(event.isPrimary, pointerover_event.isPrimary,
   139 					"isPrimary is same for pointerover and pointerdown");
   140 			});
   141 
   142 			detected_pointertypes[ event.pointerType ] = true;
   143 
   144 			test_pointerdown.done();
   145 		});
   146 	}
   147 
   148 	function showPointerTypes() {
   149 		var complete_notice = document.getElementById("complete-notice");
   150 		var pointertype_log = document.getElementById("pointertype-log");
   151 		var pointertypes = Object.keys(detected_pointertypes);
   152 		pointertype_log.innerHTML = pointertypes.length ?
   153 			pointertypes.join(",") : "(none)";
   154 		complete_notice.style.display = "block";
   155 	}
   156 
   157 	</script>
   158 	<style>
   159 		div {
   160 			margin: 0em;
   161 			padding: 2em;
   162 		}
   163 		#target0 {
   164 			background: yellow;
   165 			border: 1px solid orange;
   166 		}
   167 		#complete-notice {
   168 			background: #afa;
   169 			border: 1px solid #0a0;
   170 			display: none;
   171 		}
   172 		#pointertype-log {
   173 			font-weight: bold;
   174 		}
   175 	</style>
   176 </head>
   177 <body onload="run()">
   178 	<h1>Pointer Events pointerdown Tests</h1>
   179 	<div id="target0">
   180 		Start with your pointing device outside of this box, then click here.
   181 	</div>
   182 	<div id="complete-notice">
   183 		<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
   184 		<p>Would you like to <a href="#">run the tests again</a> with a different pointer type?</p>
   185 	</div>
   186 	<div id="log"></div>
   187 </body>
   188 </html>