transitioncancel-002.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-transitions/transitioncancel-002.html - WPT Dashboard Interop Dashboard

<!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>