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

Update web-platform-tests to revision 3503c50a6452e153bde906a9c6644cb6237224fc

Browse source
This commit is contained in:
WPT Sync Bot 2019-11-30 08:24:23 +00:00
parent 3db473714b
commit dc71e05859
379 changed files with 37923 additions and 5120 deletions
Download patch file Download diff file Expand all files Collapse all files

17
tests/wpt/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation-ref.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>Reference for reverse running animation</title>
<style>
#box {
background: blue;
height: 40px;
width: 40px;
transform: translateX(100px);
will-change: transform;
}
</style>
<body>
<div id="box"></div>
<p>This test reverses the animation shortly after the box starts moving. If
the box doesn't move back to its original position, the test has failed.
</p>
</body>

41
tests/wpt/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="UTF-8">
<title>reverse running animation</title>
<link rel="match" href="reverse-running-animation-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>
#box {
background: blue;
height: 40px;
width: 40px;
}
</style>
<body>
<div id="box"></div>
<p>This test reverses the animation shortly after the box starts moving. If
the box doesn't move back to its original position, the test has failed.
</p>
</body>
<script>
onload = function() {
const elem = document.getElementById('box');
const anim = elem.animate([
{ transform: 'translateX(100px)' },
{ transform: 'translateX(100px)' },
{ transform: 'translateX(200px)' },
{ transform: 'translateX(200px)' }
], {
duration: 1000
});
anim.ready.then(() => {
setTimeout(() => {
anim.reverse();
}, 500);
takeScreenshotDelayed(900);
});
};
</script>

20
tests/wpt/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
tests/wpt/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
tests/wpt/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
tests/wpt/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
tests/wpt/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
tests/wpt/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
tests/wpt/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
tests/wpt/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>