getAnimations-iframe.html (1670B)
1 <!DOCTYPE html> 2 <title>getAnimations in dirty iframe</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../../testcommon.js"></script> 6 <style> 7 iframe { 8 width: 200px; 9 height: 40px; 10 } 11 </style> 12 <body> 13 <script> 14 15 const createFrame = async test => { 16 const iframe = createElement(test, "iframe"); 17 const contents = "" + 18 "<style>" + 19 " div { color: red; }" + 20 " @keyframes test {" + 21 " from { color: green; }" + 22 " to { color: green; }" + 23 " }" + 24 " @media (min-width: 300px) {" + 25 " div { animation: test 1s linear forwards; }" + 26 " }" + 27 "</style>" + 28 "<div id=div>Green</div>"; 29 iframe.setAttribute("srcdoc", contents); 30 await new Promise(resolve => iframe.addEventListener("load", resolve)); 31 return iframe; 32 }; 33 34 const iframeTest = (getAnimations, interfaceName) => { 35 promise_test(async test => { 36 const frame = await createFrame(test); 37 const inner_div = frame.contentDocument.getElementById('div'); 38 assert_equals(getComputedStyle(inner_div).color, 'rgb(255, 0, 0)'); 39 40 frame.style.width = '400px'; 41 const animations = getAnimations(inner_div); 42 assert_equals(animations.length, 1); 43 assert_equals(getComputedStyle(inner_div).color, 'rgb(0, 128, 0)'); 44 }, `Calling ${interfaceName}.getAnimations updates layout of parent frame if needed`); 45 } 46 47 iframeTest(element => element.getAnimations(), 'Element'); 48 iframeTest(element => element.ownerDocument.getAnimations(), 'Document'); 49 50 </script> 51 </body>