emphasis-overlap.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/ahem.js"></script>
<style>
    div div {
      font-family: Ahem;
      font-size: 32px;
      -webkit-font-smoothing: none;
      display: inline-block;
      margin: 8px 0;
      inline-size: 4em;
    }
    .flipped { writing-mode: vertical-rl; }
    div.flipped div { display: block; margin:0 8px 0 0; }
    .over { color: blue; -webkit-text-emphasis: "m"; -webkit-text-emphasis-position: over right; }
    .under { color: green; -webkit-text-emphasis: "m"; -webkit-text-emphasis-position: under left; }
</style>
<div>
    <div>
        1111
        <br>
        <span>2222</span>
        <br>
        <span class="over">3333</span>
        <br>
        4444
    </div>
    <div>
        1111
        <br>
        <span class="under">2222</span>
        <br>
        <span>3333</span>
        <br>
        4444
    </div>
    <div>
        1111
        <br>
        <span class="under">2222</span>
        <br>
        <span class="over">3333</span>
        <br>
        4444
    </div>
</div>
<div class="flipped">
    <div>
        1111
        <br>
        <span>2222</span>
        <br>
        <span class="under">3333</span>
        <br>
        4444
    </div>
    <div>
        1111
        <br>
        <span class="over">2222</span>
        <br>
        <span>3333</span>
        <br>
        4444
    </div>
    <div>
        1111
        <br>
        <span class="over">2222</span>
        <br>
        <span class="under">3333</span>
        <br>
        4444
    </div>
</div>
chromium/third_party/blink/web_tests/virtual/text-antialias/emphasis-overlap.html
