<html>
<head>
<script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function animationEnded() {
        var result = document.getElementById("result");
        var square = document.getElementById('square');
        var opacity = document.defaultView.getComputedStyle(square, null).getPropertyValue('opacity');

        if (opacity == 0.5)
            result.innerHTML = "PASS - Test working";
        else
            result.innerHTML = "FAIL - A opacity value must be 0.5";


        if(window.testRunner)
            testRunner.notifyDone();
    }
</script>
<style>
    body {
        margin-left: 100px;
        margin-top: 50px;
    }
    #square {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 100px;
        background-color: blue;
        opacity: 0;
        -webkit-animation-name: pop;
        -webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
    }
    @-webkit-keyframes pop {
        0% { -webkit-transform: scale(0.05); opacity: 0; }
        33% { -webkit-transform: scale(1.00); opacity: 1; }
        66% { -webkit-transform: scale(1.66); opacity: 1; }
        100% { -webkit-transform: scale(0.95); opacity: 0.5; }
    }
</style>
</head>

<body>
    <div id="square" onwebkitanimationend="animationEnded();"></div>
    <div id="result"></div>
</body>
</html>