| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| |
| #tests p { |
| font-size: 20px; |
| width: 12ex; |
| word-wrap: normal; |
| } |
| |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <p>This test ensures WebKit takes paddings and borders into account when moving vertically.</p> |
| <ol id="tests"> |
| <li><p contenteditable>left1 <a href="">right1 left2</a> right2</p></li> |
| <li><p contenteditable>left1 <a style="border: solid 5px blue;" href="">right1 left2</a> right2</p></li> |
| <li><p contenteditable>left1 <a style="padding: 5px;" href="">right1 left2</a> right2</p></li> |
| <li><p contenteditable>left1 <a style="padding: 5px;" href="">right1 left2 right2 left3</a> right3</p></li> |
| </ol> |
| <div id="console"></div> |
| <script> |
| |
| function moveToMiddleOfWord(node, word) { |
| window.getSelection().collapse(node, 0); |
| if (!window.find(word)) |
| return false; |
| window.getSelection().modify('move', 'backward', 'character'); |
| window.getSelection().modify('move', 'forward', 'character'); |
| window.getSelection().modify('move', 'forward', 'character'); |
| return true; |
| } |
| |
| function selectWord() { |
| window.getSelection().modify('move', 'backward', 'word'); |
| window.getSelection().modify('extend', 'forward', 'word'); |
| return getSelection().toString().trim(); |
| } |
| |
| function moveVerticallyAndVerify(node, direction, from, to) { |
| if (node.innerText.indexOf(from) === -1 || node.innerText.indexOf(to) === -1) |
| return; |
| if (!moveToMiddleOfWord(node, from)) |
| return; |
| window.getSelection().modify('move', direction, 'line'); |
| shouldBe('selectWord()', '"' + to + '"'); |
| } |
| |
| var tests = document.getElementById('tests').getElementsByTagName('p'); |
| for (var i = 0; i < tests.length; i++) { |
| var node = tests[i]; |
| |
| debug('test ' + (i + 1)); |
| |
| node.focus(); |
| for (var j = 1; j <= 2; j++) { |
| moveVerticallyAndVerify(node, 'forward', 'left' + j, 'left' + (j + 1)); |
| moveVerticallyAndVerify(node, 'forward', 'right' + j, 'right' + (j + 1)); |
| moveVerticallyAndVerify(node, 'backward', 'left' + (j + 1), 'left' + j); |
| moveVerticallyAndVerify(node, 'backward', 'right' + (j + 1), 'right' + j); |
| } |
| |
| debug(''); |
| } |
| |
| document.getElementById('tests').style.display = 'none'; |
| |
| </script> |
| </body> |
| </html> |
