| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Animating pseduo-element on scroller</title> |
| </head> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="testcommon.js"></script> |
| <style type="text/css"> |
| .scroller { |
| overflow: auto; |
| width: 100px; |
| height: 100px; |
| margin: 1em; |
| outline: 1px solid; |
| animation: bg linear; |
| animation-timeline: scroll(self inline); |
| } |
| .pseudo::before { |
| content: ""; |
| display: block; |
| width: 200px; |
| height: 50px; |
| background: red; |
| animation: bg linear reverse; |
| animation-timeline: scroll(inline); |
| } |
| @keyframes bg { |
| from { |
| background: rgb(0, 255, 0); |
| } |
| to { |
| background: rgb(0, 0, 255); |
| } |
| } |
| </style> |
| <body> |
| <div class="scroller pseudo"></div> |
| <div id="log"></div> |
| </body> |
| <script type="text/javascript"> |
| 'use strict'; |
| |
| promise_test(async t => { |
| const scroller = document.querySelector('.scroller'); |
| await waitForNextFrame(); |
| assert_equals(getComputedStyle(scroller).backgroundColor, 'rgb(0, 255, 0)'); |
| assert_equals(getComputedStyle(scroller, ':before').backgroundColor, |
| 'rgb(0, 0, 255)'); |
| }, `scroll nearest on pseudo-element attaches to parent scroll container`); |
| </script> |
| </html> |
