offset-path-interpolation-002.html (4358B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>offset-distance interpolation</title> 6 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 7 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> 8 <meta name="assert" content="offset-distance supports animation."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/interpolation-testcommon.js"></script> 12 </head> 13 <body> 14 <script> 15 'use strict'; 16 17 test_interpolation({ 18 property: 'offset-path', 19 from: "path('M 20 10 C 32 42 52 62 120 2200')", 20 to: "path('M 20 10 C 40 50 60 70 200 3000')", 21 }, [ 22 {at: -1, expect: "path('M 20 10 C 24 34 44 54 40 1400')"}, 23 {at: 0, expect: "path('M 20 10 C 32 42 52 62 120 2200')"}, 24 {at: 0.125, expect: "path('M 20 10 C 33 43 53 63 130 2300')"}, 25 {at: 0.875, expect: "path('M 20 10 C 39 49 59 69 190 2900')"}, 26 {at: 1, expect: "path('M 20 10 C 40 50 60 70 200 3000')"}, 27 {at: 2, expect: "path('M 20 10 C 48 58 68 78 280 3800')"} 28 ]); 29 test_interpolation({ 30 property: 'offset-path', 31 from: "path('m 20 10 c 12 32 32 52 100 2190')", 32 to: "path('m 20 10 c 20 40 40 60 180 2990')" 33 }, [ 34 {at: -1, expect: "path('M 20 10 C 24 34 44 54 40 1400')"}, 35 {at: 0, expect: "path('M 20 10 C 32 42 52 62 120 2200')"}, 36 {at: 0.125, expect: "path('M 20 10 C 33 43 53 63 130 2300')"}, 37 {at: 0.875, expect: "path('M 20 10 C 39 49 59 69 190 2900')"}, 38 {at: 1, expect: "path('M 20 10 C 40 50 60 70 200 3000')"}, 39 {at: 2, expect: "path('M 20 10 C 48 58 68 78 280 3800')"} 40 ]); 41 42 test_interpolation({ 43 property: 'offset-path', 44 from: "path('M 20 10 Q 32 42 120 2200')", 45 to: "path('M 20 10 Q 40 50 200 3000')" 46 }, [ 47 {at: -1, expect: "path('M 20 10 Q 24 34 40 1400')"}, 48 {at: 0, expect: "path('M 20 10 Q 32 42 120 2200')"}, 49 {at: 0.125, expect: "path('M 20 10 Q 33 43 130 2300')"}, 50 {at: 0.875, expect: "path('M 20 10 Q 39 49 190 2900')"}, 51 {at: 1, expect: "path('M 20 10 Q 40 50 200 3000')"}, 52 {at: 2, expect: "path('M 20 10 Q 48 58 280 3800')"} 53 ]); 54 test_interpolation({ 55 property: 'offset-path', 56 from: "path('m 20 10 q 12 32 100 2190')", 57 to: "path('m 20 10 q 20 40 180 2990')" 58 }, [ 59 {at: -1, expect: "path('M 20 10 Q 24 34 40 1400')"}, 60 {at: 0, expect: "path('M 20 10 Q 32 42 120 2200')"}, 61 {at: 0.125, expect: "path('M 20 10 Q 33 43 130 2300')"}, 62 {at: 0.875, expect: "path('M 20 10 Q 39 49 190 2900')"}, 63 {at: 1, expect: "path('M 20 10 Q 40 50 200 3000')"}, 64 {at: 2, expect: "path('M 20 10 Q 48 58 280 3800')"} 65 ]); 66 67 // At progress 0.125/0.875, arc flags in path() should consider 68 // non-zero interpolated values as one to match <path> behaviour. 69 // https://svgwg.org/specs/paths/#PathElement 70 test_interpolation({ 71 property: 'offset-path', 72 from: "path('M 100 400 A 10 20 30 1 0 140 450')", 73 to: "path('M 300 200 A 50 60 70 0 1 380 290')" 74 }, [ 75 {at: -1, expect: "path('M -100 600 A -30 -20 -10 1 0 -100 610')"}, 76 {at: 0, expect: "path('M 100 400 A 10 20 30 1 0 140 450')"}, 77 {at: 0.125, expect: "path('M 125 375 A 15 25 35 1 1 170 430')"}, 78 {at: 0.875, expect: "path('M 275 225 A 45 55 65 1 1 350 310')"}, 79 {at: 1, expect: "path('M 300 200 A 50 60 70 0 1 380 290')"}, 80 {at: 2, expect: "path('M 500 0 A 90 100 110 0 1 620 130')"} 81 ]); 82 test_interpolation({ 83 property: 'offset-path', 84 from: "path('m 100 400 a 10 20 30 1 0 40 50')", 85 to: "path('m 300 200 a 50 60 70 0 1 80 90')" 86 }, [ 87 {at: -1, expect: "path('M -100 600 A -30 -20 -10 1 0 -100 610')"}, 88 {at: 0, expect: "path('M 100 400 A 10 20 30 1 0 140 450')"}, 89 {at: 0.125, expect: "path('M 125 375 A 15 25 35 1 1 170 430')"}, 90 {at: 0.875, expect: "path('M 275 225 A 45 55 65 1 1 350 310')"}, 91 {at: 1, expect: "path('M 300 200 A 50 60 70 0 1 380 290')"}, 92 {at: 2, expect: "path('M 500 0 A 90 100 110 0 1 620 130')"} 93 ]); 94 </script> 95 </body> 96 </html>