mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 22:28:59 +02:00
e6ccbab28e
In particular, this tests the composite order of ::marker pseudo-elements and dispatching cancel events for these elements. It adds one test that is known to fail in Gecko. This will be fixed in the next patch in this series. Differential Revision: https://phabricator.services.mozilla.com/D28175 --HG-- extra : moz-landing-system : lando
90 lines
2.5 KiB
HTML
90 lines
2.5 KiB
HTML
<!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>
|