summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative.html
parentInitial commit. (diff)
downloadfirefox-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-view-functional-notation.tentative.html')
-rw-r--r--testing/web-platform/tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative.html263
1 files changed, 263 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative.html
new file mode 100644
index 0000000000..d93306819a
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative.html
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<title>The animation-timeline: view() notation</title>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<link rel="help" src="https://w3c.github.io/csswg-drafts/scroll-animations-1/#view-notation">
+<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7587">
+<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 fade-in-out {
+ enter 0% { opacity: 0; }
+ enter 100% { opacity: 1; }
+ exit 0% { opacity: 1; }
+ exit 100% { opacity: 0; }
+ }
+ @keyframes fade-out {
+ exit 0% { opacity: 1; }
+ exit 100% { opacity: 0; }
+ }
+ @keyframes change-font-size {
+ exit 0% { font-size: 10px; }
+ exit 100% { font-size: 20px; }
+ }
+ #container {
+ width: 200px;
+ height: 200px;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ }
+ .target {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ }
+ .content {
+ width: 400px;
+ height: 400px;
+ background-color: blue;
+ }
+</style>
+
+<body>
+<script>
+"use strict";
+
+setup(assert_implements_animation_timeline);
+
+const createTargetWithStuff = function(t, divClasses) {
+ let container = document.createElement('div');
+ container.id = 'container';
+ document.body.appendChild(container);
+
+ // *** When testing inset
+ // <div id='container'>
+ // <div class='content'></div>
+ // <div class='target'></div>
+ // <div class='content'></div>
+ // </div>
+ // *** When testing axis
+ // <div id='container'>
+ // <div class='target'></div>
+ // <div class='content'></div>
+ // </div>
+
+ let divs = [];
+ let target;
+ for(let className of divClasses) {
+ let div = document.createElement('div');
+ div.className = className;
+ container.appendChild(div);
+
+ divs.push(div);
+ if(className === 'target')
+ target = div;
+ }
+
+ if (t && typeof t.add_cleanup === 'function') {
+ t.add_cleanup(() => {
+ for(let div of divs)
+ div.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, ['content', 'target', 'content']);
+ div.style.animation = "fade-in-out 1s linear";
+ div.style.animationTimeline = "view()";
+
+ await scrollTop(container, 200);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At enter 0%');
+ await scrollTop(container, 250);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At enter 50%');
+ await scrollTop(container, 300);
+ assert_equals(getComputedStyle(div).opacity, '1', 'At enter 100%');
+
+ await scrollTop(container, 400);
+ assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
+ await scrollTop(container, 450);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
+ await scrollTop(container, 500);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
+}, 'animation-timeline: view()');
+
+promise_test(async t => {
+ let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
+ div.style.animation = "fade-in-out 1s linear";
+ div.style.animationTimeline = "view(50px)";
+
+ await scrollTop(container, 250);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At enter 0%');
+ await scrollTop(container, 300);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At enter 50%');
+
+ await scrollTop(container, 350);
+ assert_equals(getComputedStyle(div).opacity, '1', 'At enter 100% & exit 0%');
+
+ await scrollTop(container, 400);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
+ await scrollTop(container, 450);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
+}, 'animation-timeline: view(50px)');
+
+promise_test(async t => {
+ let [container, div] = createTargetWithStuff(t, ['content', 'target', 'content']);
+ div.style.animation = "fade-in-out 1s linear";
+ div.style.animationTimeline = "view(auto 50px)";
+
+ await scrollTop(container, 250);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At enter 0%');
+ await scrollTop(container, 300);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At enter 50%');
+ await scrollTop(container, 350);
+ assert_equals(getComputedStyle(div).opacity, '1', 'At enter 100%');
+
+ await scrollTop(container, 400);
+ assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
+ await scrollTop(container, 450);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
+ await scrollTop(container, 500);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
+}, 'animation-timeline: view(auto 50px)');
+
+promise_test(async t => {
+ let [container, div] = createTargetWithStuff(t, ['target', 'content']);
+ container.style.overflow = 'scroll';
+ div.style.animation = "fade-out 1s linear";
+ div.style.animationTimeline = "view(inline)";
+
+ await scrollLeft(container, 0);
+ assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
+ await scrollLeft(container, 50);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
+ await scrollLeft(container, 100);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
+}, 'animation-timeline: view(inline)');
+
+promise_test(async t => {
+ let [container, div] = createTargetWithStuff(t, ['target', 'content']);
+ container.style.overflow = 'scroll';
+ div.style.animation = "fade-out 1s linear";
+ div.style.animationTimeline = "view(horizontal)";
+
+ await scrollLeft(container, 0);
+ assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
+ await scrollLeft(container, 50);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
+ await scrollLeft(container, 100);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
+}, 'animation-timeline: view(horizontal)');
+
+promise_test(async t => {
+ let [container, div] = createTargetWithStuff(t, ['target', 'content']);
+ container.style.overflow = 'scroll';
+ div.style.animation = "fade-out 1s linear";
+ div.style.animationTimeline = "view(vertical)";
+
+ await scrollTop(container, 0);
+ assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
+ await scrollTop(container, 50);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
+ await scrollTop(container, 100);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
+}, 'animation-timeline: view(vertical)');
+
+promise_test(async t => {
+ let [container, div] = createTargetWithStuff(t, ['target', 'content']);
+ container.style.overflowY = 'hidden';
+ container.style.overflowX = 'scroll';
+ div.style.animation = "fade-out 1s linear";
+ div.style.animationTimeline = "view(horizontal 50px)";
+
+ await scrollLeft(container, 0);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
+ await scrollLeft(container, 50);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
+}, 'animation-timeline: view(horizontal 50px)');
+
+promise_test(async t => {
+ let [container, div] = createTargetWithStuff(t, ['target', 'content']);
+ container.style.overflow = 'scroll';
+ div.style.animation = "fade-out 1s linear, change-font-size 1s linear";
+ div.style.animationTimeline = "view(), view(inline)";
+
+ await scrollLeft(container, 0);
+ assert_equals(getComputedStyle(div).fontSize, '10px', 'At exit 0% inline');
+ await scrollLeft(container, 50);
+ assert_equals(getComputedStyle(div).fontSize, '15px', 'At exit 50% inline');
+ await scrollLeft(container, 100);
+ assert_equals(getComputedStyle(div).fontSize, '20px', 'At exit 100% inline');
+
+ await scrollLeft(container, 0);
+
+ await scrollTop(container, 0);
+ assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0% block');
+ await scrollTop(container, 50);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50% block');
+ await scrollTop(container, 100);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100% block');
+
+ await scrollLeft(container, 50);
+ await scrollTop(container, 50);
+ assert_equals(getComputedStyle(div).fontSize, '15px', 'At exit 50% inline');
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50% block');
+}, 'animation-timeline: view(), view(inline)');
+
+promise_test(async t => {
+ let [container, div] = createTargetWithStuff(t, ['target', 'content']);
+ container.style.overflowY = 'hidden';
+ container.style.overflowX = 'scroll';
+ div.style.animation = "fade-out 1s linear";
+
+ div.style.animationTimeline = "view(inline)";
+ await scrollLeft(container, 0);
+ assert_equals(getComputedStyle(div).opacity, '1', 'At exit 0%');
+ await scrollLeft(container, 50);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
+ await scrollLeft(container, 100);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
+
+ div.style.animationTimeline = "view(inline 50px)";
+ await scrollLeft(container, 0);
+ assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50%');
+ await scrollLeft(container, 50);
+ assert_equals(getComputedStyle(div).opacity, '0', 'At exit 100%');
+}, 'animation-timeline: view(inline) changes to view(inline 50px)');
+
+</script>
+</body> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-22 08:19:37 +0000