OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
5 <title>Focus-related events should fire in the correct order</title> | 5 <title>Focus-related events should fire in the correct order</title> |
6 <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"> | 6 <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"> |
7 <link rel="help" href="https://w3c.github.io/uievents/#events-focusevent-eve
nt-order"> | 7 <link rel="help" href="https://w3c.github.io/uievents/#events-focusevent-event
-order"> |
8 <meta name="flags" content="interact"> | 8 <meta name="flags" content="interact"> |
9 <script src="/resources/testharness.js"></script> | 9 <script src="/resources/testharness.js"></script> |
10 <script src="/resources/testharnessreport.js"></script> | 10 <script src="/resources/testharnessreport.js"></script> |
11 </head> | 11 <script src="/uievents/resources/eventrecorder.js"></script> |
12 <body> | 12 </head> |
13 <ol> | |
14 <li>Click into the first text input.</li> | |
15 <li>Click into the second text input.</li> | |
16 <li>Click the "Done" button.</li> | |
17 </ol> | |
18 | 13 |
19 <input type="text" id="a" value="First"> | 14 <body> |
20 <br> | 15 <ol> |
21 <input type="text" id="b" value="Second"> | 16 <li>Click into the first text input.</li> |
22 <br> | 17 <li>Click into the second text input.</li> |
23 <button type="button" id="done">Done</button> | 18 <li>Click the "Done" button.</li> |
| 19 </ol> |
| 20 <input type="text" id="a" value="First"> |
| 21 <br> |
| 22 <input type="text" id="b" value="Second"> |
| 23 <br> |
| 24 <button type="button" id="done">Done</button> |
| 25 </body> |
24 | 26 |
25 <script> | 27 <script> |
26 setup({explicit_timeout: true}); | 28 setup({explicit_timeout: true}); |
27 var done = false; | 29 function stopPropagation(e) { |
28 var events = []; | 30 if (event.type == "focusin" || event.type == "focusout") |
29 var targets = []; | 31 assert_true(event.bubbles); |
30 function record(e) { | 32 e.stopPropagation(); |
31 if (done) { | |
32 return; | |
33 } | |
34 events.push(e.type); | |
35 targets.push(e.target.id); | |
36 } | |
37 function finish() { | |
38 done = true; | |
39 } | 33 } |
40 var relevantEvents = [ | 34 var relevantEvents = [ |
41 'focus', | 35 "focus", |
42 'blur', | 36 "blur", |
43 'focusin', | 37 "focusin", |
44 'focusout' | 38 "focusout" |
45 ]; | 39 ]; |
46 window.onload = function () { | 40 window.onload = function () { |
47 var a = document.getElementById('a'); | 41 var a = document.getElementById("a"); |
48 var b = document.getElementById('b'); | 42 var b = document.getElementById("b"); |
49 var inputs = [a, b]; | 43 var inputs = [a, b]; |
| 44 EventRecorder.configure({ |
| 45 objectMap: { |
| 46 "a": a, |
| 47 "b": b, |
| 48 } |
| 49 }); |
50 | 50 |
51 b.addEventListener('blur', finish, false); | 51 EventRecorder.addEventListenersForNodes(relevantEvents, inputs, stopPropagatio
n); |
52 b.addEventListener('focusout', finish, false); | 52 var expected = [ |
53 | 53 {type: "focusin", target: "a"}, |
54 for (var i = 0; i < inputs.length; i++) { | 54 {type: "focus", target: "a"}, |
55 for (var k = 0; k < relevantEvents.length; k++) { | 55 {type: "focusout", target: "a"}, |
56 inputs[i].addEventListener(relevantEvents[k], record, false); | 56 {type: "focusin", target: "b"}, |
57 } | 57 {type: "blur", target: "a"}, |
58 } | 58 {type: "focus", target: "b"}, |
| 59 {type: "focusout", target: "b"}, |
| 60 {type: "blur", target: "b"} |
| 61 ]; |
59 | 62 |
60 async_test(function(t) { | 63 async_test(function(t) { |
61 document.getElementById('done').addEventListener('click', function () { | 64 document.getElementById("done").addEventListener("click", function () { |
62 finish(); | |
63 t.step(function () { | 65 t.step(function () { |
64 assert_array_equals( | 66 assert_true(EventRecorder.checkRecords(expected)); |
65 events, | |
66 ['focusin', 'focus', 'focusout', 'focusin', 'blur', 'focus'], | |
67 'Focus-related events should fire in this order: focusin, focus, focus
out, focusin, blur, focus' | |
68 ); | |
69 assert_array_equals( | |
70 targets, | |
71 [ 'a', 'a', 'a', 'b', 'a', 'b'], | |
72 'Focus-related events should fire at the correct targets' | |
73 ); | |
74 t.done(); | 67 t.done(); |
75 }); | 68 }); |
76 }, false); | 69 }, false); |
77 }, 'Focus-related events should fire in the correct order'); | 70 }, "Focus-related events should fire in the correct order"); |
| 71 EventRecorder.start(); |
78 }; | 72 }; |
79 </script> | 73 </script> |
80 </body> | |
81 </html> | 74 </html> |
OLD | NEW |