target-frame.html (1909B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 #target { 7 background: green; 8 height: 50px; 9 width: 50px; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="target"></div> 15 </body> 16 <script src="../../../testcommon.js"></script> 17 <script type="text/javascript"> 18 function sendResult(message) { 19 top.postMessage(message, '*'); 20 } 21 22 function waitForAnimationReady(anim) { 23 // Resolution of the ready promise, though UA dependent, is expected to 24 // happen within a few frames. Throttling rendering of the frame owning 25 // the animation's timeline may delay resolution of the ready promise, 26 // resulting in a test failure. 27 let frameTimeout = 10; 28 let resolved = false; 29 return new Promise((resolve, reject) => { 30 anim.ready.then(() => { 31 resolved = true; 32 resolve('PASS'); 33 }); 34 const tick = () => { 35 requestAnimationFrame(() => { 36 if (!resolved) { 37 if (--frameTimeout == 0) 38 resolve('FAIL: Animation is still pending'); 39 else 40 tick(); 41 } 42 }); 43 }; 44 tick(); 45 }); 46 } 47 48 function verifyAnimationIsUpdating() { 49 return new Promise(resolve => { 50 waitForAnimationFrames(3).then(() => { 51 const opacity = getComputedStyle(target).opacity; 52 const result = 53 (opacity == 1) ? 'FAIL: opacity remained unchanged' : 'PASS'; 54 resolve(result); 55 }); 56 }); 57 } 58 59 async function runTest() { 60 const anim = document.getAnimations()[0]; 61 if (!anim) { 62 setResult('FAIL: Failed to create animation'); 63 return; 64 } 65 waitForAnimationReady(anim).then(result => { 66 if (result != 'PASS') { 67 sendResult(result); 68 return; 69 } 70 verifyAnimationIsUpdating().then(result => { 71 sendResult(result); 72 }); 73 }); 74 } 75 </script> 76 </html>