| 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..ec44af15a28463b3716b927e5e3afcb210788b9c
|
| --- /dev/null
|
| +++ b/ManualTests/animation/compositor-neutral-keyframes.html
|
| @@ -0,0 +1,52 @@
|
| +<html>
|
| +<style>
|
| +div {
|
| + position: relative;
|
| + height: 100px;
|
| + width: 100px;
|
| + background: blue;
|
| + will-change: transform;
|
| + 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>
|
|
|
Chromium Code Reviews
Issue 948583003:
Use StringKeyframes to make CSS Animations responsive to style changes (Closed)
Base URL: svn://svn.chromium.org/blink/trunk