Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /web-animations/timing-model/animations/sync-start-times.html - WPT Dashboard Interop Dashboard
<!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;
/* To ensure Chrome to render the two boxes (one actively
animating and the other not) with the same subpixel offset
when there is subpixel translation during animation. */
will-change: transform;
}
#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>