offset-interpolation.html (3795B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-shorthand"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/support/interpolation-testcommon.js"></script> 9 </head> 10 <body> 11 <script> 12 test_interpolation({ 13 property: 'offset', 14 from: 'path("M0 200H 700") 500px 800deg', 15 to: 'path("M0 300H 700 Z") 600px 900deg', 16 method: 'CSS Transitions', 17 }, [ 18 {at: -0.3, expect: 'path("M0 300H 700 Z") 470px 770deg'}, 19 {at: 0, expect: 'path("M0 300H 700 Z") 500px 800deg'}, 20 {at: 0.3, expect: 'path("M0 300H 700 Z") 530px 830deg'}, 21 {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'}, 22 {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'}, 23 {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'}, 24 ]); 25 26 test_interpolation({ 27 property: 'offset', 28 from: 'path("M0 0H 200") 500px auto', 29 to: 'path("M0 0H 300") 600px 0deg', 30 method: 'CSS Transitions', 31 }, [ 32 {at: -0.3, expect: 'path("M0 0H 170") 470px 0deg'}, 33 {at: 0, expect: 'path("M0 0H 200") 500px 0deg'}, 34 {at: 0.3, expect: 'path("M0 0H 230") 530px 0deg'}, 35 {at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'}, 36 {at: 1, expect: 'path("M0 0H 300") 600px 0deg'}, 37 {at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'}, 38 ]); 39 40 test_interpolation({ 41 property: 'offset', 42 from: 'path("M0 200H 700") 500px 800deg', 43 to: 'path("M0 300H 700 Z") 600px 900deg', 44 method: 'CSS Animations', 45 }, [ 46 {at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'}, 47 {at: 0, expect: 'path("M0 200H 700") 500px 800deg'}, 48 {at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'}, 49 {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'}, 50 {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'}, 51 {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'}, 52 ]); 53 54 test_interpolation({ 55 property: 'offset', 56 from: 'path("M0 0H 200") 500px auto', 57 to: 'path("M0 0H 300") 600px 0deg', 58 method: 'CSS Animations', 59 }, [ 60 {at: -0.3, expect: 'path("M0 0H 170") 470px'}, 61 {at: 0, expect: 'path("M0 0H 200") 500px'}, 62 {at: 0.3, expect: 'path("M0 0H 230") 530px'}, 63 {at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'}, 64 {at: 1, expect: 'path("M0 0H 300") 600px 0deg'}, 65 {at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'}, 66 ]); 67 68 test_interpolation({ 69 property: 'offset', 70 from: 'path("M0 200H 700") 500px 800deg', 71 to: 'path("M0 300H 700 Z") 600px 900deg', 72 method: 'Web Animations', 73 }, [ 74 {at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'}, 75 {at: 0, expect: 'path("M0 200H 700") 500px 800deg'}, 76 {at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'}, 77 {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'}, 78 {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'}, 79 {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'}, 80 ]); 81 82 test_interpolation({ 83 property: 'offset', 84 from: 'path("M0 0V 200") 500px auto', 85 to: 'path("M0 0H 300") 600px 0deg', 86 method: 'Web Animations', 87 }, [ 88 {at: -0.3, expect: 'path("M0 0V 200") 470px'}, 89 {at: 0, expect: 'path("M0 0V 200") 500px'}, 90 {at: 0.3, expect: 'path("M0 0V 200") 530px'}, 91 {at: 0.6, expect: 'path("M0 0H 300") 560px 0deg'}, 92 {at: 1, expect: 'path("M0 0H 300") 600px 0deg'}, 93 {at: 1.5, expect: 'path("M0 0H 300") 650px 0deg'}, 94 ]); 95 </script> 96 </body> 97 </html>