offset-path-interpolation-001.html (3586B)
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 // Distinct number of path segments 18 test_no_interpolation({ 19 property: 'offset-path', 20 from: "path('M 0 0 H 1 H 2')", 21 to: "path('M 0 0 H 3')" 22 }); 23 24 test_no_interpolation({ 25 property: 'offset-path', 26 from: "path('M 1 2 L 3 4 Z')", 27 to: "none" 28 }); 29 30 // Distinct segment types 31 test_no_interpolation({ 32 property: 'offset-path', 33 from: "path('M 10 0 H 11')", 34 to: "path('M 20 0 V 2')" 35 }); 36 37 test_no_interpolation({ 38 property: 'offset-path', 39 from: "path('M 1 2 L 4 6 Z')", 40 to: "path('M 1 2 H 4 V 6')" 41 }); 42 43 // Exercise each segment type 44 test_interpolation({ 45 property: 'offset-path', 46 from: "path('M 0 0 Z')", 47 to: "path('M 0 0 Z')" 48 }, [ 49 {at: -1, expect: "path('M 0 0 Z')"}, 50 {at: 0, expect: "path('M 0 0 Z')"}, 51 {at: 0.125, expect: "path('M 0 0 Z')"}, 52 {at: 0.875, expect: "path('M 0 0 Z')"}, 53 {at: 1, expect: "path('M 0 0 Z')"}, 54 {at: 2, expect: "path('M 0 0 Z')"} 55 ]); 56 57 test_interpolation({ 58 property: 'offset-path', 59 from: "path('M 20 70')", 60 to: "path('M 100 30')" 61 }, [ 62 {at: -1, expect: "path('M -60 110')"}, 63 {at: 0, expect: "path('M 20 70')"}, 64 {at: 0.125, expect: "path('M 30 65')"}, 65 {at: 0.875, expect: "path('M 90 35')"}, 66 {at: 1, expect: "path('M 100 30')"}, 67 {at: 2, expect: "path('M 180 -10')"} 68 ]); 69 70 test_interpolation({ 71 property: 'offset-path', 72 from: "path('m 20 70')", 73 to: "path('m 100 30')" 74 }, [ 75 {at: -1, expect: "path('M -60 110')"}, 76 {at: 0, expect: "path('M 20 70')"}, 77 {at: 0.125, expect: "path('M 30 65')"}, 78 {at: 0.875, expect: "path('M 90 35')"}, 79 {at: 1, expect: "path('M 100 30')"}, 80 {at: 2, expect: "path('M 180 -10')"} 81 ]); 82 83 test_interpolation({ 84 property: 'offset-path', 85 from: "path('m 100 200 L 120 270')", 86 to: "path('m 100 200 L 200 230')" 87 }, [ 88 {at: -1, expect: "path('M 100 200 L 40 310')"}, 89 {at: 0, expect: "path('M 100 200 L 120 270')"}, 90 {at: 0.125, expect: "path('M 100 200 L 130 265')"}, 91 {at: 0.875, expect: "path('M 100 200 L 190 235')"}, 92 {at: 1, expect: "path('M 100 200 L 200 230')"}, 93 {at: 2, expect: "path('M 100 200 L 280 190')"} 94 ]); 95 96 test_interpolation({ 97 property: 'offset-path', 98 from: "path('m 100 200 l 20 70')", 99 to: "path('m 100 200 l 100 30')" 100 }, [ 101 {at: -1, expect: "path('M 100 200 L 40 310')"}, 102 {at: 0, expect: "path('M 100 200 L 120 270')"}, 103 {at: 0.125, expect: "path('M 100 200 L 130 265')"}, 104 {at: 0.875, expect: "path('M 100 200 L 190 235')"}, 105 {at: 1, expect: "path('M 100 200 L 200 230')"}, 106 {at: 2, expect: "path('M 100 200 L 280 190')"} 107 ]); 108 </script> 109 </body> 110 </html>