[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / imported / mozilla / css-animations / test_effect-target.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 anim { }
8 ::before {
9   content: ''
10 }
11 ::after {
12   content: ''
13 }
14 </style>
15 <body>
16 <div id="log"></div>
17 <script>
18 'use strict';
19
20 test(function(t) {
21   var div = addDiv(t);
22   div.style.animation = 'anim 100s';
23   var animation = div.getAnimations()[0];
24   assert_equals(animation.effect.target, div,
25     'Animation.target is the animatable div');
26 }, 'Returned CSS animations have the correct effect target');
27
28 test(function(t) {
29   addStyle(t, { '.after::after': 'animation: anim 10s, anim 100s;' });
30   var div = addDiv(t, { class: 'after' });
31   var anims = document.getAnimations();
32   assert_equals(anims.length, 2,
33                 'Got animations running on ::after pseudo element');
34   assert_equals(anims[0].effect.target, anims[1].effect.target,
35                 'Both animations return the same target object');
36 }, 'effect.target should return the same CSSPseudoElement object each time');
37
38 test(function(t) {
39   addStyle(t, { '.after::after': 'animation: anim 10s;' });
40   var div = addDiv(t, { class: 'after' });
41   var pseudoTarget = document.getAnimations()[0].effect.target;
42   var effect = new KeyframeEffectReadOnly(pseudoTarget,
43                                           { background: ["blue", "red"] },
44                                           3 * MS_PER_SEC);
45   var newAnim = new Animation(effect, document.timeline);
46   newAnim.play();
47   var anims = document.getAnimations();
48   assert_equals(anims.length, 2,
49                 'Got animations running on ::after pseudo element');
50   assert_not_equals(anims[0], newAnim,
51                     'The scriped-generated animation appears last');
52   assert_equals(newAnim.effect.target, pseudoTarget,
53                 'The effect.target of the scripted-generated animation is ' +
54                 'the same as the one from the argument of ' +
55                 'KeyframeEffectReadOnly constructor');
56   assert_equals(anims[0].effect.target, newAnim.effect.target,
57                 'Both animations return the same target object');
58 }, 'effect.target from the script-generated animation should return the same ' +
59    'CSSPseudoElement object as that from the CSS generated animation');
60
61 </script>
62 </body>