Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-viewport/zoom/animation-range.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<title>CSS Zoom applies to animation-range-start/animation-range-end</title>
<link rel="author" title="Sam Weinig" href="mailto:sam@webkit.org">
<link rel="match" href="reference/animation-range-ref.html">
<script src="/web-animations/testcommon.js"></script>
<script src="/common/reftest-wait.js"></script>
<style>
.group {
border: solid black 1px;
padding: 20px;
margin: 10px;
width: max-content;
}
.spacer {
height: 1000px;
}
.scroller {
display: inline-block;
outline: 1px solid black;
margin: 0 10px;
padding: 0;
border: 0;
overflow-y: scroll;
width: 200px;
height: 200px;
scroll-timeline: --t1;
animation-range: 200px 900px;
}
.scroller-zoomed {
display: inline-block;
outline: 1px solid black;
margin: 0 10px;
padding: 0;
border: 0;
overflow-y: scroll;
width: 200px;
height: 200px;
scroll-timeline: --t1;
animation-range: 100px 450px;
}
@keyframes grow {
to { width: 200px }
}
@keyframes grow-zoomed {
to { width: 100px }
}
.target {
position: fixed;
height: 100px;
width: 0px;
background-color: black;
}
.target-zoomed {
position: fixed;
height: 50px;
width: 0px;
background-color: black;
}
.anim-1 {
animation: auto grow linear;
animation-timeline: --t1;
animation-range: 200px 900px;
}
.anim-2 {
animation: auto grow linear;
animation-timeline: --t1;
animation-range: inherit;
}
.anim-3 {
animation: auto grow-zoomed linear;
animation-timeline: --t1;
animation-range: 100px 450px;
}
.anim-4 {
animation: auto grow-zoomed linear;
animation-timeline: --t1;
animation-range: inherit;
}
</style>
</head>
<body>
<p>Each grouping below should have two matching boxes.</p>
<div class="group">
<div class="scroller" id="scroller1">
<div class="target" id="target1" style="zoom: 1"></div>
<div class="spacer"></div>
</div>
<div class="scroller" id="scroller2">
<div class="target" id="target2" style="zoom: 1"></div>
<div class="spacer"></div>
</div>
</div>
<div class="group">
<div class="scroller-zoomed" id="scroller3">
<div class="target-zoomed" id="target3" style="zoom: 2"></div>
<div class="spacer"></div>
</div>
<div class="scroller-zoomed" id="scroller4">
<div class="target-zoomed" id="target4" style="zoom: 2"></div>
<div class="spacer"></div>
</div>
</div>
<script>
const target1 = document.getElementById('target1');
const target2 = document.getElementById('target2');
const target3 = document.getElementById('target3');
const target4 = document.getElementById('target4');
const scroller1 = document.getElementById('scroller1');
const scroller2 = document.getElementById('scroller2');
const scroller3 = document.getElementById('scroller3');
const scroller4 = document.getElementById('scroller4');
target1.classList.add("anim-1");
const animation1 = target1.getAnimations()[0];
target2.classList.add("anim-2");
const animation2 = target2.getAnimations()[0];
target3.classList.add("anim-3");
const animation3 = target3.getAnimations()[0];
target4.classList.add("anim-4");
const animation4 = target4.getAnimations()[0];
Promise.all([animation1.ready, animation2.ready, animation3.ready, animation4.ready]).then(() => {
const maxScroll1 = scroller1.scrollHeight - scroller1.clientHeight;
scroller1.scrollTop = (maxScroll1 + 300) * 0.5;
const maxScroll2 = scroller2.scrollHeight - scroller2.clientHeight;
scroller2.scrollTop = (maxScroll2 + 300) * 0.5;
const maxScroll3 = scroller3.scrollHeight - scroller3.clientHeight;
scroller3.scrollTop = (maxScroll3 + 300) * 0.5;
const maxScroll4 = scroller4.scrollHeight - scroller4.clientHeight;
scroller4.scrollTop = (maxScroll4 + 300) * 0.5;
waitForAnimationFrames(2).then(takeScreenshot);
});
</script>
</body>
</html>