css/css-animations/CSSPseudoElement-getAnimations.tentative.html

<!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>