pseudo-on-scroller.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /scroll-animations/css/pseudo-on-scroller.html - WPT Dashboard Interop Dashboard

<!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>