<!DOCTYPE>
<html>
<head>
<style>
    #background {
        width: 200px;
        height: 200px;
        display: block;
        background-color: green;
    }
    .overlay {
        width: 50px;
        height: 50px;
        background-color: rgba(255, 255, 255, 1);
        -webkit-transition: opacity 1s;
    }

    #popup {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 6px;
        -webkit-transition: -webkit-transform 1s;
    }

    .transparent {
        opacity: 0;
    }

    [hidden] {
        display: none;
    }

    .overlay.transparent .page {
        transform: scale(1) translateY(0px);
    }

</style>
<script type="text/javascript" charset="utf-8">
    function runTest()
    {
        var solid_color_overlay = document.getElementById("solid_color_overlay");
        solid_color_overlay.removeAttribute('hidden');

        var popup = document.getElementById("popup");
        popup.removeAttribute('hidden');

        // NOTE: This is a hacky way to force the container to layout which
        // will allow us to trigger the webkit transition.
        // See crbug.com/324685
        solid_color_overlay.scrollTop;
        solid_color_overlay.classList.remove('transparent');

        // dump the pixel in the middle of the transition
        if (window.internals) {
            window.internals.forceCompositingUpdate(document);
            window.internals.pauseAnimations(0.5);
        }
        triggerPixelResults();
    }

    function triggerPixelResults()
    {
        parent.postMessage("TriggerPixelResults", '*');
    }

    window.addEventListener('load', runTest, false);
</script>
</head>
<body>
<div id="background">
    <div id="solid_color_overlay" class="overlay transparent" hidden=true>
        <div id="popup" class="page" hidden=true></div>
    </div>
</div>
</body>
</html>