| Index: ManualTests/animation/compositor-animation-style-change.html
|
| diff --git a/ManualTests/animation/compositor-animation-style-change.html b/ManualTests/animation/compositor-animation-style-change.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..3a7e991e991650c232937671170a62536624c61c
|
| --- /dev/null
|
| +++ b/ManualTests/animation/compositor-animation-style-change.html
|
| @@ -0,0 +1,98 @@
|
| +<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 Animation(test2_reattach, reverseTranslateKeyframes,
|
| + 5000);
|
| + player2_reattach.source = animation;
|
| +}, 3000);
|
| +
|
| +setTimeout(function() {
|
| + var animation = new Animation(test2_target, reverseTranslateKeyframes,
|
| + 5000);
|
| + player2_reattach.source = animation;
|
| +}, 4000);
|
| +
|
| +</script>
|
| +
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 946323002:
Animations: Introduce compositor AnimationPlayer and AnimationTimeline. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master