Chromium Code Reviews Chromium Code Reviews
Issue 851693007:
Prepare for responsive CSS animations. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: ManualTests/animation/compositor-neutral-keyframes.html |
| diff --git a/ManualTests/animation/compositor-neutral-keyframes.html b/ManualTests/animation/compositor-neutral-keyframes.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..a8cb0d75f9d2e191be749a0de87f47dffb5dc82f |
| --- /dev/null |
| +++ b/ManualTests/animation/compositor-neutral-keyframes.html |
| @@ -0,0 +1,52 @@ |
| +<html> |
| +<style> |
| +div { |
| + position: relative; |
| + height: 100px; |
| + width: 100px; |
| + background: blue; |
| + transform: translateZ(0); |
|
Timothy Loh
2015/02/11 03:54:36
"will-change: transform" instead probably?
|
| + left: 0px; |
| + -webkit-animation-duration: 2s; |
| + -webkit-animation-timing-function: linear; |
| + -webkit-animation-iteration-count: 2; |
| +} |
| + |
| +.anim-left { |
| + -webkit-animation-name: anim-left; |
| + z-index: 100; |
| +} |
| + |
| +.anim-transform { |
| + -webkit-animation-name: anim-transform; |
| + z-index: 200; |
| +} |
| + |
| +@-webkit-keyframes anim-left { |
| + 100% { left: 300px; } |
| +} |
| + |
| +@-webkit-keyframes anim-transform { |
| + 100% { transform: translateX(300px); } |
| +} |
| +</style> |
| +<body> |
| +<p> |
| +The section below has two boxes, the top runs on the main thread, the bottom |
| +on the compositor. The animations should be identical but start at different |
| +times. |
| +</p><p> |
| +This test is successful if the each pair of boxes are mostly in sync (there |
| +might be a small offset between them). |
| +</p> |
| +<hr> |
| + |
| +<div id="target-left" class='anim-left'></div> |
| +<div id="target-transform" class='anim-transform'></div> |
| + |
| +</body> |
| +<script> |
| + setTimeout(function() { document.getElementById('target-left').style.left = '500px'; }, 2000); |
| + setTimeout(function() { document.getElementById('target-transform').style.transform = 'translateX(500px)'; }, 2000); |
| +</script> |
| +</html> |
