starting-of-transitions-001.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Transitions Test: behavior when transition-property changes while transitioning</title>

<meta name="assert" content="Checks a change to the transition-duration

property does not affect an in-flight transition">

<link rel="help" title="3. Starting of transitions" href="https://drafts.csswg.org/css-transitions/#starting">

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

test(t => {

  // Start a 100s transition 50% of the way through

  const div = addDiv(t, {

    style: 'transition: height 100s -50s linear; height: 0px',

});

  getComputedStyle(div).height;

  div.style.height = '100px';

  assert_equals(

    getComputedStyle(div).height,

    '50px',

    'Transition should be initially 50% complete'

);

  // Change the transition-property and flush the style change

  div.style.transitionProperty = 'width';

  getComputedStyle(div).transitionProperty;

  // The transition on the height property should have been canceled

  assert_equals(

    getComputedStyle(div).height,

    '100px',

    'Transition should have been canceled'

);

}, 'changes to transition-property should cancel in-flight transitions');

</script>

</body>

</html>