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