third_party/WebKit/LayoutTests/editing/spelling/inline_spelling_markers.html

   1 <html>
   2 <head>
   3 <script src="../../resources/js-test.js"></script>
   4 <script src="../../editing/editing.js"></script>
   5 <style>
   6 body { overflow:hidden; }
   7
   8 .testDiv {
   9     width: 200px;
  10     height: 20px;
  11     border: 1px solid black;
  12     white-space: nowrap;
  13     overflow: hidden;
  14 }
  15
  16 .forcertl {
  17     direction: rtl;
  18     unicode-bidi: bidi-override;
  19 }
  20
  21 .ellipses {
  22     text-overflow:ellipsis;
  23 }
  24
  25 </style>
  26
  27 </head>
  28 <body>
  29 <script>
  30 description("This tests the correct placement of inline spelling and grammar "
  31     + "markers in text. Spelling markers should line up exactly under misspelled "
  32     + "words in all cases.");
  33
  34 jsTestIsAsync = true;
  35
  36 if (window.internals) {
  37     internals.settings.setUnifiedTextCheckerEnabled(true);
  38     internals.settings.setAsynchronousSpellCheckingEnabled(true);
  39 }
  40
  41 if (window.testRunner)
  42     testRunner.dumpAsTextWithPixelResults();
  43
  44 </script>
  45
  46 LTR
  47 <div id="testLTR" class="testDiv" contenteditable="true">the the adlj adaasj sdklj. there there</div>
  48
  49 RTL
  50 <div id="testRTL" class="testDiv forcertl" contenteditable="true">the the adlj adaasj sdklj. there there</div>
  51
  52 LTR (text-overflow:ellipses):
  53 <div id="testLTREllipses" class="testDiv ellipses" contenteditable="true">the the adlj adaasj sdklj. there there</div>
  54
  55 RTL (text-overflow:ellipses):
  56 <div id="testRTLEllipses" class="testDiv forcertl ellipses" contenteditable="true">the the adlj adaasj sdklj. there there</div>
  57
  58 <script>
  59 function moveCursorOverAllWords(id)
  60 {
  61     div = document.getElementById(id);
  62     div.focus();
  63
  64     debug(id + ":");
  65     // Move cursor over all words so inline spellchecking is activated for all.
  66     for (var i = 0; i < div.innerHTML.length; i++)
  67         moveSelectionForwardByWordCommand();
  68
  69     verifyMarkers();
  70 }
  71
  72 function verifyMarkers()
  73 {
  74     if (!window.internals)
  75         return done();
  76
  77     // Take care of spelling markers first.
  78     shouldBecomeEqual('internals.hasSpellingMarker(document, 8, 4)', 'true', function() { // Verifies 'adlj'.
  79         shouldBecomeEqual('internals.hasSpellingMarker(document, 13, 6)', 'true', function() { // Verifies 'adaasj'.
  80             shouldBecomeEqual('internals.hasSpellingMarker(document, 20, 5)', 'true', verifyGrammarMarkers) // Verifies 'sdklj'.
  81         })
  82     });
  83
  84     function verifyGrammarMarkers() {
  85         shouldBecomeEqual('internals.hasGrammarMarker(document, 4, 3)', 'true', function() { // Verifies second 'the'.
  86             shouldBecomeEqual('internals.hasGrammarMarker(document, 33, 5)', 'true', function() { // Verifies second 'there'.
  87                 // Markers of next element can not be found after modification selection without blur event.
  88                 div.blur();
  89                 done();
  90             })
  91         });
  92     }
  93 }
  94
  95 var tests = [ function() { moveCursorOverAllWords('testLTR'); },
  96               function() { moveCursorOverAllWords('testRTL'); },
  97               function() { moveCursorOverAllWords('testLTREllipses'); },
  98               function() { moveCursorOverAllWords('testRTLEllipses'); } ];
  99
 100 function done()
 101 {
 102     var next = tests.shift();
 103     if (next)
 104         return window.setTimeout(next, 0);
 105
 106     finishJSTest();
 107 }
 108 done();
 109 </script>
 110 </body>
 111 </html>