third_party/WebKit/LayoutTests/editing/selection/move-with-padding-top.html

   1 <!DOCTYPE html>
   2 <style>
   3 html, body {
   4     margin: 0;
   5 }
   6 #container {
   7     width:300px;
   8 }
   9 </style>
  10 <script src="../../resources/testharness.js"></script>
  11 <script src="../../resources/testharnessreport.js"></script>
  12 <div id="container" contenteditable="true">
  13     <p><span style="font-size:24px">Caret navigation using up arrow key does not work</span></p>
  14 </div>
  15 <script>
  16 var p = document.getElementsByTagName("p")[0];
  17 var selection = window.getSelection();
  18
  19 testMoveByLineWithPaddingTop("0");
  20 testMoveByLineWithPaddingTop("4pt");
  21 testMoveByLineWithPaddingTop("4.8pt");
  22
  23 function testMoveByLineWithPaddingTop(paddingTop) {
  24     test(function () {
  25         p.style.paddingTop = paddingTop;
  26         var textNode = document.getElementsByTagName("span")[0].firstChild;
  27         selection.collapse(textNode, 1); // avoid line-top not to be bothered by affinity
  28         var beforeRect = selection.getRangeAt(0).getClientRects()[0];
  29
  30         selection.modify("move", "forward", "line");
  31         var forwardRect = selection.getRangeAt(0).getClientRects()[0];
  32         assert_greater_than(forwardRect.top, beforeRect.top, "move forward by line");
  33
  34         selection.modify("move", "backward", "line");
  35         var backwardRect = selection.getRangeAt(0).getClientRects()[0];
  36         assert_equals(backwardRect.top, beforeRect.top, "move backward by line");
  37     }, "padding-top=" + paddingTop);
  38 }
  39
  40 if (window.testRunner)
  41     container.style.display = "none";
  42 </script>