<!DOCTYPE html>
<style id="emptyStyle"></style>
<style>
@font-face {
    font-family: dummy;
    src: local(dummy);
}

#animated {
    font-family: serif;
    transition: background-color 1s;
    background: white;
}

#animated.green {
    background-color: green;
}
</style>
<p>PASS if no assert.</p>
<div id="animated"></div>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

onload = function() {
    animated.className = "green";
    requestAnimationFrame(function(){
        requestAnimationFrame(function(){
            requestAnimationFrame(function(){
                emptyStyle.parentNode.removeChild(emptyStyle);
                if (window.testRunner)
                    testRunner.notifyDone();
            });
        });
    });
};
</script>