diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-030.html | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-030.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-030.html | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-030.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-030.html new file mode 100644 index 0000000000..397f8de519 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-030.html @@ -0,0 +1,183 @@ +<!doctype HTML> +<html> +<meta charset="utf8"> +<title>Content Visibility: intersection observer interactions</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> +<meta name="assert" content="content-visibility hidden is not intersecting from IO perspective"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +div { + width: 100px; + height: 100px; +} +#spacer { + height: 3000px; +} +.hidden { + content-visibility: hidden; +} +</style> + +<div id="target1"> + <div id="target2"></div> +</div> +<div id="target3"> + <div id="target4"></div> +</div> +<div id="spacer"></div> +<div id="find_me"></div> + +<script> +async_test((t) => { + let target1, target2, target3, target4; + let observer; + let entries = []; + + // Set everything up. + function enqueueStep1() { + target1 = document.getElementById("target1"); + target2 = document.getElementById("target2"); + target3 = document.getElementById("target3"); + target4 = document.getElementById("target4"); + + observer = new IntersectionObserver((new_entries) => { + entries = entries.concat(new_entries); + }); + observer.observe(target1); + observer.observe(target2); + observer.observe(target3); + observer.observe(target4); + + entries = entries.concat(observer.takeRecords()); + t.step(() => { assert_equals(entries.length, 0, "No initial notifications") }); + requestAnimationFrame(() => { + requestAnimationFrame(() => { + runStep1(); + }); + }); + } + + // Verify that all elements are visible at the start, with intersection events. + function runStep1() { + const step = arguments.callee.name; + t.step(() => { + assert_equals(entries.length, 4, step); + // Clear the observed visible targets. + for (let i = 0; i < entries.length; ++i) { + assert_true(entries[i].isIntersecting); + assert_true(entries[i].target === target1 || + entries[i].target === target2 || + entries[i].target === target3 || + entries[i].target === target4, step); + } + }); + + entries = []; + enqueueStep2(); + } + + // Lock target3. + async function enqueueStep2() { + target3.classList.add("hidden"); + requestAnimationFrame(() => { + requestAnimationFrame(() => { + runStep2(); + }); + }); + } + + // Verify that the hidden element received a not-intersecting event. + function runStep2() { + const step = arguments.callee.name; + t.step(() => { + assert_equals(entries.length, 1, step); + assert_false(entries[0].isIntersecting, step); + assert_equals(entries[0].target, target4, step); + }); + + entries = []; + enqueueStep3(); + } + + // Scroll all elements off screen. + function enqueueStep3() { + document.getElementById("find_me").scrollIntoView(); + requestAnimationFrame(() => { + requestAnimationFrame(() => { + runStep3(); + }); + }); + } + + // Verify that all elements received not intersecting event, except + // target4, which was already not intersecting due to being hidden. + function runStep3() { + const step = arguments.callee.name; + t.step(() => { + assert_equals(entries.length, 3, step); + for (let i = 0; i < entries.length; ++i) { + assert_false(entries[i].isIntersecting, step); + assert_not_equals(entries[i].target, target4, step); + } + }); + + entries = []; + enqueueStep4(); + } + + // Scroll the elements back on screen. + function enqueueStep4() { + target1.scrollIntoView(); + requestAnimationFrame(() => { + requestAnimationFrame(() => { + runStep4(); + }); + }); + } + + // Verify that all elements received not intersecting event, except + // target4, which remains not intersecting. + function runStep4() { + const step = arguments.callee.name; + t.step(() => { + assert_equals(entries.length, 3, step); + for (let i = 0; i < entries.length; ++i) { + assert_true(entries[i].isIntersecting); + assert_not_equals(entries[i].target, target4, step); + } + }); + + entries = []; + enqueueStep5(); + } + + // Unlock target3. + async function enqueueStep5() { + target3.classList.remove("hidden"); + requestAnimationFrame(() => { + requestAnimationFrame(() => { + runStep5(); + }); + }); + } + + function runStep5() { + const step = arguments.callee.name; + t.step(() => { + assert_equals(entries.length, 1, step); + assert_true(entries[0].isIntersecting, step); + assert_equals(entries[0].target, target4, step); + }); + t.done(); + } + + + window.onload = () => { + requestAnimationFrame(enqueueStep1); + }; +}, "IntersectionObserver interactions"); +</script> |