diff options
Diffstat (limited to 'testing/web-platform/tests/scroll-animations/css')
66 files changed, 6556 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/animation-duration-auto.tentative.html b/testing/web-platform/tests/scroll-animations/css/animation-duration-auto.tentative.html new file mode 100644 index 0000000000..f44a682890 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-duration-auto.tentative.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>animation-duration: auto</title> +<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/6530"> +<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> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #scroller { + overflow: hidden; + width: 100px; + height: 100px; + } + #scroller > div { + height: 200px; + width: 200px; + } + + @keyframes anim { + from { z-index: 0; } + to { z-index: 100; } + } + + #scroller { + scroll-timeline: timeline; + } + + #element { + z-index: -1; + animation-name: anim; + animation-duration: auto; + animation-timeline: timeline; + } +</style> +<main> + <div id=scroller> + <div></div> + </div> + <div id=element></div> +</main> +<script> + promise_test(async (t) => { + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(element).zIndex, '0'); + }, 'A value of auto can be specified for animation-duration'); +</script> + +<div id="target"></div> +<script> + test_valid_value('animation-duration', 'auto'); + test_computed_value('animation-duration', 'auto'); + test_valid_value('animation', 'auto cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim'); + test_computed_value('animation', 'auto cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/animation-shorthand.html b/testing/web-platform/tests/scroll-animations/css/animation-shorthand.html new file mode 100644 index 0000000000..60d6c76646 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-shorthand"> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +<div id="target"></div> +<script> +test_valid_value('animation', + '1s linear 1s 2 reverse forwards paused anim'); + +test_invalid_value('animation', + '1s linear 1s 2 reverse forwards paused anim initial'); +test_invalid_value('animation', + '1s linear 1s 2 reverse forwards paused anim 2000'); +test_invalid_value('animation', + '1s linear 1s 2 reverse forwards paused anim scroll()'); +test_invalid_value('animation', + '1s linear 1s 2 reverse forwards paused anim view()'); +test_invalid_value('animation', + '1s linear 1s 2 reverse forwards paused anim timeline'); + +test_computed_value('animation', + '1s linear 1s 2 reverse forwards paused anim'); + +test_shorthand_value('animation', + `1s linear 1s 2 reverse forwards paused anim1, + 1s linear 1s 2 reverse forwards paused anim2, + 1s linear 1s 2 reverse forwards paused anim3`, +{ + 'animation-duration': '1s, 1s, 1s', + 'animation-timing-function': 'linear, linear, linear', + 'animation-delay': '1s, 1s, 1s', + 'animation-iteration-count': '2, 2, 2', + 'animation-direction': 'reverse, reverse, reverse', + 'animation-fill-mode': 'forwards, forwards, forwards', + 'animation-play-state': 'paused, paused, paused', + 'animation-name': 'anim1, anim2, anim3', + 'animation-timeline': 'auto, auto, auto' +}); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-computed.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-computed.html new file mode 100644 index 0000000000..9cabaab1fe --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-computed.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#animation-timeline"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<style> + #outer { animation-timeline: foo; } + #target { animation-timeline: bar; } +</style> +<div id="outer"> + <div id="target"></div> +</div> +<script> +test_computed_value('animation-timeline', 'initial', 'auto'); +test_computed_value('animation-timeline', 'inherit', 'foo'); +test_computed_value('animation-timeline', 'unset', 'auto'); +test_computed_value('animation-timeline', 'revert', 'auto'); +test_computed_value('animation-timeline', 'auto'); +test_computed_value('animation-timeline', 'none'); +test_computed_value('animation-timeline', 'auto, auto'); +test_computed_value('animation-timeline', 'none, none'); +test_computed_value('animation-timeline', 'auto, none'); +test_computed_value('animation-timeline', 'none, auto'); +test_computed_value('animation-timeline', '"test"', 'test'); +test_computed_value('animation-timeline', '"none"'); +test_computed_value('animation-timeline', '"auto"'); +test_computed_value('animation-timeline', '"initial"'); +test_computed_value('animation-timeline', '"inherit"'); +test_computed_value('animation-timeline', '"unset"'); +test_computed_value('animation-timeline', '"revert"'); +test_computed_value('animation-timeline', '"revert-layer"'); +test_computed_value('animation-timeline', 'test'); +test_computed_value('animation-timeline', 'test1, test2'); +test_computed_value('animation-timeline', 'test1, "test2", none, test3, auto', 'test1, test2, none, test3, auto'); + +test(() => { + let style = getComputedStyle(document.getElementById('target')); + assert_not_equals(Array.from(style).indexOf('animation-timeline'), -1); +}, 'The animation-timeline property shows up in CSSStyleDeclaration enumeration'); + +test(() => { + let style = document.getElementById('target').style; + assert_not_equals(style.cssText.indexOf('animation-timeline'), -1); +}, 'The animation-timeline property shows up in CSSStyleDeclaration.cssText'); + +// https://drafts.csswg.org/scroll-animations-1/#scroll-notation +// +// animation-timeline: scroll(<axis>? <scroller>?); +// <axis> = block | inline | vertical | horizontal +// <scroller> = root | nearest +test_computed_value('animation-timeline', 'scroll()'); +test_computed_value('animation-timeline', 'scroll(block)', 'scroll()'); +test_computed_value('animation-timeline', 'scroll(inline)'); +test_computed_value('animation-timeline', 'scroll(horizontal)'); +test_computed_value('animation-timeline', 'scroll(vertical)'); +test_computed_value('animation-timeline', 'scroll(root)'); +test_computed_value('animation-timeline', 'scroll(nearest)', 'scroll()'); +test_computed_value('animation-timeline', 'scroll(inline nearest)', 'scroll(inline)'); +test_computed_value('animation-timeline', 'scroll(vertical root)'); + +// https://drafts.csswg.org/scroll-animations-1/#view-notation +test_computed_value('animation-timeline', 'view()'); +test_computed_value('animation-timeline', 'view(block)', 'view()'); +test_computed_value('animation-timeline', 'view(inline)', 'view(inline)'); +test_computed_value('animation-timeline', 'view(horizontal)', 'view(horizontal)'); +test_computed_value('animation-timeline', 'view(vertical)', 'view(vertical)'); +test_computed_value('animation-timeline', 'view(vertical 1px)'); +test_computed_value('animation-timeline', 'view(1px auto)'); +test_computed_value('animation-timeline', 'view(auto 1px)'); +test_computed_value('animation-timeline', 'view(vertical 1px auto)'); +test_computed_value('animation-timeline', 'view(1px vertical)', 'view(vertical 1px)'); +test_computed_value('animation-timeline', 'view(vertical auto)', 'view(vertical)'); +test_computed_value('animation-timeline', 'view(vertical auto auto)', 'view(vertical)'); + +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-ignored.tentative.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-ignored.tentative.html new file mode 100644 index 0000000000..32cb89c4ef --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-ignored.tentative.html @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<link rel="help" src="https://github.com/w3c/csswg-drafts/pull/5666"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<style> + main { + overflow: hidden; + height: 0px; + } + main > div { + overflow: hidden; + width: 100px; + height: 100px; + } + main > div > div { + height: 200px; + } + @keyframes expand { + from { width: 100px; } + to { width: 200px; } + } + #scroller1 { + scroll-timeline: timeline1; + } + #scroller2 { + scroll-timeline: timeline2; + } + #scroller3 { + scroll-timeline: timeline3; + } + #element { + width: 0px; + height: 20px; + animation-name: expand; + animation-duration: 1000s; + animation-timing-function: linear; + animation-timeline: timeline1; + } + /* Ensure stable expectations if feature is not supported */ + @supports not (animation-timeline:foo) { + #element { animation-play-state: paused; } + } +</style> +<main> + <div id=scroller1><div></div></div> + <div id=scroller2><div></div></div> + <div id=scroller3><div></div></div> + <div id=scroller4><div></div></div> + <div id=container></div> +</main> +<script> + // Force layout of scrollers. + scroller1.offsetTop; + scroller2.offsetTop; + scroller3.offsetTop; + scroller4.offsetTop; + + scroller1.scrollTop = 20; + scroller2.scrollTop = 40; + scroller3.scrollTop = 60; + scroller4.scrollTop = 80; + + // Create #element in #container, run |func|, then clean up afterwards. + function test_animation_timeline(func, description) { + promise_test(async () => { + try { + let element = document.createElement('element'); + element.setAttribute('id', 'element'); + container.append(element); + await func(); + } finally { + while (container.firstChild) + container.firstChild.remove(); + } + }, description); + } + + test_animation_timeline(async () => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element).width, '120px'); + element.style = 'animation-timeline:timeline2'; + assert_equals(getComputedStyle(element).width, '140px'); + }, 'Changing animation-timeline changes the timeline (sanity check)'); + + test_animation_timeline(async () => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element).width, '120px'); + + // Set a (non-CSS) ScrollTimeline on the CSSAnimation. + let timeline4 = new ScrollTimeline({ + source: scroller4, + scrollOffsets: [CSS.px(0), CSS.px(100)] + }); + + element.getAnimations()[0].timeline = timeline4; + assert_equals(getComputedStyle(element).width, '180px'); + + // Changing the animation-timeline property should have no effect. + element.style = 'animation-timeline:timeline2'; + assert_equals(getComputedStyle(element).width, '180px'); + }, 'animation-timeline ignored after setting timeline with JS (ScrollTimeline from JS)'); + + test_animation_timeline(async () => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element).width, '120px'); + let animation = element.getAnimations()[0]; + let timeline1 = animation.timeline; + + element.style = 'animation-timeline:timeline2'; + assert_equals(getComputedStyle(element).width, '140px'); + + animation.timeline = timeline1; + assert_equals(getComputedStyle(element).width, '120px'); + + // Should have no effect. + element.style = 'animation-timeline:timeline3'; + assert_equals(getComputedStyle(element).width, '120px'); + }, 'animation-timeline ignored after setting timeline with JS (ScrollTimeline from CSS)'); + + test_animation_timeline(async () => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element).width, '120px'); + element.getAnimations()[0].timeline = document.timeline; + + // (The animation continues from where the previous timeline left it). + assert_equals(getComputedStyle(element).width, '120px'); + + // Changing the animation-timeline property should have no effect. + element.style = 'animation-timeline:timeline2'; + assert_equals(getComputedStyle(element).width, '120px'); + }, 'animation-timeline ignored after setting timeline with JS (document timeline)'); + + test_animation_timeline(async () => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element).width, '120px'); + element.getAnimations()[0].timeline = null; + assert_equals(getComputedStyle(element).width, '0px'); + + // Changing the animation-timeline property should have no effect. + element.style = 'animation-timeline:timeline2'; + assert_equals(getComputedStyle(element).width, '0px'); + }, 'animation-timeline ignored after setting timeline with JS (null)'); + +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-in-keyframe.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-in-keyframe.html new file mode 100644 index 0000000000..7548333139 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-in-keyframe.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#animation-timeline"> +<link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<style> + @keyframes test { + from { width: 100px; animation-timeline: foo; } + to { width: 100px; animation-timeline: foo; } + } + #target { + width: 50px; + animation-name: test; + animation-duration: 1s; + animation-play-state: paused; + } +</style> +<div id="target"></div> +<script> +test(() => { + let style = getComputedStyle(document.getElementById('target')); + // Checking 'width' verifies that the animation is applied at all. + assert_equals(style.width, '100px'); + assert_equals(style.animationTimeline, 'auto'); +}, 'The animation-timeline property may not be used in keyframes'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-multiple.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-multiple.html new file mode 100644 index 0000000000..8ae37bf751 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-multiple.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<title>animation-timeline with multiple timelines</title> +<link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<style> + main > div { + overflow: hidden; + width: 100px; + height: 100px; + } + main > div > div { + height: 200px; + width: 200px; + } + + @keyframes top { + from { top: 100px; } + to { top: 200px; } + } + @keyframes bottom { + from { bottom: 100px; } + to { bottom: 200px; } + } + @keyframes left { + from { left: 100px; } + to { left: 200px; } + } + @keyframes right { + from { right: 100px; } + to { right: 200px; } + } + + #top_scroller { + scroll-timeline: block top_timeline; + } + #bottom_scroller { + scroll-timeline: inline bottom_timeline; + } + #left_scroller { + scroll-timeline: block left_timeline; + } + #right_scroller { + scroll-timeline: inline right_timeline; + } + + #element { + animation-name: top, bottom, left, right; + animation-duration: 10s; + animation-timing-function: linear; + animation-timeline: top_timeline, bottom_timeline, left_timeline, right_timeline; + } + /* Ensure stable expectations if feature is not supported */ + @supports not (animation-timeline:foo) { + #element { animation-play-state: paused; } + } +</style> +<main> + <div id=top_scroller><div></div></div> + <div id=bottom_scroller><div></div></div> + <div id=left_scroller><div></div></div> + <div id=right_scroller><div></div></div> + <div id=element></div> +</main> +<script> + // Force layout of scrollers. + top_scroller.offsetTop; + bottom_scroller.offsetTop; + left_scroller.offsetTop; + right_scroller.offsetTop; + + top_scroller.scrollTop = 20; + top_scroller.scrollLeft = 40; + bottom_scroller.scrollTop = 20; + bottom_scroller.scrollLeft = 40; + left_scroller.scrollTop = 60; + left_scroller.scrollLeft = 80; + right_scroller.scrollTop = 60; + right_scroller.scrollLeft = 80; + + promise_test(async (t) => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element).top, '120px'); + assert_equals(getComputedStyle(element).bottom, '140px'); + assert_equals(getComputedStyle(element).left, '160px'); + assert_equals(getComputedStyle(element).right, '180px'); + }, 'animation-timeline works with multiple timelines'); + +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-named-scroll-progress-timeline.tentative.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-named-scroll-progress-timeline.tentative.html new file mode 100644 index 0000000000..9f55e2d2c9 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-named-scroll-progress-timeline.tentative.html @@ -0,0 +1,662 @@ +<!DOCTYPE html> +<title>The animation-timeline: scroll-timeline-name</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-timelines-named"> +<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; } + } + #target { + width: 100px; + height: 100px; + } + .square { + width: 100px; + height: 100px; + } + .square-container { + width: 300px; + height: 300px; + } + .scroller { + overflow: scroll; + } + .content { + inline-size: 100%; + block-size: 100%; + padding-inline-end: 100px; + padding-block-end: 100px; + } +</style> +<body> +<div id="log"></div> +<script> +"use strict"; + +setup(assert_implements_animation_timeline); + +function createScroller(t, scrollerSizeClass) { + let scroller = document.createElement('div'); + let className = scrollerSizeClass || 'square'; + scroller.className = `scroller ${className}`; + let content = document.createElement('div'); + content.className = 'content'; + + scroller.appendChild(content); + + t.add_cleanup(function() { + content.remove(); + scroller.remove(); + }); + + return scroller; +} + +function createTarget(t) { + let target = document.createElement('div'); + target.id = 'target'; + + t.add_cleanup(function() { + target.remove(); + }); + + return target; +} + +function createScrollerAndTarget(t, scrollerSizeClass) { + return [createScroller(t, scrollerSizeClass), createTarget(t)]; +} + +// ------------------------- +// Test scroll-timeline-name +// ------------------------- + +promise_test(async t => { + let target = document.createElement('div'); + target.id = 'target'; + target.className = 'scroller'; + let content = document.createElement('div'); + content.className = 'content'; + + // <div id='target' class='scroller'> + // <div id='content'></div> + // </div> + document.body.appendChild(target); + target.appendChild(content); + + target.style.scrollTimelineName = 'timeline'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + target.scrollTop = 50; // 50%, in [0, 100]. + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '100px'); + + content.remove(); + target.remove(); +}, 'scroll-timeline-name is referenceable in animation-timeline on the ' + + 'declaring element itself'); + +promise_test(async t => { + let [parent, target] = createScrollerAndTarget(t, 'square-container'); + + // <div id='parent' class='scroller'> + // <div id='target'></div> + // <div id='content'></div> + // </div> + document.body.appendChild(parent); + parent.insertBefore(target, parent.firstElementChild); + + parent.style.scrollTimelineName = 'timeline'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + parent.scrollTop = 100; // 50%, in [0, 200]. + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '100px'); +}, "scroll-timeline-name is referenceable in animation-timeline on that " + + "element's descendants"); + +promise_test(async t => { + let [sibling, target] = createScrollerAndTarget(t); + + // <div id='sibling' class='scroller'> ... </div> + // <div id='target'></div> + document.body.appendChild(sibling); + document.body.appendChild(target); + + sibling.style.scrollTimelineName = 'timeline'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + sibling.scrollTop = 50; // 50%, in [0, 100]. + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '100px'); +}, "scroll-timeline-name is referenceable in animation-timeline on that " + + "element's following siblings"); + +promise_test(async t => { + let [sibling, target] = createScrollerAndTarget(t); + let parent = document.createElement('div'); + + // <div id='sibling' class='scroller'> ... </div> + // <div id='parent'> + // <div id='target'></div> + // </div> + document.body.appendChild(sibling); + document.body.appendChild(parent); + parent.appendChild(target); + + sibling.style.scrollTimelineName = 'timeline'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + sibling.scrollTop = 50; // 50%, in [0, 100]. + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '100px'); + + parent.remove(); +}, "scroll-timeline-name is referenceable in animation-timeline on that " + + "element's following siblings' descendants"); + +// FIXME: We may use global scope for scroll-timeline-name. +// See https://github.com/w3c/csswg-drafts/issues/7047 +promise_test(async t => { + let [sibling, target] = createScrollerAndTarget(t); + + // <div id='target'></div> + // <div id='sibling' class='scroller'> ... </div> + document.body.appendChild(target); + document.body.appendChild(sibling); + + sibling.style.scrollTimelineName = 'timeline'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + sibling.scrollTop = 50; // 50%, in [0, 100]. + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '50px', + 'Animation with unknown timeline name holds current time at zero'); +}, "scroll-timeline-name is not referenceable in animation-timeline on that " + + "element's previous siblings"); + +promise_test(async t => { + let [sibling, target] = createScrollerAndTarget(t); + let parent = document.createElement('div'); + parent.className = 'scroller square-container'; + let content = document.createElement('div'); + content.className = 'content'; + + // <div id='parent' class='scroller'> + // <div id='sibling' class='scroller'> ... </div> + // <div id='target'></div> + // <div id='content'></div> + // </div> + document.body.appendChild(parent); + parent.appendChild(sibling); + parent.appendChild(target); + parent.appendChild(content); + + parent.style.scrollTimelineName = 'timeline'; + parent.style.scrollTimelineAxis = 'inline'; + sibling.style.scrollTimelineName = 'timeline'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + parent.scrollTop = 50; // 25%, in [0, 200]. + sibling.scrollTop = 50; // 50%, in [0, 100]. + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '100px'); + + content.remove(); + parent.remove(); +}, 'scroll-timeline-name is matched based on tree order, which considers ' + + 'siblings closer than parents'); + +promise_test(async t => { + let sibling = document.createElement('div'); + sibling.className = 'square'; + sibling.style.overflowX = 'clip'; // This makes overflow-y be clip as well. + let target = document.createElement('div'); + target.id = 'target'; + + // <div id='sibling' style='overflow-x: clip'></div> + // <div id='target'></div> + document.body.appendChild(sibling); + document.body.appendChild(target); + + sibling.style.scrollTimelineName = 'timeline'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + sibling.scrollTop = 50; // 50%, in [0, 100]. + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, 'none', + 'Animation with an unresolved current time'); + + target.remove(); + sibling.remove(); +}, 'scroll-timeline-name on an element which is not a scroll-container'); + +promise_test(async t => { + let [sibling, target] = createScrollerAndTarget(t); + let main = document.createElement('div'); + main.id = 'name'; + + // <div id='main'> + // <div id='sibling' class='scroller'> ... </div> + // <div id='target'></div> + // </div> + document.body.appendChild(main); + main.appendChild(sibling); + main.appendChild(target); + + target.style.animation = 'anim 10s linear'; + target.style.animationTimeline = 'timeline'; + sibling.scrollTop = 50; // 50%, in [50, 150]. + await waitForNextFrame(); + + // Unknown animation-timeline, current time held at zero. + assert_equals(getComputedStyle(target).translate, '50px'); + + // Ensure that #main (an ancestor of the scroller) needs style recalc. + main.style.background = 'lightgray'; + sibling.style.scrollTimelineName = 'timeline'; + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).translate, '100px'); + + main.remove(); +}, 'scroll-timeline-name affects subsequent siblings when changed'); + +promise_test(async t => { + let target = createTarget(t); + + // <div id='target'></div> + document.body.appendChild(target); + + target.style.animation = 'anim 10s linear'; + target.style.animationTimeline = 'timeline'; + + // Unknown animation-timeline, current time held at zero. + assert_equals(getComputedStyle(target).translate, '50px'); + + let scroller = createScroller(t); + // <div class='scroller'> ... </div> + // <div id='target'></div> + document.body.insertBefore(scroller, target); + scroller.style.scrollTimelineName = 'timeline'; + + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '50px'); + + // Ensure that time is not just held at zero. + scroller.scrollTop = 50; // 50%, in [50, 150]. + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '100px'); +}, 'scroll-timeline-name on inserted element affects subsequent siblings'); + +promise_test(async t => { + let [scroller, target] = createScrollerAndTarget(t); + + // <div class='scroller'> ... </div> + // <div id='target'></div> + document.body.appendChild(scroller); + document.body.appendChild(target); + + scroller.scrollTop = 50; // 50%, in [50, 150]. + await waitForNextFrame(); + + scroller.style.scrollTimelineName = 'timeline'; + target.style.animation = 'anim 10s linear'; + target.style.animationTimeline = 'timeline'; + await waitForCSSScrollTimelineStyle(); + + assert_equals(getComputedStyle(target).translate, '100px'); + + // This effectively removes the CSS-created ScrollTimeline on this element, + // thus invoking "setting the timeline of an animation" [1] with a null- + // timeline on affected elements. This in turn causes the current time to + // become unresolved [2], ultimately resulting in no effect value. + // + // [1] https://drafts.csswg.org/web-animations-1/#setting-the-timeline + // [2] https://drafts.csswg.org/web-animations-1/#the-current-time-of-an-animation + scroller.remove(); + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, 'none'); +}, 'scroll-timeline-name on removed element affects subsequent siblings'); + +promise_test(async t => { + let [scroller, target] = createScrollerAndTarget(t); + + // <div class='scroller' style='display:none'> ... </div> + // <div id='target'></div> + scroller.style.display = 'none'; + document.body.appendChild(scroller); + document.body.appendChild(target); + + scroller.style.scrollTimelineName = 'timeline'; + target.style.animation = 'anim 10s linear'; + target.style.animationTimeline = 'timeline'; + + // Unknown animation-timeline, current time held at zero. + assert_equals(getComputedStyle(target).translate, '50px'); + + scroller.style.display = 'block'; + scroller.scrollTop = 50; // 50%, in [50, 150]. + await waitForNextFrame(); + + assert_equals(getComputedStyle(target).translate, '100px'); +}, 'scroll-timeline-name on element leaving display:none affects subsequent siblings'); + +promise_test(async t => { + let [scroller, target] = createScrollerAndTarget(t); + + // <div class='scroller'> ... </div> + // <div id='target'></div> + document.body.appendChild(scroller); + document.body.appendChild(target); + + scroller.scrollTop = 50; // 50%, in [50, 150]. + await waitForNextFrame(); + + scroller.style.scrollTimelineName = 'timeline'; + target.style.animation = 'anim 10s linear'; + target.style.animationTimeline = 'timeline'; + await waitForCSSScrollTimelineStyle(); + + assert_equals(getComputedStyle(target).translate, '100px'); + + // See comment in the test "scroll-timeline-name on removed element ..." for + // an explantation of this result. (Setting display:none is similar to + // removing the element). + scroller.style.display = 'none'; + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, 'none'); +}, 'scroll-timeline-name on element becoming display:none affects subsequent siblings'); + +promise_test(async t => { + let [scroller, target] = createScrollerAndTarget(t); + + // <div id='scroller' class='scroller'> ... </div> + // <div id='target'></div> + + document.body.appendChild(scroller); + document.body.appendChild(target); + + scroller.style.scrollTimelineName = 'timeline'; + scroller.style.display = 'none'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + await waitForNextFrame(); + + const anim = target.getAnimations()[0]; + assert_true(!!anim, 'Failed to create animation'); + assert_equals(anim.timeline, null); + // Hold time of animation is zero. + assert_equals(getComputedStyle(target).translate, '50px'); + + scroller.style.display = 'block'; + scroller.scrollTop = 50; + await waitForNextFrame(); + + assert_true(!!anim.timeline, 'Failed to create timeline'); + assert_equals(getComputedStyle(target).translate, '100px'); + +}, 'scroll-timeline-name on element not resolved until element becomes visible'); + +promise_test(async t => { + let [scroller, target] = createScrollerAndTarget(t); + + // <div id='scroller' class='scroller'> ... </div> + // <div id='target'></div> + + document.body.appendChild(scroller); + document.body.appendChild(target); + + scroller.style.scrollTimelineName = 'timeline-A'; + scroller.scrollTop = 50; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline-B'; + + await waitForNextFrame(); + + const anim = target.getAnimations()[0]; + assert_true(!!anim, 'Failed to create animation'); + assert_equals(anim.timeline, null); + // Hold time of animation is zero. + assert_equals(getComputedStyle(target).translate, '50px'); + + scroller.style.scrollTimelineName = 'timeline-B'; + await waitForNextFrame(); + + assert_true(!!anim.timeline, 'Failed to create timeline'); + assert_equals(getComputedStyle(target).translate, '100px'); + +}, 'Change in scroll-timeline-name to match animation timeline updates animation.'); + +promise_test(async t => { + let [scroller, target] = createScrollerAndTarget(t); + + // <div id='scroller' class='scroller'> ... </div> + // <div id='target'></div> + + document.body.appendChild(scroller); + document.body.appendChild(target); + + scroller.style.scrollTimelineName = 'timeline-A'; + scroller.scrollTop = 50; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline-A'; + + await waitForNextFrame(); + + const anim = target.getAnimations()[0]; + assert_true(!!anim, 'Failed to create animation'); + assert_true(!!anim.timeline, 'Failed to create timeline'); + assert_equals(getComputedStyle(target).translate, '100px'); + + scroller.style.scrollTimelineName = 'timeline-B'; + await waitForNextFrame(); + + assert_equals(anim.timeline, null, 'Failed to remove timeline'); + assert_equals(getComputedStyle(target).translate, 'none'); + +}, 'Change in scroll-timeline-name to no longer match animation timeline updates animation.'); + +promise_test(async t => { + let target = createTarget(t); + let scroller1 = createScroller(t); + let scroller2 = createScroller(t); + + target.style.animation = 'anim 10s linear'; + target.style.animationTimeline = 'timeline'; + scroller1.style.scrollTimelineName = 'timeline'; + scroller2.style.scrollTimelineName = 'timeline'; + scroller1.id = 'A'; + scroller2.id = 'B'; + + // <div class='scroller' id='A'> ... </div> (scroller1) + // <div class='scroller' id="B"> ... </div> (scroller2) + // <div id='target'></div> + document.body.appendChild(scroller1); + document.body.appendChild(scroller2); + document.body.append(target); + + scroller1.scrollTop = 10; // 10%, in [50, 150]. + scroller2.scrollTop = 50; // 50%, in [50, 150]. + await waitForNextFrame(); + + + // The named timeline lookup should select scroller2. + let anim = target.getAnimations()[0]; + assert_true(!!anim, 'Failed to fetch animation'); + assert_equals(anim.timeline.source.id, 'B'); + assert_equals(getComputedStyle(target).translate, '100px'); + + scroller2.remove(); + + // Now it should select scroller1. + anim = target.getAnimations()[0]; + assert_true(!!anim, 'Failed to fetch animation after update'); + assert_true(!!anim.timeline, 'Animation no longer has a timeline'); + assert_equals(anim.timeline.source.id, 'A', 'Timeline not updated'); + assert_equals(getComputedStyle(target).translate, '60px'); +}, 'Timeline lookup finds next candidate when element is removed'); + +promise_test(async t => { + let target = createTarget(t); + let scroller1 = createScroller(t); + + target.style.animation = 'anim 10s linear'; + target.style.animationTimeline = 'timeline'; + scroller1.style.scrollTimelineName = 'timeline'; + scroller1.id = 'A'; + + // <div class='scroller' id='A'> ... </div> (scroller1) + // <div id='target'></div> + document.body.appendChild(scroller1); + document.body.append(target); + + scroller1.scrollTop = 10; // 10%, in [50, 150]. + + await waitForNextFrame(); + + const anim = target.getAnimations()[0]; + + assert_true(!!anim.timeline, 'Failed to retrieve animation'); + assert_equals(anim.timeline.source.id, 'A'); + assert_equals(getComputedStyle(target).translate, '60px'); + + await waitForNextFrame(); + + let scroller2 = createScroller(t); + scroller2.style.scrollTimelineName = 'timeline'; + scroller2.id = 'B'; + + // <div class='scroller' id="A"> ... </div> (scroller1) + // <div class='scroller' id="B"> ... </div> (scroller2) + // <div id='target'></div> + document.body.insertBefore(scroller2, target); + + scroller2.scrollTop = 50; // 50%, in [50, 150]. + + await waitForNextFrame(); + + // The timeline should be updated to scroller2. + assert_true(!!anim.timeline, 'Animation no longer has a timeline'); + assert_equals(anim.timeline.source.id, 'B', 'Timeline not updated'); + assert_equals(getComputedStyle(target).translate, '100px'); +}, 'Timeline lookup updates candidate when closer match available.'); + +promise_test(async t => { + let target = createTarget(t); + + // <div id='target'></div> + document.body.append(target); + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + await waitForNextFrame(); + + // Timeline initially cannot be resolved, resulting in a null + // timeline. The animation's hold time is zero. + let anim = document.getAnimations()[0]; + assert_equals(getComputedStyle(target).translate, '50px'); + + await waitForNextFrame(); + + let scroller = createScroller(t); + scroller.style.scrollTimelineName = 'timeline'; + + // <div class='scroller'> ... </div> (scroller1) + // <div id='target'></div> + document.body.insertBefore(scroller, target); + + scroller.scrollTop = 50; // 50%, in [50, 150]. + + await waitForNextFrame(); + + // The timeline should be updated to scroller. + assert_equals(getComputedStyle(target).translate, '100px'); +}, 'Timeline lookup updates candidate when match becomes available.'); + +// ------------------------- +// Test scroll-timeline-axis +// ------------------------- + +promise_test(async t => { + let [scroller, target] = createScrollerAndTarget(t); + scroller.style.writingMode = 'vertical-lr'; + + document.body.appendChild(scroller); + document.body.appendChild(target); + + scroller.style.scrollTimeline = 'timeline block'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + scroller.scrollLeft = 50; + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '100px'); +}, 'scroll-timeline-axis is block'); + +promise_test(async t => { + let [scroller, target] = createScrollerAndTarget(t); + scroller.style.writingMode = 'vertical-lr'; + + document.body.appendChild(scroller); + document.body.appendChild(target); + + scroller.style.scrollTimeline = 'timeline inline'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + scroller.scrollTop = 50; + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '100px'); +}, 'scroll-timeline-axis is inline'); + +promise_test(async t => { + let [scroller, target] = createScrollerAndTarget(t); + scroller.style.writingMode = 'vertical-lr'; + + document.body.appendChild(scroller); + document.body.appendChild(target); + + scroller.style.scrollTimeline = 'timeline horizontal'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + scroller.scrollLeft = 50; + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '100px'); +}, 'scroll-timeline-axis is horizontal'); + +promise_test(async t => { + let [scroller, target] = createScrollerAndTarget(t); + scroller.style.writingMode = 'vertical-lr'; + + document.body.appendChild(scroller); + document.body.appendChild(target); + + scroller.style.scrollTimeline = 'timeline vertical'; + target.style.animation = "anim 10s linear"; + target.style.animationTimeline = 'timeline'; + + scroller.scrollTop = 50; + await waitForNextFrame(); + assert_equals(getComputedStyle(target).translate, '100px'); +}, 'scroll-timeline-axis is vertical'); + +// TODO: Add more tests which change scroll-timeline-axis property. +// Those animations which use this timeline should be restyled properly. + +</script> +</body> diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-none.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-none.html new file mode 100644 index 0000000000..a8e07a44d6 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-none.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<link rel="help" src="https://drafts.csswg.org/web-animations/#playing-an-animation-section"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<style> + @keyframes expand { + from { width: 100px; } + to { width: 200px; } + } + + .test { + width: 0px; + animation-name: expand; + animation-duration: 1s; + } + + #element_timeline_none { + animation-timeline: none; + } + #element_unknown_timeline { + animation-timeline: unknown_timeline; + } + +</style> +<div class=test id=element_timeline_none></div> +<div class=test id=element_unknown_timeline></div> +<script> + promise_test(async (t) => { + assert_equals(getComputedStyle(element_timeline_none).width, '100px'); + await waitForAnimationFrames(3); + assert_equals(getComputedStyle(element_timeline_none).width, '100px'); + }, 'Animation with animation-timeline:none holds current time at zero'); + + promise_test(async (t) => { + assert_equals(getComputedStyle(element_unknown_timeline).width, '100px'); + await waitForAnimationFrames(3); + assert_equals(getComputedStyle(element_unknown_timeline).width, '100px'); + }, 'Animation with unknown timeline name holds current time at zero'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-parsing.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-parsing.html new file mode 100644 index 0000000000..1a30f11f85 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-parsing.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#animation-timeline"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<div id="target"></div> +<script> +test_valid_value('animation-timeline', 'initial'); +test_valid_value('animation-timeline', 'inherit'); +test_valid_value('animation-timeline', 'unset'); +test_valid_value('animation-timeline', 'revert'); +test_valid_value('animation-timeline', 'auto'); +test_valid_value('animation-timeline', 'none'); +test_valid_value('animation-timeline', 'auto, auto'); +test_valid_value('animation-timeline', 'none, none'); +test_valid_value('animation-timeline', 'auto, none'); +test_valid_value('animation-timeline', 'none, auto'); +test_valid_value('animation-timeline', '"test"', ["test", '"test"']); +test_valid_value('animation-timeline', '"none"'); +test_valid_value('animation-timeline', '"auto"'); +test_valid_value('animation-timeline', '"initial"'); +test_valid_value('animation-timeline', '"inherit"'); +test_valid_value('animation-timeline', '"unset"'); +test_valid_value('animation-timeline', '"revert"'); +test_valid_value('animation-timeline', 'test'); +test_valid_value('animation-timeline', 'test1, test2'); +test_valid_value('animation-timeline', 'test1, "test2", none, test3, auto', ["test1, test2, none, test3, auto", 'test1, "test2", none, test3, auto']); + +test_invalid_value('animation-timeline', '10px'); +test_invalid_value('animation-timeline', 'auto auto'); +test_invalid_value('animation-timeline', 'none none'); +test_invalid_value('animation-timeline', 'foo bar'); +test_invalid_value('animation-timeline', '"foo" "bar"'); +test_invalid_value('animation-timeline', 'rgb(1, 2, 3)'); +test_invalid_value('animation-timeline', '#fefefe'); + +// https://drafts.csswg.org/scroll-animations-1/#scroll-notation +// +// animation-timeline: scroll(<axis>? <scroller>?); +// <axis> = block | inline | vertical | horizontal +// <scroller> = root | nearest +test_valid_value('animation-timeline', 'scroll()'); +test_valid_value('animation-timeline', 'scroll(block)', 'scroll()'); +test_valid_value('animation-timeline', 'scroll(inline)'); +test_valid_value('animation-timeline', 'scroll(horizontal)'); +test_valid_value('animation-timeline', 'scroll(vertical)'); +test_valid_value('animation-timeline', 'scroll(root)'); +test_valid_value('animation-timeline', 'scroll(nearest)', 'scroll()'); +test_valid_value('animation-timeline', 'scroll(inline nearest)', 'scroll(inline)'); +test_valid_value('animation-timeline', 'scroll(vertical root)'); + +test_invalid_value('animation-timeline', 'scroll(root block)'); +test_invalid_value('animation-timeline', 'scroll(abc root)'); +test_invalid_value('animation-timeline', 'scroll(abc)'); +test_invalid_value('animation-timeline', 'scroll(vertical abc)'); +test_invalid_value('animation-timeline', 'scroll("string")'); + +// https://drafts.csswg.org/scroll-animations-1/#view-notation +test_valid_value('animation-timeline', 'view()'); +test_valid_value('animation-timeline', 'view(block)', 'view()'); +test_valid_value('animation-timeline', 'view(inline)'); +test_valid_value('animation-timeline', 'view(horizontal)'); +test_valid_value('animation-timeline', 'view(vertical)'); +test_valid_value('animation-timeline', 'view(vertical 1px 2px)'); +test_valid_value('animation-timeline', 'view(vertical 1px)'); +test_valid_value('animation-timeline', 'view(vertical auto)', 'view(vertical)'); +test_valid_value('animation-timeline', 'view(vertical auto auto)', 'view(vertical)'); +test_valid_value('animation-timeline', 'view(vertical auto 1px)'); +test_valid_value('animation-timeline', 'view(1px 2px vertical)', 'view(vertical 1px 2px)'); +test_valid_value('animation-timeline', 'view(1px vertical)', 'view(vertical 1px)'); +test_valid_value('animation-timeline', 'view(auto horizontal)', 'view(horizontal)'); +test_valid_value('animation-timeline', 'view(1px 2px)'); +test_valid_value('animation-timeline', 'view(1px)'); +test_valid_value('animation-timeline', 'view(1px 1px)', 'view(1px)'); +test_valid_value('animation-timeline', 'view(1px auto)'); +test_valid_value('animation-timeline', 'view(auto calc(1% + 1px))'); +test_valid_value('animation-timeline', 'view(auto)', 'view()'); +test_valid_value('animation-timeline', 'view(auto auto)', 'view()'); + +test_invalid_value('animation-timeline', 'view(vertical 1px 2px 3px)'); +test_invalid_value('animation-timeline', 'view(1px vertical 3px)'); +test_invalid_value('animation-timeline', 'view(1px 2px 3px)'); +test_invalid_value('animation-timeline', 'view(abc block)'); +test_invalid_value('animation-timeline', 'view(abc)'); +test_invalid_value('animation-timeline', 'view(vertical abc)'); +test_invalid_value('animation-timeline', 'view("string")'); +</script> 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> 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 diff --git a/testing/web-platform/tests/scroll-animations/css/get-animations-inactive-timeline.html b/testing/web-platform/tests/scroll-animations/css/get-animations-inactive-timeline.html new file mode 100644 index 0000000000..10bf00fbbc --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/get-animations-inactive-timeline.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>getAnimations for scroll-linked animations</title> +<link rel="help" + href="https://www.w3.org/TR/web-animations-1/#animation-effect-phases-and-states"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testcommon.js"></script> +<style> + @keyframes slide { + from { transform: translateX(100px); } + to { transform: translateX(100px); } + } + + #container { + border: 10px solid lightgray; + overflow-x: scroll; + height: 200px; + width: 200px; + scroll-timeline-name: timeline; + } + #spacer { + height: 200vh; + } + #target { + background-color: green; + height: 100px; + width: 100px; + animation: slide 1s linear; + animation-timeline: timeline; + } +</style> +<body> + <div id="container"> + <div id="spacer"></div> + <div id="target"></div> + </div> +</body> +<script type="text/javascript"> + setup(assert_implements_animation_timeline); + + promise_test(async t => { + // Newly created timeline is inactive, + let animations = document.getAnimations(); + assert_equals(animations.length, 1, + 'Single running animation'); + assert_true(animations[0].timeline instanceof ScrollTimeline, + 'Animation associated with a scroll timeline'); + assert_equals(animations[0].timeline.currentTime, null, + 'Timeline is initially inactive'); + + // Canceled animation is no longer current. + const anim = animations[0]; + animations[0].cancel(); + + assert_equals( + document.getAnimations().length, 0, + 'A canceled animation is no longer returned by getAnimations'); + + // Replaying an animation makes it current. + anim.play(); + assert_equals( + document.getAnimations().length, 1, + 'A play-pending animation is return by getAnimations'); + + // Animation effect is still current even if the timeline's source element + // cannot be scrolled. + spacer.style = 'display: none'; + t.add_cleanup(() => { + spacer.style = ''; + }); + + animations = document.getAnimations(); + assert_equals( + animations.length, 1, + 'Running animation is included in getAnimations list even if ' + + 'currentTime is null'); + assert_true(animations[0].timeline instanceof ScrollTimeline, + 'Animation has timeline associated with an element that ' + + 'cannot be scrolled'); + assert_equals(animations[0].timeline.currentTime, null, + 'Inactive timeline when timeline\'s source element cannot ' + + 'be scrolled'); + }, 'getAnimations includes inactive scroll-linked animations that have not ' + + 'been canceled'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/named-range-keyframes-with-document-timeline.tentative.html b/testing/web-platform/tests/scroll-animations/css/named-range-keyframes-with-document-timeline.tentative.html new file mode 100644 index 0000000000..a0094d3220 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/named-range-keyframes-with-document-timeline.tentative.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>Named range keyframe offset when you have a document timeline</title> +<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-animation { + from { opacity: 0 } + + enter 0% { opacity: 0 } + enter 100% { opacity: 1 } + exit 0% { opacity: 1 } + exit 100% { opacity: 0 } + + to { opacity: 1 } + } + + #subject { + background-color: blue; + height: 200px; + width: 200px; + animation: linear both fade-in-animation; + animation-duration: 0.1s; + animation-play-state: paused; + } +</style> +<body onload="runTests()"> + <div id="subject"></div> +</body> + +<script type="text/javascript"> + setup(assert_implements_animation_timeline); + + function runTests() { + promise_test(async t => { + const anim = subject.getAnimations()[0]; + anim.currentTime = -1; + assert_equals(getComputedStyle(subject).opacity, "0", + 'unexpected value in the before phase'); + + anim.currentTime = 50; + assert_equals(getComputedStyle(subject).opacity, "0.5", + 'unexpected value in the middle of the animation'); + + anim.currentTime = 100; + assert_equals(getComputedStyle(subject).opacity, "1", + 'unexpected value in the after phase'); + }); + } +</script> +</html> diff --git a/testing/web-platform/tests/scroll-animations/css/printing/animation-timeline-none-with-progress-print.tentative.html b/testing/web-platform/tests/scroll-animations/css/printing/animation-timeline-none-with-progress-print.tentative.html new file mode 100644 index 0000000000..3939a1df48 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/printing/animation-timeline-none-with-progress-print.tentative.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>The animation-timeline:none with preserved progress for print</title> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<meta name="assert" content="print correctly for an animation with animation-timeline:none with preserved progress"> +<link rel="match" href="animation-timeline-none-with-progress-ref.html"> + +<style> + @keyframes anim { + from { transform: translateX(0px); } + to { transform: translateX(100px); } + } + + #scroller { + scroll-timeline: timeline; + overflow: scroll; + width: 100px; + height: 100px; + scrollbar-width: none; + } + + #contents { + height: 200px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + animation: anim 1s linear timeline; + } +</style> + +<div id="scroller"> + <div id="contents"></div> +</div> +<div id="box"></div> + +<script> + window.addEventListener('load', function() { + const scroller = document.getElementById("scroller"); + // Move the scroller to the halfway point. + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + window.requestAnimationFrame(() => { + let box = document.getElementById("box"); + box.style.animationTimeline = "none"; + getComputedStyle(box).marginLeft; + + window.requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/printing/animation-timeline-none-with-progress-ref.html b/testing/web-platform/tests/scroll-animations/css/printing/animation-timeline-none-with-progress-ref.html new file mode 100644 index 0000000000..09bcba2fd4 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/printing/animation-timeline-none-with-progress-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for none animation-timeline</title> +<style> + #scroller { + overflow: scroll; + width: 100px; + height: 100px; + scrollbar-width: none; + } + + #contents { + height: 200px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + transform: translateX(50px); + } +</style> + +<div id="scroller"> + <div id="contents"></div> +</div> +<div id="box"></div> + +<script> + window.addEventListener('load', function() { + const scroller = document.getElementById("scroller"); + // Move the scroller to the halfway point. + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + document.documentElement.classList.remove("reftest-wait"); + }); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-default-iframe-print.html b/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-default-iframe-print.html new file mode 100644 index 0000000000..d732ca141a --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-default-iframe-print.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>The default scroll() timeline in the iframe for print</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<meta name="assert" content="CSS animation correctly updates values when using the default scroll() timeline"> +<link rel="match" href="../scroll-timeline-default-iframe-ref.html"> +<meta name="fuzzy" content="25;100"> + +<iframe id="target" width="400" height="400" srcdoc=' + <html> + <style> + @keyframes update { + from { transform: translateY(0px); } + to { transform: translateY(200px); } + } + html { + min-height: 100%; + padding-bottom: 100px; + } + #box { + width: 100px; + height: 100px; + background-color: green; + animation: update 1s linear; + animation-timeline: scroll(); + } + #covered { + width: 100px; + height: 100px; + background-color: red; + } + + * { + margin-top: 0px; + margin-bottom: 0px; + } + </style> + <script> + window.addEventListener("load", function() { + const scroller = document.scrollingElement; + + // Move the scroller to the halfway point. + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + window.requestAnimationFrame(() => { + window.parent.postMessage("ready", "*"); + }); + }); + </script> + <body> + <div id="box"></div> + <div id="covered"></div> + </body> + </html> +'></iframe> + +<script> + window.addEventListener("message", event => { + if (event.data == "ready") { + document.documentElement.classList.remove("reftest-wait"); + } + }, false); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-default-print.tentative.html b/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-default-print.tentative.html new file mode 100644 index 0000000000..975a59812e --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-default-print.tentative.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>The default scroll() timeline for print</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<meta name="assert" content="CSS animation correctly updates values when using the default scroll() timeline"> +<link rel="match" href="../scroll-timeline-default-ref.html"> + +<style> + @keyframes update { + from { transform: translateY(0px); } + to { transform: translateY(200px); } + } + + html { + min-height: 100%; + padding-bottom: 100px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + animation: update 1s linear; + animation-timeline: scroll(); + } + + #covered { + width: 100px; + height: 100px; + background-color: red; + } + + * { + margin-top: 0px; + margin-bottom: 0px; + } +</style> + +<div id="box"></div> +<div id="covered"></div> +<script src="/web-animations/testcommon.js"></script> +<script> + document.documentElement.addEventListener('TestRendered', async () => { + runTest(); + }, { once: true }); + + async function runTest() { + const scroller = document.scrollingElement; + + await waitForCompositorReady(); + + // Move the scroller to the halfway point. + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + await waitForNextFrame(); + await waitForNextFrame(); + + document.documentElement.classList.remove("reftest-wait"); + } +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-specified-scroller-print.html b/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-specified-scroller-print.html new file mode 100644 index 0000000000..7e5b6607b6 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-specified-scroller-print.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>A scroll timeline with a specified scroller for print</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines"> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<meta name="assert" content="CSS animation correctly updates values when using a specified scroller"> +<link rel="match" href="scroll-timeline-specified-scroller-ref.html"> + +<style> + @keyframes anim { + from { transform: translateX(0px); } + to { transform: translateX(100px); } + } + + #scroller { + scroll-timeline: timeline; + overflow: scroll; + width: 100px; + height: 100px; + scrollbar-width: none; + } + + #contents { + height: 200px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + animation: anim 1s linear; + animation-timeline: timeline; + } + + @supports not (animation-timeline:timeline) { + #box { + animation-play-state: paused; + } + } +</style> + +<div id="scroller"> + <div id="contents"></div> +</div> +<div id="box"></div> + +<script> + window.addEventListener('load', function() { + const scroller = document.getElementById("scroller"); + // Move the scroller to the halfway point. + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + window.requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-specified-scroller-ref.html b/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-specified-scroller-ref.html new file mode 100644 index 0000000000..9074f2454b --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/printing/scroll-timeline-specified-scroller-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for scroll timeline with a specified scroller</title> +<style> + #scroller { + overflow: scroll; + width: 100px; + height: 100px; + scrollbar-width: none; + } + + #contents { + height: 200px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + transform: translateX(50px); + } +</style> + +<div id="scroller"> + <div id="contents"></div> +</div> +<div id="box"></div> + +<script> + window.addEventListener('load', function() { + const scroller = document.getElementById("scroller"); + // Move the scroller to the halfway point. + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + document.documentElement.classList.remove("reftest-wait"); + }); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html b/testing/web-platform/tests/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html new file mode 100644 index 0000000000..f4f9a669f3 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html @@ -0,0 +1,255 @@ +<!DOCTYPE html> +<title>The various animation longhands with progress based animations</title> +<link rel="help" src="https://drafts.csswg.org/css-animations-2"> +<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/4862"> +<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: 0px; } + to { translate: 100px; } + } + #container { + width: 300px; + height: 300px; + overflow: scroll; + } + #target { + width: 100px; + height: 100px; + translate: none; + } +</style> +<body> +<div id="log"></div> +<script> +"use strict"; + +setup(assert_implements_animation_timeline); + +const createTargetAndScroller = function(t) { + let container = document.createElement('div'); + container.id = 'container'; + let target = document.createElement('div'); + target.id = 'target'; + let content = document.createElement('div'); + content.style.blockSize = '100%'; + + // The height of target is 100px and the content is 100%, so the scroll range + // is [0, 100]. + + // <div id='container'> + // <div id='target'></div> + // <div style='block-size: 100%;'></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 [target, container]; +}; + +async function scrollTop(element, value) { + element.scrollTop = value; + await waitForNextFrame(); +} + +// ------------------------------ +// Test animation-duration +// ------------------------------ + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim'; + target.style.animationTimeline = 'scroll(nearest)'; + + await scrollTop(scroller, 25); // [0, 100]. + assert_equals(getComputedStyle(target).translate, '25px'); +}, 'animation-duration'); + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '0s linear anim forwards'; + target.style.animationTimeline = 'scroll(nearest)'; + + await scrollTop(scroller, 25); // [0, 100]. + assert_equals(getComputedStyle(target).translate, '100px'); +}, 'animation-duration: 0s'); + + +// ------------------------------ +// Test animation-iteration-count +// ------------------------------ + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim'; + target.style.animationTimeline = 'scroll(nearest)'; + + await scrollTop(scroller, 25); // [0, 100]. + assert_equals(getComputedStyle(target).translate, '25px'); + + // Let animation become 50% in the 1st iteration. + target.style.animationIterationCount = '2'; + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).translate, '50px'); + + // Let animation become 0% in the 2nd iteration. + target.style.animationIterationCount = '4'; + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).translate, '0px'); +}, 'animation-iteration-count'); + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim forwards'; + target.style.animationTimeline = 'scroll(nearest)'; + target.style.animationIterationCount = '0'; + + await scrollTop(scroller, 25); // [0, 100]. + assert_equals(getComputedStyle(target).translate, '0px'); +}, 'animation-iteration-count: 0'); + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim forwards'; + target.style.animationTimeline = 'scroll(nearest)'; + target.style.animationIterationCount = 'infinite'; + + await scrollTop(scroller, 25); // [0, 100]. + assert_equals(getComputedStyle(target).translate, '100px'); +}, 'animation-iteration-count: infinite'); + + +// ------------------------------ +// Test animation-direction +// ------------------------------ + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim'; + target.style.animationTimeline = 'scroll(nearest)'; + + await scrollTop(scroller, 25) // [0, 100]. + assert_equals(getComputedStyle(target).translate, '25px'); +}, 'animation-direction: normal'); + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim'; + target.style.animationTimeline = 'scroll(nearest)'; + target.style.animationDirection = 'reverse'; + + await scrollTop(scroller, 25); // 25% in the reversing direction. + assert_equals(getComputedStyle(target).translate, '75px'); +}, 'animation-direction: reverse'); + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim'; + target.style.animationTimeline = 'scroll(nearest)'; + target.style.animationIterationCount = '2'; + target.style.animationDirection = 'alternate'; + + await scrollTop(scroller, 10); // 20% in the 1st iteration. + assert_equals(getComputedStyle(target).translate, '20px'); + + await scrollTop(scroller, 60); // 20% in the 2nd iteration (reversing direction). + assert_equals(getComputedStyle(target).translate, '80px'); +}, 'animation-direction: alternate'); + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim'; + target.style.animationTimeline = 'scroll(nearest)'; + target.style.animationIterationCount = '2'; + target.style.animationDirection = 'alternate-reverse'; + + await scrollTop(scroller, 10); // 20% in the 1st iteration (reversing direction). + assert_equals(getComputedStyle(target).translate, '80px'); + + await scrollTop(scroller, 60); // 20% in the 2nd iteration. + assert_equals(getComputedStyle(target).translate, '20px'); +}, 'animation-direction: alternate-reverse'); + + +// ------------------------------ +// Test animation-delay +// ------------------------------ + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim'; + target.style.animationTimeline = 'scroll(nearest)'; + + await scrollTop(scroller, 25); // [0, 100]. + assert_equals(getComputedStyle(target).translate, '25px'); + + // (start delay: 10s) (duration: 10s) + // before active + // |--------------------|--------------------| + // 0px 50px 100px (The scroller) + // 0% 100% (The iteration progress) + + // Let animation be in before phase. + target.style.animationDelay = '10s'; + target.style.animationDelayStart = '10s'; // crbug.com/1375994 + assert_equals(getComputedStyle(target).translate, 'none'); + + await scrollTop(scroller, 50); // The animation enters active phase. + assert_equals(getComputedStyle(target).translate, '0px'); + + await scrollTop(scroller, 75); // The ieration progress is 50%. + assert_equals(getComputedStyle(target).translate, '50px'); +}, 'animation-delay with a positive value'); + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim'; + target.style.animationTimeline = 'scroll(nearest)'; + + // active + // |--------------------| + // 0px 100px (The scroller) + // 50% 100% (The iteration progress) + + await scrollTop(scroller, 20); // [0, 100]. + target.style.animationDelay = '-5s'; + target.style.animationDelayStart = '-5s'; // crbug.com/1375994 + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).translate, '60px'); +}, 'animation-delay with a negative value'); + + +// ------------------------------ +// Test animation-fill-mode +// ------------------------------ + +promise_test(async t => { + let [target, scroller] = createTargetAndScroller(t); + target.style.animation = '10s linear anim'; + target.style.animationTimeline = 'scroll(nearest)'; + target.style.animationDelay = '10s'; + target.style.animationDelayStart = '10s'; // crbug.com/1375994 + + await scrollTop(scroller, 25); + assert_equals(getComputedStyle(target).translate, 'none'); + + target.style.animationFillMode = 'backwards'; + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).translate, '0px'); +}, 'animation-fill-mode'); + +</script> +</body> diff --git a/testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html b/testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html new file mode 100644 index 0000000000..2e910cbe51 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title>CSS Animation using progress based timeline</title> +<link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<style> + main > div { + overflow: hidden; + width: 100px; + height: 100px; + } + main > div > div { + height: 200px; + } + + @keyframes top { + from { top: 100px; } + to { top: 200px; } + } + + #scroller1 { + scroll-timeline: top_timeline; + } + + #element { + animation-name: top; + animation-duration: 10s; + animation-timing-function: linear; + animation-timeline: top_timeline; + } + /* Ensure stable expectations if feature is not supported */ + @supports not (animation-timeline:foo) { + #element { animation-play-state: paused; } + } +</style> +<main> + <div id=scroller1><div></div></div> + <div id=element></div> +</main> +<script> + window.onload = async () => { + promise_test(async (t) => { + await waitForNextFrame(); + const anim = document.getAnimations()[0]; + await anim.ready; + scroller1.scrollTop = 20; + await waitForNextFrame(); + assert_equals(getComputedStyle(element).top, '120px'); + }, 'progress based animation timeline works'); + }; +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-computed.tentative.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-computed.tentative.html new file mode 100644 index 0000000000..8e23968b8e --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-computed.tentative.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674"> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-axis"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<style> + #outer { scroll-timeline-axis: inline; } + #target { scroll-timeline-axis: vertical; } +</style> +<div id="outer"> + <div id="target"></div> +</div> +<script> +test_computed_value('scroll-timeline-axis', 'initial', 'block'); +test_computed_value('scroll-timeline-axis', 'inherit', 'inline'); +test_computed_value('scroll-timeline-axis', 'unset', 'block'); +test_computed_value('scroll-timeline-axis', 'revert', 'block'); +test_computed_value('scroll-timeline-axis', 'block'); +test_computed_value('scroll-timeline-axis', 'inline'); +test_computed_value('scroll-timeline-axis', 'vertical'); +test_computed_value('scroll-timeline-axis', 'horizontal'); + +test(() => { + let style = getComputedStyle(document.getElementById('target')); + assert_not_equals(Array.from(style).indexOf('scroll-timeline-axis'), -1); +}, 'The scroll-timeline-axis property shows up in CSSStyleDeclaration enumeration'); + +test(() => { + let style = document.getElementById('target').style; + assert_not_equals(style.cssText.indexOf('scroll-timeline-axis'), -1); +}, 'The scroll-timeline-axis property shows up in CSSStyleDeclaration.cssText'); + +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-parsing.tentative.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-parsing.tentative.html new file mode 100644 index 0000000000..81be07e38f --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-parsing.tentative.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674"> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-axis"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<div id="target"></div> + +<script> + +test_valid_value('scroll-timeline-axis', 'initial'); +test_valid_value('scroll-timeline-axis', 'inherit'); +test_valid_value('scroll-timeline-axis', 'unset'); +test_valid_value('scroll-timeline-axis', 'revert'); + +test_valid_value('scroll-timeline-axis', 'block'); +test_valid_value('scroll-timeline-axis', 'inline'); +test_valid_value('scroll-timeline-axis', 'vertical'); +test_valid_value('scroll-timeline-axis', 'horizontal'); + +test_invalid_value('scroll-timeline-axis', 'abc'); +test_invalid_value('scroll-timeline-axis', '10px'); +test_invalid_value('scroll-timeline-axis', 'auto'); +test_invalid_value('scroll-timeline-axis', 'none'); + +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-writing-mode.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-writing-mode.html new file mode 100644 index 0000000000..90912bfc22 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-writing-mode.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-axis"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<style> + .scroller { + overflow: hidden; + width: 100px; + height: 100px; + } + .contents { + height: 200px; + width: 200px; + } + @keyframes expand { + from { width: 100px; } + to { width: 200px; } + } + #timeline_initial_axis { + scroll-timeline: timeline_initial_axis; + } + #timeline_vertical { + scroll-timeline: vertical timeline_vertical; + } + #timeline_horizontal { + scroll-timeline: horizontal timeline_horizontal; + } + #timeline_block_in_horizontal { + scroll-timeline: block timeline_block_in_horizontal; + } + #timeline_inline_in_horizontal { + scroll-timeline: inline timeline_inline_in_horizontal; + } + #timeline_block_in_vertical { + scroll-timeline: block timeline_block_in_vertical; + writing-mode: vertical-lr; + } + #timeline_inline_in_vertical { + scroll-timeline: inline timeline_inline_in_vertical; + writing-mode: vertical-lr; + } + #container > div { + width: 0px; + animation-name: expand; + animation-duration: 10s; + animation-timing-function: linear; + } + /* Ensure stable expectations if feature is not supported */ + @supports not (animation-timeline:foo) { + #container > div { animation-play-state: paused; } + } + #element_initial_axis { animation-timeline: timeline_initial_axis; } + #element_vertical { animation-timeline: timeline_vertical; } + #element_horizontal { animation-timeline: timeline_horizontal; } + #element_block_in_horizontal { animation-timeline: timeline_block_in_horizontal; } + #element_inline_in_horizontal { animation-timeline: timeline_inline_in_horizontal; } + #element_block_in_vertical { animation-timeline: timeline_block_in_vertical; } + #element_inline_in_vertical { animation-timeline: timeline_inline_in_vertical; } +</style> +<div class=scroller id=timeline_initial_axis><div class=contents></div></div> +<div class=scroller id=timeline_vertical><div class=contents></div></div> +<div class=scroller id=timeline_horizontal><div class=contents></div></div> +<div class=scroller id=timeline_block_in_horizontal><div class=contents></div></div> +<div class=scroller id=timeline_inline_in_horizontal><div class=contents></div></div> +<div class=scroller id=timeline_block_in_vertical><div class=contents></div></div> +<div class=scroller id=timeline_inline_in_vertical><div class=contents></div></div> +<div id=container> + <div id=element_initial_axis></div> + <div id=element_vertical></div> + <div id=element_horizontal></div> + <div id=element_block_in_horizontal></div> + <div id=element_inline_in_horizontal></div> + <div id=element_block_in_vertical></div> + <div id=element_inline_in_vertical></div> +</div> +<script> + // Animations linked to vertical scroll-timelines are at 75% progress. + timeline_initial_axis.scrollTop = 75; + timeline_vertical.scrollTop = 75; + timeline_block_in_horizontal.scrollTop = 75; + timeline_inline_in_vertical.scrollTop = 75; + // Animations linked to horizontal scroll-timelines are at 25% progress. + timeline_horizontal.scrollLeft = 25; + timeline_block_in_vertical.scrollLeft = 25; + timeline_inline_in_horizontal.scrollLeft = 25; + + promise_test(async (t) => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element_initial_axis).width, '175px'); + }, 'Initial axis'); + + promise_test(async (t) => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element_vertical).width, '175px'); + }, 'Vertical axis'); + + promise_test(async (t) => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element_horizontal).width, '125px'); + }, 'Horizontal axis'); + + promise_test(async (t) => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element_block_in_horizontal).width, '175px'); + }, 'Block axis in horizontal writing-mode'); + + promise_test(async (t) => { + await waitForNextFrame(); + assert_equals(getComputedStyle(element_inline_in_horizontal).width, '125px'); + }, 'Inline axis in horizontal writing-mode'); + + promise_test(async (t) => { + await waitForNextFrame(); + assert_equals(getComputedStyle(timeline_block_in_vertical).writingMode, 'vertical-lr'); + assert_equals(getComputedStyle(element_block_in_vertical).width, '125px'); + }, 'Block axis in vertical writing-mode'); + + promise_test(async (t) => { + await waitForNextFrame(); + assert_equals(getComputedStyle(timeline_inline_in_vertical).writingMode, 'vertical-lr'); + assert_equals(getComputedStyle(element_inline_in_vertical).width, '175px'); + }, 'Inline axis in vertical writing-mode'); + +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-iframe-ref.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-iframe-ref.html new file mode 100644 index 0000000000..1ab5646c8b --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-iframe-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Reference for default scroll() timeline</title> +<iframe width="400" height="400" srcdoc=' + <html> + <style> + html { + min-height: 100%; + padding-bottom: 100px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + transform: translateY(100px); + } + + * { + margin-top: 0px; + margin-bottom: 0px; + } + </style> + <script> + window.addEventListener("load", function() { + // Move the scroller to halfway. + const scroller = document.scrollingElement; + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + }); + </script> + <div id="box"></div> + </html> +'></iframe> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-iframe.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-iframe.html new file mode 100644 index 0000000000..dbcf5941a8 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-iframe.html @@ -0,0 +1,73 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>The default scroll() timeline in the iframe</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<meta name="assert" content="CSS animation correctly updates values when using the default scroll() timeline"> +<link rel="match" href="scroll-timeline-default-iframe-ref.html"> + +<iframe id="target" width="400" height="400" srcdoc=' + <html> + <style> + @keyframes update { + from { transform: translateY(0px); } + to { transform: translateY(200px); } + } + html { + min-height: 100%; + padding-bottom: 100px; + } + #box { + width: 100px; + height: 100px; + background-color: green; + animation: update 1s linear; + animation-timeline: scroll(); + } + #covered { + width: 100px; + height: 100px; + background-color: red; + } + + * { + margin-top: 0px; + margin-bottom: 0px; + } + </style> + <script src="/web-animations/testcommon.js"></script> + <script> + window.addEventListener("load", async function() { + const scroller = document.scrollingElement; + + // Move the scroller to the halfway point. + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + await waitForCompositorReady(); + await waitForNextFrame(); + await waitForNextFrame(); + + window.parent.postMessage("success", "*"); + }); + </script> + <body> + <div id="box"></div> + <div id="covered"></div> + </body> + </html> +'></iframe> +<script src="/web-animations/testcommon.js"></script> +<script> + async function finishTest() { + await waitForCompositorReady(); + await waitForNextFrame(); + await waitForNextFrame(); + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("message", event => { + if (event.data == "success") { + finishTest(); + } + }, false); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-quirks-mode.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-quirks-mode.html new file mode 100644 index 0000000000..d2c28d86b6 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-quirks-mode.html @@ -0,0 +1,63 @@ +<html class="reftest-wait"> +<title>The default scroll() timeline in quirks mode</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<meta name="assert" content="CSS animation correctly updates values when using the default scroll() timeline"> +<link rel="match" href="scroll-timeline-default-ref.html"> + +<style> + @keyframes update { + from { transform: translateY(0px); } + to { transform: translateY(200px); } + } + + html { + min-height: 100%; + padding-bottom: 100px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + animation: update 1s linear; + animation-timeline: scroll(); + } + + #covered { + width: 100px; + height: 100px; + background-color: red; + } + + * { + margin-top: 0px; + margin-bottom: 0px; + } +</style> + +<div id="box"></div> +<div id="covered"></div> +<script src="/web-animations/testcommon.js"></script> +<script> +document.documentElement.addEventListener('TestRendered', async () => { + runTest(); +}, { once: true }); + +async function runTest() { + const scroller = document.scrollingElement; + + await waitForCompositorReady(); + + // Move the scroller to the halfway point. Then advance to the next frame + // to pick up the new timeline time. + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + await waitForNextFrame(); + await waitForNextFrame(); + + document.documentElement.classList.remove("reftest-wait"); +} + +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-ref.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-ref.html new file mode 100644 index 0000000000..cb3b60e4bd --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Reference for default scroll() timeline</title> +<style> + html { + min-height: 100%; + padding-bottom: 100px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + transform: translateY(100px); + } + + * { + margin-top: 0px; + margin-bottom: 0px; + } +</style> + +<div id="box"></div> + +<script> + window.addEventListener('load', function() { + // Move the scroller to halfway. + const scroller = document.scrollingElement; + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + }); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-writing-mode-rl-ref.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-writing-mode-rl-ref.html new file mode 100644 index 0000000000..3c072829e6 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-writing-mode-rl-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>Reference for default scroll() timeline with vertical-rl</title> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<style> + html { + min-block-size: 100%; + padding-block-end: 100px; + writing-mode: vertical-rl + } + + #box { + width: 100px; + height: 100px; + background-color: green; + transform: translateX(-100px); + } + + * { + margin-block: 0px; + } +</style> + +<div id="box"></div> + +<script> + window.addEventListener('load', function() { + // Move the scroller to halfway. + const scroller = document.scrollingElement; + const maxScroll = scroller.scrollWidth - scroller.clientWidth; + scroller.scrollLeft = -0.5 * maxScroll; + }); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-writing-mode-rl.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-writing-mode-rl.html new file mode 100644 index 0000000000..27e6ec196b --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default-writing-mode-rl.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>The default scroll() timeline with writing-mode:vertical-rl</title> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<meta name="assert" content="CSS animation correctly updates values when using + the default scroll() timeline with writing-mode:vertical-rl"> +<link rel="match" href="scroll-timeline-default-writing-mode-rl-ref.html"> + +<style> + @keyframes update { + from { transform: translateX(0px); } + to { transform: translateX(-200px); } + } + + html { + min-block-size: 100%; + padding-block-end: 100px; + writing-mode: vertical-rl; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + animation: update 1s linear; + animation-timeline: scroll(); + } + + #covered { + width: 100px; + height: 100px; + background-color: red; + } + + * { + margin-block: 0px; + } +</style> + +<div id="box"></div> +<div id="covered"></div> + +<script src="/web-animations/testcommon.js"></script> +<script> + document.documentElement.addEventListener('TestRendered', async () => { + runTest(); + }, { once: true }); + + async function runTest() { + const scroller = document.scrollingElement; + + await waitForCompositorReady(); + + // Move the scroller to the halfway point. + const maxScroll = scroller.scrollWidth - scroller.clientWidth; + scroller.scrollLeft = -0.5 * maxScroll; + + await waitForNextFrame(); + await waitForNextFrame(); + + document.documentElement.classList.remove("reftest-wait"); + } +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default.html new file mode 100644 index 0000000000..07eda33fd0 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-default.html @@ -0,0 +1,63 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>The default scroll() timeline</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<meta name="assert" content="CSS animation correctly updates values when using the default scroll() timeline"> +<link rel="match" href="scroll-timeline-default-ref.html"> + +<style> + @keyframes update { + from { transform: translateY(0px); } + to { transform: translateY(200px); } + } + + html { + min-height: 100%; + padding-bottom: 100px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + animation: update 1s linear; + animation-timeline: scroll(); + } + + #covered { + width: 100px; + height: 100px; + background-color: red; + } + + * { + margin-top: 0px; + margin-bottom: 0px; + } +</style> + +<div id="box"></div> +<div id="covered"></div> + +<script src="/web-animations/testcommon.js"></script> +<script> + document.documentElement.addEventListener('TestRendered', async () => { + runTest(); + }, { once: true }); + + async function runTest() { + const scroller = document.scrollingElement; + + await waitForCompositorReady(); + + // Move the scroller to the halfway point. + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + await waitForNextFrame(); + await waitForNextFrame(); + + document.documentElement.classList.remove("reftest-wait"); + } +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-document-scroller-quirks.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-document-scroller-quirks.html new file mode 100644 index 0000000000..809a658a15 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-document-scroller-quirks.html @@ -0,0 +1,36 @@ +<!-- Quirks mode --> +<title>Tests the document scroller in quirks mode</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1180575"> +<link rel="author" href="mailto:andruud@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/scroll-animations/scroll-timelines/testcommon.js"></script> +<script src="/css/css-animations/support/testcommon.js"></script> +<script src="support/testcommon.js"></script> +<style> + @keyframes anim { + from { z-index: 100; } + to { z-index: 100; } + } + #element { + animation: anim forwards; + animation-timeline: scroll(root); + } + #spacer { + height: 200vh; + } +</style> +<div id=element></div> +<div id=spacer></div> + +<script> +'use strict'; + +setup(assert_implements_animation_timeline); + +promise_test(async () => { + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(element).zIndex, "100"); +}); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-dynamic.tentative.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-dynamic.tentative.html new file mode 100644 index 0000000000..b0880a7cc5 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-dynamic.tentative.html @@ -0,0 +1,267 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines"> +<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> + main > div { + overflow: hidden; + width: 100px; + height: 100px; + } + main > div > div { + height: 200px; + } + @keyframes expand { + from { width: 100px; } + to { width: 200px; } + } + #element { + width: 0px; + height: 20px; + animation-name: expand; + /* Some of the tests in this file assume animations attached to the + DocumentTimeline are "stopped" without actually being paused. + Using 600s + steps(10, end) achieves this for one minute.*/ + animation-duration: 600s; + animation-timing-function: steps(10, end); + } +</style> +<main> + <div id=scroller1><div></div></div> + <div id=scroller2><div></div></div> + <div id=container></div> +</main> +<script> + // Force layout of scrollers. + scroller1.offsetTop; + scroller2.offsetTop; + + // Note the steps(10, end) timing function and height:100px. (10px scroll + // resolution). + scroller1.scrollTop = 20; + scroller2.scrollTop = 40; + + function insertElement() { + let element = document.createElement('div'); + element.id = 'element'; + container.append(element); + return element; + } + + // Runs a test with dynamically added/removed elements or CSS rules. + // Each test is instantiated twice: once for the initial style resolve where + // the DOM change was effectuated, and once after scrolling. + function dynamic_rule_test(func, description) { + // assert_width is an async function which verifies that the computed value + // of 'width' is as expected. + const instantiate = (assert_width, description) => { + promise_test(async (t) => { + try { + await func(t, assert_width); + } finally { + while (container.firstChild) + container.firstChild.remove(); + scroller1.style = ''; + scroller2.style = ''; + } + }, description); + }; + + // Verify that the computed style is as expected after a full frame update + // following the rule change took place. + instantiate(async (element, expected) => { + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(element).width, expected); + }, description + ' [immediate]'); + + // Verify that the computed style after scrolling a bit. + instantiate(async (element, expected) => { + scroller1.scrollTop = scroller1.scrollTop + 10; + scroller2.scrollTop = scroller2.scrollTop + 10; + await waitForNextFrame(); + scroller1.scrollTop = scroller1.scrollTop - 10; + scroller2.scrollTop = scroller2.scrollTop - 10; + await waitForNextFrame(); + assert_equals(getComputedStyle(element).width, expected); + }, description + ' [scroll]'); + } + + dynamic_rule_test(async (t, assert_width) => { + let element = insertElement(); + + // This element initially has a DocumentTimeline. + await assert_width(element, '100px'); + + // Switch to scroll timeline. + scroller1.style.scrollTimelineName = 'timeline'; + element.style.animationTimeline = 'timeline'; + await assert_width(element, '120px'); + + // Switching from ScrollTimeline -> DocumentTimeline should preserve + // current time. + scroller1.style = ''; + element.style = ''; + await assert_width(element, '120px'); + }, 'Switching between document and scroll timelines'); + + dynamic_rule_test(async (t, assert_width) => { + let element = insertElement(); + + // Flush style and create the animation with play pending. + getComputedStyle(element).animation; + + let anim = element.getAnimations()[0]; + assert_true(anim.pending, "The animation is in play pending"); + + // Switch to scroll timeline for a pending animation. + scroller1.style.scrollTimelineName = 'timeline'; + element.style.animationTimeline = 'timeline'; + + await anim.ready; + assert_false(anim.pending, "The animation is not pending"); + + await assert_width(element, '120px'); + }, 'Switching pending animation from document to scroll timelines'); + + dynamic_rule_test(async (t, assert_width) => { + let element = insertElement(); + + // Note: #scroller1 is at 20%, and #scroller2 is at 40%. + scroller1.style.scrollTimelineName = 'timeline1'; + scroller2.style.scrollTimelineName = 'timeline2'; + + await assert_width(element, '100px'); + + element.style.animationTimeline = 'timeline1'; + await assert_width(element, '120px'); + + element.style.animationTimeline = 'timeline2'; + await assert_width(element, '140px'); + + element.style.animationTimeline = 'timeline1'; + await assert_width(element, '120px'); + + // Switching from ScrollTimeline -> DocumentTimeline should preserve + // current time. + element.style.animationTimeline = ''; + await assert_width(element, '120px'); + + }, 'Changing computed value of animation-timeline changes effective timeline'); + + dynamic_rule_test(async (t, assert_width) => { + let element = insertElement(); + + scroller1.style.scrollTimelineName = 'timeline'; + + // DocumentTimeline applies by default. + await assert_width(element, '100px'); + + // DocumentTimeline -> none + element.style.animationTimeline = 'none'; + await assert_width(element, '0px'); + + // none -> DocumentTimeline + element.style.animationTimeline = ''; + await assert_width(element, '100px'); + + // DocumentTimeline -> ScrollTimeline + element.style.animationTimeline = 'timeline'; + await assert_width(element, '120px'); + + // ScrollTimeline -> none + element.style.animationTimeline = 'none'; + await assert_width(element, '120px'); + + // none -> ScrollTimeline + element.style.animationTimeline = 'timeline'; + await assert_width(element, '120px'); + }, 'Changing to/from animation-timeline:none'); + + + dynamic_rule_test(async (t, assert_width) => { + let element = insertElement(); + + element.style.animationTimeline = 'timeline'; + + // Unknown animation-timeline, current time held at zero. + await assert_width(element, '100px'); + + scroller1.style.scrollTimelineName = 'timeline'; + await assert_width(element, '120px'); + + scroller2.style.scrollTimelineName = 'timeline'; + await assert_width(element, '140px'); + }, 'Changing scroll-timeline on preceding elements affects target element'); + + + dynamic_rule_test(async (t, assert_width) => { + let element = insertElement(); + + element.style.animationDirection = 'reverse'; + element.style.animationTimeline = 'timeline'; + + // Unknown animation-timeline, current time held at zero. + await assert_width(element, '200px'); + + // Note: #scroller1 is at 20%. + scroller1.style.scrollTimelineName = 'timeline'; + await assert_width(element, '180px'); + + // Note: #scroller2 is at 40%. + scroller2.style.scrollTimelineName = 'timeline'; + await assert_width(element, '160px'); + + element.style.animationDirection = ''; + await assert_width(element, '140px'); + }, 'Reverse animation direction'); + + dynamic_rule_test(async (t, assert_width) => { + let element = insertElement(); + element.style.animationTimeline = 'timeline'; + + // Unknown animation-timeline, current time held at zero. + await assert_width(element, '100px'); + + // Note: #scroller1 is at 20%. + scroller1.style.scrollTimelineName = 'timeline'; + await assert_width(element, '120px'); + + element.style.animationPlayState = 'paused'; + + // We should still be at the same position after pausing. + await assert_width(element, '120px'); + + // Note: #scroller2 is at 40%. + scroller2.style.scrollTimelineName = 'timeline'; + + // Even when switching timelines, we should be at the same position until + // we unpause. + await assert_width(element, '120px'); + + // Unpausing should synchronize to the scroll position. + element.style.animationPlayState = ''; + await assert_width(element, '140px'); + }, 'Switching timelines while paused'); + + dynamic_rule_test(async (t, assert_width) => { + let element = insertElement(); + + // Note: #scroller1 is at 20%. + scroller1.style.scrollTimelineName = 'timeline'; + + await assert_width(element, '100px'); + + element.style.animationTimeline = 'timeline'; + element.style.animationPlayState = 'paused'; + + // Pausing should happen before the timeline is modified. (Tentative). + // https://github.com/w3c/csswg-drafts/issues/5653 + await assert_width(element, '100px'); + + element.style.animationPlayState = 'running'; + await assert_width(element, '120px'); + }, 'Switching timelines and pausing at the same time'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-frame-size-changed-ref.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-frame-size-changed-ref.html new file mode 100644 index 0000000000..ea7628ac72 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-frame-size-changed-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Reference for the default scroll() timeline</title> +<style> + html { + min-height: 100%; + padding-bottom: 50px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + transform: translateY(100px); + } + + * { + margin-top: 0px; + margin-bottom: 0px; + } +</style> + +<div id="box"></div> + +<script> + window.addEventListener('load', function() { + // Move the scroller to halfway. + const scroller = document.scrollingElement; + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + }); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-frame-size-changed.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-frame-size-changed.html new file mode 100644 index 0000000000..fb0eb8aa17 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-frame-size-changed.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>The default scroll() timeline when the frame size changed</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<meta name="assert" content="CSS animation correctly updates values when using + the default scroll() timeline and update the + frame size"> +<link rel="match" href="scroll-timeline-frame-size-changed-ref.html"> + +<style> + @keyframes update { + from { transform: translateY(0px); } + to { transform: translateY(200px); } + } + + html { + min-height: 100%; + padding-bottom: 100px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + animation: update 1s linear; + animation-timeline: scroll(); + } + + #covered { + width: 100px; + height: 100px; + background-color: red; + } + + * { + margin-top: 0px; + margin-bottom: 0px; + } +</style> + +<div id="box"></div> +<div id="covered"></div> + +<script src="/web-animations/testcommon.js"></script> +<script> + document.documentElement.addEventListener('TestRendered', async () => { + runTest(); + }, { once: true }); + + async function runTest() { + const scroller = document.scrollingElement; + + await waitForCompositorReady(); + + // Move the scroller to the 25% point. + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.25 * maxScroll; + await waitForNextFrame(); + + // Update scroll range to make the current position become 50% point. + scroller.style.paddingBottom = "50px"; + await waitForNextFrame(); + + document.documentElement.classList.remove("reftest-wait"); + } +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-in-container-query.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-in-container-query.html new file mode 100644 index 0000000000..d6a8ba8e60 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-in-container-query.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<title>scroll-timeline and container queries</title> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-shorthand"> +<link rel="help" src="https://drafts.csswg.org/css-contain-3/#container-queries"> +<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> + #outer { + height: 100px; + width: 150px; + } + + #container { + container-type: size; + } + + #scroller { + overflow: auto; + width: auto; + height: 100px; + } + #scroller > div { + height: 200px; + } + + /* This does not apply initially. */ + @container (width > 200px) { + #scroller { + scroll-timeline: timeline; + } + } + + @keyframes expand { + from { background-color: rgb(100, 100, 100); } + to { background-color: rgb(200, 200, 200); } + } + #element { + height: 10px; + width: 10px; + animation: expand 10s linear; + animation-timeline: timeline; + background-color: rgb(0, 0, 0); + } +</style> +<div id=outer> + <div id=container> + <div id=scroller> + <div></div> + </div> + <div id=element> + </div> + </div> +</div> +<script> + setup(assert_implements_animation_timeline); + + promise_test(async (t) => { + element.offsetTop; + scroller.scrollTop = 50; + await waitForNextFrame(); + // Unknown timeline, time held at zero. + assert_equals(getComputedStyle(element).backgroundColor, 'rgb(100, 100, 100)'); + // This causes the timeline to be created. + outer.style.width = '250px'; + // Check value with getComputedStyle immediately, which is the unanimated + // value since the scroll timeline is inactive before the next frame. + assert_equals(getComputedStyle(element).backgroundColor, 'rgb(0, 0, 0)'); + // Also check value after one frame. + await waitForNextFrame(); + assert_equals(getComputedStyle(element).backgroundColor, 'rgb(150, 150, 150)'); + }, 'Timeline appearing via container queries'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-inactive.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-inactive.html new file mode 100644 index 0000000000..92165d7046 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-inactive.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines"> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#avoiding-cycles"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<style> + #scroller { + overflow: scroll; + width: 100px; + height: 100px; + } + #contents { + height: 200px; + } + @keyframes expand { + from { width: 100px; } + to { width: 200px; } + } + #element { + width: 0px; + animation: expand 10s linear paused; + animation-timeline: timeline; + } +</style> +<div id="container"> + <div id=element></div> +</div> +<script> + +promise_test(async (t) => { + let div = document.createElement('div'); + div.setAttribute('id', 'scroller'); + div.style.scrollTimeline = 'timeline'; + div.innerHTML = '<div id=contents></div>'; + try { + container.insertBefore(div, element); + + // The source has no layout box at the time the scroll timeline is created. + assert_equals(getComputedStyle(element).width, '0px'); + scroller.offsetTop; // Ensure a layout box for the scroller. + // Wait for an update to the timeline state: + await waitForNextFrame(); + // The timeline should now be active, and the animation should apply: + assert_equals(getComputedStyle(element).width, '100px'); + } finally { + div.remove(); + } +}, 'Animation does not apply when timeline is initially inactive'); + +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-inline-orientation-ref.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-inline-orientation-ref.html new file mode 100644 index 0000000000..7b87b1db39 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-inline-orientation-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>Reference for scroll timeline with inline orientation and root scroller</title> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<style> + html { + min-width: 100%; + padding-right: 100px; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + transform: translateX(100px); + } + + * { + margin-left: 0px; + margin-right: 0px; + } +</style> + +<div id="box"></div> + +<script> + window.addEventListener('load', function() { + // Move the scroller to halfway. + const scroller = document.scrollingElement; + const maxScroll = scroller.scrollWidth - scroller.clientWidth; + scroller.scrollLeft = 0.5 * maxScroll; + }); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-inline-orientation.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-inline-orientation.html new file mode 100644 index 0000000000..52b7427f2d --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-inline-orientation.html @@ -0,0 +1,68 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>Scroll timeline with inline orientation and root scroller</title> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#descdef-scroll-timeline-orientation"> +<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> +<meta name="assert" content="CSS animation correctly updates values when using the inline orientation"> +<link rel="match" href="scroll-timeline-inline-orientation-ref.html"> + +<style> + @keyframes update { + from { transform: translateX(0px); } + to { transform: translateX(200px); } + } + + html { + min-width: 100%; + padding-right: 100px; + font-size: 0; + } + + #box { + width: 100px; + height: 100px; + background-color: green; + animation: update 1s linear; + animation-timeline: scroll(inline root); + display: inline-block; + } + + #covered { + width: 100px; + height: 100px; + background-color: red; + display: inline-block; + } + + * { + margin-left: 0px; + margin-right: 0px; + } +</style> + +<div id="box"></div> +<div id="covered"></div> + +<script src="/web-animations/testcommon.js"></script> +<script> + document.documentElement.addEventListener('TestRendered', async () => { + runTest(); + }, { once: true }); + + async function runTest() { + const scroller = document.scrollingElement; + + await waitForCompositorReady(); + + // Move the scroller to the halfway point. + const maxScroll = scroller.scrollWidth - scroller.clientWidth; + scroller.scrollLeft = 0.5 * maxScroll; + + await waitForNextFrame(); + await waitForNextFrame(); + + document.documentElement.classList.remove("reftest-wait"); + } +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-multi-pass.tentative.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-multi-pass.tentative.html new file mode 100644 index 0000000000..91668ada5b --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-multi-pass.tentative.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<title>ScrollTimelines may trigger multiple style/layout passes</title> +<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/5261"> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#avoiding-cycles"> +<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 expand_width { + from { width: 100px; } + to { width: 100px; } + } + @keyframes expand_height { + from { height: 100px; } + to { height: 100px; } + } + main { + height: 0px; + overflow: hidden; + } + .scroller { + height: 100px; + overflow: scroll; + } + .scroller > div { + height: 200px; + } + #element1 { + width: 1px; + animation: expand_width 10s; + animation-timeline: timeline1; + } + #element2 { + height: 1px; + animation: expand_height 10s; + animation-timeline: timeline2; + } +</style> +<main id=main> + <div id=element1></div> + <div> + <div id=element2></div> + </div> +</main> +<script> + setup(assert_implements_animation_timeline); + + function insertScroller(timeline_name) { + let scroller = document.createElement('div'); + scroller.classList.add('scroller'); + scroller.style.scrollTimeline = timeline_name; + scroller.append(document.createElement('div')); + main.insertBefore(scroller, element1); + } + + promise_test(async () => { + await waitForNextFrame(); + + let events1 = []; + let events2 = []; + + insertScroller('timeline1'); + // Even though the scroller was just inserted into the DOM, |timeline1| + // remains inactive until the next frame. + // + // https://drafts.csswg.org/scroll-animations-1/#avoiding-cycles + assert_equals(getComputedStyle(element1).width, '1px'); + (new ResizeObserver(entries => { + events1.push(entries); + insertScroller('timeline2'); + assert_equals(getComputedStyle(element2).height, '1px'); + })).observe(element1); + + (new ResizeObserver(entries => { + events2.push(entries); + })).observe(element2); + + await waitForNextFrame(); + + // According to the basic rules of the spec [1], the timeline is + // inactive at the time the resize observer event was delivered, because + // #scroller1 did not have a layout box at the time style recalc for + // #element1 happened. + // + // However, an additional style/layout pass should take place + // (before resize observer deliveries) if we detect new ScrollTimelines + // in this situation, hence we ultimately do expect the animation to + // apply [2]. + // + // [1] https://drafts.csswg.org/scroll-animations-1/#avoiding-cycles + // [2] https://github.com/w3c/csswg-drafts/issues/5261 + assert_equals(events1.length, 1); + assert_equals(events1[0].length, 1); + assert_equals(events1[0][0].contentBoxSize.length, 1); + assert_equals(events1[0][0].contentBoxSize[0].inlineSize, 100); + + // ScrollTimelines created during the ResizeObserver should remain + // inactive during the frame they're created, so the ResizeObserver + // event should not reflect the animated value. + assert_equals(events2.length, 1); + assert_equals(events2[0].length, 1); + assert_equals(events2[0][0].contentBoxSize.length, 1); + assert_equals(events2[0][0].contentBoxSize[0].blockSize, 1); + + assert_equals(getComputedStyle(element1).width, '100px'); + assert_equals(getComputedStyle(element2).height, '100px'); + }, 'Multiple style/layout passes occur when necessary'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-computed.tentative.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-computed.tentative.html new file mode 100644 index 0000000000..1acb964ef7 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-computed.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674"> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-name"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<style> + #outer { scroll-timeline-name: foo; } + #target { scroll-timeline-name: bar; } +</style> +<div id="outer"> + <div id="target"></div> +</div> +<script> +test_computed_value('scroll-timeline-name', 'initial', 'none'); +test_computed_value('scroll-timeline-name', 'inherit', 'foo'); +test_computed_value('scroll-timeline-name', 'unset', 'none'); +test_computed_value('scroll-timeline-name', 'revert', 'none'); +test_computed_value('scroll-timeline-name', 'none'); +test_computed_value('scroll-timeline-name', 'test'); +test_computed_value('scroll-timeline-name', 'tEst'); + +test(() => { + let style = getComputedStyle(document.getElementById('target')); + assert_not_equals(Array.from(style).indexOf('scroll-timeline-name'), -1); +}, 'The scroll-timeline-name property shows up in CSSStyleDeclaration enumeration'); + +test(() => { + let style = document.getElementById('target').style; + assert_not_equals(style.cssText.indexOf('scroll-timeline-name'), -1); +}, 'The scroll-timeline-name property shows up in CSSStyleDeclaration.cssText'); + +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-parsing.tentative.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-parsing.tentative.html new file mode 100644 index 0000000000..a8f2e31650 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-parsing.tentative.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674"> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-name"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<div id="target"></div> + +<script> + +test_valid_value('scroll-timeline-name', 'initial'); +test_valid_value('scroll-timeline-name', 'inherit'); +test_valid_value('scroll-timeline-name', 'unset'); +test_valid_value('scroll-timeline-name', 'revert'); + +test_valid_value('scroll-timeline-name', 'none'); +test_valid_value('scroll-timeline-name', 'abc'); +test_valid_value('scroll-timeline-name', ' abc', 'abc'); +test_valid_value('scroll-timeline-name', 'aBc'); +test_valid_value('scroll-timeline-name', 'auto'); + +test_invalid_value('scroll-timeline-name', 'default'); +test_invalid_value('scroll-timeline-name', '10px'); +test_invalid_value('scroll-timeline-name', 'foo bar'); +test_invalid_value('scroll-timeline-name', '"foo" "bar"'); +test_invalid_value('scroll-timeline-name', 'rgb(1, 2, 3)'); +test_invalid_value('scroll-timeline-name', '#fefefe'); + +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-tree-scoped.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-tree-scoped.html new file mode 100644 index 0000000000..622a582cce --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-name-tree-scoped.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<title>scroll-timelime-name and tree-scoped references</title> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines-named"> +<link rel="help" src="https://drafts.csswg.org/css-scoping-1/#shadow-names"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script src="/resources/declarative-shadow-dom-polyfill.js"></script> + +<main id=main></main> +<script> + function inflate(t, template) { + t.add_cleanup(() => main.replaceChildren()); + main.append(template.content.cloneNode(true)); + main.offsetTop; + } + + setup(() => { + polyfill_declarative_shadow_dom(document); + }); +</script> +<style> + @keyframes anim { + from { z-index: 100; } + to { z-index: 100; } + } +</style> + +<template id=scroll_timeline_host> + <style> + .target { + animation: anim 10s linear; + animation-timeline: timeline; + } + main > .scroller { + scroll-timeline: timeline horizontal; + } + </style> + <div class=scroller> + <div class=scroller> + <template shadowroot=open> + <style> + :host { + scroll-timeline: timeline vertical; + } + </style> + <slot></slot> + </template> + <div class=target></div> + </div> + </div> + <style> + </style> +</template> +<script> + promise_test(async (t) => { + inflate(t, scroll_timeline_host); + let target = main.querySelector('.target'); + assert_equals(target.getAnimations().length, 1); + let anim = target.getAnimations()[0]; + assert_not_equals(anim.timeline, null); + assert_equals(anim.timeline.axis, 'horizontal'); + }, 'Outer animation can not see scroll timeline defined by :host'); +</script> + + +<template id=scroll_timeline_slotted> + <style> + .target { + animation: anim 10s linear; + animation-timeline: timeline; + } + .host { + scroll-timeline: timeline horizontal; + } + </style> + <div class=host> + <template shadowroot=open> + <style> + ::slotted(.scroller) { + scroll-timeline: timeline vertical; + } + </style> + <slot></slot> + </template> + <div class=scroller> + <div class=target></div> + </div> + </div> + <style> + </style> +</template> +<script> + promise_test(async (t) => { + inflate(t, scroll_timeline_slotted); + let target = main.querySelector('.target'); + assert_equals(target.getAnimations().length, 1); + let anim = target.getAnimations()[0]; + assert_not_equals(anim.timeline, null); + assert_equals(anim.timeline.axis, 'horizontal'); + }, 'Outer animation can not see scroll timeline defined by ::slotted'); +</script> + + +<template id=scroll_timeline_part> + <style> + .host { + scroll-timeline: timeline vertical; + } + .host::part(foo) { + scroll-timeline: timeline horizontal; + } + </style> + <div class=host> + <template shadowroot=open> + <style> + /* Not using 'anim' at document scope, due to https://crbug.com/1334534 */ + @keyframes anim2 { + from { z-index: 100; background-color: green; } + to { z-index: 100; background-color: green; } + } + .target { + animation: anim2 10s linear; + animation-timeline: timeline; + } + </style> + <div part=foo> + <div class=target></div> + </div> + </template> + </div> + <style> + </style> +</template> +<script> + promise_test(async (t) => { + inflate(t, scroll_timeline_part); + let target = main.querySelector('.host').shadowRoot.querySelector('.target'); + assert_equals(target.getAnimations().length, 1); + let anim = target.getAnimations()[0]; + assert_not_equals(anim.timeline, null); + assert_equals(anim.timeline.axis, 'horizontal'); + }, 'Inner animation can see scroll timeline defined by ::part'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-nearest-dirty.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-nearest-dirty.html new file mode 100644 index 0000000000..1a79c9bb22 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-nearest-dirty.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>Unrelated style mutation does not affect anonymous timeline</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/scroll-animations/scroll-timelines/testcommon.js"></script> +<script src="/css/css-animations/support/testcommon.js"></script> +<script src="support/testcommon.js"></script> +<style> + @keyframes anim { + from { z-index: 100; } + to { z-index: 100; } + } + #scroller { + overflow: auto; + width: 100px; + height: 100px; + } + #element { + animation: anim forwards; + animation-timeline: scroll(); + } + #spacer { + height: 200px; + } +</style> +<div id=scroller> + <div id=element></div> + <div id=spacer></div> +</div> + +<script> +setup(assert_implements_animation_timeline); + +promise_test(async () => { + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(element).zIndex, '100'); + // Unrelated style mutation does not change the effect value: + element.style.color = 'green'; + assert_equals(getComputedStyle(element).zIndex, '100'); +}); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-paused-animations.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-paused-animations.html new file mode 100644 index 0000000000..54518a5e87 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-paused-animations.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Scroll timeline with paused animations</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/css-animations/#animation-play-state"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/scroll-animations/scroll-timelines/testcommon.js"></script> +<script src="/css/css-animations/support/testcommon.js"></script> +<script src="support/testcommon.js"></script> +<style> + @keyframes anim { + from { width: 100px; } + to { width: 200px; } + } + + .fill-vh { + width: 100px; + height: 100vh; + } +</style> +<body> +<div id="log"></div> +<script> +'use strict'; + +setup(assert_implements_animation_timeline); + +async function resetScrollPosition() { + // Reset to 0 so we don't affect following tests. + document.scrollingElement.scrollTop = 0; + return waitForNextFrame(); +} + +promise_test(async t => { + const div = addDiv(t, { style: 'width: 50px; height: 100px;' }); + const filling = addDiv(t, { class: 'fill-vh' }); + const scroller = document.scrollingElement; + t.add_cleanup(resetScrollPosition); + + div.style.animation = 'anim 100s linear paused'; + div.style.animationTimeline = 'scroll(root)'; + await waitForCSSScrollTimelineStyle(); + + const anim = div.getAnimations()[0]; + await anim.ready; + assert_percents_equal(anim.currentTime, 0, 'timeline time reset'); + assert_equals(getComputedStyle(div).width, '100px'); + + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = maxScroll; + await waitForNextFrame(); + assert_equals(getComputedStyle(div).width, '100px'); + +}, 'Test that the scroll animation is paused'); + +promise_test(async t => { + const div = addDiv(t, { style: 'width: 50px; height: 100px;' }); + const filling = addDiv(t, { class: 'fill-vh' }); + const scroller = document.scrollingElement; + await waitForNextFrame(); + + div.style.animation = 'anim 100s linear forwards'; + div.style.animationTimeline = 'scroll(root)'; + await waitForCSSScrollTimelineStyle(); + + const anim = div.getAnimations()[0]; + await anim.ready; + assert_percents_equal(anim.currentTime, 0, 'timeline time reset'); + assert_equals(getComputedStyle(div).width, '100px'); + + await waitForNextFrame(); + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = maxScroll; + await waitForNextFrame(); + assert_equals(getComputedStyle(div).width, '200px'); + + div.style.animationPlayState = 'paused'; + assert_equals(anim.playState, 'paused'); + assert_equals(getComputedStyle(div).width, '200px', + 'Current time preserved when pause-pending.'); + assert_true(anim.pending, + 'Pending state after changing animationPlayState'); + await anim.ready; + assert_equals(getComputedStyle(div).width, '200px', + 'Current time preserved when paused.'); + assert_percents_equal(anim.timeline.currentTime, 100); + document.scrollingElement.scrollTop = 0; + await waitForNextFrame(); + assert_percents_equal(anim.timeline.currentTime, 0); + assert_equals(getComputedStyle(div).width, '200px'); +}, 'Test that the scroll animation is paused by updating animation-play-state'); + +</script> +</body> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-responsiveness-from-endpoint.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-responsiveness-from-endpoint.html new file mode 100644 index 0000000000..71d3699077 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-responsiveness-from-endpoint.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Root-scrolling timeline with animation moving from end point</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<link rel="help" href="https://drafts.csswg.org/web-animations/#update-an-animations-finished-state"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-animations/support/testcommon.js"></script> +<script src="/scroll-animations/scroll-timelines/testcommon.js"></script> +<script src="support/testcommon.js"></script> + +<style> + @keyframes anim { + from { width: 100px; } + to { width: 200px; } + } + + .fill-vh { + width: 100px; + height: 100vh; + } +</style> +<body> +<div id="log"></div> +<script> +'use strict'; + +setup(assert_implements_animation_timeline); + +promise_test(async t => { + const div = addDiv(t, { style: 'width: 50px; height: 100px;' }); + const filling = addDiv(t, { class: 'fill-vh' }); + const scroller = document.scrollingElement; + scroller.scrollTop = 0; + await waitForNextFrame(); + + div.style.animation = 'anim 100s linear'; + div.style.animationTimeline = 'scroll(root)'; + await waitForCSSScrollTimelineStyle(); + + const anim = div.getAnimations()[0]; + await anim.ready; + assert_percents_equal(anim.timeline.currentTime, 0, + 'Timeline time when animation is ready'); + assert_equals(getComputedStyle(div).width, '100px', + 'Width at animation start'); + + await waitForNextFrame(); + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = maxScroll; + await waitForNextFrame(); + assert_equals(getComputedStyle(div).width, '200px', + 'Width at scroll limit'); + + document.scrollingElement.scrollTop = 0; + await waitForNextFrame(); + assert_equals(getComputedStyle(div).width, '100px', + 'Width after reset to scroll top'); +}, 'Test that the scroll animation is still responsive after moving from 100%'); + +</script> +</body> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-root-dirty.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-root-dirty.html new file mode 100644 index 0000000000..1c0b73ab45 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-root-dirty.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>Unrelated style mutation does not affect anonymous timeline (root)</title> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/scroll-animations/scroll-timelines/testcommon.js"></script> +<script src="/css/css-animations/support/testcommon.js"></script> +<script src="support/testcommon.js"></script> +<style> + @keyframes anim { + from { z-index: 100; } + to { z-index: 100; } + } + #element { + animation: anim forwards; + animation-timeline: scroll(root); + } + #spacer { + height: 200vh; + } +</style> +<div id=element></div> +<div id=spacer></div> + +<script> +setup(assert_implements_animation_timeline); + +promise_test(async () => { + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(element).zIndex, '100'); + // Unrelated style mutation does not change the effect value: + element.style.color = 'green'; + assert_equals(getComputedStyle(element).zIndex, '100'); +}); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-sampling.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-sampling.html new file mode 100644 index 0000000000..1fe354edfd --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-sampling.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#avoiding-cycles"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<style> + #scroller { + overflow: hidden; + width: 100px; + height: 100px; + scroll-timeline: timeline; + } + #contents { + height: 200px; + } + @keyframes expand { + from { width: 100px; } + to { width: 200px; } + } + #element { + width: 0px; + animation: expand 10s linear; + animation-timeline: timeline; + } + /* Ensure stable expectations if feature is not supported */ + @supports not (animation-timeline:foo) { + #element { animation-play-state: paused; } + } +</style> +<div id=scroller> + <div id=contents></div> +</div> +<div id=element></div> +<script> + promise_test(async (t) => { + // The scroll timeline is initially inactive until the first frame. + assert_equals(getComputedStyle(element).width, '0px'); + await waitForNextFrame(); + scroller.scrollTop = 50; + // Scrolling position should not yet be reflected in the animation, + // since the new scroll position has not yet been sampled. + assert_equals(getComputedStyle(element).width, '100px'); + await waitForNextFrame(); + assert_equals(getComputedStyle(element).width, '150px'); + }, 'Scroll position is sampled once per frame'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-shorthand.tentative.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-shorthand.tentative.html new file mode 100644 index 0000000000..b340ff34ff --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-shorthand.tentative.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674"> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-axis"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +<div id="target"></div> +<script> +test_valid_value('scroll-timeline', 'block none', 'block'); +test_valid_value('scroll-timeline', 'none inline', 'inline'); +test_valid_value('scroll-timeline', 'horizontal abc'); +test_valid_value('scroll-timeline', 'inline abc'); +test_valid_value('scroll-timeline', 'inline aBc'); +test_valid_value('scroll-timeline', 'vertical none', 'vertical'); +test_valid_value('scroll-timeline', 'inline inline'); +test_valid_value('scroll-timeline', 'abc'); +test_valid_value('scroll-timeline', 'inline'); + +test_invalid_value('scroll-timeline', ''); +test_invalid_value('scroll-timeline', 'abc abc'); + +test_computed_value('scroll-timeline', 'block none', 'block'); +test_computed_value('scroll-timeline', 'abc inline', 'inline abc'); +test_computed_value('scroll-timeline', 'none vertical', 'vertical'); +test_computed_value('scroll-timeline', 'horizontal abc'); +test_computed_value('scroll-timeline', 'vertical vertical'); +test_computed_value('scroll-timeline', 'abc'); + +test_shorthand_value('scroll-timeline', 'vertical abc', +{ + 'scroll-timeline-axis': 'vertical', + 'scroll-timeline-name': 'abc', +}); +test_shorthand_value('scroll-timeline', 'horizontal inline', +{ + 'scroll-timeline-axis': 'horizontal', + 'scroll-timeline-name': 'inline', +}); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-sibling-gcs.html b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-sibling-gcs.html new file mode 100644 index 0000000000..6062e795f4 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-sibling-gcs.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title>scroll-timeline and container queries</title> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-shorthand"> +<link rel="help" src="https://drafts.csswg.org/css-contain-3/#container-queries"> +<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> + #scroller { + overflow: auto; + width: auto; + height: 100px; + } + #scroller > div { + height: 200px; + } + + @keyframes anim { + from { background-color: rgb(100, 100, 100); } + to { background-color: rgb(200, 200, 200); } + } + #element { + height: 10px; + width: 10px; + animation: anim 10s linear; + animation-timeline: timeline; + background-color: rgb(0, 0, 0); + } +</style> +<div> + <div id=scroller> + <div></div> + </div> + <div> + <div id=element></div> + </div> +</div> +<script> + setup(assert_implements_animation_timeline); + + promise_test(async (t) => { + element.offsetTop; + scroller.scrollTop = 50; + await waitForNextFrame(); + // Unknown timeline, time held at zero. + assert_equals(getComputedStyle(element).backgroundColor, 'rgb(100, 100, 100)'); + scroller.style.scrollTimeline = 'timeline'; + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(element).backgroundColor, 'rgb(150, 150, 150)'); + }, 'Timelines appearing on preceding siblings are visible to getComputedStyle'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/support/testcommon.js b/testing/web-platform/tests/scroll-animations/css/support/testcommon.js new file mode 100644 index 0000000000..66bc27bb10 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/support/testcommon.js @@ -0,0 +1,19 @@ +'use strict'; + +/** + * Returns a Promise that is resolved after a CSS scroll timeline is created (as + * the result of a style change) and a snapshot has been taken, so that the + * animation style is correctly reflected by getComputedStyle(). + * Technically, this only takes a full frame update. We implement this as two + * requestAnimationFrame callbacks because the result will be available at the + * beginning of the second frame. + */ +async function waitForCSSScrollTimelineStyle() { + await waitForNextFrame(); + await waitForNextFrame(); +} + +function assert_implements_animation_timeline() { + assert_implements(CSS.supports('animation-timeline:foo'), + 'animation-timeline not supported'); +} diff --git a/testing/web-platform/tests/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html b/testing/web-platform/tests/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html new file mode 100644 index 0000000000..993046c5f2 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>Timeline offset in Animation Keyframes</title> +<link rel="help" href="https://w3c.github.io/csswg-drafts/scroll-animations-1/#named-range-keyframes"> +<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-animation { + enter 0%, exit 100% { opacity: 0 } + enter 100%, exit 0% { opacity: 1 } + } + + #subject { + background-color: rgba(0, 0, 255); + height: 200px; + width: 200px; + view-timeline-name: foo; + animation: linear 1s both fade-in-out-animation; + animation-timeline: foo; + } + + #container { + border: 5px solid black; + height: 400px; + width: 400px; + overflow-y: scroll; + resize: both; + } + + .spacer { + height: 600px; + width: 100%; + } +</style> +<body onload="runTests()"> + <div id="container"> + <div class="spacer"></div> + <div id="subject"></div> + <div class="spacer"></div> + </div> +</body> + +<script type="text/javascript"> + setup(assert_implements_animation_timeline); + + function runTests() { + promise_test(async t => { + // scrollTop=200 to 400 is the enter range + container.scrollTop = 200; + await waitForNextFrame(); + assert_equals(getComputedStyle(subject).opacity, '0', 'Effect at enter 0%'); + + container.scrollTop = 300; + await waitForNextFrame(); + assert_equals(getComputedStyle(subject).opacity, '0.5', 'Effect at enter 50%'); + + container.scrollTop = 400; + await waitForNextFrame(); + assert_equals(getComputedStyle(subject).opacity, '1', 'Effect at enter 100%'); + + // scrollTop=600-800 is the exit range + container.scrollTop = 600; + await waitForNextFrame(); + assert_equals(getComputedStyle(subject).opacity, '1', 'Effect at exit 0%'); + + container.scrollTop = 700; + await waitForNextFrame(); + assert_equals(getComputedStyle(subject).opacity, '0.5', 'Effect at exit 50%'); + + container.scrollTop = 800; + await waitForNextFrame(); + assert_equals(getComputedStyle(subject).opacity, '0', 'Effect at exit 100%'); + + // First change scrollTop so that you are at enter 100%, then resize the container in a way + // that scrollTop is the same, but now the animation is at enter 50% and check opacity. + // After changing the height of container, scrollTop=300-500 is the enter range + container.scrollTop = 400; + await waitForNextFrame(); + assert_equals(getComputedStyle(subject).opacity, '1', 'Effect at enter 100%'); + container.style.height = '300px'; + await waitForNextFrame(); + assert_equals(getComputedStyle(subject).opacity, '0.5', 'Effect at enter 50%'); + + // After changing the height of container, scrollTop=600-800 is still the exit range + container.scrollTop = 700; + await waitForNextFrame(); + assert_equals(getComputedStyle(subject).opacity, '0.5', 'Effect at exit 50%'); + }); + } +</script> +</html> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-animation.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-animation.html new file mode 100644 index 0000000000..b816bb6897 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-animation.html @@ -0,0 +1,219 @@ +<!DOCTYPE html> +<title>Animations using view-timeline</title> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named"> +<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; } + } + .vertical-scroller { + overflow: auto; + width: 100px; + height: 100px; + } + .vertical-scroller > div { + height: 50px; + z-index: -1; + } + .horizontal-scroller { + overflow: auto; + width: 100px; + height: 100px; + writing-mode: vertical-lr; + } + .horizontal-scroller > div { + width: 50px; + 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)); + } + async function scrollTop(e, value) { + e.scrollTop = value; + await waitForNextFrame(); + } + async function scrollLeft(e, value) { + e.scrollLeft = value; + await waitForNextFrame(); + } +</script> + +<template id=default_view_timeline> + <style> + #target { + view-timeline: t1; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=vertical-scroller> + <div></div> <!-- [0px, 50px] --> + <div></div> <!-- [50px, 100px] --> + <div></div> <!-- [100px, 150px] --> + <div id=target></div> <!-- [150px, 200px] --> + <div></div> <!-- [200px, 250px] --> + <div></div> <!-- [250px, 300px] --> + <div></div> <!-- [300px, 350px] --> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, default_view_timeline); + assert_equals(getComputedStyle(target).zIndex, '-1'); + await scrollTop(scroller, 25); + assert_equals(getComputedStyle(target).zIndex, '-1'); + await scrollTop(scroller, 50); // 0% (enter 0%) + assert_equals(getComputedStyle(target).zIndex, '0'); + await scrollTop(scroller, 125); // 50% + assert_equals(getComputedStyle(target).zIndex, '50'); + await scrollTop(scroller, 200); // 100% (exit 100%) + assert_equals(getComputedStyle(target).zIndex, '100'); + await scrollTop(scroller, 225); + assert_equals(getComputedStyle(target).zIndex, '-1'); + }, 'Default view-timeline'); +</script> + +<template id=horizontal_timeline> + <style> + #target { + view-timeline: t1 horizontal; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=horizontal-scroller> + <div></div> <!-- [0px, 50px] --> + <div></div> <!-- [50px, 100px] --> + <div></div> <!-- [100px, 150px] --> + <div id=target></div> <!-- [150px, 200px] --> + <div></div> <!-- [200px, 250px] --> + <div></div> <!-- [250px, 300px] --> + <div></div> <!-- [300px, 350px] --> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, horizontal_timeline); + assert_equals(getComputedStyle(target).zIndex, '-1'); + await scrollLeft(scroller, 25); + assert_equals(getComputedStyle(target).zIndex, '-1'); + await scrollLeft(scroller, 50); // 0% (enter 0%) + assert_equals(getComputedStyle(target).zIndex, '0'); + await scrollLeft(scroller, 125); // 50% + assert_equals(getComputedStyle(target).zIndex, '50'); + await scrollLeft(scroller, 200); // 100% (exit 100%) + assert_equals(getComputedStyle(target).zIndex, '100'); + await scrollLeft(scroller, 225); + assert_equals(getComputedStyle(target).zIndex, '-1'); + }, 'Horizontal view-timeline'); +</script> + +<template id=multiple_timelines> + <style> + #timelines { + view-timeline: tv vertical, th horizontal; + background-color: red; + } + #scroller { + width: 100px; + height: 100px; + overflow: hidden; + display: grid; + grid-template-columns: 50px 50px 50px 50px 50px 50px 50px; + grid-template-row: 50px 50px 50px 50px 50px 50px 50px; + } + #scroller > div { + z-index: -1; + width: 50px; + height: 50px; + } + #target_v { + animation: anim 1s linear; + animation-timeline: tv; + } + #target_h { + animation: anim 1s linear; + animation-timeline: th; + } + </style> + <div id=scroller> + <!-- Created dynamically --> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, multiple_timelines); + + // Create a 350px x 350px grid (7x7 items of 50x50px each), with the + // timelines at item [3,3], an element attached to the horizontal timeline + // at [4,3], and an element attached to the vertical timeline at [3,4]. + + // x x x x x x x + // x x x x x x x + // x x x x x x x + // x x x T H x x + // x x x V x x x + // x x x x x x x + // x x x x x x x + // x x x x x x x + + let grid_size = 7; + for (let i = 0; i < (grid_size*grid_size); ++i) { + let div = document.createElement('div'); + if (i == (3 * grid_size + 3)) + div.id = 'timelines'; + if (i == (3 * grid_size + 4)) + div.id = 'target_h'; + if (i == (4 * grid_size + 3)) + div.id = 'target_v'; + scroller.append(div); + } + + assert_equals(getComputedStyle(target_v).zIndex, '-1'); + assert_equals(getComputedStyle(target_h).zIndex, '-1'); + + // First scroll vertically. + await scrollTop(scroller, 25); + assert_equals(getComputedStyle(target_v).zIndex, '-1'); + assert_equals(getComputedStyle(target_h).zIndex, '-1'); + await scrollTop(scroller, 50); // 0% (enter 0%) + assert_equals(getComputedStyle(target_v).zIndex, '0'); + assert_equals(getComputedStyle(target_h).zIndex, '-1'); + await scrollTop(scroller, 125); // 50% + assert_equals(getComputedStyle(target_v).zIndex, '50'); + assert_equals(getComputedStyle(target_h).zIndex, '-1'); + await scrollTop(scroller, 200); // 100% (exit 100%) + assert_equals(getComputedStyle(target_v).zIndex, '100'); + assert_equals(getComputedStyle(target_h).zIndex, '-1'); + await scrollTop(scroller, 225); + assert_equals(getComputedStyle(target_v).zIndex, '-1'); + assert_equals(getComputedStyle(target_h).zIndex, '-1'); + + // Then horizontally. + await scrollLeft(scroller, 25); + assert_equals(getComputedStyle(target_v).zIndex, '-1'); + assert_equals(getComputedStyle(target_h).zIndex, '-1'); + await scrollLeft(scroller, 50); // 0% (enter 0%) + assert_equals(getComputedStyle(target_v).zIndex, '-1'); + assert_equals(getComputedStyle(target_h).zIndex, '0'); + await scrollLeft(scroller, 125); // 50% + assert_equals(getComputedStyle(target_v).zIndex, '-1'); + assert_equals(getComputedStyle(target_h).zIndex, '50'); + await scrollLeft(scroller, 200); // 100% (exit 100%) + assert_equals(getComputedStyle(target_v).zIndex, '-1'); + assert_equals(getComputedStyle(target_h).zIndex, '100'); + await scrollLeft(scroller, 225); + assert_equals(getComputedStyle(target_v).zIndex, '-1'); + assert_equals(getComputedStyle(target_h).zIndex, '-1'); + }, 'Multiple view-timelines on the same element'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-axis-computed.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-axis-computed.html new file mode 100644 index 0000000000..f4649dab04 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-axis-computed.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<style> + #outer { view-timeline-axis: block, inline; } + #target { view-timeline-axis: vertical; } +</style> +<div id=outer> + <div id=target></div> +</div> +<script> +test_computed_value('view-timeline-axis', 'initial', 'block'); +test_computed_value('view-timeline-axis', 'inherit', 'block, inline'); +test_computed_value('view-timeline-axis', 'unset', 'block'); +test_computed_value('view-timeline-axis', 'revert', 'block'); +test_computed_value('view-timeline-axis', 'block'); +test_computed_value('view-timeline-axis', 'inline'); +test_computed_value('view-timeline-axis', 'vertical'); +test_computed_value('view-timeline-axis', 'horizontal'); +test_computed_value('view-timeline-axis', 'block, inline'); +test_computed_value('view-timeline-axis', 'inline, block'); +test_computed_value('view-timeline-axis', 'block, vertical, horizontal, inline'); +test_computed_value('view-timeline-axis', 'inline, inline, inline, inline'); + +test(() => { + let style = getComputedStyle(document.getElementById('target')); + assert_not_equals(Array.from(style).indexOf('view-timeline-axis'), -1); +}, 'The view-timeline-axis property shows up in CSSStyleDeclaration enumeration'); + +test(() => { + let style = document.getElementById('target').style; + assert_not_equals(style.cssText.indexOf('view-timeline-axis'), -1); +}, 'The view-timeline-axis property shows up in CSSStyleDeclaration.cssText'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-axis-parsing.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-axis-parsing.html new file mode 100644 index 0000000000..ffcc36c320 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-axis-parsing.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<div id="target"></div> +<script> +test_valid_value('view-timeline-axis', 'initial'); +test_valid_value('view-timeline-axis', 'inherit'); +test_valid_value('view-timeline-axis', 'unset'); +test_valid_value('view-timeline-axis', 'revert'); + +test_valid_value('view-timeline-axis', 'block'); +test_valid_value('view-timeline-axis', 'inline'); +test_valid_value('view-timeline-axis', 'vertical'); +test_valid_value('view-timeline-axis', 'horizontal'); +test_valid_value('view-timeline-axis', 'block, inline'); +test_valid_value('view-timeline-axis', 'inline, block'); +test_valid_value('view-timeline-axis', 'block, vertical, horizontal, inline'); +test_valid_value('view-timeline-axis', 'inline, inline, inline, inline'); + +test_invalid_value('view-timeline-axis', 'abc'); +test_invalid_value('view-timeline-axis', '10px'); +test_invalid_value('view-timeline-axis', 'auto'); +test_invalid_value('view-timeline-axis', 'none'); +test_invalid_value('view-timeline-axis', 'block inline'); +test_invalid_value('view-timeline-axis', 'block / inline'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-delay-animation.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-delay-animation.html new file mode 100644 index 0000000000..dfb0e59f5d --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-delay-animation.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<title>Animations using named timeline ranges</title> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range"> +<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; background-color: skyblue;} + to { z-index: 100; background-color: coral; } + } + #scroller { + border: 10px solid lightgray; + overflow-y: scroll; + width: 200px; + height: 200px; + } + #target { + margin: 800px 0px; + width: 100px; + height: 100px; + z-index: -1; + background-color: green; + } +</style> +<main id=main> +</main> +<template> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + setup(assert_implements_animation_timeline); + + function inflate(t, template) { + t.add_cleanup(() => main.replaceChildren()); + main.append(template.content.cloneNode(true)); + } + async function scrollTop(e, value) { + e.scrollTop = value; + await waitForNextFrame(); + } + async function waitForAnimationReady(target) { + await waitForNextFrame(); + await Promise.all(target.getAnimations().map(x => x.promise)); + } + async function assertValueAt(scroller, target, args) { + await waitForAnimationReady(target); + await scrollTop(scroller, args.scrollTop); + assert_equals(getComputedStyle(target).zIndex, args.expected.toString()); + } + function test_animation_delay(options) { + promise_test(async (t) => { + inflate(t, document.querySelector('template')); + let scroller = main.querySelector('#scroller'); + let target = main.querySelector('#target'); + + target.style.viewTimeline = 't1 block'; + // TODO(crbug.com/1375998): Create the timeline in a separate frame to + // work around a bug. + await waitForNextFrame(); + + target.style.animation = 'anim 10s linear'; + target.style.animationTimeline = 't1'; + target.style.animationDelayStart = options.startDelay; + target.style.animationDelayEnd = options.endDelay; + + // Accommodates floating point precision errors at the endpoints. + target.style.animationFillMode = 'both'; + + // 0% + await assertValueAt(scroller, target, + { scrollTop: options.rangeStart, expected: 0 }); + // 50% + await assertValueAt(scroller, target, + { scrollTop: (options.rangeStart + options.rangeEnd) / 2, expected: 50 }); + // 100% + await assertValueAt(scroller, target, + { scrollTop: options.rangeEnd, expected: 100 }); + + // Test before/after phases (need to clear the fill mode for that). + target.style.animationFillMode = 'initial'; + await assertValueAt(scroller, target, + { scrollTop: options.rangeStart - 10, expected: -1 }); + await assertValueAt(scroller, target, + { scrollTop: options.rangeEnd + 10, expected: -1 }); + // Check 50% again without fill mode. + await assertValueAt(scroller, target, + { scrollTop: (options.rangeStart + options.rangeEnd) / 2, expected: 50 }); + + }, `Animation with delays [${options.startDelay}, ${options.endDelay}]`); + } + + test_animation_delay({ + startDelay: 'initial', + endDelay: 'initial', + rangeStart: 600, + rangeEnd: 900 + }); + + test_animation_delay({ + startDelay: 'cover 0%', + endDelay: 'cover 100%', + rangeStart: 600, + rangeEnd: 900 + }); + + test_animation_delay({ + startDelay: 'contain 0%', + endDelay: 'contain 100%', + rangeStart: 700, + rangeEnd: 800 + }); + + test_animation_delay({ + startDelay: 'enter 0%', + endDelay: 'enter 100%', + rangeStart: 600, + rangeEnd: 700 + }); + + test_animation_delay({ + startDelay: 'exit 0%', + endDelay: 'exit 100%', + rangeStart: 800, + rangeEnd: 900 + }); + + test_animation_delay({ + startDelay: 'contain -50%', + endDelay: 'enter 200%', + rangeStart: 650, + rangeEnd: 800 + }); + + test_animation_delay({ + startDelay: 'enter 0%', + endDelay: 'exit 100%', + rangeStart: 600, + rangeEnd: 900 + }); +</script> 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..74da8850d4 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-dynamic.html @@ -0,0 +1,183 @@ +<!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; + } + .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-name: t1; + } + #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'); + + // scrollTop=50 is 25% for div25. + div25.classList.add('timeline'); + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '25'); + + // scrollTop=50 is before the timeline start for div_before. + div_before.classList.add('timeline'); + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '-1'); + // 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'); + + // Now we should be back to div25's timeline, although with the new + // scrollTop=150, it's actually at 75%. + div_before.classList.remove('timeline'); + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '75'); + }, 'Dynamically changing view-timeline-name'); +</script> + +<template id=dynamic_view_timeline_axis> + <style> + #timeline { + width: 100px; + height: 100px; + margin: 100px; + view-timeline-name: t1; + } + #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'); + timeline.style.viewTimelineAxis = 'horizontal'; + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '10'); + }, 'Dynamically changing view-timeline-axis'); +</script> + +<template id=dynamic_view_timeline_inset> + <style> + #timeline { + width: 100px; + height: 100px; + margin: 100px; + view-timeline-name: t1; + } + #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'); + timeline.style.viewTimelineInset = '0px 50px'; + await waitForCSSScrollTimelineStyle(); + assert_equals(getComputedStyle(target).zIndex, '0'); + }, 'Dynamically changing view-timeline-inset'); +</script> + +<template id=timeline_display_none> + <style> + #timeline { + view-timeline-name: t1; + } + #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'); + timeline.style.display = 'none'; + assert_equals(getComputedStyle(target).zIndex, '-1'); + }, 'Element with view-timeline becoming display:none'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-animation.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-animation.html new file mode 100644 index 0000000000..a95086b62b --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-animation.html @@ -0,0 +1,768 @@ +<!DOCTYPE html> +<title>Animations using view-timeline-inset</title> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#propdef-view-timeline-inset"> +<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: 80px; + height: 100px; + } + #target { + margin: 150px; + width: 50px; + height: 50px; + 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)); + } + async function scrollTop(e, value) { + e.scrollTop = value; + await waitForNextFrame(); + } + async function scrollLeft(e, value) { + e.scrollLeft = value; + await waitForNextFrame(); + } + async function assertValueAt(scroller, target, args) { + if (args.scrollTop !== undefined) + await scrollTop(scroller, args.scrollTop); + if (args.scrollLeft !== undefined) + await scrollLeft(scroller, args.scrollLeft); + assert_equals(getComputedStyle(target).zIndex, args.expected.toString()); + } +</script> + +<!-- + Explanation of scroll positions + =============================== + + Please note the following: + + - The scroller has a width x height of 80x100px. + - The content is 50x50px with a 150px margin on all sides. + In other words, the size of the scroller content is 200x200px. + + This means that, for vertical direction scrolling, assuming no insets: + + - The start offset is 50px (scroller height + 50px is 150px, which consumes + exactly the margin of the content). + - The end offset is 200px (this is where the bottom edge of the scroller has + just cleared the content). + - The halfway point is (50px + 200px) / 2 = 125px. + + For horizontal direction scrolling, assuming no insets: + + - The start offset is 70px (scroller width + 70px is 150px, which consumes + exactly the margin of the content). + - The end offset is 200px (this is where the left edge of the scroller has + just cleared the content). + - The halfway point is (70px + 200px) / 2 = 135px. + + The start and end insets will adjust the start and end offsets accordingly, + and the expectations in this file explicitly write out those adjustments. + For example, if the start offset is normally 50px, but there's an inset of + 10px, we'll expect 50px + 10px rather than 60px. + + Halfway-point expectations write out the adjustment from the "normal" + halfway-point, e.g. for start-inset:10px and end-inset:20px, we expect + "125px + 5px" since (20-10)/2 == 5. + + Finally, note that for right-to-left and bottom-to-top scrolling directions + scroll offsets go the in the negative direction. This is why some expectations + negate all the offsets. +--> + +<template id=test_one_value> + <style> + #target { + view-timeline: t1; + view-timeline-inset: 10px; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=vertical> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_one_value); + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 10, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 0, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset with one value'); +</script> + +<template id=test_two_values> + <style> + #target { + view-timeline: t1; + view-timeline-inset: 10px 20px; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=vertical> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_two_values); + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset with two values'); +</script> + +<template id=test_em_values> + <style> + #target { + font-size: 10px; + view-timeline: t1; + view-timeline-inset: 10px 2em; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=vertical> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_em_values); + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset with em values'); +</script> + +<template id=test_percentage_values> + <style> + #target { + font-size: 10px; + view-timeline: t1; + view-timeline-inset: calc(5px + max(1%, 5%)) 20%; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=vertical> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_percentage_values); + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset with percentage values'); +</script> + +<template id=test_outset> + <style> + #target { + view-timeline: t1; + view-timeline-inset: -10px -20px; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=vertical> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_outset); + await assertValueAt(scroller, target, { scrollTop:20, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 - 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 - 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 + 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:220, expected:-1 }); + }, 'view-timeline-inset with negative values'); +</script> + +<template id=test_horizontal> + <style> + #target { + view-timeline: t1 horizontal; + view-timeline-inset: 10px 20px; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_horizontal); + await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); + await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 }); + }, 'view-timeline-inset with horizontal scroller'); +</script> + +<template id=test_block> + <style> + #target { + view-timeline: t1 block; + view-timeline-inset: 10px 20px; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_block); + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset with block scroller'); +</script> + +<template id=test_inline> + <style> + #target { + view-timeline: t1 inline; + view-timeline-inset: 10px 20px; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_inline); + await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); + await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 }); + }, 'view-timeline-inset with inline scroller'); +</script> + +<template id=test_auto_block> + <style> + #scroller { + scroll-padding-block: 10px 20px; + } + #target { + view-timeline: t1 block; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_block); + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset:auto, block'); +</script> + +<template id=test_auto_block_vertical_lr> + <style> + #scroller { + scroll-padding-block: 10px 20px; + writing-mode: vertical-lr; + } + #target { + view-timeline: t1 block; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_block_vertical_lr); + await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); + await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 }); + }, 'view-timeline-inset:auto, block, vertical-lr'); +</script> + +<template id=test_auto_block_vertical_rl> + <style> + #scroller { + scroll-padding-block: 10px 20px; + writing-mode: vertical-rl; + } + #target { + view-timeline: t1 block; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_block_vertical_rl); + // Note: this represents horizontal scrolling from right to left. + await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 }); + await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollLeft:-200, expected:-1 }); + }, 'view-timeline-inset:auto, block, vertical-rl'); +</script> + +<template id=test_auto_inline> + <style> + #scroller { + scroll-padding-inline: 10px 20px; + } + #target { + view-timeline: t1 inline; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_inline); + await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); + await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 }); + }, 'view-timeline-inset:auto, inline'); +</script> + +<template id=test_auto_inline_vertical_rl> + <style> + #scroller { + scroll-padding-inline: 10px 20px; + writing-mode: vertical-rl; + } + #target { + view-timeline: t1 inline; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_inline_vertical_rl); + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset:auto, inline, vertical-rl'); +</script> + +<template id=test_auto_inline_vertical_lr> + <style> + #scroller { + scroll-padding-inline: 10px 20px; + writing-mode: vertical-lr; + } + #target { + view-timeline: t1 inline; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_inline_vertical_lr); + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset:auto, inline, vertical-lr'); +</script> + +<template id=test_auto_inline_rtl> + <style> + #scroller { + scroll-padding-inline: 10px 20px; + direction: rtl; + } + #target { + view-timeline: t1 inline; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_inline_rtl); + await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 }); + await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollLeft:-200, expected:-1 }); + }, 'view-timeline-inset:auto, inline, rtl'); +</script> + +<template id=test_auto_inline_vertical_rl_rtl> + <style> + #scroller { + scroll-padding-inline: 10px 20px; + writing-mode: vertical-rl; + direction: rtl; + } + #target { + view-timeline: t1 inline; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_inline_vertical_rl_rtl); + await assertValueAt(scroller, target, { scrollTop:-50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:-(50 + 20), expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:-(125 + 5), expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:-(200 - 10), expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:-200, expected:-1 }); + }, 'view-timeline-inset:auto, inline, vertical-rl, rtl'); +</script> + +<template id=test_auto_inline_vertical_lr_rtl> + <style> + #scroller { + scroll-padding-inline: 10px 20px; + writing-mode: vertical-lr; + direction: rtl; + } + #target { + view-timeline: t1 inline; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_inline_vertical_lr_rtl); + await assertValueAt(scroller, target, { scrollTop:-50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:-(50 + 20), expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:-(125 + 5), expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:-(200 - 10), expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:-200, expected:-1 }); + }, 'view-timeline-inset:auto, inline, vertical-lr, rtl'); +</script> + +<template id=test_auto_vertical> + <style> + #scroller { + scroll-padding-block: 10px 20px; + } + #target { + view-timeline: t1 vertical; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_vertical); + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset:auto, vertical'); +</script> + +<template id=test_auto_vertical_vertical_rl> + <style> + #scroller { + scroll-padding-inline: 10px 20px; + writing-mode: vertical-rl; + } + #target { + view-timeline: t1 vertical; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_vertical_vertical_rl); + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset:auto, vertical, vertical-rl'); +</script> + +<template id=test_auto_vertical_vertical_rl_rtl> + <style> + #scroller { + scroll-padding-inline: 10px 20px; + writing-mode: vertical-rl; + direction: rtl; + } + #target { + view-timeline: t1 vertical; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_vertical_vertical_rl_rtl); + await assertValueAt(scroller, target, { scrollTop:-50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:-(50 + 20), expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:-(125 + 5), expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:-(200 - 10), expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:-200, expected:-1 }); + }, 'view-timeline-inset:auto, vertical, vertical-rl, rtl'); +</script> + +<template id=test_auto_horizontal> + <style> + #scroller { + scroll-padding-inline: 10px 20px; + } + #target { + view-timeline: t1 horizontal; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_horizontal); + await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); + await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 }); + }, 'view-timeline-inset:auto, horizontal'); +</script> + +<template id=test_auto_horizontal_rtl> + <style> + #scroller { + scroll-padding-inline: 10px 20px; + direction: rtl; + } + #target { + view-timeline: t1 horizontal; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_horizontal_rtl); + await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 }); + await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollLeft:-200, expected:-1 }); + }, 'view-timeline-inset:auto, horizontal, rtl'); +</script> + +<template id=test_auto_horizontal_vertical_lr> + <style> + #scroller { + scroll-padding-block: 10px 20px; + writing-mode: vertical-lr; + } + #target { + view-timeline: t1 horizontal; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_horizontal_vertical_lr); + await assertValueAt(scroller, target, { scrollLeft:20, expected:-1 }); + await assertValueAt(scroller, target, { scrollLeft:70 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollLeft:135 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollLeft:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollLeft:200, expected:-1 }); + }, 'view-timeline-inset:auto, horizontal, vertical-lr'); +</script> + +<template id=test_auto_horizontal_vertical_rl> + <style> + #scroller { + scroll-padding-block: 10px 20px; + writing-mode: vertical-rl; + } + #target { + view-timeline: t1 horizontal; + view-timeline-inset: auto auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_horizontal_vertical_rl); + await assertValueAt(scroller, target, { scrollLeft:-20, expected:-1 }); + await assertValueAt(scroller, target, { scrollLeft:-(70 + 20), expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollLeft:-(135 + 5), expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollLeft:-(200 - 10), expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollLeft:-200, expected:-1 }); + }, 'view-timeline-inset:auto, horizontal, vertical-rl'); +</script> + +<template id=test_auto_mix> + <style> + #scroller { + font-size: 10px; + scroll-padding-block: 50px calc(10% + 1em); + } + #target { + view-timeline: t1; + view-timeline-inset: 10% auto; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, test_auto_mix); + // Note: 10% of scroller height 100px is 10px, and 1em with font-size:10px + // is also 10px. Hence we expect the end inset specified as calc(10% + 1em) + // to be 20px. + await assertValueAt(scroller, target, { scrollTop:50, expected:-1 }); + await assertValueAt(scroller, target, { scrollTop:50 + 20, expected:0 }); // 0% + await assertValueAt(scroller, target, { scrollTop:125 + 5, expected:50 }); // 50% + await assertValueAt(scroller, target, { scrollTop:200 - 10, expected:100 }); // 100% + await assertValueAt(scroller, target, { scrollTop:200, expected:-1 }); + }, 'view-timeline-inset:auto, mix'); +</script> + +<!-- + TODO: How to test view-timeline:auto + scroll-padding:auto? The UA may + in theory use any value in that case. + + https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-padding-auto +--> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-computed.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-computed.html new file mode 100644 index 0000000000..77683a4678 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-computed.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-inset"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7243"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #outer { font-size:10px; } + #outer { view-timeline-inset: 1px 2px, auto 3px; } + #target { view-timeline-inset: 42px; } +</style> +<div id=outer> + <div id=target></div> +</div> +<script> +test_computed_value('view-timeline-inset', 'initial', '0px'); +test_computed_value('view-timeline-inset', 'inherit', '1px 2px, auto 3px'); +test_computed_value('view-timeline-inset', 'unset', '0px'); +test_computed_value('view-timeline-inset', 'revert', '0px'); +test_computed_value('view-timeline-inset', '1px'); +test_computed_value('view-timeline-inset', '1%'); +test_computed_value('view-timeline-inset', 'calc(1% + 1px)'); +test_computed_value('view-timeline-inset', '1px 2px'); +test_computed_value('view-timeline-inset', '1px 2em', '1px 20px'); +test_computed_value('view-timeline-inset', 'calc(1px + 1em) 2px', '11px 2px'); +test_computed_value('view-timeline-inset', '1px 2px, 3px 4px'); +test_computed_value('view-timeline-inset', '1px auto, auto 4px'); +test_computed_value('view-timeline-inset', '1px, 2px, 3px'); +test_computed_value('view-timeline-inset', '1px 1px, 2px 3px', '1px, 2px 3px'); +test_computed_value('view-timeline-inset', 'auto auto, auto auto', 'auto, auto'); + +test(() => { + let style = getComputedStyle(document.getElementById('target')); + assert_not_equals(Array.from(style).indexOf('view-timeline-inset'), -1); +}, 'The view-timeline-inset property shows up in CSSStyleDeclaration enumeration'); + +test(() => { + let style = document.getElementById('target').style; + assert_not_equals(style.cssText.indexOf('view-timeline-inset'), -1); +}, 'The view-timeline-inset property shows up in CSSStyleDeclaration.cssText'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-parsing.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-parsing.html new file mode 100644 index 0000000000..d502b13593 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-inset-parsing.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-inset"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7243"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<div id="target"></div> +<script> +test_valid_value('view-timeline-inset', 'initial'); +test_valid_value('view-timeline-inset', 'inherit'); +test_valid_value('view-timeline-inset', 'unset'); +test_valid_value('view-timeline-inset', 'revert'); + +test_valid_value('view-timeline-inset', '1px'); +test_valid_value('view-timeline-inset', '1px 2px'); +test_valid_value('view-timeline-inset', '1px 2em'); +test_valid_value('view-timeline-inset', 'calc(1em + 1px) 2px'); +test_valid_value('view-timeline-inset', '1px 2px, 3px 4px'); +test_valid_value('view-timeline-inset', '1px auto, auto 4px'); +test_valid_value('view-timeline-inset', '1px, 2px, 3px'); +test_valid_value('view-timeline-inset', '1px 1px, 2px 3px', '1px, 2px 3px'); +test_valid_value('view-timeline-inset', 'auto auto, auto auto', 'auto, auto'); + +test_invalid_value('view-timeline-inset', 'none'); +test_invalid_value('view-timeline-inset', 'foo bar'); +test_invalid_value('view-timeline-inset', '"foo" "bar"'); +test_invalid_value('view-timeline-inset', 'rgb(1, 2, 3)'); +test_invalid_value('view-timeline-inset', '#fefefe'); +test_invalid_value('view-timeline-inset', '1px 2px 3px'); +test_invalid_value('view-timeline-inset', '1px 2px auto'); +test_invalid_value('view-timeline-inset', 'auto 2px 3px'); +test_invalid_value('view-timeline-inset', 'auto auto auto'); +test_invalid_value('view-timeline-inset', '1px / 2px'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-lookup.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-lookup.html new file mode 100644 index 0000000000..c1797c7ba1 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-lookup.html @@ -0,0 +1,301 @@ +<!DOCTYPE html> +<title>Named view-timeline lookup</title> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named"> +<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: auto; + width: 100px; + height: 100px; + } + .scroller > div { + height: 25px; + z-index: -1; + } +</style> +<main id=main></main> +<script> + function inflate(t, template) { + t.add_cleanup(() => main.replaceChildren()); + main.append(template.content.cloneNode(true)); + main.offsetTop; + } +</script> + +<template id=timeline_self> + <style> + #target { + height: 0px; + view-timeline: t1; + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div id=target></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, timeline_self); + await waitForNextFrame(); + assert_equals(getComputedStyle(target).zIndex, '100'); + }, 'view-timeline on self'); +</script> + +<template id=timeline_preceding_sibling> + <style> + #timeline { + height: 0px; + view-timeline: t1; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div></div> + <div id=timeline></div> + <div></div> + <div></div> + <div id=target></div> + <div></div> + <div></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, timeline_preceding_sibling); + await waitForNextFrame(); + assert_equals(getComputedStyle(target).zIndex, '75'); + }, 'view-timeline on preceding sibling'); +</script> + +<template id=timeline_ancestor> + <style> + #timeline { + height: 0px; + view-timeline: t1; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div></div> + <div></div> + <div></div> + <div id=timeline> + <div> + <div id=target></div> + </div> + </div> + <div></div> + <div></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, timeline_ancestor); + await waitForNextFrame(); + assert_equals(getComputedStyle(target).zIndex, '25'); + }, 'view-timeline on ancestor'); +</script> + +<template id=timeline_ancestor_sibling> + <style> + #timeline { + height: 0px; + view-timeline: t1; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div></div> + <div id=timeline></div> + <div></div> + <div> + <div> + <div id=target></div> + </div> + </div> + <div></div> + <div></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, timeline_ancestor_sibling); + await waitForNextFrame(); + assert_equals(getComputedStyle(target).zIndex, '75'); + }, 'view-timeline on ancestor sibling'); +</script> + +<template id=timeline_ancestor_sibling_closest> + <style> + #timeline1, #timeline2 { + height: 0px; + view-timeline: t1; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div></div> + <div id=timeline1></div> + <div></div> + <div id=timeline2></div> + <div> + <div> + <div id=target></div> + </div> + </div> + <div></div> + <div></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, timeline_ancestor_sibling_closest); + await waitForNextFrame(); + assert_equals(getComputedStyle(target).zIndex, '50'); + }, 'view-timeline on ancestor sibling, closest wins'); +</script> + +<template id=timeline_ancestor_sibling_skips_nonmatching> + <style> + #timeline1 { + height: 0px; + view-timeline: t1; + } + #timeline2 { + height: 0px; + view-timeline: t2; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div></div> + <div id=timeline1></div> + <div></div> + <div id=timeline2></div> + <div> + <div> + <div id=target></div> + </div> + </div> + <div></div> + <div></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, timeline_ancestor_sibling_skips_nonmatching); + await waitForNextFrame(); + assert_equals(getComputedStyle(target).zIndex, '75'); + }, 'view-timeline on ancestor sibling, skips nonmatching names'); +</script> + +<template id=timeline_ancestor_closer_scroll_timeline_wins> + <style> + #timeline { + height: 0px; + view-timeline: t1; + } + #scroll { + overflow: auto; + scroll-timeline: t1; + } + #scroll > div { + height: 50px; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div></div> + <div id=timeline></div> + <div></div> + <div id=scroll> + <div></div> + </div> + <div> + <div> + <div id=target></div> + </div> + </div> + <div></div> + <div></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, timeline_ancestor_closer_scroll_timeline_wins); + await waitForNextFrame(); + assert_equals(getComputedStyle(target).zIndex, '0'); + }, 'view-timeline on ancestor sibling, closer scroll-timeline wins'); +</script> + + +<template id=timeline_ancestor_view_timeline_wins_on_same_element> + <style> + #timelines { + height: 0px; + view-timeline: t1; + scroll-timeline: t1; + overflow: auto; + } + #timelines > div { + height: 50px; + } + #target { + animation: anim 1s linear; + animation-timeline: t1; + } + </style> + <div id=scroller class=scroller> + <div></div> + <div id=timelines> + <div></div> + </div> + <div></div> + <div> + <div> + <div id=target></div> + </div> + </div> + <div></div> + <div></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, timeline_ancestor_view_timeline_wins_on_same_element); + await waitForNextFrame(); + assert_equals(getComputedStyle(target).zIndex, '75'); + }, 'view-timeline on ancestor sibling, view-timeline wins on same element'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-name-computed.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-name-computed.html new file mode 100644 index 0000000000..5657dc7817 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-name-computed.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<style> + #outer { view-timeline-name: foo, bar; } + #target { view-timeline-name: faz; } +</style> +<div id=outer> + <div id=target></div> +</div> +<script> +test_computed_value('view-timeline-name', 'initial', 'none'); +test_computed_value('view-timeline-name', 'inherit', 'foo, bar'); +test_computed_value('view-timeline-name', 'unset', 'none'); +test_computed_value('view-timeline-name', 'revert', 'none'); +test_computed_value('view-timeline-name', 'none'); +test_computed_value('view-timeline-name', 'foo'); +test_computed_value('view-timeline-name', 'foo, bar'); +test_computed_value('view-timeline-name', 'bar, foo'); +test_computed_value('view-timeline-name', 'a, b, c, D, e'); +test_computed_value('view-timeline-name', 'none, none'); +test_computed_value('view-timeline-name', 'a, b, c, none, d, e'); + +test(() => { + let style = getComputedStyle(document.getElementById('target')); + assert_not_equals(Array.from(style).indexOf('view-timeline-name'), -1); +}, 'The view-timeline-name property shows up in CSSStyleDeclaration enumeration'); + +test(() => { + let style = document.getElementById('target').style; + assert_not_equals(style.cssText.indexOf('view-timeline-name'), -1); +}, 'The view-timeline-name property shows up in CSSStyleDeclaration.cssText'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-name-parsing.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-name-parsing.html new file mode 100644 index 0000000000..3878d5c583 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-name-parsing.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<div id="target"></div> +<script> +test_valid_value('view-timeline-name', 'initial'); +test_valid_value('view-timeline-name', 'inherit'); +test_valid_value('view-timeline-name', 'unset'); +test_valid_value('view-timeline-name', 'revert'); + +test_valid_value('view-timeline-name', 'none'); +test_valid_value('view-timeline-name', 'abc'); +test_valid_value('view-timeline-name', ' abc', 'abc'); +test_valid_value('view-timeline-name', 'abc ', 'abc'); +test_valid_value('view-timeline-name', 'aBc'); +test_valid_value('view-timeline-name', 'foo, bar'); +test_valid_value('view-timeline-name', 'bar, foo'); +test_valid_value('view-timeline-name', 'none, none'); +test_valid_value('view-timeline-name', 'a, none, b'); +test_valid_value('view-timeline-name', 'auto'); + +test_invalid_value('view-timeline-name', 'default'); +test_invalid_value('view-timeline-name', '10px'); +test_invalid_value('view-timeline-name', 'foo bar'); +test_invalid_value('view-timeline-name', '"foo" "bar"'); +test_invalid_value('view-timeline-name', 'rgb(1, 2, 3)'); +test_invalid_value('view-timeline-name', '#fefefe'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-name-tree-scoped.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-name-tree-scoped.html new file mode 100644 index 0000000000..c216c345ed --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-name-tree-scoped.html @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<title>view-timelime-name and tree-scoped references</title> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named"> +<link rel="help" src="https://drafts.csswg.org/css-scoping-1/#shadow-names"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script src="/resources/declarative-shadow-dom-polyfill.js"></script> + +<main id=main></main> +<script> + function inflate(t, template) { + t.add_cleanup(() => main.replaceChildren()); + main.append(template.content.cloneNode(true)); + main.offsetTop; + } + + setup(() => { + polyfill_declarative_shadow_dom(document); + }); +</script> +<style> + @keyframes anim { + from { z-index: 100; } + to { z-index: 100; } + } +</style> + + +<template id=view_timeline_host> + <style> + .target { + animation: anim 10s linear; + animation-timeline: timeline; + } + .scroller > div { + view-timeline: timeline horizontal; + } + </style> + <div class=scroller> + <div> + <div class=target> + <template shadowroot=open> + <style> + :host { + view-timeline: timeline vertical; + } + </style> + </template> + </div> + </div> + </div> + <style> + </style> +</template> +<script> + promise_test(async (t) => { + inflate(t, view_timeline_host); + let target = main.querySelector('.target'); + assert_equals(target.getAnimations().length, 1); + let anim = target.getAnimations()[0]; + assert_not_equals(anim.timeline, null); + assert_equals(anim.timeline.axis, 'horizontal'); + }, 'Outer animation can not see view timeline defined by :host'); +</script> + + +<template id=view_timeline_slotted> + <style> + .target { + animation: anim 10s linear; + animation-timeline: timeline; + } + .host { + view-timeline: timeline horizontal; + } + </style> + <div class=scroller> + <div class=host> + <template shadowroot=open> + <style> + ::slotted(.target) { + view-timeline: timeline vertical; + } + </style> + <slot></slot> + </template> + <div class=target></div> + </div> + </div> + <style> + </style> +</template> +<script> + promise_test(async (t) => { + inflate(t, view_timeline_slotted); + let target = main.querySelector('.target'); + assert_equals(target.getAnimations().length, 1); + let anim = target.getAnimations()[0]; + assert_not_equals(anim.timeline, null); + assert_equals(anim.timeline.axis, 'horizontal'); + }, 'Outer animation can not see view timeline defined by ::slotted'); +</script> + + +<template id=view_timeline_part> + <style> + .host { + view-timeline: timeline vertical; + } + .host::part(foo) { + view-timeline: timeline horizontal; + } + </style> + <div class=host> + <template shadowroot=open> + <style> + /* Not using 'anim' at document scope, due to https://crbug.com/1334534 */ + @keyframes anim2 { + from { z-index: 100; } + to { z-index: 100; } + } + .target { + animation: anim2 10s linear; + animation-timeline: timeline; + } + </style> + <div part=foo> + <div class=target></div> + </div> + </template> + </div> + <style> + </style> +</template> +<script> + promise_test(async (t) => { + inflate(t, view_timeline_part); + let target = main.querySelector('.host').shadowRoot.querySelector('.target'); + assert_equals(target.getAnimations().length, 1); + let anim = target.getAnimations()[0]; + assert_not_equals(anim.timeline, null); + assert_equals(anim.timeline.axis, 'horizontal'); + }, 'Inner animation can see view timeline defined by ::part'); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-shorthand.tentative.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-shorthand.tentative.html new file mode 100644 index 0000000000..f3efa88c92 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-shorthand.tentative.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-shorthand"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7627"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/7694"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +<div id="target"></div> +<script> +test_valid_value('view-timeline', 'abcd'); +test_valid_value('view-timeline', 'none block', 'none'); +test_valid_value('view-timeline', 'none inline'); + +// view-timeline-name: inline/block/horizontal/vertical. +test_valid_value('view-timeline', 'inline block', 'inline'); +test_valid_value('view-timeline', 'block block', 'block'); +test_valid_value('view-timeline', 'vertical block', 'vertical'); +test_valid_value('view-timeline', 'horizontal block', 'horizontal'); + +test_valid_value('view-timeline', 'a, b, c'); +test_valid_value('view-timeline', 'a inline, b block, c vertical', 'a inline, b, c vertical'); +test_valid_value('view-timeline', 'auto'); + +test_invalid_value('view-timeline', 'abc abc'); +test_invalid_value('view-timeline', 'block none'); +test_invalid_value('view-timeline', 'none none'); +test_invalid_value('view-timeline', 'default'); +test_invalid_value('view-timeline', ','); +test_invalid_value('view-timeline', ',,block,,'); + +test_computed_value('view-timeline', 'abcd'); +test_computed_value('view-timeline', 'none block', 'none'); +test_computed_value('view-timeline', 'none inline'); +test_computed_value('view-timeline', 'inline block', 'inline'); +test_computed_value('view-timeline', 'block block', 'block'); +test_computed_value('view-timeline', 'vertical block', 'vertical'); +test_computed_value('view-timeline', 'horizontal block', 'horizontal'); +test_computed_value('view-timeline', 'a, b, c'); +test_computed_value('view-timeline', 'a inline, b block, c vertical', 'a inline, b, c vertical'); + +test_shorthand_value('view-timeline', 'abc vertical', +{ + 'view-timeline-name': 'abc', + 'view-timeline-axis': 'vertical', +}); +test_shorthand_value('view-timeline', 'abc vertical, def', +{ + 'view-timeline-name': 'abc, def', + 'view-timeline-axis': 'vertical, block', +}); +test_shorthand_value('view-timeline', 'abc, def', +{ + 'view-timeline-name': 'abc, def', + 'view-timeline-axis': 'block, block', +}); +test_shorthand_value('view-timeline', 'inline horizontal', +{ + 'view-timeline-name': 'inline', + 'view-timeline-axis': 'horizontal', +}); + +function test_shorthand_contraction(shorthand, longhands, expected) { + let longhands_fmt = Object.entries(longhands).map((e) => `${e[0]}:${e[1]}`).join(';'); + test((t) => { + t.add_cleanup(() => { + for (let shorthand of Object.keys(longhands)) + target.style.removeProperty(shorthand); + }); + for (let [shorthand, value] of Object.entries(longhands)) + target.style.setProperty(shorthand, value); + assert_equals(target.style.getPropertyValue(shorthand), expected, 'Declared value'); + assert_equals(getComputedStyle(target).getPropertyValue(shorthand), expected, 'Computed value'); + }, `Shorthand contraction of ${longhands_fmt}`); +} + +test_shorthand_contraction('view-timeline', { + 'view-timeline-name': 'abc', + 'view-timeline-axis': 'inline', +}, 'abc inline'); + +test_shorthand_contraction('view-timeline', { + 'view-timeline-name': 'a, b', + 'view-timeline-axis': 'inline, block', +}, 'a inline, b'); + +test_shorthand_contraction('view-timeline', { + 'view-timeline-name': 'none, none', + 'view-timeline-axis': 'block, block', +}, 'none, none'); + +// Longhands with different lengths: + +test_shorthand_contraction('view-timeline', { + 'view-timeline-name': 'a, b, c', + 'view-timeline-axis': 'inline, inline', +}, ''); + +test_shorthand_contraction('view-timeline', { + 'view-timeline-name': 'a, b', + 'view-timeline-axis': 'inline, inline, inline', +}, ''); +</script> diff --git a/testing/web-platform/tests/scroll-animations/css/view-timeline-used-values.html b/testing/web-platform/tests/scroll-animations/css/view-timeline-used-values.html new file mode 100644 index 0000000000..6627eeb998 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/view-timeline-used-values.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<title>Used values of view-timeline properties</title> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis"> +<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name"> +<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; + } + .scroller > div { + width: 300px; + height: 300px; + 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)); + } + async function scrollTop(e, value) { + e.scrollTop = value; + await waitForNextFrame(); + } + async function scrollLeft(e, value) { + e.scrollLeft = value; + await waitForNextFrame(); + } +</script> + +<template id=omitted_axis> + <style> + #target { + view-timeline-name: t1, t2; /* Two items */ + view-timeline-axis: inline; /* One item */ + animation: anim 1s linear; + animation-timeline: t2; + } + </style> + <div id=scroller class=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, omitted_axis); + assert_equals(getComputedStyle(target).zIndex, '-1'); + + // enter 0% is at scrollTop/Left = -100 + // exit 100% is at scrollTop/Left = 300 + // This means that at scrollTop/Left=0, the animation is at 25%. + + await scrollTop(scroller, 0); + await scrollLeft(scroller, 0); + assert_equals(getComputedStyle(target).zIndex, '25'); + + // The timeline should be inline-axis: + await scrollTop(scroller, 100); // 50% + await scrollLeft(scroller, 40); // 35% + assert_equals(getComputedStyle(target).zIndex, '35'); + }, 'Use the last value from view-timeline-axis if omitted'); +</script> + +<template id=omitted_inset> + <style> + #target { + view-timeline-name: t1, t2; /* Two items */ + view-timeline-inset: 100px; /* One item */ + animation: anim 1s linear; + animation-timeline: t2; + } + </style> + <div id=scroller class=scroller> + <div id=target></div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, omitted_inset); + assert_equals(getComputedStyle(target).zIndex, '-1'); + + // 0% is normally at at scrollTop = -100 + // 100% is normally at scrollTop/Left = 300 + // However, we have a 100px inset in both ends, which makes the + // range [0, 200]. + + await scrollTop(scroller, 0); + assert_equals(getComputedStyle(target).zIndex, '0'); + await scrollTop(scroller, 100); // 50% + assert_equals(getComputedStyle(target).zIndex, '50'); + }, 'Use the last value from view-timeline-inset if omitted'); +</script> |