third_party/WebKit/LayoutTests/editing/spelling/inline-spelling-markers-hidpi-composited.html

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