Skip to content

GitLab

T
tangled
Commit 53db6d27 authored by ericwilligers's avatar ericwilligers Committed by Commit bot
Browse files
Options

CSS Animations: Fix flaky test transform-origin-vs-functions.html 

The test used setTimeout, and relied on precise timing.

We now use testharness.js, and no longer rely on callback timing.

BUG=248938,664857,674715

Review-Url: https://codereview.chromium.org/2582713002
Cr-Commit-Position: refs/heads/master@{#439391}
parent 4460b9b6
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 144 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ 53db6d27
......@@ -735,7 +735,6 @@ crbug.com/520189 [ Mac ] virtual/mojo-loading/http/tests/misc/submit-post-keygen
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 [ Debug ] virtual/threaded/animations/3d/transform-origin-vs-functions.html [ Pass Failure ]
crbug.com/248938 virtual/threaded/transitions/cancel-and-start-new.html [ Pass Failure ]
crbug.com/248938 virtual/threaded/animations/change-keyframes-name.html [ Failure Pass Timeout ]
crbug.com/248938 virtual/threaded/animations/change-one-anim.html [ Failure Pass ]
......@@ -764,8 +763,6 @@ crbug.com/248938 [ Linux ] virtual/threaded/transitions/unprefixed-perspective-o
crbug.com/248938 [ Mac ] virtual/threaded/transitions/interrupted-all-transition.html [ Pass Failure ]
crbug.com/248938 virtual/threaded/animations/fill-mode-multiple-keyframes.html [ Pass Failure ]
crbug.com/674715 [ Win7 Debug ] animations/3d/transform-origin-vs-functions.html [ Pass Failure ]
crbug.com/659123 [ Mac ] fast/css/text-overflow-ellipsis-button.html [ Pass Failure ]
# TODO(oshima): Mac Android are currently not supported.
......@@ -2401,9 +2398,6 @@ crbug.com/664853 virtual/mojo-loading/webexposed/web-animations-api.html [ Pass
crbug.com/664855 virtual/scroll_customization/fast/scroll-behavior/main-frame-interrupted-scroll.html [ Pass Failure ]
crbug.com/664856 virtual/sharedarraybuffer/fast/workers/worker-gc.html [ Pass Failure ]
# Possible duplicate of crbug.com/248938:
# crbug.com/664857 virtual/threaded/animations/3d/transform-origin-vs-functions.html [ Pass Failure ]
crbug.com/664857 virtual/threaded/animations/animation-transition-collision-crash.html [ Pass Failure ]
crbug.com/664857 virtual/threaded/animations/composited-animations-simple.html [ Pass Failure ]
crbug.com/664857 virtual/threaded/animations/transform-responsive-neutral-keyframe.html [ Pass Failure ]
......
third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions-expected.txt deleted 100644 → 0
View file @ 4460b9b6
PASS(element 'b1' matches expected value)
PASS(element 'b2' matches expected value)
third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions.html
View file @ 53db6d27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>transform-origin vs. Transform Functions</title>
<style type="text/css" media="screen">
#a {
top: 0px;
left: 0px;
position: absolute;
perspective: 800;
width: 800px;
height: 600px;
}
#b1 {
top: 80px;
left: 300px;
width: 200px;
height: 200px;
position: absolute;
background-color: #282;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: center center 200px;
}
@keyframes b1 {
from { transform: rotateY(0deg); }
5% { transform: rotateY(90deg); }
20% { transform: rotateY(90deg); }
50% { transform: rotateY(180deg); }
75% { transform: rotateY(270deg); }
to { transform: rotateY(360deg); }
}
#b2 {
top: 320px;
left: 300px;
width: 200px;
height: 200px;
position: absolute;
background-color: #282;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes b2 {
from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
5% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
20% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
50% { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
75% { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
to { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) }
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../resources/helpers.js"></script>
<style>
#a {
height: 600px;
left: 0px;
perspective: 800;
position: absolute;
top: 0px;
width: 800px;
}
#b1 {
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: b1;
animation-timing-function: linear;
background-color: #282;
height: 200px;
left: 300px;
position: absolute;
top: 80px;
transform-origin: center center 200px;
width: 200px;
}
@keyframes b1 {
from { transform: rotateY(0deg); }
5% { transform: rotateY(90deg); }
20% { transform: rotateY(90deg); }
50% { transform: rotateY(180deg); }
75% { transform: rotateY(270deg); }
to { transform: rotateY(360deg); }
}
#b2 {
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: b2;
animation-timing-function: linear;
background-color: #282;
height: 200px;
left: 300px;
position: absolute;
top: 320px;
width: 200px;
}
@keyframes b2 {
from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
5% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
20% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
50% { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
75% { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
to { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) }
}
</style>
<div id="a">
<div id="b1"> </div>
<div style="transform:translateZ(-200px); transform-style:preserve-3d;">
<div id="b2"> </div>
</div>
</div>
<script>
'use strict';
resultEntries = [];
test(function() {
const epsilon = 0.0001;
const expected = {
"b1" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, 0,0,0,1 ],
"b2" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, -200,0,200,1 ]
};
b1.style.animationDelay = '-0.25s';
const expectedB1 = 'matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1)';
assert_true(matricesApproxEqual(getComputedStyle(b1).transform, expectedB1, epsilon), 'b1');
const tolerance = 0.2;
function isEqual(actual, desired)
{
var diff = Math.abs(actual - desired);
return diff <= tolerance;
}
var numSnapshots = 0;
function snapshot(id)
{
var e = document.getElementById(id);
var t = window.getComputedStyle(e).transform;
var a = t.split("(");
var array = a[1].split(",");
var pass = true;
for (i = 0; i < 16; ++i) {
var actual = parseFloat(array[i]);
var expect = expected[id][i];
if (!isEqual(actual, expect)) {
resultEntries.push("FAIL(element '"+id+"' matrix["+i+"]' was:"+actual+", expected:"+expect+")<br>");
pass = false;
}
}
if (pass)
resultEntries.push("PASS(element '"+id+"' matches expected value)<br>");
numSnapshots++;
if (numSnapshots == 2) {
resultEntries.sort();
document.getElementById('result').innerHTML = resultEntries.join("");
if (window.testRunner)
testRunner.notifyDone();
}
}
function snapshotOnTimeout(id) {
setTimeout("snapshot('" + id + "')", 250);
}
function startAnimation(id)
{
var element = document.getElementById(id);
element.addEventListener('animationstart', function() {
// delay to give hardware animations a chance to start
window.setTimeout("snapshotOnTimeout('" + id + "')", 0);
}, false);
element.style.animationName = id;
}
function start()
{
startAnimation('b1');
startAnimation('b2');
}
</script>
</head>
<body onload="start()">
<div id="a">
<div id="b1"> </div>
<div style="transform:translateZ(-200px); transform-style:preserve-3d;">
<div id="b2"> </div>
</div>
</div>
</body>
<div id="result"> </div>
</html>
b2.style.animationDelay = '-0.25s';
const expectedB2 = 'matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, -200, 0, 200, 1)';
assert_true(matricesApproxEqual(getComputedStyle(b2).transform, expectedB2, epsilon), 'b2');
}, "3D transform functions compose");
</script>
third_party/WebKit/LayoutTests/animations/resources/helpers.js 0 → 100644
View file @ 53db6d27
'use strict';
function matricesApproxEqual(actualMatrix, expectedMatrix, epsilon) {
const actualNumbers = actualMatrix.split(/[\(\) ,]/);
const expectedNumbers = expectedMatrix.split(/[\(\) ,]/);
if (actualNumbers.length !== expectedNumbers.length) {
return false;
}
for (var i = 0; i < actualNumbers.length; i++) {
if (actualNumbers[i] !== expectedNumbers[i] &&
Math.abs(Number(actualNumbers[i]) - Number(expectedNumbers[i])) > epsilon) {
return false;
}
}
return true;
}
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