Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /web-animations/responsive/fill-forwards-viewport-units.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>Fill-forwards animation with viewport units responds to viewport resize</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<style>
iframe {
width: 200px;
height: 200px;
border: none;
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
function createIframe(test) {
const iframe = document.createElement('iframe');
iframe.srcdoc = `
<style>
#target {
width: 0px;
height: 100px;
background: green;
}
</style>
<div id="target"></div>
`;
document.body.appendChild(iframe);
test.add_cleanup(() => iframe.remove());
return new Promise(resolve => iframe.addEventListener('load', () => resolve(iframe)));
}
promise_test(async t => {
const iframe = await createIframe(t);
const doc = iframe.contentDocument;
const win = iframe.contentWindow;
const target = doc.getElementById('target');
const anim = target.animate(
[{ width: '10vw' }, { width: '50vw' }],
{ duration: 1000, fill: 'forwards', easing: 'linear' }
);
anim.currentTime = 1000;
await anim.finished;
await waitForAnimationFrames(2);
// iframe is 200px wide, so 50vw = 100px.
assert_approx_equals(
parseFloat(win.getComputedStyle(target).width), 100, 1,
'Filled width should be 50vw of 200px viewport'
);
// Resize iframe to 400px wide.
iframe.style.width = '400px';
target.offsetHeight;
await waitForAnimationFrames(3);
// 50vw of 400px = 200px.
assert_approx_equals(
parseFloat(win.getComputedStyle(target).width), 200, 1,
'Filled width should update to 50vw of 400px viewport after resize'
);
// Resize iframe to 600px wide.
iframe.style.width = '600px';
target.offsetHeight;
await waitForAnimationFrames(3);
// 50vw of 600px = 300px.
assert_approx_equals(
parseFloat(win.getComputedStyle(target).width), 300, 1,
'Filled width should update to 50vw of 600px viewport after second resize'
);
}, 'fill: forwards with viewport units updates on viewport resize');
</script>
</body>