| <!DOCTYPE HTML> |
| <script src="../resources/text-based-repaint.js"></script> |
| <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); |
| } |
| function repaintTest() { |
| 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'); |
| internals.setMarkedTextMatchesAreHighlighted(document, true); |
| } |
| if (window.internals) |
| onload = runRepaintAndPixelTest; |
| </script> |
| <style> |
| body { margin: 0 } |
| </style> |
| Based on svg/custom/text-match-highlight.html. Here run it as a repaint test to check correctness of invalidation.<br> |
| Automatic test requires run-layout-test. To manually test, open this file in Chrome and find 'findme' in the page.<br> |
| There should be 9 highlighted instances of "<span id="1">findme</span>". The 6th higlighted instance should be active.<br> |
| <div style="overflow: scroll; height: 500px"> |
| 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">Can you findme in this boring 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" > |
| <textPath xlink:href="#textpath" id="svg3">Findme on a path! Did you findme?</textPath> |
| </text> |
| </g> |
| </svg> |
| <div style="height: 1000px"></div> |
| </div> |
