[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / imported / mozilla / css-animations / test_pseudoElement-get-animations.html
1 <!doctype html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <meta charset=utf-8>
3 <script src="../../../resources/testharness.js"></script>
4 <script src="../../../resources/testharnessreport.js"></script>
5 <script src="../resources/testcommon.js"></script>
6 <style>
7 @keyframes anim1 { }
8 @keyframes anim2 { }
9 .before::before {
10   animation: anim1 10s;
11   content: '';
12 }
13 .after-with-mix-anims-trans::after {
14   content: '';
15   animation: anim1 10s, anim2 10s;
16   width: 0px;
17   height: 0px;
18   transition: all 100s;
19 }
20 .after-change::after {
21   width: 100px;
22   height: 100px;
23   content: '';
24 }
25 </style>
26 <body>
27 <div id="log"></div>
28 <script>
29 'use strict';
30
31 test(function(t) {
32   var div = addDiv(t, { class: 'before' });
33   var pseudoTarget = document.getAnimations()[0].effect.target;
34   assert_equals(pseudoTarget.getAnimations().length, 1,
35                 'Expected number of animations are returned');
36   assert_equals(pseudoTarget.getAnimations()[0].animationName, 'anim1',
37                 'CSS animation name matches');
38 }, 'getAnimations returns CSSAnimation objects');
39
40 test(function(t) {
41   var div = addDiv(t, { class: 'after-with-mix-anims-trans' });
42   // Trigger transitions
43   flushComputedStyle(div);
44   div.classList.add('after-change');
45
46   // Create additional animation on the pseudo-element from script
47   var pseudoTarget = document.getAnimations()[0].effect.target;
48   var effect = new KeyframeEffectReadOnly(pseudoTarget,
49                                           { background: ["blue", "red"] },
50                                           3 * MS_PER_SEC);
51   var newAnimation = new Animation(effect, document.timeline);
52   newAnimation.id = 'scripted-anim';
53   newAnimation.play();
54
55   // Check order - the script-generated animation should appear later
56   var anims = pseudoTarget.getAnimations();
57   assert_equals(anims.length, 5,
58                 'Got expected number of animations/trnasitions running on ' +
59                 '::after pseudo element');
60   assert_equals(anims[0].transitionProperty, 'height',
61                 '1st animation is the 1st transition sorted by name');
62   assert_equals(anims[1].transitionProperty, 'width',
63                 '2nd animation is the 2nd transition sorted by name ');
64   assert_equals(anims[2].animationName, 'anim1',
65                 '3rd animation is the 1st animation in animation-name list');
66   assert_equals(anims[3].animationName, 'anim2',
67                 '4rd animation is the 2nd animation in animation-name list');
68   assert_equals(anims[4].id, 'scripted-anim',
69                 'Animation added by script appears last');
70 }, 'getAnimations returns css transitions/animations, and script-generated ' +
71    'animations in the expected order');
72
73 </script>
74 </body>