Changeset 251573 in webkit
- Timestamp:
- Oct 24, 2019 4:45:01 PM (4 years ago)
- Location:
- trunk/LayoutTests
- Files:
-
- 45 added
- 65 deleted
- 32 edited
- 9 copied
- 21 moved
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r251567 r251573 1 2019-10-24 Russell Epstein <repstein@apple.com> 2 3 Unreviewed, rolling out r251536. 4 5 Landed 3 Broken Tests. 6 7 Reverted changeset: 8 9 "[Web Animations] Update WPT tests related to Web Animations 10 and remove imported Mozilla tests" 11 https://bugs.webkit.org/show_bug.cgi?id=203291 12 https://trac.webkit.org/changeset/251536 13 1 14 2019-10-24 Commit Queue <commit-queue@webkit.org> 2 15 -
trunk/LayoutTests/TestExpectations
r251557 r251573 2802 2802 webkit.org/b/202108 imported/w3c/web-platform-tests/web-animations/interfaces/DocumentTimeline/style-change-events.html [ Pass Failure ] 2803 2803 webkit.org/b/202109 imported/w3c/web-platform-tests/web-animations/timing-model/timelines/update-and-send-events.html [ Pass Failure ] 2804 2805 webkit.org/b/183836 imported/mozilla/css-animations/test_animations-dynamic-changes.html [ Pass Failure Timeout ] 2806 webkit.org/b/183844 imported/mozilla/css-animations/test_element-get-animations.html [ Pass Failure Timeout ] 2807 webkit.org/b/183846 imported/mozilla/css-transitions/test_pseudoElement-get-animations.html [ Pass Failure Timeout ] 2808 webkit.org/b/183847 imported/mozilla/css-animations/test_event-order.html [ Pass Failure Timeout ] 2809 2810 webkit.org/b/183848 imported/mozilla/css-animations/test_keyframeeffect-getkeyframes.html [ Skip ] 2804 2811 2805 2812 webkit.org/b/157068 [ Debug ] imported/w3c/web-platform-tests/fetch/nosniff/importscripts.html [ Pass Crash ] … … 3879 3886 webkit.org/b/200209 imported/w3c/web-platform-tests/css/css-images/multiple-position-color-stop-radial.html [ ImageOnlyFailure ] 3880 3887 3881 webkit.org/b/203296 imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash.html [ Skip ]3882 3883 3888 # wpt css-values failures 3884 3889 webkit.org/b/203320 imported/w3c/web-platform-tests/css/css-values/percentage-rem-low.html [ ImageOnlyFailure ] -
trunk/LayoutTests/imported/mozilla/ChangeLog
r251536 r251573 1 2019-10-24 Russell Epstein <repstein@apple.com> 2 3 Unreviewed, rolling out r251536. 4 5 Landed 3 Broken Tests. 6 7 Reverted changeset: 8 9 "[Web Animations] Update WPT tests related to Web Animations 10 and remove imported Mozilla tests" 11 https://bugs.webkit.org/show_bug.cgi?id=203291 12 https://trac.webkit.org/changeset/251536 13 1 14 2019-10-24 Antoine Quint <graouts@apple.com> 2 15 -
trunk/LayoutTests/imported/mozilla/css-animations/test_animation-computed-timing.html
r251571 r251573 1 1 <!doctype html> 2 2 <meta charset=utf-8> 3 <title>AnimationEffect.getComputedTiming() for CSS animations</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/testcommon.js"></script> 3 <script src="../../../resources/testharness.js"></script> 4 <script src="../../../resources/testharnessreport.js"></script> 5 <script src="../resources/testcommon.js"></script> 9 6 <style> 10 7 @keyframes moveAnimation { … … 22 19 // delay 23 20 // -------------------- 24 25 test(t => { 26 const div = addDiv(t, { style: 'animation: moveAnimation 100s' });27 const effect = div.getAnimations()[0].effect;28 assert_equals(effect.getComputedTiming().delay, 0,'Initial value of delay');21 test(function(t) { 22 var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); 23 var effect = div.getAnimations()[0].effect; 24 assert_equals(effect.getComputedTiming().delay, 0, 25 'Initial value of delay'); 29 26 }, 'delay of a new animation'); 30 27 31 test( t =>{32 const div = addDiv(t, { style: 'animation: moveAnimation 100s -10s'});33 consteffect = div.getAnimations()[0].effect;28 test(function(t) { 29 var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s'}); 30 var effect = div.getAnimations()[0].effect; 34 31 assert_equals(effect.getComputedTiming().delay, -10 * MS_PER_SEC, 35 32 'Initial value of delay'); 36 33 }, 'Negative delay of a new animation'); 37 34 38 test( t =>{39 const div = addDiv(t, { style: 'animation: moveAnimation 100s 10s'});40 consteffect = div.getAnimations()[0].effect;35 test(function(t) { 36 var div = addDiv(t, {style: 'animation: moveAnimation 100s 10s'}); 37 var effect = div.getAnimations()[0].effect; 41 38 assert_equals(effect.getComputedTiming().delay, 10 * MS_PER_SEC, 42 39 'Initial value of delay'); … … 47 44 // endDelay 48 45 // -------------------- 49 50 test(t => { 51 const div = addDiv(t, { style: 'animation: moveAnimation 100s' }); 52 const effect = div.getAnimations()[0].effect; 46 test(function(t) { 47 var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); 48 var effect = div.getAnimations()[0].effect; 53 49 assert_equals(effect.getComputedTiming().endDelay, 0, 54 50 'Initial value of endDelay'); … … 59 55 // fill 60 56 // -------------------- 61 62 test(t => { 63 const getEffectWithFill = fill => { 64 const div = addDiv(t, { style: 'animation: moveAnimation 100s ' + fill }); 57 test(function(t) { 58 var getEffectWithFill = function(fill) { 59 var div = addDiv(t, {style: 'animation: moveAnimation 100s ' + fill}); 65 60 return div.getAnimations()[0].effect; 66 61 }; 67 62 68 leteffect = getEffectWithFill('');63 var effect = getEffectWithFill(''); 69 64 assert_equals(effect.getComputedTiming().fill, 'none', 70 65 'Initial value of fill'); … … 84 79 // iterationStart 85 80 // -------------------- 86 87 test(t => { 88 const div = addDiv(t, { style: 'animation: moveAnimation 100s' }); 89 const effect = div.getAnimations()[0].effect; 81 test(function(t) { 82 var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); 83 var effect = div.getAnimations()[0].effect; 90 84 assert_equals(effect.getComputedTiming().iterationStart, 0, 91 85 'Initial value of iterationStart'); … … 96 90 // iterations 97 91 // -------------------- 98 99 test(t => { 100 const div = addDiv(t, { style: 'animation: moveAnimation 100s' }); 101 const effect = div.getAnimations()[0].effect; 92 test(function(t) { 93 var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); 94 var effect = div.getAnimations()[0].effect; 102 95 assert_equals(effect.getComputedTiming().iterations, 1, 103 96 'Initial value of iterations'); 104 97 }, 'iterations of a new animation'); 105 98 106 test( t =>{107 const div = addDiv(t, { style: 'animation: moveAnimation 100s 2016.5'});108 consteffect = div.getAnimations()[0].effect;99 test(function(t) { 100 var div = addDiv(t, {style: 'animation: moveAnimation 100s 2016.5'}); 101 var effect = div.getAnimations()[0].effect; 109 102 assert_equals(effect.getComputedTiming().iterations, 2016.5, 110 103 'Initial value of iterations'); 111 104 }, 'iterations of a finitely repeating animation'); 112 105 113 test( t =>{114 const div = addDiv(t, { style: 'animation: moveAnimation 100s infinite'});115 consteffect = div.getAnimations()[0].effect;106 test(function(t) { 107 var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'}); 108 var effect = div.getAnimations()[0].effect; 116 109 assert_equals(effect.getComputedTiming().iterations, Infinity, 117 110 'Initial value of iterations'); … … 122 115 // duration 123 116 // -------------------- 124 125 test(t => { 126 const div = addDiv(t, { 127 style: 'animation: moveAnimation 100s -10s infinite' 128 }); 129 const effect = div.getAnimations()[0].effect; 117 test(function(t) { 118 var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s infinite'}); 119 var effect = div.getAnimations()[0].effect; 130 120 assert_equals(effect.getComputedTiming().duration, 100 * MS_PER_SEC, 131 121 'Initial value of duration'); … … 136 126 // direction 137 127 // -------------------- 138 139 test(t => { 140 const getEffectWithDir = dir => { 141 const div = addDiv(t, { style: 'animation: moveAnimation 100s ' + dir }); 128 test(function(t) { 129 var getEffectWithDir = function(dir) { 130 var div = addDiv(t, {style: 'animation: moveAnimation 100s ' + dir}); 142 131 return div.getAnimations()[0].effect; 143 132 }; 144 133 145 leteffect = getEffectWithDir('');134 var effect = getEffectWithDir(''); 146 135 assert_equals(effect.getComputedTiming().direction, 'normal', 147 136 'Initial value of normal direction'); … … 161 150 // easing 162 151 // -------------------- 163 164 test(t => { 165 const div = addDiv(t, { style: 'animation: moveAnimation 100s' }); 166 const effect = div.getAnimations()[0].effect; 152 test(function(t) { 153 var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); 154 var effect = div.getAnimations()[0].effect; 167 155 assert_equals(effect.getComputedTiming().easing, 'linear', 168 156 'Initial value of easing'); … … 174 162 // = max(start delay + active duration + end delay, 0) 175 163 // -------------------- 176 177 test(t => { 178 const div = addDiv(t, { style: 'animation: moveAnimation 100s' }); 179 const effect = div.getAnimations()[0].effect; 164 test(function(t) { 165 var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); 166 var effect = div.getAnimations()[0].effect; 180 167 assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC, 181 168 'Initial value of endTime'); 182 169 }, 'endTime of an new animation'); 183 170 184 test( t =>{185 const div = addDiv(t, { style: 'animation: moveAnimation 100s -5s'});186 consteffect = div.getAnimations()[0].effect;187 constanswer = (100 - 5) * MS_PER_SEC;171 test(function(t) { 172 var div = addDiv(t, {style: 'animation: moveAnimation 100s -5s'}); 173 var effect = div.getAnimations()[0].effect; 174 var answer = (100 - 5) * MS_PER_SEC; 188 175 assert_equals(effect.getComputedTiming().endTime, answer, 189 176 'Initial value of endTime'); 190 177 }, 'endTime of an animation with a negative delay'); 191 178 192 test(t => { 193 const div = addDiv(t, { 194 style: 'animation: moveAnimation 10s -100s infinite' 195 }); 196 const effect = div.getAnimations()[0].effect; 179 test(function(t) { 180 var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s infinite'}); 181 var effect = div.getAnimations()[0].effect; 197 182 assert_equals(effect.getComputedTiming().endTime, Infinity, 198 183 'Initial value of endTime'); 199 184 }, 'endTime of an infinitely repeating animation'); 200 185 201 test( t =>{202 const div = addDiv(t, { style: 'animation: moveAnimation 0s 100s infinite'});203 consteffect = div.getAnimations()[0].effect;186 test(function(t) { 187 var div = addDiv(t, {style: 'animation: moveAnimation 0s 100s infinite'}); 188 var effect = div.getAnimations()[0].effect; 204 189 assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC, 205 190 'Initial value of endTime'); 206 191 }, 'endTime of an infinitely repeating zero-duration animation'); 207 192 208 test( t =>{193 test(function(t) { 209 194 // Fill forwards so div.getAnimations()[0] won't return an 210 195 // undefined value. 211 const div = addDiv(t, { 212 style: 'animation: moveAnimation 10s -100s forwards' 213 }); 214 const effect = div.getAnimations()[0].effect; 196 var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s forwards'}); 197 var effect = div.getAnimations()[0].effect; 215 198 assert_equals(effect.getComputedTiming().endTime, 0, 216 199 'Initial value of endTime'); … … 222 205 // = iteration duration * iteration count 223 206 // -------------------- 224 225 test(t => { 226 const div = addDiv(t, { style: 'animation: moveAnimation 100s 5' }); 227 const effect = div.getAnimations()[0].effect; 228 const answer = 100 * MS_PER_SEC * 5; 207 test(function(t) { 208 var div = addDiv(t, {style: 'animation: moveAnimation 100s 5'}); 209 var effect = div.getAnimations()[0].effect; 210 var answer = 100 * MS_PER_SEC * 5; 229 211 assert_equals(effect.getComputedTiming().activeDuration, answer, 230 212 'Initial value of activeDuration'); 231 213 }, 'activeDuration of a new animation'); 232 214 233 test( t =>{234 const div = addDiv(t, { style: 'animation: moveAnimation 100s infinite'});235 consteffect = div.getAnimations()[0].effect;215 test(function(t) { 216 var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'}); 217 var effect = div.getAnimations()[0].effect; 236 218 assert_equals(effect.getComputedTiming().activeDuration, Infinity, 237 219 'Initial value of activeDuration'); 238 220 }, 'activeDuration of an infinitely repeating animation'); 239 221 240 test( t =>{241 const div = addDiv(t, { style: 'animation: moveAnimation 0s 1s infinite'});242 consteffect = div.getAnimations()[0].effect;222 test(function(t) { 223 var div = addDiv(t, {style: 'animation: moveAnimation 0s 1s infinite'}); 224 var effect = div.getAnimations()[0].effect; 243 225 // If either the iteration duration or iteration count are zero, 244 226 // the active duration is zero. … … 247 229 }, 'activeDuration of an infinitely repeating zero-duration animation'); 248 230 249 test( t =>{250 const div = addDiv(t, { style: 'animation: moveAnimation 100s 1s 0'});251 consteffect = div.getAnimations()[0].effect;231 test(function(t) { 232 var div = addDiv(t, {style: 'animation: moveAnimation 100s 1s 0'}); 233 var effect = div.getAnimations()[0].effect; 252 234 // If either the iteration duration or iteration count are zero, 253 235 // the active duration is zero. … … 260 242 // localTime 261 243 // -------------------- 262 263 test(t => { 264 const div = addDiv(t, { style: 'animation: moveAnimation 100s' }); 265 const effect = div.getAnimations()[0].effect; 244 test(function(t) { 245 var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); 246 var effect = div.getAnimations()[0].effect; 266 247 assert_equals(effect.getComputedTiming().localTime, 0, 267 248 'Initial value of localTime'); 268 249 }, 'localTime of a new animation'); 269 250 270 test( t =>{271 const div = addDiv(t, { style: 'animation: moveAnimation 100s'});272 constanim = div.getAnimations()[0];251 test(function(t) { 252 var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); 253 var anim = div.getAnimations()[0]; 273 254 anim.currentTime = 5 * MS_PER_SEC; 274 255 assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime, … … 276 257 }, 'localTime of an animation is always equal to currentTime'); 277 258 278 promise_test( async t =>{279 const div = addDiv(t, { style: 'animation: moveAnimation 100s'});280 281 constanim = div.getAnimations()[0];259 promise_test(function(t) { 260 var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); 261 262 var anim = div.getAnimations()[0]; 282 263 anim.playbackRate = 2; // 2 times faster 283 264 284 await anim.ready; 285 286 assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime, 287 'localTime is equal to currentTime'); 288 289 await waitForFrame(); 290 291 assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime, 292 'localTime is equal to currentTime'); 265 return anim.ready.then(function() { 266 assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime, 267 'localTime is equal to currentTime'); 268 return waitForFrame(); 269 }).then(function() { 270 assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime, 271 'localTime is equal to currentTime'); 272 }); 293 273 }, 'localTime reflects playbackRate immediately'); 294 274 295 test( t =>{296 constdiv = addDiv(t);297 consteffect = new KeyframeEffect(div, {left: ["0px", "100px"]});275 test(function(t) { 276 var div = addDiv(t); 277 var effect = new KeyframeEffect(div, {left: ["0px", "100px"]}); 298 278 299 279 assert_equals(effect.getComputedTiming().localTime, null, … … 304 284 // -------------------- 305 285 // progress 306 // 307 // Note: Even though CSS animations have a default animation-timing-function of 308 // "ease", this only applies between keyframes (often referred to as the 309 // keyframe-level easing). The progress value returned by getComputedTiming(), 310 // however, only reflects effect-level easing and this defaults to "linear", 311 // even for CSS animations. 312 // -------------------- 313 314 test(t => { 315 const tests = [ 316 { fill: '', progress: [null, null] }, 317 { fill: 'none', progress: [null, null] }, 318 { fill: 'forwards', progress: [null, 1.0] }, 319 { fill: 'backwards', progress: [0.0, null] }, 320 { fill: 'both', progress: [0.0, 1.0] }, 321 ]; 322 for (const test of tests) { 323 const div = addDiv(t, { 324 style: 'animation: moveAnimation 100s 10s ' + test.fill 325 }); 326 const anim = div.getAnimations()[0]; 286 // Note: Default timing function is linear. 287 // -------------------- 288 test(function(t) { 289 [{fill: '', progress: [ null, null ]}, 290 {fill: 'none', progress: [ null, null ]}, 291 {fill: 'forwards', progress: [ null, 1.0 ]}, 292 {fill: 'backwards', progress: [ 0.0, null ]}, 293 {fill: 'both', progress: [ 0.0, 1.0 ]}] 294 .forEach(function(test) { 295 var div = 296 addDiv(t, {style: 'animation: moveAnimation 100s 10s ' + test.fill}); 297 var anim = div.getAnimations()[0]; 327 298 assert_true(anim.effect.getComputedTiming().progress === test.progress[0], 328 `Initial progress with "${test.fill}" fill`);299 'initial progress with "' + test.fill + '" fill'); 329 300 anim.finish(); 330 301 assert_true(anim.effect.getComputedTiming().progress === test.progress[1], 331 `Initial progress with "${test.fill}" fill`);332 } 302 'finished progress with "' + test.fill + '" fill'); 303 }); 333 304 }, 'progress of an animation with different fill modes'); 334 305 335 test( t =>{336 const div = addDiv(t, { style: 'animation: moveAnimation 10s 10 both'});337 constanim = div.getAnimations()[0];306 test(function(t) { 307 var div = addDiv(t, {style: 'animation: moveAnimation 10s 10 both'}); 308 var anim = div.getAnimations()[0]; 338 309 339 310 assert_equals(anim.effect.getComputedTiming().progress, 0.0, … … 353 324 }, 'progress of an integral repeating animation with normal direction'); 354 325 355 test(t => { 326 test(function(t) { 327 var div = addDiv(t); 356 328 // Note: FillMode here is "both" because 357 329 // 1. Since this a zero-duration animation, it will already have finished … … 359 331 // 2. Fill backwards, so the progress before phase wouldn't be 360 332 // unresolved (null value). 361 const div = addDiv(t, { style: 'animation: moveAnimation 0s infinite both'});362 constanim = div.getAnimations()[0];333 var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'}); 334 var anim = div.getAnimations()[0]; 363 335 364 336 assert_equals(anim.effect.getComputedTiming().progress, 1.0, … … 371 343 }, 'progress of an infinitely repeating zero-duration animation'); 372 344 373 test( t =>{345 test(function(t) { 374 346 // Default iterations = 1 375 const div = addDiv(t, { style: 'animation: moveAnimation 0s both'});376 constanim = div.getAnimations()[0];347 var div = addDiv(t, {style: 'animation: moveAnimation 0s both'}); 348 var anim = div.getAnimations()[0]; 377 349 378 350 assert_equals(anim.effect.getComputedTiming().progress, 1.0, … … 385 357 }, 'progress of a finitely repeating zero-duration animation'); 386 358 387 test( t =>{388 const div = addDiv(t, { style: 'animation: moveAnimation 0s 5s 10.25 both'});389 constanim = div.getAnimations()[0];359 test(function(t) { 360 var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both'}); 361 var anim = div.getAnimations()[0]; 390 362 391 363 assert_equals(anim.effect.getComputedTiming().progress, 0.0, … … 399 371 }, 'progress of a non-integral repeating zero-duration animation'); 400 372 401 test(t => { 402 const div = addDiv(t, { 403 style: 'animation: moveAnimation 0s 5s 10.25 both reverse', 404 }); 405 const anim = div.getAnimations()[0]; 373 test(function(t) { 374 var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both reverse'}); 375 var anim = div.getAnimations()[0]; 406 376 407 377 assert_equals(anim.effect.getComputedTiming().progress, 1.0, … … 415 385 'with reversing direction'); 416 386 417 test(t => { 418 const div = addDiv(t, { 419 style: 'animation: moveAnimation 10s 10.25 both alternate', 420 }); 421 const anim = div.getAnimations()[0]; 387 test(function(t) { 388 var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate'}); 389 var anim = div.getAnimations()[0]; 422 390 423 391 assert_equals(anim.effect.getComputedTiming().progress, 0.0, … … 438 406 'with alternate direction'); 439 407 440 test(t => { 441 const div = addDiv(t, { 442 style: 'animation: moveAnimation 10s 10.25 both alternate-reverse', 443 }); 444 const anim = div.getAnimations()[0]; 408 test(function(t) { 409 var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate-reverse'}); 410 var anim = div.getAnimations()[0]; 445 411 446 412 assert_equals(anim.effect.getComputedTiming().progress, 1.0, … … 461 427 'with alternate-reversing direction'); 462 428 463 test(t => { 464 const div = addDiv(t, { 465 style: 'animation: moveAnimation 0s 10.25 both alternate', 466 }); 467 const anim = div.getAnimations()[0]; 429 test(function(t) { 430 var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate'}); 431 var anim = div.getAnimations()[0]; 468 432 469 433 assert_equals(anim.effect.getComputedTiming().progress, 0.25, … … 481 445 'with alternate direction'); 482 446 483 test(t => { 484 const div = addDiv(t, { 485 style: 'animation: moveAnimation 0s 10.25 both alternate-reverse', 486 }); 487 const anim = div.getAnimations()[0]; 447 test(function(t) { 448 var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate-reverse'}); 449 var anim = div.getAnimations()[0]; 488 450 489 451 assert_equals(anim.effect.getComputedTiming().progress, 0.75, … … 505 467 // currentIteration 506 468 // -------------------- 507 508 test(t => { 509 const div = addDiv(t, { style: 'animation: moveAnimation 100s 2s' }); 510 const effect = div.getAnimations()[0].effect; 469 test(function(t) { 470 var div = addDiv(t, {style: 'animation: moveAnimation 100s 2s'}); 471 var effect = div.getAnimations()[0].effect; 511 472 assert_equals(effect.getComputedTiming().currentIteration, null, 512 473 'Initial value of currentIteration before phase'); … … 514 475 'in before phase'); 515 476 516 test( t =>{517 const div = addDiv(t, { style: 'animation: moveAnimation 100s'});518 constanim = div.getAnimations()[0];477 test(function(t) { 478 var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); 479 var anim = div.getAnimations()[0]; 519 480 assert_equals(anim.effect.getComputedTiming().currentIteration, 0, 520 481 'Initial value of currentIteration'); 521 482 }, 'currentIteration of a new animation is zero'); 522 483 523 test( t =>{484 test(function(t) { 524 485 // Note: FillMode here is "both" because 525 486 // 1. Since this a zero-duration animation, it will already have finished … … 527 488 // 2. Fill backwards, so the currentIteration (before phase) wouldn't be 528 489 // unresolved (null value). 529 const div = addDiv(t, { style: 'animation: moveAnimation 0s infinite both'});530 constanim = div.getAnimations()[0];490 var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'}); 491 var anim = div.getAnimations()[0]; 531 492 532 493 assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity, … … 539 500 }, 'currentIteration of an infinitely repeating zero-duration animation'); 540 501 541 test( t =>{542 const div = addDiv(t, { style: 'animation: moveAnimation 0s 10.5 both'});543 constanim = div.getAnimations()[0];502 test(function(t) { 503 var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.5 both'}); 504 var anim = div.getAnimations()[0]; 544 505 545 506 // Note: currentIteration = ceil(iteration start + iteration count) - 1 … … 553 514 }, 'currentIteration of a finitely repeating zero-duration animation'); 554 515 555 test(t => { 556 const div = addDiv(t, { 557 style: 'animation: moveAnimation 100s 5.5 forwards' 558 }); 559 const anim = div.getAnimations()[0]; 516 test(function(t) { 517 var div = addDiv(t, {style: 'animation: moveAnimation 100s 5.5 forwards'}); 518 var anim = div.getAnimations()[0]; 560 519 561 520 assert_equals(anim.effect.getComputedTiming().currentIteration, 0, … … 572 531 }, 'currentIteration of an animation with a non-integral iteration count'); 573 532 574 test( t =>{575 const div = addDiv(t, { style: 'animation: moveAnimation 100s 2 forwards'});576 constanim = div.getAnimations()[0];533 test(function(t) { 534 var div = addDiv(t, {style: 'animation: moveAnimation 100s 2 forwards'}); 535 var anim = div.getAnimations()[0]; 577 536 578 537 assert_equals(anim.effect.getComputedTiming().currentIteration, 0, … … 584 543 }, 'currentIteration of an animation with an integral iteration count'); 585 544 586 test( t =>{587 const div = addDiv(t, { style: 'animation: moveAnimation 100s forwards'});588 constanim = div.getAnimations()[0];545 test(function(t) { 546 var div = addDiv(t, {style: 'animation: moveAnimation 100s forwards'}); 547 var anim = div.getAnimations()[0]; 589 548 assert_equals(anim.effect.getComputedTiming().currentIteration, 0, 590 549 'Initial value of currentIteration'); … … 595 554 }, 'currentIteration of an animation with a default iteration count'); 596 555 597 test( t =>{598 constdiv = addDiv(t);599 consteffect = new KeyframeEffect(div, {left: ["0px", "100px"]});556 test(function(t) { 557 var div = addDiv(t); 558 var effect = new KeyframeEffect(div, {left: ["0px", "100px"]}); 600 559 601 560 assert_equals(effect.getComputedTiming().currentIteration, null, -
trunk/LayoutTests/imported/mozilla/css-animations/test_animation-playstate-expected.txt
r251571 r251573 1 1 2 PASS A new CSS animation is initially play-pending2 PASS Animation returns correct playState when running 3 3 PASS Animation returns correct playState when paused 4 4 PASS Animation.playState updates when paused by script 5 5 PASS Animation.playState updates when resumed by setting style 6 PASS Animation returns correct playState when cancel ed6 PASS Animation returns correct playState when cancelled 7 7 -
trunk/LayoutTests/imported/mozilla/css-animations/test_animation-ready-expected.txt
r251571 r251573 2 2 PASS A new ready promise is created when setting animation-play-state: running 3 3 PASS ready promise is rejected when an animation is canceled by resetting the animation property 4 PASS ready promise is rejected when an animation is cancel ed by updating the animation property4 PASS ready promise is rejected when an animation is cancelled by updating the animation property 5 5 PASS A new ready promise is created when setting animation-play-state: paused 6 6 PASS Pausing twice re-uses the same Promise 7 PASS If a pause operation is interrupted, the ready promise is reused 8 PASS When a pause is complete the Promise callback gets the correct animation 7 9 -
trunk/LayoutTests/imported/mozilla/css-animations/test_cssanimation-animationname.html
r251571 r251573 1 1 <!doctype html> 2 2 <meta charset=utf-8> 3 <title>CSSAnimation.animationName</title> 4 <link rel="help" 5 href="https://drafts.csswg.org/css-animations-2/#dom-cssanimation-animationname"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/testcommon.js"></script> 3 <script src="../../../resources/testharness.js"></script> 4 <script src="../../../resources/testharnessreport.js"></script> 5 <script src="../resources/testcommon.js"></script> 9 6 <style> 10 7 @keyframes xyz { … … 12 9 } 13 10 </style> 11 <body> 14 12 <div id="log"></div> 15 13 <script> 16 14 'use strict'; 17 15 18 test( t =>{19 constdiv = addDiv(t);16 test(function(t) { 17 var div = addDiv(t); 20 18 div.style.animation = 'xyz 100s'; 21 19 assert_equals(div.getAnimations()[0].animationName, 'xyz', … … 23 21 }, 'Animation name makes keyframe rule'); 24 22 25 test( t =>{26 constdiv = addDiv(t);23 test(function(t) { 24 var div = addDiv(t); 27 25 div.style.animation = 'x\\yz 100s'; 28 26 assert_equals(div.getAnimations()[0].animationName, 'xyz', … … 30 28 }, 'Escaped animation name'); 31 29 32 test( t =>{33 constdiv = addDiv(t);30 test(function(t) { 31 var div = addDiv(t); 34 32 div.style.animation = 'x\\79 z 100s'; 35 33 assert_equals(div.getAnimations()[0].animationName, 'xyz', … … 39 37 40 38 </script> 39 </body> -
trunk/LayoutTests/imported/mozilla/css-animations/test_document-get-animations-expected.txt
r251571 r251573 11 11 PASS Finished but not filling CSS Animations are not returned 12 12 PASS Yet-to-start CSS Animations are returned 13 PASS CSS Animations cancel ed via the API are not returned14 PASS CSS Animations cancel ed and restarted via the API are returned15 FAIL CSS Animations targetting (pseudo-)elements should have correct order after sorting assert_equals: Animation #2 has expected target expected (object) Element node <div id="parent" style="animation: animBottom 100s"><div ... but got (undefined) undefined 13 PASS CSS Animations cancelled via the API are not returned 14 PASS CSS Animations cancelled and restarted via the API are returned 15 PASS CSS Animations targetting (pseudo-)elements should have correct order after sorting 16 16 -
trunk/LayoutTests/imported/mozilla/css-animations/test_document-get-animations.html
r251571 r251573 1 1 <!doctype html> 2 2 <meta charset=utf-8> 3 <title>Document.getAnimations() for CSS animations</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composite-order"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/testcommon.js"></script> 3 <script src="../../../resources/testharness.js"></script> 4 <script src="../../../resources/testharnessreport.js"></script> 5 <script src="../resources/testcommon.js"></script> 8 6 <style> 9 7 @keyframes animLeft { … … 19 17 to { right: 100px } 20 18 } 19 ::before { 20 content: '' 21 } 22 ::after { 23 content: '' 24 } 21 25 </style> 26 <body> 22 27 <div id="log"></div> 23 28 <script> 24 29 'use strict'; 25 30 26 test( t =>{31 test(function(t) { 27 32 assert_equals(document.getAnimations().length, 0, 28 33 'getAnimations returns an empty sequence for a document' … … 30 35 }, 'getAnimations for non-animated content'); 31 36 32 test( t =>{33 constdiv = addDiv(t);37 test(function(t) { 38 var div = addDiv(t); 34 39 35 40 // Add an animation … … 49 54 }, 'getAnimations for CSS Animations'); 50 55 51 test( t =>{52 constdiv = addDiv(t);56 test(function(t) { 57 var div = addDiv(t); 53 58 div.style.animation = 'animLeft 100s, animTop 100s, animRight 100s, ' + 54 59 'animBottom 100s'; 55 60 56 constanimations = document.getAnimations();61 var animations = document.getAnimations(); 57 62 assert_equals(animations.length, 4, 58 63 'getAnimations returns all running CSS Animations'); … … 67 72 }, 'Order of CSS Animations - within an element'); 68 73 69 test( t =>{70 constdiv1 = addDiv(t, { style: 'animation: animLeft 100s' });71 constdiv2 = addDiv(t, { style: 'animation: animLeft 100s' });72 constdiv3 = addDiv(t, { style: 'animation: animLeft 100s' });73 constdiv4 = addDiv(t, { style: 'animation: animLeft 100s' });74 75 letanimations = document.getAnimations();74 test(function(t) { 75 var div1 = addDiv(t, { style: 'animation: animLeft 100s' }); 76 var div2 = addDiv(t, { style: 'animation: animLeft 100s' }); 77 var div3 = addDiv(t, { style: 'animation: animLeft 100s' }); 78 var div4 = addDiv(t, { style: 'animation: animLeft 100s' }); 79 80 var animations = document.getAnimations(); 76 81 assert_equals(animations.length, 4, 77 82 'getAnimations returns all running CSS Animations'); … … 108 113 }, 'Order of CSS Animations - across elements'); 109 114 110 test( t =>{111 constdiv1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });112 constdiv2 = addDiv(t, { style: 'animation: animBottom 100s' });113 114 letexpectedResults = [ [ div1, 'animLeft' ],115 116 117 letanimations = document.getAnimations();115 test(function(t) { 116 var div1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' }); 117 var div2 = addDiv(t, { style: 'animation: animBottom 100s' }); 118 119 var expectedResults = [ [ div1, 'animLeft' ], 120 [ div1, 'animTop' ], 121 [ div2, 'animBottom' ] ]; 122 var animations = document.getAnimations(); 118 123 assert_equals(animations.length, expectedResults.length, 119 124 'getAnimations returns all running CSS Animations'); 120 animations.forEach( (anim, i) =>{125 animations.forEach(function(anim, i) { 121 126 assert_equals(anim.effect.target, expectedResults[i][0], 122 127 'Target of animation in position ' + i); … … 137 142 'getAnimations returns all running CSS Animations after ' + 138 143 'making changes'); 139 animations.forEach( (anim, i) =>{144 animations.forEach(function(anim, i) { 140 145 assert_equals(anim.effect.target, expectedResults[i][0], 141 146 'Target of animation in position ' + i + ' after changes'); … … 145 150 }, 'Order of CSS Animations - across and within elements'); 146 151 147 test( t =>{148 constdiv = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });149 constanimLeft = document.getAnimations()[0];152 test(function(t) { 153 var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' }); 154 var animLeft = document.getAnimations()[0]; 150 155 assert_equals(animLeft.animationName, 'animLeft', 151 156 'Originally, animLeft animation comes first'); … … 155 160 animLeft.play(); 156 161 157 constanimations = document.getAnimations();162 var animations = document.getAnimations(); 158 163 assert_equals(animations.length, 2, 159 164 'getAnimations returns markup-bound and free animations'); … … 163 168 }, 'Order of CSS Animations - markup-bound vs free animations'); 164 169 165 test( t =>{166 constdiv = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });167 constanimLeft = document.getAnimations()[0];168 constanimTop = document.getAnimations()[1];170 test(function(t) { 171 var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' }); 172 var animLeft = document.getAnimations()[0]; 173 var animTop = document.getAnimations()[1]; 169 174 170 175 // Disassociate both animations from markup and restart in opposite order … … 173 178 animLeft.play(); 174 179 175 constanimations = document.getAnimations();180 var animations = document.getAnimations(); 176 181 assert_equals(animations.length, 2, 177 182 'getAnimations returns free animations'); … … 189 194 }, 'Order of CSS Animations - free animations'); 190 195 191 test( t =>{196 test(function(t) { 192 197 // Add an animation first 193 constdiv = addDiv(t, { style: 'animation: animLeft 100s' });198 var div = addDiv(t, { style: 'animation: animLeft 100s' }); 194 199 div.style.top = '0px'; 195 200 div.style.transition = 'all 100s'; … … 201 206 202 207 // Although the transition was added later, it should come first in the list 203 constanimations = document.getAnimations();208 var animations = document.getAnimations(); 204 209 assert_equals(animations.length, 2, 205 210 'Both CSS animations and transitions are returned'); … … 208 213 }, 'Order of CSS Animations and CSS Transitions'); 209 214 210 test( t =>{211 constdiv = addDiv(t, { style: 'animation: animLeft 100s forwards' });215 test(function(t) { 216 var div = addDiv(t, { style: 'animation: animLeft 100s forwards' }); 212 217 div.getAnimations()[0].finish(); 213 218 assert_equals(document.getAnimations().length, 1, … … 215 220 }, 'Finished but filling CSS Animations are returned'); 216 221 217 test( t =>{218 constdiv = addDiv(t, { style: 'animation: animLeft 100s' });222 test(function(t) { 223 var div = addDiv(t, { style: 'animation: animLeft 100s' }); 219 224 div.getAnimations()[0].finish(); 220 225 assert_equals(document.getAnimations().length, 0, … … 222 227 }, 'Finished but not filling CSS Animations are not returned'); 223 228 224 test( t =>{225 constdiv = addDiv(t, { style: 'animation: animLeft 100s 100s' });229 test(function(t) { 230 var div = addDiv(t, { style: 'animation: animLeft 100s 100s' }); 226 231 assert_equals(document.getAnimations().length, 1, 227 232 'Yet-to-start CSS animations are returned'); 228 233 }, 'Yet-to-start CSS Animations are returned'); 229 234 230 test( t =>{231 constdiv = addDiv(t, { style: 'animation: animLeft 100s' });235 test(function(t) { 236 var div = addDiv(t, { style: 'animation: animLeft 100s' }); 232 237 div.getAnimations()[0].cancel(); 233 238 assert_equals(document.getAnimations().length, 0, 234 'CSS animations cancel ed by the API are not returned');235 }, 'CSS Animations cancel ed via the API are not returned');236 237 test( t =>{238 constdiv = addDiv(t, { style: 'animation: animLeft 100s' });239 constanim = div.getAnimations()[0];239 'CSS animations cancelled by the API are not returned'); 240 }, 'CSS Animations cancelled via the API are not returned'); 241 242 test(function(t) { 243 var div = addDiv(t, { style: 'animation: animLeft 100s' }); 244 var anim = div.getAnimations()[0]; 240 245 anim.cancel(); 241 246 anim.play(); 242 247 assert_equals(document.getAnimations().length, 1, 243 'CSS animations cancel ed and restarted by the API are ' +248 'CSS animations cancelled and restarted by the API are ' + 244 249 'returned'); 245 }, 'CSS Animations canceled and restarted via the API are returned'); 246 247 test(t => { 248 // Create two divs with the following arrangement: 249 // 250 }, 'CSS Animations cancelled and restarted via the API are returned'); 251 252 test(function(t) { 253 addStyle(t, { '#parent::after': 'animation: animLeft 10s;', 254 '#parent::before': 'animation: animRight 10s;' }); 255 // create two divs with these arrangement: 250 256 // parent 251 // (::marker,)252 257 // ::before, 253 258 // ::after 254 259 // | 255 260 // child 256 257 addStyle(t, { 258 '#parent::after': "content: ''; animation: animLeft 100s;", 259 '#parent::before': "content: ''; animation: animRight 100s;", 261 var parent = addDiv(t, { 'id': 'parent' }); 262 var child = addDiv(t, { 'id': 'child' }); 263 parent.appendChild(child); 264 [parent, child].forEach((div) => { 265 div.setAttribute('style', 'animation: animBottom 10s'); 260 266 }); 261 267 262 const supportsMarkerPseudos = CSS.supports('selector(::marker)'); 263 if (supportsMarkerPseudos) { 264 addStyle(t, { 265 '#parent': 'display: list-item;', 266 '#parent::marker': "content: ''; animation: animLeft 100s;", 267 }); 268 } 269 270 const parent = addDiv(t, { id: 'parent' }); 271 const child = addDiv(t); 272 parent.appendChild(child); 273 for (const div of [parent, child]) { 274 div.setAttribute('style', 'animation: animBottom 100s'); 275 } 276 277 const expectedAnimations = [ 278 [parent, undefined], 279 [parent, '::marker'], 280 [parent, '::before'], 281 [parent, '::after'], 282 [child, undefined], 283 ]; 284 if (!supportsMarkerPseudos) { 285 expectedAnimations.splice(1, 1); 286 } 287 288 const animations = document.getAnimations(); 289 assert_equals( 290 animations.length, 291 expectedAnimations.length, 292 'CSS animations on both pseudo-elements and elements are returned' 293 ); 294 295 for (const [index, expected] of expectedAnimations.entries()) { 296 const [element, pseudo] = expected; 297 const actual = animations[index]; 298 299 if (pseudo) { 300 assert_equals( 301 actual.effect.target.element, 302 element, 303 `Animation #${index + 1} has expected target` 304 ); 305 assert_equals( 306 actual.effect.target.type, 307 pseudo, 308 `Animation #${index + 1} has expected pseudo type` 309 ); 310 } else { 311 assert_equals( 312 actual.effect.target, 313 element, 314 `Animation #${index + 1} has expected target` 315 ); 316 } 317 } 318 }, 'CSS Animations targetting (pseudo-)elements should have correct order ' 319 + 'after sorting'); 268 var anims = document.getAnimations(); 269 assert_equals(anims.length, 4, 270 'CSS animations on both pseudo-elements and elements ' + 271 'are returned'); 272 assert_equals(anims[0].effect.target, parent, 273 'The animation targeting the parent element comes first'); 274 assert_equals(anims[1].animationName, 'animRight', 275 'The animation targeting the ::before element comes second'); 276 assert_equals(anims[2].animationName, 'animLeft', 277 'The animation targeting the ::after element comes third'); 278 assert_equals(anims[3].effect.target, child, 279 'The animation targeting the child element comes last'); 280 }, 'CSS Animations targetting (pseudo-)elements should have correct order ' + 281 'after sorting'); 320 282 321 283 </script> 284 </body> -
trunk/LayoutTests/imported/mozilla/css-animations/test_effect-target.html
r251571 r251573 1 1 <!doctype html> 2 2 <meta charset=utf-8> 3 <title>CSSAnimation.effect.target</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/testcommon.js"></script> 3 <script src="../../../resources/testharness.js"></script> 4 <script src="../../../resources/testharnessreport.js"></script> 5 <script src="../resources/testcommon.js"></script> 9 6 <style> 10 7 @keyframes anim { } … … 16 13 } 17 14 </style> 15 <body> 18 16 <div id="log"></div> 19 17 <script> 20 18 'use strict'; 21 19 22 test( t =>{23 constdiv = addDiv(t);20 test(function(t) { 21 var div = addDiv(t); 24 22 div.style.animation = 'anim 100s'; 25 constanimation = div.getAnimations()[0];23 var animation = div.getAnimations()[0]; 26 24 assert_equals(animation.effect.target, div, 27 25 'Animation.target is the animatable div'); 28 26 }, 'Returned CSS animations have the correct effect target'); 29 27 30 test( t =>{28 test(function(t) { 31 29 addStyle(t, { '.after::after': 'animation: anim 10s, anim 100s;' }); 32 constdiv = addDiv(t, { class: 'after' });33 constanims = document.getAnimations();30 var div = addDiv(t, { class: 'after' }); 31 var anims = document.getAnimations(); 34 32 assert_equals(anims.length, 2, 35 33 'Got animations running on ::after pseudo element'); … … 38 36 }, 'effect.target should return the same CSSPseudoElement object each time'); 39 37 40 test( t =>{38 test(function(t) { 41 39 addStyle(t, { '.after::after': 'animation: anim 10s;' }); 42 constdiv = addDiv(t, { class: 'after' });43 constpseudoTarget = document.getAnimations()[0].effect.target;44 consteffect = new KeyframeEffect(pseudoTarget,45 { background: ["blue", "red"] },46 3 * MS_PER_SEC);47 constnewAnim = new Animation(effect, document.timeline);40 var div = addDiv(t, { class: 'after' }); 41 var pseudoTarget = document.getAnimations()[0].effect.target; 42 var effect = new KeyframeEffect(pseudoTarget, 43 { background: ["blue", "red"] }, 44 3 * MS_PER_SEC); 45 var newAnim = new Animation(effect, document.timeline); 48 46 newAnim.play(); 49 constanims = document.getAnimations();47 var anims = document.getAnimations(); 50 48 assert_equals(anims.length, 2, 51 49 'Got animations running on ::after pseudo element'); … … 62 60 63 61 </script> 62 </body> -
trunk/LayoutTests/imported/mozilla/css-animations/test_element-get-animations-expected.txt
r251571 r251573 15 15 PASS getAnimations for zero-duration CSS Animations 16 16 PASS getAnimations returns objects with the same identity 17 PASS getAnimations for CSS Animations that are cancel ed17 PASS getAnimations for CSS Animations that are cancelled 18 18 FAIL getAnimations for CSS Animations follows animation-name order assert_equals: animation order after prepending to list expected "anim1" but got "anim2" 19 PASS { subtree: false } on a leaf element returns the element's animations and ignore pseudo-elements20 FAIL { subtree: true } on a leaf element returns the element's animations and its pseudo-elements' animationsassert_equals: getAnimations({ subtree: true }) should return animations on pseudo-elements expected 3 but got 121 PASS { subtree: false } on an element with a child returns only the element's animations22 FAIL { subtree: true } on an element with a child returns animations from the element, its pseudo-elements, its child and its child pseudo-elementsassert_equals: Should find all elements, pesudo-elements that parent has expected 6 but got 123 FAIL { subtree: true } on an element with many descendants returns animations from all the descendantsassert_equals: Should find all descendants of the element expected 5 but got 119 PASS Test AnimationFilter{ subtree: false } with single element 20 FAIL Test AnimationFilter{ subtree: true } with single element assert_equals: getAnimations({ subtree: true }) should return animations on pseudo-elements expected 3 but got 1 21 PASS Test AnimationFilter{ subtree: false } with element that has a child 22 FAIL Test AnimationFilter{ subtree: true } with element that has a child assert_equals: Should find all elements, pesudo-elements that parent has expected 6 but got 1 23 FAIL Test AnimationFilter{ subtree: true } with element that has many descendant assert_equals: Should find all descendants of the element expected 5 but got 1 24 24 -
trunk/LayoutTests/imported/mozilla/css-animations/test_element-get-animations.html
r251571 r251573 1 1 <!doctype html> 2 2 <meta charset=utf-8> 3 <title>Element.getAnimations() for CSS animations</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/testcommon.js"></script> 3 <script src="../../../resources/testharness.js"></script> 4 <script src="../../../resources/testharnessreport.js"></script> 5 <script src="../resources/testcommon.js"></script> 9 6 <style> 10 7 @keyframes anim1 { … … 25 22 @keyframes empty { } 26 23 </style> 24 <body> 27 25 <div id="log"></div> 28 26 <script> 29 27 'use strict'; 30 28 31 test( t =>{32 constdiv = addDiv(t);29 test(function(t) { 30 var div = addDiv(t); 33 31 assert_equals(div.getAnimations().length, 0, 34 32 'getAnimations returns an empty sequence for an element' … … 36 34 }, 'getAnimations for non-animated content'); 37 35 38 promise_test(async t => { 39 const div = addDiv(t); 36 promise_test(function(t) { 37 var div = addDiv(t); 38 39 // FIXME: This test does too many things. It should be split up. 40 40 41 41 // Add an animation 42 42 div.style.animation = 'anim1 100s'; 43 letanimations = div.getAnimations();43 var animations = div.getAnimations(); 44 44 assert_equals(animations.length, 1, 45 45 'getAnimations returns an Animation running CSS Animations'); 46 await animations[0].ready; 47 48 // Add a second animation 49 div.style.animation = 'anim1 100s, anim2 100s'; 50 animations = div.getAnimations(); 51 assert_equals(animations.length, 2, 52 'getAnimations returns one CSSAnimation for each value of animation-name'); 53 // (We don't check the order of the Animations since that is covered by tests 54 // later in this file.) 46 return animations[0].ready.then(function() { 47 var startTime = animations[0].startTime; 48 assert_true(startTime > 0 && startTime <= document.timeline.currentTime, 49 'CSS animation has a sensible start time'); 50 51 // Wait a moment then add a second animation. 52 // 53 // We wait for the next frame so that we can test that the start times of 54 // the animations differ. 55 return waitForFrame(); 56 }).then(function() { 57 div.style.animation = 'anim1 100s, anim2 100s'; 58 animations = div.getAnimations(); 59 assert_equals(animations.length, 2, 60 'getAnimations returns one Animation for each value of' 61 + ' animation-name'); 62 // Wait until both Animations are ready 63 // (We don't make any assumptions about the order of the Animations since 64 // that is the purpose of the following test.) 65 return waitForAllAnimations(animations); 66 }).then(function() { 67 assert_true(animations[0].startTime < animations[1].startTime, 68 'Additional Animations for CSS animations start after the original' 69 + ' animation and appear later in the list'); 70 }); 55 71 }, 'getAnimations for CSS Animations'); 56 72 57 test( t =>{58 constdiv = addDiv(t, { style: 'animation: anim1 100s' });73 test(function(t) { 74 var div = addDiv(t, { style: 'animation: anim1 100s' }); 59 75 assert_class_string(div.getAnimations()[0], 'CSSAnimation', 60 76 'Interface of returned animation is CSSAnimation'); 61 77 }, 'getAnimations returns CSSAnimation objects for CSS Animations'); 62 78 63 test( t =>{64 constdiv = addDiv(t);79 test(function(t) { 80 var div = addDiv(t); 65 81 66 82 // Add an animation that targets multiple properties … … 71 87 }, 'getAnimations for multi-property animations'); 72 88 73 promise_test( async t =>{74 constdiv = addDiv(t);89 promise_test(function(t) { 90 var div = addDiv(t); 75 91 76 92 // Add an animation … … 80 96 81 97 // Wait until a frame after the animation starts, then add a transition 82 let animations = div.getAnimations(); 83 await animations[0].ready; 84 await waitForFrame(); 85 86 div.style.transition = 'all 100s'; 87 div.style.backgroundColor = 'green'; 88 89 animations = div.getAnimations(); 90 assert_equals(animations.length, 2, 91 'getAnimations returns Animations for both animations and' 92 + ' transitions that run simultaneously'); 93 assert_class_string(animations[0], 'CSSTransition', 94 'First-returned animation is the CSS Transition'); 95 assert_class_string(animations[1], 'CSSAnimation', 96 'Second-returned animation is the CSS Animation'); 98 var animations = div.getAnimations(); 99 return animations[0].ready.then(waitForFrame).then(function() { 100 div.style.transition = 'all 100s'; 101 div.style.backgroundColor = 'green'; 102 103 animations = div.getAnimations(); 104 assert_equals(animations.length, 2, 105 'getAnimations returns Animations for both animations and' 106 + ' transitions that run simultaneously'); 107 assert_class_string(animations[0], 'CSSTransition', 108 'First-returned animation is the CSS Transition'); 109 assert_class_string(animations[1], 'CSSAnimation', 110 'Second-returned animation is the CSS Animation'); 111 }); 97 112 }, 'getAnimations for both CSS Animations and CSS Transitions at once'); 98 113 99 async_test( t =>{100 constdiv = addDiv(t);114 async_test(function(t) { 115 var div = addDiv(t); 101 116 102 117 // Set up event listener 103 div.addEventListener('animationend', t.step_func( () =>{118 div.addEventListener('animationend', t.step_func(function() { 104 119 assert_equals(div.getAnimations().length, 0, 105 120 'getAnimations does not return Animations for finished ' … … 112 127 }, 'getAnimations for CSS Animations that have finished'); 113 128 114 async_test( t =>{115 constdiv = addDiv(t);129 async_test(function(t) { 130 var div = addDiv(t); 116 131 117 132 // Set up event listener 118 div.addEventListener('animationend', t.step_func( () =>{133 div.addEventListener('animationend', t.step_func(function() { 119 134 assert_equals(div.getAnimations().length, 1, 120 135 'getAnimations returns Animations for CSS Animations that have' … … 128 143 + ' forwards filling'); 129 144 130 test( t =>{131 constdiv = addDiv(t);145 test(function(t) { 146 var div = addDiv(t); 132 147 div.style.animation = 'none 100s'; 133 148 134 letanimations = div.getAnimations();149 var animations = div.getAnimations(); 135 150 assert_equals(animations.length, 0, 136 151 'getAnimations returns an empty sequence for an element' … … 144 159 }, 'getAnimations for CSS Animations with animation-name: none'); 145 160 146 test( t =>{147 constdiv = addDiv(t);161 test(function(t) { 162 var div = addDiv(t); 148 163 div.style.animation = 'missing 100s'; 149 letanimations = div.getAnimations();164 var animations = div.getAnimations(); 150 165 assert_equals(animations.length, 0, 151 166 'getAnimations returns an empty sequence for an element' … … 159 174 }, 'getAnimations for CSS Animations with animation-name: missing'); 160 175 161 promise_test( async t =>{162 constdiv = addDiv(t);176 promise_test(function(t) { 177 var div = addDiv(t); 163 178 div.style.animation = 'anim1 100s, notyet 100s'; 164 letanimations = div.getAnimations();179 var animations = div.getAnimations(); 165 180 assert_equals(animations.length, 1, 166 181 'getAnimations initally only returns Animations for CSS Animations whose' 167 182 + ' animation-name is found'); 168 183 169 await animations[0].ready; 170 await waitForFrame(); 171 172 const keyframes = '@keyframes notyet { to { left: 100px; } }'; 173 document.styleSheets[0].insertRule(keyframes, 0); 174 animations = div.getAnimations(); 175 assert_equals(animations.length, 2, 176 'getAnimations includes Animation when @keyframes rule is added' 177 + ' later'); 178 await waitForAllAnimations(animations); 179 180 assert_true(animations[0].startTime < animations[1].startTime, 181 'Newly added animation has a later start time'); 182 document.styleSheets[0].deleteRule(0); 184 return animations[0].ready.then(waitForFrame).then(function() { 185 var keyframes = '@keyframes notyet { to { left: 100px; } }'; 186 document.styleSheets[0].insertRule(keyframes, 0); 187 animations = div.getAnimations(); 188 assert_equals(animations.length, 2, 189 'getAnimations includes Animation when @keyframes rule is added' 190 + ' later'); 191 return waitForAllAnimations(animations); 192 }).then(function() { 193 assert_true(animations[0].startTime < animations[1].startTime, 194 'Newly added animation has a later start time'); 195 document.styleSheets[0].deleteRule(0); 196 }); 183 197 }, 'getAnimations for CSS Animations where the @keyframes rule is added' 184 198 + ' later'); 185 199 186 test( t =>{187 constdiv = addDiv(t);200 test(function(t) { 201 var div = addDiv(t); 188 202 div.style.animation = 'anim1 100s, anim1 100s'; 189 203 assert_equals(div.getAnimations().length, 2, … … 192 206 }, 'getAnimations for CSS Animations with duplicated animation-name'); 193 207 194 test( t =>{195 constdiv = addDiv(t);208 test(function(t) { 209 var div = addDiv(t); 196 210 div.style.animation = 'empty 100s'; 197 211 assert_equals(div.getAnimations().length, 1, … … 200 214 }, 'getAnimations for CSS Animations with empty keyframes rule'); 201 215 202 promise_test( async t =>{203 constdiv = addDiv(t);216 promise_test(function(t) { 217 var div = addDiv(t); 204 218 div.style.animation = 'anim1 100s 100s'; 205 constanimations = div.getAnimations();219 var animations = div.getAnimations(); 206 220 assert_equals(animations.length, 1, 207 221 'getAnimations returns animations for CSS animations whose' 208 222 + ' delay makes them start later'); 209 await animations[0].ready; 210 await waitForFrame(); 211 212 assert_true(animations[0].startTime <= document.timeline.currentTime, 213 'For CSS Animations in delay phase, the start time of the Animation is' 214 + ' not in the future'); 223 return animations[0].ready.then(waitForFrame).then(function() { 224 assert_true(animations[0].startTime <= document.timeline.currentTime, 225 'For CSS Animations in delay phase, the start time of the Animation is' 226 + ' not in the future'); 227 }); 215 228 }, 'getAnimations for CSS animations in delay phase'); 216 229 217 test( t =>{218 constdiv = addDiv(t);230 test(function(t) { 231 var div = addDiv(t); 219 232 div.style.animation = 'anim1 0s 100s'; 220 233 assert_equals(div.getAnimations().length, 1, … … 224 237 }, 'getAnimations for zero-duration CSS Animations'); 225 238 226 test( t =>{227 constdiv = addDiv(t);239 test(function(t) { 240 var div = addDiv(t); 228 241 div.style.animation = 'anim1 100s'; 229 constoriginalAnimation = div.getAnimations()[0];242 var originalAnimation = div.getAnimations()[0]; 230 243 231 244 // Update pause state (an Animation change) 232 245 div.style.animationPlayState = 'paused'; 233 constpendingAnimation = div.getAnimations()[0];246 var pendingAnimation = div.getAnimations()[0]; 234 247 assert_equals(pendingAnimation.playState, 'paused', 235 248 'animation\'s play state is updated'); … … 240 253 // Update duration (an Animation change) 241 254 div.style.animationDuration = '200s'; 242 const extendedAnimation = div.getAnimations()[0]; 243 assert_equals( 244 extendedAnimation.effect.getTiming().duration, 245 200 * MS_PER_SEC, 246 'animation\'s duration has been updated' 247 ); 255 var extendedAnimation = div.getAnimations()[0]; 256 // FIXME: Check extendedAnimation.effect.timing.duration has changed once the 257 // API is available 248 258 assert_equals(originalAnimation, extendedAnimation, 249 259 'getAnimations returns the same objects even when their' … … 251 261 }, 'getAnimations returns objects with the same identity'); 252 262 253 test( t =>{254 constdiv = addDiv(t);263 test(function(t) { 264 var div = addDiv(t); 255 265 div.style.animation = 'anim1 100s'; 256 266 257 267 assert_equals(div.getAnimations().length, 1, 258 'getAnimations returns an animation before cancel ing');259 260 constanimation = div.getAnimations()[0];268 'getAnimations returns an animation before cancelling'); 269 270 var animation = div.getAnimations()[0]; 261 271 262 272 animation.cancel(); 263 273 assert_equals(div.getAnimations().length, 0, 264 'getAnimations does not return cancel ed animations');274 'getAnimations does not return cancelled animations'); 265 275 266 276 animation.play(); 267 277 assert_equals(div.getAnimations().length, 1, 268 'getAnimations returns cancel ed animations that have been re-started');269 270 }, 'getAnimations for CSS Animations that are cancel ed');271 272 promise_test( async t =>{273 constdiv = addDiv(t);278 'getAnimations returns cancelled animations that have been re-started'); 279 280 }, 'getAnimations for CSS Animations that are cancelled'); 281 282 promise_test(function(t) { 283 var div = addDiv(t); 274 284 div.style.animation = 'anim2 100s'; 275 285 276 await div.getAnimations()[0].ready;277 278 // Prepend to the list and test that even though anim1 was triggered279 // *after* anim2, it should come first because it appears first280 // in the animation-name property.281 div.style.animation = 'anim1 100s, anim2 100s';282 let anims = div.getAnimations();283 assert_equals(anims[0].animationName, 'anim1',284 'animation order after prepending to list');285 assert_equals(anims[1].animationName, 'anim2',286 'animation order after prepending to list'); 287 288 // Normally calling cancel and play would this push anim1 to the top of289 // the stack but it shouldn't for CSS animations that map an the290 // animation-name property.291 const anim1 = anims[0];292 anim1.cancel();293 anim1.play();294 anims = div.getAnimations();295 assert_equals(anims[0].animationName, 'anim1',296 'animation order after canceling and restarting');297 assert_equals(anims[1].animationName, 'anim2',298 'animation order after canceling and restarting');286 return div.getAnimations()[0].ready.then(function() { 287 // Prepend to the list and test that even though anim1 was triggered 288 // *after* anim2, it should come first because it appears first 289 // in the animation-name property. 290 div.style.animation = 'anim1 100s, anim2 100s'; 291 var anims = div.getAnimations(); 292 assert_equals(anims[0].animationName, 'anim1', 293 'animation order after prepending to list'); 294 assert_equals(anims[1].animationName, 'anim2', 295 'animation order after prepending to list'); 296 297 // Normally calling cancel and play would this push anim1 to the top of 298 // the stack but it shouldn't for CSS animations that map an the 299 // animation-name property. 300 var anim1 = anims[0]; 301 anim1.cancel(); 302 anim1.play(); 303 anims = div.getAnimations(); 304 assert_equals(anims[0].animationName, 'anim1', 305 'animation order after cancelling and restarting'); 306 assert_equals(anims[1].animationName, 'anim2', 307 'animation order after cancelling and restarting'); 308 }); 299 309 }, 'getAnimations for CSS Animations follows animation-name order'); 300 310 301 test( t =>{311 test(function(t) { 302 312 addStyle(t, { '#target::after': 'animation: anim1 10s;', 303 313 '#target::before': 'animation: anim1 10s;' }); 304 consttarget = addDiv(t, { 'id': 'target' });314 var target = addDiv(t, { 'id': 'target' }); 305 315 target.style.animation = 'anim1 100s'; 306 316 307 constanimations = target.getAnimations({ subtree: false });317 var animations = target.getAnimations({ subtree: false }); 308 318 assert_equals(animations.length, 1, 309 319 'Should find only the element'); 310 320 assert_equals(animations[0].effect.target, target, 311 321 'Effect target should be the element'); 312 }, '{ subtree: false } on a leaf element returns the element\'s animations' 313 + ' and ignore pseudo-elements'); 314 315 test(t => { 322 }, 'Test AnimationFilter{ subtree: false } with single element'); 323 324 test(function(t) { 316 325 addStyle(t, { '#target::after': 'animation: anim1 10s;', 317 326 '#target::before': 'animation: anim1 10s;' }); 318 consttarget = addDiv(t, { 'id': 'target' });327 var target = addDiv(t, { 'id': 'target' }); 319 328 target.style.animation = 'anim1 100s'; 320 329 321 constanimations = target.getAnimations({ subtree: true });330 var animations = target.getAnimations({ subtree: true }); 322 331 assert_equals(animations.length, 3, 323 332 'getAnimations({ subtree: true }) ' + … … 332 341 'The animation targeting the ::after pesudo-element ' + 333 342 'should be returned last'); 334 }, '{ subtree: true } on a leaf element returns the element\'s animations' 335 + ' and its pseudo-elements\' animations'); 336 337 test(t => { 343 }, 'Test AnimationFilter{ subtree: true } with single element'); 344 345 test(function(t) { 338 346 addStyle(t, { '#parent::after': 'animation: anim1 10s;', 339 347 '#parent::before': 'animation: anim1 10s;', 340 348 '#child::after': 'animation: anim1 10s;', 341 349 '#child::before': 'animation: anim1 10s;' }); 342 constparent = addDiv(t, { 'id': 'parent' });350 var parent = addDiv(t, { 'id': 'parent' }); 343 351 parent.style.animation = 'anim1 100s'; 344 constchild = addDiv(t, { 'id': 'child' });352 var child = addDiv(t, { 'id': 'child' }); 345 353 child.style.animation = 'anim1 100s'; 346 354 parent.appendChild(child); 347 355 348 constanimations = parent.getAnimations({ subtree: false });356 var animations = parent.getAnimations({ subtree: false }); 349 357 assert_equals(animations.length, 1, 350 358 'Should find only the element even if it has a child'); 351 359 assert_equals(animations[0].effect.target, parent, 352 360 'Effect target shuld be the element'); 353 }, '{ subtree: false } on an element with a child returns only the element\'s' 354 + ' animations'); 355 356 test(t => { 361 }, 'Test AnimationFilter{ subtree: false } with element that has a child'); 362 363 test(function(t) { 357 364 addStyle(t, { '#parent::after': 'animation: anim1 10s;', 358 365 '#parent::before': 'animation: anim1 10s;', 359 366 '#child::after': 'animation: anim1 10s;', 360 367 '#child::before': 'animation: anim1 10s;' }); 361 constparent = addDiv(t, { 'id': 'parent' });362 constchild = addDiv(t, { 'id': 'child' });368 var parent = addDiv(t, { 'id': 'parent' }); 369 var child = addDiv(t, { 'id': 'child' }); 363 370 parent.style.animation = 'anim1 100s'; 364 371 child.style.animation = 'anim1 100s'; 365 372 parent.appendChild(child); 366 373 367 constanimations = parent.getAnimations({ subtree: true });374 var animations = parent.getAnimations({ subtree: true }); 368 375 assert_equals(animations.length, 6, 369 376 'Should find all elements, pesudo-elements that parent has'); … … 375 382 'The animation targeting the ::before pseudo-element ' + 376 383 'should be returned second'); 377 assert_equals(animations[1].effect.target. element, parent,384 assert_equals(animations[1].effect.target.parentElement, parent, 378 385 'This ::before element should be child of parent element'); 379 386 assert_equals(animations[2].effect.target.type, '::after', 380 387 'The animation targeting the ::after pesudo-element ' + 381 388 'should be returned third'); 382 assert_equals(animations[2].effect.target. element, parent,389 assert_equals(animations[2].effect.target.parentElement, parent, 383 390 'This ::after element should be child of parent element'); 384 391 … … 389 396 'The animation targeting the ::before pseudo-element ' + 390 397 'should be returned fifth'); 391 assert_equals(animations[4].effect.target. element, child,398 assert_equals(animations[4].effect.target.parentElement, child, 392 399 'This ::before element should be child of child element'); 393 400 assert_equals(animations[5].effect.target.type, '::after', 394 401 'The animation targeting the ::after pesudo-element ' + 395 402 'should be returned last'); 396 assert_equals(animations[5].effect.target. element, child,403 assert_equals(animations[5].effect.target.parentElement, child, 397 404 'This ::after element should be child of child element'); 398 }, '{ subtree: true } on an element with a child returns animations from the' 399 + ' element, its pseudo-elements, its child and its child pseudo-elements'); 400 401 test(t => { 402 const parent = addDiv(t, { 'id': 'parent' }); 403 const child1 = addDiv(t, { 'id': 'child1' }); 404 const grandchild1 = addDiv(t, { 'id': 'grandchild1' }); 405 const grandchild2 = addDiv(t, { 'id': 'grandchild2' }); 406 const child2 = addDiv(t, { 'id': 'child2' }); 405 }, 'Test AnimationFilter{ subtree: true } with element that has a child'); 406 407 test(function(t) { 408 var parent = addDiv(t, { 'id': 'parent' }); 409 var child1 = addDiv(t, { 'id': 'child1' }); 410 var grandchild1 = addDiv(t, { 'id': 'grandchild1' }); 411 var grandchild2 = addDiv(t, { 'id': 'grandchild2' }); 412 var child2 = addDiv(t, { 'id': 'child2' }); 407 413 408 414 parent.style.animation = 'anim1 100s'; … … 417 423 parent.appendChild(child2); 418 424 419 constanimations = parent.getAnimations({ subtree: true });425 var animations = parent.getAnimations({ subtree: true }); 420 426 assert_equals( 421 427 parent.getAnimations({ subtree: true }).length, 5, … … 442 448 'should be returned last'); 443 449 444 }, '{ subtree: true } on an element with many descendants returns animations' 445 + ' from all the descendants'); 450 }, 'Test AnimationFilter{ subtree: true } with element that has many descendant'); 446 451 447 452 </script> 453 </body> -
trunk/LayoutTests/imported/mozilla/css-animations/test_event-dispatch-expected.txt
r251571 r251573 15 15 PASS Active -> Idle -> Active: animationstart is fired by restarting animation 16 16 PASS Negative playbackRate sanity test(Before -> Active -> Before) 17 PASS Redundant change, before -> active, then back 18 PASS Redundant change, before -> after, then back 19 PASS Redundant change, active -> before, then back 20 PASS Redundant change, active -> after, then back 21 PASS Redundant change, after -> before, then back 22 PASS Redundant change, after -> active, then back 23 PASS Call Animation.cancel after canceling animation. 24 PASS Restart animation after canceling animation immediately. 17 PASS Call Animation.cancel after cancelling animation. 18 PASS Restart animation after cancelling animation immediately. 25 19 PASS Call Animation.cancel after restarting animation immediately. 26 20 PASS Set timeline and play transition after clearing the timeline. 27 PASS Set null target effect after cancel ing the animation.21 PASS Set null target effect after cancelling the animation. 28 22 PASS Cancel the animation after clearing the target effect. 29 23 -
trunk/LayoutTests/imported/mozilla/css-animations/test_keyframeeffect-getkeyframes-expected.txt
r251571 r251573 23 23 FAIL KeyframeEffect.getKeyframes() returns expected values for animations with CSS variables as keyframe values in a shorthand property assert_equals: properties on ComputedKeyframe #0 expected "composite,computedOffset,easing,marginBottom,marginLeft,marginRight,marginTop,offset" but got "composite,computedOffset,easing,offset" 24 24 FAIL KeyframeEffect.getKeyframes() returns expected values for animations with a CSS variable which is overriden by the value in keyframe assert_equals: properties on ComputedKeyframe #0 expected "color,composite,computedOffset,easing,offset" but got "composite,computedOffset,easing,offset" 25 FAIL KeyframeEffect.getKeyframes() returns expected values for animations with only custom property in a keyframe assert_equals: value for 'transform' on ComputedKeyframe #0 expected "translate(100px )" but got "none"25 FAIL KeyframeEffect.getKeyframes() returns expected values for animations with only custom property in a keyframe assert_equals: value for 'transform' on ComputedKeyframe #0 expected "translate(100px, 0px)" but got "none" 26 26 -
trunk/LayoutTests/imported/mozilla/css-animations/test_keyframeeffect-getkeyframes.html
r251571 r251573 1 1 <!doctype html> 2 2 <meta charset=utf-8> 3 <title>KeyframeEffect.getKeyframes() for CSS animations</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/testcommon.js"></script> 3 <script src="../../../resources/testharness.js"></script> 4 <script src="../../../resources/testharnessreport.js"></script> 5 <script src="../resources/testcommon.js"></script> 9 6 <style> 10 7 @keyframes anim-empty { } … … 163 160 "use strict"; 164 161 165 const getKeyframes = elem => elem.getAnimations()[0].effect.getKeyframes(); 166 167 const assert_frames_equal = (a, b, name) => { 162 function getKeyframes(e) { 163 return e.getAnimations()[0].effect.getKeyframes(); 164 } 165 166 function assert_frames_equal(a, b, name) { 168 167 assert_equals(Object.keys(a).sort().toString(), 169 168 Object.keys(b).sort().toString(), 170 169 "properties on " + name); 171 for ( constp in a) {170 for (var p in a) { 172 171 if (p === 'offset' || p === 'computedOffset') { 173 172 assert_approx_equals(a[p], b[p], 0.00001, … … 177 176 } 178 177 } 179 } ;178 } 180 179 181 180 // animation-timing-function values to test with, where the value … … 197 196 ]; 198 197 199 test( t =>{200 constdiv = addDiv(t);198 test(function(t) { 199 var div = addDiv(t); 201 200 202 201 div.style.animation = 'anim-empty 100s'; … … 220 219 + ' of empty enimations'); 221 220 222 test( t =>{223 constdiv = addDiv(t);221 test(function(t) { 222 var div = addDiv(t); 224 223 225 224 div.style.animation = 'anim-simple 100s'; 226 constframes = getKeyframes(div);227 228 assert_equals(frames.length, 2, "number of frames"); 229 230 constexpected = [225 var frames = getKeyframes(div); 226 227 assert_equals(frames.length, 2, "number of frames"); 228 229 var expected = [ 231 230 { offset: 0, computedOffset: 0, easing: "ease", 232 231 color: "rgb(0, 0, 0)", composite: "auto" }, … … 235 234 ]; 236 235 237 for ( leti = 0; i < frames.length; i++) {236 for (var i = 0; i < frames.length; i++) { 238 237 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 239 238 } … … 241 240 + ' animation'); 242 241 243 test( t =>{244 for (const easing of kTimingFunctionValues) {245 constdiv = addDiv(t);242 test(function(t) { 243 kTimingFunctionValues.forEach(function(easing) { 244 var div = addDiv(t); 246 245 247 246 div.style.animation = 'anim-simple-three 100s ' + easing; 248 constframes = getKeyframes(div);247 var frames = getKeyframes(div); 249 248 250 249 assert_equals(frames.length, 3, "number of frames"); 251 250 252 for ( leti = 0; i < frames.length; i++) {251 for (var i = 0; i < frames.length; i++) { 253 252 assert_equals(frames[i].easing, easing, 254 253 "value for 'easing' on ComputedKeyframe #" + i); 255 254 } 256 } 255 }); 257 256 }, 'KeyframeEffect.getKeyframes() returns frames with expected easing' 258 257 + ' values, when the easing comes from animation-timing-function on the' 259 258 + ' element'); 260 259 261 test( t =>{262 constdiv = addDiv(t);260 test(function(t) { 261 var div = addDiv(t); 263 262 264 263 div.style.animation = 'anim-simple-timing 100s'; 265 constframes = getKeyframes(div);264 var frames = getKeyframes(div); 266 265 267 266 assert_equals(frames.length, 3, "number of frames"); … … 275 274 + ' values, when the easing is specified on each keyframe'); 276 275 277 test( t =>{278 constdiv = addDiv(t);276 test(function(t) { 277 var div = addDiv(t); 279 278 280 279 div.style.animation = 'anim-simple-timing-some 100s step-start'; 281 constframes = getKeyframes(div);280 var frames = getKeyframes(div); 282 281 283 282 assert_equals(frames.length, 3, "number of frames"); … … 291 290 + ' values, when the easing is specified on some keyframes'); 292 291 293 test( t =>{294 constdiv = addDiv(t);292 test(function(t) { 293 var div = addDiv(t); 295 294 296 295 div.style.animation = 'anim-simple-shorthand 100s'; 297 constframes = getKeyframes(div);298 299 assert_equals(frames.length, 2, "number of frames"); 300 301 constexpected = [296 var frames = getKeyframes(div); 297 298 assert_equals(frames.length, 2, "number of frames"); 299 300 var expected = [ 302 301 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 303 302 marginBottom: "8px", marginLeft: "8px", … … 308 307 ]; 309 308 310 for ( leti = 0; i < frames.length; i++) {309 for (var i = 0; i < frames.length; i++) { 311 310 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 312 311 } … … 314 313 + ' animation that specifies a single shorthand property'); 315 314 316 test( t =>{317 constdiv = addDiv(t);315 test(function(t) { 316 var div = addDiv(t); 318 317 319 318 div.style.animation = 'anim-omit-to 100s'; 320 319 div.style.color = 'rgb(255, 255, 255)'; 321 constframes = getKeyframes(div);322 323 assert_equals(frames.length, 2, "number of frames"); 324 325 constexpected = [320 var frames = getKeyframes(div); 321 322 assert_equals(frames.length, 2, "number of frames"); 323 324 var expected = [ 326 325 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 327 326 color: "rgb(0, 0, 255)" }, … … 330 329 ]; 331 330 332 for ( leti = 0; i < frames.length; i++) {331 for (var i = 0; i < frames.length; i++) { 333 332 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 334 333 } … … 336 335 'animation with a 0% keyframe and no 100% keyframe'); 337 336 338 test( t =>{339 constdiv = addDiv(t);337 test(function(t) { 338 var div = addDiv(t); 340 339 341 340 div.style.animation = 'anim-omit-from 100s'; 342 341 div.style.color = 'rgb(255, 255, 255)'; 343 constframes = getKeyframes(div);344 345 assert_equals(frames.length, 2, "number of frames"); 346 347 constexpected = [342 var frames = getKeyframes(div); 343 344 assert_equals(frames.length, 2, "number of frames"); 345 346 var expected = [ 348 347 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 349 348 color: "rgb(255, 255, 255)" }, … … 352 351 ]; 353 352 354 for ( leti = 0; i < frames.length; i++) {353 for (var i = 0; i < frames.length; i++) { 355 354 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 356 355 } … … 358 357 'animation with a 100% keyframe and no 0% keyframe'); 359 358 360 test( t =>{361 constdiv = addDiv(t);359 test(function(t) { 360 var div = addDiv(t); 362 361 363 362 div.style.animation = 'anim-omit-from-to 100s'; 364 363 div.style.color = 'rgb(255, 255, 255)'; 365 constframes = getKeyframes(div);364 var frames = getKeyframes(div); 366 365 367 366 assert_equals(frames.length, 3, "number of frames"); 368 367 369 constexpected = [368 var expected = [ 370 369 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 371 370 color: "rgb(255, 255, 255)" }, … … 376 375 ]; 377 376 378 for ( leti = 0; i < frames.length; i++) {377 for (var i = 0; i < frames.length; i++) { 379 378 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 380 379 } … … 382 381 'animation with no 0% or 100% keyframe but with a 50% keyframe'); 383 382 384 test( t =>{385 constdiv = addDiv(t);383 test(function(t) { 384 var div = addDiv(t); 386 385 387 386 div.style.animation = 'anim-partially-omit-to 100s'; 388 387 div.style.marginTop = '250px'; 389 constframes = getKeyframes(div);390 391 assert_equals(frames.length, 2, "number of frames"); 392 393 constexpected = [388 var frames = getKeyframes(div); 389 390 assert_equals(frames.length, 2, "number of frames"); 391 392 var expected = [ 394 393 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 395 394 marginTop: '50px', marginBottom: '100px' }, … … 398 397 ]; 399 398 400 for ( leti = 0; i < frames.length; i++) {399 for (var i = 0; i < frames.length; i++) { 401 400 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 402 401 } … … 405 404 '!important rule is ignored)'); 406 405 407 test( t =>{408 constdiv = addDiv(t);406 test(function(t) { 407 var div = addDiv(t); 409 408 410 409 div.style.animation = 'anim-different-props 100s'; 411 constframes = getKeyframes(div);410 var frames = getKeyframes(div); 412 411 413 412 assert_equals(frames.length, 4, "number of frames"); 414 413 415 constexpected = [414 var expected = [ 416 415 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 417 416 color: "rgb(0, 0, 0)", marginTop: "8px" }, … … 424 423 ]; 425 424 426 for ( leti = 0; i < frames.length; i++) {425 for (var i = 0; i < frames.length; i++) { 427 426 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 428 427 } … … 431 430 'with the same easing function'); 432 431 433 test( t =>{434 constdiv = addDiv(t);432 test(function(t) { 433 var div = addDiv(t); 435 434 436 435 div.style.animation = 'anim-different-props-and-easing 100s'; 437 constframes = getKeyframes(div);436 var frames = getKeyframes(div); 438 437 439 438 assert_equals(frames.length, 4, "number of frames"); 440 439 441 constexpected = [440 var expected = [ 442 441 { offset: 0, computedOffset: 0, easing: "linear", composite: "auto", 443 442 color: "rgb(0, 0, 0)", marginTop: "8px" }, … … 450 449 ]; 451 450 452 for ( leti = 0; i < frames.length; i++) {451 for (var i = 0; i < frames.length; i++) { 453 452 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 454 453 } … … 457 456 'a different easing function on each'); 458 457 459 test( t =>{460 constdiv = addDiv(t);458 test(function(t) { 459 var div = addDiv(t); 461 460 462 461 div.style.animation = 'anim-merge-offset 100s'; 463 constframes = getKeyframes(div);464 465 assert_equals(frames.length, 2, "number of frames"); 466 467 constexpected = [462 var frames = getKeyframes(div); 463 464 assert_equals(frames.length, 2, "number of frames"); 465 466 var expected = [ 468 467 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 469 468 color: "rgb(0, 0, 0)", marginTop: "8px" }, … … 472 471 ]; 473 472 474 for ( leti = 0; i < frames.length; i++) {473 for (var i = 0; i < frames.length; i++) { 475 474 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 476 475 } … … 479 478 'the same easing function'); 480 479 481 test( t =>{482 constdiv = addDiv(t);480 test(function(t) { 481 var div = addDiv(t); 483 482 484 483 div.style.animation = 'anim-merge-offset-and-easing 100s'; 485 constframes = getKeyframes(div);484 var frames = getKeyframes(div); 486 485 487 486 assert_equals(frames.length, 3, "number of frames"); 488 487 489 constexpected = [488 var expected = [ 490 489 { offset: 0, computedOffset: 0, easing: "steps(1)", composite: "auto", 491 490 color: "rgb(0, 0, 0)", fontSize: "16px" }, … … 497 496 ]; 498 497 499 for ( leti = 0; i < frames.length; i++) {498 for (var i = 0; i < frames.length; i++) { 500 499 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 501 500 } … … 504 503 'different easing functions'); 505 504 506 test( t =>{507 constdiv = addDiv(t);505 test(function(t) { 506 var div = addDiv(t); 508 507 509 508 div.style.animation = 'anim-no-merge-equiv-easing 100s'; 510 constframes = getKeyframes(div);509 var frames = getKeyframes(div); 511 510 512 511 assert_equals(frames.length, 3, "number of frames"); 513 512 514 constexpected = [513 var expected = [ 515 514 { offset: 0, computedOffset: 0, easing: "steps(1)", composite: "auto", 516 515 marginTop: "0px", marginRight: "0px", marginBottom: "0px" }, … … 521 520 ]; 522 521 523 for ( leti = 0; i < frames.length; i++) {522 for (var i = 0; i < frames.length; i++) { 524 523 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 525 524 } … … 528 527 'different but equivalent easing functions'); 529 528 530 test( t =>{531 constdiv = addDiv(t);529 test(function(t) { 530 var div = addDiv(t); 532 531 533 532 div.style.animation = 'anim-overriding 100s'; 534 constframes = getKeyframes(div);533 var frames = getKeyframes(div); 535 534 536 535 assert_equals(frames.length, 6, "number of frames"); 537 536 538 constexpected = [537 var expected = [ 539 538 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 540 539 paddingTop: "30px" }, … … 551 550 ]; 552 551 553 for ( leti = 0; i < frames.length; i++) {552 for (var i = 0; i < frames.length; i++) { 554 553 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 555 554 } … … 560 559 // computed value for filter, "none", is correctly represented. 561 560 562 test( t =>{563 constdiv = addDiv(t);561 test(function(t) { 562 var div = addDiv(t); 564 563 565 564 div.style.animation = 'anim-filter 100s'; 566 constframes = getKeyframes(div);567 568 assert_equals(frames.length, 2, "number of frames"); 569 570 constexpected = [565 var frames = getKeyframes(div); 566 567 assert_equals(frames.length, 2, "number of frames"); 568 569 var expected = [ 571 570 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 572 571 filter: "none" }, … … 575 574 ]; 576 575 577 for ( leti = 0; i < frames.length; i++) {576 for (var i = 0; i < frames.length; i++) { 578 577 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 579 578 } … … 581 580 'animations with filter properties and missing keyframes'); 582 581 583 test( t =>{584 constdiv = addDiv(t);582 test(function(t) { 583 var div = addDiv(t); 585 584 586 585 div.style.animation = 'anim-filter-drop-shadow 100s'; 587 constframes = getKeyframes(div);588 589 assert_equals(frames.length, 2, "number of frames"); 590 591 constexpected = [586 var frames = getKeyframes(div); 587 588 assert_equals(frames.length, 2, "number of frames"); 589 590 var expected = [ 592 591 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 593 592 filter: "drop-shadow(rgb(0, 255, 0) 10px 10px 10px)" }, … … 596 595 ]; 597 596 598 for ( leti = 0; i < frames.length; i++) {597 for (var i = 0; i < frames.length; i++) { 599 598 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 600 599 } … … 606 605 // are correctly represented. 607 606 608 test( t =>{609 constdiv = addDiv(t);607 test(function(t) { 608 var div = addDiv(t); 610 609 611 610 div.style.textShadow = '1px 1px 2px rgb(0, 0, 0), ' + … … 613 612 '0 0 3.2px rgb(0, 0, 255)'; 614 613 div.style.animation = 'anim-text-shadow 100s'; 615 constframes = getKeyframes(div);616 617 assert_equals(frames.length, 2, "number of frames"); 618 619 constexpected = [614 var frames = getKeyframes(div); 615 616 assert_equals(frames.length, 2, "number of frames"); 617 618 var expected = [ 620 619 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 621 620 textShadow: "rgb(0, 0, 0) 1px 1px 2px," … … 626 625 ]; 627 626 628 for ( leti = 0; i < frames.length; i++) {627 for (var i = 0; i < frames.length; i++) { 629 628 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 630 629 } … … 636 635 // represented. 637 636 638 test( t =>{639 constdiv = addDiv(t);637 test(function(t) { 638 var div = addDiv(t); 640 639 641 640 div.style.animation = 'anim-background-size 100s'; 642 letframes = getKeyframes(div);643 644 assert_equals(frames.length, 2, "number of frames"); 645 646 constexpected = [647 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 648 backgroundSize: "auto " },649 { offset: 1, computedOffset: 1, easing: "ease", composite: "auto", 650 backgroundSize: "50% , 6px, contain" },651 ]; 652 653 for ( leti = 0; i < frames.length; i++) {641 var frames = getKeyframes(div); 642 643 assert_equals(frames.length, 2, "number of frames"); 644 645 var expected = [ 646 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 647 backgroundSize: "auto auto" }, 648 { offset: 1, computedOffset: 1, easing: "ease", composite: "auto", 649 backgroundSize: "50% auto, 6px auto, contain" }, 650 ]; 651 652 for (var i = 0; i < frames.length; i++) { 654 653 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 655 654 } … … 658 657 659 658 expected[0].backgroundSize = div.style.backgroundSize = 660 "30px , 40%,auto";659 "30px auto, 40% auto, auto auto"; 661 660 frames = getKeyframes(div); 662 661 663 for ( leti = 0; i < frames.length; i++) {662 for (var i = 0; i < frames.length; i++) { 664 663 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i 665 664 + " after updating current style"); … … 668 667 'animations with background-size properties and missing keyframes'); 669 668 670 test( t =>{671 constdiv = addDiv(t);669 test(function(t) { 670 var div = addDiv(t); 672 671 div.style.animation = 'anim-variables 100s'; 673 672 674 constframes = getKeyframes(div);675 676 assert_equals(frames.length, 2, "number of frames"); 677 678 constexpected = [673 var frames = getKeyframes(div); 674 675 assert_equals(frames.length, 2, "number of frames"); 676 677 var expected = [ 679 678 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 680 679 transform: "none" }, 681 680 { offset: 1, computedOffset: 1, easing: "ease", composite: "auto", 682 transform: "translate(100px )" },683 ]; 684 for ( leti = 0; i < frames.length; i++) {681 transform: "translate(100px, 0px)" }, 682 ]; 683 for (var i = 0; i < frames.length; i++) { 685 684 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 686 685 } … … 688 687 'animations with CSS variables as keyframe values'); 689 688 690 test( t =>{691 constdiv = addDiv(t);689 test(function(t) { 690 var div = addDiv(t); 692 691 div.style.animation = 'anim-variables-shorthand 100s'; 693 692 694 constframes = getKeyframes(div);695 696 assert_equals(frames.length, 2, "number of frames"); 697 698 constexpected = [693 var frames = getKeyframes(div); 694 695 assert_equals(frames.length, 2, "number of frames"); 696 697 var expected = [ 699 698 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 700 699 marginBottom: "0px", … … 708 707 marginTop: "100px" }, 709 708 ]; 710 for ( leti = 0; i < frames.length; i++) {709 for (var i = 0; i < frames.length; i++) { 711 710 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 712 711 } … … 714 713 'animations with CSS variables as keyframe values in a shorthand property'); 715 714 716 test( t =>{717 constdiv = addDiv(t);715 test(function(t) { 716 var div = addDiv(t); 718 717 div.style.animation = 'anim-custom-property-in-keyframe 100s'; 719 718 720 constframes = getKeyframes(div);721 722 assert_equals(frames.length, 2, "number of frames"); 723 724 constexpected = [719 var frames = getKeyframes(div); 720 721 assert_equals(frames.length, 2, "number of frames"); 722 723 var expected = [ 725 724 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 726 725 color: "rgb(0, 0, 0)" }, … … 728 727 color: "rgb(0, 255, 0)" }, 729 728 ]; 730 for ( leti = 0; i < frames.length; i++) {729 for (var i = 0; i < frames.length; i++) { 731 730 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 732 731 } … … 734 733 'animations with a CSS variable which is overriden by the value in keyframe'); 735 734 736 test( t =>{737 constdiv = addDiv(t);735 test(function(t) { 736 var div = addDiv(t); 738 737 div.style.animation = 'anim-only-custom-property-in-keyframe 100s'; 739 738 740 constframes = getKeyframes(div);741 742 assert_equals(frames.length, 2, "number of frames"); 743 744 constexpected = [745 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 746 transform: "translate(100px )" },739 var frames = getKeyframes(div); 740 741 assert_equals(frames.length, 2, "number of frames"); 742 743 var expected = [ 744 { offset: 0, computedOffset: 0, easing: "ease", composite: "auto", 745 transform: "translate(100px, 0px)" }, 747 746 { offset: 1, computedOffset: 1, easing: "ease", composite: "auto", 748 747 transform: "none" }, 749 748 ]; 750 for ( leti = 0; i < frames.length; i++) {749 for (var i = 0; i < frames.length; i++) { 751 750 assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i); 752 751 } -
trunk/LayoutTests/imported/mozilla/css-animations/test_pseudoElement-get-animations-expected.txt
r251571 r251573 1 1 2 2 PASS getAnimations returns CSSAnimation objects 3 PASS getAnimations returns CSStransitions/animations, and script-generated animations in the expected order3 PASS getAnimations returns css transitions/animations, and script-generated animations in the expected order 4 4 -
trunk/LayoutTests/imported/mozilla/css-animations/test_pseudoElement-get-animations.html
r251571 r251573 1 1 <!doctype html> 2 2 <meta charset=utf-8> 3 <title>CSSPseudoElement.getAnimations() for CSS animations</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/testcommon.js"></script> 3 <script src="../../../resources/testharness.js"></script> 4 <script src="../../../resources/testharnessreport.js"></script> 5 <script src="../resources/testcommon.js"></script> 9 6 <style> 10 7 @keyframes anim1 { } … … 27 24 } 28 25 </style> 26 <body> 29 27 <div id="log"></div> 30 28 <script> 31 29 'use strict'; 32 30 33 test( t =>{34 constdiv = addDiv(t, { class: 'before' });35 constpseudoTarget = document.getAnimations()[0].effect.target;31 test(function(t) { 32 var div = addDiv(t, { class: 'before' }); 33 var pseudoTarget = document.getAnimations()[0].effect.target; 36 34 assert_equals(pseudoTarget.getAnimations().length, 1, 37 35 'Expected number of animations are returned'); … … 40 38 }, 'getAnimations returns CSSAnimation objects'); 41 39 42 test( t =>{43 constdiv = addDiv(t, { class: 'after-with-mix-anims-trans' });40 test(function(t) { 41 var div = addDiv(t, { class: 'after-with-mix-anims-trans' }); 44 42 // Trigger transitions 45 43 flushComputedStyle(div); … … 47 45 48 46 // Create additional animation on the pseudo-element from script 49 constpseudoTarget = document.getAnimations()[0].effect.target;50 consteffect = new KeyframeEffect(pseudoTarget,51 { background: ["blue", "red"] },52 3 * MS_PER_SEC);53 constnewAnimation = new Animation(effect, document.timeline);47 var pseudoTarget = document.getAnimations()[0].effect.target; 48 var effect = new KeyframeEffect(pseudoTarget, 49 { background: ["blue", "red"] }, 50 3 * MS_PER_SEC); 51 var newAnimation = new Animation(effect, document.timeline); 54 52 newAnimation.id = 'scripted-anim'; 55 53 newAnimation.play(); 56 54 57 55 // Check order - the script-generated animation should appear later 58 constanims = pseudoTarget.getAnimations();56 var anims = pseudoTarget.getAnimations(); 59 57 assert_equals(anims.length, 5, 60 58 'Got expected number of animations/trnasitions running on ' + … … 70 68 assert_equals(anims[4].id, 'scripted-anim', 71 69 'Animation added by script appears last'); 72 }, 'getAnimations returns CSStransitions/animations, and script-generated ' +70 }, 'getAnimations returns css transitions/animations, and script-generated ' + 73 71 'animations in the expected order'); 74 72 75 73 </script> 74 </body> -
trunk/LayoutTests/imported/mozilla/css-animations/test_setting-effect-expected.txt
r251571 r251573 4 4 PASS Replacing an animation's effect with a shorter one that should have already finished, the animation finishes immediately 5 5 PASS A play-pending animation's effect whose effect is replaced still exits the pending state 6 PASS CSS animation events aredispatched at the original element even after setting an effect with a different target element6 PASS The event is dispatched at the original element even after setting an effect with a different target element 7 7 PASS After replacing a finished animation's effect with a longer one it fires an animationstart event 8 8 -
trunk/LayoutTests/imported/mozilla/css-transitions/test_animation-cancel-expected.txt
r251571 r251573 1 1 2 PASS Animated style is cleared after cancel ing a running CSS transition2 PASS Animated style is cleared after cancelling a running CSS transition 3 3 PASS After canceling a transition, it can still be re-used 4 PASS After cancel ing a finished transition, it can still be re-used5 PASS After cancel ing a transition, updating transition properties doesn't make it live again4 PASS After cancelling a finished transition, it can still be re-used 5 PASS After cancelling a transition, updating transition properties doesn't make it live again 6 6 PASS Setting display:none on an element cancels its transitions 7 7 PASS Setting display:none cancels transitions on a child element -
trunk/LayoutTests/imported/mozilla/css-transitions/test_animation-computed-timing-expected.txt
r251571 r251573 9 9 PASS duration of a new transition 10 10 PASS direction of a new transition 11 FAIL easing of a new transition assert_equals: Initial value of easing expected "ease" but got "linear" 12 FAIL non-default easing of a new transition assert_equals: Initial value of easing expected "steps(4)" but got "linear" 11 PASS easing of a new transition 13 12 PASS endTime of a new transition 14 13 PASS activeDuration of a new transition -
trunk/LayoutTests/imported/mozilla/css-transitions/test_animation-computed-timing.html
r251571 r251573 1 1 <!doctype html> 2 2 <meta charset=utf-8> 3 <title>AnimationEffect.getComputedTiming() for CSS transitions</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/helper.js"></script> 3 <script src="../../../resources/testharness.js"></script> 4 <script src="../../../resources/testharnessreport.js"></script> 5 <script src="../resources/testcommon.js"></script> 9 6 <style> 10 7 … … 14 11 15 12 </style> 13 <body> 16 14 <div id="log"></div> 17 15 <script> … … 19 17 'use strict'; 20 18 21 22 19 // -------------------- 23 20 // delay 24 21 // -------------------- 25 26 test(t => { 27 const div = addDiv(t, { class: 'animated-div' }); 28 div.style.transition = 'margin-left 10s'; 29 getComputedStyle(div).marginLeft; 30 div.style.marginLeft = '10px'; 31 32 const effect = div.getAnimations()[0].effect; 33 assert_equals(effect.getComputedTiming().delay, 0, 'Initial value of delay'); 22 test(function(t) { 23 var div = addDiv(t, {'class': 'animated-div'}); 24 div.style.transition = 'margin-left 10s'; 25 flushComputedStyle(div); 26 div.style.marginLeft = '10px'; 27 28 29 var effect = div.getAnimations()[0].effect; 30 assert_equals(effect.getComputedTiming().delay, 0, 31 'Initial value of delay'); 34 32 }, 'delay of a new tranisition'); 35 33 36 test( t =>{37 const div = addDiv(t, { class: 'animated-div'});34 test(function(t) { 35 var div = addDiv(t, {'class': 'animated-div'}); 38 36 div.style.transition = 'margin-left 10s 10s'; 39 getComputedStyle(div).marginLeft;40 div.style.marginLeft = '10px'; 41 42 consteffect = div.getAnimations()[0].effect;37 flushComputedStyle(div); 38 div.style.marginLeft = '10px'; 39 40 var effect = div.getAnimations()[0].effect; 43 41 assert_equals(effect.getComputedTiming().delay, 10000, 44 42 'Initial value of delay'); 45 43 }, 'Positive delay of a new transition'); 46 44 47 test( t =>{48 const div = addDiv(t, { class: 'animated-div'});45 test(function(t) { 46 var div = addDiv(t, {'class': 'animated-div'}); 49 47 div.style.transition = 'margin-left 10s -5s'; 50 getComputedStyle(div).marginLeft;51 div.style.marginLeft = '10px'; 52 53 consteffect = div.getAnimations()[0].effect;48 flushComputedStyle(div); 49 div.style.marginLeft = '10px'; 50 51 var effect = div.getAnimations()[0].effect; 54 52 assert_equals(effect.getComputedTiming().delay, -5000, 55 53 'Initial value of delay'); … … 60 58 // endDelay 61 59 // -------------------- 62 63 test(t => { 64 const div = addDiv(t, { class: 'animated-div' }); 65 div.style.transition = 'margin-left 10s'; 66 getComputedStyle(div).marginLeft; 67 div.style.marginLeft = '10px'; 68 69 const effect = div.getAnimations()[0].effect; 60 test(function(t) { 61 var div = addDiv(t, {'class': 'animated-div'}); 62 div.style.transition = 'margin-left 10s'; 63 flushComputedStyle(div); 64 div.style.marginLeft = '10px'; 65 66 var effect = div.getAnimations()[0].effect; 70 67 assert_equals(effect.getComputedTiming().endDelay, 0, 71 68 'Initial value of endDelay'); … … 76 73 // fill 77 74 // -------------------- 78 79 test(t => { 80 const div = addDiv(t, { class: 'animated-div' });81 div.style.transition = 'margin-left 10s';82 getComputedStyle(div).marginLeft;83 div.style.marginLeft = '10px'; 84 85 const effect = div.getAnimations()[0].effect;86 assert_equals(effect.getComputedTiming().fill, 'backwards','Fill backwards');75 test(function(t) { 76 var div = addDiv(t, {'class': 'animated-div'}); 77 div.style.transition = 'margin-left 10s'; 78 flushComputedStyle(div); 79 div.style.marginLeft = '10px'; 80 81 var effect = div.getAnimations()[0].effect; 82 assert_equals(effect.getComputedTiming().fill, 'backwards', 83 'Fill backwards'); 87 84 }, 'fill of a new transition'); 88 85 … … 91 88 // iterationStart 92 89 // -------------------- 93 94 test(t => { 95 const div = addDiv(t, { class: 'animated-div' }); 96 div.style.transition = 'margin-left 10s'; 97 getComputedStyle(div).marginLeft; 98 div.style.marginLeft = '10px'; 99 100 const effect = div.getAnimations()[0].effect; 90 test(function(t) { 91 var div = addDiv(t, {'class': 'animated-div'}); 92 div.style.transition = 'margin-left 10s'; 93 flushComputedStyle(div); 94 div.style.marginLeft = '10px'; 95 96 var effect = div.getAnimations()[0].effect; 101 97 assert_equals(effect.getComputedTiming().iterationStart, 0, 102 98 'Initial value of iterationStart'); … … 107 103 // iterations 108 104 // -------------------- 109 110 test(t => { 111 const div = addDiv(t, { class: 'animated-div' }); 112 div.style.transition = 'margin-left 10s'; 113 getComputedStyle(div).marginLeft; 114 div.style.marginLeft = '10px'; 115 116 const effect = div.getAnimations()[0].effect; 105 test(function(t) { 106 var div = addDiv(t, {'class': 'animated-div'}); 107 div.style.transition = 'margin-left 10s'; 108 flushComputedStyle(div); 109 div.style.marginLeft = '10px'; 110 111 var effect = div.getAnimations()[0].effect; 117 112 assert_equals(effect.getComputedTiming().iterations, 1, 118 113 'Initial value of iterations'); … … 123 118 // duration 124 119 // -------------------- 125 126 test(t => { 127 const div = addDiv(t, { class: 'animated-div' }); 128 div.style.transition = 'margin-left 10s'; 129 getComputedStyle(div).marginLeft; 130 div.style.marginLeft = '10px'; 131 132 const effect = div.getAnimations()[0].effect; 120 test(function(t) { 121 var div = addDiv(t, {'class': 'animated-div'}); 122 div.style.transition = 'margin-left 10s'; 123 flushComputedStyle(div); 124 div.style.marginLeft = '10px'; 125 126 var effect = div.getAnimations()[0].effect; 133 127 assert_equals(effect.getComputedTiming().duration, 10000, 134 128 'Initial value of duration'); … … 139 133 // direction 140 134 // -------------------- 141 142 test(t => { 143 const div = addDiv(t, { class : 'animated-div' }); 144 div.style.transition = 'margin-left 10s'; 145 getComputedStyle(div).marginLeft; 146 div.style.marginLeft = '10px'; 147 148 const effect = div.getAnimations()[0].effect; 135 test(function(t) { 136 var div = addDiv(t, {'class': 'animated-div'}); 137 div.style.transition = 'margin-left 10s'; 138 flushComputedStyle(div); 139 div.style.marginLeft = '10px'; 140 141 var effect = div.getAnimations()[0].effect; 149 142 assert_equals(effect.getComputedTiming().direction, 'normal', 150 143 'Initial value of direction'); … … 155 148 // easing 156 149 // -------------------- 157 158 test(t => { 159 const div = addDiv(t, { class: 'animated-div' }); 160 div.style.transition = 'margin-left 10s'; 161 getComputedStyle(div).marginLeft; 162 div.style.marginLeft = '10px'; 163 164 const effect = div.getAnimations()[0].effect; 165 assert_equals(effect.getComputedTiming().easing, 'ease', 150 test(function(t) { 151 var div = addDiv(t, {'class': 'animated-div'}); 152 div.style.transition = 'margin-left 10s'; 153 flushComputedStyle(div); 154 div.style.marginLeft = '10px'; 155 156 var effect = div.getAnimations()[0].effect; 157 assert_equals(effect.getComputedTiming().easing, 'linear', 166 158 'Initial value of easing'); 167 159 }, 'easing of a new transition'); 168 169 test(t => {170 const div = addDiv(t, { class: 'animated-div' });171 div.style.transition = 'margin-left 10s steps(4)';172 getComputedStyle(div).marginLeft;173 div.style.marginLeft = '10px';174 175 const effect = div.getAnimations()[0].effect;176 assert_equals(effect.getComputedTiming().easing, 'steps(4)',177 'Initial value of easing');178 }, 'non-default easing of a new transition');179 160 180 161 … … 183 164 // = max(start delay + active duration + end delay, 0) 184 165 // -------------------- 185 186 test(t => { 187 const div = addDiv(t, { class: 'animated-div' }); 166 test(function(t) { 167 var div = addDiv(t, {'class': 'animated-div'}); 188 168 div.style.transition = 'margin-left 100s -5s'; 189 getComputedStyle(div).marginLeft;190 div.style.marginLeft = '10px'; 191 192 consteffect = div.getAnimations()[0].effect;193 constanswer = 100000 - 5000; // ms169 flushComputedStyle(div); 170 div.style.marginLeft = '10px'; 171 172 var effect = div.getAnimations()[0].effect; 173 var answer = 100000 - 5000; // ms 194 174 assert_equals(effect.getComputedTiming().endTime, answer, 195 175 'Initial value of endTime'); … … 201 181 // = iteration duration * iteration count(==1) 202 182 // -------------------- 203 204 test(t => { 205 const div = addDiv(t, { class: 'animated-div' }); 183 test(function(t) { 184 var div = addDiv(t, {'class': 'animated-div'}); 206 185 div.style.transition = 'margin-left 100s -5s'; 207 getComputedStyle(div).marginLeft;208 div.style.marginLeft = '10px'; 209 210 consteffect = div.getAnimations()[0].effect;186 flushComputedStyle(div); 187 div.style.marginLeft = '10px'; 188 189 var effect = div.getAnimations()[0].effect; 211 190 assert_equals(effect.getComputedTiming().activeDuration, 100000, 212 191 'Initial value of activeDuration'); … … 217 196 // localTime 218 197 // -------------------- 219 220 test(t => { 221 const div = addDiv(t, { class: 'animated-div' }); 198 test(function(t) { 199 var div = addDiv(t, {'class': 'animated-div'}); 222 200 div.style.transition = 'margin-left 100s'; 223 getComputedStyle(div).marginLeft;224 div.style.marginLeft = '10px'; 225 226 consteffect = div.getAnimations()[0].effect;201 flushComputedStyle(div); 202 div.style.marginLeft = '10px'; 203 204 var effect = div.getAnimations()[0].effect; 227 205 assert_equals(effect.getComputedTiming().localTime, 0, 228 206 'Initial value of localTime'); 229 207 }, 'localTime of a new transition'); 230 208 231 test( t =>{232 const div = addDiv(t, { class: 'animated-div'});209 test(function(t) { 210 var div = addDiv(t, {'class': 'animated-div'}); 233 211 div.style.transition = 'margin-left 100s'; 234 getComputedStyle(div).marginLeft;235 div.style.marginLeft = '10px'; 236 237 constanim = div.getAnimations()[0];212 flushComputedStyle(div); 213 div.style.marginLeft = '10px'; 214 215 var anim = div.getAnimations()[0]; 238 216 anim.currentTime = 5000; 239 217 assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime, … … 241 219 }, 'localTime is always equal to currentTime'); 242 220 243 promise_test(async t =>{244 const div = addDiv(t, { class: 'animated-div'});221 async_test(function(t) { 222 var div = addDiv(t, {'class': 'animated-div'}); 245 223 div.style.transition = 'margin-left 100s'; 246 getComputedStyle(div).marginLeft;247 div.style.marginLeft = '10px'; 248 249 constanim = div.getAnimations()[0];224 flushComputedStyle(div); 225 div.style.marginLeft = '10px'; 226 227 var anim = div.getAnimations()[0]; 250 228 anim.playbackRate = 2; // 2 times faster 251 229 252 a wait anim.ready;253 254 assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,255 'localTime is equal to currentTime');256 await waitForFrame();257 258 assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,259 'localTime is equal to currentTime');230 anim.ready.then(t.step_func(function() { 231 assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime, 232 'localTime is equal to currentTime'); 233 return waitForFrame(); 234 })).then(t.step_func_done(function() { 235 assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime, 236 'localTime is equal to currentTime'); 237 })); 260 238 }, 'localTime reflects playbackRate immediately'); 261 239 … … 264 242 // progress 265 243 // -------------------- 266 267 test(t => { 268 const div = addDiv(t, { class: 'animated-div' }); 244 test(function(t) { 245 var div = addDiv(t, {'class': 'animated-div'}); 269 246 div.style.transition = 'margin-left 10.5s'; 270 getComputedStyle(div).marginLeft;271 div.style.marginLeft = '10px'; 272 273 consteffect = div.getAnimations()[0].effect;247 flushComputedStyle(div); 248 div.style.marginLeft = '10px'; 249 250 var effect = div.getAnimations()[0].effect; 274 251 assert_equals(effect.getComputedTiming().progress, 0.0, 275 252 'Initial value of progress'); 276 253 }, 'progress of a new transition'); 277 254 278 test( t =>{279 const div = addDiv(t, { class: 'animated-div'});255 test(function(t) { 256 var div = addDiv(t, {'class': 'animated-div'}); 280 257 div.style.transition = 'margin-left 10.5s 2s'; 281 getComputedStyle(div).marginLeft;282 div.style.marginLeft = '10px'; 283 284 consteffect = div.getAnimations()[0].effect;258 flushComputedStyle(div); 259 div.style.marginLeft = '10px'; 260 261 var effect = div.getAnimations()[0].effect; 285 262 assert_equals(effect.getComputedTiming().progress, 0.0, 286 263 'Initial value of progress'); 287 264 }, 'progress of a new transition with positive delay in before phase'); 288 265 289 test( t =>{290 const div = addDiv(t, { class: 'animated-div'});266 test(function(t) { 267 var div = addDiv(t, {'class': 'animated-div'}); 291 268 div.style.transition = 'margin-left 10.5s'; 292 getComputedStyle(div).marginLeft;293 div.style.marginLeft = '10px'; 294 295 constanim = div.getAnimations()[0];296 anim.finish() ;269 flushComputedStyle(div); 270 div.style.marginLeft = '10px'; 271 272 var anim = div.getAnimations()[0]; 273 anim.finish() 297 274 assert_equals(anim.effect.getComputedTiming().progress, null, 298 275 'finished progress'); … … 303 280 // currentIteration 304 281 // -------------------- 305 306 test(t => { 307 const div = addDiv(t, { class: 'animated-div' }); 308 div.style.transition = 'margin-left 10s'; 309 getComputedStyle(div).marginLeft; 310 div.style.marginLeft = '10px'; 311 312 const effect = div.getAnimations()[0].effect; 282 test(function(t) { 283 var div = addDiv(t, {'class': 'animated-div'}); 284 div.style.transition = 'margin-left 10s'; 285 flushComputedStyle(div); 286 div.style.marginLeft = '10px'; 287 288 var effect = div.getAnimations()[0].effect; 313 289 assert_equals(effect.getComputedTiming().currentIteration, 0, 314 290 'Initial value of currentIteration'); 315 291 }, 'currentIteration of a new transition'); 316 292 317 test( t =>{318 const div = addDiv(t, { class: 'animated-div'});293 test(function(t) { 294 var div = addDiv(t, {'class': 'animated-div'}); 319 295 div.style.transition = 'margin-left 10s 2s'; 320 getComputedStyle(div).marginLeft;321 div.style.marginLeft = '10px'; 322 323 consteffect = div.getAnimations()[0].effect;296 flushComputedStyle(div); 297 div.style.marginLeft = '10px'; 298 299 var effect = div.getAnimations()[0].effect; 324 300 assert_equals(effect.getComputedTiming().currentIteration, 0, 325 301 'Initial value of currentIteration'); 326 302 }, 'currentIteration of a new transition with positive delay in before phase'); 327 303 328 test( t =>{329 const div = addDiv(t, { class: 'animated-div'});330 div.style.transition = 'margin-left 10s'; 331 getComputedStyle(div).marginLeft;332 div.style.marginLeft = '10px'; 333 334 constanim = div.getAnimations()[0];304 test(function(t) { 305 var div = addDiv(t, {'class': 'animated-div'}); 306 div.style.transition = 'margin-left 10s'; 307 flushComputedStyle(div); 308 div.style.marginLeft = '10px'; 309 310 var anim = div.getAnimations()[0]; 335 311 anim.finish(); 336 312 assert_equals(anim.effect.getComputedTiming().currentIteration, null, … … 339 315 340 316 </script> 317 </body> -
trunk/LayoutTests/imported/mozilla/css-transitions/test_effect-target.html
r251571 r251573 1 1 <!doctype html> 2 2 <meta charset=utf-8> 3 <title>CSSTransition.effect.target</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/helper.js"></script> 3 <script src="../../../resources/testharness.js"></script> 4 <script src="../../../resources/testharnessreport.js"></script> 5 <script src="../resources/testcommon.js"></script> 6 <body> 9 7 <div id="log"></div> 10 8 <script> 11 9 'use strict'; 12 10 13 test( t =>{14 constdiv = addDiv(t);11 test(function(t) { 12 var div = addDiv(t); 15 13 16 14 div.style.left = '0px'; … … 19 17 div.style.left = '100px'; 20 18 21 constanimation = div.getAnimations()[0];19 var animation = div.getAnimations()[0]; 22 20 assert_equals(animation.effect.target, div, 23 21 'Animation.target is the animatable div'); 24 22 }, 'Returned CSS transitions have the correct Animation.target'); 25 23 26 test( t =>{24 test(function(t) { 27 25 addStyle(t, { '.init::after': 'content: ""; width: 0px; height: 0px; ' + 28 26 'transition: all 10s;', 29 27 '.change::after': 'width: 100px; height: 100px;' }); 30 constdiv = addDiv(t, { class: 'init' });31 getComputedStyle(div).width;28 var div = addDiv(t, { class: 'init' }); 29 flushComputedStyle(div); 32 30 div.classList.add('change'); 33 31 34 constanims = document.getAnimations();32 var anims = document.getAnimations(); 35 33 assert_equals(anims.length, 2, 36 34 'Got transitions running on ::after pseudo element'); … … 39 37 }, 'effect.target should return the same CSSPseudoElement object each time'); 40 38 41 test( t =>{39 test(function(t) { 42 40 addStyle(t, { '.init::after': 'content: ""; width: 0px; transition: all 10s;', 43 41 '.change::after': 'width: 100px;' }); 44 constdiv = addDiv(t, { class: 'init' });45 getComputedStyle(div).width;42 var div = addDiv(t, { class: 'init' }); 43 flushComputedStyle(div); 46 44 div.classList.add('change'); 47 constpseudoTarget = document.getAnimations()[0].effect.target;48 consteffect = new KeyframeEffect(pseudoTarget,49 { background: ["blue", "red"] },50 3000);51 constnewAnim = new Animation(effect, document.timeline);45 var pseudoTarget = document.getAnimations()[0].effect.target; 46 var effect = new KeyframeEffect(pseudoTarget, 47 { background: ["blue", "red"] }, 48 3000); 49 var newAnim = new Animation(effect, document.timeline); 52 50 newAnim.play(); 53 51 54 constanims = document.getAnimations();52 var anims = document.getAnimations(); 55 53 assert_equals(anims.length, 2, 56 54 'Got animations running on ::after pseudo element'); … … 68 66 69 67 </script> 68 </body> -
trunk/LayoutTests/imported/mozilla/css-transitions/test_event-dispatch-expected.txt
r251571 r251573 20 20 PASS Calculating the interval start and end time with negative start delay. 21 21 PASS Calculating the interval start and end time with negative end delay. 22 PASS Call Animation.cancel after cancel ing transition.23 PASS Restart transition after cancel ing transition immediately22 PASS Call Animation.cancel after cancelling transition. 23 PASS Restart transition after cancelling transition immediately 24 24 PASS Call Animation.cancel after restarting transition immediately 25 25 PASS Set timeline and play transition after clear the timeline 26 PASS Set null target effect after cancel ingthe transition26 PASS Set null target effect after cancel the transition 27 27 PASS Cancel the transition after clearing the target effect 28 28 -
trunk/LayoutTests/imported/mozilla/css-transitions/test_pseudoElement-get-animations.html
r251571 r251573 1 1 <!doctype html> 2 2 <meta charset=utf-8> 3 <title>CSSPseudoElement.getAnimations() for CSS transitions</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/helper.js"></script> 3 <script src="../../../resources/testharness.js"></script> 4 <script src="../../../resources/testharnessreport.js"></script> 5 <script src="../resources/testcommon.js"></script> 8 6 <style> 9 7 .init::before { … … 20 18 } 21 19 </style> 20 <body> 22 21 <div id="log"></div> 23 22 <script> 24 23 'use strict'; 25 24 26 test( t =>{27 constdiv = addDiv(t, { class: 'init' });28 getComputedStyle(div).width;25 test(function(t) { 26 var div = addDiv(t, { class: 'init' }); 27 flushComputedStyle(div); 29 28 div.classList.add('change'); 30 29 … … 32 31 assert_equals(document.getAnimations().length, 3, 33 32 'Got expected number of animations on document'); 34 constpseudoTarget = document.getAnimations()[0].effect.target;33 var pseudoTarget = document.getAnimations()[0].effect.target; 35 34 assert_class_string(pseudoTarget, 'CSSPseudoElement', 36 35 'Got pseudo-element target'); 37 36 38 37 // Check animations returned from the pseudo element are in correct order 39 constanims = pseudoTarget.getAnimations();38 var anims = pseudoTarget.getAnimations(); 40 39 assert_equals(anims.length, 3, 41 40 'Got expected number of animations on pseudo-element'); … … 46 45 47 46 </script> 47 </body> -
trunk/LayoutTests/imported/w3c/ChangeLog
r251542 r251573 1 2019-10-24 Russell Epstein <repstein@apple.com> 2 3 Unreviewed, rolling out r251536. 4 5 Landed 3 Broken Tests. 6 7 Reverted changeset: 8 9 "[Web Animations] Update WPT tests related to Web Animations 10 and remove imported Mozilla tests" 11 https://bugs.webkit.org/show_bug.cgi?id=203291 12 https://trac.webkit.org/changeset/251536 13 1 14 2019-10-24 youenn fablet <youenn@apple.com> 2 15 -
trunk/LayoutTests/imported/w3c/resources/import-expectations.json
r251536 r251573 66 66 "web-platform-tests/css/WOFF2": "import", 67 67 "web-platform-tests/css/css-align": "import", 68 "web-platform-tests/css/css-animations": "import",69 68 "web-platform-tests/css/css-animations/": "import", 70 69 "web-platform-tests/css/css-color": "import", … … 88 87 "web-platform-tests/css/css-shapes/test-plan/index.html": "skip", 89 88 "web-platform-tests/css/css-text": "import", 90 "web-platform-tests/css/css-transitions": "import",91 89 "web-platform-tests/css/css-ui": "import", 92 90 "web-platform-tests/css/cssom": "import", … … 360 358 "web-platform-tests/wasm": "skip", 361 359 "web-platform-tests/wasm/jsapi": "import", 362 "web-platform-tests/web-animations": " import",360 "web-platform-tests/web-animations": "skip", 363 361 "web-platform-tests/web-nfc": "skip", 364 362 "web-platform-tests/webaudio": "import", -
trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface-expected.txt
r251536 r251573 15 15 FAIL AnimationEvent.pseudoElement initialized from the dictionary assert_equals: expected (string) "::testPseudo" but got (undefined) undefined 16 16 PASS animationName set to 'sample' 17 PASS animationName set to undefined18 PASS animationName set to null19 PASS animationName set to false20 PASS animationName set to true21 PASS animationName set to a number22 PASS animationName set to []23 PASS animationName set to [1, 2, 3]24 PASS animationName set to an object25 PASS animationName set to an object with a valueOf function26 17 PASS elapsedTime set to 0.5 27 PASS elapsedTime set to -0.528 PASS elapsedTime set to undefined29 PASS elapsedTime set to null30 PASS elapsedTime set to false31 PASS elapsedTime set to true32 PASS elapsedTime set to ''33 PASS elapsedTime set to []34 PASS elapsedTime set to [0.5]35 PASS elapsedTime set to an object with a valueOf function36 PASS elapsedTime cannot be set to NaN37 PASS elapsedTime cannot be set to Infinity38 PASS elapsedTime cannot be set to -Infinity39 PASS elapsedTime cannot be set to 'sample'40 PASS elapsedTime cannot be set to [0.5, 1.0]41 PASS elapsedTime cannot be set to an object42 18 PASS AnimationEventInit properties set value 43 19 -
trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface.js
r251536 r251573 80 80 81 81 test(function() { 82 var event = new AnimationEvent("test", {animationName: undefined});83 assert_equals(event.animationName, "");84 }, "animationName set to undefined");85 86 test(function() {87 var event = new AnimationEvent("test", {animationName: null});88 assert_equals(event.animationName, "null");89 }, "animationName set to null");90 91 test(function() {92 var event = new AnimationEvent("test", {animationName: false});93 assert_equals(event.animationName, "false");94 }, "animationName set to false");95 96 test(function() {97 var event = new AnimationEvent("test", {animationName: true});98 assert_equals(event.animationName, "true");99 }, "animationName set to true");100 101 test(function() {102 var event = new AnimationEvent("test", {animationName: 0.5});103 assert_equals(event.animationName, "0.5");104 }, "animationName set to a number");105 106 test(function() {107 var event = new AnimationEvent("test", {animationName: []});108 assert_equals(event.animationName, "");109 }, "animationName set to []");110 111 test(function() {112 var event = new AnimationEvent("test", {animationName: [1, 2, 3]});113 assert_equals(event.animationName, "1,2,3");114 }, "animationName set to [1, 2, 3]");115 116 test(function() {117 var event = new AnimationEvent("test", {animationName: {sample: 0.5}});118 assert_equals(event.animationName, "[object Object]");119 }, "animationName set to an object");120 121 test(function() {122 var event = new AnimationEvent("test",123 {animationName: {valueOf: function () { return 'sample'; }}});124 assert_equals(event.animationName, "[object Object]");125 }, "animationName set to an object with a valueOf function");126 127 test(function() {128 82 var event = new AnimationEvent("test", {elapsedTime: 0.5}); 129 83 assert_equals(event.elapsedTime, 0.5); 130 84 }, "elapsedTime set to 0.5"); 131 132 test(function() {133 var event = new AnimationEvent("test", {elapsedTime: -0.5});134 assert_equals(event.elapsedTime, -0.5);135 }, "elapsedTime set to -0.5");136 137 test(function() {138 var event = new AnimationEvent("test", {elapsedTime: undefined});139 assert_equals(event.elapsedTime, 0);140 }, "elapsedTime set to undefined");141 142 test(function() {143 var event = new AnimationEvent("test", {elapsedTime: null});144 assert_equals(event.elapsedTime, 0);145 }, "elapsedTime set to null");146 147 test(function() {148 var event = new AnimationEvent("test", {elapsedTime: false});149 assert_equals(event.elapsedTime, 0);150 }, "elapsedTime set to false");151 152 test(function() {153 var event = new AnimationEvent("test", {elapsedTime: true});154 assert_equals(event.elapsedTime, 1);155 }, "elapsedTime set to true");156 157 test(function() {158 var event = new AnimationEvent("test", {elapsedTime: ""});159 assert_equals(event.elapsedTime, 0);160 }, "elapsedTime set to ''");161 162 test(function() {163 var event = new AnimationEvent("test", {elapsedTime: []});164 assert_equals(event.elapsedTime, 0);165 }, "elapsedTime set to []");166 167 test(function() {168 var event = new AnimationEvent("test", {elapsedTime: [0.5]});169 assert_equals(event.elapsedTime, 0.5);170 }, "elapsedTime set to [0.5]");171 172 test(function() {173 var event = new AnimationEvent(174 "test", {elapsedTime: { valueOf: function() { return 0.5; }}});175 assert_equals(event.elapsedTime, 0.5);176 }, "elapsedTime set to an object with a valueOf function");177 178 test(function() {179 assert_throws(new TypeError(), function() {180 new AnimationEvent("test", {elapsedTime: NaN});181 }, 'elapsedTime cannot be NaN so was expecting a TypeError');182 }, "elapsedTime cannot be set to NaN");183 184 test(function() {185 assert_throws(new TypeError(), function() {186 new AnimationEvent("test", {elapsedTime: Infinity});187 }, 'elapsedTime cannot be Infinity so was expecting a TypeError');188 }, "elapsedTime cannot be set to Infinity");189 190 test(function() {191 assert_throws(new TypeError(), function() {192 new AnimationEvent("test", {elapsedTime: -Infinity});193 }, 'elapsedTime cannot be -Infinity so was expecting a TypeError');194 }, "elapsedTime cannot be set to -Infinity");195 196 test(function() {197 assert_throws(new TypeError(), function() {198 new AnimationEvent("test", {elapsedTime: "sample"});199 }, 'elapsedTime cannot be a string so was expecting a TypeError');200 }, "elapsedTime cannot be set to 'sample'");201 202 test(function() {203 assert_throws(new TypeError(), function() {204 new AnimationEvent("test", {elapsedTime: [0.5, 1.0]});205 }, 'elapsedTime cannot be a multi-element array so was expecting a TypeError');206 }, "elapsedTime cannot be set to [0.5, 1.0]");207 208 test(function() {209 assert_throws(new TypeError(), function() {210 new AnimationEvent("test", {elapsedTime: { sample: 0.5}});211 }, 'elapsedTime cannot be an object so was expecting a TypeError');212 }, "elapsedTime cannot be set to an object");213 85 214 86 test(function() { -
trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/testcommon.js
r251536 r251573 104 104 /** 105 105 * Waits for a requestAnimationFrame callback in the next refresh driver tick. 106 * Note that 'dom.animations-api.core.enabled' pref should be true to use this 107 * function. 106 108 */ 107 109 function waitForNextFrame() { -
trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/support/w3c-import.log
r251536 r251573 2 2 Do NOT modify these tests directly in WebKit. 3 3 Instead, create a pull request on the WPT github: 4 https://github.com/w eb-platform-tests/wpt4 https://github.com/w3c/web-platform-tests 5 5 6 6 Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport -
trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log
r251536 r251573 2 2 Do NOT modify these tests directly in WebKit. 3 3 Instead, create a pull request on the WPT github: 4 https://github.com/w eb-platform-tests/wpt4 https://github.com/w3c/web-platform-tests 5 5 6 6 Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport … … 15 15 ------------------------------------------------------------------------ 16 16 List of files: 17 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/AnimationEffect-getComputedTiming.tentative.html 18 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-animationName.tentative.html 19 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-canceling.tentative.html 20 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html 21 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-finished.tentative.html 22 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html 23 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-id.tentative.html 24 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-pausing.tentative.html 25 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-playState.tentative.html 26 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-ready.tentative.html 27 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-startTime.tentative.html 28 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html 29 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Document-getAnimations.tentative.html 30 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html 31 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/Element-getAnimations.tentative.html 32 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html 33 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-target.tentative.html 34 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/META.yml 17 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/OWNERS 35 18 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-008-expected.html 36 19 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-008.html … … 42 25 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-delay-011.html 43 26 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-iteration-count-calc.html 44 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-opacity-pause-and-set-time-expected.html45 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-opacity-pause-and-set-time.html46 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-pseudo-dynamic-001-expected.html47 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-pseudo-dynamic-001.html48 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-transform-pause-and-set-time-expected.html49 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-transform-pause-and-set-time.html50 27 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface.html 51 28 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-interface.js 52 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-marker-pseudoelement.html53 29 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-pseudoelement.html 54 30 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-types.html 55 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/computed-style-animation-parsing.html56 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-dispatch.tentative.html57 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/event-order.tentative.html58 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/historical.html59 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/idlharness.html60 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/inheritance.html61 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-remove-documentElement-crash.html62 31 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/pending-style-changes-001.html 63 /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/style-animation-parsing.html -
trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
r251536 r251573 209 209 PASS transform: non-invertible matrices in mismatched transform lists (invertible onto non-invertible) 210 210 PASS visibility (type: visibility) has testAccumulation function 211 PASS visibility: onto "visible" 211 FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden" 212 212 PASS visibility: onto "hidden" 213 213 PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function -
trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
r251536 r251573 204 204 FAIL transform: non-invertible matrices in mismatched transform lists assert_approx_equals: expected matrix(-2, 0, 0, -2, 250, 0) but got matrix(-2, 0, 0, -2, 200, 0): The value should be matrix(-2, 0, 0, -2, 250, 0) at 0ms but got matrix(-2, 0, 0, -2, 200, 0) expected 250 +/- 0.0001 but got 200 205 205 PASS visibility (type: visibility) has testAddition function 206 PASS visibility: onto "visible" 206 FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden" 207 207 PASS visibility: onto "hidden" 208 208 PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function -
trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt
r251536 r251573 131 131 FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 1 assert_equals: The value should be grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5) at 500ms expected "grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5)" but got "grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)" 132 132 FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 0 assert_equals: The value should be opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px) at 500ms expected "opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)" but got "opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)" 133 FAIL filter: interpolate different length of filter-function-list with drop-shadow function assert_equals: The value should be blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px ) at 500ms expected "blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px)" but got "blur(10px) drop-shadow(rgba(0, 0, 255, 0.8) 10px 10px 10px)"133 FAIL filter: interpolate different length of filter-function-list with drop-shadow function assert_equals: The value should be blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px at 500ms expected "blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px" but got "blur(10px) drop-shadow(rgba(0, 0, 255, 0.8) 10px 10px 10px)" 134 134 PASS filter: interpolate from none 135 135 FAIL filter: url function (interpoalte as discrete) assert_equals: The value should be blur(0px) url("#f1") at 499ms expected "blur(0px) url(\"#f1\")" but got "blur(4.989999771118164px) url(\"#f1\")" -
trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/property-types.js
r251536 r251573 618 618 testAnimationSamples(animation, idlName, 619 619 [{ time: 0, expected: 'visible' }, 620 { time: 1000, expected: ' hidden' }]);620 { time: 1000, expected: 'visible' }]); 621 621 }, `${property}: onto "visible"`); 622 622 … … 2206 2206 // Per the spec: The initial value for interpolation is all length values 2207 2207 // set to 0 and the used color set to transparent. 2208 expected: 'blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px )' }]);2208 expected: 'blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px' }]); 2209 2209 }, `${property}: interpolate different length of filter-function-list` 2210 2210 + ' with drop-shadow function'); -
trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Animation/oncancel.html
r251536 r251573 22 22 assert_equals(event.currentTime, null, 23 23 'event.currentTime should be null'); 24 assert_ times_equal(event.timelineTime, finishedTimelineTime,24 assert_equals(event.timelineTime, finishedTimelineTime, 25 25 'event.timelineTime should equal to the animation timeline ' + 26 26 'when finished promise is rejected'); -
trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations-expected.txt
r251536 r251573 5 5 PASS Test document.getAnimations for a disconnected node 6 6 PASS Test document.getAnimations with null target 7 FAIL Test document.getAnimations for elements inside same-origin iframes assert_ equals: expected 1 but got 07 FAIL Test document.getAnimations for elements inside same-origin iframes assert_true: Not expecting event, but got load event expected true got false 8 8 PASS Triggers a style change event 9 9 -
trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/Document/getAnimations.html
r251536 r251573 69 69 70 70 const eventWatcher = new EventWatcher(t, iframe, ['load']); 71 const event_promise = eventWatcher.wait_for('load');72 71 73 72 document.body.appendChild(iframe); 74 73 t.add_cleanup(() => { document.body.removeChild(iframe); }); 75 74 76 await event _promise;75 await eventWatcher.wait_for('load'); 77 76 78 77 const div = createDiv(t, iframe.contentDocument) -
trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001-expected.txt
r251536 r251573 22 22 PASS non-animatable property 'writingMode' is not accessed when using a property-indexed keyframe object 23 23 PASS non-animatable property 'unsupportedProperty' is not accessed when using a property-indexed keyframe object 24 PASS non-animatable property 'float' is not accessed when using a property-indexed keyframe object25 24 PASS non-animatable property 'font-size' is not accessed when using a property-indexed keyframe object 26 25 PASS non-animatable property 'animation' is not accessed when using a keyframe sequence … … 46 45 PASS non-animatable property 'writingMode' is not accessed when using a keyframe sequence 47 46 PASS non-animatable property 'unsupportedProperty' is not accessed when using a keyframe sequence 48 PASS non-animatable property 'float' is not accessed when using a keyframe sequence49 47 PASS non-animatable property 'font-size' is not accessed when using a keyframe sequence 50 48 PASS Equivalent property-indexed and sequenced keyframes: two properties with one value -
trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html
r251536 r251573 46 46 'unsupportedProperty', 47 47 48 'float', // We use the string "cssFloat" to represent "float" property, and49 // so reject "float" in the keyframe-like object.50 48 'font-size', // Supported property that uses dashes 51 49 ]; -
trunk/LayoutTests/platform/gtk/TestExpectations
r251536 r251573 1847 1847 webkit.org/b/186136 compositing/animation/layer-for-filling-animation.html [ Failure Pass Timeout ] 1848 1848 1849 webkit.org/b/186143 imported/mozilla/css-animations/test_event-dispatch.html [ Timeout Pass ] 1850 1849 1851 webkit.org/b/184569 storage/indexeddb/modern/transactions-stop-on-navigation.html [ Pass Failure ] 1850 1852 … … 1855 1857 webkit.org/b/186638 animations/play-state-paused.html [ Failure Pass ] 1856 1858 webkit.org/b/186638 imported/w3c/web-platform-tests/streams/piping/error-propagation-forward.html [ Failure Pass ] 1859 webkit.org/b/186638 imported/mozilla/css-transitions/test_animation-finished.html [ Timeout Pass ] 1857 1860 webkit.org/b/186638 compositing/repaint/repaint-on-layer-grouping-change.html [ Failure Pass ] 1858 1861 webkit.org/b/186638 imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/space-2.html [ Timeout Pass ] … … 2093 2096 webkit.org/b/197507 imported/blink/svg/hittest/rect-miterlimit.html [ Timeout Pass ] 2094 2097 webkit.org/b/197507 imported/blink/transitions/no-transition-on-implicit-margins.html [ Timeout Pass ] 2098 webkit.org/b/197507 imported/mozilla/css-animations/test_animation-cancel.html [ Timeout Pass ] 2099 webkit.org/b/197507 imported/mozilla/css-transitions/test_animation-cancel.html [ Timeout Pass ] 2095 2100 webkit.org/b/197507 legacy-animation-engine/animations/animation-multiple-callbacks-timestamp.html [ Timeout Pass ] 2096 2101 webkit.org/b/197507 legacy-animation-engine/imported/blink/css3/calc/transition-asan-crash.html [ Timeout Pass ] -
trunk/LayoutTests/platform/gtk/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
r251536 r251573 210 210 FAIL transform: non-invertible matrices in mismatched transform lists (invertible onto non-invertible) assert_regexp_match: Actual value is not a matrix expected object "/^matrix(?:3d)*\((.+)\)/" but got "none" 211 211 PASS visibility (type: visibility) has testAccumulation function 212 PASS visibility: onto "visible" 212 FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden" 213 213 PASS visibility: onto "hidden" 214 214 PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function -
trunk/LayoutTests/platform/gtk/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
r251536 r251573 206 206 FAIL transform: non-invertible matrices in mismatched transform lists assert_approx_equals: expected matrix(-2,0,0,-2,250,0) but got matrix(-2, 0.00000000000000024492935982947064, -0.00000000000000024492935982947064, -2, 200, 0): The value should be matrix(-2,0,0,-2,250,0) at 0ms but got matrix(-2, 0.00000000000000024492935982947064, -0.00000000000000024492935982947064, -2, 200, 0) expected 250 +/- 0.0001 but got 200 207 207 PASS visibility (type: visibility) has testAddition function 208 PASS visibility: onto "visible" 208 FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden" 209 209 PASS visibility: onto "hidden" 210 210 PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function -
trunk/LayoutTests/platform/ios/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
r251536 r251573 209 209 PASS transform: non-invertible matrices in mismatched transform lists (invertible onto non-invertible) 210 210 PASS visibility (type: visibility) has testAccumulation function 211 PASS visibility: onto "visible" 211 FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden" 212 212 PASS visibility: onto "hidden" 213 213 PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function -
trunk/LayoutTests/platform/ios/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
r251536 r251573 204 204 FAIL transform: non-invertible matrices in mismatched transform lists assert_approx_equals: expected matrix(-2, 0, 0, -2, 250, 0) but got matrix(-2, 0, 0, -2, 200, 0): The value should be matrix(-2, 0, 0, -2, 250, 0) at 0ms but got matrix(-2, 0, 0, -2, 200, 0) expected 250 +/- 0.0001 but got 200 205 205 PASS visibility (type: visibility) has testAddition function 206 PASS visibility: onto "visible" 206 FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden" 207 207 PASS visibility: onto "hidden" 208 208 PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function -
trunk/LayoutTests/platform/ios/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt
r251536 r251573 131 131 FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 1 assert_equals: The value should be grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5) at 500ms expected "grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5)" but got "grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)" 132 132 FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 0 assert_equals: The value should be opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px) at 500ms expected "opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)" but got "opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)" 133 FAIL filter: interpolate different length of filter-function-list with drop-shadow function assert_equals: The value should be blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px ) at 500ms expected "blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px)" but got "blur(10px) drop-shadow(rgba(0, 0, 255, 0.8) 10px 10px 10px)"133 FAIL filter: interpolate different length of filter-function-list with drop-shadow function assert_equals: The value should be blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px at 500ms expected "blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px" but got "blur(10px) drop-shadow(rgba(0, 0, 255, 0.8) 10px 10px 10px)" 134 134 PASS filter: interpolate from none 135 135 FAIL filter: url function (interpoalte as discrete) assert_equals: The value should be blur(0px) url("#f1") at 499ms expected "blur(0px) url(\"#f1\")" but got "blur(4.989999771118164px) url(\"#f1\")" -
trunk/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
r251536 r251573 211 211 PASS transform: non-invertible matrices in mismatched transform lists (invertible onto non-invertible) 212 212 PASS visibility (type: visibility) has testAccumulation function 213 PASS visibility: onto "visible" 213 FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden" 214 214 PASS visibility: onto "hidden" 215 215 PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function -
trunk/LayoutTests/platform/mac-sierra/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
r251536 r251573 206 206 FAIL transform: non-invertible matrices in mismatched transform lists assert_approx_equals: expected matrix(-2,0,0,-2,250,0) but got matrix(-2, 0.00000000000000024492935982947064, -0.00000000000000024492935982947064, -2, 200, 0): The value should be matrix(-2,0,0,-2,250,0) at 0ms but got matrix(-2, 0.00000000000000024492935982947064, -0.00000000000000024492935982947064, -2, 200, 0) expected 250 +/- 0.0001 but got 200 207 207 PASS visibility (type: visibility) has testAddition function 208 PASS visibility: onto "visible" 208 FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden" 209 209 PASS visibility: onto "hidden" 210 210 PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function -
trunk/LayoutTests/platform/mac-wk1/TestExpectations
r251565 r251573 804 804 webkit.org/b/203176 [ Debug ] fast/scrolling/latching/scroll-select-bottom-test.html [ Pass Failure ] 805 805 806 webkit.org/b/203304 imported/w3c/web-platform-tests/css/css-animations/animation-opacity-pause-and-set-time.html [ ImageOnlyFailure ]807 webkit.org/b/203304 imported/w3c/web-platform-tests/css/css-animations/animation-transform-pause-and-set-time.html [ ImageOnlyFailure ]808 webkit.org/b/203305 imported/w3c/web-platform-tests/css/css-transitions/properties-value-001.html [ Pass Failure ]809 webkit.org/b/203305 imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-001.html [ Pass Failure ]810 webkit.org/b/203305 imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-002.html [ Pass Failure ]811 webkit.org/b/203356 imported/w3c/web-platform-tests/css/css-transitions/properties-value-003.html [ Pass Timeout ]812 webkit.org/b/203357 imported/w3c/web-platform-tests/css/css-transitions/event-dispatch.tentative.html [ Pass Failure ] -
trunk/LayoutTests/platform/win/TestExpectations
r251550 r251573 4094 4094 webkit.org/b/186183 http/tests/security/referrer-policy-header.html [ Skip ] 4095 4095 4096 webkit.org/b/186522 imported/mozilla/css-animations/test_animation-finished.html [ Failure ] 4097 webkit.org/b/186522 imported/mozilla/css-animations/test_animation-id.html [ Failure ] 4098 webkit.org/b/186522 imported/mozilla/css-animations/test_animation-reverse.html [ Failure ] 4099 webkit.org/b/186522 imported/mozilla/css-animations/test_cssanimation-animationname.html [ Failure ] 4100 webkit.org/b/186522 imported/mozilla/css-animations/test_setting-effect.html [ Failure ] 4101 webkit.org/b/186522 imported/mozilla/css-transitions/test_animation-computed-timing.html [ Failure ] 4102 webkit.org/b/186522 imported/mozilla/css-transitions/test_animation-currenttime.html [ Failure ] 4103 webkit.org/b/186522 imported/mozilla/css-transitions/test_animation-finished.html [ Failure ] 4104 webkit.org/b/186522 imported/mozilla/css-transitions/test_animation-pausing.html [ Failure ] 4105 webkit.org/b/186522 imported/mozilla/css-transitions/test_animation-starttime.html [ Failure ] 4106 webkit.org/b/186522 imported/mozilla/css-transitions/test_csstransition-transitionproperty.html [ Failure ] 4107 webkit.org/b/186522 imported/mozilla/css-transitions/test_setting-effect.html [ Failure ] 4108 4096 4109 webkit.org/b/186562 [ Release ] accessibility/accessibility-node-memory-management.html [ Failure ] 4097 4110 webkit.org/b/186562 fast/workers/worker-document-leak.html [ Failure ] … … 4101 4114 webkit.org/b/186562 workers/bomb.html [ Skip ] 4102 4115 4116 webkit.org/b/186807 imported/mozilla/css-animations/test_animation-playstate.html [ Failure ] 4117 webkit.org/b/186807 imported/mozilla/css-animations/test_animation-ready.html [ Failure ] 4118 webkit.org/b/186807 imported/mozilla/css-animations/test_animation-starttime.html [ Failure ] 4119 webkit.org/b/186807 imported/mozilla/css-transitions/test_animation-cancel.html [ Failure ] 4120 webkit.org/b/186807 imported/mozilla/css-transitions/test_animation-ready.html [ Failure ] 4103 4121 webkit.org/b/186807 transitions/transition-to-from-auto.html [ Failure ] 4104 4122 webkit.org/b/186807 animations/transition-and-animation-3.html [ Skip ] 4105 4123 4124 webkit.org/b/186868 imported/mozilla/css-animations/test_pseudoElement-get-animations.html [ Failure ] 4125 webkit.org/b/186868 imported/mozilla/css-transitions/test_element-get-animations.html [ Failure ] 4126 4127 webkit.org/b/187041 imported/mozilla/css-animations/test_animation-pausing.html [ Failure ] 4106 4128 webkit.org/b/187041 webanimations/opacity-animation-yields-compositing-span.html [ Failure ] 4107 4129 … … 4351 4373 webkit.org/b/196869 animations/animation-multiple-callbacks-timestamp.html [ Failure ] 4352 4374 webkit.org/b/196869 legacy-animation-engine/animations/animation-multiple-callbacks-timestamp.html [ Failure ] 4375 webkit.org/b/196869 imported/mozilla/css-animations/test_animation-currenttime.html [ Failure ] 4353 4376 4354 4377 webkit.org/b/194450 storage/indexeddb/modern/gc-closes-database-private.html [ Skip ] -
trunk/LayoutTests/platform/wpe/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
r251536 r251573 210 210 FAIL transform: non-invertible matrices in mismatched transform lists (invertible onto non-invertible) assert_regexp_match: Actual value is not a matrix expected object "/^matrix(?:3d)*\((.+)\)/" but got "none" 211 211 PASS visibility (type: visibility) has testAccumulation function 212 PASS visibility: onto "visible" 212 FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden" 213 213 PASS visibility: onto "hidden" 214 214 PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function -
trunk/LayoutTests/platform/wpe/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-expected.txt
r251536 r251573 215 215 FAIL transform: non-invertible matrices in mismatched transform lists assert_approx_equals: expected matrix(-2,0,0,-2,250,0) but got matrix(-2, 2.4492935982947064e-16, -2.4492935982947064e-16, -2, 200, 0): The value should be matrix(-2,0,0,-2,250,0) at 0ms but got matrix(-2, 2.4492935982947064e-16, -2.4492935982947064e-16, -2, 200, 0) expected 250 +/- 0.0001 but got 200 216 216 PASS visibility (type: visibility) has testAddition function 217 PASS visibility: onto "visible" 217 FAIL visibility: onto "visible" assert_equals: The value should be visible at 1000ms expected "visible" but got "hidden" 218 218 PASS visibility: onto "hidden" 219 219 PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function -
trunk/LayoutTests/tests-options.json
r251536 r251573 468 468 "slow" 469 469 ], 470 "imported/w3c/web-platform-tests/css/css-animations/CSSAnimation-effect.tentative.html": [471 "slow"472 ],473 470 "imported/w3c/web-platform-tests/css/css-animations/animationevent-types.html": [ 474 471 "slow" 475 472 ], 476 "imported/w3c/web-platform-tests/css/css-animations/event-dispatch.tentative.html": [477 "slow"478 ],479 473 "imported/w3c/web-platform-tests/css/css-color/color-resolving-hsl.html": [ 480 474 "slow" 481 475 ], 482 "imported/w3c/web-platform-tests/css/css-transitions/properties-value-001.html": [483 "slow"484 ],485 "imported/w3c/web-platform-tests/css/css-transitions/properties-value-003.html": [486 "slow"487 ],488 "imported/w3c/web-platform-tests/css/css-transitions/properties-value-implicit-001.html": [489 "slow"490 ],491 "imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-001.html": [492 "slow"493 ],494 "imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-002.html": [495 "slow"496 ],497 "imported/w3c/web-platform-tests/css/css-transitions/transitioncancel-001.html": [498 "slow"499 ],500 476 "imported/w3c/web-platform-tests/css/cssom-view/matchMedia.xht": [ 501 477 "slow" … … 2041 2017 ], 2042 2018 "imported/w3c/web-platform-tests/svg/animations/svglengthlist-animation-3.html": [ 2043 "slow"2044 ],2045 "imported/w3c/web-platform-tests/web-animations/timing-model/animations/updating-the-finished-state.html": [2046 "slow"2047 ],2048 "imported/w3c/web-platform-tests/web-animations/timing-model/timelines/update-and-send-events.html": [2049 2019 "slow" 2050 2020 ],
Note: See TracChangeset
for help on using the changeset viewer.