vh-update-and-transition-in-subframe.html (2210B)
1 <!DOCTYPE html> 2 <!-- Submitted from TestTWF Paris --> 3 <!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 --> 4 <html class="reftest-wait"> 5 <head> 6 <title>CSS Values and Units Test: Ensure vh-based dimensions update and transition when used in subframe that change size.</title> 7 <meta name="timeout" content="long"> 8 <link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com"> 9 <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> 10 <link rel="match" href="reference/vh-update-and-transition-in-subframe-ref.html"> 11 <meta charset="UTF-8"> 12 <meta name="assert" content="vh-based dimension doesn't change when the element's other dimension doesn't change."> 13 <script src="/common/reftest-wait.js"></script> 14 <style type="text/css"> 15 * { 16 margin: 0; 17 padding: 0; 18 } 19 #frameTest { 20 width: 600px; 21 height: 200px; 22 border: 1px solid black; 23 } 24 </style> 25 <script type="text/javascript"> 26 'use strict'; 27 28 // We must capture 2 messages to end the test: 29 // - frameLoaded: The iframe has loaded and is ready for resizing. 30 // - transitionInIFrameEnded: The transition in the child iframe has ended. 31 let finishedResizingFrame = false; 32 window.addEventListener('message', (message) => { 33 // If the <iframe> has finished loading start the test. 34 if (message.data == "frameLoaded") { 35 setTimeout(resizeReference, 10); 36 } 37 if (finishedResizingFrame && message.data == "transitionInIFrameEnded") { 38 takeScreenshot(); 39 } 40 }, false); 41 42 let height = 200; 43 function resizeReference() { 44 // Resize the <iframe> vertically which should trigger a relayout 45 // in the child, growing any element that depends on `vh` units. 46 height += 10; 47 document.getElementById('frameTest').style.height = height + "px"; 48 49 if (height >= 300) { 50 // If we are done resizing the frame, then signal that the test can 51 // start looking for completion. 52 finishedResizingFrame = true; 53 } else { 54 // Otherwise, keep growing the frame. 55 setTimeout(resizeReference, 10); 56 } 57 } 58 </script> 59 60 </head> 61 <body> 62 <iframe id="frameTest" src="vh-update-and-transition-in-subframe-iframe.html" frameborder="0"></iframe> 63 </body> 64 </html>