From a0dce44ce65980c65f910f11bdabd271a40f4e1d Mon Sep 17 00:00:00 2001
From: Martin Robinson <mrobinson@igalia.com>
Date: Mon, 16 Dec 2024 16:46:46 +0100
Subject: [PATCH] wpt: Fix flakiness in `vh_not_refreshing_on_chrome.html`
 (#34626)

This test manually animates the height of an `<iframe>` that has content
which uses the `vh` unit. Each tick of the animation changes the height
by one pixel. Inside the `<iframe>` the element using `vh` units has a
transition applied, so every manual tick of the animation triggers a new
transition. The causes a pretty slow test execution.

This change improves `vh_not_refreshing_on_chrome.html` to remove
flakiness by making the test wait to start until after the `<iframe>` has
loaded and to increase the `<iframe>` height by 10 pixels instead of 1
when doing the manual animation. These changes make the test faster and
much less flaky in Servo.

In addition, the test is reformated a bit removing extraneous whitespace
and renamed to follow WPT naming conventions.

Fixes #23385.
Fixes #15570.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
---
 tests/wpt/meta/MANIFEST.json                  | 48 +++++-----
 .../vh_not_refreshing_on_chrome.html.ini      |  2 -
 ...nd-transition-in-subframe-iframe-ref.html} | 74 +++++++--------
 ...update-and-transition-in-subframe-ref.html | 59 ++++++++++++
 .../vh_not_refreshing_on_chrome-ref.html      | 65 -------------
 .../vh_not_refreshing_on_chrome_iframe.html   | 93 -------------------
 ...ate-and-transition-in-subframe-iframe.html | 91 ++++++++++++++++++
 .../vh-update-and-transition-in-subframe.html | 64 +++++++++++++
 .../vh_not_refreshing_on_chrome.html          | 70 --------------
 tests/wpt/tests/lint.ignore                   |  8 +-
 10 files changed, 278 insertions(+), 296 deletions(-)
 delete mode 100644 tests/wpt/meta/css/css-values/vh_not_refreshing_on_chrome.html.ini
 rename tests/wpt/tests/css/css-values/reference/{vh_not_refreshing_on_chrome_iframe-ref.html => vh-update-and-transition-in-subframe-iframe-ref.html} (54%)
 create mode 100644 tests/wpt/tests/css/css-values/reference/vh-update-and-transition-in-subframe-ref.html
 delete mode 100644 tests/wpt/tests/css/css-values/reference/vh_not_refreshing_on_chrome-ref.html
 delete mode 100644 tests/wpt/tests/css/css-values/support/vh_not_refreshing_on_chrome_iframe.html
 create mode 100644 tests/wpt/tests/css/css-values/vh-update-and-transition-in-subframe-iframe.html
 create mode 100644 tests/wpt/tests/css/css-values/vh-update-and-transition-in-subframe.html
 delete mode 100644 tests/wpt/tests/css/css-values/vh_not_refreshing_on_chrome.html

diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 0b9ffca88eb..87033e0c56b 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -294185,6 +294185,21 @@
        {}
       ]
      ],
+     "vh-update-and-transition-in-subframe.html": [
+      "5e73ffc31153f0542de6fa4da37ef528d6866cd9",
+      [
+       null,
+       [
+        [
+         "/css/css-values/reference/vh-update-and-transition-in-subframe-ref.html",
+         "=="
+        ]
+       ],
+       {
+        "timeout": "long"
+       }
+      ]
+     ],
      "vh-zero-support.html": [
       "1c1bcd1761a2ffccfc1a92a10ddf860712606fa1",
       [
@@ -294198,21 +294213,6 @@
        {}
       ]
      ],
