offset-path-coord-box-interpolation.html (4395B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Motion Path: offset-path coord-box interpolation with allow-discrete</title> 4 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> 5 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/support/interpolation-testcommon.js"></script> 9 10 <body> 11 <script> 12 // Same shape(), different coord-box: should switch discretely at 0.5 (no interpolation of shape params) 13 test_interpolation({ 14 property: 'offset-path', 15 behavior: 'allow-discrete', 16 from: 'shape(from 0px 0px, line to 10px 10px) border-box', 17 to: 'shape(from 1px 1px, line to 20px 20px) content-box', 18 }, [ 19 { at: -0.1, expect: 'shape(from 0px 0px, line to 10px 10px)' }, 20 { at: 0, expect: 'shape(from 0px 0px, line to 10px 10px)' }, 21 { at: 0.4, expect: 'shape(from 0px 0px, line to 10px 10px)' }, 22 { at: 0.5, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' }, 23 { at: 1, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' }, 24 { at: 1.5, expect: 'shape(from 1px 1px, line to 20px 20px) content-box' }, 25 ]); 26 27 // Omitted coord-box defaults to border-box. 28 test_interpolation({ 29 property: 'offset-path', 30 behavior: 'allow-discrete', 31 from: 'shape(from 0px 0px, line to 10px 10px)', // defaults to border-box 32 to: 'shape(from 0px 0px, line to 20px 20px) padding-box', 33 }, [ 34 { at: -0.1, expect: 'shape(from 0px 0px, line to 10px 10px)' }, 35 { at: 0, expect: 'shape(from 0px 0px, line to 10px 10px)' }, 36 { at: 0.4, expect: 'shape(from 0px 0px, line to 10px 10px)' }, 37 { at: 0.5, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' }, 38 { at: 1, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' }, 39 { at: 1.5, expect: 'shape(from 0px 0px, line to 20px 20px) padding-box' }, 40 ]); 41 42 // Same shape(), same coord-box. 43 test_interpolation({ 44 property: 'offset-path', 45 behavior: 'allow-discrete', 46 from: 'shape(from 0px 0px, line to 10px 10px) view-box', 47 to: 'shape(from 10px 10px, line to 20px 20px) view-box', 48 }, [ 49 { at: -0.1, expect: 'shape(from -1px -1px, line to 9px 9px) view-box' }, 50 { at: 0, expect: 'shape(from 0px 0px, line to 10px 10px) view-box' }, 51 { at: 0.4, expect: 'shape(from 4px 4px, line to 14px 14px) view-box' }, 52 { at: 0.5, expect: 'shape(from 5px 5px, line to 15px 15px) view-box' }, 53 { at: 1, expect: 'shape(from 10px 10px, line to 20px 20px) view-box' }, 54 { at: 1.5, expect: 'shape(from 15px 15px, line to 25px 25px) view-box' }, 55 ]); 56 57 // circle(), different coord-box should switch discretely. 58 test_interpolation({ 59 property: 'offset-path', 60 behavior: 'allow-discrete', 61 from: 'circle(10px) border-box', 62 to: 'circle(30px) content-box', 63 }, [ 64 { at: -0.1, expect: 'circle(10px)' }, 65 { at: 0, expect: 'circle(10px)' }, 66 { at: 0.4, expect: 'circle(10px)' }, 67 { at: 0.5, expect: 'circle(30px) content-box' }, 68 { at: 1, expect: 'circle(30px) content-box' }, 69 { at: 1.5, expect: 'circle(30px) content-box' }, 70 ]); 71 72 // circle(), omitted coord-box defaults to border-box. 73 test_interpolation({ 74 property: 'offset-path', 75 behavior: 'allow-discrete', 76 from: 'circle(20px)', 77 to: 'circle(20px) padding-box', 78 }, [ 79 { at: -0.1, expect: 'circle(20px)' }, 80 { at: 0, expect: 'circle(20px)' }, 81 { at: 0.4, expect: 'circle(20px)' }, 82 { at: 0.5, expect: 'circle(20px) padding-box' }, 83 { at: 1, expect: 'circle(20px) padding-box' }, 84 { at: 1.5, expect: 'circle(20px) padding-box' }, 85 ]); 86 87 // circle(), same coord-box should interpolate radius smoothly. 88 test_interpolation({ 89 property: 'offset-path', 90 behavior: 'allow-discrete', 91 from: 'circle(10px) view-box', 92 to: 'circle(30px) view-box', 93 }, [ 94 { at: -0.1, expect: 'circle(8px) view-box' }, 95 { at: 0, expect: 'circle(10px) view-box' }, 96 { at: 0.4, expect: 'circle(18px) view-box' }, 97 { at: 0.5, expect: 'circle(20px) view-box' }, 98 { at: 1, expect: 'circle(30px) view-box' }, 99 { at: 1.5, expect: 'circle(40px) view-box' }, 100 ]); 101 </script> 102 </body>