| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <meta charset="utf-8"> |
| 2 <style> | 3 <style> |
| 3 div { | 4 div { |
| 4 position: absolute; | 5 position: absolute; |
| 5 width: 100px; | 6 width: 100px; |
| 6 height: 100px; | 7 height: 100px; |
| 7 } | 8 } |
| 8 #target { | 9 #target { |
| 9 background: red; | 10 background: red; |
| 10 transform: translateX(100px); | 11 transform: translateX(100px); |
| 11 animation: test 1e8s; | 12 animation: test 1e8s; |
| 12 } | 13 } |
| 13 #expected { | 14 #expected { |
| 14 background: green; | 15 background: green; |
| 15 transform: translateX(50px); | 16 transform: translateX(50px); |
| 16 } | 17 } |
| 17 @keyframes test { | 18 @keyframes test { |
| 18 to { transform: translateX(50px); } | 19 to { transform: translateX(50px); } |
| 19 } | 20 } |
| 20 </style> | 21 </style> |
| 21 <div id="target"></div> | 22 <div id="target"></div> |
| 22 <div id="expected"></div> | 23 <div id="expected"></div> |
| 23 <script> | 24 <script> |
| 25 'use strict'; |
| 24 if (window.testRunner) | 26 if (window.testRunner) |
| 25 testRunner.waitUntilDone(); | 27 testRunner.waitUntilDone(); |
| 26 | 28 |
| 27 function waitForCompositor() { | 29 function waitForCompositor() { |
| 28 return target.animate({opacity: ['1', '1']}, 1).ready; | 30 return target.animate({opacity: ['1', '1']}, 1).ready; |
| 29 } | 31 } |
| 30 | 32 |
| 31 waitForCompositor().then(() => { | 33 waitForCompositor().then(() => { |
| 32 target.style.transform = 'translateX(50px)'; | 34 target.style.transform = 'translateX(50px)'; |
| 33 }).then(() => waitForCompositor()).then(() => { | 35 }).then(waitForCompositor).then(() => { |
| 34 if (window.testRunner) | 36 if (window.testRunner) |
| 35 testRunner.notifyDone(); | 37 testRunner.notifyDone(); |
| 36 }); | 38 }); |
| 37 </script> | 39 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2587873002:
CSS Animations: transform-responsive-neutral-keyframe.html is slow test (Closed)
