mask-border-width-interpolation.html (5477B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>mask-border-width interpolation</title> 4 <link rel="help" href="https://drafts.fxtf.org/css-masking/#propdef-mask-border-width"> 5 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 6 <meta name="assert" content="mask-border-width supports animation by computed value"> 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 .parent { 14 mask-border-width: 100px; 15 } 16 .target { 17 width: 80px; 18 height: 80px; 19 background-color: black; 20 display: inline-block; 21 border: 10px; 22 mask-border-source: linear-gradient(45deg, red, blue, green); 23 mask-border-width: 10px; 24 } 25 .expected { 26 background-color: green; 27 margin-right: 2px; 28 } 29 </style> 30 31 <body></body> 32 33 <script> 34 test_interpolation({ 35 property: 'mask-border-width', 36 from: neutralKeyframe, 37 to: '20px', 38 }, [ 39 {at: -0.3, expect: '7px'}, 40 {at: 0, expect: '10px'}, 41 {at: 0.3, expect: '13px'}, 42 {at: 0.6, expect: '16px'}, 43 {at: 1, expect: '20px'}, 44 {at: 1.5, expect: '25px'}, 45 {at: 5, expect: '60px'}, 46 {at: 10, expect: '110px'}, 47 ]); 48 test_no_interpolation({ 49 property: 'mask-border-width', 50 from: 'initial', 51 to: '20px', 52 }); 53 test_interpolation({ 54 property: 'mask-border-width', 55 from: 'inherit', 56 to: '20px', 57 }, [ 58 {at: -0.3, expect: '124px'}, 59 {at: 0, expect: '100px'}, 60 {at: 0.3, expect: '76px'}, 61 {at: 0.6, expect: '52px'}, 62 {at: 1, expect: '20px'}, 63 {at: 1.5, expect: '0px'}, 64 {at: 5, expect: '0px'}, 65 {at: 10, expect: '0px'}, 66 ]); 67 test_no_interpolation({ 68 property: 'mask-border-width', 69 from: 'unset', 70 to: '20px', 71 }); 72 test_interpolation({ 73 property: 'mask-border-width', 74 from: '0px', 75 to: '20px' 76 }, [ 77 {at: -0.3, expect: '0px'}, // CSS mask-border-width can't be negative. 78 {at: 0, expect: '0px'}, 79 {at: 0.3, expect: '6px'}, 80 {at: 0.6, expect: '12px'}, 81 {at: 1, expect: '20px'}, 82 {at: 1.5, expect: '30px'}, 83 {at: 5, expect: '100px'}, 84 {at: 10, expect: '200px'} 85 ]); 86 test_interpolation({ 87 property: 'mask-border-width', 88 from: '0%', 89 to: '20%' 90 }, [ 91 {at: -0.3, expect: '0%'}, // CSS mask-border-width can't be negative. 92 {at: 0, expect: '0%'}, 93 {at: 0.3, expect: '6%'}, 94 {at: 0.6, expect: '12%'}, 95 {at: 1, expect: '20%'}, 96 {at: 1.5, expect: '30%'}, 97 {at: 5, expect: '100%'}, 98 {at: 10, expect: '200%'} 99 ]); 100 test_interpolation({ 101 property: 'mask-border-width', 102 from: '0', 103 to: '20' 104 }, [ 105 {at: -0.3, expect: '0'}, // CSS mask-border-width can't be negative. 106 {at: 0, expect: '0'}, 107 {at: 0.3, expect: '6'}, 108 {at: 0.6, expect: '12'}, 109 {at: 1, expect: '20'}, 110 {at: 1.5, expect: '30'}, 111 {at: 5, expect: '100'}, 112 {at: 10, expect: '200'} 113 ]); 114 test_interpolation({ 115 property: 'mask-border-width', 116 from: '10px 20% 30 40px', 117 to: '80px 70% 60 50px' 118 }, [ 119 {at: -0.3, expect: '0px 5% 21 37px'}, // CSS mask-border-width can't be negative. 120 {at: 0, expect: '10px 20% 30 40px'}, 121 {at: 0.3, expect: '31px 35% 39 43px'}, 122 {at: 0.6, expect: '52px 50% 48 46px'}, 123 {at: 1, expect: '80px 70% 60 50px'}, 124 {at: 1.5, expect: '115px 95% 75 55px'}, 125 {at: 5, expect: '360px 270% 180 90px'}, 126 {at: 10, expect: '710px 520% 330 140px'} 127 ]); 128 test_interpolation({ 129 property: 'mask-border-width', 130 from: '10%', 131 to: '20px' 132 }, [ 133 // Percentages are relative to the size of the border image area, which is 120px. 134 {at: -0.3, expect: 'calc(13% + -6px)'}, // Should be parsed as 16px - 6px = 10px 135 {at: 0, expect: '10%'}, // Should be parsed as 12px 136 {at: 0.3, expect: 'calc(7% + 6px)'}, // Should be parsed as 8px + 6px = 14px 137 {at: 0.6, expect: 'calc(4% + 12px)'}, // Should be parsed as 5px + 12px = 17px 138 {at: 1, expect: 'calc(0% + 20px)'}, 139 {at: 1.5, expect: 'calc(-5% + 30px)'}, // Should be parsed as -6px + 30px = 24px 140 ]); 141 test_interpolation({ 142 property: 'mask-border-width', 143 from: '10px', 144 to: '20%' 145 }, [ 146 // Percentages are relative to the size of the border image area, which is 120px. 147 {at: -0.3, expect: 'calc(13px + -6%)'}, // Should be parsed as 13px - 7px = 6px 148 {at: 0, expect: 'calc(0% + 10px)'}, 149 {at: 0.3, expect: 'calc(7px + 6%)'}, // Should be parsed as 7px + 7px = 14px 150 {at: 0.6, expect: 'calc(4px + 12%)'}, // Should be parsed as 4px + 14px = 18px 151 {at: 1, expect: '20%'}, // Should be parsed as 24px 152 {at: 1.5, expect: 'calc(-5px + 30%)'}, // Should be parsed as -5px + 36px = 31px 153 ]); 154 155 test_interpolation({ 156 property: 'mask-border-width', 157 from: '10px auto auto 20', 158 to: '110px auto auto 120' 159 }, [ 160 {at: -0.3, expect: ' 0px auto auto 0'}, 161 {at: 0, expect: ' 10px auto auto 20'}, 162 {at: 0.3, expect: ' 40px auto auto 50'}, 163 {at: 0.6, expect: ' 70px auto auto 80'}, 164 {at: 1, expect: '110px auto auto 120'}, 165 {at: 1.5, expect: '160px auto auto 170'}, 166 ]); 167 168 test_no_interpolation({ 169 property: 'mask-border-width', 170 from: '10px auto auto 20', 171 to: '110px auto 120 auto' 172 }); 173 test_no_interpolation({ 174 property: 'mask-border-width', 175 from: '10px', 176 to: '20' 177 }); 178 test_no_interpolation({ 179 property: 'mask-border-width', 180 from: '10', 181 to: '20px' 182 }); 183 test_no_interpolation({ 184 property: 'mask-border-width', 185 from: '10%', 186 to: '20' 187 }); 188 test_no_interpolation({ 189 property: 'mask-border-width', 190 from: '10', 191 to: '20%' 192 }); 193 </script>