1 files changed, 51 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transitions/non-rendered-element-004.tentative.html b/testing/web-platform/tests/css/css-transitions/non-rendered-element-004.tentative.html
new file mode 100644
index 0000000000..1fe2af1253
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/non-rendered-element-004.tentative.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>CSS Transitions Test: Transitions do not run for a ::marker-element that is not being rendered</title>
+<link rel="help" title="Starting 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>
+
+promise_test(async t => {
+  addStyle(t, {
+    '.init::marker': 'content: ""; color: red; transition: color 100s;',
+    '.change::marker': 'color: green',
+  });
+
+  // Create element (and pseudo-element) and attach event listeners
+  const div = addDiv(t, { 'style': 'display: list-item' });
+  div.classList.add('init');
+
+  const eventWatcher = new EventWatcher(t, div, [
+    'transitionrun',
+    'transitioncancel',
+  ]);
+
+  // Trigger transition
+  getComputedStyle(div).color;
+  div.classList.add('change');
+  getComputedStyle(div).color;
+
+  await eventWatcher.wait_for('transitionrun');
+
+  // Make the parent element no longer display: list-item so that the pseudo
+  // element no longer renders
+  div.style.display = 'block';
+
+  await eventWatcher.wait_for('transitioncancel');
+}, 'Transitions on ::marker pseudo-elements are canceled when the'
+   + ' parent display type is no longer list-item');
+</script>
+
+</body>
+</html>