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> 16function promiseTicks() { 17 return new Promise(resolve => { 18 requestAnimationFrame(() => { 19 requestAnimationFrame(resolve); 20 }); 21 }); 22} 23 24async 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 49promise_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 64promise_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> 81