offset-path-composition.html (4200B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>offset-distance composition</title> 4 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 5 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> 6 <meta name="assert" content="offset-distance supports animation."> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 12 <body> 13 <script> 14 // TODO(ericwilligers) Support additive animation for path strings crbug.com/699308 15 16 // Ray paths compose. 17 test_composition({ 18 property: 'offset-path', 19 underlying: 'ray(20deg sides)', 20 addFrom: 'ray(10deg sides)', 21 addTo: 'ray(20deg sides)', 22 }, [ 23 {at: -0.3, expect: 'ray(27deg sides)'}, 24 {at: 0, expect: 'ray(30deg sides)'}, 25 {at: 0.3, expect: 'ray(33deg sides)'}, 26 {at: 0.6, expect: 'ray(36deg sides)'}, 27 {at: 1, expect: 'ray(40deg sides)'}, 28 {at: 1.5, expect: 'ray(45deg sides)'}, 29 ]); 30 31 // Ray paths without contain don't compose with underlying contain. 32 test_composition({ 33 property: 'offset-path', 34 underlying: 'ray(20deg closest-corner contain)', 35 addFrom: 'ray(10deg closest-corner)', 36 addTo: 'ray(20deg closest-corner)', 37 }, [ 38 {at: -0.3, expect: 'ray(7deg closest-corner)'}, 39 {at: 0, expect: 'ray(10deg closest-corner)'}, 40 {at: 0.3, expect: 'ray(13deg closest-corner)'}, 41 {at: 0.6, expect: 'ray(16deg closest-corner)'}, 42 {at: 1, expect: 'ray(20deg closest-corner)'}, 43 {at: 1.5, expect: 'ray(25deg closest-corner)'}, 44 ]); 45 46 // Ray paths don't compose when underlying has different size. 47 test_composition({ 48 property: 'offset-path', 49 underlying: 'ray(20deg closest-side)', 50 addFrom: 'ray(10deg closest-corner)', 51 addTo: 'ray(20deg closest-corner)', 52 }, [ 53 {at: -0.3, expect: 'ray(7deg closest-corner)'}, 54 {at: 0, expect: 'ray(10deg closest-corner)'}, 55 {at: 0.3, expect: 'ray(13deg closest-corner)'}, 56 {at: 0.6, expect: 'ray(16deg closest-corner)'}, 57 {at: 1, expect: 'ray(20deg closest-corner)'}, 58 {at: 1.5, expect: 'ray(25deg closest-corner)'}, 59 ]); 60 61 // Ray contain paths compose with underlying contain. 62 test_composition({ 63 property: 'offset-path', 64 underlying: 'ray(20deg farthest-side contain)', 65 addFrom: 'ray(190deg farthest-side contain)', 66 addTo: 'ray(20deg farthest-side contain)', 67 }, [ 68 {at: -0.3, expect: 'ray(261deg farthest-side contain)'}, 69 {at: 0, expect: 'ray(210deg farthest-side contain)'}, 70 {at: 0.3, expect: 'ray(159deg farthest-side contain)'}, 71 {at: 0.6, expect: 'ray(108deg farthest-side contain)'}, 72 {at: 1, expect: 'ray(40deg farthest-side contain)'}, 73 {at: 1.5, expect: 'ray(-45deg farthest-side contain)'}, 74 ]); 75 76 // When we can't interpolate, we can't compose. 77 test_composition({ 78 property: 'offset-path', 79 underlying: 'ray(20deg farthest-corner)', 80 addFrom: 'ray(190deg farthest-corner contain)', 81 addTo: 'ray(20deg farthest-corner)', 82 }, [ 83 {at: -0.3, expect: 'ray(190deg farthest-corner contain)'}, 84 {at: 0, expect: 'ray(190deg farthest-corner contain)'}, 85 {at: 0.3, expect: 'ray(190deg farthest-corner contain)'}, 86 {at: 0.6, expect: 'ray(40deg farthest-corner)'}, 87 {at: 1, expect: 'ray(40deg farthest-corner)'}, 88 {at: 1.5, expect: 'ray(40deg farthest-corner)'}, 89 ]); 90 91 test_composition({ 92 property: 'offset-path', 93 underlying: 'ray(20deg sides)', 94 replaceFrom: 'ray(190deg sides contain)', 95 addTo: 'ray(20deg sides)', 96 }, [ 97 {at: -0.3, expect: 'ray(190deg sides contain)'}, 98 {at: 0, expect: 'ray(190deg sides contain)'}, 99 {at: 0.3, expect: 'ray(190deg sides contain)'}, 100 {at: 0.6, expect: 'ray(40deg sides)'}, 101 {at: 1, expect: 'ray(40deg sides)'}, 102 {at: 1.5, expect: 'ray(40deg sides)'}, 103 ]); 104 105 // Ray paths compose with underlying. 106 test_composition({ 107 property: 'offset-path', 108 underlying: 'ray(20deg closest-side)', 109 addFrom: 'ray(10deg closest-side)', 110 replaceTo: 'ray(10deg closest-side)', 111 }, [ 112 {at: -0.3, expect: 'ray(36deg closest-side)'}, 113 {at: 0, expect: 'ray(30deg closest-side)'}, 114 {at: 0.3, expect: 'ray(24deg closest-side)'}, 115 {at: 0.6, expect: 'ray(18deg closest-side)'}, 116 {at: 1, expect: 'ray(10deg closest-side)'}, 117 {at: 1.5, expect: 'ray(0deg closest-side)'}, 118 ]); 119 </script> 120 </body>