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
Hide 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 ]
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/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/animations/animation-iteration-event-destroy-renderer.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>
<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,51 @@
#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>
<!--
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.
https://bugs.webkit.org/show_bug.cgi?id=26163
-->
<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;
}
'use strict';
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 waitSeveralFrames() {
return container.animate({opacity: ['1', '1']}, 100).finished;
}
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 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>
</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>
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