third_party/WebKit/LayoutTests/paint/invalidation/spv2/text-match-highlight.html

   1 <!-- Based on compositing/overflow/text-match-highlight.html -->
   2 <!DOCTYPE HTML>
   3 <script src="resources/paint-invalidation-test.js"></script>
   4 <script>
   5 if (window.testRunner)
   6   testRunner.dumpAsTextWithPixelResults();
   7
   8 function highlightRange(id, start, end, active) {
   9   var range = document.createRange();
  10   var elem = document.getElementById(id).firstChild;
  11   range.setStart(elem, start);
  12   range.setEnd(elem, end);
  13   internals.addTextMatchMarker(range, active);
  14 }
  15 window.expectedPaintInvalidationObjects = [
  16     "LayoutText #text",
  17     "InlineTextBox 'findme'",
  18     "LayoutText #text",
  19     "InlineTextBox 'findme'",
  20     "LayoutText #text",
  21     "InlineTextBox 'findme'",
  22     "LayoutText #text",
  23     "InlineTextBox 'findme'",
  24     "LayoutText #text",
  25     "InlineTextBox 'findme'",
  26     "LayoutSVGInlineText #text",
  27     "InlineTextBox 'Can you findme in this boring text?'",
  28     "LayoutSVGInlineText #text",
  29     "InlineTextBox 'Findme in a typewriter!'",
  30     "LayoutSVGInlineText #text",
  31     "InlineTextBox 'Findme on a path! Did you findme?'",
  32 ];
  33 function paintInvalidationTest() {
  34   highlightRange('1', 0, 6, false);
  35   highlightRange('2', 0, 6, false);
  36   highlightRange('3', 0, 6, false);
  37   highlightRange('4', 0, 6, false);
  38   highlightRange('5', 0, 6, false);
  39   highlightRange('svg1', 8, 14, true);
  40   highlightRange('svg2', 0, 6, false);
  41   highlightRange('svg3', 0, 6, false);
  42   highlightRange('svg3', 26, 32, false);
  43   internals.setMarkedTextMatchesAreHighlighted(document, true);
  44 }
  45 if (window.internals)
  46   onload = runPaintInvalidationTest;
  47 </script>
  48 <style>
  49 body { margin: 0 }
  50 </style>
  51 Based on svg/custom/text-match-highlight.html. Here run it as a repaint test to check correctness of invalidation.<br>
  52 Automatic test requires run-layout-test. To manually test, open this file in Chrome and find 'findme' in the page.<br>
  53 There should be 9 highlighted instances of "<span id="1">findme</span>". The 6th higlighted instance should be active.<br>
  54 <div style="overflow: scroll; height: 500px">
  55   Lorum ipsum <span id="2">findme</span> lorum ipsum <span id="3">findme</span><span id="4">findme</span> lorum.<br/>
  56   longtext<span id="5">findme</span>noyou.<br/>
  57   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="300">
  58     <defs>
  59       <path id="textpath"
  60             d="M 100 200
  61                C 200 100 300   0 400 100
  62                C 500 200 600 300 700 200
  63                C 800 100 900 100 900 100" />
  64     </defs>
  65     <text x="10" y="50" id="svg1">Can you findme in this boring text?</text>
  66     <text x="10" y="100" style="font-size: 10px; font-family: monospace;" id="svg2">Findme in a typewriter!</text>
  67     <g transform="scale(0.3) translate(0 400)">
  68       <text font-family="Verdana" font-size="42.5" fill="blue" >
  69         <textPath xlink:href="#textpath" id="svg3">Findme on a path! Did you findme?</textPath>
  70       </text>
  71     </g>
  72   </svg>
  73   <div style="height: 1000px"></div>
  74 </div>
  75