sibling-iframe-timeline.html (1608B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Animate using sibling iframe's timeline</title> 6 </head> 7 <body></body> 8 <script src="/common/get-host-info.sub.js"></script> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script type="text/javascript"> 12 'use strict'; 13 14 function crossSiteUrl(filename) { 15 const url = 16 get_host_info().HTTP_REMOTE_ORIGIN + 17 '/web-animations/timing-model/timelines/resources/' + 18 filename; 19 return url; 20 } 21 22 function loadFrame(name, path, hidden) { 23 return new Promise(resolve => { 24 const frame = document.createElement('iframe'); 25 if (hidden) 26 frame.style = 'visibility: hidden;'; 27 frame.name = name; 28 document.body.appendChild(frame); 29 frame.onload = () => { 30 resolve(); 31 } 32 frame.src = crossSiteUrl(path); 33 }); 34 } 35 36 function waitForTestResults() { 37 return new Promise(resolve => { 38 const listener = (evt) => { 39 window.removeEventListener('message', listener); 40 resolve(evt.data); 41 }; 42 window.addEventListener('message', listener); 43 }); 44 } 45 46 promise_test(async t => { 47 const promise = waitForTestResults().then((data) => { 48 assert_equals(data, 'PASS'); 49 }); 50 // Animate an element in frame A. 51 await loadFrame('a', 'target-frame.html', false); 52 // Animation's timeline is in hidden frame B. 53 await loadFrame('b', 'timeline-frame.html', true); 54 55 return promise; 56 }, 'animation tied to another frame\'s timeline runs properly'); 57 </script> 58 </html>