offset-anchor-interpolation.html (3734B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>offset-anchor 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-anchor-property"> 8 <meta name="assert" content="offset-anchor supports <position> 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 <style> 13 .parent { 14 offset-anchor: 30px 10px; 15 } 16 .target { 17 offset-anchor: 10px 30px; 18 } 19 </style> 20 </head> 21 <body> 22 <script> 23 test_interpolation({ 24 property: 'offset-anchor', 25 from: '220px 240px', 26 to: '300px 400px', 27 }, [ 28 {at: -1, expect: '140px 80px'}, 29 {at: 0, expect: '220px 240px'}, 30 {at: 0.125, expect: '230px 260px'}, 31 {at: 0.875, expect: '290px 380px'}, 32 {at: 1, expect: '300px 400px'}, 33 {at: 2, expect: '380px 560px'} 34 ]); 35 36 test_interpolation({ 37 property: 'offset-anchor', 38 from: 'left 480px top 400px', 39 to: 'right -140% bottom -60%', 40 }, [ 41 {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%)'}, 42 {at: 0, expect: 'left calc(0% + 480px) top calc(0% + 400px)'}, 43 {at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%)'}, 44 {at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px)'}, 45 {at: 1, expect: 'right -140% bottom -60%'}, 46 {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px)'} 47 ]); 48 49 test_interpolation({ 50 property: 'offset-anchor', 51 from: 'left top', 52 to: 'left 8px bottom 20%', 53 }, [ 54 {at: -1, expect: 'calc(0% - 8px) -80%'}, 55 {at: 0, expect: 'left top'}, 56 {at: 0.125, expect: 'calc(0% + 1px) 10%'}, 57 {at: 0.875, expect: 'calc(0% + 7px) 70%'}, 58 {at: 1, expect: 'left calc(0% + 8px) bottom 20%'}, 59 {at: 2, expect: 'calc(0% + 16px) 160%'} 60 ]); 61 62 test_no_interpolation({ 63 property: 'offset-anchor', 64 from: 'right 10px top 20%', 65 to: 'auto' 66 }); 67 68 test_interpolation({ 69 property: 'offset-anchor', 70 from: neutralKeyframe, 71 to: '20px 20px', 72 }, [ 73 {at: -0.3, expect: '7px 33px'}, 74 {at: 0, expect: '10px 30px'}, 75 {at: 0.3, expect: '13px 27px'}, 76 {at: 0.6, expect: '16px 24px'}, 77 {at: 1, expect: '20px 20px'}, 78 {at: 1.5, expect: '25px 15px'}, 79 ]); 80 81 test_no_interpolation({ 82 property: 'offset-anchor', 83 from: 'initial', 84 to: '60% 40%', 85 }); 86 87 test_interpolation({ 88 property: 'offset-anchor', 89 from: 'inherit', 90 to: '20px 20px', 91 }, [ 92 {at: -0.3, expect: '33px 7px'}, 93 {at: 0, expect: '30px 10px'}, 94 {at: 0.3, expect: '27px 13px'}, 95 {at: 0.6, expect: '24px 16px'}, 96 {at: 1, expect: '20px 20px'}, 97 {at: 1.5, expect: '15px 25px'}, 98 ]); 99 100 test_no_interpolation({ 101 property: 'offset-anchor', 102 from: 'unset', 103 to: '50% 10px', 104 }); 105 106 test_interpolation({ 107 property: 'offset-anchor', 108 from: '0% 50%', 109 to: '100% 150%' 110 }, [ 111 {at: -0.3, expect: '-30% 20%'}, 112 {at: 0, expect: '0% 50%'}, 113 {at: 0.3, expect: '30% 80%'}, 114 {at: 0.6, expect: '60% 110%'}, 115 {at: 1, expect: '100% 150%'}, 116 {at: 1.5, expect: '150% 200%'} 117 ]); 118 119 test_no_interpolation({ 120 property: 'offset-anchor', 121 from: 'auto', 122 to: '20px 20px', 123 }); 124 </script> 125 </body> 126 </html>