mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision 89aa3f42131cce5a77268ddaeb2fab8a2e29c2a6
This commit is contained in:
parent
39963266ae
commit
ea00d34098
392 changed files with 5974 additions and 7614 deletions
|
@ -1,75 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSSPseudoElement.getAnimations() for CSS animations</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes anim1 { }
|
||||
@keyframes anim2 { }
|
||||
.before::before {
|
||||
animation: anim1 10s;
|
||||
content: '';
|
||||
}
|
||||
.after-with-mix-anims-trans::after {
|
||||
content: '';
|
||||
animation: anim1 10s, anim2 10s;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
transition: all 100s;
|
||||
}
|
||||
.after-change::after {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
content: '';
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'before' });
|
||||
const pseudoTarget = document.getAnimations()[0].effect.target;
|
||||
assert_equals(pseudoTarget.getAnimations().length, 1,
|
||||
'Expected number of animations are returned');
|
||||
assert_equals(pseudoTarget.getAnimations()[0].animationName, 'anim1',
|
||||
'CSS animation name matches');
|
||||
}, 'getAnimations returns CSSAnimation objects');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'after-with-mix-anims-trans' });
|
||||
// Trigger transitions
|
||||
flushComputedStyle(div);
|
||||
div.classList.add('after-change');
|
||||
|
||||
// Create additional animation on the pseudo-element from script
|
||||
const pseudoTarget = document.getAnimations()[0].effect.target;
|
||||
const effect = new KeyframeEffect(pseudoTarget,
|
||||
{ background: ["blue", "red"] },
|
||||
3 * MS_PER_SEC);
|
||||
const newAnimation = new Animation(effect, document.timeline);
|
||||
newAnimation.id = 'scripted-anim';
|
||||
newAnimation.play();
|
||||
|
||||
// Check order - the script-generated animation should appear later
|
||||
const anims = pseudoTarget.getAnimations();
|
||||
assert_equals(anims.length, 5,
|
||||
'Got expected number of animations/trnasitions running on ' +
|
||||
'::after pseudo element');
|
||||
assert_equals(anims[0].transitionProperty, 'height',
|
||||
'1st animation is the 1st transition sorted by name');
|
||||
assert_equals(anims[1].transitionProperty, 'width',
|
||||
'2nd animation is the 2nd transition sorted by name ');
|
||||
assert_equals(anims[2].animationName, 'anim1',
|
||||
'3rd animation is the 1st animation in animation-name list');
|
||||
assert_equals(anims[3].animationName, 'anim2',
|
||||
'4rd animation is the 2nd animation in animation-name list');
|
||||
assert_equals(anims[4].id, 'scripted-anim',
|
||||
'Animation added by script appears last');
|
||||
}, 'getAnimations returns CSS transitions/animations, and script-generated ' +
|
||||
'animations in the expected order');
|
||||
|
||||
</script>
|
|
@ -298,12 +298,12 @@ test(t => {
|
|||
|
||||
if (pseudo) {
|
||||
assert_equals(
|
||||
actual.effect.target.element,
|
||||
actual.effect.target,
|
||||
element,
|
||||
`Animation #${index + 1} has expected target`
|
||||
);
|
||||
assert_equals(
|
||||
actual.effect.target.type,
|
||||
actual.effect.pseudoElement,
|
||||
pseudo,
|
||||
`Animation #${index + 1} has expected pseudo type`
|
||||
);
|
||||
|
@ -313,6 +313,11 @@ test(t => {
|
|||
element,
|
||||
`Animation #${index + 1} has expected target`
|
||||
);
|
||||
assert_equals(
|
||||
actual.effect.pseudoElement,
|
||||
null,
|
||||
`Animation #${index + 1} has null pseudo type`
|
||||
);
|
||||
}
|
||||
}
|
||||
}, 'CSS Animations targetting (pseudo-)elements should have correct order '
|
||||
|
|
|
@ -325,10 +325,13 @@ test(t => {
|
|||
assert_equals(animations[0].effect.target, target,
|
||||
'The animation targeting the parent element ' +
|
||||
'should be returned first');
|
||||
assert_equals(animations[1].effect.target.type, '::before',
|
||||
assert_equals(animations[0].effect.pseudoElement, null,
|
||||
'The animation targeting the parent element ' +
|
||||
'should be returned first')
|
||||
assert_equals(animations[1].effect.pseudoElement, '::before',
|
||||
'The animation targeting the ::before pseudo-element ' +
|
||||
'should be returned second');
|
||||
assert_equals(animations[2].effect.target.type, '::after',
|
||||
assert_equals(animations[2].effect.pseudoElement, '::after',
|
||||
'The animation targeting the ::after pesudo-element ' +
|
||||
'should be returned last');
|
||||
}, '{ subtree: true } on a leaf element returns the element\'s animations'
|
||||
|
@ -366,34 +369,37 @@ test(t => {
|
|||
|
||||
const animations = parent.getAnimations({ subtree: true });
|
||||
assert_equals(animations.length, 6,
|
||||
'Should find all elements, pesudo-elements that parent has');
|
||||
'Should find all elements, pseudo-elements that parent has');
|
||||
|
||||
assert_equals(animations[0].effect.target, parent,
|
||||
'The animation targeting the parent element ' +
|
||||
'should be returned first');
|
||||
assert_equals(animations[1].effect.target.type, '::before',
|
||||
assert_equals(animations[0].effect.pseudoElement, null,
|
||||
'The animation targeting the parent element ' +
|
||||
'should be returned first');
|
||||
assert_equals(animations[1].effect.pseudoElement, '::before',
|
||||
'The animation targeting the ::before pseudo-element ' +
|
||||
'should be returned second');
|
||||
assert_equals(animations[1].effect.target.element, parent,
|
||||
assert_equals(animations[1].effect.target, parent,
|
||||
'This ::before element should be child of parent element');
|
||||
assert_equals(animations[2].effect.target.type, '::after',
|
||||
assert_equals(animations[2].effect.pseudoElement, '::after',
|
||||
'The animation targeting the ::after pesudo-element ' +
|
||||
'should be returned third');
|
||||
assert_equals(animations[2].effect.target.element, parent,
|
||||
assert_equals(animations[2].effect.target, parent,
|
||||
'This ::after element should be child of parent element');
|
||||
|
||||
assert_equals(animations[3].effect.target, child,
|
||||
'The animation targeting the child element ' +
|
||||
'should be returned fourth');
|
||||
assert_equals(animations[4].effect.target.type, '::before',
|
||||
assert_equals(animations[4].effect.pseudoElement, '::before',
|
||||
'The animation targeting the ::before pseudo-element ' +
|
||||
'should be returned fifth');
|
||||
assert_equals(animations[4].effect.target.element, child,
|
||||
assert_equals(animations[4].effect.target, child,
|
||||
'This ::before element should be child of child element');
|
||||
assert_equals(animations[5].effect.target.type, '::after',
|
||||
assert_equals(animations[5].effect.pseudoElement, '::after',
|
||||
'The animation targeting the ::after pesudo-element ' +
|
||||
'should be returned last');
|
||||
assert_equals(animations[5].effect.target.element, child,
|
||||
assert_equals(animations[5].effect.target, child,
|
||||
'This ::after element should be child of child element');
|
||||
}, '{ subtree: true } on an element with a child returns animations from the'
|
||||
+ ' element, its pseudo-elements, its child and its child pseudo-elements');
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue