| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../assert_selection.js"></script> |
| <script> |
| function clickAt(x, y) { |
| if (!window.eventSender) |
| assert_not_reached('This test requires eventSender.'); |
| eventSender.mouseMoveTo(x, y); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| } |
| |
| function clickLeft(selection, elmID) { |
| const elm = selection.document.getElementById(elmID); |
| const x = selection.computeLeft(elm); |
| const y = selection.computeTop(elm) + elm.offsetHeight / 2; |
| clickAt(x, y); |
| } |
| |
| function clickRight(selection, elmID) { |
| const elm = selection.document.getElementById(elmID); |
| const x = selection.computeLeft(elm) + elm.offsetWidth - 1; |
| const y = selection.computeTop(elm) + elm.offsetHeight / 2; |
| clickAt(x, y); |
| } |
| |
| function clickCenter(selection, elmID) { |
| const elm = selection.document.getElementById(elmID); |
| const x = selection.computeLeft(elm) + elm.offsetWidth / 2; |
| const y = selection.computeTop(elm) + elm.offsetHeight / 2; |
| clickAt(x, y); |
| } |
| |
| selection_test( |
| [ '<div contenteditable id="test" style="width:100px;text-align: center;">', |
| '<span contenteditable="false">Hello</span>', |
| '</div>'], |
| selection => clickLeft(selection, 'test'), |
| [ '<div contenteditable id="test" style="width:100px;text-align: center;">', |
| '|<span contenteditable="false">Hello</span>', |
| '</div>'], |
| 'Click left of contenteditable align center' |
| ); |
| |
| selection_test( |
| [ '<div contenteditable id="test" style="width:100px;text-align: center;">', |
| '<span contenteditable="false">Hello</span>', |
| '</div>'], |
| selection => clickCenter(selection, 'test'), |
| [ '<div contenteditable id="test" style="width:100px;text-align: center;">', |
| '<span contenteditable="false">He|llo</span>', |
| '</div>'], |
| 'Click inside of contenteditable=false' |
| ); |
| |
| selection_test( |
| [ '<div contenteditable id="test" style="width:100px;text-align: center;">', |
| '<span contenteditable="false">Hello</span>', |
| '</div>'], |
| selection => clickRight(selection, 'test'), |
| [ '<div contenteditable id="test" style="width:100px;text-align: center;">', |
| '<span contenteditable="false">Hello</span>|', |
| '</div>'], |
| 'Click right of contenteditable' |
| ); |
| |
| selection_test( |
| [ '<div contenteditable id="test" style="width:100px;text-align: left;">', |
| '<span contenteditable="false">Hello</span>', |
| '</div>'], |
| selection => clickLeft(selection, 'test'), |
| [ '<div contenteditable id="test" style="width:100px;text-align: left;">', |
| '|<span contenteditable="false">Hello</span>', |
| '</div>'], |
| 'Click left of contenteditable align left' |
| ); |
| |
| selection_test( |
| [ '<div contenteditable id="test" style="width:100px;text-align: left;">', |
| '<span contenteditable="false">Hello</span>', |
| '</div>'], |
| selection => clickRight(selection, 'test'), |
| [ '<div contenteditable id="test" style="width:100px;text-align: left;">', |
| '<span contenteditable="false">Hello</span>|', |
| '</div>'], |
| 'Click right of contenteditable align left' |
| ); |
| |
| selection_test( |
| [ '<div contenteditable id="test" style="width:100px;text-align: right;">', |
| '<span contenteditable="false">Hello</span>', |
| '</div>'], |
| selection => clickLeft(selection, 'test'), |
| [ '<div contenteditable id="test" style="width:100px;text-align: right;">', |
| '|<span contenteditable="false">Hello</span>', |
| '</div>'], |
| 'Click left of contenteditable align right' |
| ); |
| |
| selection_test( |
| [ '<div contenteditable id="test" style="width:100px;text-align: right;">', |
| '<span contenteditable="false">Hello</span>', |
| '</div>'], |
| selection => clickRight(selection, 'test'), |
| [ '<div contenteditable id="test" style="width:100px;text-align: right;">', |
| '<span contenteditable="false">Hello</span>|', |
| '</div>'], |
| 'Click right of contenteditable align right' |
| ); |
| |
| selection_test( |
| [ '<div contenteditable style="width:100px;">', |
| '<span contenteditable="false">Hello </span>', |
| '<span contenteditable="false" id="test">World</span>', |
| '</div>'], |
| selection => clickLeft(selection, 'test'), |
| [ '<div contenteditable style="width:100px;">', |
| '<span contenteditable="false">Hello </span>', |
| '|<span contenteditable="false" id="test">World</span>', |
| '</div>'], |
| 'Click left of contenteditable=false following contenteditable=false' |
| ); |
| |
| selection_test( |
| [ '<div contenteditable id="test" style="width:100px;text-align: center;">', |
| '</div>'], |
| selection => clickCenter(selection, 'test'), |
| [ '<div contenteditable id="test" style="width:100px;text-align: center;">', |
| '|', |
| '</div>'], |
| 'Click inside of empty contenteditable' |
| ); |
| |
| selection_test( |
| [ '<div style="width:100px;">', |
| 'Hello<span contenteditable id="test"> </span>', |
| '</div>'], |
| selection => clickCenter(selection, 'test'), |
| [ '<div style="width:100px;">', |
| 'Hello<span contenteditable id="test">| </span>', |
| '</div>'], |
| 'Click inside of inner empty contenteditable' |
| ); |
| </script> |
