move-with-padding-top.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/editing/selection/move-with-padding-top.html
