<!DOCTYPE html>
<html>
    <head>
        <style>
            .circle {
                display: inline-block;
                width: 200px;
                height: 200px;
                border-radius: 100px;
                margin: 100px;
                box-shadow : 0 0 50px currentColor;
                background: currentColor;
                color: white;
            }
            .animation {
                transition: all 0.25s linear;
            }
        </style>
        <script src="../../resources/js-test.js"></script>
    </head>
    <body>
        <div id="circle1" class="circle" data-from="white" data-to="rgb(255, 0, 0)">
            &nbsp;
        </div>
        <div id="circle2" class="circle" data-from="white" data-to="rgb(0, 128, 0)">
            &nbsp;
        </div>
        <div id="circle3" class="circle" data-from="white" data-to="rgb(64, 64, 255)">
            &nbsp;
        </div>
        <script>
            if (window.testRunner)
                testRunner.waitUntilDone();

            // Force a layout so that changing the classname below causes an animation.
            document.body.offsetHeight;

            var elements = document.getElementsByClassName('circle');
            for (var el, i = 0; el = elements[i]; i++) {
                el.style.color = el.dataset.from;
            }
            for (var el, i = 0; el = elements[i]; i++) {
                el.classList.add('animation');
                el.addEventListener('transitionend', onTransitionend, false /* capture */ );
                el.style.color = el.dataset.to;
            }

            var RGB_REGEXP = /rgb\([0-9]+, [0-9]+, [0-9]+\)/;
            var elementColors = {};
            var timer;

            function onTransitionend(e)
            {
                var style = window.getComputedStyle(e.target);
                elementColors[e.target.id] = style.boxShadow.match(RGB_REGEXP);
                if (typeof timer == 'undefined')
                    timer = window.setTimeout(finish, 0);
            }

            function testColor(id)
            {
                var expectedColor = document.getElementById(id).dataset.to;
                var actualColor = elementColors[id];
                if (expectedColor == actualColor)
                    testPassed(id + ' has ' + expectedColor + ' shadow as expected.');
                else
                    testFailed(id + ' has ' + actualColor + ' shadow, expected ' + expectedColor + '.');
            }

            function finish()
            {
                testColor('circle1');
                testColor('circle2');
                testColor('circle3');
                if (window.testRunner)
                    testRunner.notifyDone();
            }
        </script>
    </body>
</html>