Skip to content

GitLab

T
tangled
Commit 29835fd5 authored by George Steel's avatar George Steel Committed by Commit Bot
Browse files
Options

Add reftests for transform animations 

Because composited animations are inaccessible from js, reftests are
necessary to test their behavior. In this set, the file
transform-interpolation-reftests.js defines the tests themselves and
several wrapper html files each run a subset of them (this structure
is due to the lack of support for test variants in reftests).

As these tests are specifically meant for testing compositor animations,
add css-transforms to the virtual/threaded suite to test with threaded
compositing. As this has found several errors, bugs have been filed and
linked to the threaded cases in TestExpectations

Bug: 1131196, 1133901, 1131252
Change-Id: I9c6d92727e52a3ec11fe56f3375fc352baeadf04
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2443209Reviewed-by: default avatarKevin Ellis <kevers@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#813921}
parent 9201a1df
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 0 deletions
third_party/blink/web_tests/TestExpectations
View file @ 29835fd5
......@@ -6642,6 +6642,10 @@ crbug.com/1135225 fast/sub-pixel/transformed-iframe-copy-on-scroll.html [ Pass F
crbug.com/1133342 external/wpt/html/cross-origin-opener-policy/reporting/access-reporting/reporting-observer.html [ Pass Failure Timeout ]
crbug.com/1083605 media/controls-styling-strict.html [ Pass Failure ]
# Transform animation reftests
crbug.com/1133901 virtual/threaded/external/wpt/css/css-transforms/animation/transform-interpolation-translate-em.html [ Failure ]
crbug.com/1131252 virtual/threaded/external/wpt/css/css-transforms/animation/transform-interpolation-skew.html [ Failure ]
# Sheriff 2020-09-30
crbug.com/1133821 virtual/off-main-thread-css-paint/external/wpt/css/css-paint-api/one-custom-property-animation.https.html [ Pass Failure ]
crbug.com/1133821 virtual/off-main-thread-css-paint/external/wpt/css/css-paint-api/two-custom-property-animation.https.html [ Pass Failure ]
third_party/blink/web_tests/VirtualTestSuites
View file @ 29835fd5
......@@ -43,6 +43,7 @@
"external/wpt/animation-worklet",
"external/wpt/css/css-animations",
"external/wpt/css/css-scroll-snap",
"external/wpt/css/css-transforms/animation",
"external/wpt/feature-policy/experimental-features",
"external/wpt/html/canvas/offscreen/manual/convert-to-blob",
"external/wpt/scroll-animations",
......
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/support/transform-interpolation-reftests.js 0 → 100644
View file @ 29835fd5
'use strict';
// Each test is an array of [endpoint, midpoint, endpoint] and tests
// whether the endpoints interpolate to the same visual state as the midpoint
const transformTests = {
translate: [
['translateX(0px)', 'translateX(25px)', 'translateX(50px)'],
['translateY(0px)', 'translateY(25px)', 'translateY(50px)'],
['translateX(0%)', 'translateX(25%)', 'translateX(50%)'],
['translateY(0%)', 'translateY(25%)', 'translateY(50%)'],
['translateX(50%)', 'translate(25%, 25%)', 'translateY(50%)'],
['translateX(50%)', 'translate(25%, 25px)', 'translateY(50px)'],
['translateX(50px)', 'translateX(calc(25px + 25%))', 'translateX(50%)']
],
translateEm: [
['translateX(0em)', 'translateX(2em)', 'translateX(4em)'],
['translateX(-50px)', 'translateX(calc(2em - 25px))', 'translateX(4em)'],
['translateX(50%)', 'translateX(calc(25% - 2em))', 'translateX(-4em)']
],
rotate: [
['rotate(0deg)', 'rotate(45deg)', 'rotate(90deg)'],
['rotateX(0deg)', 'rotateX(45deg)', 'rotateX(90deg)'],
['rotateY(0deg)', 'rotateY(45deg)', 'rotateY(90deg)'],
['rotate(0deg)', 'rotate(180deg)', 'rotate(360deg)'],
['rotate3d(7, 8, 9, 0deg)', 'rotate3d(7, 8, 9, 45deg)', 'rotate3d(7, 8, 9, 90deg)'],
// First endpoint is the same rotation as rotateZ(0deg) but triggers SLERP
['rotateX(360deg)', 'rotateZ(45deg)', 'rotateZ(90deg)']
],
scale: [
['scaleX(0.5)', 'scaleX(0.75)', 'scaleX(1)'],
['scaleY(0.5)', 'scaleY(0.75)', 'scaleY(1)'],
['scale(0.5)', 'scale(0.75)', 'scale(1)'],
['scaleX(0.5)', 'scale(0.75)', 'scaleY(0.5)'],
['scale3d(0.5, 1, 2)', 'scale3d(0.75, 0.75, 3)', 'scale3d(1, 0.5, 4)']
],
skew: [
['skewX(0deg)', 'skewX(30deg)', 'skewX(60deg)'],
['skewY(0deg)', 'skewY(30deg)', 'skewY(60deg)'],
['skew(60deg, 0deg)', 'skew(30deg, 30deg)', 'skew(0deg, 60deg)'],
['skewX(0deg) rotate(0deg)', 'skewX(0deg) rotate(180deg)', 'skewX(0deg) rotate(360deg)'],
['skewX(0deg) rotate(0deg)', 'matrix(1, 0, 0, 1, 0, 0)', 'skewY(0deg) rotate(360deg)']
],
matrix: [
// matched matrix parameters do not collapse the values after them
['matrix(1,0,0,1,0,0) rotate(0deg)', 'matrix(1.5,0,0,1.5,0,0) rotate(180deg)', 'matrix(2,0,0,2,0,0) rotate(360deg)']
]
}
// Initial setup, which includes properties that will be overridden to
// test invalidation.
function initialStyle(div) {
div.style.width = '180px';
div.style.height = '150px';
div.style.margin = '50px';
div.style.borderLeft = 'solid 40px blue';
div.style.backgroundColor = 'green';
div.style.willChange = 'transform';
div.style.fontSize = '30px';
}
function finalStyle(div) {
div.style.width = '80px';
div.style.height = '80px';
div.style.fontSize = '15px';
}
function styleBody(){
let body = document.body;
body.style.display = 'flex';
body.style.flexDirection = 'row';
body.style.flexWrap = 'wrap';
}
// Simulate a static image at 50% progeress with a running animation.
// The easing curve has zero slope and curvature at its midpoint of 50% -> 50%.
// The timing values are chosen so as so that a delay of up to 10s will not
// cause a visual change.
const easing = 'cubic-bezier(0,1,1,0)';
const duration = 1e9;
const delay = -duration/2;
// Indices to unpack a test case, which is in the format
// [start, midpoint, end]
const startIndex = 0;
const midIndex = 1;
const endIndex = 2;
async function createTests(tests) {
styleBody();
for (const test of tests) {
let div = document.createElement('div');
document.body.appendChild(div);
initialStyle(div);
var anim = div.animate(
{transform: [test[startIndex], test[endIndex]]},
{duration: duration, delay: delay, easing: easing});
await anim.ready;
finalStyle(div); // Change size to test invalidation.
}
await new Promise(requestAnimationFrame);
await new Promise(requestAnimationFrame);
takeScreenshot();
}
// Create references using an animation with identical keyframes for start
// and end so as to avoid rounding and anti-aliasing differences between
// animated and non-animated pathways.
async function createRefs(tests) {
styleBody();
for (const test of tests) {
let div = document.createElement('div');
document.body.appendChild(div);
initialStyle(div);
finalStyle(div);
var anim = div.animate(
{transform: [test[midIndex], test[midIndex]]},
{duration: duration, delay: delay, easing: easing});
await anim.ready;
}
await new Promise(requestAnimationFrame);
await new Promise(requestAnimationFrame);
takeScreenshot();
}
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-animated-ref.html 0 → 100644
View file @ 29835fd5
<!DOCTYPE html>
<html class="reftest-wait">
<script src="../../../common/reftest-wait.js"></script>
<script src="support/transform-interpolation-reftests.js"></script>
<body>
<script>
const testName = window.location.search.substr(1);
createRefsWithAnimation(transformTests[testName]);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-matrix.html 0 → 100644
View file @ 29835fd5
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="match" href="transform-interpolation-ref.html?matrix">
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
<script src="../../../common/reftest-wait.js"></script>
<script src="support/transform-interpolation-reftests.js"></script>
<body>
<script>
createTests(transformTests.matrix);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-ref.html 0 → 100644
View file @ 29835fd5
<!DOCTYPE html>
<html class="reftest-wait">
<script src="../../../common/reftest-wait.js"></script>
<script src="support/transform-interpolation-reftests.js"></script>
<body>
<script>
const testName = window.location.search.substr(1);
createRefs(transformTests[testName]);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-rotate.html 0 → 100644
View file @ 29835fd5
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="match" href="transform-interpolation-ref.html?rotate">
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
<script src="../../../common/reftest-wait.js"></script>
<script src="support/transform-interpolation-reftests.js"></script>
<body>
<script>
createTests(transformTests.rotate);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-scale.html 0 → 100644
View file @ 29835fd5
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="match" href="transform-interpolation-ref.html?scale">
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
<script src="../../../common/reftest-wait.js"></script>
<script src="support/transform-interpolation-reftests.js"></script>
<body>
<script>
createTests(transformTests.scale);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-skew.html 0 → 100644
View file @ 29835fd5
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="match" href="transform-interpolation-ref.html?skew">
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
<script src="../../../common/reftest-wait.js"></script>
<script src="support/transform-interpolation-reftests.js"></script>
<body>
<script>
createTests(transformTests.skew);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-translate-em.html 0 → 100644
View file @ 29835fd5
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="match" href="transform-interpolation-ref.html?translateEm">
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
<script src="../../../common/reftest-wait.js"></script>
<script src="support/transform-interpolation-reftests.js"></script>
<body>
<script>
createTests(transformTests.translateEm);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-interpolation-translate.html 0 → 100644
View file @ 29835fd5
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="match" href="transform-interpolation-ref.html?translate">
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
<script src="../../../common/reftest-wait.js"></script>
<script src="support/transform-interpolation-reftests.js"></script>
<body>
<script>
createTests(transformTests.translate);
</script>
third_party/blink/web_tests/virtual/threaded/external/wpt/css/css-transforms/animation/README.txt 0 → 100644
View file @ 29835fd5
# This suite runs the test in external/wpt/css/css-transforms/animation/ with
# --enable-threaded-compositing
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