| Index: ManualTests/animation/compositor-transform-with-scale.html
|
| diff --git a/ManualTests/animation/compositor-transform-with-scale.html b/ManualTests/animation/compositor-transform-with-scale.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..5f446486066a72dbf2e560e02aca110060712d12
|
| --- /dev/null
|
| +++ b/ManualTests/animation/compositor-transform-with-scale.html
|
| @@ -0,0 +1,83 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<style>
|
| +
|
| +div {
|
| + position: absolute;
|
| + backface-visibility: visible;
|
| + height: 25px;
|
| + width: 25px;
|
| +}
|
| +
|
| +#div1 {
|
| + left: 100px;
|
| + top: 200px;
|
| + background-color: blue;
|
| +}
|
| +
|
| +#div2 {
|
| + left: 200px;
|
| + top: 200px;
|
| + background-color: red;
|
| +}
|
| +#div3 {
|
| + left: 300px;
|
| + top: 200px;
|
| + background-color: purple;
|
| +}
|
| +
|
| +</style>
|
| +</head>
|
| +<body>
|
| +<p>
|
| +Tests that composited animation happens when only transform or only scale is present.
|
| +<p>
|
| +The 3 squares should equivalently scale. They need not be perfectly in time.
|
| +<p>
|
| +Blue - Only Transform, Red - Only Scale, Purple - Transform + Scale
|
| +
|
| +<div id="div1"></div>
|
| +<div id="div2"></div>
|
| +<div id="div3"></div>
|
| +
|
| +<script>
|
| +var div1 = document.getElementById('div1');
|
| +var div2 = document.getElementById('div2');
|
| +var div3 = document.getElementById('div3');
|
| +
|
| +function startAnimations() {
|
| + div1.animate([
|
| + {transform: 'scale(1, 1)'},
|
| + {transform: 'scale(4, 4)'}
|
| + ], {
|
| + duration: 5000,
|
| + delay: 1000,
|
| + fill: 'forwards'
|
| + });
|
| +
|
| + div2.animate([
|
| + {scale: '1 1'},
|
| + {scale: '4 4'}
|
| + ], {
|
| + duration: 5000,
|
| + delay: 1000,
|
| + fill: 'forwards'
|
| + });
|
| +
|
| + div3.animate([
|
| + {transform: 'scale(1, 1)', scale: '1 1'},
|
| + {transform: 'scale(2, 2)', scale: '2 2'}
|
| + ], {
|
| + duration: 5000,
|
| + delay: 1000,
|
| + fill: 'forwards'
|
| + });
|
| +}
|
| +
|
| +requestAnimationFrame(startAnimations);
|
| +
|
| +</script>
|
| +
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 1218943002:
Compositor animations for Independent CSS Transform Properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master