| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <head> | |
| 3 <style> | |
| 4 .userSelectAll {-webkit-user-select: all; } | |
| 5 </style> | |
| 6 <script src="../editing.js"></script> | |
| 7 <script src="../../resources/js-test.js"></script> | |
| 8 <script src="resources/js-test-selection-shared.js"></script> | |
| 9 <script> | |
| 10 function log(str) { | |
| 11 var div = document.createElement("div"); | |
| 12 div.appendChild(document.createTextNode(str)); | |
| 13 document.getElementById("console").appendChild(div); | |
| 14 } | |
| 15 | |
| 16 function testSelectionAt(anchorNode, anchorOffset, optFocusNode, optFocusOffset,
str) { | |
| 17 var focusNode = optFocusNode || anchorNode; | |
| 18 var focusOffset = (optFocusOffset === undefined) ? anchorOffset : optFocusOf
fset; | |
| 19 | |
| 20 var sel = window.getSelection(); | |
| 21 if (sel.anchorNode == anchorNode | |
| 22 && sel.focusNode == focusNode | |
| 23 && sel.anchorOffset == anchorOffset | |
| 24 && sel.focusOffset == focusOffset) { | |
| 25 testPassed("Selection is " + str); | |
| 26 } else { | |
| 27 testFailed("Selection should be " + str + | |
| 28 " at anchorNode: " + sel.anchorNode + " anchorOffset: " + sel.anchor
Offset + | |
| 29 " focusNode: " + sel.focusNode + " focusOffset: " + sel.focusOffset)
; | |
| 30 } | |
| 31 } | |
| 32 | |
| 33 function selectionShouldBeRelativeToUserSelectAllElement(str) { | |
| 34 var userSelectAllElement = document.getElementById("allArea"); | |
| 35 var userSelectAllNodeIndex = 1; | |
| 36 if (str == "around") | |
| 37 testSelectionAt(userSelectAllElement.previousSibling.firstChild, userSel
ectAllElement.previousSibling.textContent.length, | |
| 38 userSelectAllElement.nextSibling, 0, | |
| 39 "the entire user-select-all element"); | |
| 40 else if ( str == "before") | |
| 41 testSelectionAt(userSelectAllElement.previousSibling.firstChild, userSel
ectAllElement.previousSibling.textContent.length, | |
| 42 userSelectAllElement.previousSibling.firstChild, userSelectAllElemen
t.previousSibling.textContent.length, | |
| 43 "right before user-select-all element"); | |
| 44 else if (str == "after") | |
| 45 testSelectionAt(userSelectAllElement.nextSibling.firstChild, 0, | |
| 46 userSelectAllElement.nextSibling.firstChild, 0, | |
| 47 "right after user-select-all element"); | |
| 48 } | |
| 49 | |
| 50 function placeCaretBeforeUserSelectAllElement(){ | |
| 51 var userSelectAllElement = document.getElementById("allArea"); | |
| 52 execSetSelectionCommand(userSelectAllElement.previousSibling.firstChild, use
rSelectAllElement.previousSibling.textContent.length, userSelectAllElement.previ
ousSibling, userSelectAllElement.previousSibling.textContent.length); | |
| 53 } | |
| 54 | |
| 55 function mouseMoveFromTo(fromX, toX){ | |
| 56 var userSelectAllElement = document.getElementById("allArea"); | |
| 57 var y = userSelectAllElement.offsetTop + 10; | |
| 58 eventSender.dragMode = false; | |
| 59 // Clear click count | |
| 60 eventSender.mouseMoveTo(0, 0); | |
| 61 eventSender.mouseDown(); | |
| 62 eventSender.mouseUp(); | |
| 63 | |
| 64 eventSender.mouseMoveTo(fromX, y); | |
| 65 eventSender.mouseDown(); | |
| 66 eventSender.mouseMoveTo(toX, y); | |
| 67 eventSender.mouseUp(); | |
| 68 } | |
| 69 | |
| 70 function testKeyboard(){ | |
| 71 var userSelectAllElement = document.getElementById("allArea"); | |
| 72 | |
| 73 evalAndLog("placeCaretBeforeUserSelectAllElement()"); | |
| 74 evalAndLog("window.getSelection().modify('extend', 'forward', 'character')")
; | |
| 75 selectionShouldBeRelativeToUserSelectAllElement("around"); | |
| 76 | |
| 77 evalAndLog("window.getSelection().modify('extend', 'backward', 'character')"
); | |
| 78 selectionShouldBeRelativeToUserSelectAllElement("before"); | |
| 79 | |
| 80 evalAndLog("window.getSelection().modify('extend', 'right', 'character')"); | |
| 81 selectionShouldBeRelativeToUserSelectAllElement("around"); | |
| 82 | |
| 83 evalAndLog("window.getSelection().modify('extend', 'left', 'character')"); | |
| 84 selectionShouldBeRelativeToUserSelectAllElement("before"); | |
| 85 | |
| 86 evalAndLog("window.getSelection().modify('move', 'forward', 'character')"); | |
| 87 selectionShouldBeRelativeToUserSelectAllElement("after"); | |
| 88 | |
| 89 evalAndLog("window.getSelection().modify('move', 'backward', 'character')"); | |
| 90 selectionShouldBeRelativeToUserSelectAllElement("before"); | |
| 91 | |
| 92 evalAndLog("window.getSelection().modify('move', 'right', 'character')"); | |
| 93 selectionShouldBeRelativeToUserSelectAllElement("after"); | |
| 94 | |
| 95 evalAndLog("window.getSelection().modify('move', 'left', 'character')"); | |
| 96 selectionShouldBeRelativeToUserSelectAllElement("before"); | |
| 97 } | |
| 98 | |
| 99 function testMouse(){ | |
| 100 var userSelectAllElement = document.getElementById("allArea"); | |
| 101 var descendant = document.getElementById("descendant"); | |
| 102 evalAndLog("clickAt(descendant.offsetLeft + 10 , descendant.offsetTop + 10)"
); | |
| 103 selectionShouldBeRelativeToUserSelectAllElement("around"); | |
| 104 | |
| 105 // mouse extending from left | |
| 106 var leftTarget = userSelectAllElement.previousSibling; | |
| 107 log("mouseMoveFromTo(leftTarget.offsetLeft, descendant.offsetLeft + 20)"); | |
| 108 mouseMoveFromTo(leftTarget.offsetLeft, descendant.offsetLeft + 20); | |
| 109 testSelectionAt(leftTarget.firstChild, 0, userSelectAllElement.nextSibling,
0, "the entire user-select-all element plus everything on its left"); | |
| 110 | |
| 111 // mouse extending from right | |
| 112 var rightTarget = userSelectAllElement.nextSibling; | |
| 113 var textLength = rightTarget.textContent.length; | |
| 114 log("mouseMoveFromTo(userSelectAllElement.offsetLeft + userSelectAllElement.
offsetWidth + rightTarget.offsetWidth, descendant.offsetLeft + 10)"); | |
| 115 mouseMoveFromTo(userSelectAllElement.offsetLeft + userSelectAllElement.offse
tWidth + rightTarget.offsetWidth, descendant.offsetLeft + 10); | |
| 116 testSelectionAt(rightTarget.firstChild, textLength, leftTarget.firstChild, l
eftTarget.textContent.textLength, "the entire user-select-all element plus every
thing on its right"); | |
| 117 } | |
| 118 | |
| 119 function testProgrammaticSelection(){ | |
| 120 var boldElement = document.querySelector('b'); | |
| 121 getSelection().selectAllChildren(boldElement); | |
| 122 testSelectionAt(boldElement.firstChild, 0, boldElement.firstChild, 10, "only
the text in bold"); | |
| 123 } | |
| 124 </script> | |
| 125 </head> | |
| 126 <body><div 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> | |
| 127 <div id="console"></div> | |
| 128 <script> | |
| 129 description(" Test -webkit-user-select all selection movements and extensions (l
eft right forward backward) "); | |
| 130 testKeyboard(); | |
| 131 testMouse(); | |
| 132 testProgrammaticSelection(); | |
| 133 </script> | |
| 134 </body> | |
| 135 </html> | |
| OLD | NEW |