From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 .../css-values-3/attr-color-invalid-cast.html      |  43 +++++++++++
 .../css-values-3/attr-color-invalid-fallback.html  |  43 +++++++++++
 .../received/css-values-3/attr-color-valid.html    |  43 +++++++++++
 .../css-values-3/attr-invalid-type-001.html        |  43 +++++++++++
 .../css-values-3/attr-invalid-type-002.html        |  46 +++++++++++
 .../css-values-3/attr-invalid-type-003.html        |  46 +++++++++++
 .../css-values-3/attr-length-invalid-cast.html     |  43 +++++++++++
 .../css-values-3/attr-length-invalid-fallback.html |  43 +++++++++++
 .../attr-length-valid-zero-nofallback.html         |  46 +++++++++++
 .../css-values-3/attr-length-valid-zero.html       |  46 +++++++++++
 .../received/css-values-3/attr-length-valid.html   |  43 +++++++++++
 .../css-values-3/attr-px-invalid-cast.html         |  43 +++++++++++
 .../css-values-3/attr-px-invalid-fallback.html     |  43 +++++++++++
 .../received/css-values-3/attr-px-valid.html       |  43 +++++++++++
 .../received/css-values-3/calc-in-calc.html        |  42 ++++++++++
 .../css-values-3/calc-in-media-queries-001.html    |  42 ++++++++++
 .../css-values-3/calc-in-media-queries-002.html    |  42 ++++++++++
 .../css-values-3/calc-invalid-range-clamping.html  |  44 +++++++++++
 .../css-values-3/calc-parenthesis-stack.html       |  42 ++++++++++
 .../w3c-css/received/css-values-3/ch-unit-001.html |  37 +++++++++
 .../css-values-3/initial-background-color.html     |  42 ++++++++++
 .../css-values-3/reference/200-200-green.html      |  33 ++++++++
 .../received/css-values-3/reference/all-green.html |   1 +
 .../css-values-3/reference/ch-unit-001-ref.html    |  18 +++++
 .../reference/vh_not_refreshing_on_chrome-ref.html |  50 ++++++++++++
 .../received/css-values-3/support/1x1-green.png    | Bin 0 -> 135 bytes
 .../received/css-values-3/support/1x1-lime.png     | Bin 0 -> 135 bytes
 .../received/css-values-3/support/1x1-maroon.png   | Bin 0 -> 109 bytes
 .../received/css-values-3/support/1x1-navy.png     | Bin 0 -> 109 bytes
 .../received/css-values-3/support/1x1-red.png      | Bin 0 -> 135 bytes
 .../received/css-values-3/support/1x1-white.png    | Bin 0 -> 109 bytes
 .../received/css-values-3/support/60x60-gg-rr.png  | Bin 0 -> 224 bytes
 .../received/css-values-3/support/60x60-green.png  | Bin 0 -> 218 bytes
 .../received/css-values-3/support/60x60-red.png    | Bin 0 -> 217 bytes
 .../w3c-css/received/css-values-3/support/README   |  28 +++++++
 .../received/css-values-3/support/a-green.css      |   1 +
 .../received/css-values-3/support/b-green.css      |   1 +
 .../received/css-values-3/support/c-red.css        |   1 +
 .../w3c-css/received/css-values-3/support/cat.png  | Bin 0 -> 1883 bytes
 .../received/css-values-3/support/import-green.css |   1 +
 .../received/css-values-3/support/import-red.css   |   1 +
 .../css-values-3/support/pattern-grg-rgr-grg.png   | Bin 0 -> 222 bytes
 .../css-values-3/support/pattern-grg-rrg-rgg.png   | Bin 0 -> 231 bytes
 .../css-values-3/support/pattern-rgr-grg-rgr.png   | Bin 0 -> 223 bytes
 .../received/css-values-3/support/pattern-tr.png   | Bin 0 -> 137 bytes
 .../received/css-values-3/support/ruler-h-50%.png  | Bin 0 -> 691 bytes
 .../received/css-values-3/support/ruler-h-50px.png | Bin 0 -> 671 bytes
 .../css-values-3/support/ruler-v-100px.png         | Bin 0 -> 760 bytes
 .../received/css-values-3/support/ruler-v-50px.png | Bin 0 -> 757 bytes
 .../css-values-3/support/square-purple.png         | Bin 0 -> 92 bytes
 .../received/css-values-3/support/square-teal.png  | Bin 0 -> 92 bytes
 .../received/css-values-3/support/square-white.png | Bin 0 -> 78 bytes
 .../received/css-values-3/support/support/README   |   4 +
 .../css-values-3/support/support/swatch-green.png  | Bin 0 -> 84 bytes
 .../css-values-3/support/support/swatch-red.png    | Bin 0 -> 84 bytes
 .../received/css-values-3/support/swatch-blue.png  | Bin 0 -> 84 bytes
 .../received/css-values-3/support/swatch-green.png | Bin 0 -> 84 bytes
 .../received/css-values-3/support/swatch-lime.png  | Bin 0 -> 84 bytes
 .../css-values-3/support/swatch-orange.png         | Bin 0 -> 84 bytes
 .../received/css-values-3/support/swatch-red.png   | Bin 0 -> 84 bytes
 .../received/css-values-3/support/swatch-teal.png  | Bin 0 -> 156 bytes
 .../received/css-values-3/support/swatch-white.png | Bin 0 -> 85 bytes
 .../css-values-3/support/swatch-yellow.png         | Bin 0 -> 84 bytes
 .../received/css-values-3/support/test-bl.png      | Bin 0 -> 1368 bytes
 .../received/css-values-3/support/test-br.png      | Bin 0 -> 1045 bytes
 .../css-values-3/support/test-inner-half-size.png  | Bin 0 -> 180 bytes
 .../received/css-values-3/support/test-outer.png   | Bin 0 -> 2412 bytes
 .../received/css-values-3/support/test-tl.png      | Bin 0 -> 1025 bytes
 .../received/css-values-3/support/test-tr.png      | Bin 0 -> 1235 bytes
 .../received/css-values-3/vh-calc-support-pct.html |  43 +++++++++++
 .../received/css-values-3/vh-calc-support.html     |  43 +++++++++++
 .../received/css-values-3/vh-em-inherit.html       |  41 ++++++++++
 .../w3c-css/received/css-values-3/vh-inherit.html  |  42 ++++++++++
 .../received/css-values-3/vh-interpolate-pct.html  |  48 ++++++++++++
 .../received/css-values-3/vh-interpolate-px.html   |  48 ++++++++++++
 .../received/css-values-3/vh-interpolate-vh.html   |  48 ++++++++++++
 .../css-values-3/vh-support-atviewport.html        |  44 +++++++++++
 .../received/css-values-3/vh-support-margin.html   |  41 ++++++++++
 .../css-values-3/vh-support-transform-origin.html  |  42 ++++++++++
 .../vh-support-transform-translate.html            |  42 ++++++++++
 .../w3c-css/received/css-values-3/vh-support.html  |  39 ++++++++++
 .../received/css-values-3/vh-zero-support.html     |  41 ++++++++++
 .../css-values-3/vh_not_refreshing_on_chrome.html  |  53 +++++++++++++
 .../vh_not_refreshing_on_chrome_iframe.html        |  85 +++++++++++++++++++++
 84 files changed, 1744 insertions(+)
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/initial-background-color.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/reference/all-green.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/README
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/a-green.css
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/b-green.css
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/c-red.css
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/cat.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/import-green.css
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/import-red.css
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/square-purple.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/square-teal.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/square-white.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/support/README
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/test-bl.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/test-br.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/test-outer.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/test-tl.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/support/test-tr.png
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-inherit.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-support.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html
 create mode 100644 layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html

