| <!DOCTYPE HTML> |
| <meta charset="utf8"> |
| <style> |
| .testTextRun { |
| font-size: 35px; |
| } |
| </style> |
| <svg width="600px" height="500px" xmlns="http://www.w3.org/2000/svg"> |
| <g id="highlightContainer"/> |
| |
| <!-- Two surrogate pairs --> |
| <text x="50" y="50" class="testTextRun" font-family="cursive">🎶🎶</text> |
| <text x="200" y="50" class="testTextRun" font-family="serif">🎶🎶</text> |
| <text x="350" y="50" class="testTextRun" font-family="sans-serif">🎶🎶</text> |
| |
| <!-- Surrogate pair with a combining diacritic --> |
| <text x="50" y="125" class="testTextRun" font-family="cursive">𐐷̌ v̌</text> |
| <text x="200" y="125" class="testTextRun" font-family="serif">𐐷̌ v̌</text> |
| <text x="350" y="125" class="testTextRun" font-family="sans-serif">𐐷̌ v̌</text> |
| |
| <!-- Surrogate pair with a combining diacritic in RTL --> |
| <text x="150" y="250" class="testTextRun" direction="rtl" font-family="cursive">🎶𐐷̌🎶</text> |
| <text x="300" y="250" class="testTextRun" direction="rtl" font-family="serif">🎶𐐷̌🎶</text> |
| <text x="450" y="250" class="testTextRun" direction="rtl" font-family="sans-serif">🎶𐐷̌🎶</text> |
| |
| <!-- Surrogate pair with a combining diacritic in RTL with override --> |
| <text x="150" y="350" class="testTextRun" direction="rtl" unicode-bidi="bidi-override" font-family="cursive">🎶𐐷̌🎶</text> |
| <text x="300" y="350" class="testTextRun" direction="rtl" unicode-bidi="bidi-override" font-family="serif">🎶𐐷̌🎶</text> |
| <text x="450" y="350" class="testTextRun" direction="rtl" unicode-bidi="bidi-override" font-family="sans-serif">🎶𐐷̌🎶</text> |
| </svg> |
| <script src="resources/highlightGlyphs.js"></script> |
| <script> |
| highlightGlyphs(document.querySelectorAll('.testTextRun'), highlightContainer); |
| </script> |
