[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / imported / mozilla / css-transitions / test_keyframeeffect-getkeyframes.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 :root {
8   --var-100px: 100px;
9 }
10 </style>
11 <body>
12 <div id="log"></div>
13 <script>
14 'use strict';
15
16 function getKeyframes(e) {
17   return e.getAnimations()[0].effect.getKeyframes();
18 }
19
20 function assert_frames_equal(a, b, name) {
21   assert_equals(Object.keys(a).sort().toString(),
22                 Object.keys(b).sort().toString(),
23                 "properties on " + name);
24   for (var p in a) {
25     assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
26   }
27 }
28
29 test(function(t) {
30   var div = addDiv(t);
31
32   div.style.left = '0px';
33   getComputedStyle(div).transitionProperty;
34   div.style.transition = 'left 100s';
35   div.style.left = '100px';
36
37   var frames = getKeyframes(div);
38
39   assert_equals(frames.length, 2, "number of frames");
40
41   var expected = [
42     { offset: 0, computedOffset: 0, easing: "ease", composite: null,
43       left: "0px" },
44     { offset: 1, computedOffset: 1, easing: "linear", composite: null,
45       left: "100px" },
46   ];
47
48   for (var i = 0; i < frames.length; i++) {
49     assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
50   }
51 }, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a simple'
52    + ' transition');
53
54 test(function(t) {
55   var div = addDiv(t);
56
57   div.style.left = '0px';
58   getComputedStyle(div).transitionProperty;
59   div.style.transition = 'left 100s steps(2,end)';
60   div.style.left = '100px';
61
62   var frames = getKeyframes(div);
63
64   assert_equals(frames.length, 2, "number of frames");
65
66   var expected = [
67     { offset: 0, computedOffset: 0, easing: "steps(2)", composite: null,
68       left: "0px" },
69     { offset: 1, computedOffset: 1, easing: "linear", composite: null,
70       left: "100px" },
71   ];
72
73   for (var i = 0; i < frames.length; i++) {
74     assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
75   }
76 }, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a simple'
77    + ' transition with a non-default easing function');
78
79 test(function(t) {
80   var div = addDiv(t);
81   div.style.left = '0px';
82   getComputedStyle(div).transitionProperty;
83   div.style.transition = 'left 100s';
84   div.style.left = 'var(--var-100px)';
85
86   var frames = getKeyframes(div);
87
88   // CSS transition endpoints are based on the computed value so we
89   // shouldn't see the variable reference
90   var expected = [
91     { offset: 0, computedOffset: 0, easing: 'ease', composite: null,
92       left: '0px' },
93     { offset: 1, computedOffset: 1, easing: 'linear', composite: null,
94       left: '100px' },
95   ];
96   for (var i = 0; i < frames.length; i++) {
97     assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
98   }
99 }, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a'
100    + ' transition with a CSS variable endpoint');
101
102 </script>
103 </body>