| 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 |
|---|
Chromium Code Reviews
Issue 2434253002:
Import wpt@7e8373f4bd144e66c88535983aa735b28c934cfe (Closed)
