71 lines
2.4 KiB
HTML
71 lines
2.4 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<script src="../testcommon.js"></script>
|
|
<style>
|
|
@keyframes anim1 { }
|
|
@keyframes anim2 { }
|
|
.before::before {
|
|
animation: anim1 10s;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|
|
<body>
|
|
<script>
|
|
'use strict';
|
|
|
|
test(function(t) {
|
|
var div = addDiv(t, { class: 'before' });
|
|
var 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(function(t) {
|
|
var 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
|
|
var pseudoTarget = document.getAnimations()[0].effect.target;
|
|
var effect = new KeyframeEffectReadOnly(pseudoTarget,
|
|
{ background: ["blue", "red"] },
|
|
3 * MS_PER_SEC);
|
|
var newAnimation = new Animation(effect, document.timeline);
|
|
newAnimation.id = 'scripted-anim';
|
|
newAnimation.play();
|
|
|
|
// Check order - the script-generated animation should appear later
|
|
var 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');
|
|
|
|
done();
|
|
</script>
|
|
</body>
|