| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <meta charset="utf-8"> |
| 3 <head> | 3 <script src="../resources/testharness.js"></script> |
| 4 <style> | 4 <script src="../resources/testharnessreport.js"></script> |
| 5 #target { | 5 <style> |
| 6 position: relative; | 6 #target { |
| 7 background-color: #933; | 7 left: 0px; |
| 8 width: 50px; | 8 top: 0px; |
| 9 height: 50px; | 9 } |
| 10 top: 0px; | 10 #target.transition-top { |
| 11 left: 0px; | 11 top: 100px; |
| 12 } | 12 transition: top 1s linear; |
| 13 #target.transition-top { | 13 } |
| 14 top: 400px; | 14 #target.transition-left { |
| 15 transition: top 2000ms linear; | 15 left: 100px; |
| 16 } | 16 transition: left 50ms linear; |
| 17 #target.transition-left { | 17 } |
| 18 left: 400px; | 18 </style> |
| 19 transition: left 2000ms linear; | 19 <div id="target"></div> |
| 20 } | 20 <script> |
| 21 </style> | 21 'use strict'; |
| 22 <script> | 22 function waitForNextFrame() { |
| 23 if (window.testRunner) { | 23 return new Promise(function(resolve, reject) { |
| 24 testRunner.dumpAsText(); | 24 requestAnimationFrame(() => { |
| 25 testRunner.waitUntilDone(); | 25 resolve(); |
| 26 } | 26 }); |
| 27 }); |
| 28 } |
| 27 | 29 |
| 28 function fail(message) { | 30 async_test(t => { |
| 29 var result = "<span style='color:red'>" + message + "</span>"; | 31 waitForNextFrame().then(() => { |
| 30 document.getElementById('result').innerHTML = result; | 32 target.classList.add('transition-top'); |
| 31 if (window.testRunner) | 33 }).then(waitForNextFrame).then(() => { |
| 32 testRunner.notifyDone(); | 34 target.classList.remove('transition-top'); |
| 33 } | 35 }).then(waitForNextFrame).then(t.step_func(() => { |
| 34 | 36 target.classList.add('transition-left'); |
| 35 function success() { | 37 assert_equals(getComputedStyle(target).top, '0px'); |
| 36 var result = "<span style='color:green'>PASS</span>"; | 38 assert_equals(getComputedStyle(target).left, '0px'); |
| 37 document.getElementById('result').innerHTML = result; | 39 target.addEventListener('transitionend', t.step_func_done(() => { |
| 38 if (window.testRunner) | 40 assert_equals(getComputedStyle(target).left, '100px'); |
| 39 testRunner.notifyDone(); | 41 })); |
| 40 } | 42 })); |
| 41 | 43 }, 'Having stopped a transition before it completes, a subsequent transition s
tarts correctly'); |
| 42 function isEqual(actual, desired, tolerance) | 44 </script> |
| 43 { | |
| 44 var diff = Math.abs(actual - desired); | |
| 45 return diff < tolerance; | |
| 46 } | |
| 47 | |
| 48 function start() | |
| 49 { | |
| 50 document.getElementById("target").classList.add('transition-top'); | |
| 51 internals.pauseAnimations(1); | |
| 52 cancelTransition(); | |
| 53 } | |
| 54 | |
| 55 function cancelTransition() | |
| 56 { | |
| 57 var top = parseFloat(window.getComputedStyle(document.getElementById
('target')).top); | |
| 58 if (isEqual(top, 200, 1)) { | |
| 59 document.getElementById("target").classList.remove('transition-t
op'); | |
| 60 internals.pauseAnimations(1); | |
| 61 startNewTransition(); | |
| 62 } else { | |
| 63 fail('top was: ' + top + ', expected: 200'); | |
| 64 } | |
| 65 } | |
| 66 | |
| 67 function startNewTransition() | |
| 68 { | |
| 69 var top = parseFloat(window.getComputedStyle(document.getElementById
('target')).top); | |
| 70 if (isEqual(top, 0, 1)) { | |
| 71 document.getElementById("target").classList.add('transition-left
'); | |
| 72 internals.pauseAnimations(1); | |
| 73 check(); | |
| 74 } else { | |
| 75 fail('top was: ' + top + ', expected: 0'); | |
| 76 } | |
| 77 } | |
| 78 | |
| 79 function check() | |
| 80 { | |
| 81 var left = parseFloat(window.getComputedStyle(document.getElementByI
d('target')).left); | |
| 82 if (isEqual(left, 200, 1)) { | |
| 83 success(); | |
| 84 } else { | |
| 85 fail('left was: ' + left + ', expected: 200'); | |
| 86 } | |
| 87 } | |
| 88 | |
| 89 window.onload = start; | |
| 90 </script> | |
| 91 </head> | |
| 92 <body> | |
| 93 <p> | |
| 94 Tests that having stopped a transition before it completes, a subsequent | |
| 95 transition starts correctly. | |
| 96 </p> | |
| 97 <div id="target"></div> | |
| 98 <div id="result"></div> | |
| 99 </body> | |
| 100 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2588313002:
CSS Transitions: Fix flaky cancel-and-start-new.html (Closed)
