offset-path-interpolation-007.html (3567B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>offset-path interpolation with allow-discrete</title> 6 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> 7 <meta name="assert" content="offset-path supports animation with allow-discrete."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 </head> 12 <style> 13 .parent { 14 offset-path: circle(farthest-side); 15 } 16 .target { 17 offset-path: circle(10px); 18 } 19 </style> 20 <body> 21 <script> 22 'use strict'; 23 24 test_interpolation({ 25 property: 'offset-path', 26 behavior: 'allow-discrete', 27 from: 'circle(10px)', 28 to: 'inset(20px)', 29 }, [ 30 {at: -1, expect: 'circle(10px)'}, 31 {at: 0, expect: 'circle(10px)'}, 32 {at: 0.4, expect: 'circle(10px)'}, 33 {at: 0.5, expect: 'inset(20px)'}, 34 {at: 1, expect: 'inset(20px)'}, 35 {at: 1.5, expect: 'inset(20px)'}, 36 ]); 37 38 test_interpolation({ 39 property: 'offset-path', 40 behavior: 'allow-discrete', 41 from: 'ellipse(at center)', 42 to: 'none', 43 }, [ 44 {at: -1, expect: 'ellipse(at center)'}, 45 {at: 0, expect: 'ellipse(at center)'}, 46 {at: 0.4, expect: 'ellipse(at center)'}, 47 {at: 0.5, expect: 'none'}, 48 {at: 1, expect: 'none'}, 49 {at: 1.5, expect: 'none'}, 50 ]); 51 52 test_interpolation({ 53 property: 'offset-path', 54 behavior: 'allow-discrete', 55 from: neutralKeyframe, 56 to: 'none', 57 }, [ 58 {at: -1, expect: 'circle(10px)'}, 59 {at: 0, expect: 'circle(10px)'}, 60 {at: 0.4, expect: 'circle(10px)'}, 61 {at: 0.5, expect: 'none'}, 62 {at: 1, expect: 'none'}, 63 {at: 1.5, expect: 'none'}, 64 ]); 65 66 test_interpolation({ 67 property: 'offset-path', 68 behavior: 'allow-discrete', 69 from: 'initial', 70 to: 'circle()', 71 }, [ 72 {at: -1, expect: 'none'}, 73 {at: 0, expect: 'none'}, 74 {at: 0.4, expect: 'none'}, 75 {at: 0.5, expect: 'circle()'}, 76 {at: 1, expect: 'circle()'}, 77 {at: 1.5, expect: 'circle()'}, 78 ]); 79 80 test_interpolation({ 81 property: 'offset-path', 82 behavior: 'allow-discrete', 83 from: 'inherit', 84 to: 'circle()', 85 }, [ 86 {at: -0.1, expect: 'circle(farthest-side)'}, 87 {at: 0, expect: 'circle(farthest-side)'}, 88 {at: 0.4, expect: 'circle(farthest-side)'}, 89 {at: 0.5, expect: 'circle()'}, 90 {at: 1, expect: 'circle()'}, 91 {at: 1.5, expect: 'circle()'}, 92 ]); 93 94 test_interpolation({ 95 property: 'offset-path', 96 behavior: 'allow-discrete', 97 from: 'unset', 98 to: 'inset(10%)', 99 }, [ 100 {at: -0.1, expect: 'none'}, 101 {at: 0, expect: 'none'}, 102 {at: 0.4, expect: 'none'}, 103 {at: 0.5, expect: 'inset(10%)'}, 104 {at: 1, expect: 'inset(10%)'}, 105 {at: 1.5, expect: 'inset(10%)'}, 106 ]); 107 108 test_interpolation({ 109 property: 'offset-path', 110 behavior: 'allow-discrete', 111 from: 'ray(0deg)', 112 to: 'url("abc")', 113 }, [ 114 {at: -0.1, expect: 'ray(0deg)'}, 115 {at: 0, expect: 'ray(0deg)'}, 116 {at: 0.4, expect: 'ray(0deg)'}, 117 {at: 0.5, expect: 'url("abc")'}, 118 {at: 1, expect: 'url("abc")'}, 119 {at: 1.5, expect: 'url("abc")'}, 120 ]); 121 122 </script> 123 </body> 124 </html>