Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /intersection-observer/transform-animation.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#container {
width: 200px;
height: 200px;
background-color: black;
}
#target {
position: relative;
top: 100px;
width: 100%;
height: 1px;
background-color: gray;
}
</style>
<div id="container"><div id="target"></div></div>
<script>
promise_test(async function(t) {
let intersections = 0;
const observer = new IntersectionObserver(entries => ++intersections);
observer.observe(document.getElementById("target"));
await document.getElementById("container").animate({ transform: 'translate(0, 100px)' }, 1000).finished;
assert_equals(intersections, 1);
}, "An element that already intersects with the viewport does not trigger the observer callback when animating its transform.");
</script>