before-after-pseudo-element-scrolling.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/before-after-pseudo-element-scrolling.html - WPT Dashboard Interop Dashboard

<!doctype html>

<html class="reftest-wait">

  <head>

    <title>Scrolls of `::before` and `::after` pseudo element should persist after a reflow.</title>

    <link rel="help" href="https://github.com/servo/servo/pull/42005">

    <link rel="author" title="Steven Novaryo" href="mailto:steven.novaryo@gmail.com">

    <link rel="match" href="reference/before-after-pseudo-element-scrolling-ref.html">

    <script src="/resources/testdriver.js"></script>

    <script src="/resources/testdriver-vendor.js"></script>

    <script src="/resources/testdriver-actions.js"></script>

    <script src="/dom/events/scrolling/scroll_support.js"></script>

    <style>

    #target::before, #target::after {

      display: block;

      content: url("/images/red.png") url("/images/green.png");

      height: 50px;

      width: 100px;

      overflow: scroll;

      scrollbar-width: none;

      background: url("/images/green.png");

    </style>

  </head>

  <body>

    <div id="dummy">dummy</div>

    <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

    <div id="target">

    </div>

    <script>

      window.onload = async () => {

        await waitForCompositorCommit();

        let rect = target.getBoundingClientRect();

        let middle_point = (rect.top + rect.bottom) / 2;

        // Scrolls the `::before` pseudo element and wait for the event.

        let promise_scroll_before = waitForScrollEndOrTimeout(target, MAX_FRAME);

        new test_driver

          .Actions()

          .scroll(rect.left + 10, Math.round(middle_point - rect.height / 4), 0, 1000)

          .send();

        await promise_scroll_before;

        // Scrolls the `::after` pseudo element and wait for the event.

        let promise_scroll_after = waitForScrollEndOrTimeout(target, MAX_FRAME);

        new test_driver

          .Actions()

          .scroll(rect.left + 10, Math.round(middle_point + rect.height / 4), 0, 1000)

          .send();

        await promise_scroll_after;

        // This should force a relayout.

        dummy.style.display = "none";

        await waitForNextFrame();

        document.documentElement.classList.remove("reftest-wait");

    </script>

  </body>

</html>