undefined reference to 'JSC::B3::BasicBlock::fallThrough() const
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / web-animations / animation-model / keyframe-effects / effect-value-transformed-distance.html
1 <!DOCTYPE html>
2 <meta charset=utf-8>
3 <title>The effect value of a keyframe effect: Calculating the transformed
4   distance between keyframes</title>
5 <link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
6 <script src="/resources/testharness.js"></script>
7 <script src="/resources/testharnessreport.js"></script>
8 <script src="../../testcommon.js"></script>
9 <script src="../../resources/easing-tests.js"></script>
10 <body>
11 <div id="log"></div>
12 <script>
13 'use strict';
14
15 // Test that applying easing to keyframes is applied as expected
16
17 for (const params of gEasingTests) {
18   test(t => {
19     const target = createDiv(t);
20     const anim   = target.animate([ { width: '0px' },
21                                     // We put the easing on the second keyframe
22                                     // so we can test that it is only applied
23                                     // to the specified keyframe.
24                                     { width: '100px', easing: params.easing },
25                                     { width: '200px' } ],
26                                   { duration: 2000,
27                                     fill: 'forwards' });
28
29     for (const sampleTime of [0, 999, 1000, 1100, 1500, 2000]) {
30       anim.currentTime = sampleTime;
31
32       const portion = (sampleTime - 1000) / 1000;
33       const expectedWidth = sampleTime < 1000
34                             ? sampleTime / 10 // first segment is linear
35                             : 100 + params.easingFunction(portion) * 100;
36       assert_approx_equals(parseFloat(getComputedStyle(target).width),
37                            expectedWidth,
38                            0.01,
39                            'The width should be approximately ' +
40                            `${expectedWidth} at ${sampleTime}ms`);
41     }
42   }, `A ${params.desc} on a keyframe affects the resulting style`);
43 }
44
45 // Test that a linear-equivalent cubic-bezier easing applied to a keyframe does
46 // not alter (including clamping) the result.
47
48 for (const params of gEasingTests) {
49   const linearEquivalentEasings = [ 'cubic-bezier(0, 0, 0, 0)',
50                                     'cubic-bezier(1, 1, 1, 1)' ];
51   test(t => {
52     for (const linearEquivalentEasing of linearEquivalentEasings) {
53       const timing = { duration: 1000,
54                        fill: 'forwards',
55                        easing: params.easing };
56
57       const linearTarget = createDiv(t);
58       const linearAnim = linearTarget.animate([ { width: '0px' },
59                                                 { width: '100px' } ],
60                                               timing);
61
62       const equivalentTarget = createDiv(t);
63       const equivalentAnim =
64         equivalentTarget.animate([ { width: '0px',
65                                      easing: linearEquivalentEasing },
66                                    { width: '100px' } ],
67                                  timing);
68
69       for (const sampleTime of [0, 250, 500, 750, 1000]) {
70         linearAnim.currentTime = sampleTime;
71         equivalentAnim.currentTime = sampleTime;
72
73         assert_equals(getComputedStyle(linearTarget).width,
74                       getComputedStyle(equivalentTarget).width,
75                       `The 'width' of the animated elements should be equal ` +
76                       `at ${sampleTime}ms`);
77       }
78     }
79   }, 'Linear-equivalent cubic-bezier keyframe easing applied to an effect ' +
80      `with a ${params.desc} does not alter the result`);
81 }
82
83 </script>
84 </body>