Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-26 12:20:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1600380 [wpt PR 20541] - Add ref tests for web-animation play controls, a=testonly

Browse Source 
Automatic update from web-platform-tests
Add ref tests for web-animation play controls

This patch adds ref tests for play controls and enables these tests to
run as part of a virtual test suite with the compositor enabled. The
tests are designed to catch regression that break animation play
controls.

Tests were added for syncing the compositor start time as well as
updating the playback rate.

The test for zero playback rate exposed a bug where it should have been
disabled on the compositor but wasn't. This bug is also fixed in the
patch.

Bug: 1029123
Change-Id: I0304d80b93ef273dd2f1dbcd58e2371bc046941e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1943367
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#720190}

--

wpt-commits: 995900fc628dcbfd79fb78dc816e5bea17119c84
wpt-pr: 20541
This commit is contained in:
Kevin Ellis 2019-12-02 13:37:40 +00:00 committed by moz-wptsync-bot
parent feca6ca858
commit 3de51ca203
9 changed files with 329 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
testing/web-platform/tests/lint.whitelist
View File

@ -201,7 +201,7 @@ SET TIMEOUT: shadow-dom/slotchange-event.html
SET TIMEOUT: trusted-types/block-string-assignment-to-DOMWindowTimers-setTimeout-setInterval.tentative.html
SET TIMEOUT: trusted-types/DOMWindowTimers-setTimeout-setInterval.tentative.html
SET TIMEOUT: user-timing/*
SET TIMEOUT: web-animations/timing-model/animations/reverse-running-animation.html
SET TIMEOUT: web-animations/timing-model/animations/*
SET TIMEOUT: webaudio/the-audio-api/the-mediaelementaudiosourcenode-interface/mediaElementAudioSourceToScriptProcessorTest.html
SET TIMEOUT: webauthn/*timeout.https.html
SET TIMEOUT: webdriver/*

20
testing/web-platform/tests/web-animations/timing-model/animations/sync-start-times-ref.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Reference for sync start times</title>
<style>
#notes {
position: absolute;
left: 0px;
top: 100px;
}
</style>
<body>
<p id="notes">
This test creates a pair of animations, starts the first animation and then
syncs the second animation to align with the first. The test passes if the
box associated with the first animation is completely occluded by the
second.
</p>
</body>

68
testing/web-platform/tests/web-animations/timing-model/animations/sync-start-times.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="UTF-8">
<title>sync start times</title>
<link rel="match" href="sync-start-times-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>
#box-1, #box-2 {
border: 1px solid white;
height: 40px;
left: 40px;
position: absolute;
top: 40px;
width: 40px;
}
#box-1 {
background: blue;
z-index: 1;
}
#box-2 {
background: white;
z-index: 2;
}
#notes {
position: absolute;
left: 0px;
top: 100px;
}
</style>
<body>
<div id="box-1"></div>
<div id="box-2"></div>
<p id="notes">
This test creates a pair of animations, starts the first animation and then
syncs the second animation to align with the first. The test passes if the
box associated with the first animation is completely occluded by the
second.
</p>
</body>
<script>
onload = function() {
function createAnimation(elementId) {
const elem = document.getElementById(elementId);
const keyframes = [
{ transform: 'translateX(0px)' },
{ transform: 'translateX(200px)' }
];
const anim = elem.animate(keyframes, { duration: 1000 });
anim.pause();
return anim;
};
const anim1 = createAnimation('box-1');
const anim2 = createAnimation('box-2');
anim1.currentTime = 500;
anim1.play();
anim1.ready.then(() => {
anim2.startTime = anim1.startTime;
requestAnimationFrame(() => {
takeScreenshot();
});
});
};
</script>

20
testing/web-platform/tests/web-animations/timing-model/animations/update-playback-rate-fast-ref.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<title>Reference for update playback rate zero</title>
<style>
#notes {
position: absolute;
left: 0px;
top: 100px;
}
body {
background: white;
}
</style>
<body>
<div id="box"></div>
<p id="notes">
This test creates a running animation and changes its playback rate
part way through. The animation finishes ahead of the screenshot.
If any blue pixels appear in the screenshot, the test fails.
</p>
</body>

62
testing/web-platform/tests/web-animations/timing-model/animations/update-playback-rate-fast.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="UTF-8">
<title>Update playback rate zero</title>
<link rel="match" href="update-playback-rate-fast-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>
#box-1, #box-2 {
border: 1px solid white;
height: 40px;
left: 40px;
position: absolute;
top: 40px;
width: 40px;
}
#box-1 {
background: blue;
z-index: 1;
}
#box-2 {
background: white;
transform: translateX(0px);
z-index: 2;
}
#notes {
position: absolute;
left: 0px;
top: 100px;
}
body {
background: white;
}
</style>
<body>
<div id="box-1"></div>
<div id="box-2"></div>
<p id="notes">
This test creates a running animation and changes its playback rate
part way through. The animation finishes ahead of the screenshot.
If any blue pixels appear in the screenshot, the test fails.
</p>
</body>
<script>
onload = function() {
const elem = document.getElementById('box-1');
const anim = elem.animate([
{ transform: 'translateX(100px)' },
{ transform: 'translateX(100px)' },
{ transform: 'translateX(200px)' },
{ transform: 'translateX(200px)' }
], {
duration: 1000
});
anim.ready.then(() => {
anim.updatePlaybackRate(2);
takeScreenshotDelayed(750);
});
};
</script>

18
testing/web-platform/tests/web-animations/timing-model/animations/update-playback-rate-slow-ref.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>Reference for update playback rate zero</title>
<style>
#notes {
position: absolute;
left: 0px;
top: 100px;
}
</style>
<body>
<div id="box"></div>
<p id="notes">
This test creates a running animation and changes its playback rate
part way through. The animation slows down so that it does not finish
before the screenshot. If any blue pixels appear in the screenshot,
the test fails.
</p>
</body>

62
testing/web-platform/tests/web-animations/timing-model/animations/update-playback-rate-slow.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="UTF-8">
<title>Update playback rate zero</title>
<link rel="match" href="update-playback-rate-slow-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>
#box-1, #box-2 {
border: 1px solid white;
height: 40px;
left: 40px;
position: absolute;
top: 40px;
width: 40px;
}
#box-1 {
background: blue;
z-index: 1;
}
#box-2 {
background: white;
transform: translateX(200px);
z-index: 2;
}
#notes {
position: absolute;
left: 0px;
top: 100px;
}
</style>
<body>
<div id="box-1"></div>
<div id="box-2"></div>
<p id="notes">
This test creates a running animation and changes its playback rate
part way through. The animation slows down so that it does not finish
before the screenshot. If any blue pixels appear in the screenshot,
the test fails.
</p>
</body>
<script>
onload = function() {
const elem = document.getElementById('box-1');
const anim = elem.animate([
{ transform: 'translateX(100px)' },
{ transform: 'translateX(100px)' },
{ transform: 'translateX(200px)' },
{ transform: 'translateX(200px)' }
], {
duration: 1000
});
anim.ready.then(() => {
setTimeout(() => {
anim.updatePlaybackRate(0.5);
}, 500);
takeScreenshotDelayed(1000);
});
};
</script>

17
testing/web-platform/tests/web-animations/timing-model/animations/update-playback-rate-zero-ref.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>Reference for update playback rate zero</title>
<style>
#notes {
position: absolute;
left: 0px;
top: 100px;
}
</style>
<body>
<div id="box"></div>
<p id="notes">
This test creates a running animation and changes its playback rate
part way through. The animation should stop behind an occluding rectangle.
If not fully occluded, the test fails.
</p>
</body>

61
testing/web-platform/tests/web-animations/timing-model/animations/update-playback-rate-zero.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="UTF-8">
<title>Update playback rate zero</title>
<link rel="match" href="update-playback-rate-zero-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>
#box-1, #box-2 {
border: 1px solid white;
height: 40px;
left: 40px;
position: absolute;
top: 40px;
width: 40px;
}
#box-1 {
background: blue;
z-index: 1;
}
#box-2 {
background: white;
transform: translateX(200px);
z-index: 2;
}
#notes {
position: absolute;
left: 0px;
top: 100px;
}
</style>
<body>
<div id="box-1"></div>
<div id="box-2"></div>
<p id="notes">
This test creates a running animation and changes its playback rate
part way through. The animation should stop behind an occluding rectangle.
If not fully occluded, the test fails.
</p>
</body>
<script>
onload = function() {
const elem = document.getElementById('box-1');
const anim = elem.animate([
{ transform: 'translateX(100px)' },
{ transform: 'translateX(100px)' },
{ transform: 'translateX(200px)' },
{ transform: 'translateX(200px)' }
], {
duration: 1000
});
anim.ready.then(() => {
setTimeout(() => {
anim.updatePlaybackRate(0);
}, 750);
takeScreenshotDelayed(1200);
});
};
</script>