transition-reparented.html | Explore in Territory

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Transition should cancel when an element is reparented</title>
<link rel="help" href="https://www.w3.org/TR/css-transitions-1/#starting">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style>
.animated-div {
  margin-left: 100px;
  transition: margin-left 10s -5s linear;
}
</style>

<div id="parent1">
  <div id="target" class='animated-div'></div>
</div>

<div id="parent2"></div>

<script>
'use strict';

test(t => {
  assert_equals(getComputedStyle(target).marginLeft, '100px');
  target.style.marginLeft = '200px';

  // Because the start delay is -50% of the transition duration, we should
  // immediately be (approximately) at the halfway point. What we really care
  // about checking is that the transition has started but has not ended.
  assert_not_equals(getComputedStyle(target).marginLeft, '100px');
  assert_not_equals(getComputedStyle(target).marginLeft, '200px');

  // Now change the target's parent. This should cancel the transition and
  // skip straight to the end state.
  parent2.appendChild(target);
  assert_equals(getComputedStyle(target).marginLeft, '200px');
}, 'When an element is reparented, any CSS Transition on it should be cancelled');
</script>

chromium/third_party/blink/web_tests/external/wpt/css/css-transitions/transition-reparented.html