mask-position-interpolation.html (4523B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <meta charset="UTF-8"> 4 <title>mask-position-interpolation</title> 5 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-position"> 6 <meta name="assert" content="mask-position 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 <style> 13 .container { 14 display: inline-block; 15 border: 2px solid black; 16 } 17 .parent { 18 mask-position: 30px 10px; 19 } 20 .target { 21 width: 120px; 22 height: 120px; 23 mask-position: 10px 30px; 24 } 25 </style> 26 27 <body> 28 <template id="target-template"> 29 <div class="container"> 30 <div class="target"></div> 31 </div> 32 </template> 33 <script> 34 // neutral 35 test_interpolation({ 36 property: 'mask-position', 37 from: neutralKeyframe, 38 to: '20px 20px', 39 }, [ 40 {at: -0.25, expect: '7.5px 32.5px'}, 41 {at: 0, expect: '10px 30px'}, 42 {at: 0.25, expect: '12.5px 27.5px'}, 43 {at: 0.5, expect: '15px 25px'}, 44 {at: 0.75, expect: '17.5px 22.5px'}, 45 {at: 1, expect: '20px 20px'}, 46 {at: 1.25, expect: '22.5px 17.5px'}, 47 ]); 48 49 // initial 50 test_interpolation({ 51 property: 'mask-position', 52 from: 'initial', 53 to: '20px 20px', 54 }, [ 55 {at: -0.25, expect: 'calc(0% - 5px) calc(0% - 5px)'}, 56 {at: 0, expect: '0% 0%'}, 57 {at: 0.25, expect: 'calc(0% + 5px) calc(0% + 5px)'}, 58 {at: 0.5, expect: 'calc(0% + 10px) calc(0% + 10px)'}, 59 {at: 0.75, expect: 'calc(0% + 15px) calc(0% + 15px)'}, 60 {at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'}, 61 {at: 1.25, expect:'calc(0% + 25px) calc(0% + 25px)'}, 62 ]); 63 64 // inherit 65 test_interpolation({ 66 property: 'mask-position', 67 from: 'inherit', 68 to: '20px 20px', 69 }, [ 70 {at: -0.25, expect: '32.5px 7.5px'}, 71 {at: 0, expect: '30px 10px'}, 72 {at: 0.25, expect: '27.5px 12.5px'}, 73 {at: 0.5, expect: '25px 15px'}, 74 {at: 0.75, expect: '22.5px 17.5px'}, 75 {at: 1, expect: '20px 20px'}, 76 {at: 1.25, expect: '17.5px 22.5px'}, 77 ]); 78 79 // unset 80 test_interpolation({ 81 property: 'mask-position', 82 from: 'unset', 83 to: '20px 20px', 84 }, [ 85 {at: -0.25, expect: 'calc(0% - 5px) calc(0% - 5px)'}, 86 {at: 0, expect: '0% 0%'}, 87 {at: 0.25, expect: 'calc(0% + 5px) calc(0% + 5px)'}, 88 {at: 0.5, expect: 'calc(0% + 10px) calc(0% + 10px)'}, 89 {at: 0.75, expect: 'calc(0% + 15px) calc(0% + 15px)'}, 90 {at: 1, expect: 'calc(0% + 20px) calc(0% + 20px)'}, 91 {at: 1.25, expect:'calc(0% + 25px) calc(0% + 25px)'}, 92 ]); 93 94 // Test equal number of position values as background images. 95 test_interpolation({ 96 property: 'mask-position', 97 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', 98 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', 99 }, [ 100 {at: -0.25, expect: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, 101 {at: 0, expect: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 102 {at: 0.25, expect: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 103 {at: 0.5, expect: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 104 {at: 0.75, expect: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 105 {at: 1, expect: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 106 {at: 1.25, expect: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 107 ]); 108 109 // Test single position value repeated over background images. 110 test_interpolation({ 111 property: 'mask-position', 112 from: 'top 0px left 0px', 113 to: 'left 80px top 80px', 114 }, [ 115 {at: -0.25, expect: '-20px -20px'}, 116 {at: 0, expect: ' 0px 0px'}, 117 {at: 0.25, expect: ' 20px 20px'}, 118 {at: 0.5, expect: ' 40px 40px'}, 119 {at: 0.75, expect: ' 60px 60px'}, 120 {at: 1, expect: ' 80px 80px'}, 121 {at: 1.25, expect: '100px 100px'}, 122 ]); 123 124 // Test mismatched numbers of position values. 125 test_interpolation({ 126 property: 'mask-position', 127 from: '0px 0px, 80px 0px', 128 to: '40px 40px, 80px 80px, 0px 80px', 129 }, [ 130 {at: -0.25, expect: 131 '-10px -10px, 80px -20px, 0px -20px, 90px -10px, -20px -20px, 100px -20px'}, 132 {at: 0, expect: 133 ' 0px 0px, 80px 0px, 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, 134 {at: 0.25, expect: 135 ' 10px 10px, 80px 20px, 0px 20px, 70px 10px, 20px 20px, 60px 20px'}, 136 {at: 0.5, expect: 137 ' 20px 20px, 80px 40px, 0px 40px, 60px 20px, 40px 40px, 40px 40px'}, 138 {at: 0.75, expect: 139 ' 30px 30px, 80px 60px, 0px 60px, 50px 30px, 60px 60px, 20px 60px'}, 140 {at: 1, expect: 141 ' 40px 40px, 80px 80px, 0px 80px, 40px 40px, 80px 80px, 0px 80px'}, 142 {at: 1.25, expect: 143 ' 50px 50px, 80px 100px, 0px 100px, 30px 50px, 100px 100px, -20px 100px'}, 144 ]); 145 </script> 146 </body>