| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <meta charset="UTF-8"> | 2 <meta charset="UTF-8"> |
| 3 <style> | 3 <style> |
| 4 .parent { | 4 .parent { |
| 5 -webkit-filter: hue-rotate(30deg); | 5 backdrop-filter: hue-rotate(30deg); |
| 6 } | 6 } |
| 7 .target { | 7 .target { |
| 8 display: inline-block; | 8 display: inline-block; |
| 9 width: 50px; | 9 width: 50px; |
| 10 height: 50px; | 10 height: 50px; |
| 11 background-color: green; | 11 background-color: green; |
| 12 color: white; | 12 color: white; |
| 13 margin-right: 2px; | 13 margin-right: 2px; |
| 14 -webkit-filter: hue-rotate(10deg); | 14 backdrop-filter: hue-rotate(10deg); |
| 15 } | 15 } |
| 16 .expected { | 16 .expected { |
| 17 margin-right: 20px; | 17 margin-right: 20px; |
| 18 } | 18 } |
| 19 .test { | 19 .test { |
| 20 padding-bottom: 10px; | 20 padding-bottom: 10px; |
| 21 } | 21 } |
| 22 </style> | 22 </style> |
| 23 <body> | 23 <body> |
| 24 <svg style="display:none"> | 24 <svg style="display:none"> |
| 25 <filter id="svgfilter"> | 25 <filter id="svgfilter"> |
| 26 <feGaussianBlur stdDeviation="5"></feGaussianBlur> | 26 <feGaussianBlur stdDeviation="5"></feGaussianBlur> |
| 27 </filter> | 27 </filter> |
| 28 </svg> | 28 </svg> |
| 29 <script src="resources/interpolation-test.js"></script> | 29 <script src="resources/interpolation-test.js"></script> |
| 30 <script> | 30 <script> |
| 31 assertInterpolation({ | 31 assertInterpolation({ |
| 32 property: '-webkit-filter', | 32 property: 'backdrop-filter', |
| 33 from: '', | 33 from: '', |
| 34 to: 'hue-rotate(20deg)', | 34 to: 'hue-rotate(20deg)', |
| 35 }, [ | 35 }, [ |
| 36 {at: -0.5, is: 'hue-rotate(5deg)'}, | 36 {at: -0.5, is: 'hue-rotate(5deg)'}, |
| 37 {at: 0, is: 'hue-rotate(10deg)'}, | 37 {at: 0, is: 'hue-rotate(10deg)'}, |
| 38 {at: 0.3, is: 'hue-rotate(13deg)'}, | 38 {at: 0.3, is: 'hue-rotate(13deg)'}, |
| 39 {at: 0.6, is: 'hue-rotate(16deg)'}, | 39 {at: 0.6, is: 'hue-rotate(16deg)'}, |
| 40 {at: 1, is: 'hue-rotate(20deg)'}, | 40 {at: 1, is: 'hue-rotate(20deg)'}, |
| 41 {at: 1.5, is: 'hue-rotate(25deg)'}, | 41 {at: 1.5, is: 'hue-rotate(25deg)'}, |
| 42 ]); | 42 ]); |
| 43 | 43 |
| 44 assertInterpolation({ | 44 assertInterpolation({ |
| 45 property: '-webkit-filter', | 45 property: 'backdrop-filter', |
| 46 from: 'initial', | 46 from: 'initial', |
| 47 to: 'hue-rotate(20deg)', | 47 to: 'hue-rotate(20deg)', |
| 48 }, [ | 48 }, [ |
| 49 {at: -0.5, is: 'hue-rotate(-10deg)'}, | 49 {at: -0.5, is: 'hue-rotate(-10deg)'}, |
| 50 {at: 0, is: 'none'}, | 50 {at: 0, is: 'none'}, |
| 51 {at: 0.3, is: 'hue-rotate(6deg)'}, | 51 {at: 0.3, is: 'hue-rotate(6deg)'}, |
| 52 {at: 0.6, is: 'hue-rotate(12deg)'}, | 52 {at: 0.6, is: 'hue-rotate(12deg)'}, |
| 53 {at: 1, is: 'hue-rotate(20deg)'}, | 53 {at: 1, is: 'hue-rotate(20deg)'}, |
| 54 {at: 1.5, is: 'hue-rotate(30deg)'}, | 54 {at: 1.5, is: 'hue-rotate(30deg)'}, |
| 55 ]); | 55 ]); |
| 56 | 56 |
| 57 assertInterpolation({ | 57 assertInterpolation({ |
| 58 property: '-webkit-filter', | 58 property: 'backdrop-filter', |
| 59 from: 'inherit', | 59 from: 'inherit', |
| 60 to: 'hue-rotate(20deg)', | 60 to: 'hue-rotate(20deg)', |
| 61 }, [ | 61 }, [ |
| 62 {at: -0.5, is: 'hue-rotate(35deg)'}, | 62 {at: -0.5, is: 'hue-rotate(35deg)'}, |
| 63 {at: 0, is: 'hue-rotate(30deg)'}, | 63 {at: 0, is: 'hue-rotate(30deg)'}, |
| 64 {at: 0.3, is: 'hue-rotate(27deg)'}, | 64 {at: 0.3, is: 'hue-rotate(27deg)'}, |
| 65 {at: 0.6, is: 'hue-rotate(24deg)'}, | 65 {at: 0.6, is: 'hue-rotate(24deg)'}, |
| 66 {at: 1, is: 'hue-rotate(20deg)'}, | 66 {at: 1, is: 'hue-rotate(20deg)'}, |
| 67 {at: 1.5, is: 'hue-rotate(15deg)'}, | 67 {at: 1.5, is: 'hue-rotate(15deg)'}, |
| 68 ]); | 68 ]); |
| 69 | 69 |
| 70 assertInterpolation({ | 70 assertInterpolation({ |
| 71 property: '-webkit-filter', | 71 property: 'backdrop-filter', |
| 72 from: 'unset', | 72 from: 'unset', |
| 73 to: 'hue-rotate(20deg)', | 73 to: 'hue-rotate(20deg)', |
| 74 }, [ | 74 }, [ |
| 75 {at: -0.5, is: 'hue-rotate(-10deg)'}, | 75 {at: -0.5, is: 'hue-rotate(-10deg)'}, |
| 76 {at: 0, is: 'none'}, | 76 {at: 0, is: 'none'}, |
| 77 {at: 0.3, is: 'hue-rotate(6deg)'}, | 77 {at: 0.3, is: 'hue-rotate(6deg)'}, |
| 78 {at: 0.6, is: 'hue-rotate(12deg)'}, | 78 {at: 0.6, is: 'hue-rotate(12deg)'}, |
| 79 {at: 1, is: 'hue-rotate(20deg)'}, | 79 {at: 1, is: 'hue-rotate(20deg)'}, |
| 80 {at: 1.5, is: 'hue-rotate(30deg)'}, | 80 {at: 1.5, is: 'hue-rotate(30deg)'}, |
| 81 ]); | 81 ]); |
| 82 | 82 |
| 83 // Matching lists: | 83 // Matching lists: |
| 84 assertInterpolation({ | 84 assertInterpolation({ |
| 85 property: '-webkit-filter', | 85 property: 'backdrop-filter', |
| 86 from: 'hue-rotate(0deg) blur(6px)', | 86 from: 'hue-rotate(0deg) blur(6px)', |
| 87 to: 'hue-rotate(180deg) blur(10px)' | 87 to: 'hue-rotate(180deg) blur(10px)' |
| 88 }, [ | 88 }, [ |
| 89 {at: -0.5, is: 'hue-rotate(-90deg) blur(4px)'}, | 89 {at: -0.5, is: 'hue-rotate(-90deg) blur(4px)'}, |
| 90 {at: 0, is: 'hue-rotate(0deg) blur(6px)'}, | 90 {at: 0, is: 'hue-rotate(0deg) blur(6px)'}, |
| 91 {at: 0.25, is: 'hue-rotate(45deg) blur(7px)'}, | 91 {at: 0.25, is: 'hue-rotate(45deg) blur(7px)'}, |
| 92 {at: 0.5, is: 'hue-rotate(90deg) blur(8px)'}, | 92 {at: 0.5, is: 'hue-rotate(90deg) blur(8px)'}, |
| 93 {at: 1, is: 'hue-rotate(180deg) blur(10px)'}, | 93 {at: 1, is: 'hue-rotate(180deg) blur(10px)'}, |
| 94 {at: 1.5, is: 'hue-rotate(270deg) blur(12px)'} | 94 {at: 1.5, is: 'hue-rotate(270deg) blur(12px)'} |
| 95 ]); | 95 ]); |
| 96 | 96 |
| 97 // Matching lists with differing units: | 97 // Matching lists with differing units: |
| 98 assertInterpolation({ | 98 assertInterpolation({ |
| 99 property: '-webkit-filter', | 99 property: 'backdrop-filter', |
| 100 from: 'hue-rotate(80deg) blur(6mm)', | 100 from: 'hue-rotate(80deg) blur(6mm)', |
| 101 to: 'hue-rotate(100grad) blur(1cm)' | 101 to: 'hue-rotate(100grad) blur(1cm)' |
| 102 }, [ | 102 }, [ |
| 103 {at: -0.5, is: 'hue-rotate(75deg) blur(4mm)'}, | 103 {at: -0.5, is: 'hue-rotate(75deg) blur(4mm)'}, |
| 104 {at: 0, is: 'hue-rotate(80deg) blur(6mm)'}, | 104 {at: 0, is: 'hue-rotate(80deg) blur(6mm)'}, |
| 105 {at: 0.25, is: 'hue-rotate(82.5deg) blur(7mm)'}, | 105 {at: 0.25, is: 'hue-rotate(82.5deg) blur(7mm)'}, |
| 106 {at: 0.5, is: 'hue-rotate(85deg) blur(8mm)'}, | 106 {at: 0.5, is: 'hue-rotate(85deg) blur(8mm)'}, |
| 107 {at: 1, is: 'hue-rotate(90deg) blur(10mm)'}, | 107 {at: 1, is: 'hue-rotate(90deg) blur(10mm)'}, |
| 108 {at: 1.5, is: 'hue-rotate(95deg) blur(12mm)'} | 108 {at: 1.5, is: 'hue-rotate(95deg) blur(12mm)'} |
| 109 ]); | 109 ]); |
| 110 | 110 |
| 111 // Mismatched lists: | 111 // Mismatched lists: |
| 112 assertNoInterpolation({ | 112 assertNoInterpolation({ |
| 113 property: '-webkit-filter', | 113 property: 'backdrop-filter', |
| 114 from: 'grayscale(0) blur(0px)', | 114 from: 'grayscale(0) blur(0px)', |
| 115 to: 'blur(10px)' | 115 to: 'blur(10px)' |
| 116 }); | 116 }); |
| 117 | 117 |
| 118 // Partially matching lists: | 118 // Partially matching lists: |
| 119 assertInterpolation({ | 119 assertInterpolation({ |
| 120 property: '-webkit-filter', | 120 property: 'backdrop-filter', |
| 121 from: 'blur(6px)', | 121 from: 'blur(6px)', |
| 122 to: 'blur(10px) hue-rotate(180deg)' | 122 to: 'blur(10px) hue-rotate(180deg)' |
| 123 }, [ | 123 }, [ |
| 124 {at: -0.5, is: 'blur(4px) hue-rotate(-90deg)'}, | 124 {at: -0.5, is: 'blur(4px) hue-rotate(-90deg)'}, |
| 125 {at: 0, is: 'blur(6px) hue-rotate(0deg)'}, | 125 {at: 0, is: 'blur(6px) hue-rotate(0deg)'}, |
| 126 {at: 0.25, is: 'blur(7px) hue-rotate(45deg)'}, | 126 {at: 0.25, is: 'blur(7px) hue-rotate(45deg)'}, |
| 127 {at: 0.5, is: 'blur(8px) hue-rotate(90deg)'}, | 127 {at: 0.5, is: 'blur(8px) hue-rotate(90deg)'}, |
| 128 {at: 1, is: 'blur(10px) hue-rotate(180deg)'}, | 128 {at: 1, is: 'blur(10px) hue-rotate(180deg)'}, |
| 129 {at: 1.5, is: 'blur(12px) hue-rotate(270deg)'}, | 129 {at: 1.5, is: 'blur(12px) hue-rotate(270deg)'}, |
| 130 ]); | 130 ]); |
| 131 | 131 |
| 132 assertInterpolation({ | 132 assertInterpolation({ |
| 133 property: '-webkit-filter', | 133 property: 'backdrop-filter', |
| 134 from: 'none', | 134 from: 'none', |
| 135 to: 'hue-rotate(180deg)' | 135 to: 'hue-rotate(180deg)' |
| 136 }, [ | 136 }, [ |
| 137 {at: -0.5, is: 'hue-rotate(-90deg)'}, | 137 {at: -0.5, is: 'hue-rotate(-90deg)'}, |
| 138 {at: 0, is: 'hue-rotate(0deg)'}, | 138 {at: 0, is: 'hue-rotate(0deg)'}, |
| 139 {at: 0.25, is: 'hue-rotate(45deg)'}, | 139 {at: 0.25, is: 'hue-rotate(45deg)'}, |
| 140 {at: 0.5, is: 'hue-rotate(90deg)'}, | 140 {at: 0.5, is: 'hue-rotate(90deg)'}, |
| 141 {at: 1, is: 'hue-rotate(180deg)'}, | 141 {at: 1, is: 'hue-rotate(180deg)'}, |
| 142 {at: 1.5, is: 'hue-rotate(270deg)'}, | 142 {at: 1.5, is: 'hue-rotate(270deg)'}, |
| 143 ]); | 143 ]); |
| 144 | 144 |
| 145 assertInterpolation({ | 145 assertInterpolation({ |
| 146 property: '-webkit-filter', | 146 property: 'backdrop-filter', |
| 147 from: 'hue-rotate(180deg)', | 147 from: 'hue-rotate(180deg)', |
| 148 to: 'none' | 148 to: 'none' |
| 149 }, [ | 149 }, [ |
| 150 {at: -0.5, is: 'hue-rotate(270deg)'}, | 150 {at: -0.5, is: 'hue-rotate(270deg)'}, |
| 151 {at: 0, is: 'hue-rotate(180deg)'}, | 151 {at: 0, is: 'hue-rotate(180deg)'}, |
| 152 {at: 0.25, is: 'hue-rotate(135deg)'}, | 152 {at: 0.25, is: 'hue-rotate(135deg)'}, |
| 153 {at: 0.5, is: 'hue-rotate(90deg)'}, | 153 {at: 0.5, is: 'hue-rotate(90deg)'}, |
| 154 {at: 1, is: 'hue-rotate(0deg)'}, | 154 {at: 1, is: 'hue-rotate(0deg)'}, |
| 155 {at: 1.5, is: 'hue-rotate(-90deg)'}, | 155 {at: 1.5, is: 'hue-rotate(-90deg)'}, |
| 156 ]); | 156 ]); |
| 157 | 157 |
| 158 // Filter functions (tests lacuna and clamping): | 158 // Filter functions (tests lacuna and clamping): |
| 159 assertInterpolation({ | 159 assertInterpolation({ |
| 160 property: '-webkit-filter', | 160 property: 'backdrop-filter', |
| 161 from: 'none', // lacuna is 0px | 161 from: 'none', // lacuna is 0px |
| 162 to: 'blur(10px)' | 162 to: 'blur(10px)' |
| 163 }, [ | 163 }, [ |
| 164 {at: -1, is: 'blur(0px)'}, // Negative values are not allowed. | 164 {at: -1, is: 'blur(0px)'}, // Negative values are not allowed. |
| 165 {at: 0, is: 'blur(0px)'}, | 165 {at: 0, is: 'blur(0px)'}, |
| 166 {at: 0.5, is: 'blur(5px)'}, | 166 {at: 0.5, is: 'blur(5px)'}, |
| 167 {at: 1, is: 'blur(10px)'}, | 167 {at: 1, is: 'blur(10px)'}, |
| 168 {at: 1.5, is: 'blur(15px)'} | 168 {at: 1.5, is: 'blur(15px)'} |
| 169 ]); | 169 ]); |
| 170 | 170 |
| 171 assertInterpolation({ | 171 assertInterpolation({ |
| 172 property: '-webkit-filter', | 172 property: 'backdrop-filter', |
| 173 from: 'brightness(0)', | 173 from: 'brightness(0)', |
| 174 to: 'none' // lacuna is 1 | 174 to: 'none' // lacuna is 1 |
| 175 }, [ | 175 }, [ |
| 176 {at: -1, is: 'brightness(0)'}, // Negative values are not allowed. | 176 {at: -1, is: 'brightness(0)'}, // Negative values are not allowed. |
| 177 {at: 0, is: 'brightness(0)'}, | 177 {at: 0, is: 'brightness(0)'}, |
| 178 {at: 0.5, is: 'brightness(0.5)'}, | 178 {at: 0.5, is: 'brightness(0.5)'}, |
| 179 {at: 1, is: 'brightness(1)'}, | 179 {at: 1, is: 'brightness(1)'}, |
| 180 {at: 1.5, is: 'brightness(1.5)'} | 180 {at: 1.5, is: 'brightness(1.5)'} |
| 181 ]); | 181 ]); |
| 182 | 182 |
| 183 assertInterpolation({ | 183 assertInterpolation({ |
| 184 property: '-webkit-filter', | 184 property: 'backdrop-filter', |
| 185 from: 'contrast(0)', | 185 from: 'contrast(0)', |
| 186 to: 'none' // lacuna is 1 | 186 to: 'none' // lacuna is 1 |
| 187 }, [ | 187 }, [ |
| 188 {at: -1, is: 'contrast(0)'}, // Negative values are not allowed. | 188 {at: -1, is: 'contrast(0)'}, // Negative values are not allowed. |
| 189 {at: 0, is: 'contrast(0)'}, | 189 {at: 0, is: 'contrast(0)'}, |
| 190 {at: 0.5, is: 'contrast(0.5)'}, | 190 {at: 0.5, is: 'contrast(0.5)'}, |
| 191 {at: 1, is: 'contrast(1)'}, | 191 {at: 1, is: 'contrast(1)'}, |
| 192 {at: 1.5, is: 'contrast(1.5)'} | 192 {at: 1.5, is: 'contrast(1.5)'} |
| 193 ]); | 193 ]); |
| 194 | 194 |
| 195 assertInterpolation({ | 195 assertInterpolation({ |
| 196 property: '-webkit-filter', | 196 property: 'backdrop-filter', |
| 197 from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent) | 197 from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent) |
| 198 to: 'drop-shadow(20px 10px green)' | 198 to: 'drop-shadow(20px 10px green)' |
| 199 }, [ | 199 }, [ |
| 200 {at: -1, is: 'drop-shadow(-20px -10px transparent)'}, | 200 {at: -1, is: 'drop-shadow(-20px -10px transparent)'}, |
| 201 {at: 0, is: 'none'}, | 201 {at: 0, is: 'none'}, |
| 202 {at: 0.5, is: 'drop-shadow(10px 5px rgba(0, 127, 0, 0.5))'}, | 202 {at: 0.5, is: 'drop-shadow(10px 5px rgba(0, 127, 0, 0.5))'}, |
| 203 {at: 1, is: 'drop-shadow(20px 10px green)'}, | 203 {at: 1, is: 'drop-shadow(20px 10px green)'}, |
| 204 {at: 1.5, is: 'drop-shadow(30px 15px #00C000)'} | 204 {at: 1.5, is: 'drop-shadow(30px 15px #00C000)'} |
| 205 ]); | 205 ]); |
| 206 | 206 |
| 207 assertInterpolation({ | 207 assertInterpolation({ |
| 208 property: '-webkit-filter', | 208 property: 'backdrop-filter', |
| 209 from: 'drop-shadow(0px 0px 0px currentcolor)', | 209 from: 'drop-shadow(0px 0px 0px currentcolor)', |
| 210 to: 'drop-shadow(20px 10px green)' | 210 to: 'drop-shadow(20px 10px green)' |
| 211 }, [ | 211 }, [ |
| 212 {at: -1, is: 'drop-shadow(-20px -10px white)'}, | 212 {at: -1, is: 'drop-shadow(-20px -10px white)'}, |
| 213 {at: 0, is: 'drop-shadow(0px 0px 0px currentcolor)'}, | 213 {at: 0, is: 'drop-shadow(0px 0px 0px currentcolor)'}, |
| 214 {at: 0.5, is: 'drop-shadow(10px 5px #80C080)'}, | 214 {at: 0.5, is: 'drop-shadow(10px 5px #80C080)'}, |
| 215 {at: 1, is: 'drop-shadow(20px 10px green)'}, | 215 {at: 1, is: 'drop-shadow(20px 10px green)'}, |
| 216 {at: 1.5, is: 'drop-shadow(30px 15px #004100)'} | 216 {at: 1.5, is: 'drop-shadow(30px 15px #004100)'} |
| 217 ]); | 217 ]); |
| 218 | 218 |
| 219 assertInterpolation({ | 219 assertInterpolation({ |
| 220 property: '-webkit-filter', | 220 property: 'backdrop-filter', |
| 221 from: 'none', // lacuna is 0 | 221 from: 'none', // lacuna is 0 |
| 222 to: 'grayscale(1)' | 222 to: 'grayscale(1)' |
| 223 }, [ | 223 }, [ |
| 224 {at: -1, is: 'grayscale(0)'}, // Negative values are not allowed. | 224 {at: -1, is: 'grayscale(0)'}, // Negative values are not allowed. |
| 225 {at: 0, is: 'grayscale(0)'}, | 225 {at: 0, is: 'grayscale(0)'}, |
| 226 {at: 0.5, is: 'grayscale(0.5)'}, | 226 {at: 0.5, is: 'grayscale(0.5)'}, |
| 227 {at: 1, is: 'grayscale(1)'}, | 227 {at: 1, is: 'grayscale(1)'}, |
| 228 {at: 1.5, is: 'grayscale(1)'} // Should clamp values to 1. | 228 {at: 1.5, is: 'grayscale(1)'} // Should clamp values to 1. |
| 229 ]); | 229 ]); |
| 230 | 230 |
| 231 assertInterpolation({ | 231 assertInterpolation({ |
| 232 property: '-webkit-filter', | 232 property: 'backdrop-filter', |
| 233 from: 'none', // lacuna is 0deg | 233 from: 'none', // lacuna is 0deg |
| 234 to: 'hue-rotate(360deg)' | 234 to: 'hue-rotate(360deg)' |
| 235 }, [ | 235 }, [ |
| 236 {at: -1, is: 'hue-rotate(-360deg)'}, | 236 {at: -1, is: 'hue-rotate(-360deg)'}, |
| 237 {at: 0, is: 'hue-rotate(0deg)'}, | 237 {at: 0, is: 'hue-rotate(0deg)'}, |
| 238 {at: 0.5, is: 'hue-rotate(180deg)'}, | 238 {at: 0.5, is: 'hue-rotate(180deg)'}, |
| 239 {at: 1, is: 'hue-rotate(360deg)'}, | 239 {at: 1, is: 'hue-rotate(360deg)'}, |
| 240 {at: 1.5, is: 'hue-rotate(540deg)'} | 240 {at: 1.5, is: 'hue-rotate(540deg)'} |
| 241 ]); | 241 ]); |
| 242 | 242 |
| 243 assertInterpolation({ | 243 assertInterpolation({ |
| 244 property: '-webkit-filter', | 244 property: 'backdrop-filter', |
| 245 from: 'none', // lacuna is 0 | 245 from: 'none', // lacuna is 0 |
| 246 to: 'invert(1)' | 246 to: 'invert(1)' |
| 247 }, [ | 247 }, [ |
| 248 {at: -1, is: 'invert(0)'}, // Negative values are not allowed. | 248 {at: -1, is: 'invert(0)'}, // Negative values are not allowed. |
| 249 {at: 0, is: 'invert(0)'}, | 249 {at: 0, is: 'invert(0)'}, |
| 250 {at: 0.5, is: 'invert(0.5)'}, | 250 {at: 0.5, is: 'invert(0.5)'}, |
| 251 {at: 1, is: 'invert(1)'}, | 251 {at: 1, is: 'invert(1)'}, |
| 252 {at: 1.5, is: 'invert(1)'} // Should clamp values to 1. | 252 {at: 1.5, is: 'invert(1)'} // Should clamp values to 1. |
| 253 ]); | 253 ]); |
| 254 | 254 |
| 255 assertInterpolation({ | 255 assertInterpolation({ |
| 256 property: '-webkit-filter', | 256 property: 'backdrop-filter', |
| 257 from: 'opacity(0)', | 257 from: 'opacity(0)', |
| 258 to: 'none' // lacuna is 1 | 258 to: 'none' // lacuna is 1 |
| 259 }, [ | 259 }, [ |
| 260 {at: -1, is: 'opacity(0)'}, // Negative values are not allowed. | 260 {at: -1, is: 'opacity(0)'}, // Negative values are not allowed. |
| 261 {at: 0, is: 'opacity(0)'}, | 261 {at: 0, is: 'opacity(0)'}, |
| 262 {at: 0.5, is: 'opacity(0.5)'}, | 262 {at: 0.5, is: 'opacity(0.5)'}, |
| 263 {at: 1, is: 'opacity(1)'}, | 263 {at: 1, is: 'opacity(1)'}, |
| 264 {at: 1.5, is: 'opacity(1)'} // Should clamp values to 1. | 264 {at: 1.5, is: 'opacity(1)'} // Should clamp values to 1. |
| 265 ]); | 265 ]); |
| 266 | 266 |
| 267 assertInterpolation({ | 267 assertInterpolation({ |
| 268 property: '-webkit-filter', | 268 property: 'backdrop-filter', |
| 269 from: 'saturate(0)', | 269 from: 'saturate(0)', |
| 270 to: 'none' // lacuna is 1 | 270 to: 'none' // lacuna is 1 |
| 271 }, [ | 271 }, [ |
| 272 {at: -1, is: 'saturate(0)'}, // Negative values are not allowed. | 272 {at: -1, is: 'saturate(0)'}, // Negative values are not allowed. |
| 273 {at: 0, is: 'saturate(0)'}, | 273 {at: 0, is: 'saturate(0)'}, |
| 274 {at: 0.5, is: 'saturate(0.5)'}, | 274 {at: 0.5, is: 'saturate(0.5)'}, |
| 275 {at: 1, is: 'saturate(1)'}, | 275 {at: 1, is: 'saturate(1)'}, |
| 276 {at: 1.5, is: 'saturate(1.5)'} | 276 {at: 1.5, is: 'saturate(1.5)'} |
| 277 ]); | 277 ]); |
| 278 | 278 |
| 279 assertInterpolation({ | 279 assertInterpolation({ |
| 280 property: '-webkit-filter', | 280 property: 'backdrop-filter', |
| 281 from: 'none', // lacuna is 0 | 281 from: 'none', // lacuna is 0 |
| 282 to: 'sepia(1)' | 282 to: 'sepia(1)' |
| 283 }, [ | 283 }, [ |
| 284 {at: -1, is: 'sepia(0)'}, // Negative values are not allowed. | 284 {at: -1, is: 'sepia(0)'}, // Negative values are not allowed. |
| 285 {at: 0, is: 'sepia(0)'}, | 285 {at: 0, is: 'sepia(0)'}, |
| 286 {at: 0.5, is: 'sepia(0.5)'}, | 286 {at: 0.5, is: 'sepia(0.5)'}, |
| 287 {at: 1, is: 'sepia(1)'}, | 287 {at: 1, is: 'sepia(1)'}, |
| 288 {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1. | 288 {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1. |
| 289 ]); | 289 ]); |
| 290 | 290 |
| 291 assertNoInterpolation({ | 291 assertNoInterpolation({ |
| 292 property: '-webkit-filter', | 292 property: 'backdrop-filter', |
| 293 from: 'url(#svgfilter)', | 293 from: 'url(#svgfilter)', |
| 294 to: 'none', // lacuna is not defined | 294 to: 'none', // lacuna is not defined |
| 295 }); | 295 }); |
| 296 | 296 |
| 297 assertNoInterpolation({ | 297 assertNoInterpolation({ |
| 298 property: '-webkit-filter', | 298 property: 'backdrop-filter', |
| 299 from: 'url(#svgfilter)', | 299 from: 'url(#svgfilter)', |
| 300 to: 'blur(5px)', | 300 to: 'blur(5px)', |
| 301 }); | 301 }); |
| 302 | 302 |
| 303 assertInterpolation({ | 303 assertInterpolation({ |
| 304 property: '-webkit-filter', | 304 property: 'backdrop-filter', |
| 305 from: 'initial', // lacuna is 0 | 305 from: 'initial', // lacuna is 0 |
| 306 to: 'sepia(1)' | 306 to: 'sepia(1)' |
| 307 }, [ | 307 }, [ |
| 308 {at: -1, is: 'sepia(0)'}, // Negative values are not allowed. | 308 {at: -1, is: 'sepia(0)'}, // Negative values are not allowed. |
| 309 {at: 0, is: 'none'}, // Equivalent to sepia(0) | 309 {at: 0, is: 'none'}, // Equivalent to sepia(0) |
| 310 {at: 0.5, is: 'sepia(0.5)'}, | 310 {at: 0.5, is: 'sepia(0.5)'}, |
| 311 {at: 1, is: 'sepia(1)'}, | 311 {at: 1, is: 'sepia(1)'}, |
| 312 {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1. | 312 {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1. |
| 313 ]); | 313 ]); |
| 314 </script> | 314 </script> |
| 315 </body> | 315 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1299323005:
blink: Add backdrop-filter support (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master