continue-css-transition-left.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:
- /dom/nodes/moveBefore/tentative/continue-css-transition-left.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Node.moveBefore should preserve CSS transition state (left)</title>

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

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

<body>

  <section id="old-parent">

    <div id="item"></div>

  </section>

  <section id="new-parent">

  </section>

  <style>

    #item {

      width: 100px;

      height: 100px;

      background: green;

      transition: left 10s;

      position: absolute;

      left: 0;

    section {

      position: relative;

    body {

      margin-left: 0;

  </style>

  <script>

    promise_test(async t => {

      const item = document.querySelector("#item");

      assert_equals(item.getBoundingClientRect().x, 0);

      item.style.left = "400px";

      await new Promise(resolve => item.addEventListener("transitionstart", resolve));

      document.querySelector("#new-parent").moveBefore(item, null);

      await new Promise(resolve => requestAnimationFrame(() => resolve()));

      assert_less_than(item.getBoundingClientRect().x, 399);

});

  </script>

</body>