scroll-timeline-in-container-query.html (2114B)
1 <!DOCTYPE html> 2 <title>scroll-timeline and container queries</title> 3 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-shorthand"> 4 <link rel="help" src="https://drafts.csswg.org/css-conditional-5/#container-queries"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="support/testcommon.js"></script> 9 <style> 10 #outer { 11 height: 100px; 12 width: 150px; 13 } 14 15 #container { 16 container-type: size; 17 } 18 19 #scroller { 20 overflow: auto; 21 width: auto; 22 height: 100px; 23 } 24 25 #scroller > div { 26 height: 200px; 27 } 28 29 /* This does not apply initially. */ 30 @container (width > 200px) { 31 #scroller { 32 scroll-timeline: --timeline; 33 } 34 } 35 36 @keyframes recolor { 37 from { background-color: rgb(100, 100, 100); } 38 to { background-color: rgb(200, 200, 200); } 39 } 40 41 #element { 42 height: 10px; 43 width: 10px; 44 animation: recolor 10s linear; 45 animation-timeline: --timeline; 46 background-color: rgb(0, 0, 0); 47 } 48 </style> 49 <div id=outer> 50 <div id=container> 51 <div id=scroller> 52 <div></div> 53 <div id=element></div> 54 </div> 55 </div> 56 </div> 57 <script> 58 setup(assert_implements_animation_timeline); 59 60 promise_test(async (t) => { 61 element.offsetTop; 62 scroller.scrollTop = (scroller.scrollHeight - scroller.clientHeight) / 2; 63 await waitForNextFrame(); 64 // Unknown timeline, time held at zero. 65 assert_equals(getComputedStyle(element).backgroundColor, 'rgb(100, 100, 100)'); 66 // This causes the timeline to be created. 67 outer.style.width = '250px'; 68 // Check value with getComputedStyle immediately, which is the same 69 // value since the scroll timeline is inactive before the next frame. 70 assert_equals(getComputedStyle(element).backgroundColor, 'rgb(100, 100, 100)'); 71 // Also check value after one frame. 72 await waitForNextFrame(); 73 assert_equals(getComputedStyle(element).backgroundColor, 'rgb(150, 150, 150)'); 74 }, 'Timeline appearing via container queries'); 75 </script>