Add m-esr52 at 52.6.0

193 files changed, 3713 insertions, 0 deletions

diff --git a/layout/reftests/w3c-css/submitted/variables/reftest-stylo.list b/layout/reftests/w3c-css/submitted/variables/reftest-stylo.list
new file mode 100644
index 000000000..20f4dc7d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/reftest-stylo.list
@@ -0,0 +1,175 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences pref(layout.css.variables.enabled,true)
+
+== variable-declaration-01.html variable-declaration-01.html
+== variable-declaration-02.html variable-declaration-02.html
+== variable-declaration-03.html variable-declaration-03.html
+== variable-declaration-04.html variable-declaration-04.html
+== variable-declaration-05.html variable-declaration-05.html
+== variable-declaration-06.html variable-declaration-06.html
+== variable-declaration-07.html variable-declaration-07.html
+== variable-declaration-08.html variable-declaration-08.html
+== variable-declaration-09.html variable-declaration-09.html
+== variable-declaration-10.html variable-declaration-10.html
+== variable-declaration-11.html variable-declaration-11.html
+== variable-declaration-12.html variable-declaration-12.html
+== variable-declaration-13.html variable-declaration-13.html
+== variable-declaration-14.html variable-declaration-14.html
+== variable-declaration-15.html variable-declaration-15.html
+== variable-declaration-16.html variable-declaration-16.html
+== variable-declaration-17.html variable-declaration-17.html
+== variable-declaration-18.html variable-declaration-18.html
+== variable-declaration-19.html variable-declaration-19.html
+== variable-declaration-20.html variable-declaration-20.html
+== variable-declaration-21.html variable-declaration-21.html
+== variable-declaration-22.html variable-declaration-22.html
+== variable-declaration-23.html variable-declaration-23.html
+== variable-declaration-24.html variable-declaration-24.html
+== variable-declaration-25.html variable-declaration-25.html
+== variable-declaration-26.html variable-declaration-26.html
+== variable-declaration-28.html variable-declaration-28.html
+== variable-declaration-29.html variable-declaration-29.html
+== variable-declaration-30.html variable-declaration-30.html
+== variable-declaration-31.html variable-declaration-31.html
+== variable-declaration-32.html variable-declaration-32.html
+== variable-declaration-33.html variable-declaration-33.html
+== variable-declaration-34.html variable-declaration-34.html
+== variable-declaration-35.html variable-declaration-35.html
+== variable-declaration-36.html variable-declaration-36.html
+== variable-declaration-37.html variable-declaration-37.html
+== variable-declaration-38.html variable-declaration-38.html
+== variable-declaration-39.html variable-declaration-39.html
+== variable-declaration-40.html variable-declaration-40.html
+== variable-declaration-41.html variable-declaration-41.html
+== variable-declaration-42.html variable-declaration-42.html
+== variable-declaration-43.html variable-declaration-43.html
+== variable-declaration-44.html variable-declaration-44.html
+== variable-declaration-45.html variable-declaration-45.html
+== variable-declaration-46.html variable-declaration-46.html
+== variable-declaration-47.html variable-declaration-47.html
+== variable-declaration-48.html variable-declaration-48.html
+== variable-declaration-49.html variable-declaration-49.html
+== variable-declaration-50.html variable-declaration-50.html
+== variable-declaration-51.html variable-declaration-51.html
+== variable-declaration-52.html variable-declaration-52.html
+== variable-declaration-53.html variable-declaration-53.html
+== variable-declaration-54.html variable-declaration-54.html
+== variable-declaration-55.html variable-declaration-55.html
+== variable-declaration-56.html variable-declaration-56.html
+== variable-declaration-57.html variable-declaration-57.html
+== variable-declaration-58.html variable-declaration-58.html
+== variable-declaration-59.html variable-declaration-59.html
+== variable-declaration-60.html variable-declaration-60.html
+== variable-external-declaration-01.html variable-external-declaration-01.html
+== variable-external-font-face-01.html variable-external-font-face-01.html
+== variable-external-reference-01.html variable-external-reference-01.html
+== variable-external-supports-01.html variable-external-supports-01.html
+== variable-font-face-01.html variable-font-face-01.html
+== variable-font-face-02.html variable-font-face-02.html
+== variable-reference-01.html variable-reference-01.html
+== variable-reference-02.html variable-reference-02.html
+== variable-reference-03.html variable-reference-03.html
+== variable-reference-04.html variable-reference-04.html
+== variable-reference-05.html variable-reference-05.html
+== variable-reference-06.html variable-reference-06.html
+== variable-reference-07.html variable-reference-07.html
+== variable-reference-08.html variable-reference-08.html
+== variable-reference-09.html variable-reference-09.html
+== variable-reference-10.html variable-reference-10.html
+== variable-reference-11.html variable-reference-11.html
+== variable-reference-12.html variable-reference-12.html
+== variable-reference-13.html variable-reference-13.html
+== variable-reference-14.html variable-reference-14.html
+== variable-reference-15.html variable-reference-15.html
+== variable-reference-16.html variable-reference-16.html
+== variable-reference-17.html variable-reference-17.html
+== variable-reference-18.html variable-reference-18.html
+== variable-reference-19.html variable-reference-19.html
+== variable-reference-20.html variable-reference-20.html
+== variable-reference-21.html variable-reference-21.html
+== variable-reference-22.html variable-reference-22.html
+== variable-reference-23.html variable-reference-23.html
+== variable-reference-24.html variable-reference-24.html
+== variable-reference-25.html variable-reference-25.html
+== variable-reference-26.html variable-reference-26.html
+== variable-reference-27.html variable-reference-27.html
+== variable-reference-28.html variable-reference-28.html
+== variable-reference-29.html variable-reference-29.html
+== variable-reference-30.html variable-reference-30.html
+== variable-reference-31.html variable-reference-31.html
+== variable-reference-32.html variable-reference-32.html
+== variable-reference-33.html variable-reference-33.html
+== variable-reference-34.html variable-reference-34.html
+== variable-reference-35.html variable-reference-35.html
+== variable-reference-36.html variable-reference-36.html
+== variable-reference-37.html variable-reference-37.html
+== variable-reference-38.html variable-reference-38.html
+== variable-reference-39.html variable-reference-39.html
+== variable-reference-40.html variable-reference-40.html
+== variable-supports-01.html variable-supports-01.html
+== variable-supports-02.html variable-supports-02.html
+== variable-supports-03.html variable-supports-03.html
+== variable-supports-04.html variable-supports-04.html
+== variable-supports-05.html variable-supports-05.html
+== variable-supports-06.html variable-supports-06.html
+== variable-supports-07.html variable-supports-07.html
+== variable-supports-08.html variable-supports-08.html
+== variable-supports-09.html variable-supports-09.html
+== variable-supports-10.html variable-supports-10.html
+== variable-supports-11.html variable-supports-11.html
+== variable-supports-12.html variable-supports-12.html
+== variable-supports-13.html variable-supports-13.html
+== variable-supports-14.html variable-supports-14.html
+== variable-supports-15.html variable-supports-15.html
+== variable-supports-16.html variable-supports-16.html
+== variable-supports-17.html variable-supports-17.html
+== variable-supports-18.html variable-supports-18.html
+== variable-supports-19.html variable-supports-19.html
+== variable-supports-20.html variable-supports-20.html
+== variable-supports-21.html variable-supports-21.html
+== variable-supports-22.html variable-supports-22.html
+== variable-supports-23.html variable-supports-23.html
+== variable-supports-24.html variable-supports-24.html
+== variable-supports-25.html variable-supports-25.html
+== variable-supports-26.html variable-supports-26.html
+== variable-supports-27.html variable-supports-27.html
+== variable-supports-28.html variable-supports-28.html
+== variable-supports-29.html variable-supports-29.html
+== variable-supports-30.html variable-supports-30.html
+== variable-supports-31.html variable-supports-31.html
+== variable-supports-32.html variable-supports-32.html
+== variable-supports-33.html variable-supports-33.html
+== variable-supports-34.html variable-supports-34.html
+== variable-supports-35.html variable-supports-35.html
+== variable-supports-36.html variable-supports-36.html
+== variable-supports-37.html variable-supports-37.html
+== variable-supports-38.html variable-supports-38.html
+== variable-supports-39.html variable-supports-39.html
+== variable-supports-40.html variable-supports-40.html
+== variable-supports-41.html variable-supports-41.html
+== variable-supports-42.html variable-supports-42.html
+== variable-supports-43.html variable-supports-43.html
+== variable-supports-44.html variable-supports-44.html
+== variable-supports-45.html variable-supports-45.html
+== variable-supports-46.html variable-supports-46.html
+== variable-supports-47.html variable-supports-47.html
+== variable-supports-48.html variable-supports-48.html
+== variable-supports-49.html variable-supports-49.html
+== variable-supports-50.html variable-supports-50.html
+== variable-supports-51.html variable-supports-51.html
+== variable-supports-52.html variable-supports-52.html
+== variable-supports-53.html variable-supports-53.html
+== variable-supports-54.html variable-supports-54.html
+== variable-supports-55.html variable-supports-55.html
+== variable-supports-56.html variable-supports-56.html
+== variable-supports-57.html variable-supports-57.html
+== variable-supports-58.html variable-supports-58.html
+== variable-supports-59.html variable-supports-59.html
+== variable-supports-60.html variable-supports-60.html
+== variable-supports-61.html variable-supports-61.html
+== variable-supports-62.html variable-supports-62.html
+== variable-supports-63.html variable-supports-63.html
+== variable-supports-64.html variable-supports-64.html
+== variable-supports-65.html variable-supports-65.html
+== variable-supports-66.html variable-supports-66.html
+== variable-supports-67.html variable-supports-67.html
diff --git a/layout/reftests/w3c-css/submitted/variables/reftest.list b/layout/reftests/w3c-css/submitted/variables/reftest.list
new file mode 100644
index 000000000..7c07a7c71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/reftest.list
@@ -0,0 +1,174 @@
+default-preferences pref(layout.css.variables.enabled,true)
+
+== variable-declaration-01.html support/color-green-ref.html
+== variable-declaration-02.html support/color-green-ref.html
+== variable-declaration-03.html support/color-green-ref.html
+== variable-declaration-04.html support/color-green-ref.html
+== variable-declaration-05.html support/color-green-ref.html
+== variable-declaration-06.html support/color-green-ref.html
+== variable-declaration-07.html support/color-green-ref.html
+== variable-declaration-08.html support/color-green-ref.html
+== variable-declaration-09.html support/color-green-ref.html
+== variable-declaration-10.html support/color-green-ref.html
+== variable-declaration-11.html support/color-green-ref.html
+== variable-declaration-12.html support/color-green-ref.html
+== variable-declaration-13.html support/color-green-ref.html
+== variable-declaration-14.html support/color-green-ref.html
+== variable-declaration-15.html variable-declaration-15-ref.html
+== variable-declaration-16.html variable-declaration-16-ref.html
+== variable-declaration-17.html variable-declaration-17-ref.html
+== variable-declaration-18.html variable-declaration-18-ref.html
+== variable-declaration-19.html support/color-green-ref.html
+== variable-declaration-20.html support/color-green-ref.html
+== variable-declaration-21.html support/color-green-ref.html
+== variable-declaration-22.html support/color-green-ref.html
+== variable-declaration-23.html support/color-green-ref.html
+== variable-declaration-24.html support/color-green-ref.html
+== variable-declaration-25.html support/color-green-ref.html
+== variable-declaration-26.html support/color-green-ref.html
+== variable-declaration-28.html support/color-green-ref.html
+== variable-declaration-29.html support/color-green-ref.html
+== variable-declaration-30.html support/color-green-ref.html
+== variable-declaration-31.html support/color-green-ref.html
+== variable-declaration-32.html support/color-green-ref.html
+== variable-declaration-33.html support/color-green-ref.html
+== variable-declaration-34.html support/color-green-ref.html
+== variable-declaration-35.html support/color-green-ref.html
+== variable-declaration-36.html support/color-green-ref.html
+== variable-declaration-37.html support/color-green-ref.html
+== variable-declaration-38.html support/color-green-ref.html
+== variable-declaration-39.html support/color-green-ref.html
+== variable-declaration-40.html support/color-green-ref.html
+== variable-declaration-41.html support/color-green-ref.html
+== variable-declaration-42.html support/color-green-ref.html
+== variable-declaration-43.html support/color-green-ref.html
+== variable-declaration-44.html support/color-green-ref.html
+== variable-declaration-45.html support/color-green-ref.html
+== variable-declaration-46.html support/color-green-ref.html
+== variable-declaration-47.html support/color-green-ref.html
+== variable-declaration-48.html support/color-green-ref.html
+== variable-declaration-49.html support/color-green-ref.html
+== variable-declaration-50.html support/color-green-ref.html
+== variable-declaration-51.html support/color-green-ref.html
+== variable-declaration-52.html support/color-green-ref.html
+== variable-declaration-53.html support/color-green-ref.html
+== variable-declaration-54.html support/color-green-ref.html
+== variable-declaration-55.html support/color-green-ref.html
+== variable-declaration-56.html support/color-green-ref.html
+== variable-declaration-57.html support/color-green-ref.html
+== variable-declaration-58.html support/color-green-ref.html
+== variable-declaration-59.html support/color-green-ref.html
+== variable-declaration-60.html support/color-green-ref.html
+== variable-external-declaration-01.html support/color-green-ref.html
+== variable-external-font-face-01.html variable-external-font-face-01-ref.html
+== variable-external-reference-01.html support/color-green-ref.html
+== variable-external-supports-01.html support/color-green-ref.html
+== variable-font-face-01.html variable-font-face-01-ref.html
+== variable-font-face-02.html variable-font-face-02-ref.html
+== variable-reference-01.html support/color-green-ref.html
+== variable-reference-02.html support/color-green-ref.html
+== variable-reference-03.html support/color-green-ref.html
+== variable-reference-04.html support/color-green-ref.html
+== variable-reference-05.html support/color-green-ref.html
+== variable-reference-06.html support/color-green-ref.html
+== variable-reference-07.html support/color-green-ref.html
+== variable-reference-08.html support/color-green-ref.html
+== variable-reference-09.html support/color-green-ref.html
+== variable-reference-10.html support/color-green-ref.html
+== variable-reference-11.html support/color-green-ref.html
+== variable-reference-12.html variable-reference-12-ref.html
+== variable-reference-13.html support/color-green-ref.html
+== variable-reference-14.html support/color-green-ref.html
+== variable-reference-15.html support/color-green-ref.html
+== variable-reference-16.html support/color-green-ref.html
+== variable-reference-17.html support/color-green-ref.html
+== variable-reference-18.html support/color-green-ref.html
+== variable-reference-19.html support/color-green-ref.html
+== variable-reference-20.html support/color-green-ref.html
+== variable-reference-21.html support/color-green-ref.html
+== variable-reference-22.html support/color-green-ref.html
+== variable-reference-23.html support/color-green-ref.html
+== variable-reference-24.html support/color-green-ref.html
+== variable-reference-25.html support/color-green-ref.html
+== variable-reference-26.html support/color-green-ref.html
+== variable-reference-27.html support/color-green-ref.html
+== variable-reference-28.html support/color-green-ref.html
+== variable-reference-29.html support/color-green-ref.html
+== variable-reference-30.html support/color-green-ref.html
+== variable-reference-31.html support/color-green-ref.html
+== variable-reference-32.html support/color-green-ref.html
+== variable-reference-33.html support/color-green-ref.html
+== variable-reference-34.html support/color-green-ref.html
+== variable-reference-35.html support/color-green-ref.html
+== variable-reference-36.html variable-reference-36-ref.html
+== variable-reference-37.html variable-reference-37-ref.html
+== variable-reference-38.html variable-reference-38-ref.html
+== variable-reference-39.html support/color-green-ref.html
+== variable-reference-40.html variable-reference-40-ref.html
+== variable-supports-01.html support/color-green-ref.html
+== variable-supports-02.html support/color-green-ref.html
+== variable-supports-03.html support/color-green-ref.html
+== variable-supports-04.html support/color-green-ref.html
+== variable-supports-05.html support/color-green-ref.html
+== variable-supports-06.html support/color-green-ref.html
+== variable-supports-07.html support/color-green-ref.html
+== variable-supports-08.html support/color-green-ref.html
+== variable-supports-09.html support/color-green-ref.html
+== variable-supports-10.html support/color-green-ref.html
+== variable-supports-11.html support/color-green-ref.html
+== variable-supports-12.html support/color-green-ref.html
+== variable-supports-13.html support/color-green-ref.html
+== variable-supports-14.html support/color-green-ref.html
+== variable-supports-15.html support/color-green-ref.html
+== variable-supports-16.html support/color-green-ref.html
+== variable-supports-17.html support/color-green-ref.html
+== variable-supports-18.html support/color-green-ref.html
+== variable-supports-19.html support/color-green-ref.html
+== variable-supports-20.html support/color-green-ref.html
+== variable-supports-21.html support/color-green-ref.html
+== variable-supports-22.html support/color-green-ref.html
+== variable-supports-23.html support/color-green-ref.html
+== variable-supports-24.html support/color-green-ref.html
+== variable-supports-25.html support/color-green-ref.html
+== variable-supports-26.html support/color-green-ref.html
+== variable-supports-27.html support/color-green-ref.html
+== variable-supports-28.html support/color-green-ref.html
+== variable-supports-29.html support/color-green-ref.html
+== variable-supports-30.html support/color-green-ref.html
+== variable-supports-31.html support/color-green-ref.html
+== variable-supports-32.html support/color-green-ref.html
+== variable-supports-33.html support/color-green-ref.html
+== variable-supports-34.html support/color-green-ref.html
+== variable-supports-35.html support/color-green-ref.html
+== variable-supports-36.html support/color-green-ref.html
+== variable-supports-37.html support/color-green-ref.html
+== variable-supports-38.html support/color-green-ref.html
+== variable-supports-39.html support/color-green-ref.html
+== variable-supports-40.html support/color-green-ref.html
+== variable-supports-41.html support/color-green-ref.html
+== variable-supports-42.html support/color-green-ref.html
+== variable-supports-43.html support/color-green-ref.html
+== variable-supports-44.html support/color-green-ref.html
+== variable-supports-45.html support/color-green-ref.html
+== variable-supports-46.html support/color-green-ref.html
+== variable-supports-47.html support/color-green-ref.html
+== variable-supports-48.html support/color-green-ref.html
+== variable-supports-49.html support/color-green-ref.html
+== variable-supports-50.html support/color-green-ref.html
+== variable-supports-51.html support/color-green-ref.html
+== variable-supports-52.html support/color-green-ref.html
+== variable-supports-53.html support/color-green-ref.html
+== variable-supports-54.html support/color-green-ref.html
+== variable-supports-55.html support/color-green-ref.html
+== variable-supports-56.html support/color-green-ref.html
+== variable-supports-57.html support/color-green-ref.html
+== variable-supports-58.html support/color-green-ref.html
+== variable-supports-59.html support/color-green-ref.html
+== variable-supports-60.html support/color-green-ref.html
+== variable-supports-61.html support/color-green-ref.html
+== variable-supports-62.html support/color-green-ref.html
+== variable-supports-63.html support/color-green-ref.html
+== variable-supports-64.html support/color-green-ref.html
+== variable-supports-65.html support/color-green-ref.html
+== variable-supports-66.html support/color-green-ref.html
+== variable-supports-67.html support/color-green-ref.html
diff --git a/layout/reftests/w3c-css/submitted/variables/support/Ahem.ttf b/layout/reftests/w3c-css/submitted/variables/support/Ahem.ttf
new file mode 100644
index 000000000..ac81cb031
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/Ahem.ttf
diff --git a/layout/reftests/w3c-css/submitted/variables/support/ahem.css b/layout/reftests/w3c-css/submitted/variables/support/ahem.css
new file mode 100644
index 000000000..82ee46679
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Ahem";
+  src: url(./Ahem.ttf);
+}
diff --git a/layout/reftests/w3c-css/submitted/variables/support/color-green-ref.html b/layout/reftests/w3c-css/submitted/variables/support/color-green-ref.html
new file mode 100644
index 000000000..0eabe58c8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/color-green-ref.html
@@ -0,0 +1,13 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<style>
+p {
+  color: green;
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/support/external-variable-declaration.css b/layout/reftests/w3c-css/submitted/variables/support/external-variable-declaration.css
new file mode 100644
index 000000000..9ba1b9d32
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-declaration.css
@@ -0,0 +1,5 @@
+p {
+  color: red;
+  --a: green;
+  color: var(--a);
+}
diff --git a/layout/reftests/w3c-css/submitted/variables/support/external-variable-font-face.css b/layout/reftests/w3c-css/submitted/variables/support/external-variable-font-face.css
new file mode 100644
index 000000000..87f0609ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-font-face.css
@@ -0,0 +1,15 @@
+@font-face {
+  --a: MyTestFontName;
+  font-family: var(--a);
+  src: url(./Ahem.ttf);
+}
+@font-face {
+  font-family: MyTestFontName2;
+  src: url(./Ahem.ttf);
+}
+#a {
+  font-family: MyTestFontName, serif;
+}
+#b {
+  font-family: MyTestFontName2, serif;
+}
diff --git a/layout/reftests/w3c-css/submitted/variables/support/external-variable-reference.css b/layout/reftests/w3c-css/submitted/variables/support/external-variable-reference.css
new file mode 100644
index 000000000..0c697fdcf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-reference.css
@@ -0,0 +1,6 @@
+:root {
+  --a: green;
+}
+p {
+  color: var(--a);
+}
diff --git a/layout/reftests/w3c-css/submitted/variables/support/external-variable-supports.css b/layout/reftests/w3c-css/submitted/variables/support/external-variable-supports.css
new file mode 100644
index 000000000..96582bfd8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-supports.css
@@ -0,0 +1,4 @@
+body { color: red; }
+@supports (color:var(--a)) {
+  p { color: green; }
+}
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-01.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-01.html
new file mode 100644
index 000000000..8c3ff421c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-01.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable consisting of a single token preceded by white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-02.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-02.html
new file mode 100644
index 000000000..4ee52b586
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-02.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable consisting of a single token with no preceding white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a:green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-03.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-03.html
new file mode 100644
index 000000000..50aa2f358
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-03.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that references another variable.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: var(--b);
+  --b: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-04.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-04.html
new file mode 100644
index 000000000..52d5d3148
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-04.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable consisting of a variable reference followed by white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: var(--b) ;
+  --b: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-05.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-05.html
new file mode 100644
index 000000000..0403bcaec
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-05.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable consisting of a variable reference that includes white space around the variable name.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: var( --b ) ;
+  --b: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-06.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-06.html
new file mode 100644
index 000000000..bccb52da5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-06.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test overriding an existing variable declaration.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: orange;
+  --a: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-07.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-07.html
new file mode 100644
index 000000000..ecd74b2d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-07.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having no tokens in its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  --b: crimson;
+  --a: var(--b,);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-08.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-08.html
new file mode 100644
index 000000000..e3cfd9c08
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-08.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a variable reference whose fallback is white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: orange;
+  --b: green;
+  --a: var(--b, );
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-09.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-09.html
new file mode 100644
index 000000000..898b973bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-09.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having only a comment in its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  --b: crimson;
+  --a: var(--b,/**/);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-10.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-10.html
new file mode 100644
index 000000000..cfcfd32ea
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-10.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a variable reference with a fallback that includes a comment and an identifier.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: orange;
+  --b: green;
+  --a: var(--b,/**/a);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-11.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-11.html
new file mode 100644
index 000000000..ed011ad15
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-11.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having a '!' token at the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  --b: crimson;
+  --a: var(--b,!);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-12.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-12.html
new file mode 100644
index 000000000..3815754af
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-12.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having a ';' token at the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  --b: crimson;
+  --a: var(--b,;);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-13.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-13.html
new file mode 100644
index 000000000..5c262b813
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-13.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having "!important" the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  --b: crimson;
+  --a: var(--b,!important);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-14.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-14.html
new file mode 100644
index 000000000..153cfb994
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-14.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a variable reference and a following identifier with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: green;
+}
+span {
+  color: red;
+  --a:var(--b)red;
+  --b:orange;
+  color: var(--a);
+}
+</style>
+<p><span>This text must be green.</span></p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-15-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-15-ref.html
new file mode 100644
index 000000000..d8a43eb64
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-15-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<style>
+p {
+  font-family: Ahem, sans-serif;
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-15.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-15.html
new file mode 100644
index 000000000..1b3ca7a9d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-15.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="variable-declaration-15-ref.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<style>
+body {
+  font-family: serif;
+}
+p {
+  font-family: monospace;
+  --a: Ahem, sans-serif;
+  font-family: var(--a);
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-16-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-16-ref.html
new file mode 100644
index 000000000..d8a43eb64
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-16-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<style>
+p {
+  font-family: Ahem, sans-serif;
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-16.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-16.html
new file mode 100644
index 000000000..41f2b77e2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-16.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list with the first item being a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="variable-declaration-16-ref.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<style>
+body {
+  font-family: serif;
+}
+p {
+  font-family: monospace;
+  --a: var(--b), sans-serif;
+  --b: Ahem;
+  font-family: var(--a);
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-17-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-17-ref.html
new file mode 100644
index 000000000..bac59fcb8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-17-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<style>
+p {
+  font-family: SomeUnknownFont, Ahem;
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-17.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-17.html
new file mode 100644
index 000000000..2e0f0049e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-17.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list with the last item being a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="variable-declaration-17-ref.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<style>
+body {
+  font-family: serif;
+}
+p {
+  font-family: monospace;
+  --a: SomeUnknownFont, var(--b);
+  --b: Ahem;
+  font-family: var(--a);
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-18-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-18-ref.html
new file mode 100644
index 000000000..d8a43eb64
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-18-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<style>
+p {
+  font-family: Ahem, sans-serif;
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-18.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-18.html
new file mode 100644
index 000000000..8b2880f09
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-18.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list with the comma coming from a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="variable-declaration-18-ref.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<style>
+body {
+  font-family: serif;
+}
+p {
+  font-family: monospace;
+  --a: Ahem var(--b) sans-serif;
+  --b: ,;
+  font-family: var(--a);
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-19.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-19.html
new file mode 100644
index 000000000..da0a82523
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-19.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a function where one of the arguments is a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: rgb(0, var(--b), 0);
+  --b: 128;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-20.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-20.html
new file mode 100644
index 000000000..9bffae2d5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-20.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with "!important".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: var(--b) !important;
+  --b: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-21.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-21.html
new file mode 100644
index 000000000..0a91196df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-21.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a function where all of the arguments and commas are made up of variable references.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: rgb(var(--b)var(--c)var(--d));
+  --b: 0,;
+  --c: 128,;
+  --d: 0;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-22.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-22.html
new file mode 100644
index 000000000..a96d9cf18
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-22.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a variable reference with a number of levels of variable reference fallbacks.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: var(--b, var(--c, var(--d, green)));
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-23.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-23.html
new file mode 100644
index 000000000..b3b1d1823
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-23.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to having two "!important" priorities.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  --b: crimson;
+  --a: var(--b) !important !important;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-24.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-24.html
new file mode 100644
index 000000000..ead972c2a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-24.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that contains a CDO token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  --b: crimson;
+  --a: var(--b) <!--;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-25.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-25.html
new file mode 100644
index 000000000..64d19973d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-25.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that contains a CDC token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  --b: crimson;
+  --a: --> var(--b);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-26.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-26.html
new file mode 100644
index 000000000..79ff10d2b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-26.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that contains only a white space token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: ;
+  color: var(--a) green;
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-28.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-28.html
new file mode 100644
index 000000000..f6f78911b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-28.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to having no tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  --a:;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-29.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-29.html
new file mode 100644
index 000000000..a8847f5ed
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-29.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with a valid custom property name "--".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --: green;
+  color: var(--,crimson);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-30.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-30.html
new file mode 100644
index 000000000..e354abb2d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-30.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that contains a variable reference to itself.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: crimson;
+  --a: var(--a);
+  color: var(--a,green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-31.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-31.html
new file mode 100644
index 000000000..4a24bf2bd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-31.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with a digit.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --0: green;
+  color: var(--\30);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-32.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-32.html
new file mode 100644
index 000000000..d11478e8f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-32.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with an escaped digit.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --\30: green;
+  color: var(--\30);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-33.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-33.html
new file mode 100644
index 000000000..521db857f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-33.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with an escaped letter.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --\61: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-34.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-34.html
new file mode 100644
index 000000000..c6b4d42d3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-34.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with a lone surrogate.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --\d800: green;
+  color: var(--\fffd);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-35.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-35.html
new file mode 100644
index 000000000..f1289069f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-35.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with U+FFFD.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --\fffd: green;
+  color: var(--\fffd);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-36.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-36.html
new file mode 100644
index 000000000..1f984fe7a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-36.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with an out-of-range Unicode character escape.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --\ffffff: green;
+  color: var(--\fffd);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-37.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-37.html
new file mode 100644
index 000000000..bd4b1c0f4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-37.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable consisting of a variable reference where white space surrounds the comma separating the variable name and fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: var(--b , );
+  color: var(--a) green;
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-38.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-38.html
new file mode 100644
index 000000000..ece8cf8ff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-38.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring two variables in the same declaration block that differ only in case, with lowercase first.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  --A: crimson;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-39.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-39.html
new file mode 100644
index 000000000..d1caabbd6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-39.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring two variables in the same declaration block that differ only in case, with uppercase first.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --A: green;
+  --a: crimson;
+  color: var(--A);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-40.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-40.html
new file mode 100644
index 000000000..62a4e2170
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-40.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with an invalid custom property name due to it beginning with "VAR-".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  VAR-a: crimson;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-41.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-41.html
new file mode 100644
index 000000000..c1c585b0f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-41.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the second '-' in the "--" prefix of the custom property name is escaped.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  -\2d a: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-42.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-42.html
new file mode 100644
index 000000000..1a60ba239
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-42.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the custom property name includes an unescaped Chinese character and an escape that is terminated by a space character.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<meta charset=utf-8>
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a-长-name-that-might-be-longer-than-you\27 d-normally-use: green;
+  color: var(--a-长-name-that-might-be-longer-than-you\27 d-normally-use);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-43.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-43.html
new file mode 100644
index 000000000..73aaef2b8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-43.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "initial".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: initial;
+  color: var(--a,green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-44.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-44.html
new file mode 100644
index 000000000..f2a968d25
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-44.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "inherit" where there is no variable to inherit from.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: inherit;
+  color: var(--a,green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-45.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-45.html
new file mode 100644
index 000000000..a5003d9a6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-45.html
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "inherit" where there is a variable to inherit from.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: green;
+  color: crimson;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: inherit;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-46.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-46.html
new file mode 100644
index 000000000..c846b1cf9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-46.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "initial" where there is a variable to inherit from.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: crimson;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: initial;
+  color: var(--a,green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-47.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-47.html
new file mode 100644
index 000000000..2f06d093f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-47.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value consists of a reference to a variable whose value is "inherit".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --b: green;
+  color: crimson;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: var(--b);
+  --b: inherit;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-48.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-48.html
new file mode 100644
index 000000000..9abf32897
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-48.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a number of variables in a cycle.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: crimson;
+  --a: red var(--b);
+  --b: var(--c);
+  --c: var(--d);
+  --d: var(--e);
+  --e: var(--a);
+  --f: var(--e);
+  color: var(--f);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-49.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-49.html
new file mode 100644
index 000000000..9a4b984b8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-49.html
@@ -0,0 +1,26 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that is a dependent of a variable involved in a cycle but which itself is not involved in a cycle.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: crimson;
+  --a: red var(--b) var(--g);
+  --b: var(--c);
+  --c: var(--d);
+  --d: var(--e);
+  --e: var(--a);
+  --f: var(--e);
+  --g: green;
+  color: var(--g);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-50.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-50.html
new file mode 100644
index 000000000..0545b003d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-50.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a number of variables in a chain, where the final element of the chain uses its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: crimson;
+  --a: var(--b,red);
+  --b: var(--c);
+  --c: var(--d);
+  --d: var(--e);
+  --e: var(--a);
+  --f: var(--e);
+  color: var(--f);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-51.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-51.html
new file mode 100644
index 000000000..eac02079b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-51.html
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a reference to an invalid inherited variable.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#invalid-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+  --c: var(--a);
+}
+p {
+  --a: var(--b);
+}
+p {
+  color: red;
+  --b: var(--c,green);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-52.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-52.html
new file mode 100644
index 000000000..e913e2dcd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-52.html
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a reference to an inherited variable whose value was a variable reference that used its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+  --c: var(--a,green);
+}
+p {
+  --a: var(--b);
+}
+p {
+  color: red;
+  --b: var(--c,crimson);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-53.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-53.html
new file mode 100644
index 000000000..b8b6a8cf5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-53.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of two variable references without fallback and with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: green;
+}
+span {
+  color: red;
+  --a:var(--b)var(--c);
+  --b:orange;
+  --c:red;
+  color: var(--a);
+}
+</style>
+<p><span>This text must be green.</span></p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-54.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-54.html
new file mode 100644
index 000000000..8e0b39c4c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-54.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of two variable references with the first variable reference using fallback and with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: green;
+}
+span {
+  color: red;
+  --a:var(--b,orange)var(--c);
+  --c:red;
+  color: var(--a);
+}
+</style>
+<p><span>This text must be green.</span></p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-55.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-55.html
new file mode 100644
index 000000000..2fb68d516
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-55.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of two variable references with the second variable reference using fallback and with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: green;
+}
+span {
+  color: red;
+  --a:var(--b)var(--c,red);
+  --b:orange;
+  color: var(--a);
+}
+</style>
+<p><span>This text must be green.</span></p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-56.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-56.html
new file mode 100644
index 000000000..21378f892
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-56.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "unset" where there is no variable to inherit from.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: unset;
+  color: var(--a,green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-57.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-57.html
new file mode 100644
index 000000000..aa8d84c6a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-57.html
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "unset" where there is a variable to inherit from.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: green;
+  color: crimson;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: unset;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-58.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-58.html
new file mode 100644
index 000000000..b05f96783
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-58.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value consists of a reference to a variable whose value is "unset".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --b: green;
+  color: crimson;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: var(--b);
+  --b: unset;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-59.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-59.html
new file mode 100644
index 000000000..2032a342d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-59.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with a trailing invalid token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: var(--a);
+  --a: green;
+  --a: red);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-60.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-60.html
new file mode 100644
index 000000000..3304eb4a3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-60.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Test: Test declaring a variable with a value whose name is "initial" but using Turkish dotted/dotless 'i's.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+div {
+  color: orange;
+  --a: green;
+  color: var(--a);
+}
+p {
+  --b: İnitial;
+  --c: ınitial;
+  color: var(--b,var(--c,red));
+}
+</style>
+<div><p>This text must be green.</p></div>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-external-declaration-01.html b/layout/reftests/w3c-css/submitted/variables/variable-external-declaration-01.html
new file mode 100644
index 000000000..bae5abf70
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-external-declaration-01.html
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable in an external CSS file.</title>
+<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<link rel="stylesheet" type="text/css" href="support/external-variable-declaration.css">
+
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01-ref.html
new file mode 100644
index 000000000..b84d1ff44
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01-ref.html
@@ -0,0 +1,11 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<p style="font-family: serif">This text must not be in Ahem.</p>
+<p style="font-family: Ahem">But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01.html b/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01.html
new file mode 100644
index 000000000..74132d59c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01.html
@@ -0,0 +1,13 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the invalid declaration and use of a variable in an @font-face rule within an external CSS.</title>
+<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="variable-external-font-face-01-ref.html">
+<link rel="stylesheet" type="text/css" href="support/external-variable-font-face.css">
+<meta name="flags" content="ahem">
+<p id=a>This text must not be in Ahem.</p>
+<p id=b>But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-external-reference-01.html b/layout/reftests/w3c-css/submitted/variables/variable-external-reference-01.html
new file mode 100644
index 000000000..ee40db762
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-external-reference-01.html
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of a variable in a non-custom property where the variable value is inherited within an external CSS.</title>
+<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="stylesheet" type="text/css" href="support/external-variable-reference.css">
+<link rel="match" href="support/color-green-ref.html">
+
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-external-supports-01.html b/layout/reftests/w3c-css/submitted/variables/variable-external-supports-01.html
new file mode 100644
index 000000000..dd3ad1728
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-external-supports-01.html
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference within an external stylesheet file.</title>
+<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="stylesheet" type="text/css" href="support/external-variable-supports.css">
+<link rel="match" href="support/color-green-ref.html">
+
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-font-face-01-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-font-face-01-ref.html
new file mode 100644
index 000000000..b84d1ff44
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-font-face-01-ref.html
@@ -0,0 +1,11 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<p style="font-family: serif">This text must not be in Ahem.</p>
+<p style="font-family: Ahem">But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-font-face-01.html b/layout/reftests/w3c-css/submitted/variables/variable-font-face-01.html
new file mode 100644
index 000000000..cbb7a4f4e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-font-face-01.html
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the invalid declaration and use of a variable in an @font-face rule.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="variable-font-face-01-ref.html">
+<meta name="flags" content="ahem">
+<style>
+@font-face {
+  --a: MyTestFontName;
+  font-family: var(--a);
+  src: url(support/Ahem.ttf);
+}
+@font-face {
+  font-family: MyTestFontName2;
+  src: url(support/Ahem.ttf);
+}
+#a {
+  font-family: MyTestFontName, serif;
+}
+#b {
+  font-family: MyTestFontName2, serif;
+}
+</style>
+<p id=a>This text must not be in Ahem.</p>
+<p id=b>But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-font-face-02-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-font-face-02-ref.html
new file mode 100644
index 000000000..b84d1ff44
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-font-face-02-ref.html
@@ -0,0 +1,11 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<p style="font-family: serif">This text must not be in Ahem.</p>
+<p style="font-family: Ahem">But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-font-face-02.html b/layout/reftests/w3c-css/submitted/variables/variable-font-face-02.html
new file mode 100644
index 000000000..6cb5a1eb1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-font-face-02.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the invalid use of a variable in an @font-face rule where the variable is defined on the root element.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="variable-font-face-02-ref.html">
+<meta name="flags" content="ahem">
+<style>
+:root {
+  --a: MyTestFontName;
+}
+@font-face {
+  font-family: var(--a);
+  src: url(support/Ahem.ttf);
+}
+@font-face {
+  font-family: MyTestFontName2;
+  src: url(support/Ahem.ttf);
+}
+#a {
+  font-family: MyTestFontName, serif;
+}
+#b {
+  font-family: MyTestFontName2, serif;
+}
+</style>
+<p id=a>This text must not be in Ahem.</p>
+<p id=b>But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-01.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-01.html
new file mode 100644
index 000000000..1737b2e65
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-01.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of a variable in a non-custom property where the variable value is inherited.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+:root {
+  --a: green;
+}
+p {
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-02.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-02.html
new file mode 100644
index 000000000..92e4aedca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-02.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of a variable in a non-custom property where the value is invalid at computed-value time due to referencing a non-existent variable.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#invalid-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+:root {
+  --a: crimson;
+  color: red;
+}
+body {
+  color: green;
+}
+p {
+  color: orange;
+  color: var(--a) var(--b);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-03.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-03.html
new file mode 100644
index 000000000..bd50b9ab8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-03.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of two variables in a non-custom property where the variable values are inherited and one of the variable values consists only of white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+:root {
+  --a: green;
+  --b: ;
+  color: red;
+}
+p {
+  color: crimson;
+  color: var(--a) var(--b);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-04.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-04.html
new file mode 100644
index 000000000..060e55c95
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-04.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of two variables in a non-custom property where one variable is inherited and the other references a non-existing variable with fallback that consists only of white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+:root {
+  --a: green;
+  color: red;
+}
+p {
+  color: crimson;
+  color: var(--a) var(--b, );
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-05.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-05.html
new file mode 100644
index 000000000..129e19f1d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-05.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of a variable in a non-custom property where the values contains no tokens other than the variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: green;
+  color: red;
+}
+p {
+  color: crimson;
+  color:var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-06.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-06.html
new file mode 100644
index 000000000..464ce37ed
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-06.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains no tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: crimson;
+  color: red;
+}
+p {
+  color: green;
+  color: var(--a,);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-07.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-07.html
new file mode 100644
index 000000000..d557161ed
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-07.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains a top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: crimson;
+  color: red;
+}
+p {
+  color: green;
+  color: var(--a,;);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-08.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-08.html
new file mode 100644
index 000000000..d7aa58df6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-08.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains a top level '!' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: crimson;
+  color: red;
+}
+p {
+  color: green;
+  color: var(--a,!);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-09.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-09.html
new file mode 100644
index 000000000..f2128cf2c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-09.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with a variable reference that has a non-top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: green;
+  color: crimson;
+}
+p {
+  color: red;
+  color: var(--a,(;));
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-10.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-10.html
new file mode 100644
index 000000000..73251154c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-10.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with a variable reference that has a non-top level '!' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: green;
+  color: crimson;
+}
+p {
+  color: red;
+  color: var(--a,(!));
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-11.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-11.html
new file mode 100644
index 000000000..81dec5a76
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-11.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains nothing but a comment.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: crimson;
+  color: red;
+}
+p {
+  color: green;
+  color: var(--a,/**/);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-12-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-12-ref.html
new file mode 100644
index 000000000..8fcd177cb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-12-ref.html
@@ -0,0 +1,9 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<p>The words "hello there" must appear below:</p>
+<p>hello there</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-12.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-12.html
new file mode 100644
index 000000000..968b71ebb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-12.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of variable references in the 'content' property.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="variable-reference-12-ref.html">
+<style>
+:root {
+  --a: "hello";
+  --b: "there";
+}
+#a:before {
+  content: var(--a) " " var(--b);
+}
+</style>
+<p>The words "hello there" must appear below:</p>
+<p id=a></p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-13.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-13.html
new file mode 100644
index 000000000..b7249981f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-13.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test that important variable declarations are not overwritten by subsequent non-important variable declarations in the one declaration block.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green !important;
+  --a: crimson;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-14.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-14.html
new file mode 100644
index 000000000..7196f5879
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-14.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test that important variable declarations cascade correctly.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+#a {
+  --a: green !important;
+}
+p {
+  color: red;
+  --a: crimson;
+  color: var(--a);
+}
+</style>
+<p id=a>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-15.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-15.html
new file mode 100644
index 000000000..01cd29b2b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-15.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with two variable references with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: crimson;
+  --a: orange;
+  --b: red;
+  color: var(--a)var(--b);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-16.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-16.html
new file mode 100644
index 000000000..f27108ce9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-16.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that consists of a variable reference with a number of levels of variable reference fallbacks.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: red;
+}
+p {
+  color: crimson;
+  color: var(--a, var(--b, var(--c, green)));
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-17.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-17.html
new file mode 100644
index 000000000..2f677a6a1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-17.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that consists of a variable reference whose fallback contains a CDO token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: red;
+}
+p {
+  color: crimson;
+  --a: green;
+  color: var(--a, <!--);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-18.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-18.html
new file mode 100644
index 000000000..a858b2b6b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-18.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference and balanced braces and square brackets.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: red;
+  color: { [ var(--a) ] };
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-19.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-19.html
new file mode 100644
index 000000000..c3b0413e2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-19.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference and a non-top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: red;
+  color: [;] var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-20.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-20.html
new file mode 100644
index 000000000..868a57694
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-20.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference whose function token is in uppercase.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: VAR(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-21.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-21.html
new file mode 100644
index 000000000..f1ad08bda
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-21.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a reference to a variable whose name must be escaped.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --0: green;
+  color: var(--\30);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-22.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-22.html
new file mode 100644
index 000000000..a02f49ac0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-22.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a reference to a variable whose name is U+FFFD but which was declared and referenced using a lone surrogate.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --\d800: green;
+  color: var(--\d800);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-23.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-23.html
new file mode 100644
index 000000000..44afd5a6b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-23.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a reference to a variable whose name is U+FFFD but which was declared using a lone surrogate.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --\d800: green;
+  color: var(--\fffd);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-24.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-24.html
new file mode 100644
index 000000000..25c9c6743
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-24.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a reference to a variable whose name is U+FFFD but which was declared using an out-of-range Unicode character escape.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --\ffffff: green;
+  color: var(--\fffd);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-25.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-25.html
new file mode 100644
index 000000000..4ed514c9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-25.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference with no fallback and which is implicitly closed due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-26.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-26.html
new file mode 100644
index 000000000..ca3b01b26
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-26.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference with white space before its comma and fallback consisting only of white space and which is implicitly closed due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a , </style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-27.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-27.html
new file mode 100644
index 000000000..efd8418c8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-27.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference with fallback consisting only of white space and which is implicitly closed due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a, </style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-28.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-28.html
new file mode 100644
index 000000000..7796f1b88
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-28.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference whose fallback is a variable reference, both of which are implicitly closed due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a, var(--b</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-29.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-29.html
new file mode 100644
index 000000000..b01873fc3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-29.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference with no fallback, and whose variable name is followed by a comment, and where the comment and the variable reference are implicitly closed due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a /* unclosed comment</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-30.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-30.html
new file mode 100644
index 000000000..9082c3058
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-30.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to containing two "!important" priorities.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: green;
+  --a: red;
+  color: var(--a) !important !important;
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-31.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-31.html
new file mode 100644
index 000000000..bfe4677bd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-31.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with a variable reference that has a digit after the "--" prefix.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: red;
+  --0: green;
+  color: var(--0);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-32.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-32.html
new file mode 100644
index 000000000..e1f5789c3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-32.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to containing a variable reference with fallback that contains a bad string.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: green;
+  --a: red;
+  color: var(--a, "
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-33.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-33.html
new file mode 100644
index 000000000..c527bcdd4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-33.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property containing a variable reference with fallback is an implicitly closed string due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: red;
+  --a: green;
+  color: var(--a, "</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-34.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-34.html
new file mode 100644
index 000000000..8cb14db28
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-34.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to containing a variable reference with fallback that contains a bad URL.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: green;
+  --a: red;
+  color: var(--a, url("
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-35.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-35.html
new file mode 100644
index 000000000..cddc46691
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-35.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property containing a variable reference with fallback is an implicitly closed URL due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: red;
+  --a: green;
+  color: var(--a, url("</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-36-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-36-ref.html
new file mode 100644
index 000000000..3af79f794
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-36-ref.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<style>
+p {
+  background-color: green;
+  color: white;
+}
+</style>
+<p>This text must have a green background color.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-36.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-36.html
new file mode 100644
index 000000000..e4f4d5026
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-36.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom shorthand property containing a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
+<link rel="match" href="variable-reference-36-ref.html">
+<style>
+p {
+  background-color: red;
+  --a: url(nothing) green;
+  background: var(--a);
+  color: white;
+}
+</style>
+<p>This text must have a green background color.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-37-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-37-ref.html
new file mode 100644
index 000000000..3af79f794
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-37-ref.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<style>
+p {
+  background-color: green;
+  color: white;
+}
+</style>
+<p>This text must have a green background color.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-37.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-37.html
new file mode 100644
index 000000000..391c5532c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-37.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom shorthand property containing a variable reference, with a subsequent property in the declaration block that overrides one of the shorthand's components.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
+<link rel="match" href="variable-reference-37-ref.html">
+<style>
+p {
+  --a: url(nothing) red;
+  background: var(--a);
+  background-color: green;
+  color: white;
+}
+</style>
+<p>This text must have a green background color.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-38-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-38-ref.html
new file mode 100644
index 000000000..8b4e262c7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-38-ref.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<style>
+p { padding-left: 1em; }
+#a { border-left: black dotted; }
+#b { border-left: black solid; }
+</style>
+<p id=a>The left border must be dotted.</p>
+<p id=b>The left border must be solid.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-38.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-38.html
new file mode 100644
index 000000000..8c37c1030
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-38.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test using variables in overlapping shorthands.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
+<link rel="match" href="variable-reference-38-ref.html">
+<style>
+p { padding-left: 1em; }
+#a { --style: solid; --left: black dotted; border-style: var(--style); border-left: var(--left); border-top: none; border-right: none; border-bottom: none; }
+#b { --style: solid; --left: black dotted; border-left: var(--left); border-style: var(--style); border-top: none; border-right: none; border-bottom: none; }
+</style>
+<p id=a>The left border must be dotted.</p>
+<p id=b>The left border must be solid.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-39.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-39.html
new file mode 100644
index 000000000..21b7fd820
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-39.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that references itself but uses fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: var(--a, red);
+  color: var(--a, green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-40-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-40-ref.html
new file mode 100644
index 000000000..a612d33f0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-40-ref.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<style>
+p {
+  border: 2px solid transparent;
+  border-image: linear-gradient(to right, orange, blue) 1 1;
+}
+</style>
+<p>This paragraph must have an orange/blue gradient border.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-40.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-40.html
new file mode 100644
index 000000000..07697c77b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-40.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test that a variable reference within a gradient value in a border-image shorthand parses correctly.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="variable-reference-40-ref.html">
+<style>
+p {
+  --orange: orange;
+  border: 2px solid transparent;
+  border-image: linear-gradient(to right, var(--orange), blue) 1 1;
+}
+</style>
+<p>This paragraph must have an orange/blue gradient border.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-01.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-01.html
new file mode 100644
index 000000000..1b7872619
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-01.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference and no white space tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color:var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-02.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-02.html
new file mode 100644
index 000000000..2b74a468f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-02.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a white space token followed by a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-03.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-03.html
new file mode 100644
index 000000000..8d19666d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-03.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference surrounded by white space tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a) ) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-04.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-04.html
new file mode 100644
index 000000000..f8b0458ef
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-04.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference surrounded by white space tokens and with white space surrounding the variable name.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var( --a ) ) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-05.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-05.html
new file mode 100644
index 000000000..08a7e7496
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-05.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a,))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-06.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-06.html
new file mode 100644
index 000000000..d83f60055
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-06.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference with fallback that is only white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a, )) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-07.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-07.html
new file mode 100644
index 000000000..d3bcc22ee
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-07.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens, just a comment.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a,/**/))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-08.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-08.html
new file mode 100644
index 000000000..637bfb8de
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-08.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a comment and an identifier.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a,/**/a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-09.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-09.html
new file mode 100644
index 000000000..f82e86029
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-09.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having a '!' token at the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a,!))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-10.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-10.html
new file mode 100644
index 000000000..c8d77476b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-10.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having "!important" at the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a,!important))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-11.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-11.html
new file mode 100644
index 000000000..835d06b52
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-11.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing 'color' property declaration in an @supports rule with a variable reference that comes after a non-color value.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: 1px var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-12.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-12.html
new file mode 100644
index 000000000..594e78e21
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-12.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing 'color' property declaration in an @supports rule with a variable reference that comes before a non-color value.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a) 1px) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-13.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-13.html
new file mode 100644
index 000000000..d6e8a6800
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-13.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing 'color' property declaration in an @supports rule with a range of different tokens and a variable reference not at the top level.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: something 3px url(whereever) calc(var(--a) + 1px)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-14.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-14.html
new file mode 100644
index 000000000..831ee1b05
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-14.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule with a variable reference and an "!important" priority.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a) !important) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-15.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-15.html
new file mode 100644
index 000000000..205c86d97
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-15.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule with two adjacent variable references with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-16.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-16.html
new file mode 100644
index 000000000..102d2c1cd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-16.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule with a variable reference that has a number of levels of variable reference fallbacks.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a, var(--b, var(--c, black)))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-17.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-17.html
new file mode 100644
index 000000000..88f7d4c40
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-17.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule with two "!important" priorities.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a) !important !important)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-18.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-18.html
new file mode 100644
index 000000000..81423b4d1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-18.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a CDO token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a) <!--) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-19.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-19.html
new file mode 100644
index 000000000..df9039956
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-19.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a CDC token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: --> var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-20.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-20.html
new file mode 100644
index 000000000..2673b3802
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-20.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and balanced braces and square brackets.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: { [ var(--a) ] }) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-21.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-21.html
new file mode 100644
index 000000000..67010c2ed
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-21.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having a ';' token at the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a,;))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-22.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-22.html
new file mode 100644
index 000000000..38d1edc55
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-22.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a non-top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: [;] var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-23.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-23.html
new file mode 100644
index 000000000..6ab942132
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-23.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule whose value contains a variable reference with a top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a);)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-24.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-24.html
new file mode 100644
index 000000000..18488cdab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-24.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a non-top level ';' token in its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a,(;))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-25.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-25.html
new file mode 100644
index 000000000..7ba0aafb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-25.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference whose function token is in uppercase.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: VAR(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-26.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-26.html
new file mode 100644
index 000000000..b49df5196
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-26.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a digit after the "--" variable name prefix.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--0)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-27.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-27.html
new file mode 100644
index 000000000..be67b4d06
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-27.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a variable name beginning with an escaped digit.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--\30)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-28.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-28.html
new file mode 100644
index 000000000..2ccd2b357
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-28.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a U+FFFD variable name specified by an escaped lone surrogate.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--\d800)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-29.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-29.html
new file mode 100644
index 000000000..193cb55c7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-29.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a U+FFFD variable name specified by an out-of-range Unicode character escape.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--\ffffff)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-30.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-30.html
new file mode 100644
index 000000000..937b7613e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-30.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a dimension token as the variable name.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(1px))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-31.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-31.html
new file mode 100644
index 000000000..d6dec7b84
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-31.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with white space surrounding the fallback comma.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a , )) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-32.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-32.html
new file mode 100644
index 000000000..1cc391d14
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-32.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom shorthand property declaration in an @supports rule whose value contains a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (background: var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-33.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-33.html
new file mode 100644
index 000000000..f26eec235
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-33.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a:var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-34.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-34.html
new file mode 100644
index 000000000..aac50bf8b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-34.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains white space and a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-35.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-35.html
new file mode 100644
index 000000000..596680387
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-35.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference surrounded by white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b) ) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-36.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-36.html
new file mode 100644
index 000000000..14d5bc9e8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-36.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference surrounded by white space with the variable name also surrounded by white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var( --b ) ) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-37.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-37.html
new file mode 100644
index 000000000..828fb2f7f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-37.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b,))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-38.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-38.html
new file mode 100644
index 000000000..97e019ea8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-38.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference with fallback consisting only of white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b, )) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-39.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-39.html
new file mode 100644
index 000000000..d67ac48f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-39.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens, just a comment.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b,/**/))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-40.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-40.html
new file mode 100644
index 000000000..91fd83c07
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-40.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference with fallback consisting of a comment and an identifier.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b,/**/a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-41.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-41.html
new file mode 100644
index 000000000..aff08cd2b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-41.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with fallback containing a top level '!' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b,!))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-42.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-42.html
new file mode 100644
index 000000000..ae90e57d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-42.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with fallback containing a top level "!important".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b,!important))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-43.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-43.html
new file mode 100644
index 000000000..b5f176d06
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-43.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a dimension followed by a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: 1px var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-44.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-44.html
new file mode 100644
index 000000000..4c18960f3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-44.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference followed bya dimension.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b) 1px) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-45.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-45.html
new file mode 100644
index 000000000..24b1eecf8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-45.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a selection of tokens and a non-top level variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: something 3px url(whereever) calc(var(--b) + 1px)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-46.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-46.html
new file mode 100644
index 000000000..c9d3f5b2a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-46.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and an "!important" priority.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b) !important) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-47.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-47.html
new file mode 100644
index 000000000..946963fe4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-47.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains two adjacent variable references with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b)var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-48.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-48.html
new file mode 100644
index 000000000..7ab0c8455
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-48.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference with a number of levels of variable reference fallbacks.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b, var(--c, var(--d, black)))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-49.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-49.html
new file mode 100644
index 000000000..aa500b908
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-49.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains two "!important" priorities.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b) !important !important)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-50.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-50.html
new file mode 100644
index 000000000..c2185c957
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-50.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and a CDO token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b) <!--) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-51.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-51.html
new file mode 100644
index 000000000..0aa6d4397
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-51.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and a CDC token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: --> var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-52.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-52.html
new file mode 100644
index 000000000..9cc7d2148
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-52.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and balanced braces and square brackets.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: { [ var(--b) ] }) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-53.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-53.html
new file mode 100644
index 000000000..a40c2ffa6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-53.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with a top level ';' token in its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b,;))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-54.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-54.html
new file mode 100644
index 000000000..b6009e1f7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-54.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and a non-top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: [;] var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-55.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-55.html
new file mode 100644
index 000000000..f4b92a2f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-55.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference and a top level ';' token in its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b);)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-56.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-56.html
new file mode 100644
index 000000000..07b188f76
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-56.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains only a white space token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: ) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-57.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-57.html
new file mode 100644
index 000000000..5cb8b3364
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-57.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains no tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a:)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-58.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-58.html
new file mode 100644
index 000000000..5eb41b432
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-58.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing property declaration in an @supports rule with property name "--".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-59.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-59.html
new file mode 100644
index 000000000..16669e66c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-59.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference to itself.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a:var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-60.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-60.html
new file mode 100644
index 000000000..438d23f84
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-60.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is a digit.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--0: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-61.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-61.html
new file mode 100644
index 000000000..62f9683d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-61.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is a digit which is specified with an escape.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--\61: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-62.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-62.html
new file mode 100644
index 000000000..39c55b216
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-62.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is U+FFFD which is specified with an escaped lone surrogate.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--\d800: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-63.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-63.html
new file mode 100644
index 000000000..74235832c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-63.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is U+FFFD which is specified with an out-of-range Unicode character escape.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--\ffffff: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-64.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-64.html
new file mode 100644
index 000000000..2b3eadf24
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-64.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value is a variable reference with a dimension token as the variable name.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(1px))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-65.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-65.html
new file mode 100644
index 000000000..4bc9c4e4d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-65.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value is a variable reference with white space surrounding the fallback comma.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b , )) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-66.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-66.html
new file mode 100644
index 000000000..a38b044ad
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-66.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule where the property name begins with "VAR-".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (VAR-a: a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-67.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-67.html
new file mode 100644
index 000000000..9425e2179
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-67.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a declaration for a custom property has an invalid value does not cause the @supports rule to fail to parse.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: !) or (--a: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>