OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <title>Lostpointercapture triggers first and asynchronously</title> | 4 <title>Lostpointercapture triggers first and asynchronously</title> |
5 <meta name="assert" content="TA11.1: After pointer capture is released f
or a pointer, and prior to any subsequent events for the pointer, the lostpointe
rcapture event must be dispatched to the element from which pointer capture was
removed; TA11.2: lostpointercapture must be dispatched asynchronously."> | 5 <meta name="assert" content="TA5.2.10: A user agent must fire a pointer
event named lostpointercapture after pointer capture is released for a pointer.
This event must be fired prior to any subsequent events for the pointer after ca
pture was released. This event is fired at the element from which pointer captur
e was removed;"> |
6 <meta name="viewport" content="width=device-width"> | 6 <meta name="viewport" content="width=device-width"> |
7 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> | 7 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> |
8 <script src="/resources/testharness.js"></script> | 8 <script src="/resources/testharness.js"></script> |
9 <script src="/resources/testharnessreport.js"></script> | 9 <script src="/resources/testharnessreport.js"></script> |
10 <script src="pointerevent_support.js"></script> | 10 <script src="pointerevent_support.js"></script> |
11 </head> | 11 </head> |
12 <body onload="run()"> | 12 <body onload="run()"> |
13 <h1>Pointer Events capture test - lostpointercapture order</h1> | 13 <h1>Pointer Events capture test - lostpointercapture order</h1> |
14 <h4> | 14 <h4> |
15 Test Description: | 15 Test Description: |
16 This test checks if lostpointercapture is handled asynchronously and
prior to all subsequent events. | 16 This test checks if lostpointercapture is handled asynchronously and
prior to all subsequent events. |
17 Complete the following actions: | 17 Complete the following actions: |
18 <ol> | 18 <ol> |
19 <li>Press and hold left mouse button over "Set Capture" button.
"gotpointercapture" should be logged inside of the black rectangle | 19 <li>Press and hold left mouse button over "Set Capture" button.
"gotpointercapture" should be logged inside of the black rectangle |
20 <li>"lostpointercapture" should be logged inside of the black re
ctangle after a short delay | 20 <li>"lostpointercapture" should be logged inside of the black re
ctangle after pointerup |
21 </ol> | 21 </ol> |
22 </h4> | 22 </h4> |
23 Test passes if lostpointercapture is dispatched after releasing the mous
e button and before any additional pointer events. | 23 Test passes if lostpointercapture is dispatched after releasing the mous
e button and before any additional pointer events. |
24 <div id="target0" style="background:black; color:white"></div> | 24 <div id="target0" style="background:black; color:white"></div> |
25 <br> | 25 <br> |
26 <input type="button" id="btnCapture" value="Set Capture"> | 26 <input type="button" id="btnCapture" value="Set Capture"> |
27 <script type='text/javascript'> | 27 <script type='text/javascript'> |
28 var detected_pointertypes = {}; | 28 var detected_pointertypes = {}; |
29 var detected_pointerEvents = new Array(); | 29 var detected_pointerEvents = new Array(); |
30 var pointerdown_event = null; | 30 var pointerdown_event = null; |
(...skipping 16 matching lines...) Expand all Loading... |
47 on_event(captureButton, 'pointerdown', function(event) { | 47 on_event(captureButton, 'pointerdown', function(event) { |
48 detected_pointertypes[event.pointerType] = true; | 48 detected_pointertypes[event.pointerType] = true; |
49 pointerdown_event = event; | 49 pointerdown_event = event; |
50 if(isPointerCapture == false) { | 50 if(isPointerCapture == false) { |
51 isPointerCapture = true; | 51 isPointerCapture = true; |
52 captureButton.value = 'Release Capture'; | 52 captureButton.value = 'Release Capture'; |
53 sPointerCapture(event); | 53 sPointerCapture(event); |
54 } | 54 } |
55 }); | 55 }); |
56 | 56 |
| 57 // TA5.1.3.1: Process Pending Pointer Capture |
| 58 // Whenever a user agent is to fire a Pointer Event that is not
gotpointercapture or lostpointercapture, |
| 59 // it must first run the steps of processing pending pointer cap
ture |
| 60 // |
| 61 // TA5.2.12: The lostpointercapture event |
57 // After pointer capture is released for a pointer, and prior to
any subsequent events for the pointer, | 62 // After pointer capture is released for a pointer, and prior to
any subsequent events for the pointer, |
58 // the lostpointercapture event must be dispatched to the elemen
t from which pointer capture was removed. | 63 // the lostpointercapture event must be dispatched to the elemen
t from which pointer capture was removed. |
59 // TA: 11.1 | |
60 // listen to all events | 64 // listen to all events |
61 for (var i = 0; i < All_Pointer_Events.length; i++) { | 65 for (var i = 0; i < All_Pointer_Events.length; i++) { |
62 on_event(target0, All_Pointer_Events[i], function (event) { | 66 on_event(target0, All_Pointer_Events[i], function (event) { |
63 // if the event was gotpointercapture, just log it and r
eturn | 67 // if the event was gotpointercapture, just log it and r
eturn |
64 if (event.type == "gotpointercapture") { | 68 if (event.type == "gotpointercapture") { |
65 testStarted = true; | 69 testStarted = true; |
66 rPointerCapture(event); | 70 rPointerCapture(event); |
67 isAsync = true; | 71 isAsync = true; |
68 log("gotpointercapture", target0); | 72 log("gotpointercapture", target0); |
69 return; | 73 return; |
70 } | 74 } |
71 else if (event.type == "lostpointercapture") { | 75 else if (event.type == "lostpointercapture") { |
72 log("lostpointercapture", target0); | 76 log("lostpointercapture", target0); |
73 captureButton.value = 'Set Capture'; | 77 captureButton.value = 'Set Capture'; |
74 isPointerCapture = false; | 78 isPointerCapture = false; |
75 | 79 |
76 // TA: 11.2 | 80 // TA: 11.2 |
77 test_pointerEvent.step(function () { | 81 test_pointerEvent.step(function () { |
78 assert_true(isAsync, "lostpointercapture must be
fired asynchronously"); | 82 assert_true(isAsync, "lostpointercapture must be
fired asynchronously"); |
79 }); | 83 }); |
80 | 84 |
81 // if any events have been received with same pointe
rId before lostpointercapture, then fail | 85 // if any events except pointerup have been received
with same pointerId before lostpointercapture, then fail |
82 var eventsRcvd_str = ""; | 86 var eventsRcvd_str = ""; |
83 if (eventRcvd) { | 87 if (eventRcvd) { |
84 eventsRcvd_str = "Events received before lostpoi
ntercapture: "; | 88 eventsRcvd_str = "Events received before lostpoi
ntercapture: "; |
85 for (var i = 0; i < detected_pointerEvents.lengt
h; i++) { | 89 for (var i = 0; i < detected_pointerEvents.lengt
h; i++) { |
86 eventsRcvd_str += detected_pointerEvents[i]
+ ", "; | 90 eventsRcvd_str += detected_pointerEvents[i]
+ ", "; |
87 } | 91 } |
88 } | 92 } |
89 test_pointerEvent.step(function () { | 93 test_pointerEvent.step(function () { |
90 assert_false(eventRcvd, "no other events should
be received before lostpointercapture." + eventsRcvd_str); | 94 assert_false(eventRcvd, "no other events should
be received before lostpointercapture." + eventsRcvd_str); |
91 assert_equals(event.pointerId, pointerdown_event
.pointerId, "pointerID is same for pointerdown and lostpointercapture"); | 95 assert_equals(event.pointerId, pointerdown_event
.pointerId, "pointerID is same for pointerdown and lostpointercapture"); |
92 }); | 96 }); |
93 test_pointerEvent.done(); // complete test | 97 test_pointerEvent.done(); // complete test |
94 } | 98 } |
95 else { | 99 else { |
96 if (testStarted && pointerdown_event != null && poin
terdown_event.pointerId === event.pointerId) { | 100 if (testStarted && pointerdown_event != null && poin
terdown_event.pointerId === event.pointerId && event.type != "pointerup") { |
97 detected_pointerEvents.push(event.type); | 101 detected_pointerEvents.push(event.type); |
98 eventRcvd = true; | 102 eventRcvd = true; |
99 } | 103 } |
100 } | 104 } |
101 }); | 105 }); |
102 } | 106 } |
103 } | 107 } |
104 </script> | 108 </script> |
105 <h1>Pointer Events Capture Test</h1> | 109 <h1>Pointer Events Capture Test</h1> |
106 <div id="complete-notice"> | 110 <div id="complete-notice"> |
107 <p>The following pointer types were detected: <span id="pointertype-
log"></span>.</p> | 111 <p>The following pointer types were detected: <span id="pointertype-
log"></span>.</p> |
108 </div> | 112 </div> |
109 <div id="log"></div> | 113 <div id="log"></div> |
110 </body> | 114 </body> |
111 </html> | 115 </html> |
OLD | NEW |