| <!DOCTYPE html> |
| <!-- Submitted from TestTWF Paris --> |
| <html class="reftest-wait"> |
| <head> |
| <title>CSS Reference File</title> |
| <link rel="author" title="Marc Bourlon" href="mailto:[email protected]"> |
| <script src="/common/reftest-wait.js"></script> |
| <style type="text/css"> |
| * { |
| margin: 0; |
| padding: 0; |
| } |
| #frameTest { |
| width: 600px; |
| height: 200px; |
| border: 1px solid #000; |
| } |
| </style> |
| <script type="text/javascript"> |
| 'use strict'; |
| |
| // We must capture 2 messages to end the test: |
| // - frameLoaded: The iframe has loaded and is ready for resizing. |
| // - testEnded: The iframe has finished the final resize and the reference is |
| // ready for screenshot. |
| let finishedResizingFrame = false; |
| window.addEventListener('message', (message) => { |
| // If the <iframe> has finished loading start the test. |
| if (message.data == "frameLoaded") { |
| setTimeout(resizeReference, 10); |
| } |
| if (finishedResizingFrame && message.data == "testEnded") { |
| takeScreenshot(); |
| } |
| }, false); |
| |
| let height = 200; |
| function resizeReference() { |
| // Resize the <iframe> vertically which should trigger a relayout |
| // in the child, growing any element that depends on `vh` units. |
| height += 10; |
| document.getElementById('frameTest').style.height = height + "px"; |
| |
| if (height >= 300) { |
| // If we are done resizing the frame, then signal that the test can |
| // start looking for completion. |
| finishedResizingFrame = true; |
| } else { |
| // Otherwise, keep growing the frame. |
| setTimeout(resizeReference, 10); |
| } |
| } |
| </script> |
| |
| </head> |
| <body> |
| <iframe id="frameTest" src="vh-update-and-transition-in-subframe-iframe-ref.html" frameborder="0"></iframe> |
| </body> |
| </html> |