-     "vh_not_refreshing_on_chrome.html": [
-      "e5606a0cb751554602c2d108840300973e92c734",
-      [
-       null,
-       [
-        [
-         "/css/css-values/reference/vh_not_refreshing_on_chrome-ref.html",
-         "=="
-        ]
-       ],
-       {
-        "timeout": "long"
-       }
-      ]
-     ],
      "viewport-unit-011.html": [
       "055f3d1fd2d716a68d857738493815c8772bef06",
       [
@@ -440473,12 +440473,12 @@
        "cfa9e8d02d48436ee1c311da7c7bd65b0f4291cf",
        []
       ],
-      "vh_not_refreshing_on_chrome-ref.html": [
-       "279d1c69b9f7fbe60edb55b7e8a5d507eda24936",
+      "vh-update-and-transition-in-subframe-iframe-ref.html": [
+       "bc8216835883bc0314d76cb10f287f5202e3dc03",
        []
       ],
-      "vh_not_refreshing_on_chrome_iframe-ref.html": [
-       "5e35f6261e266be2981ae79038e464ac354cc8ef",
+      "vh-update-and-transition-in-subframe-ref.html": [
+       "ab068dfaf87773ebfaefbb3ab9d48f251760bc60",
        []
       ],
       "viewport-unit-011-ref.html": [
@@ -440740,10 +440740,6 @@
       "vh-support-transform-translate-iframe.html": [
        "f0b1b54c12d35da74bf19849612574a20339fe6a",
        []
-      ],
-      "vh_not_refreshing_on_chrome_iframe.html": [
-       "8d8e9b49d4aa3d9804a176852288e32ccaaa47d8",
-       []
       ]
      },
      "urls": {
@@ -440762,6 +440758,10 @@
        ]
       }
      },
+     "vh-update-and-transition-in-subframe-iframe.html": [
+      "61831f42f7d6ca1efe2e9534366f4b91da2ca155",
+      []
+     ],
      "viewport-units-001-print-ref.html": [
       "bc914522c7fcf556c69ba56d2d0ba792d7e92b89",
       []
@@ -474935,7 +474935,7 @@
     ]
    },
    "lint.ignore": [
-    "00fb7fd020192843abd6ba46baabd86ca0ce129f",
+    "4bf325500491b21f1556a365e14ebf1c96c9a516",
     []
    ],
    "loading": {
diff --git a/tests/wpt/meta/css/css-values/vh_not_refreshing_on_chrome.html.ini b/tests/wpt/meta/css/css-values/vh_not_refreshing_on_chrome.html.ini
deleted file mode 100644
index 61c7e8e9d50..00000000000
--- a/tests/wpt/meta/css/css-values/vh_not_refreshing_on_chrome.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[vh_not_refreshing_on_chrome.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/tests/css/css-values/reference/vh_not_refreshing_on_chrome_iframe-ref.html b/tests/wpt/tests/css/css-values/reference/vh-update-and-transition-in-subframe-iframe-ref.html
similarity index 54%
rename from tests/wpt/tests/css/css-values/reference/vh_not_refreshing_on_chrome_iframe-ref.html
rename to tests/wpt/tests/css/css-values/reference/vh-update-and-transition-in-subframe-iframe-ref.html
index 5e35f6261e2..bc821683588 100644
--- a/tests/wpt/tests/css/css-values/reference/vh_not_refreshing_on_chrome_iframe-ref.html
+++ b/tests/wpt/tests/css/css-values/reference/vh-update-and-transition-in-subframe-iframe-ref.html
@@ -2,23 +2,39 @@
 <html>
 <!-- Submitted from TestTWF Paris -->
 <head>
-
-    <title>CSS Reference File</title>
+	<title>CSS Reference File</title>
 	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
-
 	<style type="text/css">
-
-		* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
-
-		#testBoxWithVhOnly { background: #F00; width: 60px; float: left; }
-		#testBoxNotGrownHorizontallyByJS { background: #F0F; height: 60px; float: left; }
-		#testBoxWithTransition { background: #FF0; width: 40px; height: 40px; float: left; }
-		#referenceBoxGrownHorizontallyByJS { background: #0F0; height: 40px; float: left; }
-
-		p { clear: both; margin: 10px 0; }
-
+		* {
+			margin: 0;
+			padding: 0;
+		}
+		p {
+			clear: both;
+			margin: 10px 0;
+		}
+		#testBoxWithVhOnly {
+			background: #F00;
+			width: 60px;
+			float: left;
+		}
+		#testBoxNotGrownHorizontallyByJS {
+			background: #F0F;
+			height: 60px;
+			float: left;
+		}
+		#testBoxWithTransition {
+			background: #FF0;
+			width: 40px;
+			height: 40px;
+			float: left;
+		}
+		#referenceBoxGrownHorizontallyByJS {
+			background: #0F0;
+			height: 40px;
+			float: left;
+		}
 	</style>
