<!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 that
removing decorations which contribute to visual overflow matches how the
text would have been drawn as if the decorations had never existed.
<div style="position: relative; height: 45px;">
<div id="underline" style="position: absolute; left: 0px; top: 0px; text-decoration: underline;">|</div>
<div id="underlineunder" style="position: absolute; left: 20px; top: 0px; -webkit-text-underline-position: under; text-decoration: underline">|</div>
<div id="linethrough" style="position: absolute; left: 40px; top: 0px; text-decoration: line-through;">|</div>
<div id="overline" style="position: absolute; left: 60px; top: 0px; text-decoration: overline;">|</div>

<div id="wavyunderline" style="position: absolute; left: 0px; top: 20px; -webkit-text-decoration-style: wavy; text-decoration: underline;">|</div>
<div id="wavyunderlineunder" style="position: absolute; left: 20px; top: 20px; -webkit-text-underline-position: under; -webkit-text-decoration-style: wavy; text-decoration: underline;">|</div>
<div id="wavylinethrough" style="font-size: 1px; position: absolute; left: 40px; top: 20px; -webkit-text-decoration-style: wavy; text-decoration: line-through;">-</div>
<div id="wavyoverline" style="position: absolute; left: 60px; top: 20px; -webkit-text-decoration-style: wavy; text-decoration: overline;">|</div>
</div>
<script>
function applyUnderline() {
    document.getElementById('underline').style.textDecoration = "none";
    document.getElementById('underlineunder').style.textDecoration = "none";
    document.getElementById('linethrough').style.textDecoration = "none";
    document.getElementById('overline').style.textDecoration = "none";
    document.getElementById('wavyunderline').style.textDecoration = "none";
    document.getElementById('wavyunderlineunder').style.textDecoration = "none";
    document.getElementById('wavylinethrough').style.textDecoration = "none";
    document.getElementById('wavyoverline').style.textDecoration = "none";
    if (window.testRunner)
        testRunner.notifyDone();
}

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