Bug 1513766 [wpt PR 14486] - [CSS Transitions] Add test for reparenting, a=testonly
authorStephen McGruer <smcgruer@chromium.org>
Wed, 19 Dec 2018 12:09:15 +0000
changeset 515031 86ca0a729bfcfa8a0d8c0e223fd6285b682bb600
parent 515030 a56d3fa354af52ee057e09349d5b0c744af24099
child 515032 4bfef6168f182fd75312c7194bb26b7441188442
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1513766, 14486, 902328, 1374742, 616830
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1513766 [wpt PR 14486] - [CSS Transitions] Add test for reparenting, a=testonly Automatic update from web-platform-tests [CSS Transitions] Add test for reparenting As per https://github.com/w3c/csswg-drafts/issues/3309, any CSS Transition on a reparented element should be cancelled, as it leaves and then re-enters the Document. This already works on Chrome, Firefox, and Safari but fails on Edge. Bug: 902328 Change-Id: I097675a8146c8047417dd48193d0747216418cfb Reviewed-on: https://chromium-review.googlesource.com/c/1374742 Reviewed-by: vmpstr <vmpstr@chromium.org> Commit-Queue: Stephen McGruer <smcgruer@chromium.org> Cr-Commit-Position: refs/heads/master@{#616830} -- wpt-commits: cf8b055289c68215fd4a3274c94d0f5484c27dd3 wpt-pr: 14486
testing/web-platform/tests/css/css-transitions/transition-reparented.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/transition-reparented.html
@@ -0,0 +1,39 @@
+<!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>