non-rendered-element-002.html

Enable keyboard shortcuts

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

<!doctype html>

<html>

<head>

<meta charset=utf-8>

<title>CSS Transitions Test: Transitions do not run for a pseudo-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 => {

  for (const pseudoType of ['before', 'after']) {

    const style = addStyle(t, {

      [`.init::${pseudoType}`]: 'content: ""; width: 0px; transition: width 100s;',

      [`.change::${pseudoType}`]: 'width: 100px;',

      [`.cancel::${pseudoType}`]: 'content: none',

});

    // Create element (and pseudo-element) and attach event listeners

    const div = addDiv(t);

    div.classList.add('init');

    const eventWatcher = new EventWatcher(t, div, [

      'transitionrun',

      'transitioncancel',

]);

    // Trigger transition

    getComputedStyle(div).width;

    div.classList.add('change');

    getComputedStyle(div).width;

    await eventWatcher.wait_for('transitionrun');

    // Make the pseudo-element no longer rendered

    div.classList.add('cancel');

    await eventWatcher.wait_for('transitioncancel');

    div.remove();

    style.remove();

}, 'Transitions on ::before/::after pseudo-elements are canceled when the'

   + ' content property is cleared');

</script>

</body>

</html>