<!DOCTYPE HTML>
<meta charset="utf8">
<style>
.testTextRun {
font-size: 35px;
}
#highlightContainer rect {
fill-opacity: 0.3;
}
</style>
<svg width="600px" height="500px" xmlns="http://www.w3.org/2000/svg">
<g id="highlightContainer"/>
<!-- multiple combining diacritics in LTR -->
<text x="50" y="50" class="testTextRun" font-family="cursive">ab̌č̌</text>
<text x="200" y="50" class="testTextRun" font-family="serif">ab̌č̌</text>
<text x="350" y="50" class="testTextRun" font-family="sans-serif">ab̌č̌</text>
<!-- multiple combining diacritics in RTL -->
<text x="100" y="125" class="testTextRun" font-family="cursive" direction="rtl">‏a‏b̌‏č̌</text>
<text x="250" y="125" class="testTextRun" font-family="serif" direction="rtl">‏a‏b̌‏č̌</text>
<text x="400" y="125" class="testTextRun" font-family="sans-serif" direction="rtl">‏a‏b̌‏č̌</text>
<!-- multiple combining diacritics on ligatures in LTR -->
<!-- MacOS has differences with multiple diacritics in cursive font family so this is skipped, see: https://crbug.com/669693. -->
<!-- <text x="50" y="200" class="testTextRun" font-family="cursive">fǐ ffǐ̌</text> -->
<text x="200" y="200" class="testTextRun" font-family="serif">fǐ ffǐ̌</text>
<text x="350" y="200" class="testTextRun" font-family="sans-serif">fǐ ffǐ̌</text>
<!-- combining diacritics on ligatures in mixed bidi runs -->
<text x="50" y="275" class="testTextRun" font-family="cursive">ff̌ــلاff̌</text>
<text x="200" y="275" class="testTextRun" font-family="serif">ff̌ــلاff̌</text>
<text x="350" y="275" class="testTextRun" font-family="sans-serif">ff̌ــلاff̌</text>
<!-- combining diacritics which are wider than characters in mixed bidi runs -->
<text x="50" y="350" class="testTextRun" font-family="cursive"> ̌ﶰi̳</text>
<!-- Linux has differences with space width in the following two runs so a period is used as a workaround. -->
<text x="200" y="350" class="testTextRun" font-family="serif">.̌ﶰi̳</text>
<text x="350" y="350" class="testTextRun" font-family="sans-serif">.̌ﶰi̳</text>
</svg>
<script src="resources/highlightGlyphs.js"></script>
<script>
highlightGlyphs(document.querySelectorAll('.testTextRun'), highlightContainer);
</script>