Skip to content

GitLab

T
tangled
Commit 34e9fa07 authored by ericwilligers's avatar ericwilligers Committed by Commit bot
Browse files
Options

CSS Transitions: fix flaky cancel-transition.html 

We no longer rely on setTimeout timing.

BUG=248938

Review-Url: https://codereview.chromium.org/2615123002
Cr-Commit-Position: refs/heads/master@{#441883}
parent b47d881a
Show whitespace changes
Inline Side-by-side
Showing with 36 additions and 75 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 34e9fa07
...@@ -739,7 +739,6 @@ crbug.com/432129 fast/html/marquee-scroll.html [ Failure Pass ] ...@@ -739,7 +739,6 @@ crbug.com/432129 fast/html/marquee-scroll.html [ Failure Pass ]
crbug.com/248938 [ Win Debug ] virtual/threaded/animations/transition-and-animation-2.html [ Timeout ] crbug.com/248938 [ Win Debug ] virtual/threaded/animations/transition-and-animation-2.html [ Timeout ]
crbug.com/248938 virtual/threaded/animations/change-one-anim.html [ Failure Pass ] crbug.com/248938 virtual/threaded/animations/change-one-anim.html [ Failure Pass ]
crbug.com/326139 crbug.com/390125 media/video-frame-accurate-seek.html [ Failure Pass ] crbug.com/326139 crbug.com/390125 media/video-frame-accurate-seek.html [ Failure Pass ]
crbug.com/248938 virtual/threaded/transitions/cancel-transition.html [ Pass Failure ]
crbug.com/248938 virtual/threaded/transitions/start-transform-transition.html [ Pass Failure ] crbug.com/248938 virtual/threaded/transitions/start-transform-transition.html [ Pass Failure ]
crbug.com/248938 virtual/threaded/animations/animation-iteration-event-destroy-renderer.html [ Pass Timeout ] crbug.com/248938 virtual/threaded/animations/animation-iteration-event-destroy-renderer.html [ Pass Timeout ]
crbug.com/248938 virtual/threaded/animations/transition-and-animation-3.html [ Pass Timeout ] crbug.com/248938 virtual/threaded/animations/transition-and-animation-3.html [ Pass Timeout ]
......
third_party/WebKit/LayoutTests/transitions/cancel-transition-expected.txt deleted 100644 → 0
View file @ b47d881a
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.
left
translate
left: PASS, transform: PASS
third_party/WebKit/LayoutTests/transitions/cancel-transition.html
View file @ 34e9fa07
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style> <style>
#container { #container {
width: 700px; width: 700px;
...@@ -19,86 +21,51 @@ ...@@ -19,86 +21,51 @@
#container.run #left { #container.run #left {
left: 450px; left: 450px;
transition-property: left; transition-property: left;
transition-duration: 1s; transition-duration: 4s;
transition-timing-function: linear; transition-timing-function: linear;
} }
#container.run #translate { #container.run #translate {
transform: translate(400px, 0px); transform: translate(400px, 0px);
transition-property: transform; transition-property: transform;
transition-duration: 1s; transition-duration: 4s;
transition-delay: -1s;
transition-timing-function: linear; transition-timing-function: linear;
} }
</style> </style>
<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);
}
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);
}
</script>
</head> </head>
<body onload="start()"> <body>
<p> <!--
Test removes the transition properties while the transition is running, then adds them back in. 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 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 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. restarted, it would pick up where it left off.
</p> https://bugs.webkit.org/show_bug.cgi?id=26163
<div id="container"> -->
<div id="container">
<div id="left">left</div> <div id="left">left</div>
<div id="translate">translate</div> <div id="translate">translate</div>
</div> </div>
<div id="result"></div> <script>
'use strict';
function waitSeveralFrames() {
return container.animate({opacity: ['1', '1']}, 100).finished;
}
async_test(t => {
getComputedStyle(container).height; // force style recalc
container.className = 'run';
getComputedStyle(container).height; // force style recalc - transition will start
waitSeveralFrames().then(t.step_func(() => {
assert_greater_than(parseFloat(getComputedStyle(left).left), 50);
container.className = '';
getComputedStyle(container).height; // force style recalc - transition will cancel
})).then(waitSeveralFrames).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>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment