third_party/WebKit/LayoutTests/transitions/cancel-transition.html - Issue 2615123002: CSS Transitions: fix flaky cancel-transition.html

Unified Diff: third_party/WebKit/LayoutTests/transitions/cancel-transition.html

Issue 2615123002: CSS Transitions: fix flaky cancel-transition.html (Closed)

Patch Set: rebase Created 3 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/transitions/cancel-transition-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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..7ff24f2b309f9bfca9ffc3b201020d1ae3345e72 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,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>

- 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>