non-rendered-element-004.tentative.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-transitions/non-rendered-element-004.tentative.html - WPT Dashboard Interop Dashboard

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