(limited to 'layout/reftests/w3c-css/received/css-values-3')

diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html
new file mode 100644
index 000000000..d538eebdd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (colors)
+	</title>
+	<meta name="assert" content="
+		Invalid color values in referenced attributes are replaced by the fallback value
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: red; width: 200px; height: 200px; }
+
+			#outer { background: attr(data-test color, green); }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="qqffuutt"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html
new file mode 100644
index 000000000..92258893b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (colors)
+	</title>
+	<meta name="assert" content="
+		When the fallback value of an attr() function is invalid, the delcaration is ignored.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; width: 200px; height: 200px; }
+
+			#outer { background: attr(data-test color, qqffuutt); }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="red"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html
new file mode 100644
index 000000000..8817e6b94
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (colors)
+	</title>
+	<meta name="assert" content="
+		The value of the reference attribute is used correctly in the layout when it's a color.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: red; width: 200px; height: 200px; }
+
+			#outer { background: attr(data-test color); }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="green"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html
new file mode 100644
index 000000000..a56c144c3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (types)
+	</title>
+	<meta name="assert" content="
+		When the type of an att() function is known and unexpected, the declaration is ingored
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; width: attr(data-test color); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="green"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html
new file mode 100644
index 000000000..69766c0e1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (types)
+	</title>
+	<meta name="assert" content="
+		When the type of an att() function is known and unexpected, the declaration is ignored
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; width: attr(data-test number); height: 200px; }
+			/* NOTE: while '0' is a valid length AND a valid number, the number type isn't a valid representation of a length. */
+			/* The reason for this is that most numbers aren't valid length */
+			/* ! Spec need some updates to make those assumptions clearly valid (see Tab Atkins for details) */
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="0"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html
new file mode 100644
index 000000000..69766c0e1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (types)
+	</title>
+	<meta name="assert" content="
+		When the type of an att() function is known and unexpected, the declaration is ignored
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; width: attr(data-test number); height: 200px; }
+			/* NOTE: while '0' is a valid length AND a valid number, the number type isn't a valid representation of a length. */
+			/* The reason for this is that most numbers aren't valid length */
+			/* ! Spec need some updates to make those assumptions clearly valid (see Tab Atkins for details) */
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="0"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html
new file mode 100644
index 000000000..930832363
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		When the value of referenced attribute isn't a valid length, the fallback value is unsed instead.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: attr(data-test length, 200px); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="qqffuutt"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html
new file mode 100644
index 000000000..6a5d4dfe6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		When the attr() fallback is an invalid length, the delcaration is correctly ignored.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; width: attr(data-test length, invalid); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="300px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html
new file mode 100644
index 000000000..b8a042fd4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		The value of referenced attribute is used correctly as a length (even if it's 0).
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer2 { background: red; }
+
+			#outer { width: 200px; height: 200px; }
+			#outer2 { width: 200px; width: attr(data-test length); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+	<div id="outer2" data-test="0"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html
new file mode 100644
index 000000000..fcdebc6fa
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		The value of referenced attribute is used correctly as a length (even if it's 0).
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer2 { background: red; }
+
+			#outer { width: 200px; height: 200px; }
+			#outer2 { width: 200px; width: attr(data-test length, 0); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+	<div id="outer2" data-test="0"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html
new file mode 100644
index 000000000..c78258ffe
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		The value of referenced attribute is used correctly as a length.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: attr(data-test length); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="200px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html
new file mode 100644
index 000000000..93b2d2182
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attributes references (pixels)
+	</title>
+	<meta name="assert" content="
+		When the value of the referenced attribute is not a pixel value, the fallback value is used instead.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: attr(data-test px, 200); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="300px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html
new file mode 100644
index 000000000..778697d0d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (pixels)
+	</title>
+	<meta name="assert" content="
+		When the fallback of a pixel attribute reference is invalid, the declaration is ignored.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; width: attr(data-test px, 300px); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="300"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html
new file mode 100644
index 000000000..ec96924a6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (pixels)
+	</title>
+	<meta name="assert" content="
+		Attribute references for pixel values are replaced correctly at computed time.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: attr(data-test px); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="200"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html
new file mode 100644
index 000000000..3e035fecf
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Calc() inside calc()
+	</title>
+	<meta name="assert" content="
+		The calc() function notation is allowed inside a calc() notation.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; overflow: hidden; }
+			#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
+			#outer { height: calc(calc(100%));
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html
new file mode 100644
index 000000000..af5996963
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units and Media Queries Test:
+		Calc function inside media queries
+	</title>
+	<meta name="assert" content="
+		The calc() expression is supported in the min-width media query.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+	<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+		html { background: red; }
+		@media (min-width: calc(100px)) {
+			html { background: green; }
+		}
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html
new file mode 100644
index 000000000..4b7d7c870
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units and Media Queries Test:
+		Calc function inside media queries
+	</title>
+	<meta name="assert" content="
+		The calc() expression is supported in the min-width media query properly (=with range clamping).
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+	<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+		html { background: red; }
+		@media (min-width: calc(-100px)) { /* should clamp to 0px */
+			html { background: green; }
+		}
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html b/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html
new file mode 100644
index 000000000..a88416a2c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Range clamping into calc() expressions
+	</title>
+	<meta name="assert" content="
+		A calc expression can evaluate to a value which is outside the validity range.
+		If it does, this value must be clamped into the range.
+		The declaration must not be ignored.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/>
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { background: green; width: 200px; height: 200px; }
+			#outer { border-radius: 10px; border-radius: calc(-10px); }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html b/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html
new file mode 100644
index 000000000..1d9033d7e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Calc() inside calc()
+	</title>
+	<meta name="assert" content="
+		The calc() function notation is allowed inside a calc() notation.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; overflow: hidden; }
+			#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
+			#outer { height: calc((((((((((((((((((((((((100%)))))))))))))))))))))))); }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html b/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html
new file mode 100644
index 000000000..8bb0b893c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ch unit</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-values-3/#font-relative-lengths">
+<meta name="flags" content="">
+<link rel="match" href="reference/ch-unit-001-ref.html">
+<meta name="assert" content="The ch unit is equal to the used advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.">
+<style>
+span {
+	background: green;
+	color: green;
+	top: 0; bottom: 0;
+	position: absolute;
+}
+div {
+	background: red;
+	color: red;
+	position: relative;
+	height: 10ch;
+	width: 5ch;
+	float: left;
+}
+
+div + div {
+	width: auto;
+}
+
+div + div span {
+	width: 5ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div><span>00000</span></div>
+  <div><span></span>00000</div>
+</body>
diff --git a/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html b/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html
new file mode 100644
index 000000000..f38226651
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units + CSS Background and Borders Test:
+		Initial property and background-color
+	</title>
+	<meta name="assert" content="
+		The initial keyword is supported on background-color.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: green; overflow: hidden; }
+			#outer { position: absolute; top: 0px; left: 0px; red; width: 100%; height: 100%; }
+			#outer { background: red; background-color: initial; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html b/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html
new file mode 100644
index 000000000..f3da3ddb3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are interpolated correctly (reference rendering)
+	</title>
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html b/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html
new file mode 100644
index 000000000..c70532129
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html
@@ -0,0 +1 @@
+<html style="background: green"></html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html
new file mode 100644
index 000000000..499d43094
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Values and Units Test Reference File</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<meta name="flags" content="">
+<style>
+div {
+	background: green;
+	height: 10ch;
+	width: 10ch;
+	float: left;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div></div>
+</body>
diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html b/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
new file mode 100644
index 000000000..eb5b15d4a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<!-- Submitted from TestTWF Paris -->
+<head>
+
+	<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; }
+
+		#frameTest { width: 600px; height: 200px; border: 1px solid #000; }
+
+	</style>
+
+	<script type="text/javascript">
+		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";
+
+			}
+
+		}
+
+		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/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png
new file mode 100644
index 000000000..b98ca0ba0
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png
new file mode 100644
index 000000000..cb397fb09
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png
new file mode 100644
index 000000000..3f86b0721
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png
new file mode 100644
index 000000000..9b9a03955
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png
new file mode 100644
index 000000000..6bd73ac10
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png
new file mode 100644
index 000000000..dd43faec5
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png
new file mode 100644
index 000000000..84f5b2a4f
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png
new file mode 100644
index 000000000..b3c8cf3eb
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png
new file mode 100644
index 000000000..823f125b8
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/README b/layout/reftests/w3c-css/received/css-values-3/support/README
new file mode 100644
index 000000000..2e5f2ad07
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/README
@@ -0,0 +1,28 @@
+CSS Global Support Directory
+============================
+
+This directory contains common support files (such as images and external
+style sheets). These are sync'ed into the support directories of all our
+test suites. If you have test-suite-specific support files, please add
+them to the appropriate test-suite-specific support/ directory.
+
+If you add to a support/ directory, please run the tools/supportprop.py
+script from the top of the repository to cascade support files into the
+lower-level support directories.
+
+Description of the Common Support File Collection
+-------------------------------------------------
+
+The 1x1-* images are all exactly one pixel.
+
+The swatch-* images all use 15x15 cells.
+
+The square-* images all use 15x15 cells with one pixel borders.
+
+The pattern-* images use cells of various sizes:
+
+   pattern-grg-rgr-grg.png   20x20
+   pattern-rgr-grg-rgr.png   20x20
+   pattern-tr.png            15x15
+   pattern-grg-rrg-rgg.png   15x15
+
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/a-green.css b/layout/reftests/w3c-css/received/css-values-3/support/a-green.css
new file mode 100644
index 000000000..b0dbb071d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/a-green.css
@@ -0,0 +1 @@
+.a { color: green; }
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/b-green.css b/layout/reftests/w3c-css/received/css-values-3/support/b-green.css
new file mode 100644
index 000000000..a0473f5ca
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/b-green.css
@@ -0,0 +1 @@
+.b { color: green; }
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/c-red.css b/layout/reftests/w3c-css/received/css-values-3/support/c-red.css
new file mode 100644
index 000000000..d4ba5c64e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/c-red.css
@@ -0,0 +1 @@
+.c { color: red; }
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/cat.png b/layout/reftests/w3c-css/received/css-values-3/support/cat.png
new file mode 100644
index 000000000..85dd73248
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/cat.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/import-green.css b/layout/reftests/w3c-css/received/css-values-3/support/import-green.css
new file mode 100644
index 000000000..537104e66
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/import-green.css
@@ -0,0 +1 @@
+.import { color: green; }
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/import-red.css b/layout/reftests/w3c-css/received/css-values-3/support/import-red.css
new file mode 100644
index 000000000..9945ef471
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/import-red.css
@@ -0,0 +1 @@
+.import { color: red; }
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png
new file mode 100644
index 000000000..9b88fbd81
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png
new file mode 100644
index 000000000..fcf4f3fd7
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png
new file mode 100644
index 000000000..d454e3a63
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png
new file mode 100644
index 000000000..8b4b25364
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png
new file mode 100644
index 000000000..cf2eea6b4
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png
new file mode 100644
index 000000000..9f4658366
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png
new file mode 100644
index 000000000..a837eca22
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png
new file mode 100644
index 000000000..841410280
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png b/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png
new file mode 100644
index 000000000..0f522d787
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png b/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png
new file mode 100644
index 000000000..e567f51b9
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-white.png b/layout/reftests/w3c-css/received/css-values-3/support/square-white.png
new file mode 100644
index 000000000..5853cbb23
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/square-white.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/README b/layout/reftests/w3c-css/received/css-values-3/support/support/README
new file mode 100644
index 000000000..ea8cb9ef3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/support/README
@@ -0,0 +1,4 @@
+The swatch-green.png file in this directory is really a RED swatch,
+and the swatch-red.png file is really a green swatch.
+
+This directory is used to test relative URIs.
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png
new file mode 100644
index 000000000..1caf25c99
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png
new file mode 100644
index 000000000..0aa79b0c8
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png
new file mode 100644
index 000000000..bf2759634
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png
new file mode 100644
index 000000000..0aa79b0c8
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png
new file mode 100644
index 000000000..55fd7fdae
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png
new file mode 100644
index 000000000..d3cd498b5
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png
new file mode 100644
index 000000000..1caf25c99
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png
new file mode 100644
index 000000000..0293ce89d
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png
new file mode 100644
index 000000000..1a7d4323d
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png
new file mode 100644
index 000000000..1591aa0e2
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png b/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png
new file mode 100644
index 000000000..904e24e99
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-br.png b/layout/reftests/w3c-css/received/css-values-3/support/test-br.png
new file mode 100644
index 000000000..f413ff5c1
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/test-br.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png b/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png
new file mode 100644
index 000000000..e473bf80e
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png b/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png
new file mode 100644
index 000000000..82eeace7f
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png b/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png
new file mode 100644
index 000000000..f6ac0ef7e
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png b/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png
new file mode 100644
index 000000000..59843ae54
Binary files /dev/null and b/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png differ
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html
new file mode 100644
index 000000000..3a422d4ce
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are supported inside calc expressions.
+	</title>
+	<meta name="assert" content="
+		Check that viewport units add correctly to percentages in calc() expressions
+	" />
+
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; }
+			#target { position: absolute; background: green; width: calc(100vw + 50%); height: calc(100vh + 50%); top: -50%; left: -50%; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html
new file mode 100644
index 000000000..0e98941ab
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are supported inside calc expressions.
+	</title>
+	<meta name="assert" content="
+		Check that viewport units add correctly to pixels in calc() expressions
+	" />
+
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/>
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; }
+			#target { position: absolute; background: green; width: calc(100vw + 50px); height: calc(100vh + 50px); top: -50px; left: -50px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html b/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html
new file mode 100644
index 000000000..1affbd093
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		0vh and 0vw are correctly treated as 0px
+	</title>
+	<meta name="assert" content="
+		0vh and 0vw are correctly treated as 0px
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; font-size: 100vw; }
+			#target { background: green; width: 1rem; height: 1em; font-size: 100vh; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html b/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html
new file mode 100644
index 000000000..99890e309
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are inherited properly
+	</title>
+	<meta name="assert" content="
+		Viewport units are inherited properly
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; }
+			#outer { position: relative; background: green; width: 50vw; height: 100vh; }
+			#inner { position: absolute; background: green; left: 100%; width: inherit; height: inherit; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"><div id="inner"></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html
new file mode 100644
index 000000000..293d686c8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are interpolated correctly
+	</title>
+	<meta name="assert" content="
+		The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/>
+	<link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			@keyframes anim {
+				from { width: 0%; height: 0%; }
+				to   { width: 200vw; height: 200vh; }
+			}
+
+			html, body { margin: 0px; padding: 0px; height: 100%; }
+
+			html { background: red; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer { animation: anim 2000000s; animation-delay: -1000000s; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html
new file mode 100644
index 000000000..f07135743
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are interpolated correctly
+	</title>
+	<meta name="assert" content="
+		The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/>
+	<link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			@keyframes anim {
+				from { width: 0px; height: 0px; }
+				to   { width: 200vw; height: 200vh; }
+			}
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer { animation: anim 2000000s; animation-delay: -1000000s; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html
new file mode 100644
index 000000000..d6671174e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are interpolated correctly
+	</title>
+	<meta name="assert" content="
+		The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/>
+	<link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			@keyframes anim {
+				from { width: 75vw; height: 75vh; }
+				to   { width: 125vw; height: 125vh; }
+			}
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer { animation: anim 2000000s; animation-delay: -1000000s; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html
new file mode 100644
index 000000000..c79ace6df
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewports units are supported in @viewport rules
+	</title>
+	<meta name="assert" content="
+		Viewports units are supported in @viewport rules
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/>
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" />
+	<link rel="help" href="https://drafts.csswg.org/css-device-adapt-1/" />
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; overflow: hidden; }
+
+			@viewport { width: 1vw; }
+
+			html { background: red; }
+			#target { background: green; width: 100vw; height: 100vh; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html
new file mode 100644
index 000000000..06b2375a8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewports units are supported in margin properties
+	</title>
+	<meta name="assert" content="
+		Viewports units are supported in margin properties
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: green; }
+			#target { background: red; width: 100%; height: 100%; margin-left: -100vw; margin-top: -100vh; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html
new file mode 100644
index 000000000..4b06a09fc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewports units are supported in transform properties
+	</title>
+	<meta name="assert" content="
+		Viewports units are supported in transform properties
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+	<link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; overflow: hidden; }
+
+			html { background: green; }
+			iframe { width: 400px; height: 400px; margin: 0px; padding: 0px; border: 0px none transparent; }
+
+	</style>
+
+</head>
+<body>
+
+	<iframe src="iframe/vh-support-transform-origin-iframe.html"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html
new file mode 100644
index 000000000..e273026a0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewports units are supported in transform properties
+	</title>
+	<meta name="assert" content="
+		Viewports units are supported in transform properties (translate)
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+	<link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; overflow: hidden; }
+
+			html { background: green; }
+			iframe { width: 400px; height: 400px; margin: 0px; padding: 0px; border: 0px none transparent; }
+
+	</style>
+
+</head>
+<body>
+
+	<iframe src="iframe/vh-support-transform-translate-iframe.html"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-support.html
new file mode 100644
index 000000000..c65b5493f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-support.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewports units are supported in sizing properties
+	</title>
+	<meta name="assert" content="
+		Viewports units are supported in sizing properties
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			#target { background: green; width: 100vw; height: 100vh; }
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html
new file mode 100644
index 000000000..1c1bcd176
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		0vh and 0vw are correctly treated as 0px
+	</title>
+	<meta name="assert" content="
+		0vh and 0vw are correctly treated as 0px
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: green; }
+			#target { background: red; width: 0vw; height: 0vh; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html
new file mode 100644
index 000000000..11b973a29
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html
@@ -0,0 +1,53 @@
+<!-- Submitted from TestTWF Paris -->
+<!DOCTYPE html>
+<html>
+<head>
+	<title>CSS Values and Units Test: vh-based dimension doesn't change when the element's other dimension doesn't change.</title>
+	<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 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 -->
+
+	<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">
+		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";
+
+			}
+
+		}
+
+		setTimeout(resizeReference, 10);
+	</script>
+
+</head>
+<body>
+
+<iframe id="frameTest" src="vh_not_refreshing_on_chrome_iframe.html" frameborder="0"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html
new file mode 100644
index 000000000..89ed75a52
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html
@@ -0,0 +1,85 @@
+<!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>
+	<meta name="assert" content="vh-based dimension doesn't change when the element other dimension doesn't change. Bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8">
+	<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" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units">
+	<link rel="match" href="reference/vh_not_refreshing_on_chrome-ref.html">
+
+	<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:       1.5s;
+			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">
+
+	// 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);
+
+		setTimeout(animate, 20);
+	}
+
+	setTimeout(animate, 20);
+
+	var transitionedTestBoxStyle = document.getElementById('testBoxWithTransition').style;
+	transitionedTestBoxStyle.height = "60px";
+</script>
+
+</body>
+</html>
-- 
cgit v1.2.3