text-decoration-skip-ink.html | Explore in Territory

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .decoration {
    font-family: Ahem, sans-serif;
    font-size: 24px;
    text-decoration-color: green;
    color: #0F0F0F;
    }

    .all {
        text-decoration-line: underline overline line-through;
        -webkit-text-decoration-line: underline overline line-through;
    }

    .solid {
    text-decoration-style: solid;
    }

    .double {
    text-decoration-style: double;
    }

    .dotted {
    text-decoration-style: dotted;
    }

    .dashed {
    text-decoration-style: dashed;
    }

    .wavy {
    text-decoration-style: wavy;
    }

    .gridcell {
    flex: 1;
    }

    .vert {
    writing-mode: vertical-lr;
    }

    .upright {
    text-orientation: upright;
    }

    .red {
    text-decoration-color: red;
    }
</style>
<!-- Green line decorations should skip glyph shapes above and below the baseline,
    red line decoration show the upright in vertical case where this does not work yet, see crbug.com/655154 -->
<div style="display: flex;">
    <div class="gridcell">
        <p class="decoration all solid">Ép Ép Ép</p>
        <p class="decoration all double">Ép Ép Ép</p>
        <p class="decoration all dashed">Ép Ép Ép</p>
        <p class="decoration all dotted">Ép Ép Ép</p>
        <p class="decoration all wavy">Ép Ép Ép</p>
    </div>
    <div class="gridcell vert">
        <p class="decoration all solid">Ép Ép Ép</p>
        <p class="decoration all double">Ép Ép Ép</p>
        <p class="decoration all dashed">Ép Ép Ép</p>
        <p class="decoration all dotted">Ép Ép Ép</p>
        <p class="decoration all wavy">Ép Ép Ép</p>
    </div>
    <div class="gridcell vert">
        <p><span class="decoration all solid">Ép </span><span class="decoration all solid red upright">Ép </span><span class="decoration all solid">Ép</span></p>
        <p><span class="decoration all double">Ép </span><span class="decoration all double red upright">Ép </span><span class="decoration all double">Ép</span></p>
        <p><span class="decoration all dashed">Ép </span><span class="decoration all dashed red upright">Ép </span><span class="decoration all dashed">Ép</span></p>
        <p><span class="decoration all dotted">Ép </span><span class="decoration all dotted red upright">Ép </span><span class="decoration all dotted">Ép</span></p>
        <p><span class="decoration all wavy">Ép </span><span class="decoration all wavy red upright">Ép </span><span class="decoration all wavy">Ép</span></p>
    </div>
</div>
chromium/third_party/blink/web_tests/fast/css3-text/css3-text-decoration/text-decoration-skip-ink.html
