animation-timeline-scroll-functional-notation.tentative.html (5379B)
1 <!DOCTYPE html> 2 <title>The animation-timeline: scroll() notation</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-notation"> 5 <link rel="help" src="https://github.com/w3c/csswg-drafts/issues/6674"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="support/testcommon.js"></script> 10 <style> 11 @keyframes anim { 12 from { translate: 50px; } 13 to { translate: 150px; } 14 } 15 html { 16 min-height: 100vh; 17 /* This makes the max scrollable ragne be 100px in root element */ 18 padding-bottom: 100px; 19 } 20 #container { 21 width: 300px; 22 height: 300px; 23 overflow: scroll; 24 } 25 #target { 26 width: 100px; 27 /* This makes the max scrollable ragne be 100px in the block direction */ 28 height: 100px; 29 } 30 /* large block content */ 31 .block-content { 32 block-size: 100%; 33 } 34 /* large inline content */ 35 .inline-content { 36 inline-size: 100%; 37 block-size: 5px; 38 /* This makes the max scrollable ragne be 100px in the inline direction */ 39 padding-inline-end: 100px; 40 } 41 </style> 42 <body> 43 <div id="log"></div> 44 <script> 45 "use strict"; 46 47 setup(assert_implements_animation_timeline); 48 49 const root = document.scrollingElement; 50 const createTargetWithStuff = function(t, contentClass) { 51 let container = document.createElement('div'); 52 container.id = 'container'; 53 let target = document.createElement('div'); 54 target.id = 'target'; 55 let content = document.createElement('div'); 56 content.className = contentClass; 57 58 // <div id='container'> 59 // <div id='target'></div> 60 // <div class=contentClass></div> 61 // </div> 62 document.body.appendChild(container); 63 container.appendChild(target); 64 container.appendChild(content); 65 66 if (t && typeof t.add_cleanup === 'function') { 67 t.add_cleanup(() => { 68 content.remove(); 69 target.remove(); 70 container.remove(); 71 }); 72 } 73 74 return [container, target]; 75 }; 76 77 async function scrollLeft(element, value) { 78 element.scrollLeft = value; 79 await waitForNextFrame(); 80 } 81 82 async function scrollTop(element, value) { 83 element.scrollTop = value; 84 await waitForNextFrame(); 85 } 86 87 promise_test(async t => { 88 let [container, div] = createTargetWithStuff(t, 'block-content'); 89 await runAndWaitForFrameUpdate(() => { 90 div.style.animation = "anim 10s linear"; 91 div.style.animationTimeline = "scroll(nearest)"; 92 }); 93 94 await scrollTop(root, 50); 95 assert_equals(getComputedStyle(div).translate, '50px'); 96 97 await scrollTop(container, 50); 98 assert_equals(getComputedStyle(div).translate, '100px'); 99 100 await scrollTop(root, 0); 101 }, 'animation-timeline: scroll(nearest)'); 102 103 promise_test(async t => { 104 let [container, div] = createTargetWithStuff(t, 'block-content'); 105 await runAndWaitForFrameUpdate(() => { 106 div.style.animation = "anim 10s linear"; 107 div.style.animationTimeline = "scroll(root)"; 108 }); 109 110 await scrollTop(container, 50); 111 assert_equals(getComputedStyle(div).translate, '50px'); 112 113 await scrollTop(root, 50); 114 assert_equals(getComputedStyle(div).translate, '100px'); 115 116 await scrollTop(root, 0); 117 }, 'animation-timeline: scroll(root)'); 118 119 promise_test(async t => { 120 let [container, div] = createTargetWithStuff(t, 'block-content'); 121 await runAndWaitForFrameUpdate(() => { 122 container.style.animation = "anim 10s linear"; 123 container.style.animationTimeline = "scroll(self)"; 124 }); 125 await scrollTop(container, 50); 126 assert_equals(getComputedStyle(container).translate, '100px'); 127 }, 'animation-timeline: scroll(self)'); 128 129 promise_test(async t => { 130 let [container, div] = createTargetWithStuff(t, 'block-content'); 131 await runAndWaitForFrameUpdate(() => { 132 div.style.animation = "anim 10s linear"; 133 div.style.animationTimeline = "scroll(self)"; 134 }); 135 await scrollTop(container, 50); 136 assert_equals(getComputedStyle(div).translate, 'none'); 137 }, 'animation-timeline: scroll(self), on non-scroller'); 138 139 promise_test(async t => { 140 let [container, div] = createTargetWithStuff(t, 'inline-content'); 141 await runAndWaitForFrameUpdate(() => { 142 div.style.animation = "anim 10s linear"; 143 div.style.animationTimeline = "scroll(inline)"; 144 }); 145 await scrollLeft(container, 50); 146 assert_equals(getComputedStyle(div).translate, '100px'); 147 }, 'animation-timeline: scroll(inline)'); 148 149 promise_test(async t => { 150 let [container, div] = createTargetWithStuff(t, 'block-content'); 151 await runAndWaitForFrameUpdate(() => { 152 container.style.writingMode = 'vertical-lr'; 153 div.style.animation = "anim 10s linear"; 154 div.style.animationTimeline = "scroll(x)"; 155 }); 156 157 await scrollLeft(container, 50); 158 assert_equals(getComputedStyle(div).translate, '100px'); 159 }, 'animation-timeline: scroll(x)'); 160 161 promise_test(async t => { 162 let [container, div] = createTargetWithStuff(t, 'inline-content'); 163 await runAndWaitForFrameUpdate(() => { 164 container.style.writingMode = 'vertical-lr'; 165 div.style.animation = "anim 10s linear"; 166 div.style.animationTimeline = "scroll(y)"; 167 }); 168 169 await scrollTop(container, 50); 170 assert_equals(getComputedStyle(div).translate, '100px'); 171 }, 'animation-timeline: scroll(y)'); 172 173 // TODO: Add more tests which change the overflow property of the container for 174 // scroll(nearest) 175 176 </script> 177 </body>