CSS Custom Properties (Variables)
Support for CSS Custom Properties level 1: https://drafts.csswg.org/css-variables/
When enabled, the CSS parser falls back on checking for variable references
instead of just clearing for most parser errors (see
CSSParserValueList::checkForVariableReferencesOrDestroyAndClear). In these
cases, CSS parser tokens are copied into a CSSVariableData object which
also copies and concatenates the strings referenced by the tokens into a
single backing string.
CSSVariableParser handles validating the token ranges pass the relatively
permissive parsing specifications for custom properties.
An additional applyMatchedProperties phase is added to handle resolving
variables before high/low priority properties so they can use the
resolved values from variable references. This should be gated on the
presence of variable references in the document.
CSSVariableResolver handles validating and resolving variable references
in both custom and standard properties.
Notable pieces left to implement:
- support pending-substitution values for shorthands.
- support for custom properties in the CSSOM (not specced).
- optimize style recalc for changing properties.
The included tests (save one timloh suggested) are imported from Mozilla's
test suite.
Intent to implement: https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/vZ0am_AdxxE/9MD8cDitXxMJ
BUG=465126
Review URL: https://codereview.chromium.org/1192983003
Cr-Commit-Position: refs/heads/master@{#357448}
diff --git a/third_party/WebKit/LayoutTests/TestExpectations b/third_party/WebKit/LayoutTests/TestExpectations
index b6b7979..7997f5c 100644
--- a/third_party/WebKit/LayoutTests/TestExpectations
+++ b/third_party/WebKit/LayoutTests/TestExpectations
@@ -82,6 +82,11 @@
crbug.com/267206 [ Mac ] virtual/rootlayerscrolls/fast/scrolling/scrollbar-tickmarks-hittest.html [ Timeout ]
+crbug.com/465126 imported/gecko/variables/variable-declaration-24.html [ Failure ]
+crbug.com/465126 imported/gecko/variables/variable-declaration-25.html [ Failure ]
+crbug.com/465126 imported/gecko/variables/variable-supports-13.html [ Failure ]
+crbug.com/465126 imported/gecko/variables/variable-external-font-face-01.html [ Failure ]
+
crbug.com/280342 [ Linux Win ] http/tests/media/progress-events-generated-correctly.html [ Failure ]
crbug.com/520739 [ Mac ] http/tests/websocket/close-code-and-reason.html [ Failure Pass Timeout ]
diff --git a/third_party/WebKit/LayoutTests/fast/css/variables/reference-with-no-closing-parenthesis-expected.html b/third_party/WebKit/LayoutTests/fast/css/variables/reference-with-no-closing-parenthesis-expected.html
new file mode 100644
index 0000000..d707850
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css/variables/reference-with-no-closing-parenthesis-expected.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<style>div { color: green }</style>
+<div>This text should be green.</div>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/fast/css/variables/reference-with-no-closing-parenthesis.html b/third_party/WebKit/LayoutTests/fast/css/variables/reference-with-no-closing-parenthesis.html
new file mode 100644
index 0000000..7bfbdc48
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css/variables/reference-with-no-closing-parenthesis.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<style>div { color: var(--a, green</style>
+<div>This text should be green.</div>
\ No newline at end of file
diff --git a/third_party/WebKit/LayoutTests/imported/gecko/variables/support/ahem.css b/third_party/WebKit/LayoutTests/imported/gecko/variables/support/ahem.css
new file mode 100644
index 0000000..539894a1
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/support/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+ font-family: "Ahem";
+ src: url(../../../../../resources/Ahem.ttf);
+}
diff --git a/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-declaration.css b/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-declaration.css
new file mode 100644
index 0000000..9ba1b9d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-declaration.css
@@ -0,0 +1,5 @@
+p {
+ color: red;
+ --a: green;
+ color: var(--a);
+}
diff --git a/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-font-face.css b/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-font-face.css
new file mode 100644
index 0000000..f13c9c1
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-font-face.css
@@ -0,0 +1,15 @@
+@font-face {
+ --a: MyTestFontName;
+ font-family: var(--a);
+ src: url(../../resources/Ahem.ttf);
+}
+@font-face {
+ font-family: MyTestFontName2;
+ src: url(../../resources/Ahem.ttf);
+}
+#a {
+ font-family: MyTestFontName;
+}
+#b {
+ font-family: MyTestFontName2;
+}
diff --git a/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-reference.css b/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-reference.css
new file mode 100644
index 0000000..0c697fd
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-reference.css
@@ -0,0 +1,6 @@
+:root {
+ --a: green;
+}
+p {
+ color: var(--a);
+}
diff --git a/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-supports.css b/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-supports.css
new file mode 100644
index 0000000..96582bf
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/support/external-variable-supports.css
@@ -0,0 +1,4 @@
+body { color: red; }
+@supports (color:var(--a)) {
+ p { color: green; }
+}
diff --git a/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-01-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-01-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-01-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-01.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-01.html
new file mode 100644
index 0000000..8c3ff421
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-02-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-02-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-02-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-02.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-02.html
new file mode 100644
index 0000000..4ee52b5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-03-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-03-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-03-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-03.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-03.html
new file mode 100644
index 0000000..50aa2f3
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-04-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-04-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-04-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-04.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-04.html
new file mode 100644
index 0000000..52d5d314
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-05-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-05-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-05-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-05.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-05.html
new file mode 100644
index 0000000..0403bca
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-06-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-06-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-06-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-06.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-06.html
new file mode 100644
index 0000000..bccb52da
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-07-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-07-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-07-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-07.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-07.html
new file mode 100644
index 0000000..ecd74b2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-08-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-08-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-08-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-08.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-08.html
new file mode 100644
index 0000000..e3cfd9c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-09-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-09-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-09-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-09.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-09.html
new file mode 100644
index 0000000..898b973
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-10-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-10-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-10-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-10.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-10.html
new file mode 100644
index 0000000..cfcfd32
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-11-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-11-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-11-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-11.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-11.html
new file mode 100644
index 0000000..ed011ad1
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-12-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-12-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-12-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-12.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-12.html
new file mode 100644
index 0000000..3815754
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-13-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-13-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-13-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-13.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-13.html
new file mode 100644
index 0000000..5c262b8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-14-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-14-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-14-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-14.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-14.html
new file mode 100644
index 0000000..153cfb99
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-15-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-15-expected.html
new file mode 100644
index 0000000..a03a89d5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-15-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-15.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-15.html
new file mode 100644
index 0000000..74e0cc9
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-16-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-16-expected.html
new file mode 100644
index 0000000..a03a89d5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-16-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-16.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-16.html
new file mode 100644
index 0000000..7def121
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-17-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-17-expected.html
new file mode 100644
index 0000000..7b2e465
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-17-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-17.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-17.html
new file mode 100644
index 0000000..e2629bb
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-18-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-18-expected.html
new file mode 100644
index 0000000..a03a89d5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-18-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-18.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-18.html
new file mode 100644
index 0000000..0cb06916
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-19-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-19-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-19-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-19.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-19.html
new file mode 100644
index 0000000..da0a825
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-20-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-20-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-20-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-20.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-20.html
new file mode 100644
index 0000000..9bffae2d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-21-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-21-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-21-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-21.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-21.html
new file mode 100644
index 0000000..0a91196
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-22-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-22-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-22-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-22.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-22.html
new file mode 100644
index 0000000..a96d9cf
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-23-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-23-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-23-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-23.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-23.html
new file mode 100644
index 0000000..b3b1d18
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-24-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-24-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-24-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-24.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-24.html
new file mode 100644
index 0000000..ead972c2a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-25-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-25-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-25-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-25.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-25.html
new file mode 100644
index 0000000..64d1997
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-26-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-26-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-26-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-26.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-26.html
new file mode 100644
index 0000000..79ff10d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-28-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-28-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-28-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-28.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-28.html
new file mode 100644
index 0000000..f6f78911
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-29-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-29-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-29-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-29.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-29.html
new file mode 100644
index 0000000..a8847f5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-30-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-30-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-30-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-30.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-30.html
new file mode 100644
index 0000000..e354abb
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-31-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-31-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-31-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-31.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-31.html
new file mode 100644
index 0000000..4a24bf2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-32-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-32-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-32-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-32.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-32.html
new file mode 100644
index 0000000..d11478e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-33-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-33-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-33-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-33.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-33.html
new file mode 100644
index 0000000..521db85
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-34-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-34-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-34-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-34.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-34.html
new file mode 100644
index 0000000..c6b4d42
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-35-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-35-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-35-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-35.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-35.html
new file mode 100644
index 0000000..f128906
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-36-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-36-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-36-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-36.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-36.html
new file mode 100644
index 0000000..1f984fe
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-37-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-37-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-37-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-37.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-37.html
new file mode 100644
index 0000000..bd4b1c0
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-38-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-38-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-38-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-38.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-38.html
new file mode 100644
index 0000000..ece8cf8f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-39-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-39-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-39-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-39.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-39.html
new file mode 100644
index 0000000..d1caabb
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-40-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-40-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-40-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-40.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-40.html
new file mode 100644
index 0000000..62a4e21
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-41-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-41-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-41-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-41.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-41.html
new file mode 100644
index 0000000..c1c585b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-42-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-42-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-42-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-42.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-42.html
new file mode 100644
index 0000000..1a60ba2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-43-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-43-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-43-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-43.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-43.html
new file mode 100644
index 0000000..73aaef2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-44-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-44-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-44-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-44.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-44.html
new file mode 100644
index 0000000..f2a968d2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-45-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-45-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-45-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-45.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-45.html
new file mode 100644
index 0000000..a5003d9a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-46-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-46-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-46-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-46.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-46.html
new file mode 100644
index 0000000..c846b1c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-47-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-47-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-47-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-47.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-47.html
new file mode 100644
index 0000000..2f06d09
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-48-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-48-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-48-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-48.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-48.html
new file mode 100644
index 0000000..9abf328
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-49-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-49-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-49-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-49.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-49.html
new file mode 100644
index 0000000..9a4b984
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-50-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-50-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-50-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-50.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-50.html
new file mode 100644
index 0000000..0545b00
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-51-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-51-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-51-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-51.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-51.html
new file mode 100644
index 0000000..eac0207
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-52-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-52-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-52-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-52.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-52.html
new file mode 100644
index 0000000..e913e2d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-53-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-53-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-53-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-53.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-53.html
new file mode 100644
index 0000000..b8b6a8c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-54-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-54-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-54-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-54.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-54.html
new file mode 100644
index 0000000..8e0b39c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-55-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-55-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-55-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-55.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-55.html
new file mode 100644
index 0000000..2fb68d5
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-56-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-56-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-56-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-56.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-56.html
new file mode 100644
index 0000000..21378f89
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-57-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-57-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-57-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-57.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-57.html
new file mode 100644
index 0000000..aa8d84c6
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-58-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-58-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-58-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-58.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-58.html
new file mode 100644
index 0000000..b05f967
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-59-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-59-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-59-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-59.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-59.html
new file mode 100644
index 0000000..2032a342
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-60-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-60-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-60-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-60.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-declaration-60.html
new file mode 100644
index 0000000..3304eb4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-declaration-01-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-declaration-01-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-declaration-01-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-declaration-01.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-declaration-01.html
new file mode 100644
index 0000000..bae5abf
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-font-face-01-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-font-face-01-expected.html
new file mode 100644
index 0000000..3c3ba4be
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-font-face-01-expected.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>This text must not be in Ahem.</p>
+<p style="font-family: Ahem">But this text must be in Ahem.</p>
diff --git a/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-font-face-01.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-font-face-01.html
new file mode 100644
index 0000000..f248418
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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-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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-reference-01-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-reference-01-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-reference-01-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-reference-01.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-reference-01.html
new file mode 100644
index 0000000..ee40db762
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-supports-01-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-supports-01-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-supports-01-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-supports-01.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-external-supports-01.html
new file mode 100644
index 0000000..dd3ad17
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-font-face-01-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-font-face-01-expected.html
new file mode 100644
index 0000000..3c3ba4be
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-font-face-01-expected.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>This text must not be in Ahem.</p>
+<p style="font-family: Ahem">But this text must be in Ahem.</p>
diff --git a/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-font-face-01.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-font-face-01.html
new file mode 100644
index 0000000..3b88b9a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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(../../../resources/Ahem.ttf);
+}
+@font-face {
+ font-family: MyTestFontName2;
+ src: url(../../../resources/Ahem.ttf);
+}
+#a {
+ font-family: MyTestFontName;
+}
+#b {
+ font-family: MyTestFontName2;
+}
+</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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-font-face-02-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-font-face-02-expected.html
new file mode 100644
index 0000000..3c3ba4be
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-font-face-02-expected.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>This text must not be in Ahem.</p>
+<p style="font-family: Ahem">But this text must be in Ahem.</p>
diff --git a/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-font-face-02.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-font-face-02.html
new file mode 100644
index 0000000..94bd698
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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(../../../resources/Ahem.ttf);
+}
+@font-face {
+ font-family: MyTestFontName2;
+ src: url(../../../resources/Ahem.ttf);
+}
+#a {
+ font-family: MyTestFontName;
+}
+#b {
+ font-family: MyTestFontName2;
+}
+</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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-01-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-01-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-01-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-01.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-01.html
new file mode 100644
index 0000000..1737b2e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-02-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-02-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-02-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-02.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-02.html
new file mode 100644
index 0000000..92e4aedc
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-03-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-03-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-03-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-03.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-03.html
new file mode 100644
index 0000000..bd50b9a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-04-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-04-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-04-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-04.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-04.html
new file mode 100644
index 0000000..060e55c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-05-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-05-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-05-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-05.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-05.html
new file mode 100644
index 0000000..129e19f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-06-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-06-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-06-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-06.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-06.html
new file mode 100644
index 0000000..464ce37
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-07-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-07-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-07-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-07.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-07.html
new file mode 100644
index 0000000..d557161
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-08-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-08-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-08-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-08.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-08.html
new file mode 100644
index 0000000..d7aa58d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-09-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-09-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-09-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-09.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-09.html
new file mode 100644
index 0000000..f2128cf
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-10-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-10-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-10-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-10.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-10.html
new file mode 100644
index 0000000..7325115
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-11-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-11-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-11-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-11.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-11.html
new file mode 100644
index 0000000..81dec5a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-12-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-12-expected.html
new file mode 100644
index 0000000..8fcd177c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-12-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-12.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-12.html
new file mode 100644
index 0000000..968b71e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-13-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-13-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-13-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-13.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-13.html
new file mode 100644
index 0000000..b724998
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-14-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-14-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-14-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-14.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-14.html
new file mode 100644
index 0000000..7196f587
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-15-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-15-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-15-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-15.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-15.html
new file mode 100644
index 0000000..01cd29b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-16-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-16-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-16-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-16.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-16.html
new file mode 100644
index 0000000..f27108c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-17-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-17-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-17-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-17.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-17.html
new file mode 100644
index 0000000..2f677a6
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-18-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-18-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-18-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-18.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-18.html
new file mode 100644
index 0000000..a858b2b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-19-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-19-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-19-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-19.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-19.html
new file mode 100644
index 0000000..c3b0413
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-20-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-20-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-20-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-20.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-20.html
new file mode 100644
index 0000000..868a576
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-21-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-21-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-21-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-21.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-21.html
new file mode 100644
index 0000000..f1ad08bd
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-22-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-22-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-22-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-22.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-22.html
new file mode 100644
index 0000000..a02f49a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-23-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-23-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-23-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-23.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-23.html
new file mode 100644
index 0000000..44afd5a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-24-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-24-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-24-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-24.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-24.html
new file mode 100644
index 0000000..25c9c67
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-25-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-25-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-25-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-25.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-25.html
new file mode 100644
index 0000000..4ed514c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-26-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-26-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-26-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-26.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-26.html
new file mode 100644
index 0000000..ca3b01b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-27-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-27-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-27-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-27.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-27.html
new file mode 100644
index 0000000..efd8418c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-28-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-28-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-28-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-28.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-28.html
new file mode 100644
index 0000000..7796f1b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-29-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-29-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-29-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-29.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-29.html
new file mode 100644
index 0000000..b01873f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-30-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-30-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-30-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-30.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-30.html
new file mode 100644
index 0000000..9082c30
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-31-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-31-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-31-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-31.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-31.html
new file mode 100644
index 0000000..bfe4677b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-32-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-32-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-32-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-32.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-32.html
new file mode 100644
index 0000000..e1f5789
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-33-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-33-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-33-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-33.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-33.html
new file mode 100644
index 0000000..c527bcdd
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-34-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-34-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-34-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-34.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-34.html
new file mode 100644
index 0000000..8cb14db
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-35-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-35-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-35-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-35.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-35.html
new file mode 100644
index 0000000..cddc466
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-36-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-36-expected.html
new file mode 100644
index 0000000..3af79f7
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-36-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-36.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-36.html
new file mode 100644
index 0000000..e4f4d50
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-37-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-37-expected.html
new file mode 100644
index 0000000..3af79f7
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-37-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-37.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-37.html
new file mode 100644
index 0000000..391c553
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-38-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-38-expected.html
new file mode 100644
index 0000000..8b4e262c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-38-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-38.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-38.html
new file mode 100644
index 0000000..420246b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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-declaration-59-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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-39-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-39-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-39-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-39.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-reference-39.html
new file mode 100644
index 0000000..21b7fd8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-01-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-01-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-01-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-01.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-01.html
new file mode 100644
index 0000000..1b78726
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-02-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-02-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-02-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-02.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-02.html
new file mode 100644
index 0000000..2b74a468
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-03-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-03-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-03-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-03.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-03.html
new file mode 100644
index 0000000..8d19666
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-04-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-04-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-04-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-04.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-04.html
new file mode 100644
index 0000000..f8b0458e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-05-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-05-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-05-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-05.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-05.html
new file mode 100644
index 0000000..08a7e74
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-06-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-06-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-06-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-06.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-06.html
new file mode 100644
index 0000000..d83f60055
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-07-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-07-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-07-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-07.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-07.html
new file mode 100644
index 0000000..d3bcc22
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-08-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-08-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-08-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-08.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-08.html
new file mode 100644
index 0000000..637bfb8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-09-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-09-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-09-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-09.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-09.html
new file mode 100644
index 0000000..f82e860
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-10-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-10-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-10-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-10.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-10.html
new file mode 100644
index 0000000..c8d7747
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-11-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-11-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-11-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-11.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-11.html
new file mode 100644
index 0000000..835d06b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-12-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-12-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-12-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-12.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-12.html
new file mode 100644
index 0000000..594e78e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-13-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-13-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-13-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-13.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-13.html
new file mode 100644
index 0000000..d6e8a68
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-14-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-14-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-14-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-14.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-14.html
new file mode 100644
index 0000000..831ee1b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-15-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-15-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-15-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-15.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-15.html
new file mode 100644
index 0000000..205c86d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-16-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-16-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-16-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-16.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-16.html
new file mode 100644
index 0000000..102d2c1
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-17-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-17-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-17-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-17.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-17.html
new file mode 100644
index 0000000..88f7d4c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-18-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-18-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-18-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-18.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-18.html
new file mode 100644
index 0000000..81423b4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-19-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-19-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-19-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-19.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-19.html
new file mode 100644
index 0000000..df90399
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-20-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-20-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-20-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-20.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-20.html
new file mode 100644
index 0000000..2673b380
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-21-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-21-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-21-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-21.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-21.html
new file mode 100644
index 0000000..67010c2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-22-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-22-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-22-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-22.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-22.html
new file mode 100644
index 0000000..38d1edc
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-23-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-23-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-23-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-23.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-23.html
new file mode 100644
index 0000000..6ab9421
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-24-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-24-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-24-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-24.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-24.html
new file mode 100644
index 0000000..18488cd
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-25-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-25-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-25-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-25.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-25.html
new file mode 100644
index 0000000..7ba0aaf
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-26-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-26-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-26-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-26.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-26.html
new file mode 100644
index 0000000..b49df519
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-27-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-27-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-27-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-27.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-27.html
new file mode 100644
index 0000000..be67b4d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-28-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-28-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-28-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-28.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-28.html
new file mode 100644
index 0000000..2ccd2b3
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-29-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-29-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-29-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-29.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-29.html
new file mode 100644
index 0000000..193cb55
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-30-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-30-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-30-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-30.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-30.html
new file mode 100644
index 0000000..937b761
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-31-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-31-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-31-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-31.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-31.html
new file mode 100644
index 0000000..d6dec7b8
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-32-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-32-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-32-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-32.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-32.html
new file mode 100644
index 0000000..1cc391d
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-33-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-33-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-33-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-33.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-33.html
new file mode 100644
index 0000000..f26eec23
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-34-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-34-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-34-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-34.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-34.html
new file mode 100644
index 0000000..aac50bf
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-35-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-35-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-35-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-35.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-35.html
new file mode 100644
index 0000000..5966803
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-36-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-36-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-36-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-36.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-36.html
new file mode 100644
index 0000000..14d5bc9e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-37-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-37-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-37-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-37.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-37.html
new file mode 100644
index 0000000..828fb2f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-38-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-38-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-38-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-38.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-38.html
new file mode 100644
index 0000000..97e019e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-39-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-39-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-39-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-39.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-39.html
new file mode 100644
index 0000000..d67ac48
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-40-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-40-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-40-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-40.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-40.html
new file mode 100644
index 0000000..91fd83c
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-41-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-41-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-41-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-41.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-41.html
new file mode 100644
index 0000000..aff08cd2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-42-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-42-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-42-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-42.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-42.html
new file mode 100644
index 0000000..ae90e57
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-43-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-43-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-43-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-43.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-43.html
new file mode 100644
index 0000000..b5f176d0
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-44-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-44-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-44-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-44.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-44.html
new file mode 100644
index 0000000..4c18960
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-45-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-45-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-45-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-45.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-45.html
new file mode 100644
index 0000000..24b1eec
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-46-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-46-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-46-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-46.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-46.html
new file mode 100644
index 0000000..c9d3f5b
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-47-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-47-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-47-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-47.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-47.html
new file mode 100644
index 0000000..946963f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-48-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-48-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-48-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-48.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-48.html
new file mode 100644
index 0000000..7ab0c84
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-49-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-49-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-49-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-49.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-49.html
new file mode 100644
index 0000000..aa500b9
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-50-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-50-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-50-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-50.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-50.html
new file mode 100644
index 0000000..c2185c9
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-51-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-51-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-51-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-51.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-51.html
new file mode 100644
index 0000000..0aa6d43
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-52-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-52-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-52-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-52.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-52.html
new file mode 100644
index 0000000..9cc7d214
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-53-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-53-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-53-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-53.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-53.html
new file mode 100644
index 0000000..a40c2ff
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-54-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-54-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-54-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-54.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-54.html
new file mode 100644
index 0000000..b6009e1
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-55-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-55-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-55-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-55.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-55.html
new file mode 100644
index 0000000..f4b92a2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-56-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-56-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-56-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-56.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-56.html
new file mode 100644
index 0000000..07b188f7
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-57-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-57-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-57-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-57.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-57.html
new file mode 100644
index 0000000..5cb8b336
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-58-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-58-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-58-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-58.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-58.html
new file mode 100644
index 0000000..5eb41b4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-59-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-59-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-59-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-59.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-59.html
new file mode 100644
index 0000000..16669e6
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-60-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-60-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-60-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-60.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-60.html
new file mode 100644
index 0000000..438d23f
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-61-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-61-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-61-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-61.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-61.html
new file mode 100644
index 0000000..62f9683d4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-62-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-62-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-62-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-62.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-62.html
new file mode 100644
index 0000000..39c55b2
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-63-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-63-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-63-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-63.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-63.html
new file mode 100644
index 0000000..7423583
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-64-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-64-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-64-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-64.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-64.html
new file mode 100644
index 0000000..2b3eadf
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-65-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-65-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-65-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-65.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-65.html
new file mode 100644
index 0000000..4bc9c4e
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-66-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-66-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-66-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-66.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-66.html
new file mode 100644
index 0000000..a38b044
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-67-expected.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-67-expected.html
new file mode 100644
index 0000000..0eabe58
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-67-expected.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/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-67.html b/third_party/WebKit/LayoutTests/imported/gecko/variables/variable-supports-67.html
new file mode 100644
index 0000000..9425e21
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/gecko/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>
diff --git a/third_party/WebKit/Source/build/scripts/css_properties.py b/third_party/WebKit/Source/build/scripts/css_properties.py
index 2f4ae99..a79fa7016 100755
--- a/third_party/WebKit/Source/build/scripts/css_properties.py
+++ b/third_party/WebKit/Source/build/scripts/css_properties.py
@@ -52,8 +52,8 @@
self._aliases = [property for property in properties if property['alias_for']]
properties = [property for property in properties if not property['alias_for']]
- # We currently assign 0 to CSSPropertyInvalid
- self._first_enum_value = 1
+ # We currently assign 0 to CSSPropertyInvalid, and 1 to CSSPropertyVariable
+ self._first_enum_value = 2
# StylePropertyMetadata additionally assumes there are under 1024 properties.
assert self._first_enum_value + len(properties) < 512, 'Property aliasing expects there are under 512 properties.'
diff --git a/third_party/WebKit/Source/build/scripts/make_css_property_names.py b/third_party/WebKit/Source/build/scripts/make_css_property_names.py
index e733c25..5049e092 100755
--- a/third_party/WebKit/Source/build/scripts/make_css_property_names.py
+++ b/third_party/WebKit/Source/build/scripts/make_css_property_names.py
@@ -28,6 +28,7 @@
enum CSSPropertyID {
CSSPropertyInvalid = 0,
+ CSSPropertyVariable = 1,
%(property_enums)s
};
@@ -44,7 +45,7 @@
inline CSSPropertyID convertToCSSPropertyID(int value)
{
- ASSERT((value >= firstCSSProperty && value <= lastCSSProperty) || value == CSSPropertyInvalid);
+ ASSERT((value >= firstCSSProperty && value <= lastCSSProperty) || value == CSSPropertyInvalid || value == CSSPropertyVariable);
return static_cast<CSSPropertyID>(value);
}
diff --git a/third_party/WebKit/Source/build/scripts/templates/StyleBuilder.cpp.tmpl b/third_party/WebKit/Source/build/scripts/templates/StyleBuilder.cpp.tmpl
index 537baf0..6e7582a 100644
--- a/third_party/WebKit/Source/build/scripts/templates/StyleBuilder.cpp.tmpl
+++ b/third_party/WebKit/Source/build/scripts/templates/StyleBuilder.cpp.tmpl
@@ -29,6 +29,10 @@
return;
{% endfor %}
+ case CSSPropertyVariable:
+ ASSERT(!isInitial && !isInherit);
+ StyleBuilderFunctions::applyValueCSSPropertyVariable(state, value);
+ return;
{% for property_id, property in properties.items() if property.direction_aware %}
case {{property_id}}:
{% endfor %}
diff --git a/third_party/WebKit/Source/build/scripts/templates/StyleBuilderFunctions.h.tmpl b/third_party/WebKit/Source/build/scripts/templates/StyleBuilderFunctions.h.tmpl
index 2d94fd0..9a26b55 100644
--- a/third_party/WebKit/Source/build/scripts/templates/StyleBuilderFunctions.h.tmpl
+++ b/third_party/WebKit/Source/build/scripts/templates/StyleBuilderFunctions.h.tmpl
@@ -21,6 +21,8 @@
static void applyValue{{property_id}}(StyleResolverState&, CSSValue*);
{% endfor %}
+
+ static void applyValueCSSPropertyVariable(StyleResolverState&, CSSValue*);
};
} // namespace blink
diff --git a/third_party/WebKit/Source/core/core.gypi b/third_party/WebKit/Source/core/core.gypi
index 59b96de..8ae02d1 100644
--- a/third_party/WebKit/Source/core/core.gypi
+++ b/third_party/WebKit/Source/core/core.gypi
@@ -1032,6 +1032,8 @@
'css/CSSCustomFontData.h',
'css/CSSCustomIdentValue.cpp',
'css/CSSCustomIdentValue.h',
+ 'css/CSSCustomPropertyDeclaration.cpp',
+ 'css/CSSCustomPropertyDeclaration.h',
'css/CSSDefaultStyleSheets.cpp',
'css/CSSDefaultStyleSheets.h',
'css/CSSFontFace.cpp',
@@ -1127,6 +1129,10 @@
'css/CSSValuePair.h',
'css/CSSValuePool.cpp',
'css/CSSValuePool.h',
+ 'css/CSSVariableData.cpp',
+ 'css/CSSVariableData.h',
+ 'css/CSSVariableReferenceValue.cpp',
+ 'css/CSSVariableReferenceValue.h',
'css/CSSViewportRule.cpp',
'css/CSSViewportRule.h',
'css/DOMWindowCSS.cpp',
@@ -1246,6 +1252,8 @@
'css/parser/CSSSupportsParser.h',
'css/parser/CSSTokenizer.cpp',
'css/parser/CSSTokenizerInputStream.cpp',
+ 'css/parser/CSSVariableParser.cpp',
+ 'css/parser/CSSVariableParser.h',
'css/parser/LegacyCSSPropertyParser.cpp',
'css/parser/MediaQueryBlockWatcher.cpp',
'css/parser/MediaQueryParser.cpp',
@@ -1255,6 +1263,8 @@
'css/resolver/AnimatedStyleBuilder.h',
'css/resolver/CSSToStyleMap.cpp',
'css/resolver/CSSToStyleMap.h',
+ 'css/resolver/CSSVariableResolver.cpp',
+ 'css/resolver/CSSVariableResolver.h',
'css/resolver/ElementResolveContext.cpp',
'css/resolver/ElementResolveContext.h',
'css/resolver/ElementStyleResources.cpp',
diff --git a/third_party/WebKit/Source/core/css/CSSCustomPropertyDeclaration.cpp b/third_party/WebKit/Source/core/css/CSSCustomPropertyDeclaration.cpp
new file mode 100644
index 0000000..87f2af2
--- /dev/null
+++ b/third_party/WebKit/Source/core/css/CSSCustomPropertyDeclaration.cpp
@@ -0,0 +1,16 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "config.h"
+#include "core/css/CSSCustomPropertyDeclaration.h"
+
+namespace blink {
+
+DEFINE_TRACE_AFTER_DISPATCH(CSSCustomPropertyDeclaration)
+{
+ visitor->trace(m_value);
+ CSSValue::traceAfterDispatch(visitor);
+}
+
+} // namespace blink
diff --git a/third_party/WebKit/Source/core/css/CSSCustomPropertyDeclaration.h b/third_party/WebKit/Source/core/css/CSSCustomPropertyDeclaration.h
new file mode 100644
index 0000000..01c959bd
--- /dev/null
+++ b/third_party/WebKit/Source/core/css/CSSCustomPropertyDeclaration.h
@@ -0,0 +1,61 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef CSSCustomPropertyDeclaration_h
+#define CSSCustomPropertyDeclaration_h
+
+#include "core/css/CSSValue.h"
+#include "core/css/CSSVariableData.h"
+#include "wtf/RefPtr.h"
+#include "wtf/text/AtomicString.h"
+
+namespace blink {
+
+class CSSCustomPropertyDeclaration : public CSSValue {
+public:
+ static PassRefPtrWillBeRawPtr<CSSCustomPropertyDeclaration> create(const AtomicString& name, PassRefPtr<CSSVariableData> value)
+ {
+ return adoptRefWillBeNoop(new CSSCustomPropertyDeclaration(name, value));
+ }
+
+ static PassRefPtrWillBeRawPtr<CSSCustomPropertyDeclaration> create(const AtomicString& name, CSSValueID id)
+ {
+ return adoptRefWillBeNoop(new CSSCustomPropertyDeclaration(name, id));
+ }
+
+ const AtomicString& name() const { return m_name; }
+ CSSVariableData* value() const { return m_value.get(); }
+ CSSValueID id() const { return m_valueId; }
+
+ bool equals(const CSSCustomPropertyDeclaration& other) const { return this == &other; }
+
+ DECLARE_TRACE_AFTER_DISPATCH();
+private:
+ CSSCustomPropertyDeclaration(const AtomicString& name, CSSValueID id)
+ : CSSValue(CustomPropertyDeclarationClass)
+ , m_name(name)
+ , m_value(nullptr)
+ , m_valueId(id)
+ {
+ ASSERT(id == CSSValueInherit || id == CSSValueInitial || id == CSSValueUnset);
+ }
+
+ CSSCustomPropertyDeclaration(const AtomicString& name, PassRefPtr<CSSVariableData> value)
+ : CSSValue(CustomPropertyDeclarationClass)
+ , m_name(name)
+ , m_value(value)
+ , m_valueId(CSSValueInternalVariableValue)
+ {
+ }
+
+ const AtomicString m_name;
+ RefPtr<CSSVariableData> m_value;
+ CSSValueID m_valueId;
+};
+
+DEFINE_CSS_VALUE_TYPE_CASTS(CSSCustomPropertyDeclaration, isCustomPropertyDeclaration());
+
+} // namespace blink
+
+#endif // CSSCustomPropertyDeclaration_h
diff --git a/third_party/WebKit/Source/core/css/CSSProperty.cpp b/third_party/WebKit/Source/core/css/CSSProperty.cpp
index 4bab1ff..e64f93a 100644
--- a/third_party/WebKit/Source/core/css/CSSProperty.cpp
+++ b/third_party/WebKit/Source/core/css/CSSProperty.cpp
@@ -228,6 +228,9 @@
if (!CSSPropertyMetadata::isEnabledProperty(propertyID))
return false;
+ if (propertyID == CSSPropertyVariable)
+ return false;
+
// all shorthand spec says:
// The all property is a shorthand that resets all CSS properties except
// direction and unicode-bidi. It only accepts the CSS-wide keywords.
diff --git a/third_party/WebKit/Source/core/css/CSSValue.cpp b/third_party/WebKit/Source/core/css/CSSValue.cpp
index a66b20b..dcc6bd1 100644
--- a/third_party/WebKit/Source/core/css/CSSValue.cpp
+++ b/third_party/WebKit/Source/core/css/CSSValue.cpp
@@ -35,6 +35,7 @@
#include "core/css/CSSCrossfadeValue.h"
#include "core/css/CSSCursorImageValue.h"
#include "core/css/CSSCustomIdentValue.h"
+#include "core/css/CSSCustomPropertyDeclaration.h"
#include "core/css/CSSFontFaceSrcValue.h"
#include "core/css/CSSFontFeatureValue.h"
#include "core/css/CSSFunctionValue.h"
@@ -58,6 +59,7 @@
#include "core/css/CSSUnsetValue.h"
#include "core/css/CSSValueList.h"
#include "core/css/CSSValuePair.h"
+#include "core/css/CSSVariableReferenceValue.h"
namespace blink {
@@ -170,6 +172,10 @@
return compareCSSValues<CSSSVGDocumentValue>(*this, other);
case CSSContentDistributionClass:
return compareCSSValues<CSSContentDistributionValue>(*this, other);
+ case CustomPropertyDeclarationClass:
+ return compareCSSValues<CSSCustomPropertyDeclaration>(*this, other);
+ case VariableReferenceClass:
+ return compareCSSValues<CSSVariableReferenceValue>(*this, other);
}
ASSERT_NOT_REACHED();
return false;
@@ -252,6 +258,11 @@
return toCSSSVGDocumentValue(this)->customCSSText();
case CSSContentDistributionClass:
return toCSSContentDistributionValue(this)->customCSSText();
+ case VariableReferenceClass:
+ return toCSSVariableReferenceValue(this)->customCSSText();
+ case CustomPropertyDeclarationClass:
+ // TODO(leviw): We don't allow custom properties in CSSOM yet
+ ASSERT_NOT_REACHED();
}
ASSERT_NOT_REACHED();
return String();
@@ -368,6 +379,12 @@
case CSSContentDistributionClass:
delete toCSSContentDistributionValue(this);
return;
+ case VariableReferenceClass:
+ delete toCSSVariableReferenceValue(this);
+ return;
+ case CustomPropertyDeclarationClass:
+ delete toCSSCustomPropertyDeclaration(this);
+ return;
}
ASSERT_NOT_REACHED();
}
@@ -483,6 +500,12 @@
case CSSContentDistributionClass:
toCSSContentDistributionValue(this)->~CSSContentDistributionValue();
return;
+ case VariableReferenceClass:
+ toCSSVariableReferenceValue(this)->~CSSVariableReferenceValue();
+ return;
+ case CustomPropertyDeclarationClass:
+ toCSSCustomPropertyDeclaration(this)->~CSSCustomPropertyDeclaration();
+ return;
}
ASSERT_NOT_REACHED();
}
@@ -598,6 +621,12 @@
case CSSContentDistributionClass:
toCSSContentDistributionValue(this)->traceAfterDispatch(visitor);
return;
+ case VariableReferenceClass:
+ toCSSVariableReferenceValue(this)->traceAfterDispatch(visitor);
+ return;
+ case CustomPropertyDeclarationClass:
+ toCSSCustomPropertyDeclaration(this)->traceAfterDispatch(visitor);
+ return;
}
ASSERT_NOT_REACHED();
}
diff --git a/third_party/WebKit/Source/core/css/CSSValue.h b/third_party/WebKit/Source/core/css/CSSValue.h
index b157f57..5b2e09bb 100644
--- a/third_party/WebKit/Source/core/css/CSSValue.h
+++ b/third_party/WebKit/Source/core/css/CSSValue.h
@@ -103,6 +103,8 @@
bool isContentDistributionValue() const { return m_classType == CSSContentDistributionClass; }
bool isUnicodeRangeValue() const { return m_classType == UnicodeRangeClass; }
bool isGridLineNamesValue() const { return m_classType == GridLineNamesClass; }
+ bool isCustomPropertyDeclaration() const { return m_classType == CustomPropertyDeclarationClass; }
+ bool isVariableReferenceValue() const { return m_classType == VariableReferenceClass; }
bool hasFailedOrCanceledSubresources() const;
@@ -164,6 +166,8 @@
UnicodeRangeClass,
GridTemplateAreasClass,
PathClass,
+ VariableReferenceClass,
+ CustomPropertyDeclarationClass,
// SVG classes.
CSSSVGDocumentClass,
diff --git a/third_party/WebKit/Source/core/css/CSSValueKeywords.in b/third_party/WebKit/Source/core/css/CSSValueKeywords.in
index b950c1d..8d673ee 100644
--- a/third_party/WebKit/Source/core/css/CSSValueKeywords.in
+++ b/third_party/WebKit/Source/core/css/CSSValueKeywords.in
@@ -1043,3 +1043,6 @@
mandatory
proximity
from-image
+
+var
+-internal-variable-value
diff --git a/third_party/WebKit/Source/core/css/CSSVariableData.cpp b/third_party/WebKit/Source/core/css/CSSVariableData.cpp
new file mode 100644
index 0000000..d5208cb
--- /dev/null
+++ b/third_party/WebKit/Source/core/css/CSSVariableData.cpp
@@ -0,0 +1,59 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "config.h"
+#include "core/css/CSSVariableData.h"
+
+#include "core/css/parser/CSSParserTokenRange.h"
+#include "wtf/text/StringBuilder.h"
+
+namespace blink {
+
+template<typename CharacterType> void CSSVariableData::updateTokens(const CSSParserTokenRange& range)
+{
+ const CharacterType* currentOffset = m_backingString.getCharacters<CharacterType>();
+ for (const CSSParserToken& token : range) {
+ if (token.hasStringBacking()) {
+ unsigned length = token.value().length();
+ CSSParserString parserString;
+ parserString.init(currentOffset, length);
+ m_tokens.append(token.copyWithUpdatedString(parserString));
+ currentOffset += length;
+ } else {
+ m_tokens.append(token);
+ }
+ }
+ ASSERT(currentOffset == m_backingString.getCharacters<CharacterType>() + m_backingString.length());
+}
+
+void CSSVariableData::consumeAndUpdateTokens(const CSSParserTokenRange& range)
+{
+ StringBuilder stringBuilder;
+ CSSParserTokenRange localRange = range;
+
+ while (!localRange.atEnd()) {
+ CSSParserToken token = localRange.consume();
+ if (token.hasStringBacking()) {
+ CSSParserString value = token.value();
+ if (value.is8Bit())
+ stringBuilder.append(value.characters8(), value.length());
+ else
+ stringBuilder.append(value.characters16(), value.length());
+ }
+ }
+ m_backingString = stringBuilder.toString();
+ if (m_backingString.is8Bit())
+ updateTokens<LChar>(range);
+ else
+ updateTokens<UChar>(range);
+}
+
+CSSVariableData::CSSVariableData(const CSSParserTokenRange& range, bool needsVariableResolution)
+ : m_needsVariableResolution(needsVariableResolution)
+{
+ ASSERT(!range.atEnd());
+ consumeAndUpdateTokens(range);
+}
+
+} // namespace blink
diff --git a/third_party/WebKit/Source/core/css/CSSVariableData.h b/third_party/WebKit/Source/core/css/CSSVariableData.h
new file mode 100644
index 0000000..9b35033
--- /dev/null
+++ b/third_party/WebKit/Source/core/css/CSSVariableData.h
@@ -0,0 +1,58 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef CSSVariableData_h
+#define CSSVariableData_h
+
+#include "core/css/parser/CSSParserToken.h"
+#include "core/css/parser/CSSParserTokenRange.h"
+#include "wtf/RefCounted.h"
+#include "wtf/text/WTFString.h"
+
+namespace blink {
+
+class CSSParserTokenRange;
+
+class CSSVariableData : public RefCounted<CSSVariableData> {
+ WTF_MAKE_NONCOPYABLE(CSSVariableData);
+ USING_FAST_MALLOC(CSSVariableData);
+public:
+ static PassRefPtr<CSSVariableData> create(const CSSParserTokenRange& range, bool needsVariableResolution = true)
+ {
+ return adoptRef(new CSSVariableData(range, needsVariableResolution));
+ }
+
+ static PassRefPtr<CSSVariableData> createResolved(const Vector<CSSParserToken>& resolvedTokens)
+ {
+ return adoptRef(new CSSVariableData(resolvedTokens));
+ }
+
+ CSSParserTokenRange tokenRange() { return m_tokens; }
+
+ const Vector<CSSParserToken>& tokens() { return m_tokens; }
+
+ bool needsVariableResolution() const { return m_needsVariableResolution; }
+private:
+ CSSVariableData(const CSSParserTokenRange&, bool needsVariableResolution);
+
+ // We can safely copy the tokens (which have raw pointers to substrings) because
+ // StylePropertySets contain references to CSSCustomPropertyDeclarations, which
+ // point to the unresolved CSSVariableData values that own the backing strings
+ // this will potentially reference.
+ CSSVariableData(const Vector<CSSParserToken>& resolvedTokens)
+ : m_tokens(resolvedTokens)
+ , m_needsVariableResolution(false)
+ { }
+
+ void consumeAndUpdateTokens(const CSSParserTokenRange&);
+ template<typename CharacterType> void updateTokens(const CSSParserTokenRange&);
+
+ String m_backingString;
+ Vector<CSSParserToken> m_tokens;
+ const bool m_needsVariableResolution;
+};
+
+} // namespace blink
+
+#endif // CSSVariableData_h
diff --git a/third_party/WebKit/Source/core/css/CSSVariableReferenceValue.cpp b/third_party/WebKit/Source/core/css/CSSVariableReferenceValue.cpp
new file mode 100644
index 0000000..c231b8a
--- /dev/null
+++ b/third_party/WebKit/Source/core/css/CSSVariableReferenceValue.cpp
@@ -0,0 +1,22 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "config.h"
+#include "core/css/CSSVariableReferenceValue.h"
+
+namespace blink {
+
+DEFINE_TRACE_AFTER_DISPATCH(CSSVariableReferenceValue)
+{
+ visitor->trace(m_data);
+ CSSValue::traceAfterDispatch(visitor);
+}
+
+String CSSVariableReferenceValue::customCSSText() const
+{
+ // We may want to consider caching this value.
+ return m_data->tokenRange().serialize();
+}
+
+} // namespace blink
diff --git a/third_party/WebKit/Source/core/css/CSSVariableReferenceValue.h b/third_party/WebKit/Source/core/css/CSSVariableReferenceValue.h
new file mode 100644
index 0000000..187c8fb
--- /dev/null
+++ b/third_party/WebKit/Source/core/css/CSSVariableReferenceValue.h
@@ -0,0 +1,44 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef CSSVariableReferenceValue_h
+#define CSSVariableReferenceValue_h
+
+#include "core/css/CSSValue.h"
+#include "core/css/CSSVariableData.h"
+#include "wtf/RefPtr.h"
+
+namespace blink {
+
+class CSSVariableReferenceValue : public CSSValue {
+public:
+ static PassRefPtrWillBeRawPtr<CSSVariableReferenceValue> create(PassRefPtr<CSSVariableData> data)
+ {
+ return adoptRefWillBeNoop(new CSSVariableReferenceValue(data));
+ }
+
+ CSSVariableData* variableDataValue() const
+ {
+ return m_data.get();
+ }
+
+ bool equals(const CSSVariableReferenceValue& other) const { return m_data == other.m_data; }
+ String customCSSText() const;
+
+ DECLARE_TRACE_AFTER_DISPATCH();
+private:
+ CSSVariableReferenceValue(PassRefPtr<CSSVariableData> data)
+ : CSSValue(VariableReferenceClass)
+ , m_data(data)
+ {
+ }
+
+ RefPtr<CSSVariableData> m_data;
+};
+
+DEFINE_CSS_VALUE_TYPE_CASTS(CSSVariableReferenceValue, isVariableReferenceValue());
+
+} // namespace blink
+
+#endif // CSSVariableReferenceValue_h
diff --git a/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp b/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
index af0cb90..93ce3b2 100644
--- a/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
+++ b/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
@@ -2683,6 +2683,10 @@
list->append(cssValuePool().createValue(style.scale()->z(), CSSPrimitiveValue::UnitType::Number));
return list.release();
}
+ case CSSPropertyVariable:
+ // TODO(leviw): We should have a way to retrive variables here.
+ ASSERT_NOT_REACHED();
+ return nullptr;
case CSSPropertyAll:
return nullptr;
default:
diff --git a/third_party/WebKit/Source/core/css/parser/CSSParserImpl.cpp b/third_party/WebKit/Source/core/css/parser/CSSParserImpl.cpp
index a9c2c3fd..47752a0 100644
--- a/third_party/WebKit/Source/core/css/parser/CSSParserImpl.cpp
+++ b/third_party/WebKit/Source/core/css/parser/CSSParserImpl.cpp
@@ -5,6 +5,7 @@
#include "config.h"
#include "core/css/parser/CSSParserImpl.h"
+#include "core/css/CSSCustomPropertyDeclaration.h"
#include "core/css/CSSKeyframesRule.h"
#include "core/css/CSSStyleSheet.h"
#include "core/css/StylePropertySet.h"
@@ -20,6 +21,7 @@
#include "core/css/parser/CSSSelectorParser.h"
#include "core/css/parser/CSSSupportsParser.h"
#include "core/css/parser/CSSTokenizer.h"
+#include "core/css/parser/CSSVariableParser.h"
#include "core/css/parser/MediaQueryParser.h"
#include "core/dom/Document.h"
#include "core/dom/Element.h"
@@ -56,10 +58,13 @@
const CSSProperty& property = input[i];
if (property.isImportant() != important)
continue;
- const unsigned propertyIDIndex = property.id() - firstCSSProperty;
- if (seenProperties.get(propertyIDIndex))
- continue;
- seenProperties.set(propertyIDIndex);
+ const unsigned propertyIDIndex = property.id();
+ // All custom properties use the same CSSPropertyID so we can't remove repeated definitions
+ if (property.id() != CSSPropertyVariable) {
+ if (seenProperties.get(propertyIDIndex))
+ continue;
+ seenProperties.set(propertyIDIndex);
+ }
output[--unusedEntries] = property;
}
}
@@ -672,7 +677,8 @@
CSSParserTokenRange rangeCopy = range; // For inspector callbacks
ASSERT(range.peek().type() == IdentToken);
- CSSPropertyID unresolvedProperty = range.consumeIncludingWhitespace().parseAsUnresolvedCSSPropertyID();
+ const CSSParserToken& token = range.consumeIncludingWhitespace();
+ CSSPropertyID unresolvedProperty = token.parseAsUnresolvedCSSPropertyID();
if (range.consume().type() != ColonToken)
return; // Parse error
@@ -690,6 +696,11 @@
declarationValueEnd = last;
}
}
+ if (RuntimeEnabledFeatures::cssVariablesEnabled() && unresolvedProperty == CSSPropertyInvalid && CSSVariableParser::isValidVariableName(token)) {
+ AtomicString variableName = token.value();
+ consumeVariableDeclarationValue(range.makeSubRange(&range.peek(), declarationValueEnd), variableName, important);
+ return;
+ }
if (important && (ruleType == StyleRule::FontFace || ruleType == StyleRule::Keyframes))
return;
@@ -710,6 +721,12 @@
consumeDeclarationValue(range.makeSubRange(&range.peek(), declarationValueEnd), unresolvedProperty, important, ruleType);
}
+void CSSParserImpl::consumeVariableDeclarationValue(CSSParserTokenRange range, const AtomicString& variableName, bool important)
+{
+ if (RefPtrWillBeRawPtr<CSSCustomPropertyDeclaration> value = CSSVariableParser::parseDeclarationValue(variableName, range))
+ m_parsedProperties.append(CSSProperty(CSSPropertyVariable, value.release(), important));
+}
+
void CSSParserImpl::consumeDeclarationValue(CSSParserTokenRange range, CSSPropertyID unresolvedProperty, bool important, StyleRule::Type ruleType)
{
CSSPropertyParser::parseValue(unresolvedProperty, important, range, m_context, m_parsedProperties, ruleType);
diff --git a/third_party/WebKit/Source/core/css/parser/CSSParserImpl.h b/third_party/WebKit/Source/core/css/parser/CSSParserImpl.h
index 6bab11e..a06caeeb 100644
--- a/third_party/WebKit/Source/core/css/parser/CSSParserImpl.h
+++ b/third_party/WebKit/Source/core/css/parser/CSSParserImpl.h
@@ -98,6 +98,7 @@
void consumeDeclarationList(CSSParserTokenRange, StyleRule::Type);
void consumeDeclaration(CSSParserTokenRange, StyleRule::Type);
void consumeDeclarationValue(CSSParserTokenRange, CSSPropertyID, bool important, StyleRule::Type);
+ void consumeVariableDeclarationValue(CSSParserTokenRange, const AtomicString& variableName, bool important);
static PassOwnPtr<Vector<double>> consumeKeyframeKeyList(CSSParserTokenRange);
diff --git a/third_party/WebKit/Source/core/css/parser/CSSParserToken.cpp b/third_party/WebKit/Source/core/css/parser/CSSParserToken.cpp
index e383267..b131a94 100644
--- a/third_party/WebKit/Source/core/css/parser/CSSParserToken.cpp
+++ b/third_party/WebKit/Source/core/css/parser/CSSParserToken.cpp
@@ -129,6 +129,25 @@
return static_cast<CSSValueID>(m_id);
}
+bool CSSParserToken::hasStringBacking() const
+{
+ CSSParserTokenType tokenType = type();
+ return tokenType == IdentToken
+ || tokenType == FunctionToken
+ || tokenType == AtKeywordToken
+ || tokenType == HashToken
+ || tokenType == UrlToken
+ || tokenType == DimensionToken
+ || tokenType == StringToken;
+}
+
+CSSParserToken CSSParserToken::copyWithUpdatedString(const CSSParserString& parserString) const
+{
+ CSSParserToken copy(*this);
+ copy.initValueFromCSSParserString(parserString);
+ return copy;
+}
+
void CSSParserToken::serialize(StringBuilder& builder) const
{
// This is currently only used for @supports CSSOM. To keep our implementation
diff --git a/third_party/WebKit/Source/core/css/parser/CSSParserToken.h b/third_party/WebKit/Source/core/css/parser/CSSParserToken.h
index 0d7756c..e4a12c3f 100644
--- a/third_party/WebKit/Source/core/css/parser/CSSParserToken.h
+++ b/third_party/WebKit/Source/core/css/parser/CSSParserToken.h
@@ -109,10 +109,14 @@
CSSValueID id() const;
CSSValueID functionId() const;
+ bool hasStringBacking() const;
+
CSSPropertyID parseAsUnresolvedCSSPropertyID() const;
void serialize(StringBuilder&) const;
+ CSSParserToken copyWithUpdatedString(const CSSParserString&) const;
+
private:
void initValueFromCSSParserString(const CSSParserString& value)
{
diff --git a/third_party/WebKit/Source/core/css/parser/CSSParserTokenRange.h b/third_party/WebKit/Source/core/css/parser/CSSParserTokenRange.h
index c8cf20b..c4f875d8 100644
--- a/third_party/WebKit/Source/core/css/parser/CSSParserTokenRange.h
+++ b/third_party/WebKit/Source/core/css/parser/CSSParserTokenRange.h
@@ -66,7 +66,6 @@
String serialize() const;
- // This is only for the inspector integration
const CSSParserToken* begin() const { return m_first; }
static void initStaticEOFToken();
diff --git a/third_party/WebKit/Source/core/css/parser/CSSParserValues.cpp b/third_party/WebKit/Source/core/css/parser/CSSParserValues.cpp
index 160a254..8d14dc0 100644
--- a/third_party/WebKit/Source/core/css/parser/CSSParserValues.cpp
+++ b/third_party/WebKit/Source/core/css/parser/CSSParserValues.cpp
@@ -22,9 +22,11 @@
#include "core/css/parser/CSSParserValues.h"
#include "core/css/CSSFunctionValue.h"
+#include "core/css/CSSVariableData.h"
#include "core/css/parser/CSSParserToken.h"
#include "core/css/parser/CSSParserTokenRange.h"
#include "core/css/parser/CSSPropertyParser.h"
+#include "core/css/parser/CSSVariableParser.h"
#include "core/html/parser/HTMLParserIdioms.h"
namespace blink {
@@ -34,6 +36,8 @@
CSSParserValueList::CSSParserValueList(CSSParserTokenRange range)
: m_current(0)
{
+ CSSParserTokenRange originalRangeForVariables = range;
+
Vector<CSSParserValueList*> stack;
Vector<int> bracketCounts;
stack.append(this);
@@ -51,7 +55,7 @@
range.consume();
const CSSParserToken& next = range.consumeIncludingWhitespace();
if (next.type() == BadStringToken || range.consume().type() != RightParenthesisToken) {
- destroyAndClear();
+ checkForVariableReferencesOrDestroyAndClear(originalRangeForVariables);
return;
}
ASSERT(next.type() == StringToken);
@@ -60,6 +64,9 @@
value.m_unit = CSSParserValue::URI;
value.string = next.value();
break;
+ } else if (token.valueEqualsIgnoringCase("var")) {
+ checkForVariableReferencesOrDestroyAndClear(originalRangeForVariables);
+ return;
}
value.id = CSSValueInvalid;
@@ -98,7 +105,7 @@
stack.removeLast();
bracketCounts.removeLast();
if (bracketCounts.isEmpty()) {
- destroyAndClear();
+ checkForVariableReferencesOrDestroyAndClear(originalRangeForVariables);
return;
}
continue;
@@ -202,10 +209,12 @@
case SuffixMatchToken:
case SubstringMatchToken:
case ColumnToken:
- case BadStringToken:
- case BadUrlToken:
case ColonToken:
case SemicolonToken:
+ checkForVariableReferencesOrDestroyAndClear(originalRangeForVariables);
+ return;
+ case BadStringToken:
+ case BadUrlToken:
destroyAndClear();
return;
}
@@ -235,9 +244,30 @@
else if (values[i].m_unit == CSSParserValue::ValueList
|| values[i].m_unit == CSSParserValue::DimensionList)
delete values[i].valueList;
+ else if (values[i].id == CSSValueInternalVariableValue)
+ values[i].variableData->deref();
}
}
+void CSSParserValueList::checkForVariableReferencesOrDestroyAndClear(const CSSParserTokenRange& originalRange)
+{
+ // We have to clear any state that may have been previously loaded
+ destroyAndClear();
+ if (RuntimeEnabledFeatures::cssVariablesEnabled() && CSSVariableParser::containsValidVariableReferences(originalRange))
+ consumeVariableValue(originalRange);
+}
+
+void CSSParserValueList::consumeVariableValue(const CSSParserTokenRange& originalRange)
+{
+ ASSERT(m_values.isEmpty());
+ CSSParserValue variableValue;
+ variableValue.id = CSSValueInternalVariableValue;
+ variableValue.isInt = false;
+ variableValue.variableData = CSSVariableData::create(originalRange).leakRef();
+ addValue(variableValue);
+}
+
+
void CSSParserValueList::destroyAndClear()
{
destroy(m_values);
diff --git a/third_party/WebKit/Source/core/css/parser/CSSParserValues.h b/third_party/WebKit/Source/core/css/parser/CSSParserValues.h
index 2b95061..2835a0ca 100644
--- a/third_party/WebKit/Source/core/css/parser/CSSParserValues.h
+++ b/third_party/WebKit/Source/core/css/parser/CSSParserValues.h
@@ -35,6 +35,7 @@
struct CSSParserFunction;
struct CSSParserCalcFunction;
class CSSParserValueList;
+class CSSVariableData;
struct CSSParserValue {
DISALLOW_NEW_EXCEPT_PLACEMENT_NEW();
@@ -51,6 +52,7 @@
UChar32 start;
UChar32 end;
} m_unicodeRange;
+ CSSVariableData* variableData;
};
enum {
Operator = 0x100000,
@@ -111,6 +113,9 @@
void destroyAndClear();
private:
+ void checkForVariableReferencesOrDestroyAndClear(const CSSParserTokenRange& originalRange);
+ void consumeVariableValue(const CSSParserTokenRange&);
+
unsigned m_current;
Vector<CSSParserValue, 4> m_values;
};
diff --git a/third_party/WebKit/Source/core/css/parser/CSSVariableParser.cpp b/third_party/WebKit/Source/core/css/parser/CSSVariableParser.cpp
new file mode 100644
index 0000000..94463b1
--- /dev/null
+++ b/third_party/WebKit/Source/core/css/parser/CSSVariableParser.cpp
@@ -0,0 +1,123 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "config.h"
+#include "core/css/parser/CSSVariableParser.h"
+
+#include "core/css/CSSCustomPropertyDeclaration.h"
+#include "core/css/parser/CSSParserTokenRange.h"
+#include "core/css/parser/CSSParserValues.h"
+
+namespace blink {
+
+bool CSSVariableParser::isValidVariableName(const CSSParserToken& token)
+{
+ if (token.type() != IdentToken)
+ return false;
+
+ CSSParserString value = token.value();
+ return value.length() >= 2 && value[0] == '-' && value[1] == '-';
+}
+
+bool isValidVariableReference(CSSParserTokenRange);
+
+bool classifyBlock(CSSParserTokenRange range, bool& hasReferences, bool isTopLevelBlock = true)
+{
+ while (!range.atEnd()) {
+ if (range.peek().blockType() == CSSParserToken::BlockStart) {
+ const CSSParserToken& token = range.peek();
+ CSSParserTokenRange block = range.consumeBlock();
+ if (token.functionId() == CSSValueVar) {
+ if (!isValidVariableReference(block))
+ return false; // Bail if any references are invalid
+ hasReferences = true;
+ continue;
+ }
+ if (!classifyBlock(block, hasReferences, false))
+ return false;
+ continue;
+ }
+
+ ASSERT(range.peek().blockType() != CSSParserToken::BlockEnd);
+
+ const CSSParserToken& token = range.consume();
+ switch (token.type()) {
+ case DelimiterToken: {
+ if (token.delimiter() == '!' && isTopLevelBlock)
+ return false;
+ break;
+ }
+ case RightParenthesisToken:
+ case RightBraceToken:
+ case RightBracketToken:
+ case BadStringToken:
+ case BadUrlToken:
+ return false;
+ case SemicolonToken:
+ if (isTopLevelBlock)
+ return false;
+ break;
+ default:
+ break;
+ }
+ }
+ return true;
+}
+
+bool isValidVariableReference(CSSParserTokenRange range)
+{
+ range.consumeWhitespace();
+ if (!CSSVariableParser::isValidVariableName(range.consumeIncludingWhitespace()))
+ return false;
+ if (range.atEnd())
+ return true;
+
+ if (range.consume().type() != CommaToken)
+ return false;
+ if (range.atEnd())
+ return false;
+
+ bool hasReferences = false;
+ return classifyBlock(range, hasReferences);
+}
+
+static CSSValueID classifyVariableRange(CSSParserTokenRange range, bool& hasReferences)
+{
+ hasReferences = false;
+
+ range.consumeWhitespace();
+ if (range.peek().type() == IdentToken) {
+ CSSValueID id = range.consumeIncludingWhitespace().id();
+ if (range.atEnd() && (id == CSSValueInherit || id == CSSValueInitial || id == CSSValueUnset))
+ return id;
+ }
+
+ if (classifyBlock(range, hasReferences))
+ return CSSValueInternalVariableValue;
+ return CSSValueInvalid;
+}
+
+bool CSSVariableParser::containsValidVariableReferences(CSSParserTokenRange range)
+{
+ bool hasReferences;
+ CSSValueID type = classifyVariableRange(range, hasReferences);
+ return type == CSSValueInternalVariableValue && hasReferences;
+}
+
+PassRefPtrWillBeRawPtr<CSSCustomPropertyDeclaration> CSSVariableParser::parseDeclarationValue(const AtomicString& variableName, CSSParserTokenRange range)
+{
+ if (range.atEnd())
+ return nullptr;
+
+ bool hasReferences;
+ CSSValueID type = classifyVariableRange(range, hasReferences);
+
+ if (type == CSSValueInvalid)
+ return nullptr;
+ if (type == CSSValueInternalVariableValue)
+ return CSSCustomPropertyDeclaration::create(variableName, CSSVariableData::create(range, hasReferences));
+ return CSSCustomPropertyDeclaration::create(variableName, type);
+}
+
+} // namespace blink
diff --git a/third_party/WebKit/Source/core/css/parser/CSSVariableParser.h b/third_party/WebKit/Source/core/css/parser/CSSVariableParser.h
new file mode 100644
index 0000000..7af43e1
--- /dev/null
+++ b/third_party/WebKit/Source/core/css/parser/CSSVariableParser.h
@@ -0,0 +1,28 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef CSSVariableParser_h
+#define CSSVariableParser_h
+
+#include "core/css/parser/CSSParserTokenRange.h"
+#include "platform/heap/Handle.h"
+#include "wtf/RefPtr.h"
+#include "wtf/text/AtomicString.h"
+
+namespace blink {
+
+class CSSCustomPropertyDeclaration;
+
+class CSSVariableParser {
+public:
+ static bool containsValidVariableReferences(CSSParserTokenRange);
+
+ static PassRefPtrWillBeRawPtr<CSSCustomPropertyDeclaration> parseDeclarationValue(const AtomicString&, CSSParserTokenRange);
+
+ static bool isValidVariableName(const CSSParserToken&);
+};
+
+} // namespace blink
+
+#endif // CSSVariableParser_h
diff --git a/third_party/WebKit/Source/core/css/parser/LegacyCSSPropertyParser.cpp b/third_party/WebKit/Source/core/css/parser/LegacyCSSPropertyParser.cpp
index 5e0c902d..e9c3543 100644
--- a/third_party/WebKit/Source/core/css/parser/LegacyCSSPropertyParser.cpp
+++ b/third_party/WebKit/Source/core/css/parser/LegacyCSSPropertyParser.cpp
@@ -51,6 +51,7 @@
#include "core/css/CSSURIValue.h"
#include "core/css/CSSValuePair.h"
#include "core/css/CSSValuePool.h"
+#include "core/css/CSSVariableReferenceValue.h"
#include "core/css/HashTools.h"
#include "core/css/parser/CSSParserFastPaths.h"
#include "core/css/parser/CSSParserValues.h"
@@ -371,6 +372,13 @@
return true;
}
+ if (RuntimeEnabledFeatures::cssVariablesEnabled() && value->id == CSSValueInternalVariableValue) {
+ // We don't expand the shorthand here because crazypants.
+ m_parsedProperties.append(CSSProperty(propId, CSSVariableReferenceValue::create(value->variableData), important, false, 0, m_implicitShorthand));
+ m_valueList->next();
+ return true;
+ }
+
if (CSSParserFastPaths::isKeywordPropertyID(propId)) {
if (!CSSParserFastPaths::isValidKeywordPropertyAndValue(propId, id))
return false;
diff --git a/third_party/WebKit/Source/core/css/resolver/CSSPropertyPriority.h b/third_party/WebKit/Source/core/css/resolver/CSSPropertyPriority.h
index 58a6fbb7..1b2ec8e 100644
--- a/third_party/WebKit/Source/core/css/resolver/CSSPropertyPriority.h
+++ b/third_party/WebKit/Source/core/css/resolver/CSSPropertyPriority.h
@@ -15,6 +15,7 @@
// decides the pixel value of low priority properties with 'em' units.
enum CSSPropertyPriority {
+ ResolveVariables,
HighPropertyPriority,
LowPropertyPriority
};
@@ -32,6 +33,19 @@
};
template<>
+inline CSSPropertyID CSSPropertyPriorityData<ResolveVariables>::first()
+{
+ static_assert(CSSPropertyVariable == firstCSSProperty - 1, "CSSPropertyVariable should be directly before the first CSS property.");
+ return CSSPropertyVariable;
+}
+
+template<>
+inline CSSPropertyID CSSPropertyPriorityData<ResolveVariables>::last()
+{
+ return CSSPropertyVariable;
+}
+
+template<>
inline CSSPropertyID CSSPropertyPriorityData<HighPropertyPriority>::first()
{
static_assert(CSSPropertyColor == firstCSSProperty, "CSSPropertyColor should be the first high priority property");
diff --git a/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp b/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp
new file mode 100644
index 0000000..2a63bf0e
--- /dev/null
+++ b/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp
@@ -0,0 +1,179 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "config.h"
+#include "core/css/resolver/CSSVariableResolver.h"
+
+#include "core/CSSPropertyNames.h"
+#include "core/CSSValueKeywords.h"
+#include "core/StyleBuilderFunctions.h"
+#include "core/css/CSSVariableData.h"
+#include "core/css/CSSVariableReferenceValue.h"
+#include "core/css/parser/CSSParserToken.h"
+#include "core/css/parser/CSSParserTokenRange.h"
+#include "core/css/parser/CSSParserValues.h"
+#include "core/css/parser/CSSPropertyParser.h"
+#include "core/css/resolver/StyleBuilder.h"
+#include "core/css/resolver/StyleResolverState.h"
+#include "core/style/StyleVariableData.h"
+#include "wtf/Vector.h"
+
+namespace blink {
+
+// TODO(leviw): This should take a CSSParserTokenRange
+static void findEndIndexOfVariableReference(const Vector<CSSParserToken>& resolvedTokens, unsigned startIndex, unsigned& endIndex, unsigned& commaIndex, bool& hasClosingBracket)
+{
+ endIndex = 0;
+ commaIndex = 0;
+ unsigned bracketCount = 1;
+ for (unsigned i = startIndex; i < resolvedTokens.size(); ++i) {
+ CSSParserTokenType type = resolvedTokens[i].type();
+
+ if (type == CommaToken && !commaIndex) {
+ commaIndex = i;
+ } else if (type == LeftParenthesisToken || type == FunctionToken) {
+ bracketCount++;
+ } else if (type == RightParenthesisToken) {
+ if (bracketCount == 1) {
+ hasClosingBracket = true;
+ endIndex = i;
+ return;
+ }
+ bracketCount--;
+ }
+ }
+ hasClosingBracket = false;
+ endIndex = resolvedTokens.size() - 1;
+}
+
+unsigned CSSVariableResolver::resolveVariableTokensRecursive(Vector<CSSParserToken>& resolvedTokens, unsigned startIndex)
+{
+ unsigned variableLocation = startIndex;
+ while (resolvedTokens[variableLocation].type() != IdentToken)
+ variableLocation++;
+
+ unsigned commaIndex;
+ unsigned endIndex;
+ bool hasClosingBracket;
+ // Find default value and match braces
+ findEndIndexOfVariableReference(resolvedTokens, variableLocation + 1, endIndex, commaIndex, hasClosingBracket);
+
+ unsigned length = endIndex - startIndex + 1;
+ unsigned varFunctionPosition = startIndex;
+
+ AtomicString variableName = resolvedTokens[variableLocation].value();
+
+ if (m_variablesSeen.contains(variableName)) {
+ m_cycleDetected = true;
+ resolvedTokens.clear();
+ return 0;
+ }
+
+ CSSVariableData* variableData = m_styleVariableData ? m_styleVariableData->getVariable(variableName) : nullptr;
+ if (variableData) {
+ Vector<CSSParserToken> tokens(variableData->tokens());
+ if (variableData->needsVariableResolution()) {
+ m_variablesSeen.add(variableName);
+ resolveVariableReferencesFromTokens(tokens);
+ m_variablesSeen.remove(variableName);
+
+ // The old variable data holds onto the backing string the new resolved CSSVariableData
+ // relies on. Ensure it will live beyond us overwriting the RefPtr in StyleVariableData.
+ ASSERT(variableData->refCount() > 1);
+
+ m_styleVariableData->setVariable(variableName, CSSVariableData::createResolved(tokens));
+ }
+ if (tokens.size()) {
+ resolvedTokens.remove(startIndex, length);
+ resolvedTokens.insert(startIndex, tokens);
+ return tokens.size();
+ }
+ }
+
+ // Fallback on default value if present
+ if (!commaIndex || m_cycleDetected) {
+ resolvedTokens.clear();
+ return 0;
+ }
+
+ // Move the tokens to the beginning of the variable reference
+ unsigned defaultValueStart = commaIndex + 1;
+ unsigned defaultValueLength = endIndex - commaIndex - (hasClosingBracket ? 1 : 0);
+ for (unsigned i = 0; i < defaultValueLength; ++i)
+ resolvedTokens[varFunctionPosition + i] = resolvedTokens[defaultValueStart + i];
+ resolvedTokens.remove(varFunctionPosition + defaultValueLength, length - defaultValueLength);
+
+ resolveVariableReferencesFromTokens(resolvedTokens);
+
+ return resolvedTokens.size();
+}
+
+void CSSVariableResolver::resolveVariableReferencesFromTokens(Vector<CSSParserToken>& tokens)
+{
+ for (unsigned i = 0; i < tokens.size(); ++i) {
+ if (tokens[i].functionId() == CSSValueVar) {
+ unsigned validTokens = resolveVariableTokensRecursive(tokens, i);
+ if (validTokens < 1 || m_cycleDetected) {
+ tokens.clear();
+ break;
+ }
+ i += validTokens - 1;
+ }
+ }
+}
+
+void CSSVariableResolver::resolveAndApplyVariableReferences(StyleResolverState& state, CSSPropertyID id, const CSSVariableReferenceValue& value)
+{
+ // TODO(leviw): This should be a stack
+ Vector<CSSParserToken> tokens = value.variableDataValue()->tokens();
+
+ CSSVariableResolver resolver(state.style()->variables());
+
+ resolver.resolveVariableReferencesFromTokens(tokens);
+
+ if (!tokens.size())
+ return;
+
+ CSSParserContext context(HTMLStandardMode, 0);
+
+ WillBeHeapVector<CSSProperty, 256> parsedProperties;
+
+ CSSPropertyParser::parseValue(id, false, CSSParserTokenRange(tokens), context, parsedProperties, StyleRule::Type::Style);
+
+ unsigned parsedPropertiesCount = parsedProperties.size();
+ for (unsigned i = 0; i < parsedPropertiesCount; ++i)
+ StyleBuilder::applyProperty(parsedProperties[i].id(), state, parsedProperties[i].value());
+}
+
+void CSSVariableResolver::resolveVariableDefinitions(StyleVariableData* variables)
+{
+ if (!variables)
+ return;
+
+ for (auto& variable : variables->m_data) {
+ if (!variable.value->needsVariableResolution())
+ continue;
+ Vector<CSSParserToken> resolvedTokens(variable.value->tokens());
+
+ CSSVariableResolver resolver(variables, variable.key);
+ resolver.resolveVariableReferencesFromTokens(resolvedTokens);
+
+ variable.value = CSSVariableData::createResolved(resolvedTokens);
+ }
+}
+
+CSSVariableResolver::CSSVariableResolver(StyleVariableData* styleVariableData)
+ : m_styleVariableData(styleVariableData)
+ , m_cycleDetected(false)
+{
+}
+
+CSSVariableResolver::CSSVariableResolver(StyleVariableData* styleVariableData, AtomicString& variable)
+ : m_styleVariableData(styleVariableData)
+ , m_cycleDetected(false)
+{
+ m_variablesSeen.add(variable);
+}
+
+} // namespace blink
diff --git a/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.h b/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.h
new file mode 100644
index 0000000..fb832cce
--- /dev/null
+++ b/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.h
@@ -0,0 +1,39 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef CSSVariableResolver_h
+#define CSSVariableResolver_h
+
+#include "core/CSSPropertyNames.h"
+#include "core/css/parser/CSSParserToken.h"
+#include "wtf/HashSet.h"
+#include "wtf/text/AtomicString.h"
+#include "wtf/text/AtomicStringHash.h"
+
+namespace blink {
+
+class CSSVariableReferenceValue;
+class StyleResolverState;
+class StyleVariableData;
+
+class CSSVariableResolver {
+public:
+ static void resolveVariableDefinitions(StyleVariableData*);
+ static void resolveAndApplyVariableReferences(StyleResolverState&, CSSPropertyID, const CSSVariableReferenceValue&);
+
+private:
+ CSSVariableResolver(StyleVariableData*);
+ CSSVariableResolver(StyleVariableData*, AtomicString& variable);
+
+ unsigned resolveVariableTokensRecursive(Vector<CSSParserToken>&, unsigned startOffset);
+ void resolveVariableReferencesFromTokens(Vector<CSSParserToken>& tokens);
+
+ StyleVariableData* m_styleVariableData;
+ HashSet<AtomicString> m_variablesSeen;
+ bool m_cycleDetected;
+};
+
+} // namespace blink
+
+#endif // CSSVariableResolver
diff --git a/third_party/WebKit/Source/core/css/resolver/StyleBuilderCustom.cpp b/third_party/WebKit/Source/core/css/resolver/StyleBuilderCustom.cpp
index 5943b343d..e9e56d3 100644
--- a/third_party/WebKit/Source/core/css/resolver/StyleBuilderCustom.cpp
+++ b/third_party/WebKit/Source/core/css/resolver/StyleBuilderCustom.cpp
@@ -46,6 +46,7 @@
#include "core/css/CSSBasicShapeValues.h"
#include "core/css/CSSCounterValue.h"
#include "core/css/CSSCursorImageValue.h"
+#include "core/css/CSSCustomPropertyDeclaration.h"
#include "core/css/CSSFunctionValue.h"
#include "core/css/CSSGradientValue.h"
#include "core/css/CSSGridTemplateAreasValue.h"
@@ -56,8 +57,10 @@
#include "core/css/CSSPropertyMetadata.h"
#include "core/css/CSSURIValue.h"
#include "core/css/CSSValuePair.h"
+#include "core/css/CSSVariableReferenceValue.h"
#include "core/css/StylePropertySet.h"
#include "core/css/StyleRule.h"
+#include "core/css/resolver/CSSVariableResolver.h"
#include "core/css/resolver/ElementStyleResources.h"
#include "core/css/resolver/FilterOperationResolver.h"
#include "core/css/resolver/FontBuilder.h"
@@ -108,6 +111,11 @@
void StyleBuilder::applyProperty(CSSPropertyID id, StyleResolverState& state, CSSValue* value)
{
+ if (RuntimeEnabledFeatures::cssVariablesEnabled() && id != CSSPropertyVariable && value->isVariableReferenceValue()) {
+ CSSVariableResolver::resolveAndApplyVariableReferences(state, id, *toCSSVariableReferenceValue(value));
+ return;
+ }
+
ASSERT_WITH_MESSAGE(!isShorthandProperty(id), "Shorthand property id = %d wasn't expanded at parsing time", id);
bool isInherit = state.parentNode() && value->isInheritedValue();
@@ -813,6 +821,34 @@
state.setTextOrientation(toCSSPrimitiveValue(value)->convertTo<TextOrientation>());
}
+void StyleBuilderFunctions::applyValueCSSPropertyVariable(StyleResolverState& state, CSSValue* value)
+{
+ CSSCustomPropertyDeclaration* declaration = toCSSCustomPropertyDeclaration(value);
+ switch (declaration->id()) {
+ case CSSValueInitial:
+ state.style()->removeVariable(declaration->name());
+ break;
+
+ case CSSValueUnset:
+ case CSSValueInherit: {
+ state.style()->removeVariable(declaration->name());
+ StyleVariableData* parentVariables = state.parentStyle()->variables();
+ if (!parentVariables)
+ return;
+ CSSVariableData* value = parentVariables->getVariable(declaration->name());
+ if (!value)
+ return;
+ state.style()->setVariable(declaration->name(), value);
+ break;
+ }
+ case CSSValueInternalVariableValue:
+ state.style()->setVariable(declaration->name(), declaration->value());
+ break;
+ default:
+ ASSERT_NOT_REACHED();
+ }
+}
+
void StyleBuilderFunctions::applyInheritCSSPropertyBaselineShift(StyleResolverState& state)
{
const SVGComputedStyle& parentSvgStyle = state.parentStyle()->svgStyle();
diff --git a/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp b/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
index 8af35a7a..71de34d 100644
--- a/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
+++ b/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
@@ -61,6 +61,7 @@
#include "core/css/StyleRuleImport.h"
#include "core/css/StyleSheetContents.h"
#include "core/css/resolver/AnimatedStyleBuilder.h"
+#include "core/css/resolver/CSSVariableResolver.h"
#include "core/css/resolver/MatchResult.h"
#include "core/css/resolver/MediaQueryResult.h"
#include "core/css/resolver/ScopedStyleResolver.h"
@@ -1230,6 +1231,11 @@
template <CSSPropertyPriority priority>
void StyleResolver::applyAllProperty(StyleResolverState& state, CSSValue* allValue, bool inheritedOnly, PropertyWhitelistType propertyWhitelistType)
{
+ // The 'all' property doesn't apply to variables:
+ // https://drafts.csswg.org/css-variables/#defining-variables
+ if (priority == ResolveVariables)
+ return;
+
unsigned startCSSProperty = CSSPropertyPriorityData<priority>::first();
unsigned endCSSProperty = CSSPropertyPriorityData<priority>::last();
@@ -1369,6 +1375,14 @@
applyInheritedOnly = true;
}
+ // TODO(leviw): We need the proper bit for tracking whether we need to do this work.
+ if (RuntimeEnabledFeatures::cssVariablesEnabled()) {
+ applyMatchedProperties<ResolveVariables>(state, matchResult.authorRules(), false, applyInheritedOnly);
+ applyMatchedProperties<ResolveVariables>(state, matchResult.authorRules(), true, applyInheritedOnly);
+ // TODO(leviw): stop recalculating every time
+ CSSVariableResolver::resolveVariableDefinitions(state.style()->variables());
+ }
+
// Now we have all of the matched rules in the appropriate order. Walk the rules and apply
// high-priority properties first, i.e., those properties that other properties depend on.
// The order is (1) high-priority not important, (2) high-priority important, (3) normal not important
diff --git a/third_party/WebKit/Source/core/frame/UseCounter.cpp b/third_party/WebKit/Source/core/frame/UseCounter.cpp
index b03710a..829856f 100644
--- a/third_party/WebKit/Source/core/frame/UseCounter.cpp
+++ b/third_party/WebKit/Source/core/frame/UseCounter.cpp
@@ -547,6 +547,7 @@
case CSSPropertyGridRowGap: return 512;
case CSSPropertyGridGap: return 513;
case CSSPropertyFontFeatureSettings: return 514;
+ case CSSPropertyVariable: return 515;
// 1. Add new features above this line (don't change the assigned numbers of the existing
// items).
@@ -563,7 +564,7 @@
return 0;
}
-static int maximumCSSSampleId() { return 514; }
+static int maximumCSSSampleId() { return 515; }
void UseCounter::muteForInspector()
{
diff --git a/third_party/WebKit/Source/core/style/ComputedStyle.cpp b/third_party/WebKit/Source/core/style/ComputedStyle.cpp
index 222c332..2cfe368 100644
--- a/third_party/WebKit/Source/core/style/ComputedStyle.cpp
+++ b/third_party/WebKit/Source/core/style/ComputedStyle.cpp
@@ -1269,6 +1269,32 @@
return rareInheritedData->appliedTextDecorations->vector();
}
+StyleVariableData* ComputedStyle::variables() const
+{
+ ASSERT(RuntimeEnabledFeatures::cssVariablesEnabled());
+ return rareInheritedData->variables.get();
+}
+
+void ComputedStyle::setVariable(const AtomicString& name, PassRefPtr<CSSVariableData> value)
+{
+ RefPtr<StyleVariableData>& variables = rareInheritedData.access()->variables;
+ if (!variables)
+ variables = StyleVariableData::create();
+ else if (!variables->hasOneRef())
+ variables = variables->copy();
+ variables->setVariable(name, value);
+}
+
+void ComputedStyle::removeVariable(const AtomicString& name)
+{
+ RefPtr<StyleVariableData>& variables = rareInheritedData.access()->variables;
+ if (!variables)
+ return;
+ if (!variables->hasOneRef())
+ variables = variables->copy();
+ variables->removeVariable(name);
+}
+
float ComputedStyle::wordSpacing() const { return fontDescription().wordSpacing(); }
float ComputedStyle::letterSpacing() const { return fontDescription().letterSpacing(); }
diff --git a/third_party/WebKit/Source/core/style/ComputedStyle.h b/third_party/WebKit/Source/core/style/ComputedStyle.h
index c4f0ede..d8eff8e 100644
--- a/third_party/WebKit/Source/core/style/ComputedStyle.h
+++ b/third_party/WebKit/Source/core/style/ComputedStyle.h
@@ -593,6 +593,10 @@
TextDecorationStyle textDecorationStyle() const { return static_cast<TextDecorationStyle>(rareNonInheritedData->m_textDecorationStyle); }
float wordSpacing() const;
float letterSpacing() const;
+ StyleVariableData* variables() const;
+
+ void setVariable(const AtomicString&, PassRefPtr<CSSVariableData>);
+ void removeVariable(const AtomicString&);
float zoom() const { return visual->m_zoom; }
float effectiveZoom() const { return rareInheritedData->m_effectiveZoom; }
@@ -1742,6 +1746,7 @@
static TouchAction initialTouchAction() { return TouchActionAuto; }
static ShadowList* initialBoxShadow() { return 0; }
static ShadowList* initialTextShadow() { return 0; }
+ static StyleVariableData* initialVariables() { return nullptr; }
static ScrollBehavior initialScrollBehavior() { return ScrollBehaviorAuto; }
static ScrollSnapType initialScrollSnapType() { return ScrollSnapTypeNone; }
static ScrollSnapPoints initialScrollSnapPointsX() { return ScrollSnapPoints(); }
diff --git a/third_party/WebKit/Source/core/style/StyleRareInheritedData.cpp b/third_party/WebKit/Source/core/style/StyleRareInheritedData.cpp
index 612e93a..1c1622c 100644
--- a/third_party/WebKit/Source/core/style/StyleRareInheritedData.cpp
+++ b/third_party/WebKit/Source/core/style/StyleRareInheritedData.cpp
@@ -54,6 +54,7 @@
Color touchColors;
TabSize tabSize;
+ void* variables[1];
};
static_assert(sizeof(StyleRareInheritedData) <= sizeof(SameSizeAsStyleRareInheritedData), "StyleRareInheritedData should stay small");
@@ -159,6 +160,7 @@
, tapHighlightColor(o.tapHighlightColor)
, appliedTextDecorations(o.appliedTextDecorations)
, m_tabSize(o.m_tabSize)
+ , variables(o.variables)
{
}
@@ -222,7 +224,8 @@
&& m_textUnderlinePosition == o.m_textUnderlinePosition
&& m_rubyPosition == o.m_rubyPosition
&& dataEquivalent(listStyleImage.get(), o.listStyleImage.get())
- && dataEquivalent(appliedTextDecorations, o.appliedTextDecorations);
+ && dataEquivalent(appliedTextDecorations, o.appliedTextDecorations)
+ && variables == o.variables;
}
bool StyleRareInheritedData::shadowDataEquivalent(const StyleRareInheritedData& o) const
diff --git a/third_party/WebKit/Source/core/style/StyleRareInheritedData.h b/third_party/WebKit/Source/core/style/StyleRareInheritedData.h
index f26650c..260cd1cb 100644
--- a/third_party/WebKit/Source/core/style/StyleRareInheritedData.h
+++ b/third_party/WebKit/Source/core/style/StyleRareInheritedData.h
@@ -28,6 +28,7 @@
#include "core/CoreExport.h"
#include "core/css/StyleColor.h"
#include "core/style/DataRef.h"
+#include "core/style/StyleVariableData.h"
#include "platform/Length.h"
#include "platform/graphics/Color.h"
#include "platform/heap/Handle.h"
@@ -159,6 +160,8 @@
RefPtr<AppliedTextDecorationList> appliedTextDecorations;
TabSize m_tabSize;
+ RefPtr<StyleVariableData> variables;
+
private:
StyleRareInheritedData();
StyleRareInheritedData(const StyleRareInheritedData&);
diff --git a/third_party/WebKit/Source/core/style/StyleVariableData.h b/third_party/WebKit/Source/core/style/StyleVariableData.h
new file mode 100644
index 0000000..1c7d941
--- /dev/null
+++ b/third_party/WebKit/Source/core/style/StyleVariableData.h
@@ -0,0 +1,34 @@
+#ifndef StyleVariableData_h
+#define StyleVariableData_h
+
+#include "core/css/CSSVariableData.h"
+#include "wtf/Forward.h"
+#include "wtf/HashMap.h"
+#include "wtf/RefCounted.h"
+#include "wtf/text/AtomicStringHash.h"
+
+namespace blink {
+
+class StyleVariableData : public RefCounted<StyleVariableData> {
+public:
+ static PassRefPtr<StyleVariableData> create() { return adoptRef(new StyleVariableData()); }
+ PassRefPtr<StyleVariableData> copy() const { return adoptRef(new StyleVariableData(*this)); }
+
+ bool operator==(const StyleVariableData& other) const { return other.m_data == m_data; }
+ bool operator!=(const StyleVariableData& other) const { return !(*this == other); }
+
+ void setVariable(const AtomicString& name, PassRefPtr<CSSVariableData> value) { m_data.set(name, value); }
+ CSSVariableData* getVariable(const AtomicString& name) const { return m_data.get(name); }
+ void removeVariable(const AtomicString& name) { return m_data.remove(name); }
+private:
+ StyleVariableData() = default;
+ StyleVariableData(const StyleVariableData& other) : RefCounted<StyleVariableData>(), m_data(other.m_data) { }
+
+ friend class CSSVariableResolver;
+
+ HashMap<AtomicString, RefPtr<CSSVariableData>> m_data;
+};
+
+} // namespace blink
+
+#endif // StyleVariableData_h
diff --git a/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in b/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in
index 63bd6c8..0c182f9 100644
--- a/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in
+++ b/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in
@@ -53,6 +53,7 @@
CSSStickyPosition
CSSTouchActionPanDirections status=experimental
CSSTypedOM status=experimental
+CSSVariables status=experimental
CSSViewport status=experimental
CSSScrollSnapPoints status=test
// getPropertyCSSValue, CSSValue, etc. will be removed once layout tests no longer depend on them. crbug.com/331608
