Chromium Code Reviews Chromium Code Reviews
Issue 2615123002:
CSS Transitions: fix flaky cancel-transition.html (Closed)
| Index: third_party/WebKit/LayoutTests/transitions/cancel-transition.html |
| diff --git a/third_party/WebKit/LayoutTests/transitions/cancel-transition.html b/third_party/WebKit/LayoutTests/transitions/cancel-transition.html |
| index 9b7a48962dc5d859909dddcacacbf94670518757..8e89315401694c268215392a450d0677bc13ad41 100644 |
| --- a/third_party/WebKit/LayoutTests/transitions/cancel-transition.html |
| +++ b/third_party/WebKit/LayoutTests/transitions/cancel-transition.html |
| @@ -1,7 +1,9 @@ |
| <!DOCTYPE html> |
| - |
| <html> |
| <head> |
| + <meta charset="utf-8"> |
| + <script src="../resources/testharness.js"></script> |
| + <script src="../resources/testharnessreport.js"></script> |
| <style> |
| #container { |
| width: 700px; |
| @@ -19,86 +21,48 @@ |
| #container.run #left { |
| left: 450px; |
| transition-property: left; |
| - transition-duration: 1s; |
| + transition-duration: 4s; |
| transition-timing-function: linear; |
| } |
| #container.run #translate { |
| transform: translate(400px, 0px); |
| transition-property: transform; |
| - transition-duration: 1s; |
| + transition-duration: 4s; |
| + transition-delay: -1s; |
| transition-timing-function: linear; |
| } |
| </style> |
| +</head> |
| +<body> |
| + <p> |
| + Test removes the transition properties while the transition is running, then adds them back in. |
| + If working properly the transitions should start from the beginning. But there was a bug that |
|
suzyh_UTC10 (ex-contributor)
2017/01/06 00:14:07
Reference bug number, if you can find it.
Not sur
Eric Willigers
2017/01/06 01:39:01
Done.
|
| + would cause the transition to continue to run (although with no visible effect). So when you |
| + restarted, it would pick up where it left off. |
| + </p> |
| + <div id="container"> |
| + <div id="left">left</div> |
| + <div id="translate">translate</div> |
| + </div> |
| <script> |
| - if (window.testRunner) { |
| - testRunner.dumpAsText(); |
| - testRunner.waitUntilDone(); |
| - } |
| - |
| - function isEqual(actual, desired, tolerance) |
| - { |
| - var diff = Math.abs(actual - desired); |
| - return diff < tolerance; |
| - } |
| - |
| - function cancelTransition() |
| - { |
| - document.getElementById("container").className = ""; |
| - document.body.offsetHeight; |
| - } |
| - |
| - function restartTransition() |
| - { |
| - document.getElementById("container").className = "run"; |
| - document.body.offsetHeight; |
| - // The transition should restart at the beginning here. After 250 it should be halfway done. |
| - setTimeout(check, 500); |
| + 'use strict'; |
| + function wait() { |
|
suzyh_UTC10 (ex-contributor)
2017/01/06 00:14:07
Please give this a more descriptive name than 'wai
Eric Willigers
2017/01/06 01:39:01
Done.
|
| + return container.animate({visibility: ['visible', 'visible']}, 40).ready; |
| } |
| - function check() |
| - { |
| - var left = parseFloat(window.getComputedStyle(document.getElementById('left')).left); |
| - result = "left: "; |
| - if (!isEqual(left, 250, 50)) |
| - result += "<span style='color:red'>FAIL (was: " + left + ", expected: 250)</span>"; |
| - else |
| - result += "<span style='color:green'>PASS</span>"; |
| - |
| - result += ", transform: "; |
| - |
| - var transform = window.getComputedStyle(document.getElementById('translate')).transform; |
| - transform = transform.split("("); |
| - transform = transform[1].split(","); |
| - if (!isEqual(transform[4], 200, 50)) |
| - result += "<span style='color:red'>FAIL (was: " + transform[4] + ", expected: 200)</span>"; |
| - else |
| - result += "<span style='color:green'>PASS</span>"; |
| - |
| - document.getElementById('result').innerHTML = result; |
| - if (window.testRunner) |
| - testRunner.notifyDone(); |
| - } |
| - |
| - function start() |
| - { |
| - document.getElementById("container").className = "run"; |
| - document.body.offsetHeight; |
| - setTimeout("cancelTransition()", 200); |
| - setTimeout("restartTransition()", 400); |
| - } |
| + async_test(t => { |
| + getComputedStyle(container).height; // force style recalc |
| + container.className = 'run'; |
| + getComputedStyle(container).height; // force transition start |
|
suzyh_UTC10 (ex-contributor)
2017/01/06 00:14:07
Nit: Reword as "force style recalc - transition wi
Eric Willigers
2017/01/06 01:39:01
Done.
|
| + wait().then(() => { |
| + container.className = ''; |
|
suzyh_UTC10 (ex-contributor)
2017/01/06 00:14:07
Perhaps before cancelling the transition here, we
Eric Willigers
2017/01/06 01:39:01
Done.
|
| + getComputedStyle(container).height; // force transition cancel |
| + }).then(wait).then(t.step_func_done(() => { |
| + container.className = 'run'; // restart transition |
| + assert_equals(getComputedStyle(left).left, '50px'); |
| + assert_equals(getComputedStyle(translate).transform, 'matrix(1, 0, 0, 1, 100, 0)'); |
| + })); |
| + }, 'Transition restarts from the beginning'); |
| </script> |
| -</head> |
| -<body onload="start()"> |
| -<p> |
| - Test removes the transition properties while the transition is running, then adds them back in. |
| - If working properly the transitions should start from the beginning. But there was a bug that |
| - would cause the transition to continue to run (although with no visible effect). So when you |
| - restarted, it would pick up where it left off. |
| -</p> |
| -<div id="container"> |
| - <div id="left">left</div> |
| - <div id="translate">translate</div> |
| -</div> |
| -<div id="result"></div> |
| </body> |
| </html> |
