diff options
Diffstat (limited to '')
-rw-r--r-- | testing/web-platform/tests/intersection-observer/clip-path.html | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/testing/web-platform/tests/intersection-observer/clip-path.html b/testing/web-platform/tests/intersection-observer/clip-path.html new file mode 100644 index 0000000000..a43d3fb7b0 --- /dev/null +++ b/testing/web-platform/tests/intersection-observer/clip-path.html @@ -0,0 +1,77 @@ +<!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> +body { margin: 0 } +pre, #log { + position: absolute; + top: 0; + left: 200px; +} +#target { + background-color: green; + width: 100px; + height: 100px; +} +#container { + padding: 8px; + width: 0px; + height: 0px; +} +</style> + +<div id="container"> + <div id="target"></div> +</div> + +<script> +var vw = document.documentElement.clientWidth; +var vh = document.documentElement.clientHeight; + +var entries = []; + +promise_test(async function(t) { + var target = document.getElementById("target"); + var container = document.getElementById("container"); + var root = document.getElementById("root"); + var observer = new IntersectionObserver(function(changes) { + entries = entries.concat(changes) + }); + observer.observe(target); + entries = entries.concat(observer.takeRecords()); + assert_equals(entries.length, 0, "No initial notifications."); + + await waitForNotification(); + + checkLastEntry( + entries, + 0, + [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true], + "IntersectionObserver notification after first rAF", + ); + container.style.clipPath = "inset(1000px)"; + + await waitForNotification(); + + checkLastEntry( + entries, + 1, + [8, 108, 8, 108, 0, 0, 0, 0, 0, vw, 0, vh, false], + "IntersectionObserver should send a not-intersecting notification for a target that gets fully clipped by clip-path.", + ); + + container.style.clipPath = ""; + + await waitForNotification(); + + checkLastEntry( + entries, + 2, + [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true], + "Intersecting notification after removing display:none on target.", + ); +}); +</script> |