pseudo-on-scroller.html (1457B)
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</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: auto; 16 width: 100px; 17 height: 100px; 18 margin: 1em; 19 outline: 1px solid; 20 animation: bg linear; 21 animation-timeline: scroll(self inline); 22 } 23 .pseudo::before { 24 content: ""; 25 display: block; 26 width: 200px; 27 height: 50px; 28 background: red; 29 animation: bg linear reverse; 30 animation-timeline: scroll(inline); 31 } 32 @keyframes bg { 33 from { 34 background: rgb(0, 255, 0); 35 } 36 to { 37 background: rgb(0, 0, 255); 38 } 39 } 40 </style> 41 <body> 42 <div class="scroller pseudo"></div> 43 <div id="log"></div> 44 </body> 45 <script type="text/javascript"> 46 'use strict'; 47 48 promise_test(async t => { 49 await waitForCSSScrollTimelineStyle(); 50 const scroller = document.querySelector('.scroller'); 51 assert_equals(getComputedStyle(scroller).backgroundColor, 'rgb(0, 255, 0)'); 52 assert_equals(getComputedStyle(scroller, ':before').backgroundColor, 53 'rgb(0, 0, 255)'); 54 }, `scroll nearest on pseudo-element attaches to parent scroll container`); 55 </script> 56 </html>