| Index: LayoutTests/animations/timing-properties-do-not-update-running-animation.html
|
| diff --git a/LayoutTests/animations/timing-properties-do-not-update-running-animation.html b/LayoutTests/animations/timing-properties-do-not-update-running-animation.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..8a624c7e69ebe1e25995eb15c87a2fca6c102282
|
| --- /dev/null
|
| +++ b/LayoutTests/animations/timing-properties-do-not-update-running-animation.html
|
| @@ -0,0 +1,152 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| + <style type="text/css">
|
| + #wrapper div {
|
| + height: 30px;
|
| + width: 100px;
|
| + background-color: red;
|
| + margin-bottom: 10px;
|
| + position: relative;
|
| + }
|
| + #wrapper.animated div {
|
| + -webkit-animation: test 100ms forwards;
|
| + animation: test 100ms forwards;
|
| + }
|
| + @-webkit-keyframes test {
|
| + from { left: 100px; }
|
| + to { left: 300px; }
|
| + }
|
| + @keyframes test {
|
| + from { left: 100px; }
|
| + to { left: 300px; }
|
| + }
|
| + #wrapper.updated div#duration {
|
| + /* Test will time out if this is applied. */
|
| + -webkit-animation-duration: 1000s;
|
| + animation-duration: 1000s;
|
| + }
|
| + #wrapper.updated div#iteration-count {
|
| + /* Default is 1 */
|
| + /* Test will time out if this is applied. */
|
| + -webkit-animation-iteration-count: 1000000;
|
| + animation-iteration-count: 1000000;
|
| + }
|
| + #wrapper.updated div#delay {
|
| + /* Default is 0 */
|
| + /* Test will time out if this is applied. */
|
| + -webkit-animation-delay: 1000s;
|
| + animation-delay: 1000s;
|
| + }
|
| + #wrapper.updated div#direction {
|
| + /* Default is normal */
|
| + /* End state will be incorrect if this is applied. */
|
| + -webkit-animation-direction: reverse;
|
| + animation-direction: reverse;
|
| + }
|
| + #wrapper.updated div#fill-mode {
|
| + /* End state will be incorrect if this is applied. */
|
| + -webkit-animation-fill-mode: none;
|
| + animation-fill-mode: none;
|
| + }
|
| + #wrapper.updated div#timing-function {
|
| + /* Default is ease */
|
| + /* Property will overshoot if this is applied. */
|
| + -webkit-animation-timing-function: cubic-bezier(0, 10, 1, 10);
|
| + animation-timing-function: cubic-bezier(0, 10, 1, 10);
|
| + }
|
| + </style>
|
| + <script type="text/javascript">
|
| + if (window.testRunner) {
|
| + testRunner.dumpAsText();
|
| + testRunner.waitUntilDone();
|
| + }
|
| +
|
| + function go() {
|
| + document.addEventListener('webkitAnimationStart', onStart);
|
| + document.addEventListener('webkitAnimationEnd', onEnd);
|
| + document.getElementById('wrapper').classList.add('animated');
|
| + }
|
| +
|
| + var startCount = 0;
|
| + function onStart() {
|
| + if (++startCount === 6) {
|
| + setTimeout(update, 0);
|
| + setTimeout(checkOvershoot, 10);
|
| + }
|
| + }
|
| +
|
| + function update() {
|
| + document.getElementById('wrapper').classList.add('updated');
|
| + }
|
| +
|
| + function checkOvershoot() {
|
| + var left = parseInt(getComputedStyle(document.getElementById('timing-function')).left);
|
| + document.getElementById('log').innerHTML += (left <= 300 ?
|
| + 'PASS: Element \'timing-function\' did not overshoot' :
|
| + 'FAIL: Element \'timing-function\' overshot') +
|
| + '<br>';
|
| + }
|
| +
|
| + var results = {};
|
| + function test(id, property, expected) {
|
| + var actual = getComputedStyle(document.getElementById(id))[property];
|
| + var pass = actual === expected;
|
| + if (results[id] === undefined) {
|
| + results[id] = '';
|
| + }
|
| + results[id] += (pass ?
|
| + 'PASS: Element \'' + id + '\': ' + property + ' was ' + expected :
|
| + 'FAIL: Element \'' + id + '\': ' + property + ' expected ' + expected + ' but saw ' + actual) +
|
| + '<br>';
|
| + }
|
| +
|
| + var endCount = 0;
|
| + function onEnd(e) {
|
| + var id = e.target.id;
|
| + if (id === 'duration') {
|
| + test(id, '-webkit-animation-duration', '1000s');
|
| + } else if (id === 'iteration-count') {
|
| + test(id, '-webkit-animation-iteration-count', '1000000');
|
| + } else if (id === 'delay') {
|
| + test(id, '-webkit-animation-delay', '1000s');
|
| + } else if (id === 'direction') {
|
| + test(id, '-webkit-animation-direction', 'reverse');
|
| + } else if (id === 'fill-mode') {
|
| + test(id, '-webkit-animation-fill-mode', 'none');
|
| + } else if (id === 'timing-function') {
|
| + test(id, '-webkit-animation-timing-function', 'cubic-bezier(0, 10, 1, 10)');
|
| + }
|
| + test(id, 'left', '300px');
|
| + if (++endCount === 6) {
|
| + finishTest();
|
| + }
|
| + }
|
| +
|
| + function finishTest() {
|
| + var elements = document.getElementById('wrapper').getElementsByTagName('div');
|
| + for (var i = 0; i < elements.length; ++i) {
|
| + document.getElementById('log').innerHTML += results[elements[i].id];
|
| + }
|
| + if (window.testRunner) {
|
| + testRunner.notifyDone();
|
| + }
|
| + }
|
| + </script>
|
| +</head>
|
| +<body onload="go()">
|
| + <p>
|
| + Tests that modifying the iteration count, delay, duration, direction, fill
|
| + mode or timing function do not cause a running animation to be updated.
|
| + </p>
|
| + <div id="wrapper">
|
| + <div id="duration">duration</div>
|
| + <div id="iteration-count">iteration-count</div>
|
| + <div id="delay">delay</div>
|
| + <div id="direction">direction</div>
|
| + <div id="fill-mode">fill-mode</div>
|
| + <div id="timing-function">timing-function</div>
|
| + </div>
|
| + <div id="log"></div>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 60033004:
Don't check all animation/transition properties when comparing RenderStyles (Closed)
Base URL: svn://svn.chromium.org/blink/trunk