1 files changed, 45 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transitions/starting-of-transitions-001.html b/testing/web-platform/tests/css/css-transitions/starting-of-transitions-001.html
new file mode 100644
index 0000000000..f80d813436
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/starting-of-transitions-001.html
@@ -0,0 +1,45 @@
+<!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>