diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/scroll-animations/css/view-timeline-dynamic.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/scroll-animations/css/view-timeline-dynamic.html')
| -rw-r--r-- | testing/web-platform/tests/scroll-animations/css/view-timeline-dynamic.html | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-dynamic.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-dynamic.html new file mode 100644 index 0000000000..207c8c4e22 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-dynamic.html @@ -0,0 +1,193 @@ +<!DOCTYPE html> +<title>Changes to view-timeline are reflected in dependent elements</title> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-shorthand"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script src="support/testcommon.js"></script> +<style> + @keyframes anim { + from { z-index: 0; } + to { z-index: 100; } + } + .scroller { + overflow: hidden; + width: 100px; + height: 100px; + view-timeline: t1 defer; + } + .scroller > div { + height: 100px; + } + #target { + height: 0px; + z-index: -1; + } +</style> +<main id=main></main> +<script> + setup(assert_implements_animation_timeline); + + function inflate(t, template) { + t.add_cleanup(() => main.replaceChildren()); + main.append(template.content.cloneNode(true)); + main.offsetTop; + } + async function scrollTop(e, value) { + e.scrollTop = value; + await waitForNextFrame(); + } + async function scrollLeft(e, value) { + e.scrollLeft = value; + await waitForNextFrame(); + } +</script> + +<template id=dynamic_view_timeline_name> + <style> + .timeline { + view-timeline: t1 ancestor; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div id=div75></div> + <div id=div25></div> + <div id=div_before></div> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, dynamic_view_timeline_name); + + await scrollTop(scroller, 50); + + // scrollTop=50 is 75% for div75. + div75.classList.add('timeline'); + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '75', 'div75'); + + // Identical timelines in div75 and div25 creates an ambiguity. + div25.classList.add('timeline'); + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '-1', 'ambiguous'); + // Removing the timeline from div75 unambiguously links div25 to the + // timeline, making scrollTop=50 at 25% for div25. + div75.classList.remove('timeline'); + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '25', 'div25'); + + // scrollTop=50 is before the timeline start for div_before. + div25.classList.remove('timeline'); + div_before.classList.add('timeline'); + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '-1', 'ahead of div_before'); + // Scroll to 25% (for div_before) to verify that we're linked to that + // timeline. + await scrollTop(scroller, 150); + assert_equals(getComputedStyle(target).zIndex, '25', 'div_before'); + + // Linking the timeline back to div25 verifies that the new scrollTop=150 is + // actually at 75%. + div_before.classList.remove('timeline'); + div25.classList.add('timeline'); + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '75', 'div25 again'); + }, 'Dynamically changing view-timeline-name'); +</script> + +<template id=dynamic_view_timeline_axis> + <style> + #timeline { + width: 100px; + height: 100px; + margin: 100px; + view-timeline: t1 ancestor; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div id=timeline style="background: red;"></div> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, dynamic_view_timeline_axis); + + await scrollTop(scroller, 50); // 25% (vertical) + await scrollLeft(scroller, 20); // 10% (horizontal) + + assert_equals(getComputedStyle(target).zIndex, '25', 'vertical'); + timeline.style.viewTimelineAxis = 'horizontal'; + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '10', 'horizontal'); + }, 'Dynamically changing view-timeline-axis'); +</script> + +<template id=dynamic_view_timeline_inset> + <style> + #timeline { + width: 100px; + height: 100px; + margin: 100px; + view-timeline: t1 ancestor; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div id=timeline style="background: red;"></div> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, dynamic_view_timeline_inset); + + await scrollTop(scroller, 50); // 25% (without inset). + + assert_equals(getComputedStyle(target).zIndex, '25', 'without inset'); + timeline.style.viewTimelineInset = '0px 50px'; + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '0', 'with inset'); + }, 'Dynamically changing view-timeline-inset'); +</script> + +<template id=timeline_display_none> + <style> + #timeline { + view-timeline: t1 ancestor; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div></div> + <div id=timeline></div> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, timeline_display_none); + + await scrollTop(scroller, 50); + assert_equals(getComputedStyle(target).zIndex, '25', 'display:block'); + timeline.style.display = 'none'; + await waitForNextFrame(); + // The timeline became inactive. + assert_equals(getComputedStyle(target).zIndex, '-1', 'display:none'); + }, 'Element with view-timeline becoming display:none'); +</script> |