-
 </head>
 <body>
 
@@ -33,30 +49,13 @@
 
 <script type="text/javascript">
 	'use strict';
-
-	// In case this file was opened by mistake, redirects to proper test
-	if (window.top.location.href  === document.location.href) {
-
-		window.top.location.href = "vh_not_refreshing_on_chrome-ref.html";
-
-	}
-
-	function setDimension(id, dimension, value) {
-
-		var element = document.getElementById(id);
-
-		element.style[dimension] = value + "px";
-
-	}
-
 	function animate() {
-
 		var viewportHeight = document.documentElement.clientHeight;
+		var referenceDimension = Math.round(20 * viewportHeight / 100);
 
-		var sizeH = 20;
-
-		var referenceDimension = Math.round(sizeH * viewportHeight / 100);
-
+		let setDimension = (id, dimension, value) => {
+			document.getElementById(id).style[dimension] = value + "px";
+		}
 		setDimension('testBoxWithVhOnly', 'height', referenceDimension);
 		setDimension('testBoxNotGrownHorizontallyByJS', 'width', referenceDimension);
 		setDimension('testBoxWithTransition', 'width', referenceDimension);
@@ -67,12 +66,11 @@
 		if (referenceDimension < 60) {
 			setTimeout(animate, 20);
 		} else {
-			parent.postMessage('testBoxWithVhOnly', '*');
+			parent.postMessage('testEnded', '*');
 		}
 	}
-
 	setTimeout(animate, 20);
-
+	parent.postMessage('frameLoaded', '*');
 </script>
 
 </body>
