box-shadow-interpolation.html (8518B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow"> 4 <meta name="test" content="box-shadow supports animation"> 5 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 <style> 11 .parent { 12 box-shadow: 30px 10px 30px 10px black; 13 } 14 .target { 15 display: inline-block; 16 width: 60px; 17 height: 60px; 18 font-size: 3px; 19 border: 2px solid; 20 margin-right: 20px; 21 margin-bottom: 30px; 22 color: green; 23 box-shadow: 10px 30px 10px 30px black; 24 } 25 .expected { 26 margin-right: 40px; 27 } 28 </style> 29 <body> 30 <script> 31 test_interpolation({ 32 property: 'box-shadow', 33 from: neutralKeyframe, 34 to: '20px 20px 20px 20px black', 35 }, [ 36 {at: -0.3, expect: 'rgb(0, 0, 0) 7px 33px 7px 33px'}, 37 {at: 0, expect: 'rgb(0, 0, 0) 10px 30px 10px 30px'}, 38 {at: 0.3, expect: 'rgb(0, 0, 0) 13px 27px 13px 27px'}, 39 {at: 0.6, expect: 'rgb(0, 0, 0) 16px 24px 16px 24px'}, 40 {at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'}, 41 {at: 1.5, expect: 'rgb(0, 0, 0) 25px 15px 25px 15px'}, 42 ]); 43 44 test_interpolation({ 45 property: 'box-shadow', 46 from: 'initial', 47 to: '20px 20px 20px 20px black', 48 }, [ 49 {at: -0.3, expect: 'rgba(0, 0, 0, 0) -6px -6px 0px -6px'}, 50 {at: 0, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px'}, 51 {at: 0.3, expect: 'rgba(0, 0, 0, 0.3) 6px 6px 6px 6px'}, 52 {at: 0.6, expect: 'rgba(0, 0, 0, 0.6) 12px 12px 12px 12px'}, 53 {at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'}, 54 {at: 1.5, expect: 'rgb(0, 0, 0) 30px 30px 30px 30px'}, 55 ]); 56 57 test_interpolation({ 58 property: 'box-shadow', 59 from: 'inherit', 60 to: '20px 20px 20px 20px black', 61 }, [ 62 {at: -0.3, expect: 'rgb(0, 0, 0) 33px 7px 33px 7px'}, 63 {at: 0, expect: 'rgb(0, 0, 0) 30px 10px 30px 10px'}, 64 {at: 0.3, expect: 'rgb(0, 0, 0) 27px 13px 27px 13px'}, 65 {at: 0.6, expect: 'rgb(0, 0, 0) 24px 16px 24px 16px'}, 66 {at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'}, 67 {at: 1.5, expect: 'rgb(0, 0, 0) 15px 25px 15px 25px'}, 68 ]); 69 70 test_interpolation({ 71 property: 'box-shadow', 72 from: 'unset', 73 to: '20px 20px 20px 20px black', 74 }, [ 75 {at: -0.3, expect: 'rgba(0, 0, 0, 0) -6px -6px 0px -6px'}, 76 {at: 0, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px'}, 77 {at: 0.3, expect: 'rgba(0, 0, 0, 0.3) 6px 6px 6px 6px'}, 78 {at: 0.6, expect: 'rgba(0, 0, 0, 0.6) 12px 12px 12px 12px'}, 79 {at: 1, expect: 'rgb(0, 0, 0) 20px 20px 20px 20px'}, 80 {at: 1.5, expect: 'rgb(0, 0, 0) 30px 30px 30px 30px'}, 81 ]); 82 83 // Test basic functionality, and clipping blur at 0 84 test_interpolation({ 85 property: 'box-shadow', 86 from: '15px 10px 5px 6px black', 87 to: '-15px -10px 25px -4px orange', 88 }, [ 89 {at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'}, 90 {at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'}, 91 {at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px'}, 92 {at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px'}, 93 {at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px'}, 94 {at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px'}, 95 ]); 96 97 test_interpolation({ 98 property: 'box-shadow', 99 from: '0px 0px 0px 0px black', 100 to: '1px 1px 1px 1px black', 101 }, [ 102 {at: -0.3, expect: 'rgb(0, 0, 0) -0.3px -0.3px 0px -0.3px'}, 103 {at: 0, expect: 'rgb(0, 0, 0) 0px 0px 0px 0px'}, 104 {at: 0.3, expect: 'rgb(0, 0, 0) 0.3px 0.3px 0.3px 0.3px'}, 105 {at: 0.6, expect: 'rgb(0, 0, 0) 0.6px 0.6px 0.6px 0.6px'}, 106 {at: 1, expect: 'rgb(0, 0, 0) 1px 1px 1px 1px'}, 107 {at: 1.5, expect: 'rgb(0, 0, 0) 1.5px 1.5px 1.5px 1.5px'}, 108 ]); 109 110 // Test with color as first value. 111 test_interpolation({ 112 property: 'box-shadow', 113 from: 'black 15px 10px 5px 6px', 114 to: 'orange -15px -10px 25px -4px', 115 }, [ 116 {at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'}, 117 {at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'}, 118 {at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px'}, 119 {at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px'}, 120 {at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px'}, 121 {at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px'}, 122 ]); 123 124 test_interpolation({ 125 property: 'box-shadow', 126 from: '15px 10px 5px 6px black inset', 127 to: '-15px -10px 25px -4px orange inset', 128 }, [ 129 {at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px inset'}, 130 {at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px inset'}, 131 {at: 0.3, expect: 'rgb(77, 50, 0) 6px 4px 11px 3px inset'}, 132 {at: 0.6, expect: 'rgb(153, 99, 0) -3px -2px 17px 0px inset'}, 133 {at: 1, expect: 'rgb(255, 165, 0) -15px -10px 25px -4px inset'}, 134 {at: 1.5, expect: 'rgb(255, 248, 0) -30px -20px 35px -9px inset'}, 135 ]); 136 137 test_interpolation({ 138 property: 'box-shadow', 139 from: '15px 10px 5px 6px black', 140 to: '-15px -10px 25px -4px', 141 }, [ 142 {at: -0.3, expect: 'rgb(0, 0, 0) 24px 16px 0px 9px'}, 143 {at: 0, expect: 'rgb(0, 0, 0) 15px 10px 5px 6px'}, 144 {at: 0.3, expect: 'rgb(0, 38, 0) 6px 4px 11px 3px'}, 145 {at: 0.6, expect: 'rgb(0, 77, 0) -3px -2px 17px 0px'}, 146 {at: 1, expect: 'rgb(0, 128, 0) -15px -10px 25px -4px'}, 147 {at: 1.5, expect: 'rgb(0, 192, 0) -30px -20px 35px -9px'}, 148 ]); 149 150 test_interpolation({ 151 property: 'box-shadow', 152 from: '10px 10px 10px 10px black', 153 to: '10px 10px 10px 10px currentColor', 154 }, [ 155 {at: -0.3, expect: 'rgb(0, 0, 0) 10px 10px 10px 10px'}, 156 {at: 0, expect: 'rgb(0, 0, 0) 10px 10px 10px 10px'}, 157 {at: 0.3, expect: 'rgb(0, 38, 0) 10px 10px 10px 10px'}, 158 {at: 0.6, expect: 'rgb(0, 77, 0) 10px 10px 10px 10px'}, 159 {at: 1, expect: 'rgb(0, 128, 0) 10px 10px 10px 10px'}, 160 {at: 1.5, expect: 'rgb(0, 192, 0) 10px 10px 10px 10px'}, 161 ]); 162 163 // Test padding shorter lists 164 test_interpolation({ 165 property: 'box-shadow', 166 from: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 10em #008000', 167 to: 'none', 168 }, [ 169 {at: -0.3, expect: 'rgba(255, 255, 0, 0.65) 13px 26px 0px 0px, rgb(0, 166, 0) 6.5px 39px 0px 0px inset'}, 170 {at: 0, expect: 'rgba(255, 255, 0, 0.5) 10px 20px 0px 0px, rgb(0, 128, 0) 5px 30px 0px 0px inset'}, 171 {at: 0.3, expect: 'rgba(255, 255, 0, 0.353) 7px 14px 0px 0px, rgba(0, 128, 0, 0.7) 3.5px 21px 0px 0px inset'}, 172 {at: 0.6, expect: 'rgba(255, 255, 0, 0.2) 4px 8px 0px 0px, rgba(0, 128, 0, 0.4) 2px 12px 0px 0px inset'}, 173 {at: 1, expect: 'rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset'}, 174 {at: 1.5, expect: 'rgba(0, 0, 0, 0) -5px -10px 0px 0px, rgba(0, 0, 0, 0) -2.5px -15px 0px 0px inset'}, 175 ]); 176 177 // Test calc with comparison functions 178 test_interpolation({ 179 property: 'box-shadow', 180 from: 'inset 0 0 0 0 black', 181 to: 'inset 0 0 0 calc(max(10em, 20px) / 2) black', 182 }, [ 183 {at: -0.3, expect: 'rgb(0, 0, 0) 0px 0px 0px -4.5px inset'}, 184 {at: 0, expect: 'rgb(0, 0, 0) 0px 0px 0px 0px inset'}, 185 {at: 0.3, expect: 'rgb(0, 0, 0) 0px 0px 0px 4.5px inset'}, 186 {at: 0.6, expect: 'rgb(0, 0, 0) 0px 0px 0px 9px inset'}, 187 {at: 1, expect: 'rgb(0, 0, 0) 0px 0px 0px 15px inset'}, 188 {at: 1.5, expect: 'rgb(0, 0, 0) 0px 0px 0px 22.5px inset'}, 189 ]); 190 191 // Test unmatched inset 192 test_no_interpolation({ 193 property: 'box-shadow', 194 from: '10px 20px yellow, 5px 10px green', 195 to: 'inset 5px 10px green, 15px 20px blue' 196 }); 197 198 // Test CSS color 4 color types 199 test_interpolation({ 200 property: 'box-shadow', 201 from: '10px 10px 10px 10px rgb(0 0 0)', 202 to: '10px 10px 10px 10px color(srgb 1 1 1)', 203 }, [ 204 {at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'}, 205 {at: 0, expect: '10px 10px 10px 10px oklab(0 0 0)'}, 206 {at: 0.3, expect: '10px 10px 10px 10px oklab(0.3 0 0)'}, 207 {at: 0.6, expect: '10px 10px 10px 10px oklab(0.6 0 0)'}, 208 {at: 1, expect: '10px 10px 10px 10px oklab(1 0 0)'}, 209 {at: 1.5, expect: '10px 10px 10px 10px oklab(1 0 0)'}, 210 ]); 211 212 test_interpolation({ 213 property: 'box-shadow', 214 from: '10px 10px 10px 10px color(srgb 0 0 0)', 215 to: '10px 10px 10px 10px rgb(255 255 255)', 216 }, [ 217 {at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'}, 218 {at: 0, expect: '10px 10px 10px 10px oklab(0 0 0)'}, 219 {at: 0.3, expect: '10px 10px 10px 10px oklab(0.3 0 0)'}, 220 {at: 0.6, expect: '10px 10px 10px 10px oklab(0.6 0 0)'}, 221 {at: 1, expect: '10px 10px 10px 10px oklab(1 0 0)'}, 222 {at: 1.5, expect: '10px 10px 10px 10px oklab(1 0 0)'}, 223 ]); 224 225 test_interpolation({ 226 property: 'box-shadow', 227 from: '10px 10px 10px 10px color(srgb 0 0 0)', 228 to: '10px 10px 10px 10px color(srgb 1 1 1)', 229 }, [ 230 {at: -0.3, expect: '10px 10px 10px 10px oklab(0 0 0)'}, 231 {at: 0, expect: '10px 10px 10px 10px oklab(0 0 0)'}, 232 {at: 0.3, expect: '10px 10px 10px 10px oklab(0.3 0 0)'}, 233 {at: 0.6, expect: '10px 10px 10px 10px oklab(0.6 0 0)'}, 234 {at: 1, expect: '10px 10px 10px 10px oklab(1 0 0)'}, 235 {at: 1.5, expect: '10px 10px 10px 10px oklab(1 0 0)'}, 236 ]); 237 </script> 238 </body>