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