diff options
Diffstat (limited to 'testing/web-platform/tests/scroll-animations/css/pseudo-on-scroller.html')
-rw-r--r-- | testing/web-platform/tests/scroll-animations/css/pseudo-on-scroller.html | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/pseudo-on-scroller.html b/testing/web-platform/tests/scroll-animations/css/pseudo-on-scroller.html new file mode 100644 index 0000000000..8dd49ce4d8 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/pseudo-on-scroller.html @@ -0,0 +1,55 @@ +<!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> |