third_party/WebKit/LayoutTests/editing/selection/doubleclick-beside-cr-span.html

   1 <html>
   2 <head>
   3 <script>
   4 if (window.testRunner) {
   5      testRunner.dumpAsText();
   6      internals.settings.setSmartInsertDeleteEnabled(false);
   7      internals.settings.setSelectTrailingWhitespaceEnabled(true);
   8 }
   9
  10 function getPositionOfNode(id)
  11 {
  12     var n = document.getElementById(id);
  13     var pos = {x: 0, y: 0};
  14
  15     while (n) {
  16         pos.x += n.offsetLeft + n.clientLeft;
  17         pos.y += n.offsetTop + n.clientTop;
  18         n = n.offsetParent;
  19     }
  20     return pos;
  21 }
  22
  23 function doubleClickPosition(pos)
  24 {
  25     // Our test cases will have at most a single leading tab or four spaces,
  26     // followed by a word which is wider than 4 "X"s.
  27     // So, pos.x + CHAR_WIDTH * 4 always hits the words.
  28     eventSender.mouseMoveTo(pos.x + CHAR_WIDTH * 4, pos.y + LINE_HEIGHT / 2);
  29     eventSender.mouseDown();
  30     eventSender.leapForward(1);
  31     eventSender.mouseUp();
  32     eventSender.leapForward(50);
  33     eventSender.mouseDown();
  34     eventSender.leapForward(1);
  35     eventSender.mouseUp();
  36 }
  37
  38 function defocus()
  39 {
  40     doubleClickPosition({x:0, y:0});
  41 }
  42
  43 function findParentDiv(spanId)
  44 {
  45     var n = document.getElementById(spanId);
  46     while (n) {
  47       var parent = n.parentNode;
  48       if (parent && parent.tagName == "DIV")
  49         return parent;
  50       n = parent;
  51     }
  52
  53     return null;
  54 }
  55
  56 function makeParentBlockEditable(spanId)
  57 {
  58     var parent = findParentDiv(spanId);
  59     parent.contentEditable = true;
  60 }
  61
  62 function hideCaseBlockFor(spanId)
  63 {
  64     var n = document.getElementById(spanId);
  65     while (n) {
  66       n = n.parentNode;
  67       if (n && n.className == "case") {
  68         n.style.display = "none";
  69         n.style.offsetTop;
  70         return;
  71       }
  72     }
  73 }
  74
  75 function doTest(testId, expectedText, givenClickPosition)
  76 {
  77     // Simulate a double click.
  78     defocus()
  79     var pos = givenClickPosition || getPositionOfNode(testId);
  80     doubleClickPosition(pos);
  81
  82     // Get the text of the current selection.
  83     var sel = window.getSelection();
  84     var actualText = sel.getRangeAt(0).toString();
  85
  86     if (expectedText == actualText) {
  87         log("Passed " + testId);
  88     } else {
  89         log("Failed " + testId);
  90         log("  Expected: " + expectedText);
  91         log("  Actual: " + actualText);
  92     }
  93
  94     // Run the same case with contentEditable enabled.
  95     makeParentBlockEditable(testId);
  96
  97     defocus();
  98     doubleClickPosition(pos);
  99
 100     sel = window.getSelection();
 101     actualText = sel.getRangeAt(0).toString();
 102
 103     if (expectedText == actualText) {
 104         log("Passed " + testId + " (with contentEditable)");
 105     } else {
 106         log("Failed " + testId + " (with contentEditable)");
 107         log("  Expected: " + expectedText);
 108         log("  Actual: " + actualText);
 109     }
 110
 111     // Hide a container for the case to workaround limited window size
 112     hideCaseBlockFor(testId);
 113 }
 114
 115 function log(msg)
 116 {
 117     var l = document.getElementById('log');
 118     l.appendChild(document.createTextNode(msg));
 119     l.appendChild(document.createElement('br'));
 120 }
 121
 122 function initConstants()
 123 {
 124    var heightMeasure = document.getElementById("heightMeasure");
 125    LINE_HEIGHT = heightMeasure.offsetHeight;
 126    LINE_LEFT   = heightMeasure.offsetLeft + heightMeasure.clientLeft;
 127    CHAR_WIDTH  = heightMeasure.offsetWidth;
 128    heightMeasure.style.display = "none"; // hide for readable test result
 129 }
 130
 131 function getPositionOfNextLineHeadOf(spanId)
 132 {
 133    var pos = getPositionOfNode(spanId)
 134    pos.x  = LINE_LEFT;
 135    pos.y += LINE_HEIGHT;
 136    return pos;
 137 }
 138
 139 function runTests()
 140 {
 141     initConstants();
 142
 143     if (window.testRunner) {
 144         doTest("totest_minimum", "select1");
 145         // We may have to make EditorClient::isSelectTrailingWhitespaceEnabled false on
 146         // DumpRenderTree to clarify cases...
 147         doTest("totest_before_after", "select2 ");
 148
 149         doTest("totest_linebreak_out", "select3\n");
 150         doTest("totest_tab_out", "select4\t");
 151         doTest("totest_multiple_whitespaces_out", "select5 ");
 152         doTest("totest_linebreak_in", "select6\n");
 153         doTest("totest_tab_in", "select7\t");
 154         doTest("totest_multiple_whitespaces_in", "select8 ");
 155
 156         doTest("totest_multiple_word_in_span", "select9 ");
 157         doTest("totest_word_before_here_in_line", "select10 ");
 158         doTest("totest_span_first_half", "select11 ");
 159         doTest("totest_span_second_half", "selectHere12 ");
 160
 161         doTest("totest_linebreak_out_pre", "select1");
 162         doTest("totest_tab_out_pre", "select2\t");
 163         doTest("totest_multiple_whitespaces_out_pre", "select3    ");
 164         doTest("totest_linebreak_in_pre", "select4", getPositionOfNextLineHeadOf("totest_linebreak_in_pre"));
 165         doTest("totest_tab_in_pre", "select5\t");
 166         doTest("totest_multiple_whitespaces_in_pre", "select6    ");
 167
 168         doTest("totest_linebreak_out_prewrap", "select1");
 169         doTest("totest_tab_out_prewrap", "select2\t");
 170         doTest("totest_multiple_whitespaces_out_prewrap", "select3    ");
 171         doTest("totest_linebreak_in_prewrap", "select4", getPositionOfNextLineHeadOf("totest_linebreak_in_prewrap"));
 172         doTest("totest_tab_in_prewrap", "select5\t", getPositionOfNextLineHeadOf("totest_tab_in_prewrap"));
 173         doTest("totest_multiple_whitespaces_in_prewrap", "select6    ", getPositionOfNextLineHeadOf("totest_multiple_whitespaces_in_prewrap"));
 174
 175         doTest("totest_linebreak_out_preline", "select1\n");
 176         doTest("totest_tab_out_preline", "select2\t");
 177         doTest("totest_multiple_whitespaces_out_preline", "select3 ");
 178         doTest("totest_linebreak_in_preline", "select4\n", getPositionOfNextLineHeadOf("totest_linebreak_in_preline"));
 179         doTest("totest_tab_in_preline", "select5\t");
 180         doTest("totest_multiple_whitespaces_in_preline", "select6 ");
 181
 182         doTest("totest_linebreak_out_nowrap", "select1\n");
 183         doTest("totest_tab_out_nowrap", "select2\t");
 184         doTest("totest_multiple_whitespaces_out_nowrap", "select3 ");
 185         doTest("totest_linebreak_in_nowrap", "select4\n");
 186         doTest("totest_tab_in_nowrap", "select5\t");
 187         doTest("totest_multiple_whitespaces_in_nowrap", "select6 ");
 188
 189     }
 190 }
 191
 192
 193 </script>
 194 </head>
 195 <body onload="runTests()">
 196
 197 <p>
 198 This tests that double-clicking a word that follows newline and span
 199 </p>
 200
 201 <div class="case">
 202 <h3>minimum case</h3>
 203 <div style="width:100pt">
 204 abcd efgh ijkl mnop <b id="totest_minimum">select1</b>
 205 </div>
 206 </div>
 207
 208 <div class="case">
 209 <h3>with another word after the span</h3>
 210 <div style="width:100pt">
 211 abcd efgh ijkl mnop <b id="totest_before_after">select2</b> nottoselect
 212 </div>
 213 </div>
 214
 215 <div class="case">
 216 <h3>use linebreak as word separator (outside element)</h3>
 217 <div style="width:100pt">
 218 abcd efgh ijkl mnop
 219 <b id="totest_linebreak_out">select3</b>
 220 nottoselect
 221 </div>
 222 </div>
 223
 224 <div class="case">
 225 <h3>use tab as word separator (outside element)</h3>
 226 <div style="width:100pt">
 227 abcd efgh ijkl mnop     <b id="totest_tab_out">select4</b>      nottoselect
 228 </div>
 229 </div>
 230
 231 <div class="case">
 232 <h3>use multiple whitespaces as word separator (outside element)</h3>
 233 <div style="width:100pt">
 234 abcd efgh ijkl mnop    <b id="totest_multiple_whitespaces_out">select5</b>    nottoselect
 235 </div>
 236 </div>
 237
 238 <div class="case">
 239 <h3>use linebreak as word separator (inside element)</h3>
 240 <div style="width:100pt">
 241 abcd efgh ijkl mnop<b id="totest_linebreak_in">
 242 select6
 243 </b>nottoselect
 244 </div>
 245 </div>
 246
 247 <div class="case">
 248 <h3>use tab as word separator (inside element)</h3>
 249 <div style="width:100pt">
 250 abcd efgh ijkl mnop<b id="totest_tab_in">       select7 </b>nottoselect
 251 </div>
 252 </div>
 253
 254 <div class="case">
 255 <h3>use multiple whitespaces as word separator (inside element)</h3>
 256 <div style="width:100pt">
 257 abcd efgh ijkl mnop<b id="totest_multiple_whitespaces_in">    select8    </b>nottoselect
 258 </div>
 259 </div>
 260
 261 <div class="case">
 262 <h3>with another word in same the span</h3>
 263 <div style="width:100pt">
 264 abcd efgh ijkl mnop <b id="totest_multiple_word_in_span">select9 not</b> notyet
 265 </div>
 266 </div>
 267
 268 <div class="case">
 269 <h3>with another word before the span, in the same line</h3>
 270 <div style="width:100pt">
 271 abcd efgh ijkl mnop qrst <b id="totest_word_before_here_in_line">select10</b> notyet
 272 </div>
 273 </div>
 274
 275 <div class="case">
 276 <h3>a first half of word is inside b element</h3>
 277 <div style="width:100pt">
 278 abcd efgh ijkl mnop qrst <b id="totest_span_first_half">sel</b>ect11 notyet
 279 </div>
 280 </div>
 281
 282 <div class="case">
 283 <h3>a second half of word is inside b element</h3>
 284 <!-- We choose selectHere12 instead select12 here
 285      because <b>ect12</b> would be too short to be clicked by doubleClickPosition(). -->
 286 <div style="width:150pt">
 287 abcd efgh ijkl mnop qrst uvwx yz123 sel<b id="totest_span_second_half">ectHere12</b> notyet
 288 </div>
 289 </div>
 290
 291 <h2>cases for white-space: pre</h2>
 292 <p>
 293 Note: Here for pre, we change width value to 200 to prevent layout change on contentEditable enabled.
 294 </p>
 295
 296 <div class="case">
 297 <h3>use linebreak as word separator (outside element, white-space:pre)</h3>
 298 <div style="width:200pt;white-space:pre;">
 299 abcd efgh ijkl mnop
 300 <b id="totest_linebreak_out_pre">select1</b>
 301 nottoselect
 302 </div>
 303 </div>
 304
 305 <div class="case">
 306 <h3>use tab as word separator (outside element, white-space:pre)</h3>
 307 <div style="width:200pt;white-space:pre;">
 308 abcd efgh ijkl mnop     <b id="totest_tab_out_pre">select2</b>  nottoselect
 309 </div>
 310 </div>
 311
 312 <div class="case">
 313 <h3>use multiple whitespaces as word separator (outside element, white-space:pre)</h3>
 314 <div style="width:200pt;white-space:pre;">
 315 abcd efgh ijkl mnop    <b id="totest_multiple_whitespaces_out_pre">select3</b>    nottoselect
 316 </div>
 317 </div>
 318
 319 <div class="case">
 320 <h3>use linebreak as word separator (inside element, white-space:pre)</h3>
 321 <div style="width:200pt;white-space:pre;">
 322 abcd efgh ijkl mnop<b id="totest_linebreak_in_pre">
 323 select4
 324 </b>nottoselect
 325 </div>
 326 </div>
 327
 328 <div class="case">
 329 <h3>use tab as word separator (inside element, white-space:pre)</h3>
 330 <div style="width:200pt;white-space:pre;">
 331 abcd efgh ijkl mnop<b id="totest_tab_in_pre">   select5 </b>nottoselect
 332 </div>
 333 </div>
 334
 335 <div class="case">
 336 <h3>use multiple whitespaces as word separator (inside element, white-space:pre)</h3>
 337 <div style="width:200pt;white-space:pre;">
 338 abcd efgh ijkl mnop<b id="totest_multiple_whitespaces_in_pre">    select6    </b>nottoselect
 339 </div>
 340 </div>
 341
 342 <h2>cases for white-space: pre-wrap</h2>
 343
 344 <div class="case">
 345 <h3>use linebreak as word separator (outside element, white-space:pre-wrap)</h3>
 346 <div style="width:100pt;white-space:pre-wrap;">
 347 abcd efgh ijkl mnop
 348 <b id="totest_linebreak_out_prewrap">select1</b>
 349 nottoselect
 350 </div>
 351 </div>
 352
 353 <div class="case">
 354 <h3>use tab as word separator (outside element, white-space:pre-wrap)</h3>
 355 <div style="width:100pt;white-space:pre-wrap;">
 356 abcd efgh ijkl mnop     <b id="totest_tab_out_prewrap">select2</b>      nottoselect
 357 </div>
 358 </div>
 359
 360 <div class="case">
 361 <h3>use multiple whitespaces as word separator (outside element, white-space:pre-wrap)</h3>
 362 <div style="width:100pt;white-space:pre-wrap;">
 363 abcd efgh ijkl mnop    <b id="totest_multiple_whitespaces_out_prewrap">select3</b>    nottoselect
 364 </div>
 365 </div>
 366
 367 <div class="case">
 368 <h3>use linebreak as word separator (inside element, white-space:pre-wrap)</h3>
 369 <div style="width:100pt;white-space:pre-wrap;">
 370 abcd efgh ijkl mnop<b id="totest_linebreak_in_prewrap">
 371 select4
 372 </b>nottoselect
 373 </div>
 374 </div>
 375
 376 <div class="case">
 377 <h3>use tab as word separator (inside element, white-space:pre-wrap)</h3>
 378 <div style="width:100pt;white-space:pre-wrap;">
 379 abcd efgh ijkl mnop<b id="totest_tab_in_prewrap">       select5 </b>nottoselect
 380 </div>
 381 </div>
 382
 383 <div class="case">
 384 <h3>use multiple whitespaces as word separator (inside element, white-space:pre-wrap)</h3>
 385 <div style="width:100pt;white-space:pre-wrap;">
 386 abcd efgh ijkl mnop<b id="totest_multiple_whitespaces_in_prewrap">    select6    </b>nottoselect
 387 </div>
 388 </div>
 389
 390
 391
 392 <h2>cases for white-space: pre-line</h2>
 393
 394 <div class="case">
 395 <h3>use linebreak as word separator (outside element, white-space:pre-line)</h3>
 396 <div style="width:100pt;white-space:pre-line;">
 397 abcd efgh ijkl mnop
 398 <b id="totest_linebreak_out_preline">select1</b>
 399 nottoselect
 400 </div>
 401 </div>
 402
 403 <div class="case">
 404 <h3>use tab as word separator (outside element, white-space:pre-line)</h3>
 405 <div style="width:100pt;white-space:pre-line;">
 406 abcd efgh ijkl mnop     <b id="totest_tab_out_preline">select2</b>      nottoselect
 407 </div>
 408 </div>
 409
 410 <div class="case">
 411 <h3>use multiple whitespaces as word separator (outside element, white-space:pre-line)</h3>
 412 <div style="width:100pt;white-space:pre-line;">
 413 abcd efgh ijkl mnop    <b id="totest_multiple_whitespaces_out_preline">select3</b>    nottoselect
 414 </div>
 415 </div>
 416
 417 <div class="case">
 418 <h3>use linebreak as word separator (inside element, white-space:pre-line)</h3>
 419 <div style="width:100pt;white-space:pre-line;">
 420 abcd efgh ijkl mnop<b id="totest_linebreak_in_preline">
 421 select4
 422 </b>nottoselect
 423 </div>
 424 </div>
 425
 426 <div class="case">
 427 <h3>use tab as word separator (inside element, white-space:pre-line)</h3>
 428 <div style="width:100pt;white-space:pre-line;">
 429 abcd efgh ijkl mnop<b id="totest_tab_in_preline">       select5 </b>nottoselect
 430 </div>
 431 </div>
 432
 433 <div class="case">
 434 <h3>use multiple whitespaces as word separator (inside element, white-space:pre-line)</h3>
 435 <div style="width:100pt;white-space:pre-line;">
 436 abcd efgh ijkl mnop<b id="totest_multiple_whitespaces_in_preline">    select6    </b>nottoselect
 437 </div>
 438 </div>
 439
 440 <h2>cases for white-space: nowrap</h2>
 441 <p>
 442 Note: Although following cases have no line-breaks that had caused problem reported bug28036,
 443 we add these for comprehensiveness.
 444 </p>
 445
 446 <div class="case">
 447 <h3>use linebreak as word separator (outside element, white-space:nowrap)</h3>
 448 <div style="width:100pt;white-space:nowrap;">
 449 abcd efgh ijkl mnop
 450 <b id="totest_linebreak_out_nowrap">select1</b>
 451 nottoselect
 452 </div>
 453 </div>
 454
 455 <div class="case">
 456 <h3>use tab as word separator (outside element, white-space:nowrap)</h3>
 457 <div style="width:100pt;white-space:nowrap;">
 458 abcd efgh ijkl mnop     <b id="totest_tab_out_nowrap">select2</b>       nottoselect
 459 </div>
 460 </div>
 461
 462 <div class="case">
 463 <h3>use multiple whitespaces as word separator (outside element, white-space:nowrap)</h3>
 464 <div style="width:100pt;white-space:nowrap;">
 465 abcd efgh ijkl mnop    <b id="totest_multiple_whitespaces_out_nowrap">select3</b>    nottoselect
 466 </div>
 467 </div>
 468
 469 <div class="case">
 470 <h3>use linebreak as word separator (inside element, white-space:nowrap)</h3>
 471 <div style="width:100pt;white-space:nowrap;">
 472 abcd efgh ijkl mnop<b id="totest_linebreak_in_nowrap">
 473 select4
 474 </b>nottoselect
 475 </div>
 476 </div>
 477
 478 <div class="case">
 479 <h3>use tab as word separator (inside element, white-space:nowrap)</h3>
 480 <div style="width:100pt;white-space:nowrap;">
 481 abcd efgh ijkl mnop<b id="totest_tab_in_nowrap">        select5 </b>nottoselect
 482 </div>
 483 </div>
 484
 485 <div class="case">
 486 <h3>use multiple whitespaces as word separator (inside element, white-space:nowrap)</h3>
 487 <div style="width:100pt;white-space:nowrap;">
 488 abcd efgh ijkl mnop<b id="totest_multiple_whitespaces_in_nowrap">    select6    </b>nottoselect
 489 </div>
 490 </div>
 491
 492 <!--
 493
 494 <h2>cases for source-originated line-breaks with white-space: pre-* family</h2>
 495
 496 <div class="case">
 497 <h3>white-space:pre</h3>
 498 <div style="width:200pt;white-space:pre;background-color:lightgray;">
 499 abcd efgh ijkl mnop
 500 <b id="totest_sourcebreak_pre">select1</b>
 501 nottoselect
 502 </div>
 503 </div>
 504
 505 <h3>white-space:pre-wrap</h3>
 506 <div style="width:200pt;white-space:pre-wrap;background-color:lightgray;">
 507 abcd efgh ijkl mnop
 508 <b id="totest_sourcebreak_prewrap">select2</b>
 509 nottoselect
 510 </div>
 511 </div>
 512
 513 <h3>white-space:pre-line</h3>
 514 <div style="width:200pt;white-space:pre-line;background-color:lightgray;">
 515 abcd efgh ijkl mnop
 516 <b id="totest_sourcebreak_preline">select3</b>
 517 nottoselect
 518 </div>
 519 </div>
 520
 521 -->
 522
 523 <div><span id="heightMeasure">x</span></div>
 524
 525 <pre id="log">
 526 </pre>
 527
 528 </body>
 529 </html>