<!doctype html>
<html lang="en">
<head>
    <script src="../../../resources/js-test-pre.js"></script>
    <title>Accelerated compositing due to 3D transforms</title>
    <style>
        body {
            -webkit-perspective: 400px;
        }
        div.region {
            margin: 3em;
        }
        div.region:last-child {
            margin-left: 5em;
        }
        .region {
            -webkit-flow-from: f;
            -webkit-transform: rotateY(45deg);
        }
        .big-square {
            width: 150px;
            height: 150px;
        }
        .bordered {
            border: 2px solid black;
        }
        #content {
            -webkit-flow-into: f;
            margin-top: 40px;
            width: 1000px;
            height: 300px;
            background-color: salmon;
            border: 4px solid blue;
            border-right-width: 10px;
        }
        #content:hover
        {
            background-color: green;
        }
        #console {
            position: absolute;
            right: 10px;
            top: 0px;
        }
    </style>
</head>
<body>
    <div id="console"></div>
    
    <a class="instructions" href="https://bugs.webkit.org/show_bug.cgi?id=116833">Bug 116833 - [CSS Regions] Content overflowing a transformed region is clipped</a>
    <p class="instructions" >This test passes if the salmon box overflows the regions, has a blue border all around and turns green when hovered</p>

    <div id="content"></div>

    <div class="region big-square bordered"></div>
    <div class="region big-square bordered"></div>

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

        if (window.eventSender) {
            var elementsToHide = document.querySelectorAll(".instructions");
            for (var i=0; i<elementsToHide.length; i++)
                elementsToHide[i].style.visibility = "hidden";

            eventSender.mouseMoveTo(350, 300);
            eventSender.mouseDown(0);
            eventSender.leapForward(500);
            eventSender.mouseUp(0);

            var content = document.getElementById("content");
            var bckgColor = window.getComputedStyle(content).getPropertyValue("background-color");

            if (bckgColor == "rgb(0, 128, 0)")
                testPassed("Overflow hover event processed OK.");
            else
                testFailed("Overflow hover event FAILED to process.");
        }
        else
            document.getElementById("console").style.visibility = "hidden";
    </script>

    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>