timeline-trigger-source-starts-in-trigger-range.tentative.html (1330B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-trigger"> 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="/dom/events/scrolling/scroll_support.js"></script> 9 <script src="support/support.js"></script> 10 </head> 11 12 <body> 13 <style> 14 @keyframes anim { 15 from { 16 width: 100px; 17 } 18 to { 19 width: 100px; 20 } 21 } 22 #scroller { 23 width: 400px; 24 height: 400px; 25 overflow: scroll; 26 } 27 .pad { 28 height: 200px; 29 } 30 31 #source { 32 width: 50px; 33 height: 50px; 34 timeline-trigger: --trigger view() contain; 35 } 36 37 #target { 38 width: 10px; 39 animation: anim 1s linear; 40 animation-trigger: --trigger play-forwards; 41 background-color: tomato; 42 } 43 </style> 44 <div id=target> 45 Target 46 </div> 47 <div id=scroller> 48 <div id=source>Source</div> 49 <div class=pad></div> 50 <div class=pad></div> 51 <div class=pad></div> 52 </div> 53 <script> 54 promise_test(async (test) => { 55 await waitForAnimationFrames(3); 56 assert_equals(getComputedStyle(target).width, "100px"); 57 }, "Already in-view source triggers animation"); 58 </script> 59 60 </html>