| <!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'); |
| |
| promise_test(async t => { |
| if (!CSS.supports('selector(::marker)')) { |
| return; |
| } |
| |
| 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> |
