<!DOCTYPE html>
<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);
        transition: opacity 1s;
    }

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

    .transparent {
        opacity: 0;
    }

    [hidden] {
        display: none;
    }

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

</style>
<script type="text/javascript" charset="utf-8">
    'use strict';
    function runTest()
    {
        document.body.offsetHeight; // Force style recalc
        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 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) {
            internals.forceCompositingUpdate(document);
            internals.pauseAnimations(0.5);
        }
        waitForCompositor().then(() => {
            triggerPixelResults();
        });
    }

    function waitForCompositor() {
      var background = document.getElementById("background");
      return background.animate({opacity: ['1', '1']}, 1).ready;
    }

    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>