Chromium Code Reviews Chromium Code Reviews
Issue 2588313002:
CSS Transitions: Fix flaky cancel-and-start-new.html (Closed)
| Index: third_party/WebKit/LayoutTests/transitions/cancel-and-start-new.html |
| diff --git a/third_party/WebKit/LayoutTests/transitions/cancel-and-start-new.html b/third_party/WebKit/LayoutTests/transitions/cancel-and-start-new.html |
| index 7edcae808af80a8117eb409a7682371bb47501c8..adebafefc94f6fc91aeb699490b489328d37b336 100644 |
| --- a/third_party/WebKit/LayoutTests/transitions/cancel-and-start-new.html |
| +++ b/third_party/WebKit/LayoutTests/transitions/cancel-and-start-new.html |
| @@ -1,100 +1,45 @@ |
| <!DOCTYPE html> |
| -<html> |
| -<head> |
| - <style> |
| - #target { |
| - position: relative; |
| - background-color: #933; |
| - width: 50px; |
| - height: 50px; |
| - top: 0px; |
| - left: 0px; |
| - } |
| - #target.transition-top { |
| - top: 400px; |
| - transition: top 2000ms linear; |
| - } |
| - #target.transition-left { |
| - left: 400px; |
| - transition: left 2000ms linear; |
| - } |
| - </style> |
| - <script> |
| - if (window.testRunner) { |
| - testRunner.dumpAsText(); |
| - testRunner.waitUntilDone(); |
| - } |
| - |
| - function fail(message) { |
| - var result = "<span style='color:red'>" + message + "</span>"; |
| - document.getElementById('result').innerHTML = result; |
| - if (window.testRunner) |
| - testRunner.notifyDone(); |
| - } |
| - |
| - function success() { |
| - var result = "<span style='color:green'>PASS</span>"; |
| - document.getElementById('result').innerHTML = result; |
| - if (window.testRunner) |
| - testRunner.notifyDone(); |
| - } |
| - |
| - function isEqual(actual, desired, tolerance) |
| - { |
| - var diff = Math.abs(actual - desired); |
| - return diff < tolerance; |
| - } |
| - |
| - function start() |
| - { |
| - document.getElementById("target").classList.add('transition-top'); |
| - internals.pauseAnimations(1); |
| - cancelTransition(); |
| - } |
| - |
| - function cancelTransition() |
| - { |
| - var top = parseFloat(window.getComputedStyle(document.getElementById('target')).top); |
| - if (isEqual(top, 200, 1)) { |
| - document.getElementById("target").classList.remove('transition-top'); |
| - internals.pauseAnimations(1); |
| - startNewTransition(); |
| - } else { |
| - fail('top was: ' + top + ', expected: 200'); |
| - } |
| - } |
| - |
| - function startNewTransition() |
| - { |
| - var top = parseFloat(window.getComputedStyle(document.getElementById('target')).top); |
| - if (isEqual(top, 0, 1)) { |
| - document.getElementById("target").classList.add('transition-left'); |
| - internals.pauseAnimations(1); |
| - check(); |
| - } else { |
| - fail('top was: ' + top + ', expected: 0'); |
| - } |
| - } |
| - |
| - function check() |
| - { |
| - var left = parseFloat(window.getComputedStyle(document.getElementById('target')).left); |
| - if (isEqual(left, 200, 1)) { |
| - success(); |
| - } else { |
| - fail('left was: ' + left + ', expected: 200'); |
| - } |
| - } |
| - |
| - window.onload = start; |
| - </script> |
| -</head> |
| -<body> |
| -<p> |
| - Tests that having stopped a transition before it completes, a subsequent |
| - transition starts correctly. |
| -</p> |
| +<meta charset="utf-8"> |
| +<script src="../resources/testharness.js"></script> |
| +<script src="../resources/testharnessreport.js"></script> |
| +<style> |
| + #target { |
| + left: 0px; |
| + top: 0px; |
| + } |
| + #target.transition-top { |
| + top: 100px; |
| + transition: top 1s linear; |
| + } |
| + #target.transition-left { |
| + left: 100px; |
| + transition: left 50ms linear; |
| + } |
| +</style> |
| <div id="target"></div> |
| -<div id="result"></div> |
| -</body> |
| -</html> |
| +<script> |
| + 'use strict'; |
| + function waitTwoFrames() { |
| + return new Promise(function(resolve, reject) { |
| + requestAnimationFrame(() => { |
| + requestAnimationFrame(() => { |
| + resolve(); |
| + }); |
| + }); |
| + }); |
| + } |
| + |
| + async_test(t => { |
| + waitTwoFrames().then(() => { |
| + target.classList.add('transition-top'); |
| + }).then(waitTwoFrames).then(() => { |
| + target.classList.remove('transition-top'); |
|
suzyh_UTC10 (ex-contributor)
2016/12/21 00:26:59
Do we care about the correctness of the transition
Eric Willigers
2016/12/21 01:01:12
I've now added an assert that the value returns to
|
| + }).then(waitTwoFrames).then(t.step_func(() => { |
| + target.classList.add('transition-left'); |
| + assert_equals(getComputedStyle(target).left, '0px'); |
| + target.addEventListener('transitionend', t.step_func_done(() => { |
| + assert_equals(getComputedStyle(target).left, '100px'); |
| + })); |
| + })); |
| + }, 'Having stopped a transition before it completes, a subsequent transition starts correctly'); |
| +</script> |
