chromium/third_party/blink/web_tests/svg/custom/text-match-highlight.html

<!DOCTYPE HTML>
<html>
<head>
  <script>
    function highlightRange(id, start, end, active) {
      var range = document.createRange();
      var elem = document.getElementById(id).firstChild;
      range.setStart(elem, start);
      range.setEnd(elem, end);
      internals.addTextMatchMarker(range, active);
      internals.setMarkedTextMatchesAreHighlighted(document, true);
    }
    function highlightTest() {
      highlightRange('1', 0, 6, 'kInactive');
      highlightRange('2', 0, 6, 'kInactive');
      highlightRange('3', 0, 6, 'kInactive');
      highlightRange('4', 0, 6, 'kInactive');
      highlightRange('5', 0, 6, 'kInactive');
      highlightRange('svg1', 8, 14, 'kActive');
      highlightRange('svg2', 0, 6, 'kInactive');
      highlightRange('svg3', 0, 6, 'kInactive');
      highlightRange('svg3', 26, 32, 'kInactive');
    }
  </script>
</head>
<body onload="highlightTest()">
  Test for crbug.com/56580: There should be 9 highlighted instances of "<span id="1">findme</span>". The 6th higlighted 
    instance should be active.<br/><br/>

  Lorum ipsum <span id="2">findme</span> lorum ipsum <span id="3">findme</span><span id="4">findme</span> lorum.<br/>
  longtext<span id="5">findme</span>noyou.<br/>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="300">
    <defs>
      <path id="textpath"
            d="M 100 200
               C 200 100 300   0 400 100
               C 500 200 600 300 700 200
               C 800 100 900 100 900 100" />
    </defs>
    <text x="10" y="50" id="svg1" stroke="red">Can you findme in this stroked text?</text>
    <text x="10" y="100" style="font-size: 10px; font-family: monospace;" id="svg2">Findme in a typewriter!</text>
    <g transform="scale(0.3) translate(0 400)">
      <text font-family="Verdana" font-size="42.5" fill="blue" stroke="red" >
        <textPath xlink:href="#textpath" id="svg3">Findme on a path! Did you findme?</textPath>
      </text>
    </g>
  </svg>
</body>
</html>