no-focus-events-at-clicking-editable-content-in-link.html (2300B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta chareset="utf-8"> 5 <title>Clicking editable content in link shouldn't cause redundant focus related events</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 </head> 12 <body> 13 <a href="#"><span contenteditable>Hello</span></a> 14 <a href="#" contenteditable><span>Hello</span></a> 15 <script> 16 function promiseTicks() { 17 return new Promise(resolve => { 18 requestAnimationFrame(() => { 19 requestAnimationFrame(resolve); 20 }); 21 }); 22 } 23 24 async function clickElementAndCollectFocusEvents(x, y, options) { 25 await promiseTicks(); 26 let events = []; 27 for (const eventType of ["focus", "blur", "focusin", "focusout"]) { 28 document.addEventListener(eventType, event => { 29 events.push(`type: ${event.type}, target: ${event.target.nodeName}`); 30 }, {capture: true}); 31 } 32 33 const waitForClickEvent = new Promise(resolve => { 34 addEventListener("click", resolve, {capture: true, once: true}); 35 }); 36 37 await new test_driver 38 .Actions() 39 .pointerMove(x, y, options) 40 .pointerDown() 41 .pointerUp() 42 .send(); 43 44 await waitForClickEvent; 45 await promiseTicks(); 46 return events; 47 } 48 49 promise_test(async t => { 50 document.activeElement?.blur(); 51 const editingHost = document.querySelector("span[contenteditable]"); 52 editingHost.blur(); 53 const focusEvents = 54 await clickElementAndCollectFocusEvents(5, 5, {origin: editingHost}); 55 assert_array_equals( 56 focusEvents, 57 [ 58 "type: focus, target: SPAN", 59 "type: focusin, target: SPAN", 60 ], 61 "Click event shouldn't cause redundant focus events"); 62 }, "Click editable element in link"); 63 64 promise_test(async t => { 65 document.activeElement?.blur(); 66 const editingHost = document.querySelector("a[contenteditable]"); 67 editingHost.blur(); 68 const focusEvents = 69 await clickElementAndCollectFocusEvents(5, 5, {origin: editingHost}); 70 assert_array_equals( 71 focusEvents, 72 [ 73 "type: focus, target: A", 74 "type: focusin, target: A", 75 ], 76 "Click event shouldn't cause redundant focus events"); 77 }, "Click editable link"); 78 </script> 79 </body> 80 </html>