third_party/WebKit/LayoutTests/editing/selection/home-end.html

   1 <head>
   2     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   3     <style>
   4         div.test {
   5             -webkit-user-modify: read-write;
   6             padding: 4px;
   7             border: 1px dashed lightblue;
   8             margin: 4px 4px 4px 24px;
   9             outline: none;
  10             font-family: Lucida Grande;
  11             counter-increment: test-number;
  12         }
  13         div.test:before { content: counter(test-number); position: absolute; left: 8px; font-size: x-small; text-align: right; width: 20px; }
  14         div.test span { background-color: #def; }
  15         div.test img { width: 1em; height: 1em; background-color: lightgreen; }
  16         div.test img + img { background-color: lightblue; }
  17         div.test div { border: 1px dashed pink; padding: 3px; height: 2em; }
  18     </style>
  19     <script>
  20         function log(message)
  21         {
  22             document.getElementById("console").appendChild(document.createTextNode(message));
  23         }
  24
  25         function positionsMovingInDirection(sel, direction)
  26         {
  27             var positions = [];
  28             positions.push({ node: sel.anchorNode, offset: sel.focusOffset});
  29             sel.modify("move", direction, "lineBoundary");
  30             positions.push({ node: sel.anchorNode, offset: sel.focusOffset});
  31             return positions;
  32         }
  33
  34         function fold(string)
  35         {
  36             var result = "";
  37             for (var i = 0; i < string.length; ++i) {
  38                 var char = string.charCodeAt(i);
  39                 if (char >= 0x05d0)
  40                     char -= 0x058f;
  41                 else if (char == 10) {
  42                     result += "\\n";
  43                     continue;
  44                 }
  45                 result += String.fromCharCode(char);
  46             }
  47             return result;
  48         }
  49
  50         function logPositions(positions)
  51         {
  52             for (var i = 0; i < positions.length; ++i) {
  53                 if (i) {
  54                     if (positions[i].node != positions[i - 1].node)
  55                         log("]");
  56                     log(", ");
  57                 }
  58                 if (!i || positions[i].node != positions[i - 1].node)
  59                     log((positions[i].node instanceof Text ? '"' + fold(positions[i].node.data) + '"' : "<" + positions[i].node.tagName + ">") + "[");
  60                 log(positions[i].offset);
  61             }
  62             log("]");
  63         }
  64
  65         onload = function()
  66         {
  67             if (!window.testRunner)
  68                 return;
  69
  70             testRunner.dumpAsText();
  71
  72             var tests = document.getElementsByClassName("test");
  73             var sel = getSelection();
  74             log("Test Moving forward/backward\n");
  75             for (var i = 0; i < tests.length; ++i) {
  76                 var positionsMovingForward;
  77                 var positionsMovingBackward;
  78
  79                 log("Test " + (i + 1) + ", LTR:\n  Moving forward: ");
  80                 sel.collapse(tests[i], 0);
  81                 positionsMovingForward = positionsMovingInDirection(sel, "forward");
  82                 logPositions(positionsMovingForward);
  83                 log("\n");
  84
  85                 log("  Moving backward:  ");
  86                 positionsMovingBackward = positionsMovingInDirection(sel, "backward");
  87                 logPositions(positionsMovingBackward);
  88                 log("\n");
  89
  90                 tests[i].style.direction = "rtl";
  91
  92                 log("Test " + (i + 1) + ", RTL:\n  Moving forward: ");
  93                 sel.collapse(tests[i], 0);
  94                 positionsMovingForward = positionsMovingInDirection(sel, "forward");
  95                 logPositions(positionsMovingForward);
  96                 log("\n");
  97
  98                 log("  Moving backward:  ");
  99                 positionsMovingBackward = positionsMovingInDirection(sel, "backward");
 100                 logPositions(positionsMovingBackward);
 101                 log("\n");
 102
 103             }
 104             log("Test Moving right/left\n");
 105             for (var i = 0; i < tests.length; ++i) {
 106                 var positionsMovingRight;
 107                 var positionsMovingLeft;
 108
 109                 tests[i].style.direction = "ltr";
 110
 111                 log("Test " + (i + 1) + ", LTR:\n  Moving right: ");
 112                 sel.collapse(tests[i], 0);
 113                 positionsMovingRight = positionsMovingInDirection(sel, "right");
 114                 logPositions(positionsMovingRight);
 115                 log("\n");
 116
 117                 log("  Moving left:  ");
 118                 positionsMovingLeft = positionsMovingInDirection(sel, "left");
 119                 logPositions(positionsMovingLeft);
 120                 log("\n");
 121
 122                 tests[i].style.direction = "rtl";
 123
 124                 log("Test " + (i + 1) + ", RTL:\n  Moving left: ");
 125                 sel.collapse(tests[i], 0);
 126                 positionsMovingLeft = positionsMovingInDirection(sel, "left");
 127                 logPositions(positionsMovingLeft);
 128                 log("\n");
 129
 130                 log("  Moving right:  ");
 131                 positionsMovingRight = positionsMovingInDirection(sel, "right");
 132                 logPositions(positionsMovingRight);
 133                 log("\n");
 134
 135                 tests[i].style.display = "none";
 136             }
 137         }
 138
 139     </script>
 140 </head>
 141 <body>
 142
 143 <div contenteditable class="test">
 144 abc &#1488;&#1489;&#1490; xyz &#1491;&#1492;&#1493; def
 145 </div>
 146 <div contenteditable class="test">
 147 &#1488;&#1489;&#1490; xyz &#1491;&#1492;&#1493; def &#1494;&#1495;&#1496;
 148 </div>
 149 <div contenteditable class="test">
 150 &#1488;&#1489;&#1490; &#1491;&#1492;&#1493; &#1488;&#1489;&#1490;
 151 </div>
 152 <div contenteditable class="test">
 153 abc efd dabeb
 154 </div>
 155
 156 <div contenteditable  class="test">Lorem <span  style="direction: rtl">ipsum dolor sit</span> amet</div>
 157 <div contenteditable  class="test">Lorem <span  style="direction: rtl">ipsum dolor<div > just a test</div> sit</span> amet</div>
 158 <div contenteditable class="test">Lorem <span  dir="rtl">ipsum dolor sit</span> amet</div>
 159 <div contenteditable class="test">Lorem <div  dir="rtl">ipsum dolor sit</div> amet</div>
 160
 161 <div contenteditable  class="test">Lorem <span  style="direction: ltr">ipsum dolor sit</span> amet</div>
 162 <div contenteditable  class="test">Lorem <span  style="direction: ltr">ipsum dolor<div > just a test</div> sit</span> amet</div>
 163 <div contenteditable class="test">Lorem <span  dir="ltr">ipsum dolor sit</span> amet</div>
 164 <div contenteditable class="test">Lorem <div  dir="ltr">ipsum dolor sit</div> amet</div>
 165
 166 <div class="test" style="direction: ltr;" contenteditable>
 167  Just
 168  <span>testing רק</span>
 169  בודק
 170 </div>
 171
 172 <div class="test" style="direction: ltr;" contenteditable>
 173  Just
 174  <span>testing what</span>
 175  ever
 176 </div>
 177
 178
 179 <div class="test" contenteditable>car means &#1488;&#1489;&#1490;.</div>
 180 <div class="test" contenteditable>&#x202B;car &#1491;&#1492;&#1493; &#1488;&#1489;&#1490;.&#x202c;</div>
 181 <div class="test" contenteditable>he said "&#x202B;car &#1491;&#1492;&#1493; &#1488;&#1489;&#1490;&#x202c;."</div>
 182 <div class="test" contenteditable>&#1494;&#1495;&#1496; &#1497;&#1498;&#1499; &#1500;&#1501;&#1502; '&#x202a;he said "&#x202B;car &#1491;&#1492;&#1493; &#1488;&#1489;&#1490;&#x202c;"&#x202c;'?</div>
 183
 184
 185 <div class="test" contenteditable>&#1488;&#1489;&#1490; abc &#1491;&#1492;&#1493;<br />edf &#1494;&#1495;&#1496; abrebg</div>
 186 <div class="test" contenteditable style="line-break:before-white-space; width:100px">abcdefg abcdefg abcdefg a abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </div>
 187 <div class="test" contenteditable style="line-break:after-white-space; width:100px">abcdefg abcdefg abcdefg a abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg </div>
 188 <pre id="console"></pre>
 189 </body>