Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-29 00:58:20 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 28ac8ff82f255bfb5c799b6d433d19d0a0eb0e34

Browse source
This commit is contained in:
WPT Sync Bot 2021-01-09 08:20:14 +00:00
parent b2465a1f22
commit 9115c87050
166 changed files with 2072 additions and 749 deletions
Download patch file Download diff file Expand all files Collapse all files

47
tests/wpt/web-platform-tests/css/css-backgrounds/animations/one-element-three-keyframes-animation1.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
<link rel="match" href="one-element-animation-ref.html">
<style>
.container {
width: 100px;
height: 100px;
background-color: green;
/* Use a long animation that start at 5% progress where the slope of the
selected timing function is zero. By setting up the animation in this way,
we accommodate lengthy delays in running the test without a potential drift
in the animated property value. This is important for avoiding flakes,
especially on debug builds. The screenshots are taken as soon as the
animation is ready, thus the long animation duration has no bearing on
the actual duration of the test. */
animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -50000s;
}
@keyframes bgcolor {
0% { background-color: rgb(0, 200, 0); }
10% {
background-color: rgb(200, 0, 0);
animation-timing-function: cubic-bezier(0,1,1,0);
}
100% {
background-color: rgb(0, 0, 200);
animation-timing-function: cubic-bezier(0,1,1,0);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<body>
<div class="container"></div>
<script>
// This test and the "one-element-three-keyframes-animation2.html" ensure that
// we select the correct start and end keyframes for interpolation. In this
// test, the start delay of the animation makes it jump to 5% right away, and in
// the "one-element-three-keyframes-animation2.html" the start delay makes it
// jump to 50%. So for this test, we would choose the keyframes at 0% and 10%
// for interpolation, where for the other test it would be 10% and 100%.
document.getAnimations()[0].ready.then(() => {
takeScreenshot();
});
</script>
</body>
</html>

10
tests/wpt/web-platform-tests/css/css-backgrounds/animations/one-element-three-keyframes-animation2-ref.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(100, 0, 100)';
ctx.fillRect(0, 0, 100, 100);
</script>

45
tests/wpt/web-platform-tests/css/css-backgrounds/animations/one-element-three-keyframes-animation2.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
<link rel="match" href="one-element-three-keyframes-animation2-ref.html">
<style>
.container {
width: 100px;
height: 100px;
background-color: green;
/* Use a long animation that start at 50% progress where the slope of the
selected timing function is zero. By setting up the animation in this way,
we accommodate lengthy delays in running the test without a potential drift
in the animated property value. This is important for avoiding flakes,
especially on debug builds. The screenshots are taken as soon as the
animation is ready, thus the long animation duration has no bearing on
the actual duration of the test. */
animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s;
}
@keyframes bgcolor {
0% { background-color: rgb(0, 200, 0); }
10% {
background-color: rgb(200, 0, 0);
animation-timing-function: cubic-bezier(0,1,1,0);
}
100% {
background-color: rgb(0, 0, 200);
animation-timing-function: cubic-bezier(0,1,1,0);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<body>
<div class="container"></div>
<script>
// The start delay of the animation makes it jump 50% of the animation, which
// means we would select the keyframes at 10% and 100% for animation. The
// progress would be (0.5-0.1) / (1-0.1) = 0.44. So a timing function input of
// 0.44 results in an output of 0.5.
document.getAnimations()[0].ready.then(() => {
takeScreenshot();
});
</script>
</body>
</html>

41
tests/wpt/web-platform-tests/css/css-backgrounds/animations/one-element-three-keyframes-animation3.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
<link rel="match" href="one-element-animation-ref.html">
<style>
.container {
width: 100px;
height: 100px;
background-color: green;
/* Use a long animation that start at 5% progress where the slope of the
selected timing function is zero. By setting up the animation in this way,
we accommodate lengthy delays in running the test without a potential drift
in the animated property value. This is important for avoiding flakes,
especially on debug builds. The screenshots are taken as soon as the
animation is ready, thus the long animation duration has no bearing on
the actual duration of the test. */
animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -50000s;
}
@keyframes bgcolor {
10% {
background-color: rgb(200, 0, 0);
animation-timing-function: cubic-bezier(0,1,1,0);
}
0% { background-color: rgb(0, 200, 0); }
100% {
background-color: rgb(0, 0, 200);
animation-timing-function: cubic-bezier(0,1,1,0);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<body>
<div class="container"></div>
<script>
document.getAnimations()[0].ready.then(() => {
takeScreenshot();
});
</script>
</body>
</html>