Jo Steven Novaryo
01b4abfebd
Automatic update from web-platform-tests Add IntersectionObserver WPT and minor tidy up Signed-off-by: Jo Steven Novaryo <steven.novaryo@gmail.com> -- Apply suggestion Signed-off-by: Jo Steven Novaryo <steven.novaryo@gmail.com> -- wpt-commits: 11e47db3ae5ee123a1fb385ec4769160084c1934, 34cb8f326ccb0160666612b2a51999d32455160f wpt-pr: 57481
56 lines
1.6 KiB
HTML
56 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="./resources/intersection-observer-test-utils.js"></script>
|
|
|
|
<style>
|
|
pre, #log {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 200px;
|
|
}
|
|
#target {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: lightblue;
|
|
will-change: transform;
|
|
}
|
|
@keyframes slideup {
|
|
0% { transform: translateY(0) }
|
|
50% { transform: translateY(0) }
|
|
51% { transform: translateY(-2000px) }
|
|
100% { transform: translateY(-2000px) }
|
|
}
|
|
</style>
|
|
|
|
<div id="target"></div>
|
|
|
|
<script>
|
|
promise_test(t => {
|
|
return new Promise(async function(resolve, reject) {
|
|
let entries = [];
|
|
let target = document.getElementById("target");
|
|
let observer = new IntersectionObserver(function(changes) {
|
|
entries = entries.concat(changes);
|
|
assert_true(entries[0].isIntersecting);
|
|
changes.forEach(entry => {
|
|
if (!entry.isIntersecting) {
|
|
resolve("Received not-intersecting notification before animationend.");
|
|
}
|
|
});
|
|
});
|
|
target.style.animation = "4s linear slideup";
|
|
setTimeout(() => {
|
|
reject("Did not get a not-intersecting notification within 3 seconds.");
|
|
}, 3000);
|
|
target.addEventListener("animationend", evt => {
|
|
reject("animationend event fired before not-intersecting notification.");
|
|
});
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
observer.observe(target);
|
|
});
|
|
}, "IntersectionObserver generates notifications when "
|
|
+ "a transform animation changes intersection state");
|
|
</script>
|