<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: 'Litherum';
    src: url("./resources/Litherum.svg") format(svg)
}
div {
    font-family: 'Litherum';
    -webkit-text-decoration-skip: none;
    -webkit-text-decoration-color: green;
    width: 1px;
    height: 1px;
}
</style>
</head>
<body>
This test makes sure that underlines contribute to visual overflow properly.
The SVG font has a descent of 0, which means that underlines will
lie outside of the glyph boundaries. The test makes sure of two things:
<ol>
<li>(Left box) That moving a decoration that contributes to overflow from
the top of a line to the bottom is redrawn as if it was always on the bottom
side</li>
<li>(Right box) That moving a decoration that contributes to overflow to a position where
it does not contribute to overflow anymore redraws as if it had never
contributed to overflow</li>
</ol>
<div style="position: relative; height: 45px;">
<div id="wavyoverline" style="font-size: 100px; position: absolute; left: 60px; top: 20px; -webkit-text-decoration-style: wavy; text-decoration: overline; -webkit-text-underline-position: under">|</div>
<div id="underline" style="font-size: 100px; position: absolute; left: 180px; top: 20px; text-decoration: underline; -webkit-text-underline-position: under">|</div>
</div>
<script>
function applyUnderline() {
    document.getElementById('wavyoverline').style.textDecoration = "underline";
    document.getElementById('wavyoverline').style.webkitTextDecorationStyle = "solid";
    document.getElementById('underline').style.textDecoration = "line-through";
    if (window.testRunner)
        testRunner.notifyDone();
}

if (window.testRunner)
    testRunner.waitUntilDone();
window.setTimeout(applyUnderline, 17);
</script>
</body>
</html>