mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 13:48:23 +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
135 lines
3.8 KiB
HTML
135 lines
3.8 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title>Document.getAnimations() for CSS transitions</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/helper.js"></script>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
|
|
test(t => {
|
|
assert_equals(document.getAnimations().length, 0,
|
|
'getAnimations returns an empty sequence for a document'
|
|
+ ' with no animations');
|
|
}, 'getAnimations for non-animated content');
|
|
|
|
test(t => {
|
|
const div = addDiv(t);
|
|
|
|
// Add a couple of transitions
|
|
div.style.left = '0px';
|
|
div.style.top = '0px';
|
|
getComputedStyle(div).transitionProperty;
|
|
|
|
div.style.transition = 'all 100s';
|
|
div.style.left = '100px';
|
|
div.style.top = '100px';
|
|
assert_equals(document.getAnimations().length, 2,
|
|
'getAnimations returns two running CSS Transitions');
|
|
|
|
// Remove both
|
|
div.style.transitionProperty = 'none';
|
|
assert_equals(document.getAnimations().length, 0,
|
|
'getAnimations returns no running CSS Transitions');
|
|
}, 'getAnimations for CSS Transitions');
|
|
|
|
test(t => {
|
|
// Create two divs with the following arrangement:
|
|
//
|
|
// parent
|
|
// (::marker,)
|
|
// ::before,
|
|
// ::after
|
|
// |
|
|
// child
|
|
|
|
addStyle(t, {
|
|
'.init::after': 'content: ""; width: 0px; transition: all 100s;',
|
|
'.init::before': 'content: ""; width: 0px; transition: all 100s;',
|
|
'.change::after': 'width: 100px;',
|
|
'.change::before': 'width: 100px;',
|
|
});
|
|
|
|
const supportsMarkerPseudos = CSS.supports('selector(::marker)');
|
|
if (supportsMarkerPseudos) {
|
|
addStyle(t, {
|
|
'.init::marker': 'content: ""; color: red; transition: all 100s;',
|
|
'.change::marker': 'color: green;',
|
|
});
|
|
}
|
|
|
|
const parent = addDiv(t, { 'style': 'display: list-item' });
|
|
const child = addDiv(t);
|
|
parent.appendChild(child);
|
|
|
|
parent.style.left = '0px';
|
|
parent.style.transition = 'left 100s';
|
|
parent.classList.add('init');
|
|
child.style.left = '0px';
|
|
child.style.transition = 'left 100s';
|
|
getComputedStyle(parent).left;
|
|
|
|
parent.style.left = '100px';
|
|
parent.classList.add('change');
|
|
child.style.left = '100px';
|
|
|
|
const expectedTransitions = [
|
|
[parent, undefined],
|
|
[parent, '::marker'],
|
|
[parent, '::before'],
|
|
[parent, '::after'],
|
|
[child, undefined],
|
|
];
|
|
if (!supportsMarkerPseudos) {
|
|
expectedTransitions.splice(1, 1);
|
|
}
|
|
|
|
const transitions = document.getAnimations();
|
|
assert_equals(
|
|
transitions.length,
|
|
expectedTransitions.length,
|
|
'CSS transition on both pseudo-elements and elements are returned'
|
|
);
|
|
|
|
for (const [index, expected] of expectedTransitions.entries()) {
|
|
const [element, pseudo] = expected;
|
|
const actual = transitions[index];
|
|
|
|
if (pseudo) {
|
|
assert_equals(
|
|
actual.effect.target.element,
|
|
element,
|
|
`Transition #${index + 1} has expected target`
|
|
);
|
|
assert_equals(
|
|
actual.effect.target.type,
|
|
pseudo,
|
|
`Transition #${index + 1} has expected pseudo type`
|
|
);
|
|
} else {
|
|
assert_equals(
|
|
actual.effect.target,
|
|
element,
|
|
`Transition #${index + 1} has expected target`
|
|
);
|
|
}
|
|
}
|
|
}, 'CSS Transitions targetting (pseudo-)elements should have correct order '
|
|
+ 'after sorting');
|
|
|
|
promise_test(async t => {
|
|
const div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
|
|
getComputedStyle(div).left;
|
|
|
|
div.style.left = '100px';
|
|
const animations = div.getAnimations();
|
|
assert_equals(animations.length, 1, 'Got transition');
|
|
await animations[0].finished;
|
|
|
|
assert_equals(document.getAnimations().length, 0,
|
|
'No animations returned');
|
|
}, 'Transitions are not returned after they have finished');
|
|
|
|
</script>
|