third_party/WebKit/LayoutTests/svg/custom/text-match-highlight.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <script>
   5     function highlightRange(id, start, end, active) {
   6       var range = document.createRange();
   7       var elem = document.getElementById(id).firstChild;
   8       range.setStart(elem, start);
   9       range.setEnd(elem, end);
  10       window.internals.addTextMatchMarker(range, active);
  11       window.internals.setMarkedTextMatchesAreHighlighted(document, true);
  12     }
  13     function highlightTest() {
  14       highlightRange('1', 0, 6, false);
  15       highlightRange('2', 0, 6, false);
  16       highlightRange('3', 0, 6, false);
  17       highlightRange('4', 0, 6, false);
  18       highlightRange('5', 0, 6, false);
  19       highlightRange('svg1', 8, 14, true);
  20       highlightRange('svg2', 0, 6, false);
  21       highlightRange('svg3', 0, 6, false);
  22       highlightRange('svg3', 26, 32, false);
  23     }
  24   </script>
  25 </head>
  26 <body onload="highlightTest()">
  27   Test for crbug.com/56580: There should be 9 highlighted instances of "<span id="1">findme</span>". The 6th higlighted
  28     instance should be active.<br/><br/>
  29
  30   Lorum ipsum <span id="2">findme</span> lorum ipsum <span id="3">findme</span><span id="4">findme</span> lorum.<br/>
  31   longtext<span id="5">findme</span>noyou.<br/>
  32   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="300">
  33     <defs>
  34       <path id="textpath"
  35             d="M 100 200
  36                C 200 100 300   0 400 100
  37                C 500 200 600 300 700 200
  38                C 800 100 900 100 900 100" />
  39     </defs>
  40     <text x="10" y="50" id="svg1">Can you findme in this boring text?</text>
  41     <text x="10" y="100" style="font-size: 10px; font-family: monospace;" id="svg2">Findme in a typewriter!</text>
  42     <g transform="scale(0.3) translate(0 400)">
  43       <text font-family="Verdana" font-size="42.5" fill="blue" >
  44         <textPath xlink:href="#textpath" id="svg3">Findme on a path! Did you findme?</textPath>
  45       </text>
  46     </g>
  47   </svg>
  48 </body>
  49 </html>