modifying-selection-with-primary-mouse-button.tentative.html (8432B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Testing default action of `mousedown` of primary button and `mouseup` of primary button</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-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <style> 12 span { 13 white-space: nowrap; 14 } 15 </style> 16 </head> 17 <body> 18 <div contenteditable></div> 19 <script> 20 "use strict"; 21 22 var editor = document.querySelector("div[contenteditable]"); 23 var span1, span2, link; 24 var selection = getSelection(); 25 26 function preventDefault(event) { 27 event.preventDefault(); 28 } 29 editor.addEventListener("paste", preventDefault, {capture: true}); 30 31 function resetEditor() { 32 editor.innerHTML = 33 '<span id="span1">first span.</span><br><span id="span2">second span.</span><br><a id="link" href="#top">link.</a>'; 34 span1 = document.getElementById("span1"); 35 span2 = document.getElementById("span2"); 36 link = document.getElementById("link"); 37 } 38 39 promise_test(async () => { 40 resetEditor(); 41 editor.blur(); 42 let actions = new test_driver.Actions(); 43 await actions 44 .pointerMove(0, 0) 45 .pointerMove(0, 0, {origin: span1}) 46 .pointerDown({button: actions.ButtonType.LEFT}) 47 .pointerUp({button: actions.ButtonType.LEFT}) 48 .send(); 49 50 assert_equals(document.activeElement, editor, 51 "The clicked editor should get focus"); 52 assert_true(selection.isCollapsed, 53 "Selection should be collapsed after primary button click"); 54 assert_equals(selection.focusNode, span1.firstChild, 55 "Selection should be collapsed in the first <span> element which was clicked by primary button"); 56 }, "Primary click should set focus to clicked editable element and collapse selection around the clicked point"); 57 58 promise_test(async () => { 59 resetEditor(); 60 editor.focus(); 61 selection.collapse(span1.firstChild, 2); 62 let actions = new test_driver.Actions(); 63 await actions 64 .pointerMove(0, 0) 65 .pointerMove(0, 0, {origin: span2}) 66 .pointerDown({button: actions.ButtonType.LEFT}) 67 .pointerUp({button: actions.ButtonType.LEFT}) 68 .send(); 69 70 assert_equals(document.activeElement, editor, 71 "The clicked editor should keep having focus"); 72 assert_true(selection.isCollapsed, 73 "Selection should be collapsed after primary button click"); 74 assert_equals(selection.focusNode, span2.firstChild, 75 "Selection should be collapsed in the second <span> element which was clicked by primary button"); 76 }, "Primary click should move caret in an editable element"); 77 78 promise_test(async () => { 79 resetEditor(); 80 editor.focus(); 81 selection.collapse(span1.firstChild, 2); 82 addEventListener("mousedown", preventDefault); 83 let actions = new test_driver.Actions(); 84 await actions 85 .pointerMove(0, 0) 86 .pointerMove(0, 0, {origin: span2}) 87 .pointerDown({button: actions.ButtonType.LEFT}) 88 .pointerUp({button: actions.ButtonType.LEFT}) 89 .send(); 90 removeEventListener("mousedown", preventDefault); 91 92 assert_equals(selection.focusNode, span1.firstChild, 93 "Selection should keep collapsed selection in the first <span> element"); 94 assert_equals(selection.focusOffset, 2, 95 "Selection should keep collapsed selection at 2 of the first <span> element"); 96 }, "Primary click shouldn't move caret in an editable element if the default of mousedown event is prevented"); 97 98 promise_test(async () => { 99 resetEditor(); 100 editor.focus(); 101 selection.collapse(span1.firstChild, 2); 102 addEventListener("pointerdown", preventDefault); 103 let actions = new test_driver.Actions(); 104 await actions 105 .pointerMove(0, 0) 106 .pointerMove(0, 0, {origin: span2}) 107 .pointerDown({button: actions.ButtonType.LEFT}) 108 .pointerUp({button: actions.ButtonType.LEFT}) 109 .send(); 110 removeEventListener("pointerdown", preventDefault); 111 112 assert_equals(selection.focusNode, span1.firstChild, 113 "Selection should keep collapsed selection in the first <span> element"); 114 assert_equals(selection.focusOffset, 2, 115 "Selection should keep collapsed selection at 2 of the first <span> element"); 116 }, "Primary click shouldn't move caret in an editable element if the default of pointerdown event is prevented"); 117 118 promise_test(async () => { 119 resetEditor(); 120 editor.focus(); 121 selection.collapse(span1.firstChild, 2); 122 let actions = new test_driver.Actions(); 123 await actions 124 .pointerMove(0, 0) 125 .pointerMove(0, 0, {origin: span2}) 126 .keyDown("\uE008") 127 .pointerDown({button: actions.ButtonType.LEFT}) 128 .pointerUp({button: actions.ButtonType.LEFT}) 129 .keyUp("\uE008") 130 .send(); 131 132 assert_equals(selection.anchorNode, span1.firstChild, 133 "Selection#anchorNode should keep in the first <span> element"); 134 assert_equals(selection.anchorOffset, 2, 135 "Selection#anchorNode should keep at 2 of the first <span> element"); 136 assert_equals(selection.focusNode, span2.firstChild, 137 "Selection#focusNode should be in the second <span> element which was clicked by primary button"); 138 }, "Shift + Primary click should extend the selection"); 139 140 promise_test(async () => { 141 resetEditor(); 142 editor.focus(); 143 selection.collapse(span1.firstChild, 2); 144 let actions = new test_driver.Actions(); 145 await actions 146 .pointerMove(0, 0) 147 .pointerMove(0, 0, {origin: link}) 148 .keyDown("\uE008") 149 .pointerDown({button: actions.ButtonType.MIDDLE}) 150 .pointerUp({button: actions.ButtonType.MIDDLE}) 151 .keyUp("\uE008") 152 .send(); 153 154 assert_equals(selection.focusNode, link.firstChild, 155 "Selection#focusNode should be in the <a href> element which was clicked by primary button"); 156 assert_true(selection.isCollapsed, 157 "Selection#isCollapsed should be true"); 158 }, "Shift + Primary click in a link shouldn't extend the selection"); 159 160 promise_test(async () => { 161 resetEditor(); 162 editor.focus(); 163 selection.collapse(span1.firstChild, 2); 164 editor.addEventListener("pointerdown", () => { 165 assert_true(selection.isCollapsed, 166 "Selection shouldn't be modified before pointerdown event"); 167 assert_equals(selection.focusNode, span1.firstChild, 168 "Selection should stay in the first <span> element when pointerdown event is fired (focusNode)"); 169 assert_equals(selection.focusOffset, 2, 170 "Selection should stay in the first <span> element when pointerdown event is fired (focusOffset)"); 171 }, {once: true}); 172 editor.addEventListener("mousedown", () => { 173 assert_true(selection.isCollapsed, 174 "Selection shouldn't be modified before mousedown event"); 175 assert_equals(selection.focusNode, span1.firstChild, 176 "Selection should stay in the first <span> element when mousedown event is fired (focusNode)"); 177 assert_equals(selection.focusOffset, 2, 178 "Selection should stay in the first <span> element when mousedown event is fired (focusOffset)"); 179 }, {once: true}); 180 editor.addEventListener("pointerup", () => { 181 assert_true(!selection.isCollapsed, 182 "Selection should be modified before pointerup event"); 183 assert_equals(selection.focusNode, span1.firstChild, 184 "Selection should be modified to extend the range before pointerup event "); 185 }, {once: true}); 186 let anchorOffsetAtMouseUp; 187 editor.addEventListener("mouseup", () => { 188 assert_true(!selection.isCollapsed, 189 "Selection should be modified before mouseup event"); 190 assert_equals(selection.focusNode, span1.firstChild, 191 "Selection should be modified to extend the range before mouseup event "); 192 anchorOffsetAtMouseUp = selection.anchorOffset; 193 }, {once: true}); 194 let actions = new test_driver.Actions(); 195 await actions 196 .pointerMove(0, 0) 197 .pointerMove(0, 0, {origin: span2}) 198 .pointerDown({button: actions.ButtonType.LEFT}) 199 .pointerMove(0, 0, {origin: span1}) 200 .pointerUp({button: actions.ButtonType.LEFT}) 201 .send(); 202 203 assert_equals(selection.anchorNode, span2.firstChild, 204 "Selection#anchorNode should stay in the second <span> element which mousedown occurred on"); 205 assert_equals(selection.anchorOffset, anchorOffsetAtMouseUp, 206 "Selection#anchorOffset should stay in the second <span> element which mousedown occurred on"); 207 assert_equals(selection.focusNode, span1.firstChild, 208 "Selection#focusNode should be in the first <span> element which mouseup occurred on"); 209 }, "Primary mouse button down should move caret, and primary mouse button up should extend the selection"); 210 </script> 211 </body> 212 </html>