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/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.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/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html')
| -rw-r--r-- | testing/web-platform/tests/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html new file mode 100644 index 0000000000..e28e85245e --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html @@ -0,0 +1,148 @@ +<!DOCTYPE html> +<title>The animation-timeline: scroll() notation</title> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-notation"> +<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/6674"> +<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 { translate: 50px; } + to { translate: 150px; } + } + html { + min-height: 100vh; + /* This makes the max scrollable ragne be 100px in root element */ + padding-bottom: 100px; + } + #container { + width: 300px; + height: 300px; + overflow: scroll; + } + #target { + width: 100px; + /* This makes the max scrollable ragne be 100px in the block direction */ + height: 100px; + } + /* large block content */ + .block-content { + block-size: 100%; + } + /* large inline content */ + .inline-content { + inline-size: 100%; + block-size: 5px; + /* This makes the max scrollable ragne be 100px in the inline direction */ + padding-inline-end: 100px; + } +</style> +<body> +<div id="log"></div> +<script> +"use strict"; + +setup(assert_implements_animation_timeline); + +const root = document.scrollingElement; +const createTargetWithStuff = function(t, contentClass) { + let container = document.createElement('div'); + container.id = 'container'; + let target = document.createElement('div'); + target.id = 'target'; + let content = document.createElement('div'); + content.className = contentClass; + + // <div id='container'> + // <div id='target'></div> + // <div class=contentClass></div> + // </div> + document.body.appendChild(container); + container.appendChild(target); + container.appendChild(content); + + if (t && typeof t.add_cleanup === 'function') { + t.add_cleanup(() => { + content.remove(); + target.remove(); + container.remove(); + }); + } + + return [container, target]; +}; + +async function scrollLeft(element, value) { + element.scrollLeft = value; + await waitForNextFrame(); +} + +async function scrollTop(element, value) { + element.scrollTop = value; + await waitForNextFrame(); +} + +promise_test(async t => { + let [container, div] = createTargetWithStuff(t, 'block-content'); + div.style.animation = "anim 10s linear"; + div.style.animationTimeline = "scroll(nearest)"; + + await scrollTop(root, 50); + assert_equals(getComputedStyle(div).translate, '50px'); + + await scrollTop(container, 50); + assert_equals(getComputedStyle(div).translate, '100px'); + + await scrollTop(root, 0); +}, 'animation-timeline: scroll(nearest)'); + +promise_test(async t => { + let [container, div] = createTargetWithStuff(t, 'block-content'); + div.style.animation = "anim 10s linear"; + div.style.animationTimeline = "scroll(root)"; + + await scrollTop(container, 50); + assert_equals(getComputedStyle(div).translate, '50px'); + + await scrollTop(root, 50); + assert_equals(getComputedStyle(div).translate, '100px'); + + await scrollTop(root, 0); +}, 'animation-timeline: scroll(root)'); + +promise_test(async t => { + let [container, div] = createTargetWithStuff(t, 'inline-content'); + div.style.animation = "anim 10s linear"; + div.style.animationTimeline = "scroll(inline)"; + + await scrollLeft(container, 50); + assert_equals(getComputedStyle(div).translate, '100px'); +}, 'animation-timeline: scroll(inline)'); + +promise_test(async t => { + let [container, div] = createTargetWithStuff(t, 'block-content'); + container.style.writingMode = 'vertical-lr'; + div.style.animation = "anim 10s linear"; + div.style.animationTimeline = "scroll(horizontal)"; + + await scrollLeft(container, 50); + assert_equals(getComputedStyle(div).translate, '100px'); +}, 'animation-timeline: scroll(horizontal)'); + +promise_test(async t => { + let [container, div] = createTargetWithStuff(t, 'inline-content'); + container.style.writingMode = 'vertical-lr'; + div.style.animation = "anim 10s linear"; + div.style.animationTimeline = "scroll(vertical)"; + + await scrollTop(container, 50); + assert_equals(getComputedStyle(div).translate, '100px'); +}, 'animation-timeline: scroll(vertical)'); + +// TODO: Add more tests which change the overflow property of the container for +// scroll(nearest) + +</script> +</body> |