LayoutTests/editing/selection/move-vertically-with-paddings-borders.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6 #tests p {
   7     font-size: 20px;
   8     width: 12ex;
   9     word-wrap: normal;
  10 }
  11
  12 </style>
  13 <script src="../../fast/js/resources/js-test-pre.js"></script>
  14 </head>
  15 <body>
  16 <p>This test ensures WebKit takes paddings and borders into account when moving vertically.</p>
  17 <ol id="tests">
  18 <li><p contenteditable>left1 <a href="">right1 left2</a> right2</p></li>
  19 <li><p contenteditable>left1 <a style="border: solid 5px blue;" href="">right1 left2</a> right2</p></li>
  20 <li><p contenteditable>left1 <a style="padding: 5px;" href="">right1 left2</a> right2</p></li>
  21 <li><p contenteditable>left1 <a style="padding: 5px;" href="">right1 left2 right2 left3</a> right3</p></li>
  22 </ol>
  23 <div id="console"></div>
  24 <script>
  25
  26 function moveToMiddleOfWord(node, word) {
  27     window.getSelection().setPosition(node, 0);
  28     if (!window.find(word))
  29         return false;
  30     window.getSelection().modify('move', 'backward', 'character');
  31     window.getSelection().modify('move', 'forward', 'character');
  32     window.getSelection().modify('move', 'forward', 'character');
  33     return true;
  34 }
  35
  36 function selectWord() {
  37     window.getSelection().modify('move', 'backward', 'word');
  38     window.getSelection().modify('extend', 'forward', 'word');
  39     return window.getSelection().toString();
  40 }
  41
  42 function moveVerticallyAndVerify(node, direction, from, to) {
  43     if (node.innerText.indexOf(from) === -1 || node.innerText.indexOf(to) === -1)
  44         return;
  45     if (!moveToMiddleOfWord(node, from))
  46         return;
  47     window.getSelection().modify('move', direction, 'line');
  48     shouldBe('selectWord()', '"' + to + '"');
  49 }
  50
  51 var tests = document.getElementById('tests').getElementsByTagName('p');
  52 for (var i = 0; i < tests.length; i++) {
  53     var node = tests[i];
  54
  55     debug('test ' + (i + 1));
  56
  57     node.focus();
  58     for (var j = 1; j <= 2; j++) {
  59         moveVerticallyAndVerify(node, 'forward', 'left' + j, 'left' + (j + 1));
  60         moveVerticallyAndVerify(node, 'forward', 'right' + j, 'right' + (j + 1));
  61         moveVerticallyAndVerify(node, 'backward', 'left' + (j + 1), 'left' + j);
  62         moveVerticallyAndVerify(node, 'backward', 'right' + (j + 1), 'right' + j);
  63     }
  64
  65     debug('');
  66 }
  67
  68 document.getElementById('tests').style.display = 'none';
  69
  70 </script>
  71 <script src="../../fast/js/resources/js-test-post.js"></script>
  72 </body>
  73 </html>