db_smilCSSPaced.js (10268B)
1 /* -*- indent-tabs-mode: nil; js-indent-level: 4 -*- */ 2 /* vim: set shiftwidth=4 tabstop=4 autoindent cindent noexpandtab: */ 3 /* This Source Code Form is subject to the terms of the Mozilla Public 4 * License, v. 2.0. If a copy of the MPL was not distributed with this 5 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 6 7 /* testcase data for paced-mode animations of CSS properties */ 8 9 // Lists of testcases for re-use across multiple properties of the same type 10 var _pacedTestLists = { 11 color: [ 12 new AnimTestcasePaced( 13 "rgb(2, 4, 6); " + "rgb(4, 8, 12); " + "rgb(8, 16, 24)", 14 { 15 comp0: "rgb(2, 4, 6)", 16 comp1_6: "rgb(3, 6, 9)", 17 comp1_3: "rgb(4, 8, 12)", 18 comp2_3: "rgb(6, 12, 18)", 19 comp1: "rgb(8, 16, 24)", 20 } 21 ), 22 new AnimTestcasePaced( 23 "rgb(10, 10, 10); " + "rgb(20, 10, 8); " + "rgb(20, 30, 4)", 24 { 25 comp0: "rgb(10, 10, 10)", 26 comp1_6: "rgb(15, 10, 9)", 27 comp1_3: "rgb(20, 10, 8)", 28 comp2_3: "rgb(20, 20, 6)", 29 comp1: "rgb(20, 30, 4)", 30 } 31 ), 32 // Use the same RGB component values to make 33 // premultication effect easier to compute. 34 new AnimTestcasePaced( 35 "rgba(20, 40, 60, 0.2); " + 36 "rgba(20, 40, 60, 0.4); " + 37 "rgba(20, 40, 60, 0.8)", 38 { 39 comp0: "rgba(20, 40, 60, 0.2)", 40 comp1_6: "rgba(20, 40, 60, 0.3)", 41 comp1_3: "rgba(20, 40, 60, 0.4)", 42 comp2_3: "rgba(20, 40, 60, 0.6)", 43 comp1: "rgba(20, 40, 60, 0.8)", 44 } 45 ), 46 ], 47 currentColor_color: [ 48 new AnimTestcasePaced( 49 "olive; " + // rgb(128, 128, 0) 50 "currentColor; " + // rgb(50, 50, 50) 51 "rgb(206, 150, 206)", 52 { 53 comp0: "rgb(128, 128, 0)", 54 comp1_6: "rgb(89, 89, 25)", 55 comp1_3: "rgb(50, 50, 50)", 56 comp2_3: "rgb(128, 100, 128)", 57 comp1: "rgb(206, 150, 206)", 58 } 59 ), 60 ], 61 currentColor_fill: [ 62 // Bug 1467622 changed the distance calculation 63 // involving currentColor, comp values below 64 // are no longer evenly spaced. 65 new AnimTestcasePaced( 66 "olive; " + // rgb(128, 128, 0) 67 "currentColor; " + // rgb(50, 50, 50) 68 "rgb(206, 150, 206)", 69 { 70 comp0: "rgb(128, 128, 0)", 71 comp1_6: "rgb(98, 98, 19)", 72 comp1_3: "rgb(67, 67, 39)", 73 comp2_3: "rgb(115, 92, 115)", 74 comp1: "rgb(206, 150, 206)", 75 } 76 ), 77 ], 78 paintServer: [ 79 // Sanity check: These aren't interpolatable -- they should end up 80 // ignoring the calcMode="paced" and falling into discrete-mode. 81 new AnimTestcasePaced( 82 "url(#gradA); url(#gradB)", 83 { 84 comp0: 'url("' + document.URL + '#gradA") rgb(0, 0, 0)', 85 comp1_6: 'url("' + document.URL + '#gradA") rgb(0, 0, 0)', 86 comp1_3: 'url("' + document.URL + '#gradA") rgb(0, 0, 0)', 87 comp2_3: 'url("' + document.URL + '#gradB") rgb(0, 0, 0)', 88 comp1: 'url("' + document.URL + '#gradB") rgb(0, 0, 0)', 89 }, 90 "need support for URI-based paints" 91 ), 92 new AnimTestcasePaced( 93 "url(#gradA); url(#gradB); url(#gradC)", 94 { 95 comp0: 'url("' + document.URL + '#gradA") rgb(0, 0, 0)', 96 comp1_6: 'url("' + document.URL + '#gradA") rgb(0, 0, 0)', 97 comp1_3: 'url("' + document.URL + '#gradB") rgb(0, 0, 0)', 98 comp2_3: 'url("' + document.URL + '#gradC") rgb(0, 0, 0)', 99 comp1: 'url("' + document.URL + '#gradC") rgb(0, 0, 0)', 100 }, 101 "need support for URI-based paints" 102 ), 103 ], 104 lengthNoUnits: [ 105 new AnimTestcasePaced("2; 0; 4", { 106 comp0: "2px", 107 comp1_6: "1px", 108 comp1_3: "0px", 109 comp2_3: "2px", 110 comp1: "4px", 111 }), 112 new AnimTestcasePaced("10; 12; 8", { 113 comp0: "10px", 114 comp1_6: "11px", 115 comp1_3: "12px", 116 comp2_3: "10px", 117 comp1: "8px", 118 }), 119 ], 120 lengthPx: [ 121 new AnimTestcasePaced("0px; 2px; 6px", { 122 comp0: "0px", 123 comp1_6: "1px", 124 comp1_3: "2px", 125 comp2_3: "4px", 126 comp1: "6px", 127 }), 128 new AnimTestcasePaced("10px; 12px; 8px", { 129 comp0: "10px", 130 comp1_6: "11px", 131 comp1_3: "12px", 132 comp2_3: "10px", 133 comp1: "8px", 134 }), 135 ], 136 lengthPctSVG: [ 137 new AnimTestcasePaced("5%; 6%; 4%", { 138 comp0: "5%", 139 comp1_6: "5.5%", 140 comp1_3: "6%", 141 comp2_3: "5%", 142 comp1: "4%", 143 }), 144 ], 145 lengthPxPctSVG: [ 146 new AnimTestcasePaced( 147 "0px; 1%; 6px", 148 { 149 comp0: "0px", 150 comp1_6: "1px", 151 comp1_3: "1%", 152 comp2_3: "4px", 153 comp1: "6px", 154 }, 155 "need support for interpolating between " + "px and percent values" 156 ), 157 ], 158 opacity: [ 159 new AnimTestcasePaced("0; 0.2; 0.6", { 160 comp0: "0", 161 comp1_6: "0.1", 162 comp1_3: "0.2", 163 comp2_3: "0.4", 164 comp1: "0.6", 165 }), 166 new AnimTestcasePaced("0.7; 1.0; 0.4", { 167 comp0: "0.7", 168 comp1_6: "0.85", 169 comp1_3: "1", 170 comp2_3: "0.7", 171 comp1: "0.4", 172 }), 173 ], 174 rect: [ 175 new AnimTestcasePaced( 176 "rect(2px, 4px, 6px, 8px); " + 177 "rect(4px, 8px, 12px, 16px); " + 178 "rect(8px, 16px, 24px, 32px)", 179 { 180 comp0: "rect(2px, 4px, 6px, 8px)", 181 comp1_6: "rect(3px, 6px, 9px, 12px)", 182 comp1_3: "rect(4px, 8px, 12px, 16px)", 183 comp2_3: "rect(6px, 12px, 18px, 24px)", 184 comp1: "rect(8px, 16px, 24px, 32px)", 185 } 186 ), 187 new AnimTestcasePaced( 188 "rect(10px, 10px, 10px, 10px); " + 189 "rect(20px, 10px, 50px, 8px); " + 190 "rect(20px, 30px, 130px, 4px)", 191 { 192 comp0: "rect(10px, 10px, 10px, 10px)", 193 comp1_6: "rect(15px, 10px, 30px, 9px)", 194 comp1_3: "rect(20px, 10px, 50px, 8px)", 195 comp2_3: "rect(20px, 20px, 90px, 6px)", 196 comp1: "rect(20px, 30px, 130px, 4px)", 197 } 198 ), 199 new AnimTestcasePaced( 200 "rect(10px, auto, 10px, 10px); " + 201 "rect(20px, auto, 50px, 8px); " + 202 "rect(40px, auto, 130px, 4px)", 203 { 204 comp0: "rect(10px, auto, 10px, 10px)", 205 comp1_6: "rect(15px, auto, 30px, 9px)", 206 comp1_3: "rect(20px, auto, 50px, 8px)", 207 comp2_3: "rect(30px, auto, 90px, 6px)", 208 comp1: "rect(40px, auto, 130px, 4px)", 209 } 210 ), 211 // Paced-mode animation is not supported in these next few cases 212 // (Can't compute subcomponent distance between 'auto' & px-values) 213 new AnimTestcasePaced( 214 "rect(10px, 10px, 10px, auto); " + 215 "rect(20px, 10px, 50px, 8px); " + 216 "rect(20px, 30px, 130px, 4px)", 217 { 218 comp0: "rect(10px, 10px, 10px, auto)", 219 comp1_6: "rect(10px, 10px, 10px, auto)", 220 comp1_3: "rect(20px, 10px, 50px, 8px)", 221 comp2_3: "rect(20px, 30px, 130px, 4px)", 222 comp1: "rect(20px, 30px, 130px, 4px)", 223 } 224 ), 225 new AnimTestcasePaced( 226 "rect(10px, 10px, 10px, 10px); " + 227 "rect(20px, 10px, 50px, 8px); " + 228 "auto", 229 { 230 comp0: "rect(10px, 10px, 10px, 10px)", 231 comp1_6: "rect(10px, 10px, 10px, 10px)", 232 comp1_3: "rect(20px, 10px, 50px, 8px)", 233 comp2_3: "auto", 234 comp1: "auto", 235 } 236 ), 237 new AnimTestcasePaced( 238 "auto; " + "auto; " + "rect(20px, 30px, 130px, 4px)", 239 { 240 comp0: "auto", 241 comp1_6: "auto", 242 comp1_3: "auto", 243 comp2_3: "rect(20px, 30px, 130px, 4px)", 244 comp1: "rect(20px, 30px, 130px, 4px)", 245 } 246 ), 247 new AnimTestcasePaced("auto; auto; auto", { 248 comp0: "auto", 249 comp1_6: "auto", 250 comp1_3: "auto", 251 comp2_3: "auto", 252 comp1: "auto", 253 }), 254 ], 255 }; 256 257 // TODO: test more properties here. 258 var gPacedBundles = [ 259 new TestcaseBundle(gPropList.clip, _pacedTestLists.rect), 260 new TestcaseBundle( 261 gPropList.color, 262 [].concat(_pacedTestLists.color, _pacedTestLists.currentColor_color) 263 ), 264 new TestcaseBundle(gPropList.direction, [ 265 new AnimTestcasePaced("rtl; ltr; rtl"), 266 ]), 267 new TestcaseBundle( 268 gPropList.fill, 269 [].concat( 270 _pacedTestLists.color, 271 _pacedTestLists.currentColor_fill, 272 _pacedTestLists.paintServer 273 ) 274 ), 275 new TestcaseBundle( 276 gPropList.font_size, 277 [].concat(_pacedTestLists.lengthNoUnits, _pacedTestLists.lengthPx, [ 278 new AnimTestcasePaced("20%; 24%; 16%", { 279 comp0: "10px", 280 comp1_6: "11px", 281 comp1_3: "12px", 282 comp2_3: "10px", 283 comp1: "8px", 284 }), 285 new AnimTestcasePaced("0px; 4%; 6px", { 286 comp0: "0px", 287 comp1_6: "1px", 288 comp1_3: "2px", 289 comp2_3: "4px", 290 comp1: "6px", 291 }), 292 ]) 293 ), 294 new TestcaseBundle(gPropList.font_size_adjust, [ 295 new AnimTestcasePaced("0.2; 0.6; 0.8", { 296 comp0: "0.2", 297 comp1_6: "0.3", 298 comp1_3: "0.4", 299 comp2_3: "0.6", 300 comp1: "0.8", 301 }), 302 new AnimTestcasePaced("none; none; 0.5", { 303 comp0: "none", 304 comp1_6: "none", 305 comp1_3: "none", 306 comp2_3: "0.5", 307 comp1: "0.5", 308 }), 309 ]), 310 new TestcaseBundle(gPropList.font_family, [ 311 // Sanity check: 'font-family' isn't interpolatable. It should end up 312 // ignoring the calcMode="paced" and falling into discrete-mode. 313 new AnimTestcasePaced( 314 "serif; sans-serif; monospace", 315 { 316 comp0: "serif", 317 comp1_6: "serif", 318 comp1_3: "sans-serif", 319 comp2_3: "monospace", 320 comp1: "monospace", 321 }, 322 "need support for more font properties" 323 ), 324 ]), 325 new TestcaseBundle(gPropList.opacity, _pacedTestLists.opacity), 326 new TestcaseBundle( 327 gPropList.stroke_dasharray, 328 [].concat(_pacedTestLists.lengthPctSVG, [ 329 new AnimTestcasePaced("7, 7, 7; 7, 10, 3; 1, 2, 3", { 330 comp0: "7px, 7px, 7px", 331 comp1_6: "7px, 8.5px, 5px", 332 comp1_3: "7px, 10px, 3px", 333 comp2_3: "4px, 6px, 3px", 334 comp1: "1px, 2px, 3px", 335 }), 336 ]) 337 ), 338 new TestcaseBundle( 339 gPropList.stroke_dashoffset, 340 [].concat( 341 _pacedTestLists.lengthNoUnits, 342 _pacedTestLists.lengthPx, 343 _pacedTestLists.lengthPctSVG, 344 _pacedTestLists.lengthPxPctSVG 345 ) 346 ), 347 new TestcaseBundle( 348 gPropList.stroke_width, 349 [].concat( 350 _pacedTestLists.lengthNoUnits, 351 _pacedTestLists.lengthPx, 352 _pacedTestLists.lengthPctSVG, 353 _pacedTestLists.lengthPxPctSVG 354 ) 355 ), 356 ];