pseudo-on-scroller-named-timeline.html (1460B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Animating pseduo-element on scroller using named timeline</title> 7 </head> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/web-animations/testcommon.js"></script> 11 <script src="./support/testcommon.js"></script> 12 <script src="testcommon.js"></script> 13 <style type="text/css"> 14 .scroller { 15 overflow: scroll; 16 width: 100px; 17 height: 100px; 18 margin: 1em; 19 outline: 1px solid; 20 scroll-timeline: --t1 y; 21 } 22 .pseudo::before { 23 content: ""; 24 display: block; 25 width: 50px; 26 height: 50px; 27 background: red; 28 animation: bg linear; 29 animation-timeline: --t1; 30 } 31 32 .content { 33 width: 200px; 34 height: 200px; 35 background-color: yellow; 36 } 37 @keyframes bg { 38 from { 39 background: rgb(0, 255, 0); 40 } 41 to { 42 background: rgb(0, 0, 255); 43 } 44 } 45 </style> 46 <body> 47 <div class="scroller pseudo"> 48 <div class="content"> 49 </div> 50 51 </div> 52 <div id="log"></div> 53 </body> 54 <script type="text/javascript"> 55 'use strict'; 56 57 promise_test(async t => { 58 await waitForCSSScrollTimelineStyle(); 59 const scroller = document.querySelector('.scroller'); 60 assert_equals(getComputedStyle(scroller, ':before').backgroundColor, 61 'rgb(0, 255, 0)'); 62 }, `named timeline on pseudo-element attaches to parent scroll container`); 63 </script> 64 </html>