vh-update-and-transition-in-subframe-ref.html (1712B)
1 <!DOCTYPE html> 2 <!-- Submitted from TestTWF Paris --> 3 <html class="reftest-wait"> 4 <head> 5 <title>CSS Reference File</title> 6 <link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com"> 7 <script src="/common/reftest-wait.js"></script> 8 <style type="text/css"> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 #frameTest { 14 width: 600px; 15 height: 200px; 16 border: 1px solid #000; 17 } 18 </style> 19 <script type="text/javascript"> 20 'use strict'; 21 22 // We must capture 2 messages to end the test: 23 // - frameLoaded: The iframe has loaded and is ready for resizing. 24 // - testEnded: The iframe has finished the final resize and the reference is 25 // ready for screenshot. 26 let finishedResizingFrame = false; 27 window.addEventListener('message', (message) => { 28 // If the <iframe> has finished loading start the test. 29 if (message.data == "frameLoaded") { 30 setTimeout(resizeReference, 10); 31 } 32 if (finishedResizingFrame && message.data == "testEnded") { 33 takeScreenshot(); 34 } 35 }, false); 36 37 let height = 200; 38 function resizeReference() { 39 // Resize the <iframe> vertically which should trigger a relayout 40 // in the child, growing any element that depends on `vh` units. 41 height += 10; 42 document.getElementById('frameTest').style.height = height + "px"; 43 44 if (height >= 300) { 45 // If we are done resizing the frame, then signal that the test can 46 // start looking for completion. 47 finishedResizingFrame = true; 48 } else { 49 // Otherwise, keep growing the frame. 50 setTimeout(resizeReference, 10); 51 } 52 } 53 </script> 54 55 </head> 56 <body> 57 <iframe id="frameTest" src="vh-update-and-transition-in-subframe-iframe-ref.html" frameborder="0"></iframe> 58 </body> 59 </html>