<!DOCTYPE html>
<script src="resources/text-based-repaint.js"></script>
<style>
    div {
        display: block;
        width: 450px;
        height: 100px;
        color: red;
    }
    div:hover {
        color: green;
        text-decoration: underline;
    }
</style>

<!-- Ensure the optimization in https://chromium.googlesource.com/chromium/src/+/b5569d06160fcc6a907d3f41416c7ab1bb4fbcda doesn't break. -->
<div id="div">
This test <img src="resources/bluesquare.png" width="10px" height="10px"> passes if <span>only</span> text is invalidated and <img src="resources/bluesquare.png" width="10px" height="10px"> no <img src="resources/bluesquare.png" width="10px" height="10px"> images.
</div>

<script>
onload = runRepaintAndPixelTest;
function repaintTest() {
    if (window.eventSender);
        eventSender.mouseMoveTo(div.offsetLeft + 5, div.offsetTop + 5);
    finishRepaintTest();
}
</script>