| <!DOCTYPE html> |
| <style> |
| html, body { |
| margin: 0; |
| } |
| #container { |
| width:300px; |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <div id="container" contenteditable="true"> |
| <p><span style="font-size:24px">Caret navigation using up arrow key does not work</span></p> |
| </div> |
| <script> |
| var p = document.getElementsByTagName("p")[0]; |
| var selection = window.getSelection(); |
| |
| testMoveByLineWithPaddingTop("0"); |
| testMoveByLineWithPaddingTop("4pt"); |
| testMoveByLineWithPaddingTop("4.8pt"); |
| |
| function testMoveByLineWithPaddingTop(paddingTop) { |
| test(function () { |
| p.style.paddingTop = paddingTop; |
| var textNode = document.getElementsByTagName("span")[0].firstChild; |
| selection.collapse(textNode, 1); // avoid line-top not to be bothered by affinity |
| var beforeRect = selection.getRangeAt(0).getClientRects()[0]; |
| |
| selection.modify("move", "forward", "line"); |
| var forwardRect = selection.getRangeAt(0).getClientRects()[0]; |
| assert_greater_than(forwardRect.top, beforeRect.top, "move forward by line"); |
| |
| selection.modify("move", "backward", "line"); |
| var backwardRect = selection.getRangeAt(0).getClientRects()[0]; |
| assert_equals(backwardRect.top, beforeRect.top, "move backward by line"); |
| }, "padding-top=" + paddingTop); |
| } |
| |
| if (window.testRunner) |
| container.style.display = "none"; |
| </script> |
