| <!DOCTYPE html> |
| <head> |
| <style> |
| .userSelectAll {-webkit-user-select: all; } |
| </style> |
| <script src="../editing.js"></script> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script src="../../resources/dump-as-markup.js"></script> |
| <script src="resources/js-test-selection-shared.js"></script> |
| <script> |
| function log(str) { |
| var div = document.createElement("div"); |
| div.appendChild(document.createTextNode(str)); |
| document.getElementById("console").appendChild(div); |
| } |
| |
| function placeCaretBeforeUserSelectAllElement() |
| { |
| var userSelectAllElement = document.getElementById("allArea"); |
| execSetSelectionCommand(userSelectAllElement.previousSibling.firstChild, userSelectAllElement.previousSibling.textContent.length, userSelectAllElement.previousSibling.firstChild, userSelectAllElement.previousSibling.textContent.length); |
| } |
| |
| function mouseMoveFromTo(fromX, toX) |
| { |
| var userSelectAllElement = document.getElementById("allArea"); |
| var y = userSelectAllElement.offsetTop + 10; |
| eventSender.dragMode = false; |
| // Clear click count |
| eventSender.mouseMoveTo(0, 0); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| |
| eventSender.mouseMoveTo(fromX, y); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(toX, y); |
| eventSender.mouseUp(); |
| } |
| |
| function testKeyboard(){ |
| var userSelectAllElement = document.getElementById("allArea"); |
| |
| placeCaretBeforeUserSelectAllElement(); |
| getSelection().modify('extend', 'forward', 'character'); |
| Markup.dump(editor, 'After extend forward character'); |
| |
| getSelection().modify('extend', 'backward', 'character'); |
| Markup.dump(editor, 'After extend backward character'); |
| |
| getSelection().modify('extend', 'right', 'character'); |
| Markup.dump(editor, 'After extend right character'); |
| |
| getSelection().modify('extend', 'left', 'character'); |
| Markup.dump(editor, 'After extend left character'); |
| |
| getSelection().modify('move', 'forward', 'character'); |
| Markup.dump(editor, 'After move forward character'); |
| |
| getSelection().modify('move', 'backward', 'character'); |
| Markup.dump(editor, 'After move backward character'); |
| |
| getSelection().modify('move', 'right', 'character'); |
| Markup.dump(editor, 'After move right character'); |
| |
| getSelection().modify('move', 'left', 'character'); |
| Markup.dump(editor, 'After move left character'); |
| } |
| |
| function testMouse(){ |
| var userSelectAllElement = document.getElementById("allArea"); |
| var descendant = document.getElementById("descendant"); |
| |
| clickAt(descendant.offsetLeft + 10 , descendant.offsetTop + 10); |
| Markup.dump(editor, 'After click'); |
| |
| // mouse extending from left |
| var leftTarget = userSelectAllElement.previousSibling; |
| mouseMoveFromTo(leftTarget.offsetLeft, descendant.offsetLeft + 20); |
| Markup.dump(editor, 'After extending selection from left by mouse'); |
| |
| // mouse extending from right |
| var rightTarget = userSelectAllElement.nextSibling; |
| var textLength = rightTarget.textContent.length; |
| mouseMoveFromTo(userSelectAllElement.offsetLeft + userSelectAllElement.offsetWidth + rightTarget.offsetWidth, descendant.offsetLeft + 10); |
| Markup.dump(editor, 'After extending selection from right by mouse'); |
| } |
| |
| function testProgrammaticSelection(){ |
| var boldElement = document.querySelector('b'); |
| getSelection().selectAllChildren(boldElement); |
| Markup.dump(editor, 'After programmatic selection'); |
| } |
| </script> |
| </head> |
| <body><div id="editor" contenteditable><span>Test -webkit-user-select all </span><span class="userSelectAll" id="allArea"><span style="border: solid red 1px" id="descendant">user <b>select all</b> area</span></span><span> Test -webkit-user-select all</span></div> |
| <div id="console"></div> |
| <script> |
| Markup.description(" Test -webkit-user-select all selection movements and extensions (left right forward backward) "); |
| testKeyboard(); |
| testMouse(); |
| testProgrammaticSelection(); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