diff --git a/tests/wpt/tests/css/css-values/reference/vh-update-and-transition-in-subframe-ref.html b/tests/wpt/tests/css/css-values/reference/vh-update-and-transition-in-subframe-ref.html
new file mode 100644
index 00000000000..ab068dfaf87
--- /dev/null
+++ b/tests/wpt/tests/css/css-values/reference/vh-update-and-transition-in-subframe-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!-- Submitted from TestTWF Paris -->
+<html class="reftest-wait">
+<head>
+	<title>CSS Reference File</title>
+	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
+	<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>
diff --git a/tests/wpt/tests/css/css-values/reference/vh_not_refreshing_on_chrome-ref.html b/tests/wpt/tests/css/css-values/reference/vh_not_refreshing_on_chrome-ref.html
deleted file mode 100644
index 279d1c69b9f..00000000000
--- a/tests/wpt/tests/css/css-values/reference/vh_not_refreshing_on_chrome-ref.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html class="reftest-wait">
-<!-- Submitted from TestTWF Paris -->
-<head>
-
-	<title>CSS Reference File</title>
-	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
-	<script src="/common/reftest-wait.js"></script>
-
-	<style type="text/css">
-
-		* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
-
-		#frameTest { width: 600px; height: 200px; border: 1px solid #000; }
-
-	</style>
-
-	<script type="text/javascript">
-		'use strict';
-
-		// We must not capture the screen until the frameTest
-		// and testBoxWithVhOnly elements have finished changing height.
-		var elementsPending = 2;
-		function receiveMessage() {
-			if (--elementsPending === 0) {
-				takeScreenshot();
-			}
-		}
-
-		window.addEventListener('message', receiveMessage, false);
-
-		var height = 200;
-
-		function resizeReference() {
-
-			var frameTest = document.getElementById('frameTest');
-
-			// let's resize the iframe vertically only, showing that the vh sizes is not updated.
-			if (height < 300) {
-
-				//frameTest.style.width = height++ + "px";
-				frameTest.style.height = ++height + "px";
-
-				setTimeout(resizeReference, 10);
-
-			} else {
-
-				// uncomment the next line to see how a width resize triggers a layout recalculation
-				//frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px";
-
-				window.postMessage('frameTest', '*');
-			}
-
-		}
-
-		setTimeout(resizeReference, 10);
-	</script>
-
-</head>
-<body>
-
-<iframe id="frameTest" src="vh_not_refreshing_on_chrome_iframe-ref.html" frameborder="0"></iframe>
-
-</body>
-</html>
diff --git a/tests/wpt/tests/css/css-values/support/vh_not_refreshing_on_chrome_iframe.html b/tests/wpt/tests/css/css-values/support/vh_not_refreshing_on_chrome_iframe.html
deleted file mode 100644
index 8d8e9b49d4a..00000000000
--- a/tests/wpt/tests/css/css-values/support/vh_not_refreshing_on_chrome_iframe.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html>
-<!-- Submitted from TestTWF Paris -->
-<head>
-
-	<title>CSS Values and Units Test: vh-based dimension doesn't change when the element other dimension doesn't change.</title>
-
-	<style type="text/css">
-
-		* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
-
-			/* the first test box has its vertical dimension is set to some vh units */
-		#testBoxWithVhOnly { background: #F00; width: 60px; height: 20vh; float: left; }
-
-			/* the second test box, with fixed height */
-		#testBoxNotGrownHorizontallyByJS { background: #F0F; width: 20vh; height: 60px; float: left; }
-
-			/* third box, changed by using CSS transition */
-		#testBoxWithTransition { background: #FF0; width: 20vh; height: 40px; float: left;
-			transition-property:       width, height;
-			transition-duration:       0.3s;
-			transition-delay:          0;
-		}
-
-			/* the reference box, growing in both directions (height by js, width by vh unit */
-		#referenceBoxGrownHorizontallyByJS { background: #0F0; width: 20vh; height: 40px; float: left; }
-
-		p { clear: both; margin: 10px 0; }
-
-	</style>
-
-</head>
-<body>
-
-<p>
-	All boxes should end up the same size. The green box is the reference one.
-</p>
-
-<div id="testBoxWithVhOnly"></div>
-<div id="testBoxNotGrownHorizontallyByJS"></div>
-<div id="testBoxWithTransition"></div>
-<div id="referenceBoxGrownHorizontallyByJS"></div>
-
-<script type="text/javascript">
-	'use strict';
-
-	// In case this file was opened by mistake, redirects to proper test
-	if (window.top.location.href  === document.location.href) {
-
-		window.top.location.href = "vh_not_refreshing_on_chrome.html";
-
-	}
-
-	function setDimension(id, dimension, value) {
-
-		var element = document.getElementById(id);
-
-		element.style[dimension] = value + "px";
-
-	}
-
-	function animate() {
-
-		var viewportHeight = document.documentElement.clientHeight;
-
-		var sizeH = 20;
-
-		var referenceDimension = Math.round(sizeH * viewportHeight / 100);
-
-		setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension);
-
-		if (referenceDimension < 60) {
-			setTimeout(animate, 20);
-		} else {
-			parent.postMessage('referenceBoxGrownHorizontallyByJS', '*');
-		}
-	}
-
-	setTimeout(animate, 20);
-
-	addEventListener('transitionend', event => {
-		if (event.propertyName == 'width') {
-			// Stop any further transitons.
-			testBoxWithTransition.style.transitionProperty = 'none';
-			parent.postMessage('testBoxWithTransition', '*');
-		}
-	}, false);
-	var transitionedTestBoxStyle = document.getElementById('testBoxWithTransition').style;
-	transitionedTestBoxStyle.height = "60px";
-</script>
-
-</body>
-</html>
diff --git a/tests/wpt/tests/css/css-values/vh-update-and-transition-in-subframe-iframe.html b/tests/wpt/tests/css/css-values/vh-update-and-transition-in-subframe-iframe.html
new file mode 100644
index 00000000000..61831f42f7d
--- /dev/null
+++ b/tests/wpt/tests/css/css-values/vh-update-and-transition-in-subframe-iframe.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<!-- Submitted from TestTWF Paris -->
+<head>
+	<style type="text/css">
+		* {
+			margin: 0;
+			padding: 0;
+		}
+		p {
+			clear: both;
+			margin: 10px 0;
+		}
+
+		/* The first test box has its vertical dimension is set to
+		   some `vh` units. */
+		#testBoxWithVhOnly {
+			background: #F00;
+			width: 60px; height: 20vh;
+			float: left;
+		}
+
+		/* The second test box, with fixed height. */
+		#testBoxNotGrownHorizontallyByJS {
+			background: #F0F;
+			width: 20vh;
+			height: 60px;
+			float: left;
+		}
+
+		/* The third box, changed by using CSS transition. */
+		#testBoxWithTransition {
+			background: #FF0;
+			width: 20vh;
+			height: 40px;
+			float: left;
+			transition-property: width, height;
+			transition-duration: 0.3s;
+			transition-delay: 0;
+		}
+
+		/* The reference box, growing in both directions (height
+		   by script, width by `vh` units. */
+		#referenceBoxGrownHorizontallyByJS {
+			background: #0F0;
+			width: 20vh;
+			height: 40px;
+			float: left;
+		}
+	</style>
+</head>
+<body>
+
+<p>
+	All boxes should end up the same size. The green box is the reference one.
+</p>
+
+<div id="testBoxWithVhOnly"></div>
+<div id="testBoxNotGrownHorizontallyByJS"></div>
+<div id="testBoxWithTransition"></div>
+<div id="referenceBoxGrownHorizontallyByJS"></div>
+
+<script type="text/javascript">
+	'use strict';
+
+	function animate() {
+		var viewportHeight = document.documentElement.clientHeight;
+		var referenceDimension = Math.round(20 * viewportHeight / 100);
+
+		document.getElementById('referenceBoxGrownHorizontallyByJS')
+			.style['height'] = referenceDimension + "px";
+		if (referenceDimension < 60) {
+			setTimeout(animate, 20);
+		}
+	}
+
+	addEventListener('transitionend', event => {
+		if (event.propertyName == 'width') {
+			// Stop any further transitions.
+			testBoxWithTransition.style.transitionProperty = 'none';
+			parent.postMessage('transitionInIFrameEnded', '*');
+		}
+	}, false);
+
+	document.getElementById('testBoxWithTransition').style.height = "60px";
+	setTimeout(animate, 20);
+	parent.postMessage('frameLoaded', '*');
+</script>
+
+</body>
+</html>
diff --git a/tests/wpt/tests/css/css-values/vh-update-and-transition-in-subframe.html b/tests/wpt/tests/css/css-values/vh-update-and-transition-in-subframe.html
new file mode 100644
index 00000000000..5e73ffc3115
--- /dev/null
+++ b/tests/wpt/tests/css/css-values/vh-update-and-transition-in-subframe.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!-- Submitted from TestTWF Paris -->
+<!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 -->
+<html class="reftest-wait">
+<head>
+	<title>CSS Values and Units Test: Ensure vh-based dimensions update and transition when used in subframe that change size.</title>
+	<meta name="timeout" content="long">
+	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+	<link rel="match" href="reference/vh-update-and-transition-in-subframe-ref.html">
+	<meta charset="UTF-8">
+	<meta name="assert" content="vh-based dimension doesn't change when the element's other dimension doesn't change.">
+	<script src="/common/reftest-wait.js"></script>
+	<style type="text/css">
+		* {
+			margin: 0;
+			padding: 0;
+		}
+		#frameTest {
+			width: 600px;
+			height: 200px;
+			border: 1px solid black;
+		}
+	</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.
+		//  - transitionInIFrameEnded: The transition in the child iframe has ended.
+		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 == "transitionInIFrameEnded") {
+				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.html" frameborder="0"></iframe>
+</body>
+</html>
diff --git a/tests/wpt/tests/css/css-values/vh_not_refreshing_on_chrome.html b/tests/wpt/tests/css/css-values/vh_not_refreshing_on_chrome.html
deleted file mode 100644
index e5606a0cb75..00000000000
--- a/tests/wpt/tests/css/css-values/vh_not_refreshing_on_chrome.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!-- Submitted from TestTWF Paris -->
-<!DOCTYPE html>
-<html class="reftest-wait">
-<head>
-	<title>CSS Values and Units Test: vh-based dimension doesn't change when the element's other dimension doesn't change.</title>
-	<meta name="timeout" content="long">
-	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
-	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
-	<link rel="match" href="reference/vh_not_refreshing_on_chrome-ref.html">
-	<meta charset="UTF-8">
-	<meta name="assert" content="vh-based dimension doesn't change when the element's other dimension doesn't change.">
-	<!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 -->
-	<script src="/common/reftest-wait.js"></script>
-
-	<style type="text/css">
-
-		* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
-
-		#frameTest { width: 600px; height: 200px; border: 1px solid #000; }
-
-	</style>
-
-	<script type="text/javascript">
-		'use strict';
-
-		// We must not capture the screen until the frameTest, referenceBoxGrownHorizontallyByJS
-		// and testBoxWithTransition elements have finished changing height.
-		var elementsPending = 3;
-		function receiveMessage() {
-			if (--elementsPending === 0) {
-				takeScreenshot();
-			}
-		}
-
-		window.addEventListener('message', receiveMessage, false);
-
-		var height = 200;
-
-		function resizeReference() {
-
-			var frameTest = document.getElementById('frameTest');
-
-			// let's resize the iframe vertically only, showing that the vh sizes is not updated.
-			if (height < 300) {
-
-				//frameTest.style.width = height++ + "px";
-				frameTest.style.height = ++height + "px";
-
-				setTimeout(resizeReference, 10);
-
-			} else {
-
-				// uncomment the next line to see how a width resize triggers a layout recalculation
-				//frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px";
-
-				window.postMessage('frameTest', '*');
-			}
-
-		}
-
-		setTimeout(resizeReference, 10);
-	</script>
-
-</head>
-<body>
-
-<iframe id="frameTest" src="support/vh_not_refreshing_on_chrome_iframe.html" frameborder="0"></iframe>
-
-</body>
-</html>
diff --git a/tests/wpt/tests/lint.ignore b/tests/wpt/tests/lint.ignore
index 00fb7fd0201..4bf32550049 100644
--- a/tests/wpt/tests/lint.ignore
+++ b/tests/wpt/tests/lint.ignore
@@ -480,10 +480,10 @@ SET TIMEOUT: css/css-transitions/events-007.html
 SET TIMEOUT: css/css-transitions/support/generalParallelTest.js
 SET TIMEOUT: css/css-transitions/support/runParallelAsyncHarness.js
 SET TIMEOUT: css/css-transitions/transitioncancel-001.html
-SET TIMEOUT: css/css-values/reference/vh_not_refreshing_on_chrome-ref.html
-SET TIMEOUT: css/css-values/reference/vh_not_refreshing_on_chrome_iframe-ref.html
-SET TIMEOUT: css/css-values/vh_not_refreshing_on_chrome.html
-SET TIMEOUT: css/css-values/support/vh_not_refreshing_on_chrome_iframe.html
+SET TIMEOUT: css/css-values/reference/vh-update-and-transition-in-subframe-ref.html
+SET TIMEOUT: css/css-values/reference/vh-update-and-transition-in-subframe-iframe-ref.html
+SET TIMEOUT: css/css-values/vh-update-and-transition-in-subframe.html
+SET TIMEOUT: css/css-values/vh-update-and-transition-in-subframe-iframe.html
 SET TIMEOUT: css/css-writing-modes/orthogonal-parent-shrink-to-fit-001.html
 SET TIMEOUT: css/css-writing-modes/orthogonal-parent-shrink-to-fit-001a.html
 SET TIMEOUT: css/css-writing-modes/orthogonal-parent-shrink-to-fit-001b.html