<!DOCTYPE html>
<style>
    div {
        display: block;
        width: 400px;
        height: 100px;
        color: blue;
    }
    #underlineHover:hover {
        text-decoration: underline;
    }
    #underlineNoHover:hover {
        text-decoration: underline;
    }
</style>

<div id="underlineHover">
<span>When</span> <span>hovered, </span><span>there</span> <span>should</span>   <span>  be  </span> <span>no</span> <span>gaps</span> <span>in</span> <span>the</span> <span>underline.</span>
</div>

<div id="underlineNoHover">
<span>When</span> <span>not hovered, </span><span>there</span> <span>should</span>   <span>  be  </span> <span>no</span> <span>underlines.</span>
</div>

<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
if (window.eventSender)
    eventSender.mouseMoveTo(underlineNoHover.offsetLeft + 10, underlineNoHover.offsetTop + 10);
runAfterLayoutAndPaint(function() {
    if (window.eventSender)
        eventSender.mouseMoveTo(underlineHover.offsetLeft + 10, underlineHover.offsetTop + 10);
}, true);
</script>