src/third_party/WebKit/LayoutTests/editing/selection/move-left-right.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         var messages = [];
  21
  22         function log(message)
  23         {
  24             messages.push(message);
  25         }
  26
  27         function flushLog()
  28         {
  29             document.getElementById("console").appendChild(document.createTextNode(messages.join("")));
  30         }
  31
  32         function caretCoordinates()
  33         {
  34             if (!window.textInputController)
  35                 return { x: 0, y :0 };
  36             var caretRect = textInputController.firstRectForCharacterRange(textInputController.selectedRange()[0], 0);
  37             return { x: caretRect[0], y: caretRect[1] };
  38         }
  39
  40         function positionsMovingInDirection(sel, direction)
  41         {
  42             var positions = [];
  43             while (true) {
  44                 positions.push({ node: sel.anchorNode, offset: sel.anchorOffset, point: caretCoordinates() });
  45                 sel.modify("move", direction, "character");
  46                 if (positions[positions.length - 1].node == sel.anchorNode && positions[positions.length - 1].offset == sel.anchorOffset)
  47                     break;
  48             };
  49             return positions;
  50         }
  51
  52         function fold(string)
  53         {
  54             var result = "";
  55             for (var i = 0; i < string.length; ++i) {
  56                 var char = string.charCodeAt(i);
  57                 if (char >= 0x0660) // Arabic numeral 0
  58                     char = char - 0x660 + '0'.charCodeAt(0);
  59                 else if (char >= 0x0627) // Alif
  60                     char = char - 0x0627 + 'A'.charCodeAt(0);
  61                 else if (char >= 0x05d0)
  62                     char -= 0x058f;
  63                 else if (char == 10) {
  64                     result += "\\n";
  65                     continue;
  66                 }
  67                 result += String.fromCharCode(char);
  68             }
  69             return result;
  70         }
  71
  72         function logPositions(positions)
  73         {
  74             for (var i = 0; i < positions.length; ++i) {
  75                 if (i) {
  76                     if (positions[i].node != positions[i - 1].node)
  77                         log("]");
  78                     log(", ");
  79                 }
  80                 if (!i || positions[i].node != positions[i - 1].node)
  81                     log((positions[i].node instanceof Text ? '"' + fold(positions[i].node.data) + '"' : "<" + positions[i].node.tagName + ">") + "[");
  82                 log(positions[i].offset);
  83             }
  84             log("]");
  85         }
  86
  87         function checkReverseOrder(positions, reversePositions)
  88         {
  89             var mismatch = positions.length != reversePositions.length;
  90             while (!mismatch) {
  91                 var pos = positions.pop();
  92                 if (!pos)
  93                     break;
  94                 var reversePos = reversePositions.shift();
  95                 if (pos.node != reversePos.node || pos.offset != reversePos.offset)
  96                     mismatch = true;
  97             }
  98
  99             if (mismatch)
 100                 log("WARNING: Moving to the left did not visit the same positions in reverse order as moving to the right.\n");
 101         }
 102
 103         function checkCoordinatesMovingRightDown(positions)
 104         {
 105             for (var i = 1; i < positions.length; ++i) {
 106                 if (positions[i].point.y > positions[i - 1].point.y || positions[i].point.x < positions[i - 1].point.x && positions[i].point.y >= positions[i - 1].point.y)
 107                     log("WARNING: Moved in the wrong direction in step " + i + ": from (" + positions[i - 1].point.x + ", " + positions[i - 1].point.y + ") to (" + positions[i].point.x + ", " + positions[i].point.y + ").\n");
 108             }
 109         }
 110
 111         function checkCoordinatesMovingLeftDown(positions)
 112         {
 113             for (var i = 1; i < positions.length; ++i) {
 114                 if (positions[i].point.y > positions[i - 1].point.y || positions[i].point.x > positions[i - 1].point.x && positions[i].point.y >= positions[i - 1].point.y)
 115                     log("WARNING: Moved in the wrong direction in step " + i + ": from (" + positions[i - 1].point.x + ", " + positions[i - 1].point.y + ") to (" + positions[i].point.x + ", " + positions[i].point.y + ").\n");
 116             }
 117         }
 118
 119         function checkCoordinatesMovingRightUp(positions)
 120         {
 121             for (var i = 1; i < positions.length; ++i) {
 122                 if (positions[i].point.y < positions[i - 1].point.y || positions[i].point.x < positions[i - 1].point.x && positions[i].point.y <= positions[i - 1].point.y)
 123                     log("WARNING: Moved in the wrong direction in step " + i + ": from (" + positions[i - 1].point.x + ", " + positions[i - 1].point.y + ") to (" + positions[i].point.x + ", " + positions[i].point.y + ").\n");
 124             }
 125         }
 126
 127         function checkCoordinatesMovingLeftUp(positions)
 128         {
 129             for (var i = 1; i < positions.length; ++i) {
 130                 if (positions[i].point.y < positions[i - 1].point.y || positions[i].point.x > positions[i - 1].point.x && positions[i].point.y <= positions[i - 1].point.y)
 131                     log("WARNING: Moved in the wrong direction in step " + i + ": from (" + positions[i - 1].point.x + ", " + positions[i - 1].point.y + ") to (" + positions[i].point.x + ", " + positions[i].point.y + ").\n");
 132             }
 133         }
 134
 135         function runTest()
 136         {
 137             var tests = document.getElementsByClassName("test");
 138             var sel = getSelection();
 139             for (var i = 0; i < tests.length; ++i) {
 140                 var positionsMovingRight;
 141                 var positionsMovingLeft;
 142
 143                 log("Test " + (i + 1) + ", LTR:\n  Moving right: ");
 144                 sel.collapse(tests[i], 0);
 145                 positionsMovingRight = positionsMovingInDirection(sel, "right");
 146                 logPositions(positionsMovingRight);
 147                 log("\n");
 148                 checkCoordinatesMovingRightDown(positionsMovingRight);
 149
 150                 log("  Moving left:  ");
 151                 positionsMovingLeft = positionsMovingInDirection(sel, "left");
 152                 logPositions(positionsMovingLeft);
 153                 log("\n");
 154                 checkCoordinatesMovingLeftUp(positionsMovingLeft);
 155
 156                 checkReverseOrder(positionsMovingLeft, positionsMovingRight);
 157
 158                 tests[i].style.direction = "rtl";
 159
 160                 log("Test " + (i + 1) + ", RTL:\n  Moving left: ");
 161                 sel.collapse(tests[i], 0);
 162                 positionsMovingLeft = positionsMovingInDirection(sel, "left");
 163                 logPositions(positionsMovingLeft);
 164                 log("\n");
 165                 checkCoordinatesMovingLeftDown(positionsMovingLeft);
 166
 167                 log("  Moving right:  ");
 168                 positionsMovingRight = positionsMovingInDirection(sel, "right");
 169                 logPositions(positionsMovingRight);
 170                 log("\n");
 171                 checkCoordinatesMovingRightUp(positionsMovingRight);
 172
 173                 checkReverseOrder(positionsMovingLeft, positionsMovingRight);
 174
 175             }
 176             document.getElementById("testGroup").style.display = "none";
 177         }
 178
 179         onload = function() {
 180             try {
 181                 runTest();
 182             } finally {
 183                 flushLog();
 184             }
 185         };
 186
 187         if (window.testRunner)
 188             testRunner.dumpAsText();
 189     </script>
 190 </head>
 191 <body>
 192     <div id="testGroup">
 193
 194     <div class="test">
 195         abc
 196     </div>
 197
 198     <div class="test">
 199         אבג
 200     </div>
 201
 202     <div class="test"><br>abc
 203     </div>
 204
 205     <div class="test"><br>אבג
 206     </div>
 207
 208     <div class="test">
 209         abcאבגdef
 210     </div>
 211
 212     <div class="test">
 213         אבגabcדהו
 214     </div>
 215
 216     <div class="test">
 217         abcאבגדהו
 218     </div>
 219
 220     <div class="test">
 221         אבגabcdef
 222     </div>
 223
 224     <div class="test">١٢٣ابة</div>
 225
 226     <div class="test">ابة١٢٣</div>
 227
 228     <div class="test">
 229         <span>abc</span>אבגdef
 230     </div>
 231
 232     <div class="test">
 233         <span>אבג</span>abcדהו
 234     </div>
 235
 236     <div class="test">abcאבג123דהוdef
 237     </div>
 238
 239     <div class="test">abcאבג123
 240     </div>
 241
 242     <div class="test">abcאבג123def
 243     </div>
 244
 245     <div class="test">אבג123דהוabcזחט456יכל
 246     </div>
 247
 248     <div class="test" style="width: 120px;">
 249         before    אחרי אנציקלופדיה
 250     </div>
 251
 252     <div class="test" style="width: 120px;">
 253         לפני    after encyclopedia
 254     </div>
 255
 256     <div class="test" contenteditable style="width: 120px;">
 257         before    אחרי אנציקלופדיה
 258     </div>
 259
 260     <div class="test" contenteditable style="width: 120px;">
 261         לפני    after encyclopedia
 262     </div>
 263
 264     <div class="test" style="width: 100px;">
 265         This is יותר צר מיתר the boxes.
 266     </div>
 267
 268     <div contenteditable class="test" style="width: 100px;">
 269         This is יותר צר מיתר the boxes.
 270     </div>
 271
 272     <div class="test">
 273         Lorem
 274         <div></div>
 275         ipsum
 276     </div>
 277
 278     <div class="test">
 279         צלחת
 280         <div></div>
 281         מצנפת
 282     </div>
 283
 284     <div class="test">
 285         abcdefאבג<img>דהו
 286     </div>
 287
 288     <div class="test">
 289         אבגדהוabc<img>def
 290     </div>
 291
 292     <div class="test">
 293         abc<input>אבג<img><img>דהוghi
 294     </div>
 295
 296     <div class="test">
 297         אבג<input>abc<img><img>defדהו
 298     </div>
 299
 300     <div class="test">
 301         abcאבג<span>דהו</span>
 302     </div>
 303
 304     <div class="test">
 305         אבגabc<span>def</span>
 306     </div>
 307
 308     <div class="test">
 309         ab<span>cאבגdef</span>
 310     </div>
 311
 312     <div class="test">
 313         אב<span>גabcדהו</span>
 314     </div>
 315
 316     <div class="test">
 317         abc<span>אבגdef</span>
 318     </div>
 319
 320     <div class="test">
 321         אבג<span>abcדהו</span>
 322     </div>
 323
 324     <div class="test">
 325         abcאdef
 326     </div>
 327
 328     <div class="test">
 329         אבגaדהו
 330     </div>
 331
 332     <div class="test">
 333         abcאבג<span>def</span>
 334     </div>
 335
 336     <div class="test">
 337         אבגabc<span>דהו</span>
 338     </div>
 339
 340     <div class="test">
 341         abcא<span>בגdef</span>
 342     </div>
 343
 344     <div class="test">
 345         אבגa<span>bcדהו</span>
 346     </div>
 347
 348     <div class="test" style="white-space: pre;">abc<!-- -->
 349 <!-- -->def</div>
 350
 351     <div class="test" style="white-space: pre;">אבג<!-- -->
 352 <!-- -->דהו</div>
 353
 354     <div class="test">
 355         <span dir="rtl">abcקקק123נננdef</span>
 356     </div>
 357
 358     </div>
 359
 360     <pre id="console"></pre>
 361 </body>