Bug 1632106 [wpt PR 23166] - Add support for canceling CSS transitions, a=testonly
authorMartin Robinson <mrobinson@igalia.com>
Tue, 28 Apr 2020 11:38:00 +0000
changeset 527580 c0bc5e2f0949fa1e86fad7e522f05c37a84dfdc2
parent 527579 99abccb00c35e87ee213a206b75c9bb9558eaa30
child 527581 c5443e2f9b7ce635d6dbac63e58486cf27a46609
push id37368
push userbtara@mozilla.com
push dateFri, 01 May 2020 21:45:51 +0000
treeherdermozilla-central@0f9c5a59e45d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1632106, 23166, 15079
milestone77.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 1632106 [wpt PR 23166] - Add support for canceling CSS transitions, a=testonly Automatic update from web-platform-tests Add support for canceling CSS transitions This change adds support for canceling CSS transitions when a property is no longer transitionable or when an element becomes styled with display:none. Support for canceling and replacing CSS transitions when the end value changes is still pending. This change also takes advantage of updating the constellation message to fix a bug where transition events could be sent for closed pipelines. Fixes #15079. -- wpt-commits: 7c3ddf7343d1577cd5279fb132a17617feeebfe3 wpt-pr: 23166
testing/web-platform/tests/css/css-transitions/transitioncancel-002.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/transitioncancel-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Transitions Test: Removing transitioning property from transition-property triggers transitioncancel</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<meta name="assert" content="Removing transitioning property from transition-property
+causes transitioncancel.">
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#event-dispatch">
+
+<script src="/resources/testharness.js" type="text/javascript"></script>
+<script src="/resources/testharnessreport.js" type="text/javascript"></script>
+<script src="./support/helper.js" type="text/javascript"></script>
+
+</head>
+<body>
+<div id="log"></div>
+
+<script>
+promise_test(async t => {
+  // Create element and prepare to trigger a transition on it.
+  const div = addDiv(t, {
+    style: 'transition: background-color 0.25s; background-color: red;',
+  });
+
+  // Attach event listeners
+  const eventWatcher = new EventWatcher(t, div, ['transitioncancel']);
+  div.addEventListener('transitionend', t.step_func((event) => {
+    assert_unreached('transitionend event should not be fired');
+  }));
+
+  // Trigger transition
+  getComputedStyle(div).backgroundColor;
+  div.style.backgroundColor = 'green';
+  getComputedStyle(div).backgroundColor;
+
+  // Remove the transitioning property from transition-property asynchronously.
+  await waitForFrame();
+  div.style.transitionProperty = 'none';
+
+  await eventWatcher.wait_for('transitioncancel');
+}, 'Removing a transitioning property from transition-property should trigger transitioncancel');
+</script>
+
+</body>
+</html>