<!DOCTYPE html><!-- Submitted from TestTWF Paris --><!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 --><htmlclass="reftest-wait"><head><title>CSS Values and Units Test: Ensure vh-based dimensions update and transition when used in subframe that change size.</title><metaname="timeout"content="long"><linkrel="author"title="Marc Bourlon"href="mailto:marc@bourlon.com"><linkrel="help"href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"><linkrel="match"href="reference/vh-update-and-transition-in-subframe-ref.html"><metacharset="UTF-8"><metaname="assert"content="vh-based dimension doesn't change when the element's other dimension doesn't change."><scriptsrc="/common/reftest-wait.js"></script><styletype="text/css">*{margin:0;padding:0;}#frameTest{width:600px;height:200px;border:1pxsolidblack;}</style><scripttype="text/javascript">'use strict';// We must capture 2 messages to end the test:// - frameLoaded: The iframe has loaded and is ready for resizing.// - transitionInIFrameEnded: The transition in the child iframe has ended.letfinishedResizingFrame=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=="transitionInIFrameEnded"){takeScreenshot();}},false);letheight=200;functionresizeReference(){// 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><iframeid="frameTest"src="vh-update-and-transition-in-subframe-iframe.html"frameborder="0"></iframe></body></html>
