compositor-animation-style-change.html

<html>
<style>
div {
    position: relative;
    height: 100px;
    width: 100px;
    background: green;
}
</style>
<body>
<p>
Each section below has two boxes, the top runs as if no style change, the bottom
runs with on-the-fly style/source/target changes.
</p>
<hr>

Layer attach/detach test (style.display block -> inline -> block)
<br>
<div id="test1_ref">REFERENCE</div>
<div id="test1_reattach">STYLE CHANGE</div>
<hr>

Layer attach/detach test (style.display block -> none -> block), source, target.
<br>
<div id="test2_ref">REFERENCE</div>
<div id="test2_reattach">STYLE CHANGE</div>
<div id="test2_target">TARGET CHANGE</div>
<hr>

<script>
var opacityKeyframes = [
    {opacity: 0},
    {opacity: 1}
    ];

var player1_ref = test1_ref.animate(opacityKeyframes, {
        duration: 5000,
        delay: 100,
    });
var player1_reattach = test1_reattach.animate(opacityKeyframes, {
        duration: 5000,
        delay: 100,
    });

test1_reattach.style.display = 'inline'
test1_reattach.style.display = 'block'

var leftKeyframes = [
    {left: '100px'},
    {left: '600px'}
    ];
var translateKeyframes = [
    {transform: 'translateX(100px)'},
    {transform: 'translateX(600px)'}
    ];
var reverseTranslateKeyframes = [
    {transform: 'translateX(600px)'},
    {transform: 'translateX(100px)'}
    ];

var player2_ref = test2_ref.animate(leftKeyframes, {
        duration: 5000,
        delay: 100,
    });
var player2_reattach = test2_reattach.animate(translateKeyframes, {
        duration: 5000,
        delay: 100,
    });

test2_reattach.style.display = 'none'
test2_reattach.style.display = 'block'

setTimeout(function() {
    test1_reattach.style.display = 'inline'
    test2_reattach.style.display = 'none'
}, 500);

setTimeout(function() {
    test1_reattach.style.display = 'block'
    test2_reattach.style.display = 'block'
}, 2000);

setTimeout(function() {
    var animation = new KeyframeEffect(test2_reattach,
        reverseTranslateKeyframes, 5000);
    player2_reattach.source = animation;
}, 3000);

setTimeout(function() {
    var animation = new KeyframeEffect(test2_target,
        reverseTranslateKeyframes, 5000);
    player2_reattach.source = animation;
}, 4000);

</script>

</body>
</html>
chromium/third_party/blink/manual_tests/animation/compositor-animation-style-change.html
