offset-path-interpolation-003.html (4530B)
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 50 60 H 70')", 20 to: "path('M 10 140 H 270')" 21 }, [ 22 {at: -1, expect: "path('M 90 -20 H -130')"}, 23 {at: 0, expect: "path('M 50 60 H 70')"}, 24 {at: 0.125, expect: "path('M 45 70 H 95')"}, 25 {at: 0.875, expect: "path('M 15 130 H 245')"}, 26 {at: 1, expect: "path('M 10 140 H 270')"}, 27 {at: 2, expect: "path('M -30 220 H 470')"} 28 ]); 29 test_interpolation({ 30 property: 'offset-path', 31 from: "path('m 50 60 h 20')", 32 to: "path('m 10 140 h 260')" 33 }, [ 34 {at: -1, expect: "path('M 90 -20 H -130')"}, 35 {at: 0, expect: "path('M 50 60 H 70')"}, 36 {at: 0.125, expect: "path('M 45 70 H 95')"}, 37 {at: 0.875, expect: "path('M 15 130 H 245')"}, 38 {at: 1, expect: "path('M 10 140 H 270')"}, 39 {at: 2, expect: "path('M -30 220 H 470')"} 40 ]); 41 42 test_interpolation({ 43 property: 'offset-path', 44 from: "path('M 50 60 V 70')", 45 to: "path('M 10 140 V 270')" 46 }, [ 47 {at: -1, expect: "path('M 90 -20 V -130')"}, 48 {at: 0, expect: "path('M 50 60 V 70')"}, 49 {at: 0.125, expect: "path('M 45 70 V 95')"}, 50 {at: 0.875, expect: "path('M 15 130 V 245')"}, 51 {at: 1, expect: "path('M 10 140 V 270')"}, 52 {at: 2, expect: "path('M -30 220 V 470')"} 53 ]); 54 test_interpolation({ 55 property: 'offset-path', 56 from: "path('m 50 60 v 10')", 57 to: "path('m 10 140 v 130')" 58 }, [ 59 {at: -1, expect: "path('M 90 -20 V -130')"}, 60 {at: 0, expect: "path('M 50 60 V 70')"}, 61 {at: 0.125, expect: "path('M 45 70 V 95')"}, 62 {at: 0.875, expect: "path('M 15 130 V 245')"}, 63 {at: 1, expect: "path('M 10 140 V 270')"}, 64 {at: 2, expect: "path('M -30 220 V 470')"} 65 ]); 66 67 test_interpolation({ 68 property: 'offset-path', 69 from: "path('M 12 34 S 45 67 89 123')", 70 to: "path('M 20 26 S 61 51 113 99')" 71 }, [ 72 {at: -1, expect: "path('M 4 42 S 29 83 65 147')"}, 73 {at: 0, expect: "path('M 12 34 S 45 67 89 123')"}, 74 {at: 0.125, expect: "path('M 13 33 S 47 65 92 120')"}, 75 {at: 0.875, expect: "path('M 19 27 S 59 53 110 102')"}, 76 {at: 1, expect: "path('M 20 26 S 61 51 113 99')"}, 77 {at: 2, expect: "path('M 28 18 S 77 35 137 75')"}, 78 ]); 79 test_interpolation({ 80 property: 'offset-path', 81 from: "path('m 12 34 s 33 33 77 89')", 82 to: "path('m 20 26 s 41 25 93 73')" 83 }, [ 84 {at: -1, expect: "path('M 4 42 S 29 83 65 147')"}, 85 {at: 0, expect: "path('M 12 34 S 45 67 89 123')"}, 86 {at: 0.125, expect: "path('M 13 33 S 47 65 92 120')"}, 87 {at: 0.875, expect: "path('M 19 27 S 59 53 110 102')"}, 88 {at: 1, expect: "path('M 20 26 S 61 51 113 99')"}, 89 {at: 2, expect: "path('M 28 18 S 77 35 137 75')"}, 90 ]); 91 92 test_interpolation({ 93 property: 'offset-path', 94 from: "path('M 12 34 T 45 67')", 95 to: "path('M 20 26 T 61 51')" 96 }, [ 97 {at: -1, expect: "path('M 4 42 T 29 83')"}, 98 {at: 0, expect: "path('M 12 34 T 45 67')"}, 99 {at: 0.125, expect: "path('M 13 33 T 47 65')"}, 100 {at: 0.875, expect: "path('M 19 27 T 59 53')"}, 101 {at: 1, expect: "path('M 20 26 T 61 51')"}, 102 {at: 2, expect: "path('M 28 18 T 77 35')"}, 103 ]); 104 test_interpolation({ 105 property: 'offset-path', 106 from: "path('m 12 34 t 33 33')", 107 to: "path('m 20 26 t 41 25')" 108 }, [ 109 {at: -1, expect: "path('M 4 42 T 29 83')"}, 110 {at: 0, expect: "path('M 12 34 T 45 67')"}, 111 {at: 0.125, expect: "path('M 13 33 T 47 65')"}, 112 {at: 0.875, expect: "path('M 19 27 T 59 53')"}, 113 {at: 1, expect: "path('M 20 26 T 61 51')"}, 114 {at: 2, expect: "path('M 28 18 T 77 35')"}, 115 ]); 116 </script> 117 </body> 118 </html>