view-timeline-pseudo-on-scroller.html (1398B)
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: scroll; 16 width: 100px; 17 height: 100px; 18 margin: 1em; 19 outline: 1px solid; 20 } 21 .pseudo::before { 22 content: ""; 23 display: inline; 24 width: 100px; 25 height: 50px; 26 background: red; 27 animation: bg linear; 28 animation-timeline: view(inline); 29 } 30 31 .content { 32 width: 100px; 33 height: 100px; 34 background: green; 35 } 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"></div> 49 </div> 50 <div id="log"></div> 51 </body> 52 <script type="text/javascript"> 53 'use strict'; 54 55 promise_test(async t => { 56 await waitForCSSScrollTimelineStyle(); 57 const scroller = document.querySelector('.scroller'); 58 assert_equals(getComputedStyle(scroller, ':before').backgroundColor, 59 'rgb(0, 0, 255)'); 60 }, `view() on pseudo-element attaches to parent scroll container`); 61 </script> 62 </html>