| 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 { |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 47 to: 'blur(10px)' | 47 to: 'blur(10px)' |
| 48 }); | 48 }); |
| 49 | 49 |
| 50 // Partially matching lists: | 50 // Partially matching lists: |
| 51 assertInterpolation({ | 51 assertInterpolation({ |
| 52 property: '-webkit-filter', | 52 property: '-webkit-filter', |
| 53 from: 'blur(6px)', | 53 from: 'blur(6px)', |
| 54 to: 'blur(10px) hue-rotate(180deg)' | 54 to: 'blur(10px) hue-rotate(180deg)' |
| 55 }, [ | 55 }, [ |
| 56 {at: -0.5, is: 'blur(4px) hue-rotate(-90deg)'}, | 56 {at: -0.5, is: 'blur(4px) hue-rotate(-90deg)'}, |
| 57 {at: 0, is: 'blur(6px)'}, | 57 {at: 0, is: 'blur(6px) hue-rotate(0deg)'}, |
| 58 {at: 0.25, is: 'blur(7px) hue-rotate(45deg)'}, | 58 {at: 0.25, is: 'blur(7px) hue-rotate(45deg)'}, |
| 59 {at: 0.5, is: 'blur(8px) hue-rotate(90deg)'}, | 59 {at: 0.5, is: 'blur(8px) hue-rotate(90deg)'}, |
| 60 {at: 1, is: 'blur(10px) hue-rotate(180deg)'}, | 60 {at: 1, is: 'blur(10px) hue-rotate(180deg)'}, |
| 61 {at: 1.5, is: 'blur(12px) hue-rotate(270deg)'}, | 61 {at: 1.5, is: 'blur(12px) hue-rotate(270deg)'}, |
| 62 ]); | 62 ]); |
| 63 | 63 |
| 64 assertInterpolation({ | 64 assertInterpolation({ |
| 65 property: '-webkit-filter', | 65 property: '-webkit-filter', |
| 66 from: 'none', | 66 from: 'none', |
| 67 to: 'hue-rotate(180deg)' | 67 to: 'hue-rotate(180deg)' |
| 68 }, [ | 68 }, [ |
| 69 {at: -0.5, is: 'hue-rotate(-90deg)'}, | 69 {at: -0.5, is: 'hue-rotate(-90deg)'}, |
| 70 {at: 0, is: 'none'}, | 70 {at: 0, is: 'hue-rotate(0deg)'}, |
| 71 {at: 0.25, is: 'hue-rotate(45deg)'}, | 71 {at: 0.25, is: 'hue-rotate(45deg)'}, |
| 72 {at: 0.5, is: 'hue-rotate(90deg)'}, | 72 {at: 0.5, is: 'hue-rotate(90deg)'}, |
| 73 {at: 1, is: 'hue-rotate(180deg)'}, | 73 {at: 1, is: 'hue-rotate(180deg)'}, |
| 74 {at: 1.5, is: 'hue-rotate(270deg)'}, | 74 {at: 1.5, is: 'hue-rotate(270deg)'}, |
| 75 ]); | 75 ]); |
| 76 | 76 |
| 77 assertInterpolation({ | 77 assertInterpolation({ |
| 78 property: '-webkit-filter', | 78 property: '-webkit-filter', |
| 79 from: 'hue-rotate(180deg)', | 79 from: 'hue-rotate(180deg)', |
| 80 to: 'none' | 80 to: 'none' |
| 81 }, [ | 81 }, [ |
| 82 {at: -0.5, is: 'hue-rotate(270deg)'}, | 82 {at: -0.5, is: 'hue-rotate(270deg)'}, |
| 83 {at: 0, is: 'hue-rotate(180deg)'}, | 83 {at: 0, is: 'hue-rotate(180deg)'}, |
| 84 {at: 0.25, is: 'hue-rotate(135deg)'}, | 84 {at: 0.25, is: 'hue-rotate(135deg)'}, |
| 85 {at: 0.5, is: 'hue-rotate(90deg)'}, | 85 {at: 0.5, is: 'hue-rotate(90deg)'}, |
| 86 {at: 1, is: 'none'}, | 86 {at: 1, is: 'hue-rotate(0deg)'}, |
| 87 {at: 1.5, is: 'hue-rotate(-90deg)'}, | 87 {at: 1.5, is: 'hue-rotate(-90deg)'}, |
| 88 ]); | 88 ]); |
| 89 | 89 |
| 90 // Filter functions (tests lacuna and clamping): | 90 // Filter functions (tests lacuna and clamping): |
| 91 assertInterpolation({ | 91 assertInterpolation({ |
| 92 property: '-webkit-filter', | 92 property: '-webkit-filter', |
| 93 from: 'none', // lacuna is 0px | 93 from: 'none', // lacuna is 0px |
| 94 to: 'blur(10px)' | 94 to: 'blur(10px)' |
| 95 }, [ | 95 }, [ |
| 96 {at: -1, is: 'blur(0px)'}, // Negative values are not allowed. | 96 {at: -1, is: 'blur(0px)'}, // Negative values are not allowed. |
| 97 {at: 0, is: 'none'}, | 97 {at: 0, is: 'blur(0px)'}, |
| 98 {at: 0.5, is: 'blur(5px)'}, | 98 {at: 0.5, is: 'blur(5px)'}, |
| 99 {at: 1, is: 'blur(10px)'}, | 99 {at: 1, is: 'blur(10px)'}, |
| 100 {at: 1.5, is: 'blur(15px)'} | 100 {at: 1.5, is: 'blur(15px)'} |
| 101 ]); | 101 ]); |
| 102 | 102 |
| 103 assertInterpolation({ | 103 assertInterpolation({ |
| 104 property: '-webkit-filter', | 104 property: '-webkit-filter', |
| 105 from: 'brightness(0)', | 105 from: 'brightness(0)', |
| 106 to: 'none' // lacuna is 1 | 106 to: 'none' // lacuna is 1 |
| 107 }, [ | 107 }, [ |
| 108 {at: -1, is: 'brightness(0)'}, // Negative values are not allowed. | 108 {at: -1, is: 'brightness(0)'}, // Negative values are not allowed. |
| 109 {at: 0, is: 'brightness(0)'}, | 109 {at: 0, is: 'brightness(0)'}, |
| 110 {at: 0.5, is: 'brightness(0.5)'}, | 110 {at: 0.5, is: 'brightness(0.5)'}, |
| 111 {at: 1, is: 'none'}, | 111 {at: 1, is: 'brightness(1)'}, |
| 112 {at: 1.5, is: 'brightness(1.5)'} | 112 {at: 1.5, is: 'brightness(1.5)'} |
| 113 ]); | 113 ]); |
| 114 | 114 |
| 115 assertInterpolation({ | 115 assertInterpolation({ |
| 116 property: '-webkit-filter', | 116 property: '-webkit-filter', |
| 117 from: 'contrast(0)', | 117 from: 'contrast(0)', |
| 118 to: 'none' // lacuna is 1 | 118 to: 'none' // lacuna is 1 |
| 119 }, [ | 119 }, [ |
| 120 {at: -1, is: 'contrast(0)'}, // Negative values are not allowed. | 120 {at: -1, is: 'contrast(0)'}, // Negative values are not allowed. |
| 121 {at: 0, is: 'contrast(0)'}, | 121 {at: 0, is: 'contrast(0)'}, |
| 122 {at: 0.5, is: 'contrast(0.5)'}, | 122 {at: 0.5, is: 'contrast(0.5)'}, |
| 123 {at: 1, is: 'none'}, | 123 {at: 1, is: 'contrast(1)'}, |
| 124 {at: 1.5, is: 'contrast(1.5)'} | 124 {at: 1.5, is: 'contrast(1.5)'} |
| 125 ]); | 125 ]); |
| 126 | 126 |
| 127 assertInterpolation({ | 127 assertInterpolation({ |
| 128 property: '-webkit-filter', | 128 property: '-webkit-filter', |
| 129 from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent) | 129 from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent) |
| 130 to: 'drop-shadow(20px 10px green)' | 130 to: 'drop-shadow(20px 10px green)' |
| 131 }, [ | 131 }, [ |
| 132 {at: -1, is: 'drop-shadow(-20px -10px transparent)'}, | 132 {at: -1, is: 'drop-shadow(-20px -10px transparent)'}, |
| 133 {at: 0, is: 'none'}, | 133 {at: 0, is: 'none'}, |
| (...skipping 13 matching lines...) Expand all Loading... |
| 147 {at: 1, is: 'drop-shadow(20px 10px green)'}, | 147 {at: 1, is: 'drop-shadow(20px 10px green)'}, |
| 148 {at: 1.5, is: 'drop-shadow(30px 15px #004100)'} | 148 {at: 1.5, is: 'drop-shadow(30px 15px #004100)'} |
| 149 ]); | 149 ]); |
| 150 | 150 |
| 151 assertInterpolation({ | 151 assertInterpolation({ |
| 152 property: '-webkit-filter', | 152 property: '-webkit-filter', |
| 153 from: 'none', // lacuna is 0 | 153 from: 'none', // lacuna is 0 |
| 154 to: 'grayscale(1)' | 154 to: 'grayscale(1)' |
| 155 }, [ | 155 }, [ |
| 156 {at: -1, is: 'grayscale(0)'}, // Negative values are not allowed. | 156 {at: -1, is: 'grayscale(0)'}, // Negative values are not allowed. |
| 157 {at: 0, is: 'none'}, | 157 {at: 0, is: 'grayscale(0)'}, |
| 158 {at: 0.5, is: 'grayscale(0.5)'}, | 158 {at: 0.5, is: 'grayscale(0.5)'}, |
| 159 {at: 1, is: 'grayscale(1)'}, | 159 {at: 1, is: 'grayscale(1)'}, |
| 160 {at: 1.5, is: 'grayscale(1)'} // Should clamp values to 1. | 160 {at: 1.5, is: 'grayscale(1)'} // Should clamp values to 1. |
| 161 ]); | 161 ]); |
| 162 | 162 |
| 163 assertInterpolation({ | 163 assertInterpolation({ |
| 164 property: '-webkit-filter', | 164 property: '-webkit-filter', |
| 165 from: 'none', // lacuna is 0deg | 165 from: 'none', // lacuna is 0deg |
| 166 to: 'hue-rotate(360deg)' | 166 to: 'hue-rotate(360deg)' |
| 167 }, [ | 167 }, [ |
| 168 {at: -1, is: 'hue-rotate(-360deg)'}, | 168 {at: -1, is: 'hue-rotate(-360deg)'}, |
| 169 {at: 0, is: 'none'}, | 169 {at: 0, is: 'hue-rotate(0deg)'}, |
| 170 {at: 0.5, is: 'hue-rotate(180deg)'}, | 170 {at: 0.5, is: 'hue-rotate(180deg)'}, |
| 171 {at: 1, is: 'hue-rotate(360deg)'}, | 171 {at: 1, is: 'hue-rotate(360deg)'}, |
| 172 {at: 1.5, is: 'hue-rotate(540deg)'} | 172 {at: 1.5, is: 'hue-rotate(540deg)'} |
| 173 ]); | 173 ]); |
| 174 | 174 |
| 175 assertInterpolation({ | 175 assertInterpolation({ |
| 176 property: '-webkit-filter', | 176 property: '-webkit-filter', |
| 177 from: 'none', // lacuna is 0 | 177 from: 'none', // lacuna is 0 |
| 178 to: 'invert(1)' | 178 to: 'invert(1)' |
| 179 }, [ | 179 }, [ |
| 180 {at: -1, is: 'invert(0)'}, // Negative values are not allowed. | 180 {at: -1, is: 'invert(0)'}, // Negative values are not allowed. |
| 181 {at: 0, is: 'none'}, | 181 {at: 0, is: 'invert(0)'}, |
| 182 {at: 0.5, is: 'invert(0.5)'}, | 182 {at: 0.5, is: 'invert(0.5)'}, |
| 183 {at: 1, is: 'invert(1)'}, | 183 {at: 1, is: 'invert(1)'}, |
| 184 {at: 1.5, is: 'invert(1)'} // Should clamp values to 1. | 184 {at: 1.5, is: 'invert(1)'} // Should clamp values to 1. |
| 185 ]); | 185 ]); |
| 186 | 186 |
| 187 assertInterpolation({ | 187 assertInterpolation({ |
| 188 property: '-webkit-filter', | 188 property: '-webkit-filter', |
| 189 from: 'opacity(0)', | 189 from: 'opacity(0)', |
| 190 to: 'none' // lacuna is 1 | 190 to: 'none' // lacuna is 1 |
| 191 }, [ | 191 }, [ |
| 192 {at: -1, is: 'opacity(0)'}, // Negative values are not allowed. | 192 {at: -1, is: 'opacity(0)'}, // Negative values are not allowed. |
| 193 {at: 0, is: 'opacity(0)'}, | 193 {at: 0, is: 'opacity(0)'}, |
| 194 {at: 0.5, is: 'opacity(0.5)'}, | 194 {at: 0.5, is: 'opacity(0.5)'}, |
| 195 {at: 1, is: 'none'}, | 195 {at: 1, is: 'opacity(1)'}, |
| 196 {at: 1.5, is: 'opacity(1)'} // Should clamp values to 1. | 196 {at: 1.5, is: 'opacity(1)'} // Should clamp values to 1. |
| 197 ]); | 197 ]); |
| 198 | 198 |
| 199 assertInterpolation({ | 199 assertInterpolation({ |
| 200 property: '-webkit-filter', | 200 property: '-webkit-filter', |
| 201 from: 'saturate(0)', | 201 from: 'saturate(0)', |
| 202 to: 'none' // lacuna is 1 | 202 to: 'none' // lacuna is 1 |
| 203 }, [ | 203 }, [ |
| 204 {at: -1, is: 'saturate(0)'}, // Negative values are not allowed. | 204 {at: -1, is: 'saturate(0)'}, // Negative values are not allowed. |
| 205 {at: 0, is: 'saturate(0)'}, | 205 {at: 0, is: 'saturate(0)'}, |
| 206 {at: 0.5, is: 'saturate(0.5)'}, | 206 {at: 0.5, is: 'saturate(0.5)'}, |
| 207 {at: 1, is: 'none'}, | 207 {at: 1, is: 'saturate(1)'}, |
| 208 {at: 1.5, is: 'saturate(1.5)'} | 208 {at: 1.5, is: 'saturate(1.5)'} |
| 209 ]); | 209 ]); |
| 210 | 210 |
| 211 assertInterpolation({ | 211 assertInterpolation({ |
| 212 property: '-webkit-filter', | 212 property: '-webkit-filter', |
| 213 from: 'none', // lacuna is 0 | 213 from: 'none', // lacuna is 0 |
| 214 to: 'sepia(1)' | 214 to: 'sepia(1)' |
| 215 }, [ | 215 }, [ |
| 216 {at: -1, is: 'sepia(0)'}, // Negative values are not allowed. | 216 {at: -1, is: 'sepia(0)'}, // Negative values are not allowed. |
| 217 {at: 0, is: 'none'}, | 217 {at: 0, is: 'sepia(0)'}, |
| 218 {at: 0.5, is: 'sepia(0.5)'}, | 218 {at: 0.5, is: 'sepia(0.5)'}, |
| 219 {at: 1, is: 'sepia(1)'}, | 219 {at: 1, is: 'sepia(1)'}, |
| 220 {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1. | 220 {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1. |
| 221 ]); | 221 ]); |
| 222 | 222 |
| 223 assertNoInterpolation({ | 223 assertNoInterpolation({ |
| 224 property: '-webkit-filter', | 224 property: '-webkit-filter', |
| 225 from: 'url(#svgfilter)', | 225 from: 'url(#svgfilter)', |
| 226 to: 'none', // lacuna is not defined | 226 to: 'none', // lacuna is not defined |
| 227 }); | 227 }); |
| 228 | 228 |
| 229 assertNoInterpolation({ | 229 assertNoInterpolation({ |
| 230 property: '-webkit-filter', | 230 property: '-webkit-filter', |
| 231 from: 'url(#svgfilter)', | 231 from: 'url(#svgfilter)', |
| 232 to: 'blur(5px)', | 232 to: 'blur(5px)', |
| 233 }); | 233 }); |
| 234 </script> | 234 </script> |
| 235 </body> | 235 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1069313002:
Animation: FilterStyleInterpolation for animating filter (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master