<!DOCTYPE html>

<head>
    <style>
        .region {
            -webkit-flow-from: flow;
            border: 2px solid blue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
        #region2 {
            margin-top: 10px;
        }
        .content {
            -webkit-flow-into: flow;
            background-color: green;
            width: 100px;
            height: 100px;
        }

        .content:hover {
            background-color: red;
        }
    </style>
</head>

<script type="text/javascript">
    if (window.testRunner)
        testRunner.waitUntilDone();

    function beginTest() {
        if (window.eventSender) {

            // move mouse on the hover test object
            var content2 = document.getElementById("region2");
            eventSender.mouseMoveTo(content2.offsetLeft + 20, content2.offsetTop + 20);
            eventSender.mouseDown(0);

            testRunner.notifyDone();
        }
    }
</script>

<body onload="beginTest()">
    <a href="https://bugs.webkit.org/show_bug.cgi?id=133111">Bug 133111 - [CSS Regions] Content flowed directly into the flow thread that ends up in the second region is not properly repainted</a>
    <p>When hovered, the <span style="color:green"><b>green</b></span> content should turn <span style="color:red"><b>red</b></span>.</p>
    <div class="region" id="region1"></div>
    <div class="region" id="region2"></div>
    <div class="content" id="content1"></div>
    <div class="content" id="content2"></div>
</body>