Bug 985838 - Change custom property name prefix from "var-" to "--" and allow identifiers to begin with "--". r=dbaron
authorCameron McCormack <cam@mcc.id.au>
Wed, 02 Apr 2014 14:32:16 +1100
changeset 176585 822d8b27f4277e4c0e1d16b726831eb5123559dd
parent 176584 941bee559cd77e445a33436f2e37b80eeccd2d52
child 176586 2d98b5699fa3515f9ed7dcd3809a40e7460a82dd
push idunknown
push userunknown
push dateunknown
reviewersdbaron
bugs985838
milestone31.0a1
Bug 985838 - Change custom property name prefix from "var-" to "--" and allow identifiers to begin with "--". r=dbaron
layout/reftests/bugs/950436-1.html
layout/reftests/css-variables/variables-ruletree-cache-01.html
layout/reftests/css-variables/variables-ruletree-cache-02.html
layout/reftests/w3c-css/submitted/variables/support/external-variable-declaration.css
layout/reftests/w3c-css/submitted/variables/support/external-variable-font-face.css
layout/reftests/w3c-css/submitted/variables/support/external-variable-reference.css
layout/reftests/w3c-css/submitted/variables/support/external-variable-supports.css
layout/reftests/w3c-css/submitted/variables/variable-declaration-01.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-02.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-03.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-04.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-05.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-06.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-07.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-08.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-09.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-10.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-11.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-12.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-13.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-14.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-15.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-16.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-17.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-18.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-19.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-20.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-21.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-22.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-23.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-24.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-25.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-26.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-28.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-29.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-30.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-31.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-32.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-33.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-34.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-35.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-36.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-37.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-38.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-39.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-40.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-41.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-42.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-43.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-44.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-45.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-46.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-47.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-48.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-49.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-50.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-51.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-52.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-53.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-54.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-55.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-56.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-57.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-58.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-59.html
layout/reftests/w3c-css/submitted/variables/variable-declaration-60.html
layout/reftests/w3c-css/submitted/variables/variable-font-face-01.html
layout/reftests/w3c-css/submitted/variables/variable-font-face-02.html
layout/reftests/w3c-css/submitted/variables/variable-reference-01.html
layout/reftests/w3c-css/submitted/variables/variable-reference-02.html
layout/reftests/w3c-css/submitted/variables/variable-reference-03.html
layout/reftests/w3c-css/submitted/variables/variable-reference-04.html
layout/reftests/w3c-css/submitted/variables/variable-reference-05.html
layout/reftests/w3c-css/submitted/variables/variable-reference-06.html
layout/reftests/w3c-css/submitted/variables/variable-reference-07.html
layout/reftests/w3c-css/submitted/variables/variable-reference-08.html
layout/reftests/w3c-css/submitted/variables/variable-reference-09.html
layout/reftests/w3c-css/submitted/variables/variable-reference-10.html
layout/reftests/w3c-css/submitted/variables/variable-reference-11.html
layout/reftests/w3c-css/submitted/variables/variable-reference-12.html
layout/reftests/w3c-css/submitted/variables/variable-reference-13.html
layout/reftests/w3c-css/submitted/variables/variable-reference-14.html
layout/reftests/w3c-css/submitted/variables/variable-reference-15.html
layout/reftests/w3c-css/submitted/variables/variable-reference-16.html
layout/reftests/w3c-css/submitted/variables/variable-reference-17.html
layout/reftests/w3c-css/submitted/variables/variable-reference-18.html
layout/reftests/w3c-css/submitted/variables/variable-reference-19.html
layout/reftests/w3c-css/submitted/variables/variable-reference-20.html
layout/reftests/w3c-css/submitted/variables/variable-reference-21.html
layout/reftests/w3c-css/submitted/variables/variable-reference-22.html
layout/reftests/w3c-css/submitted/variables/variable-reference-23.html
layout/reftests/w3c-css/submitted/variables/variable-reference-24.html
layout/reftests/w3c-css/submitted/variables/variable-reference-25.html
layout/reftests/w3c-css/submitted/variables/variable-reference-26.html
layout/reftests/w3c-css/submitted/variables/variable-reference-27.html
layout/reftests/w3c-css/submitted/variables/variable-reference-28.html
layout/reftests/w3c-css/submitted/variables/variable-reference-29.html
layout/reftests/w3c-css/submitted/variables/variable-reference-30.html
layout/reftests/w3c-css/submitted/variables/variable-reference-31.html
layout/reftests/w3c-css/submitted/variables/variable-reference-32.html
layout/reftests/w3c-css/submitted/variables/variable-reference-33.html
layout/reftests/w3c-css/submitted/variables/variable-reference-34.html
layout/reftests/w3c-css/submitted/variables/variable-reference-35.html
layout/reftests/w3c-css/submitted/variables/variable-reference-36.html
layout/reftests/w3c-css/submitted/variables/variable-reference-37.html
layout/reftests/w3c-css/submitted/variables/variable-reference-38.html
layout/reftests/w3c-css/submitted/variables/variable-reference-39.html
layout/reftests/w3c-css/submitted/variables/variable-supports-01.html
layout/reftests/w3c-css/submitted/variables/variable-supports-02.html
layout/reftests/w3c-css/submitted/variables/variable-supports-03.html
layout/reftests/w3c-css/submitted/variables/variable-supports-04.html
layout/reftests/w3c-css/submitted/variables/variable-supports-05.html
layout/reftests/w3c-css/submitted/variables/variable-supports-06.html
layout/reftests/w3c-css/submitted/variables/variable-supports-07.html
layout/reftests/w3c-css/submitted/variables/variable-supports-08.html
layout/reftests/w3c-css/submitted/variables/variable-supports-09.html
layout/reftests/w3c-css/submitted/variables/variable-supports-10.html
layout/reftests/w3c-css/submitted/variables/variable-supports-11.html
layout/reftests/w3c-css/submitted/variables/variable-supports-12.html
layout/reftests/w3c-css/submitted/variables/variable-supports-13.html
layout/reftests/w3c-css/submitted/variables/variable-supports-14.html
layout/reftests/w3c-css/submitted/variables/variable-supports-15.html
layout/reftests/w3c-css/submitted/variables/variable-supports-16.html
layout/reftests/w3c-css/submitted/variables/variable-supports-17.html
layout/reftests/w3c-css/submitted/variables/variable-supports-18.html
layout/reftests/w3c-css/submitted/variables/variable-supports-19.html
layout/reftests/w3c-css/submitted/variables/variable-supports-20.html
layout/reftests/w3c-css/submitted/variables/variable-supports-21.html
layout/reftests/w3c-css/submitted/variables/variable-supports-22.html
layout/reftests/w3c-css/submitted/variables/variable-supports-23.html
layout/reftests/w3c-css/submitted/variables/variable-supports-24.html
layout/reftests/w3c-css/submitted/variables/variable-supports-25.html
layout/reftests/w3c-css/submitted/variables/variable-supports-26.html
layout/reftests/w3c-css/submitted/variables/variable-supports-27.html
layout/reftests/w3c-css/submitted/variables/variable-supports-28.html
layout/reftests/w3c-css/submitted/variables/variable-supports-29.html
layout/reftests/w3c-css/submitted/variables/variable-supports-30.html
layout/reftests/w3c-css/submitted/variables/variable-supports-31.html
layout/reftests/w3c-css/submitted/variables/variable-supports-32.html
layout/reftests/w3c-css/submitted/variables/variable-supports-33.html
layout/reftests/w3c-css/submitted/variables/variable-supports-34.html
layout/reftests/w3c-css/submitted/variables/variable-supports-35.html
layout/reftests/w3c-css/submitted/variables/variable-supports-36.html
layout/reftests/w3c-css/submitted/variables/variable-supports-37.html
layout/reftests/w3c-css/submitted/variables/variable-supports-38.html
layout/reftests/w3c-css/submitted/variables/variable-supports-39.html
layout/reftests/w3c-css/submitted/variables/variable-supports-40.html
layout/reftests/w3c-css/submitted/variables/variable-supports-41.html
layout/reftests/w3c-css/submitted/variables/variable-supports-42.html
layout/reftests/w3c-css/submitted/variables/variable-supports-43.html
layout/reftests/w3c-css/submitted/variables/variable-supports-44.html
layout/reftests/w3c-css/submitted/variables/variable-supports-45.html
layout/reftests/w3c-css/submitted/variables/variable-supports-46.html
layout/reftests/w3c-css/submitted/variables/variable-supports-47.html
layout/reftests/w3c-css/submitted/variables/variable-supports-48.html
layout/reftests/w3c-css/submitted/variables/variable-supports-49.html
layout/reftests/w3c-css/submitted/variables/variable-supports-50.html
layout/reftests/w3c-css/submitted/variables/variable-supports-51.html
layout/reftests/w3c-css/submitted/variables/variable-supports-52.html
layout/reftests/w3c-css/submitted/variables/variable-supports-53.html
layout/reftests/w3c-css/submitted/variables/variable-supports-54.html
layout/reftests/w3c-css/submitted/variables/variable-supports-55.html
layout/reftests/w3c-css/submitted/variables/variable-supports-56.html
layout/reftests/w3c-css/submitted/variables/variable-supports-57.html
layout/reftests/w3c-css/submitted/variables/variable-supports-58.html
layout/reftests/w3c-css/submitted/variables/variable-supports-59.html
layout/reftests/w3c-css/submitted/variables/variable-supports-60.html
layout/reftests/w3c-css/submitted/variables/variable-supports-61.html
layout/reftests/w3c-css/submitted/variables/variable-supports-62.html
layout/reftests/w3c-css/submitted/variables/variable-supports-63.html
layout/reftests/w3c-css/submitted/variables/variable-supports-64.html
layout/reftests/w3c-css/submitted/variables/variable-supports-65.html
layout/reftests/w3c-css/submitted/variables/variable-supports-66.html
layout/reftests/w3c-css/submitted/variables/variable-supports-67.html
layout/style/CSSVariableDeclarations.h
layout/style/CSSVariableResolver.h
layout/style/CSSVariableValues.h
layout/style/Declaration.cpp
layout/style/Declaration.h
layout/style/nsCSSParser.cpp
layout/style/nsCSSProperty.h
layout/style/nsCSSProps.cpp
layout/style/nsCSSProps.h
layout/style/nsCSSScanner.cpp
layout/style/nsComputedDOMStyle.cpp
layout/style/nsDOMCSSDeclaration.cpp
layout/style/test/chrome/test_author_specified_style.html
layout/style/test/support/external-variable-url.css
layout/style/test/test_css_supports_variables.html
layout/style/test/test_parse_rule.html
layout/style/test/test_value_storage.html
layout/style/test/test_variable_serialization_computed.html
layout/style/test/test_variable_serialization_specified.html
layout/style/test/test_variables.html
--- a/layout/reftests/bugs/950436-1.html
+++ b/layout/reftests/bugs/950436-1.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <style>
 /* It's important here to reference an image that has not previously been loaded
    during the reftest run.  So don't use 950436-1.png in any other test. */
-body { var-a: url(950436-1.png); background-image: var(a); }
+body { --a: url(950436-1.png); background-image: var(--a); }
 </style>
 <body>
--- a/layout/reftests/css-variables/variables-ruletree-cache-01.html
+++ b/layout/reftests/css-variables/variables-ruletree-cache-01.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <style>
-  p { var-foo: purple; background-color: var(foo) }
-  p#myid { var-foo: blue }
+  p { --foo: purple; background-color: var(--foo) }
+  p#myid { --foo: blue }
 </style>
 <p>This should be purple, and might cache background in the rule tree.</p>
 <p id="myid">This should be blue, and can't used that cached struct,
 which really shouldn't be cached anyway.</p>
--- a/layout/reftests/css-variables/variables-ruletree-cache-02.html
+++ b/layout/reftests/css-variables/variables-ruletree-cache-02.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <style>
-  div#a { var-foo: purple }
-  div#b { var-foo: blue }
-  p { background-color: var(foo) }
+  div#a { --foo: purple }
+  div#b { --foo: blue }
+  p { background-color: var(--foo) }
 </style>
 <div id="a"><p>This should be purple.</p></div>
 <div id="b"><p>This should be blue.</p></div>
--- a/layout/reftests/w3c-css/submitted/variables/support/external-variable-declaration.css
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-declaration.css
@@ -1,5 +1,5 @@
 p {
   color: red;
-  var-a: green;
-  color: var(a);
+  --a: green;
+  color: var(--a);
 }
--- a/layout/reftests/w3c-css/submitted/variables/support/external-variable-font-face.css
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-font-face.css
@@ -1,11 +1,11 @@
 @font-face {
-  var-a: MyTestFontName;
-  font-family: var(a);
+  --a: MyTestFontName;
+  font-family: var(--a);
   src: url(../../../../fonts/Ahem.ttf);
 }
 @font-face {
   font-family: MyTestFontName2;
   src: url(../../../../fonts/Ahem.ttf);
 }
 #a {
   font-family: MyTestFontName;
--- a/layout/reftests/w3c-css/submitted/variables/support/external-variable-reference.css
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-reference.css
@@ -1,6 +1,6 @@
 :root {
-  var-a: green;
+  --a: green;
 }
 p {
-  color: var(a);
+  color: var(--a);
 }
--- a/layout/reftests/w3c-css/submitted/variables/support/external-variable-supports.css
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-supports.css
@@ -1,4 +1,4 @@
 body { color: red; }
-@supports (color:var(a)) {
+@supports (color:var(--a)) {
   p { color: green; }
 }
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-01.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-01.html
@@ -5,13 +5,13 @@
 <!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;
-  var-a: green;
-  color: var(a);
+  --a: green;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-02.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-02.html
@@ -5,13 +5,13 @@
 <!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;
-  var-a:green;
-  color: var(a);
+  --a:green;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-03.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-03.html
@@ -5,14 +5,14 @@
 <!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;
-  var-a: var(b);
-  var-b: green;
-  color: var(a);
+  --a: var(--b);
+  --b: green;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-04.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-04.html
@@ -5,14 +5,14 @@
 <!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;
-  var-a: var(b) ;
-  var-b: green;
-  color: var(a);
+  --a: var(--b) ;
+  --b: green;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-05.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-05.html
@@ -5,14 +5,14 @@
 <!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;
-  var-a: var( b ) ;
-  var-b: green;
-  color: var(a);
+  --a: var( --b ) ;
+  --b: green;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-06.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-06.html
@@ -5,14 +5,14 @@
 <!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;
-  var-a: orange;
-  var-a: green;
-  color: var(a);
+  --a: orange;
+  --a: green;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-07.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-07.html
@@ -5,15 +5,15 @@
 <!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;
-  var-a: green;
-  var-b: crimson;
-  var-a: var(b,);
-  color: var(a);
+  --a: green;
+  --b: crimson;
+  --a: var(--b,);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-08.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-08.html
@@ -5,15 +5,15 @@
 <!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;
-  var-a: orange;
-  var-b: green;
-  var-a: var(b, );
-  color: var(a);
+  --a: orange;
+  --b: green;
+  --a: var(--b, );
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-09.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-09.html
@@ -5,15 +5,15 @@
 <!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;
-  var-a: green;
-  var-b: crimson;
-  var-a: var(b,/**/);
-  color: var(a);
+  --a: green;
+  --b: crimson;
+  --a: var(--b,/**/);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-10.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-10.html
@@ -5,15 +5,15 @@
 <!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;
-  var-a: orange;
-  var-b: green;
-  var-a: var(b,/**/a);
-  color: var(a);
+  --a: orange;
+  --b: green;
+  --a: var(--b,/**/a);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-11.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-11.html
@@ -5,15 +5,15 @@
 <!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;
-  var-a: green;
-  var-b: crimson;
-  var-a: var(b,!);
-  color: var(a);
+  --a: green;
+  --b: crimson;
+  --a: var(--b,!);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-12.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-12.html
@@ -5,15 +5,15 @@
 <!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;
-  var-a: green;
-  var-b: crimson;
-  var-a: var(b,;);
-  color: var(a);
+  --a: green;
+  --b: crimson;
+  --a: var(--b,;);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-13.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-13.html
@@ -5,15 +5,15 @@
 <!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;
-  var-a: green;
-  var-b: crimson;
-  var-a: var(b,!important);
-  color: var(a);
+  --a: green;
+  --b: crimson;
+  --a: var(--b,!important);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-14.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-14.html
@@ -8,14 +8,14 @@
 <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;
-  var-a:var(b)red;
-  var-b:orange;
-  color: var(a);
+  --a:var(--b)red;
+  --b:orange;
+  color: var(--a);
 }
 </style>
 <p><span>This text must be green.</span></p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-15.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-15.html
@@ -10,13 +10,13 @@
 <meta name="flags" content="ahem">
 <link rel="stylesheet" href="support/ahem.css" type="text/css">
 <style>
 body {
   font-family: serif;
 }
 p {
   font-family: monospace;
-  var-a: Ahem, sans-serif;
-  font-family: var(a);
+  --a: Ahem, sans-serif;
+  font-family: var(--a);
 }
 </style>
 <p>This text must be in Ahem.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-16.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-16.html
@@ -10,14 +10,14 @@
 <meta name="flags" content="ahem">
 <link rel="stylesheet" href="support/ahem.css" type="text/css">
 <style>
 body {
   font-family: serif;
 }
 p {
   font-family: monospace;
-  var-a: var(b), sans-serif;
-  var-b: Ahem;
-  font-family: var(a);
+  --a: var(--b), sans-serif;
+  --b: Ahem;
+  font-family: var(--a);
 }
 </style>
 <p>This text must be in Ahem.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-17.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-17.html
@@ -10,14 +10,14 @@
 <meta name="flags" content="ahem">
 <link rel="stylesheet" href="support/ahem.css" type="text/css">
 <style>
 body {
   font-family: serif;
 }
 p {
   font-family: monospace;
-  var-a: SomeUnknownFont, var(b);
-  var-b: Ahem;
-  font-family: var(a);
+  --a: SomeUnknownFont, var(--b);
+  --b: Ahem;
+  font-family: var(--a);
 }
 </style>
 <p>This text must be in Ahem.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-18.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-18.html
@@ -10,14 +10,14 @@
 <meta name="flags" content="ahem">
 <link rel="stylesheet" href="support/ahem.css" type="text/css">
 <style>
 body {
   font-family: serif;
 }
 p {
   font-family: monospace;
-  var-a: Ahem var(b) sans-serif;
-  var-b: ,;
-  font-family: var(a);
+  --a: Ahem var(--b) sans-serif;
+  --b: ,;
+  font-family: var(--a);
 }
 </style>
 <p>This text must be in Ahem.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-19.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-19.html
@@ -8,14 +8,14 @@
 <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;
-  var-a: rgb(0, var(b), 0);
-  var-b: 128;
-  color: var(a);
+  --a: rgb(0, var(--b), 0);
+  --b: 128;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-20.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-20.html
@@ -8,14 +8,14 @@
 <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;
-  var-a: var(b) !important;
-  var-b: green;
-  color: var(a);
+  --a: var(--b) !important;
+  --b: green;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-21.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-21.html
@@ -8,16 +8,16 @@
 <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;
-  var-a: rgb(var(b)var(c)var(d));
-  var-b: 0,;
-  var-c: 128,;
-  var-d: 0;
-  color: var(a);
+  --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>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-22.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-22.html
@@ -8,13 +8,13 @@
 <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;
-  var-a: var(b, var(c, var(d, green)));
-  color: var(a);
+  --a: var(--b, var(--c, var(--d, green)));
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-23.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-23.html
@@ -8,15 +8,15 @@
 <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;
-  var-a: green;
-  var-b: crimson;
-  var-a: var(b) !important !important;
-  color: var(a);
+  --a: green;
+  --b: crimson;
+  --a: var(--b) !important !important;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-24.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-24.html
@@ -11,15 +11,15 @@
 body {
   color: green;
 }
 p {
   color: red;
 }
 p {
   color: orange;
-  var-a: green;
-  var-b: crimson;
-  var-a: var(b) <!--;
-  color: var(a);
+  --a: green;
+  --b: crimson;
+  --a: var(--b) <!--;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-25.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-25.html
@@ -11,15 +11,15 @@
 body {
   color: green;
 }
 p {
   color: red;
 }
 p {
   color: orange;
-  var-a: green;
-  var-b: crimson;
-  var-a: --> var(b);
-  color: var(a);
+  --a: green;
+  --b: crimson;
+  --a: --> var(--b);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-26.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-26.html
@@ -8,13 +8,13 @@
 <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;
-  var-a: ;
-  color: var(a) green;
+  --a: ;
+  color: var(--a) green;
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-28.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-28.html
@@ -8,14 +8,14 @@
 <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;
-  var-a: green;
-  var-a:;
-  color: var(a);
+  --a: green;
+  --a:;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-29.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-29.html
@@ -1,21 +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 an invalid custom property name "var-".</title>
+<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;
-  var-: crimson;
-  var-a: var();
-  color: var(a,green);
+  --: green;
+  color: var(--,crimson);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-30.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-30.html
@@ -8,14 +8,14 @@
 <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;
-  var-a: crimson;
-  var-a: var(a);
-  color: var(a,green);
+  --a: crimson;
+  --a: var(--a);
+  color: var(--a,green);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-31.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-31.html
@@ -8,13 +8,13 @@
 <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;
-  var-0: green;
-  color: var(\30);
+  --0: green;
+  color: var(--\30);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-32.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-32.html
@@ -8,13 +8,13 @@
 <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;
-  var-\30: green;
-  color: var(\30);
+  --\30: green;
+  color: var(--\30);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-33.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-33.html
@@ -8,13 +8,13 @@
 <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;
-  var-\61: green;
-  color: var(a);
+  --\61: green;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-34.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-34.html
@@ -8,13 +8,13 @@
 <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;
-  var-\d800: green;
-  color: var(\fffd);
+  --\d800: green;
+  color: var(--\fffd);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-35.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-35.html
@@ -8,13 +8,13 @@
 <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;
-  var-\fffd: green;
-  color: var(\fffd);
+  --\fffd: green;
+  color: var(--\fffd);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-36.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-36.html
@@ -8,13 +8,13 @@
 <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;
-  var-\ffffff: green;
-  color: var(\fffd);
+  --\ffffff: green;
+  color: var(--\fffd);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-37.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-37.html
@@ -8,13 +8,13 @@
 <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;
-  var-a: var(b , );
-  color: var(a) green;
+  --a: var(--b , );
+  color: var(--a) green;
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-38.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-38.html
@@ -8,14 +8,14 @@
 <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;
-  var-a: green;
-  var-A: crimson;
-  color: var(a);
+  --a: green;
+  --A: crimson;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-39.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-39.html
@@ -8,14 +8,14 @@
 <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;
-  var-A: green;
-  var-a: crimson;
-  color: var(A);
+  --A: green;
+  --a: crimson;
+  color: var(--A);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-40.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-40.html
@@ -8,14 +8,14 @@
 <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;
-  var-a: green;
+  --a: green;
   VAR-a: crimson;
-  color: var(a);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-41.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-41.html
@@ -1,20 +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 'a' in the "var-" prefix of the custom property name is escaped.</title>
+<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;
-  v\61r-a: green;
-  color: var(a);
+  -\2d a: green;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-42.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-42.html
@@ -9,13 +9,13 @@
 <link rel="match" href="support/color-green-ref.html">
 <meta charset=utf-8>
 <style>
 p {
   color: red;
 }
 p {
   color: orange;
-  var-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);
+  --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>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-43.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-43.html
@@ -8,13 +8,13 @@
 <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;
-  var-a: initial;
-  color: var(a,green);
+  --a: initial;
+  color: var(--a,green);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-44.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-44.html
@@ -8,13 +8,13 @@
 <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;
-  var-a: inherit;
-  color: var(a,green);
+  --a: inherit;
+  color: var(--a,green);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-45.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-45.html
@@ -4,21 +4,21 @@
 -->
 <!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 {
-  var-a: green;
+  --a: green;
   color: crimson;
 }
 p {
   color: red;
 }
 p {
   color: orange;
-  var-a: inherit;
-  color: var(a);
+  --a: inherit;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-46.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-46.html
@@ -4,20 +4,20 @@
 -->
 <!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 {
-  var-a: crimson;
+  --a: crimson;
 }
 p {
   color: red;
 }
 p {
   color: orange;
-  var-a: initial;
-  color: var(a,green);
+  --a: initial;
+  color: var(--a,green);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-47.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-47.html
@@ -4,22 +4,22 @@
 -->
 <!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 {
-  var-b: green;
+  --b: green;
   color: crimson;
 }
 p {
   color: red;
 }
 p {
   color: orange;
-  var-a: var(b);
-  var-b: inherit;
-  color: var(a);
+  --a: var(--b);
+  --b: inherit;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-48.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-48.html
@@ -8,18 +8,18 @@
 <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;
-  var-a: red var(b);
-  var-b: var(c);
-  var-c: var(d);
-  var-d: var(e);
-  var-e: var(a);
-  var-f: var(e);
-  color: var(f);
+  --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>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-49.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-49.html
@@ -8,19 +8,19 @@
 <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;
-  var-a: red var(b) var(g);
-  var-b: var(c);
-  var-c: var(d);
-  var-d: var(e);
-  var-e: var(a);
-  var-f: var(e);
-  var-g: green;
-  color: var(g);
+  --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>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-50.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-50.html
@@ -8,18 +8,18 @@
 <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;
-  var-a: var(b,red);
-  var-b: var(c);
-  var-c: var(d);
-  var-d: var(e);
-  var-e: var(a);
-  var-f: var(e);
-  color: var(f);
+  --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>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-51.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-51.html
@@ -5,20 +5,20 @@
 <!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;
-  var-c: var(a);
+  --c: var(--a);
 }
 p {
-  var-a: var(b);
+  --a: var(--b);
 }
 p {
   color: red;
-  var-b: var(c,green);
-  color: var(a);
+  --b: var(--c,green);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-52.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-52.html
@@ -5,20 +5,20 @@
 <!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;
-  var-c: var(a,green);
+  --c: var(--a,green);
 }
 p {
-  var-a: var(b);
+  --a: var(--b);
 }
 p {
   color: red;
-  var-b: var(c,crimson);
-  color: var(a);
+  --b: var(--c,crimson);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-53.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-53.html
@@ -8,15 +8,15 @@
 <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;
-  var-a:var(b)var(c);
-  var-b:orange;
-  var-c:red;
-  color: var(a);
+  --a:var(--b)var(--c);
+  --b:orange;
+  --c:red;
+  color: var(--a);
 }
 </style>
 <p><span>This text must be green.</span></p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-54.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-54.html
@@ -8,14 +8,14 @@
 <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;
-  var-a:var(b,orange)var(c);
-  var-c:red;
-  color: var(a);
+  --a:var(--b,orange)var(--c);
+  --c:red;
+  color: var(--a);
 }
 </style>
 <p><span>This text must be green.</span></p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-55.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-55.html
@@ -8,14 +8,14 @@
 <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;
-  var-a:var(b)var(c,red);
-  var-b:orange;
-  color: var(a);
+  --a:var(--b)var(--c,red);
+  --b:orange;
+  color: var(--a);
 }
 </style>
 <p><span>This text must be green.</span></p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-56.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-56.html
@@ -8,13 +8,13 @@
 <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;
-  var-a: unset;
-  color: var(a,green);
+  --a: unset;
+  color: var(--a,green);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-57.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-57.html
@@ -4,21 +4,21 @@
 -->
 <!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 {
-  var-a: green;
+  --a: green;
   color: crimson;
 }
 p {
   color: red;
 }
 p {
   color: orange;
-  var-a: unset;
-  color: var(a);
+  --a: unset;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-58.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-58.html
@@ -4,22 +4,22 @@
 -->
 <!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 {
-  var-b: green;
+  --b: green;
   color: crimson;
 }
 p {
   color: red;
 }
 p {
   color: orange;
-  var-a: var(b);
-  var-b: unset;
-  color: var(a);
+  --a: var(--b);
+  --b: unset;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-59.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-59.html
@@ -4,14 +4,14 @@
 -->
 <!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);
-  var-a: green;
-  var-a: red);
+  color: var(--a);
+  --a: green;
+  --a: red);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-declaration-60.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-60.html
@@ -6,18 +6,18 @@
 <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;
-  var-a: green;
-  color: var(a);
+  --a: green;
+  color: var(--a);
 }
 p {
-  var-b: İnitial;
-  var-c: ınitial;
-  color: var(b,var(c,red));
+  --b: İnitial;
+  --c: ınitial;
+  color: var(--b,var(--c,red));
 }
 </style>
 <div><p>This text must be green.</p></div>
--- a/layout/reftests/w3c-css/submitted/variables/variable-font-face-01.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-font-face-01.html
@@ -5,18 +5,18 @@
 <!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 {
-  var-a: MyTestFontName;
-  font-family: var(a);
+  --a: MyTestFontName;
+  font-family: var(--a);
   src: url(../../../fonts/Ahem.ttf);
 }
 @font-face {
   font-family: MyTestFontName2;
   src: url(../../../fonts/Ahem.ttf);
 }
 #a {
   font-family: MyTestFontName;
--- a/layout/reftests/w3c-css/submitted/variables/variable-font-face-02.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-font-face-02.html
@@ -5,20 +5,20 @@
 <!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 {
-  var-a: MyTestFontName;
+  --a: MyTestFontName;
 }
 @font-face {
-  font-family: var(a);
+  font-family: var(--a);
   src: url(../../../fonts/Ahem.ttf);
 }
 @font-face {
   font-family: MyTestFontName2;
   src: url(../../../fonts/Ahem.ttf);
 }
 #a {
   font-family: MyTestFontName;
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-01.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-01.html
@@ -4,15 +4,15 @@
 -->
 <!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 {
-  var-a: green;
+  --a: green;
 }
 p {
-  color: var(a);
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-02.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-02.html
@@ -4,20 +4,20 @@
 -->
 <!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 {
-  var-a: crimson;
+  --a: crimson;
   color: red;
 }
 body {
   color: green;
 }
 p {
   color: orange;
-  color: var(a) var(b);
+  color: var(--a) var(--b);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-03.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-03.html
@@ -4,18 +4,18 @@
 -->
 <!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 {
-  var-a: green;
-  var-b: ;
+  --a: green;
+  --b: ;
   color: red;
 }
 p {
   color: crimson;
-  color: var(a) var(b);
+  color: var(--a) var(--b);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-04.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-04.html
@@ -4,17 +4,17 @@
 -->
 <!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 {
-  var-a: green;
+  --a: green;
   color: red;
 }
 p {
   color: crimson;
-  color: var(a) var(b, );
+  color: var(--a) var(--b, );
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-05.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-05.html
@@ -4,17 +4,17 @@
 -->
 <!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 {
-  var-a: green;
+  --a: green;
   color: red;
 }
 p {
   color: crimson;
-  color:var(a);
+  color:var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-06.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-06.html
@@ -4,17 +4,17 @@
 -->
 <!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 {
-  var-a: crimson;
+  --a: crimson;
   color: red;
 }
 p {
   color: green;
-  color: var(a,);
+  color: var(--a,);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-07.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-07.html
@@ -4,17 +4,17 @@
 -->
 <!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 {
-  var-a: crimson;
+  --a: crimson;
   color: red;
 }
 p {
   color: green;
-  color: var(a,;);
+  color: var(--a,;);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-08.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-08.html
@@ -4,17 +4,17 @@
 -->
 <!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 {
-  var-a: crimson;
+  --a: crimson;
   color: red;
 }
 p {
   color: green;
-  color: var(a,!);
+  color: var(--a,!);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-09.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-09.html
@@ -4,17 +4,17 @@
 -->
 <!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 {
-  var-a: green;
+  --a: green;
   color: crimson;
 }
 p {
   color: red;
-  color: var(a,(;));
+  color: var(--a,(;));
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-10.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-10.html
@@ -4,17 +4,17 @@
 -->
 <!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 {
-  var-a: green;
+  --a: green;
   color: crimson;
 }
 p {
   color: red;
-  color: var(a,(!));
+  color: var(--a,(!));
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-11.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-11.html
@@ -4,17 +4,17 @@
 -->
 <!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 {
-  var-a: crimson;
+  --a: crimson;
   color: red;
 }
 p {
   color: green;
-  color: var(a,/**/);
+  color: var(--a,/**/);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-12.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-12.html
@@ -4,17 +4,17 @@
 -->
 <!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 {
-  var-a: "hello";
-  var-b: "there";
+  --a: "hello";
+  --b: "there";
 }
 #a:before {
-  content: var(a) " " var(b);
+  content: var(--a) " " var(--b);
 }
 </style>
 <p>The words "hello there" must appear below:</p>
 <p id=a></p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-13.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-13.html
@@ -5,14 +5,14 @@
 <!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;
-  var-a: green !important;
-  var-a: crimson;
-  color: var(a);
+  --a: green !important;
+  --a: crimson;
+  color: var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-14.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-14.html
@@ -4,17 +4,17 @@
 -->
 <!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 {
-  var-a: green !important;
+  --a: green !important;
 }
 p {
   color: red;
-  var-a: crimson;
-  color: var(a);
+  --a: crimson;
+  color: var(--a);
 }
 </style>
 <p id=a>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-15.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-15.html
@@ -8,14 +8,14 @@
 <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;
-  var-a: orange;
-  var-b: red;
-  color: var(a)var(b);
+  --a: orange;
+  --b: red;
+  color: var(--a)var(--b);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-16.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-16.html
@@ -8,12 +8,12 @@
 <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)));
+  color: var(--a, var(--b, var(--c, green)));
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-17.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-17.html
@@ -8,13 +8,13 @@
 <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;
-  var-a: green;
-  color: var(a, <!--);
+  --a: green;
+  color: var(--a, <!--);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-18.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-18.html
@@ -8,12 +8,12 @@
 <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) ] };
+  color: { [ var(--a) ] };
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-19.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-19.html
@@ -8,12 +8,12 @@
 <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);
+  color: [;] var(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-20.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-20.html
@@ -5,13 +5,13 @@
 <!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;
-  var-a: green;
-  color: VAR(a);
+  --a: green;
+  color: VAR(--a);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-21.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-21.html
@@ -5,13 +5,13 @@
 <!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;
-  var-0: green;
-  color: var(\30);
+  --0: green;
+  color: var(--\30);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-22.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-22.html
@@ -5,13 +5,13 @@
 <!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;
-  var-\d800: green;
-  color: var(\d800);
+  --\d800: green;
+  color: var(--\d800);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-23.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-23.html
@@ -5,13 +5,13 @@
 <!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;
-  var-\d800: green;
-  color: var(\fffd);
+  --\d800: green;
+  color: var(--\fffd);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-24.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-24.html
@@ -5,13 +5,13 @@
 <!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;
-  var-\ffffff: green;
-  color: var(\fffd);
+  --\ffffff: green;
+  color: var(--\fffd);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-25.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-25.html
@@ -5,11 +5,11 @@
 <!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;
-  var-a: green;
-  color: var(a</style>
+  --a: green;
+  color: var(--a</style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-26.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-26.html
@@ -5,11 +5,11 @@
 <!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;
-  var-a: green;
-  color: var(a , </style>
+  --a: green;
+  color: var(--a , </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-27.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-27.html
@@ -5,11 +5,11 @@
 <!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;
-  var-a: green;
-  color: var(a, </style>
+  --a: green;
+  color: var(--a, </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-28.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-28.html
@@ -5,11 +5,11 @@
 <!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;
-  var-a: green;
-  color: var(a, var(b</style>
+  --a: green;
+  color: var(--a, var(--b</style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-29.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-29.html
@@ -5,11 +5,11 @@
 <!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;
-  var-a: green;
-  color: var(a /* unclosed comment</style>
+  --a: green;
+  color: var(--a /* unclosed comment</style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-30.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-30.html
@@ -5,13 +5,13 @@
 <!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;
-  var-a: red;
-  color: var(a) !important !important;
+  --a: red;
+  color: var(--a) !important !important;
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-31.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-31.html
@@ -1,20 +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 containing a variable reference with a non-identifier variable name.</title>
+<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: green;
-  var-0: red;
-  color: var(0);
+  color: red;
+  --0: green;
+  color: var(--0);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-32.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-32.html
@@ -8,12 +8,12 @@
 <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;
-  var-a: red;
-  color: var(a, "
+  --a: red;
+  color: var(--a, "
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-33.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-33.html
@@ -8,11 +8,11 @@
 <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;
-  var-a: green;
-  color: var(a, "</style>
+  --a: green;
+  color: var(--a, "</style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-34.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-34.html
@@ -8,12 +8,12 @@
 <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;
-  var-a: red;
-  color: var(a, url("
+  --a: red;
+  color: var(--a, url("
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-35.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-35.html
@@ -8,11 +8,11 @@
 <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;
-  var-a: green;
-  color: var(a, url("</style>
+  --a: green;
+  color: var(--a, url("</style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-36.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-36.html
@@ -5,14 +5,14 @@
 <!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;
-  var-a: url(nothing) green;
-  background: var(a);
+  --a: url(nothing) green;
+  background: var(--a);
   color: white;
 }
 </style>
 <p>This text must have a green background color.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-37.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-37.html
@@ -4,15 +4,15 @@
 -->
 <!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 {
-  var-a: url(nothing) red;
-  background: var(a);
+  --a: url(nothing) red;
+  background: var(--a);
   background-color: green;
   color: white;
 }
 </style>
 <p>This text must have a green background color.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-38.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-38.html
@@ -4,13 +4,13 @@
 -->
 <!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 { var-style: solid; var-left: black dotted; border-style: var(style); border-left: var(left); border-top: none; border-right: none; border-bottom: none; }
-#b { var-style: solid; var-left: black dotted; border-left: var(left); border-style: var(style); border-top: none; border-right: none; border-bottom: none; }
+#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>
--- a/layout/reftests/w3c-css/submitted/variables/variable-reference-39.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-39.html
@@ -5,13 +5,13 @@
 <!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;
-  var-a: var(a, red);
-  color: var(a, green);
+  --a: var(--a, red);
+  color: var(--a, green);
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-01.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-01.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color:var(--a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-02.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-02.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: var(--a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-03.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-03.html
@@ -4,13 +4,13 @@
 -->
 <!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) ) {
+@supports (color: var(--a) ) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-04.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-04.html
@@ -4,13 +4,13 @@
 -->
 <!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 ) ) {
+@supports (color: var( --a ) ) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-05.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-05.html
@@ -4,13 +4,13 @@
 -->
 <!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,))) {
+@supports (color: var(--a)) and (not (color: var(--a,))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-06.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-06.html
@@ -4,13 +4,13 @@
 -->
 <!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, )) {
+@supports (color: var(--a, )) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-07.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-07.html
@@ -4,13 +4,13 @@
 -->
 <!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,/**/))) {
+@supports (color: var(--a)) and (not (color: var(--a,/**/))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-08.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-08.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: var(--a,/**/a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-09.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-09.html
@@ -4,13 +4,13 @@
 -->
 <!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,!))) {
+@supports (color: var(--a)) and (not (color: var(--a,!))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-10.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-10.html
@@ -4,13 +4,13 @@
 -->
 <!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))) {
+@supports (color: var(--a)) and (not (color: var(--a,!important))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-11.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-11.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: 1px var(--a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-12.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-12.html
@@ -4,13 +4,13 @@
 -->
 <!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) {
+@supports (color: var(--a) 1px) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-13.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-13.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: something 3px url(whereever) calc(var(--a) + 1px)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-14.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-14.html
@@ -4,13 +4,13 @@
 -->
 <!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) {
+@supports (color: var(--a) !important) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-15.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-15.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: var(--a)var(--b)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-16.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-16.html
@@ -4,13 +4,13 @@
 -->
 <!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)))) {
+@supports (color: var(--a, var(--b, var(--c, black)))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-17.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-17.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: var(--a)) and (not (color: var(--a) !important !important)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-18.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-18.html
@@ -4,13 +4,13 @@
 -->
 <!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) <!--) {
+@supports (color: var(--a) <!--) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-19.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-19.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: --> var(--a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-20.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-20.html
@@ -4,13 +4,13 @@
 -->
 <!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) ] }) {
+@supports (color: { [ var(--a) ] }) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-21.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-21.html
@@ -4,13 +4,13 @@
 -->
 <!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,;))) {
+@supports (color: var(--a)) and (not (color: var(--a,;))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-22.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-22.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: [;] var(--a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-23.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-23.html
@@ -4,13 +4,13 @@
 -->
 <!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);)) {
+@supports (color: var(--a)) and (not (color: var(--a);)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-24.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-24.html
@@ -4,13 +4,13 @@
 -->
 <!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,(;))) {
+@supports (color: var(--a,(;))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-25.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-25.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: VAR(--a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-26.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-26.html
@@ -1,16 +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 number token as the variable name.</title>
+<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(a)) and (not (color: var(0))) {
+@supports (color: var(--0)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-27.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-27.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: var(--\30)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-28.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-28.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: var(--\d800)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-29.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-29.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (color: var(--\ffffff)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-30.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-30.html
@@ -4,13 +4,13 @@
 -->
 <!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))) {
+@supports (color: var(--a)) and (not (color: var(1px))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-31.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-31.html
@@ -4,13 +4,13 @@
 -->
 <!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 , )) {
+@supports (color: var(--a , )) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-32.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-32.html
@@ -4,13 +4,13 @@
 -->
 <!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)) {
+@supports (background: var(--a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-33.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-33.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a:var(b)) {
+@supports (--a:var(--b)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-34.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-34.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var(b)) {
+@supports (--a: var(--b)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-35.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-35.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var(b) ) {
+@supports (--a: var(--b) ) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-36.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-36.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var( b ) ) {
+@supports (--a: var( --b ) ) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-37.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-37.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: a) and (not (var-a: var(b,))) {
+@supports (--a: a) and (not (--a: var(--b,))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-38.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-38.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var(b, )) {
+@supports (--a: var(--b, )) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-39.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-39.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: a) and (not (var-a: var(b,/**/))) {
+@supports (--a: a) and (not (--a: var(--b,/**/))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-40.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-40.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var(b,/**/a)) {
+@supports (--a: var(--b,/**/a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-41.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-41.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: a) and (not (var-a: var(b,!))) {
+@supports (--a: a) and (not (--a: var(--b,!))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-42.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-42.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: a) and (not (var-a: var(b,!important))) {
+@supports (--a: a) and (not (--a: var(--b,!important))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-43.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-43.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: 1px var(b)) {
+@supports (--a: 1px var(--b)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-44.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-44.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var(b) 1px) {
+@supports (--a: var(--b) 1px) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-45.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-45.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: something 3px url(whereever) calc(var(b) + 1px)) {
+@supports (--a: something 3px url(whereever) calc(var(--b) + 1px)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-46.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-46.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var(b) !important) {
+@supports (--a: var(--b) !important) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-47.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-47.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var(b)var(b)) {
+@supports (--a: var(--b)var(--b)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-48.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-48.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var(b, var(c, var(d, black)))) {
+@supports (--a: var(--b, var(--c, var(--d, black)))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-49.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-49.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: a) and (not (var-a: var(b) !important !important)) {
+@supports (--a: a) and (not (--a: var(--b) !important !important)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-50.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-50.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var(b) <!--) {
+@supports (--a: var(--b) <!--) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-51.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-51.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: --> var(b)) {
+@supports (--a: --> var(--b)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-52.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-52.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: { [ var(b) ] }) {
+@supports (--a: { [ var(--b) ] }) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-53.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-53.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: a) and (not (var-a: var(b,;))) {
+@supports (--a: a) and (not (--a: var(--b,;))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-54.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-54.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: [;] var(b)) {
+@supports (--a: [;] var(--b)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-55.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-55.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: a) and (not (var-a: var(b);)) {
+@supports (--a: a) and (not (--a: var(--b);)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-56.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-56.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: ) {
+@supports (--a: ) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-57.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-57.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: a) and (not (var-a:)) {
+@supports (--a: a) and (not (--a:)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-58.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-58.html
@@ -1,16 +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 property declaration in an @supports rule with property name "var-".</title>
+<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 (var-a: a) and (not (var-: a)) {
+@supports (--: a) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-59.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-59.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a:var(a)) {
+@supports (--a:var(--a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-60.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-60.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-0: a) {
+@supports (--0: a) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-61.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-61.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-\61: a) {
+@supports (--\61: a) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-62.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-62.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-\d800: a) {
+@supports (--\d800: a) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-63.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-63.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-\ffffff: a) {
+@supports (--\ffffff: a) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-64.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-64.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: a) and (not (var-a: var(1px))) {
+@supports (--a: a) and (not (--a: var(1px))) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-65.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-65.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: var(b , )) {
+@supports (--a: var(--b , )) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-66.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-66.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: a) and (not (VAR-a: a)) {
+@supports (--a: a) and (not (VAR-a: a)) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/reftests/w3c-css/submitted/variables/variable-supports-67.html
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-67.html
@@ -4,13 +4,13 @@
 -->
 <!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 (var-a: !) or (var-a: a) {
+@supports (--a: !) or (--a: a) {
   p { color: green; }
 }
 </style>
 <p>This text must be green.</p>
--- a/layout/style/CSSVariableDeclarations.h
+++ b/layout/style/CSSVariableDeclarations.h
@@ -26,17 +26,17 @@ public:
   ~CSSVariableDeclarations();
 #endif
   CSSVariableDeclarations& operator=(const CSSVariableDeclarations& aOther);
 
   /**
    * Returns whether this set of variable declarations includes a variable
    * with a given name.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name).
    */
   bool Has(const nsAString& aName) const;
 
   /**
    * Represents the type of a variable value.
    */
   enum Type {
@@ -44,69 +44,69 @@ public:
     eInitial,      // 'initial'
     eInherit,      // 'inherit'
     eUnset         // 'unset'
   };
 
   /**
    * Gets the value of a variable in this set of variable declarations.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name).
    * @param aType Out parameter into which the type of the variable value will
    *   be stored.
    * @param aValue Out parameter into which the value of the variable will
    *   be stored.  If the variable is 'initial', 'inherit' or 'unset', this will
    *   be the empty string.
    * @return Whether a variable with the given name was found.  When false
    *   is returned, aType and aValue will not be modified.
    */
   bool Get(const nsAString& aName, Type& aType, nsString& aValue) const;
 
   /**
    * Adds or modifies an existing entry in this set of variable declarations
    * to have the value 'initial'.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name) whose value is to be set.
    */
   void PutInitial(const nsAString& aName);
 
   /**
    * Adds or modifies an existing entry in this set of variable declarations
    * to have the value 'inherit'.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name) whose value is to be set.
    */
   void PutInherit(const nsAString& aName);
 
   /**
    * Adds or modifies an existing entry in this set of variable declarations
    * to have the value 'unset'.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name) whose value is to be set.
    */
   void PutUnset(const nsAString& aName);
 
   /**
    * Adds or modifies an existing entry in this set of variable declarations
    * to have a token stream value.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name) whose value is to be set.
    * @param aTokenStream The CSS token stream.
    */
   void PutTokenStream(const nsAString& aName, const nsString& aTokenStream);
 
   /**
    * Removes an entry in this set of variable declarations.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name) whose entry is to be removed.
    */
   void Remove(const nsAString& aName);
 
   /**
    * Returns the number of entries in this set of variable declarations.
    */
   uint32_t Count() const { return mVariables.Count(); }
--- a/layout/style/CSSVariableResolver.h
+++ b/layout/style/CSSVariableResolver.h
@@ -87,17 +87,17 @@ private:
   };
 
   /**
    * Adds or modifies an existing entry in the set of variables to be resolved.
    * This is intended to be called by the AddVariablesToResolver functions on
    * the CSSVariableDeclarations and CSSVariableValues objects passed in to
    * Resolve.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name) whose value is to be set.
    * @param aValue The variable value.
    * @param aFirstToken The type of token at the start of the variable value.
    * @param aLastToken The type of token at the en of the variable value.
    * @param aWasInherited Whether this variable came from the set of inherited
    *   variables.
    */
   void Put(const nsAString& aVariableName,
--- a/layout/style/CSSVariableValues.h
+++ b/layout/style/CSSVariableValues.h
@@ -28,31 +28,31 @@ public:
 
   bool operator==(const CSSVariableValues& aOther) const;
   bool operator!=(const CSSVariableValues& aOther) const
     { return !(*this == aOther); }
 
   /**
    * Gets the value of a variable in this set of computed variables.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name).
    * @param aValue Out parameter into which the value of the variable will
    *   be stored.
    * @return Whether a variable with the given name was found.  When false
    *   is returned, aValue will not be modified.
    */
   bool Get(const nsAString& aName, nsString& aValue) const;
 
   /**
    * Gets the value of a variable in this set of computed variables, along
    * with information on the types of tokens that appear at the start and
    * end of the token stream.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name).
    * @param aValue Out parameter into which the value of the variable will
    *   be stored.
    * @param aFirstToken The type of token at the start of the variable value.
    * @param aLastToken The type of token at the en of the variable value.
    * @return Whether a variable with the given name was found.  When false
    *   is returned, aValue, aFirstToken and aLastToken will not be modified.
    */
@@ -79,17 +79,17 @@ public:
   /**
    * Gets the number of variables stored on this object.
    */
   size_t Count() const;
 
   /**
    * Adds or modifies an existing entry in this set of variable values.
    *
-   * @param aName The variable name (not including any "var-" prefix that would
+   * @param aName The variable name (not including any "--" prefix that would
    *   be part of the custom property name) whose value is to be set.
    * @param aValue The variable value.
    * @param aFirstToken The type of token at the start of the variable value.
    * @param aLastToken The type of token at the en of the variable value.
    */
   void Put(const nsAString& aName,
            nsString aValue,
            nsCSSTokenSerializationType aFirstToken,
--- a/layout/style/Declaration.cpp
+++ b/layout/style/Declaration.cpp
@@ -1115,29 +1115,28 @@ Declaration::GetValue(nsCSSProperty aPro
       // so serialize as the empty string.
       break;
     default:
       NS_ABORT_IF_FALSE(false, "no other shorthands");
       break;
   }
 }
 
-// Length of the "var-" prefix of custom property names.
-#define VAR_PREFIX_LENGTH 4
-
 bool
 Declaration::GetValueIsImportant(const nsAString& aProperty) const
 {
   nsCSSProperty propID =
     nsCSSProps::LookupProperty(aProperty, nsCSSProps::eIgnoreEnabledState);
   if (propID == eCSSProperty_UNKNOWN) {
     return false;
   }
   if (propID == eCSSPropertyExtra_variable) {
-    return GetVariableValueIsImportant(Substring(aProperty, VAR_PREFIX_LENGTH));
+    const nsSubstring& variableName =
+      Substring(aProperty, CSS_CUSTOM_NAME_PREFIX_LENGTH);
+    return GetVariableValueIsImportant(variableName);
   }
   return GetValueIsImportant(propID);
 }
 
 bool
 Declaration::GetValueIsImportant(nsCSSProperty aProperty) const
 {
   if (!mImportantData)
@@ -1182,17 +1181,17 @@ Declaration::AppendPropertyAndValueToStr
   }
   aResult.AppendLiteral("; ");
 }
 
 void
 Declaration::AppendVariableAndValueToString(const nsAString& aName,
                                             nsAString& aResult) const
 {
-  aResult.AppendLiteral("var-");
+  aResult.AppendLiteral("--");
   aResult.Append(aName);
   CSSVariableDeclarations::Type type;
   nsString value;
   bool important;
 
   if (mImportantVariables && mImportantVariables->Get(aName, type, value)) {
     important = true;
   } else {
--- a/layout/style/Declaration.h
+++ b/layout/style/Declaration.h
@@ -69,50 +69,50 @@ public:
     return mImportantData || mImportantVariables;
   }
   bool GetValueIsImportant(nsCSSProperty aProperty) const;
   bool GetValueIsImportant(const nsAString& aProperty) const;
 
   /**
    * Adds a custom property declaration to this object.
    *
-   * @param aName The variable name (i.e., without the "var-" prefix).
+   * @param aName The variable name (i.e., without the "--" prefix).
    * @param aType The type of value the variable has.
    * @param aValue The value of the variable, if aType is
    *   CSSVariableDeclarations::eTokenStream.
    * @param aIsImportant Whether the declaration is !important.
    * @param aOverrideImportant When aIsImportant is false, whether an
    *   existing !important declaration will be overridden.
    */
   void AddVariableDeclaration(const nsAString& aName,
                               CSSVariableDeclarations::Type aType,
                               const nsString& aValue,
                               bool aIsImportant,
                               bool aOverrideImportant);
 
   /**
    * Removes a custom property declaration from this object.
    *
-   * @param aName The variable name (i.e., without the "var-" prefix).
+   * @param aName The variable name (i.e., without the "--" prefix).
    */
   void RemoveVariableDeclaration(const nsAString& aName);
 
   /**
    * Returns whether a custom property declaration for a variable with
    * a given name exists on this object.
    *
-   * @param aName The variable name (i.e., without the "var-" prefix).
+   * @param aName The variable name (i.e., without the "--" prefix).
    */
   bool HasVariableDeclaration(const nsAString& aName) const;
 
   /**
    * Gets the string value for a custom property declaration of a variable
    * with a given name.
    *
-   * @param aName The variable name (i.e., without the "var-" prefix).
+   * @param aName The variable name (i.e., without the "--" prefix).
    * @param aValue Out parameter into which the variable's value will be
    *   stored.  If the value is 'initial' or 'inherit', that exact string
    *   will be stored in aValue.
    */
   void GetVariableDeclaration(const nsAString& aName, nsAString& aValue) const;
 
   /**
    * Returns whether the custom property declaration for a variable with
@@ -313,25 +313,25 @@ public:
   /**
    * Gets the name of the custom property at the given index in the ordered
    * list of declarations.
    */
   void GetCustomPropertyNameAt(uint32_t aIndex, nsAString& aResult) const {
     MOZ_ASSERT(mOrder[aIndex] >= eCSSProperty_COUNT);
     uint32_t variableIndex = mOrder[aIndex] - eCSSProperty_COUNT;
     aResult.Truncate();
-    aResult.AppendLiteral("var-");
+    aResult.AppendLiteral("--");
     aResult.Append(mVariableOrder[variableIndex]);
   }
 
   size_t SizeOfIncludingThis(mozilla::MallocSizeOf aMallocSizeOf) const;
 
 private:
   // The order of properties in this declaration.  Longhand properties are
-  // represented by their nsCSSProperty value, and each custom property (var-*)
+  // represented by their nsCSSProperty value, and each custom property (--*)
   // is represented by a value that begins at eCSSProperty_COUNT.
   //
   // Subtracting eCSSProperty_COUNT from those values that represent custom
   // properties results in an index into mVariableOrder, which identifies the
   // specific variable the custom property declaration is for.
   nsAutoTArray<uint32_t, 8> mOrder;
 
   // variable names of custom properties found in mOrder
--- a/layout/style/nsCSSParser.cpp
+++ b/layout/style/nsCSSParser.cpp
@@ -55,19 +55,16 @@ const uint32_t
 nsCSSProps::kParserVariantTable[eCSSProperty_COUNT_no_shorthands] = {
 #define CSS_PROP(name_, id_, method_, flags_, pref_, parsevariant_, kwtable_, \
                  stylestruct_, stylestructoffset_, animtype_)                 \
   parsevariant_,
 #include "nsCSSPropList.h"
 #undef CSS_PROP
 };
 
-// Length of the "var-" prefix of custom property names.
-#define VAR_PREFIX_LENGTH 4
-
 // Maximum number of repetitions for the repeat() function
 // in the grid-template-columns and grid-template-rows properties,
 // to limit high memory usage from small stylesheets.
 // Must be a positive integer. Should be large-ish.
 #define GRID_TEMPLATE_MAX_REPETITIONS 10000
 
 // End-of-array marker for mask arguments to ParseBitmaskValues
 #define MASK_END_VALUE  (-1)
@@ -1506,17 +1503,17 @@ CSSParserImpl::ParseVariable(const nsASt
 
   // We should now be at EOF
   if (parsedOK && GetToken(true)) {
     REPORT_UNEXPECTED_TOKEN(PEExpectEndValue);
     parsedOK = false;
   }
 
   if (!parsedOK) {
-    REPORT_UNEXPECTED_P(PEValueParsingError, NS_LITERAL_STRING("var-") +
+    REPORT_UNEXPECTED_P(PEValueParsingError, NS_LITERAL_STRING("--") +
                                              aVariableName);
     REPORT_UNEXPECTED(PEDeclDropped);
     OUTPUT_ERROR();
   } else {
     CLEAR_ERROR();
     aDeclaration->AddVariableDeclaration(aVariableName, variableType,
                                          variableValue, aIsImportant, true);
     *aChanged = true;
@@ -1688,20 +1685,20 @@ CSSParserImpl::EvaluateSupportsDeclarati
   nsCSSScanner scanner(aValue, 0);
   css::ErrorReporter reporter(scanner, mSheet, mChildLoader, aDocURL);
   InitScanner(scanner, reporter, aDocURL, aBaseURL, aDocPrincipal);
   nsAutoSuppressErrors suppressErrors(this);
 
   bool parsedOK;
 
   if (propID == eCSSPropertyExtra_variable) {
-    MOZ_ASSERT(Substring(aProperty,
-                         0, VAR_PREFIX_LENGTH).EqualsLiteral("var-"));
+    MOZ_ASSERT(Substring(aProperty, 0,
+                         CSS_CUSTOM_NAME_PREFIX_LENGTH).EqualsLiteral("--"));
     const nsDependentSubstring varName =
-      Substring(aProperty, VAR_PREFIX_LENGTH);  // remove 'var-'
+      Substring(aProperty, CSS_CUSTOM_NAME_PREFIX_LENGTH);  // remove '--'
     CSSVariableDeclarations::Type variableType;
     nsString variableValue;
     parsedOK = ParseVariableDeclaration(&variableType, variableValue) &&
                !GetToken(true);
   } else {
     parsedOK = ParseProperty(propID) && !GetToken(true);
 
     mTempData.ClearProperty(propID);
@@ -2024,26 +2021,35 @@ CSSParserImpl::ResolveValueWithVariableR
           mScanner->StopRecording(recording);
           recording.Truncate(lengthBeforeVar);
           AppendTokens(value, valueFirstToken, valueLastToken,
                        recFirstToken, recLastToken, recording);
           recFirstToken = eCSSTokenSerialization_Nothing;
           recLastToken = eCSSTokenSerialization_Nothing;
 
           if (!GetToken(true) ||
-              mToken.mType != eCSSToken_Ident) {
-            // "var(" must be followed by an identifier.
+              mToken.mType != eCSSToken_Ident ||
+              !nsCSSProps::IsCustomPropertyName(mToken.mIdent)) {
+            // "var(" must be followed by an identifier, and it must be a
+            // custom property name.
             return false;
           }
 
+          // Turn the custom property name into a variable name by removing the
+          // '--' prefix.
+          MOZ_ASSERT(Substring(mToken.mIdent, 0,
+                               CSS_CUSTOM_NAME_PREFIX_LENGTH).
+                       EqualsLiteral("--"));
+          nsDependentString variableName(mToken.mIdent,
+                                         CSS_CUSTOM_NAME_PREFIX_LENGTH);
+
           // Get the value of the identified variable.  Note that we
           // check if the variable value is the empty string, as that means
           // that the variable was invalid at computed value time due to
           // unresolveable variable references or cycles.
-          const nsString& variableName = mToken.mIdent;
           nsString variableValue;
           nsCSSTokenSerializationType varFirstToken, varLastToken;
           bool valid = aVariables->Get(variableName, variableValue,
                                        varFirstToken, varLastToken) &&
                        !variableValue.IsEmpty();
 
           if (!GetToken(true) ||
               mToken.IsSymbol(')')) {
@@ -5924,19 +5930,20 @@ CSSParserImpl::ParseDeclaration(css::Dec
     if (!customProperty) {
       mTempData.ClearProperty(propID);
     }
     mTempData.AssertInitialState();
     return false;
   }
 
   if (customProperty) {
-    MOZ_ASSERT(Substring(propertyName,
-                         0, VAR_PREFIX_LENGTH).EqualsLiteral("var-"));
-    nsDependentString varName(propertyName, VAR_PREFIX_LENGTH); // remove 'var-'
+    MOZ_ASSERT(Substring(propertyName, 0,
+                         CSS_CUSTOM_NAME_PREFIX_LENGTH).EqualsLiteral("--"));
+    // remove '--'
+    nsDependentString varName(propertyName, CSS_CUSTOM_NAME_PREFIX_LENGTH);
     aDeclaration->AddVariableDeclaration(varName, variableType, variableValue,
                                          status == ePriority_Important, false);
   } else {
     *aChanged |= mData.TransferFromBlock(mTempData, propID,
                                          status == ePriority_Important,
                                          false, aMustCallValueAppended,
                                          aDeclaration);
   }
@@ -13818,22 +13825,22 @@ CSSParserImpl::ParseValueWithVariables(C
   //   * has unbalanced parens, brackets or braces
   //   * has any BAD_STRING or BAD_URL tokens
   //   * has any ';' or '!' tokens at the top level of a variable reference's
   //     fallback
   //
   // If the property is a custom property (i.e. a variable declaration), then
   // it is also invalid if it consists of no tokens, such as:
   //
-  //   var-invalid:;
+  //   --invalid:;
   //
   // Note that is valid for a custom property to have a value that consists
   // solely of white space, such as:
   //
-  //   var-valid: ;
+  //   --valid: ;
 
   // Stack of closing characters for currently open constructs.
   StopSymbolCharStack stack;
 
   // Indexes into ')' characters in |stack| that correspond to "var(".  This
   // is used to stop parsing when we encounter a '!' or ';' at the top level
   // of a variable reference's fallback.
   nsAutoTArray<uint32_t, 16> references;
@@ -13954,26 +13961,34 @@ CSSParserImpl::ParseValueWithVariables(C
 
       case eCSSToken_Function:
         if (mToken.mIdent.LowerCaseEqualsLiteral("var")) {
           if (!GetToken(true)) {
             // EOF directly after "var(".
             REPORT_UNEXPECTED_EOF(PEExpectedVariableNameEOF);
             return false;
           }
-          if (mToken.mType != eCSSToken_Ident) {
-            // There must be an identifier directly after the "var(".
+          if (mToken.mType != eCSSToken_Ident ||
+              !nsCSSProps::IsCustomPropertyName(mToken.mIdent)) {
+            // There must be an identifier directly after the "var(" and
+            // it must be a custom property name.
             UngetToken();
             REPORT_UNEXPECTED_TOKEN(PEExpectedVariableName);
             SkipUntil(')');
             SkipUntilAllOf(stack);
             return false;
           }
           if (aFunc) {
-            aFunc(mToken.mIdent, aData);
+            MOZ_ASSERT(Substring(mToken.mIdent, 0,
+                                 CSS_CUSTOM_NAME_PREFIX_LENGTH).
+                         EqualsLiteral("--"));
+            // remove '--'
+            const nsDependentSubstring varName =
+              Substring(mToken.mIdent, CSS_CUSTOM_NAME_PREFIX_LENGTH);
+            aFunc(varName, aData);
           }
           if (!GetToken(true)) {
             // EOF right after "var(<ident>".
             stack.AppendElement(')');
           } else if (mToken.IsSymbol(',')) {
             // Variable reference with fallback.
             if (!GetToken(false) || mToken.IsSymbol(')')) {
               // Comma must be followed by at least one fallback token.
--- a/layout/style/nsCSSProperty.h
+++ b/layout/style/nsCSSProperty.h
@@ -53,17 +53,17 @@ enum nsCSSProperty {
   // property.
   eCSSPropertyExtra_no_properties,
   eCSSPropertyExtra_all_properties,
 
   // Extra dummy values for nsCSSParser internal use.
   eCSSPropertyExtra_x_none_value,
   eCSSPropertyExtra_x_auto_value,
 
-  // Extra value to represent custom properties (var-*).
+  // Extra value to represent custom properties (--*).
   eCSSPropertyExtra_variable
 };
 
 // The "descriptors" that can appear in a @font-face rule.
 // They have the syntax of properties but different value rules.
 enum nsCSSFontDesc {
   eCSSFontDesc_UNKNOWN = -1,
 #define CSS_FONT_DESC(name_, method_) eCSSFontDesc_##method_,
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -343,41 +343,38 @@ nsCSSProps::ReleaseTable(void)
     delete gFontDescTable;
     gFontDescTable = nullptr;
 
     delete [] gShorthandsContainingPool;
     gShorthandsContainingPool = nullptr;
   }
 }
 
-// Length of the "var-" custom property name prefix.
-#define VAR_PREFIX_LENGTH 4
-
 /* static */ bool
 nsCSSProps::IsInherited(nsCSSProperty aProperty)
 {
   MOZ_ASSERT(!IsShorthand(aProperty));
 
   nsStyleStructID sid = kSIDTable[aProperty];
   return nsCachedStyleData::IsInherited(sid);
 }
 
 /* static */ bool
 nsCSSProps::IsCustomPropertyName(const nsACString& aProperty)
 {
-  // Custom properties must have at least one character after the "var-" prefix.
-  return aProperty.Length() >= (VAR_PREFIX_LENGTH + 1) &&
-         StringBeginsWith(aProperty, NS_LITERAL_CSTRING("var-"));
+  // Custom properties don't need to have a character after the "--" prefix.
+  return aProperty.Length() >= CSS_CUSTOM_NAME_PREFIX_LENGTH &&
+         StringBeginsWith(aProperty, NS_LITERAL_CSTRING("--"));
 }
 
 /* static */ bool
 nsCSSProps::IsCustomPropertyName(const nsAString& aProperty)
 {
-  return aProperty.Length() >= (VAR_PREFIX_LENGTH + 1) &&
-         StringBeginsWith(aProperty, NS_LITERAL_STRING("var-"));
+  return aProperty.Length() >= CSS_CUSTOM_NAME_PREFIX_LENGTH &&
+         StringBeginsWith(aProperty, NS_LITERAL_STRING("--"));
 }
 
 nsCSSProperty
 nsCSSProps::LookupProperty(const nsACString& aProperty,
                            EnabledState aEnabled)
 {
   NS_ABORT_IF_FALSE(gPropertyTable, "no lookup table, needs addref");
 
--- a/layout/style/nsCSSProps.h
+++ b/layout/style/nsCSSProps.h
@@ -11,16 +11,20 @@
 #ifndef nsCSSProps_h___
 #define nsCSSProps_h___
 
 #include "nsString.h"
 #include "nsCSSProperty.h"
 #include "nsStyleStructFwd.h"
 #include "nsCSSKeywords.h"
 
+// Length of the "--" prefix on custom names (such as custom property names,
+// and, in the future, custom media query names).
+#define CSS_CUSTOM_NAME_PREFIX_LENGTH 2
+
 // Flags for ParseVariant method
 #define VARIANT_KEYWORD         0x000001  // K
 #define VARIANT_LENGTH          0x000002  // L
 #define VARIANT_PERCENT         0x000004  // P
 #define VARIANT_COLOR           0x000008  // C eCSSUnit_*Color, eCSSUnit_Ident (e.g.  "red")
 #define VARIANT_URL             0x000010  // U
 #define VARIANT_NUMBER          0x000020  // N
 #define VARIANT_INTEGER         0x000040  // I
@@ -284,18 +288,17 @@ public:
   // Looks up the property with name aProperty and returns its corresponding
   // nsCSSProperty value.  If aProperty is the name of a custom property,
   // then eCSSPropertyExtra_variable will be returned.
   static nsCSSProperty LookupProperty(const nsAString& aProperty,
                                       EnabledState aEnabled);
   static nsCSSProperty LookupProperty(const nsACString& aProperty,
                                       EnabledState aEnabled);
   // Returns whether aProperty is a custom property name, i.e. begins with
-  // "var-" and has at least one more character.  This assumes that
-  // the CSS Variables pref has been enabled.
+  // "--".  This assumes that the CSS Variables pref has been enabled.
   static bool IsCustomPropertyName(const nsAString& aProperty);
   static bool IsCustomPropertyName(const nsACString& aProperty);
 
   static inline bool IsShorthand(nsCSSProperty aProperty) {
     NS_ABORT_IF_FALSE(0 <= aProperty && aProperty < eCSSProperty_COUNT,
                  "out of range");
     return (aProperty >= eCSSProperty_COUNT_no_shorthands);
   }
--- a/layout/style/nsCSSScanner.cpp
+++ b/layout/style/nsCSSScanner.cpp
@@ -1272,17 +1272,17 @@ nsCSSScanner::Next(nsCSSToken& aToken, b
     }
   }
 
   // '-' can start an identifier-family token, a number-family token,
   // or an HTML-comment
   if (ch == '-') {
     int32_t c2 = Peek(1);
     int32_t c3 = Peek(2);
-    if (IsIdentStart(c2)) {
+    if (IsIdentStart(c2) || (c2 == '-' && c3 != '>')) {
       return ScanIdent(aToken);
     }
     if (IsDigit(c2) || (c2 == '.' && IsDigit(c3))) {
       return ScanNumber(aToken);
     }
     if (c2 == '-' && c3 == '>') {
       Advance(3);
       aToken.mType = eCSSToken_HTMLComment;
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -5591,17 +5591,18 @@ MarkComputedStyleMapDirty(const char* aP
 CSSValue*
 nsComputedDOMStyle::DoGetCustomProperty(const nsAString& aPropertyName)
 {
   MOZ_ASSERT(nsCSSProps::IsCustomPropertyName(aPropertyName));
 
   const nsStyleVariables* variables = StyleVariables();
 
   nsString variableValue;
-  const nsAString& name = Substring(aPropertyName, 4);
+  const nsAString& name = Substring(aPropertyName,
+                                    CSS_CUSTOM_NAME_PREFIX_LENGTH);
   if (!variables->mVariables.Get(name, variableValue)) {
     return nullptr;
   }
 
   nsROCSSPrimitiveValue* val = new nsROCSSPrimitiveValue;
   val->SetString(variableValue);
 
   return val;
--- a/layout/style/nsDOMCSSDeclaration.cpp
+++ b/layout/style/nsDOMCSSDeclaration.cpp
@@ -49,33 +49,31 @@ nsDOMCSSDeclaration::GetPropertyValue(co
 
   aValue.Truncate();
   if (decl) {
     decl->GetValue(aPropID, aValue);
   }
   return NS_OK;
 }
 
-// Length of the "var-" prefix of custom property names.
-#define VAR_PREFIX_LENGTH 4
-
 void
 nsDOMCSSDeclaration::GetCustomPropertyValue(const nsAString& aPropertyName,
                                             nsAString& aValue)
 {
-  MOZ_ASSERT(Substring(aPropertyName,
-                       0, VAR_PREFIX_LENGTH).EqualsLiteral("var-"));
+  MOZ_ASSERT(Substring(aPropertyName, 0,
+                       CSS_CUSTOM_NAME_PREFIX_LENGTH).EqualsLiteral("--"));
 
   css::Declaration* decl = GetCSSDeclaration(false);
   if (!decl) {
     aValue.Truncate();
     return;
   }
 
-  decl->GetVariableDeclaration(Substring(aPropertyName, VAR_PREFIX_LENGTH),
+  decl->GetVariableDeclaration(Substring(aPropertyName,
+                                         CSS_CUSTOM_NAME_PREFIX_LENGTH),
                                aValue);
 }
 
 NS_IMETHODIMP
 nsDOMCSSDeclaration::SetPropertyValue(const nsCSSProperty aPropID,
                                       const nsAString& aValue)
 {
   if (aValue.IsEmpty()) {
@@ -369,21 +367,22 @@ nsDOMCSSDeclaration::ParseCustomProperty
   // need to start the update now so that the old rule doesn't get used
   // between when we mutate the declaration and when we set the new
   // rule (see stack in bug 209575).
   mozAutoDocConditionalContentUpdateBatch autoUpdate(DocToUpdate(), true);
   css::Declaration* decl = olddecl->EnsureMutable();
 
   nsCSSParser cssParser(env.mCSSLoader);
   bool changed;
-  nsresult result = cssParser.ParseVariable(Substring(aPropertyName,
-                                                      VAR_PREFIX_LENGTH),
-                                            aPropValue, env.mSheetURI,
-                                            env.mBaseURI, env.mPrincipal, decl,
-                                            &changed, aIsImportant);
+  nsresult result =
+    cssParser.ParseVariable(Substring(aPropertyName,
+                                      CSS_CUSTOM_NAME_PREFIX_LENGTH),
+                            aPropValue, env.mSheetURI,
+                            env.mBaseURI, env.mPrincipal, decl,
+                            &changed, aIsImportant);
   if (NS_FAILED(result) || !changed) {
     if (decl != olddecl) {
       delete decl;
     }
     return result;
   }
 
   return SetCSSDeclaration(decl);
@@ -407,33 +406,34 @@ nsDOMCSSDeclaration::RemoveProperty(cons
   decl = decl->EnsureMutable();
   decl->RemoveProperty(aPropID);
   return SetCSSDeclaration(decl);
 }
 
 nsresult
 nsDOMCSSDeclaration::RemoveCustomProperty(const nsAString& aPropertyName)
 {
-  MOZ_ASSERT(Substring(aPropertyName,
-                       0, VAR_PREFIX_LENGTH).EqualsLiteral("var-"));
+  MOZ_ASSERT(Substring(aPropertyName, 0,
+                       CSS_CUSTOM_NAME_PREFIX_LENGTH).EqualsLiteral("--"));
 
   css::Declaration* decl = GetCSSDeclaration(false);
   if (!decl) {
     return NS_OK; // no decl, so nothing to remove
   }
 
   // For nsDOMCSSAttributeDeclaration, SetCSSDeclaration will lead to
   // Attribute setting code, which leads in turn to BeginUpdate.  We
   // need to start the update now so that the old rule doesn't get used
   // between when we mutate the declaration and when we set the new
   // rule (see stack in bug 209575).
   mozAutoDocConditionalContentUpdateBatch autoUpdate(DocToUpdate(), true);
 
   decl = decl->EnsureMutable();
-  decl->RemoveVariableDeclaration(Substring(aPropertyName, VAR_PREFIX_LENGTH));
+  decl->RemoveVariableDeclaration(Substring(aPropertyName,
+                                            CSS_CUSTOM_NAME_PREFIX_LENGTH));
   return SetCSSDeclaration(decl);
 }
 
 bool IsCSSPropertyExposedToJS(nsCSSProperty aProperty, JSContext* cx, JSObject* obj)
 {
   nsCSSProps::EnabledState enabledState = nsCSSProps::eEnabledForAllContent;
 
   // Optimization: we skip checking properties of the JSContext
--- a/layout/style/test/chrome/test_author_specified_style.html
+++ b/layout/style/test/chrome/test_author_specified_style.html
@@ -35,18 +35,18 @@ function runTest() {
       var value = values[i];
       var expected = values[i + 1];
       span.setAttribute("style", propertyName + ": " + value);
       is(span.style.getAuthoredPropertyValue(propertyName), expectedPrefix + expected, "specified " + value);
     }
   }
 
   // also test a custom property
-  span.setAttribute("style", "var-color: rgb(10%,25%,99%)");
-  is(span.style.getAuthoredPropertyValue("var-color"), " rgb(10%,25%,99%)", "specified var-color");
+  span.setAttribute("style", "--color: rgb(10%,25%,99%)");
+  is(span.style.getAuthoredPropertyValue("--color"), " rgb(10%,25%,99%)", "specified --color");
 
   SimpleTest.finish();
 }
 
 SimpleTest.waitForExplicitFinish();
 SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true]] },
                           runTest);
 </script>
--- a/layout/style/test/support/external-variable-url.css
+++ b/layout/style/test/support/external-variable-url.css
@@ -1,3 +1,3 @@
 div {
-  var-a: url('image.png');
+  --a: url('image.png');
 }
--- a/layout/style/test/test_css_supports_variables.html
+++ b/layout/style/test/test_css_supports_variables.html
@@ -17,204 +17,212 @@ https://bugzilla.mozilla.org/show_bug.cg
 <pre id="test">
 <script type="application/javascript">
 
 /** Test for Bug 773296 **/
 
 function runTest()
 {
   var passingConditions = [
-    "(color:var(a))",
-    "(color: var(a))",
-    "(color: var(a) )",
-    "(color: var( a ) )",
-    "(color: var(a, ))",
-    "(color: var(a,/**/a))",
-    "(color: 1px var(a))",
-    "(color: var(a) 1px)",
-    "(color: something 3px url(whereever) calc(var(a) + 1px))",
-    "(color: var(a) !important)",
-    "(color: var(a)var(b))",
-    "(color: var(a, var(b, var(c, black))))",
-    "(color: var(a) <!--)",
-    "(color: --> var(a))",
-    "(color: { [ var(a) ] })",
-    "(color: [;] var(a))",
-    "(color: var(a,(;)))",
-    "(color: VAR(a))",
-    "(color: var(\\30))",
-    "(color: var(\\d800))",
-    "(color: var(\\ffffff))",
-    "(color: var(a",
-    "(color: var(a , ",
-    "(color: var(a, ",
-    "(color: var(a, var(b",
-    "(color: var(a /* unclosed comment",
-    "(color: var(a, '",
-    "(color: var(a, '\\",
-    "(color: var(a, \\",
+    "(color:var(--a))",
+    "(color: var(--a))",
+    "(color: var(--a) )",
+    "(color: var( --a ) )",
+    "(color: var(--a, ))",
+    "(color: var(--))",
+    "(color: var(--a,/**/a))",
+    "(color: 1px var(--a))",
+    "(color: var(--a) 1px)",
+    "(color: something 3px url(whereever) calc(var(--a) + 1px))",
+    "(color: var(--a) !important)",
+    "(color: var(--a)var(--b))",
+    "(color: var(--a, var(--b, var(--c, black))))",
+    "(color: var(--a) <!--)",
+    "(color: --> var(--a))",
+    "(color: { [ var(--a) ] })",
+    "(color: [;] var(--a))",
+    "(color: var(--a,(;)))",
+    "(color: VAR(--a))",
+    "(color: var(--0))",
+    "(color: var(--\\30))",
+    "(color: var(--\\d800))",
+    "(color: var(--\\ffffff))",
+    "(color: var(--",
+    "(color: var(--a",
+    "(color: var(--a , ",
+    "(color: var(--a, ",
+    "(color: var(--a, var(--b",
+    "(color: var(--a /* unclosed comment",
+    "(color: var(--a, '",
+    "(color: var(--a, '\\",
+    "(color: var(--a, \\",
 
-    "(var-a:var(b))",
-    "(var-a: var(b))",
-    "(var-a: var(b) )",
-    "(var-a: var( b ) )",
-    "(var-a: var(b, ))",
-    "(var-a: var(b,/**/a))",
-    "(var-a: 1px var(b))",
-    "(var-a: var(b) 1px)",
-    "(var-a: something 3px url(whereever) calc(var(b) + 1px))",
-    "(var-a: var(b) !important)",
-    "(var-a: var(b)var(b))",
-    "(var-a: var(b, var(c, var(d, black))))",
-    "(var-a: var(b) <!--)",
-    "(var-a: --> var(b))",
-    "(var-a: { [ var(b) ] })",
-    "(var-a: [;] var(b))",
-    "(var-a: )",
-    "(var-a:var(a))",
-    "(var-0: a)",
-    "(var-\\61: a)",
-    "(var-\\d800: a)",
-    "(var-\\ffffff: a)",
-    "(var-\0: 1)",
-    "(var-a: ",
-    "(var-a: /* unclosed comment",
-    "(var-a: var(b",
-    "(var-a: var(b, ",
-    "(var-a: var(b, var(c",
-    "(var-a: [{(((",
-    "(var-a: '",
-    "(var-a: '\\",
-    "(var-a: \\",
+    "(--a:var(--b))",
+    "(--a: var(--b))",
+    "(--a: var(--b) )",
+    "(--a: var( --b ) )",
+    "(--a: var(--b, ))",
+    "(--a: var(--b,/**/a))",
+    "(--a: 1px var(--b))",
+    "(--a: var(--b) 1px)",
+    "(--a: something 3px url(whereever) calc(var(--b) + 1px))",
+    "(--a: var(--b) !important)",
+    "(--a: var(--b)var(--b))",
+    "(--a: var(--b, var(--c, var(--d, black))))",
+    "(--a: var(--b) <!--)",
+    "(--a: --> var(--b))",
+    "(--a: { [ var(--b) ] })",
+    "(--a: [;] var(--b))",
+    "(--a: )",
+    "(--a:var(--a))",
+    "(--0: a)",
+    "(--\\30: a)",
+    "(--\\61: a)",
+    "(--\\d800: a)",
+    "(--\\ffffff: a)",
+    "(--\0: 1)",
+    "(--a: ",
+    "(--a: /* unclosed comment",
+    "(--a: var(--b",
+    "(--a: var(--b, ",
+    "(--a: var(--b, var(--c",
+    "(--a: [{(((",
+    "(--a: '",
+    "(--a: '\\",
+    "(--a: \\",
+    "(--: a)",
   ];
 
   var failingConditions = [
-    "(color: var(a,))",
-    "(color: var(a,/**/))",
-    "(color: var(a,!))",
-    "(color: var(a,!important))",
-    "(color: var(a) !important !important)",
-    "(color: var(a,;))",
-    "(color: var(a);)",
-    "(color: var(0))",
+    "(color: var(--a,))",
+    "(color: var(--a,/**/))",
+    "(color: var(--a,!))",
+    "(color: var(--a,!important))",
+    "(color: var(--a) !important !important)",
+    "(color: var(--a,;))",
+    "(color: var(--a);)",
     "(color: var(1px))",
-    "(color: var(a)))",
-    "(color: var(a) \"\n",
-    "(color: var(a) url(\"\n",
+    "(color: var(--a)))",
+    "(color: var(--a) \"\n",
+    "(color: var(--a) url(\"\n",
+    "(color: var(a))",
 
-    "(var-a: var(b,))",
-    "(var-a: var(b,/**/))",
-    "(var-a: var(b,!))",
-    "(var-a: var(b,!important))",
-    "((var-a: var(b) !important !important))",
-    "(var-a: var(b,;))",
-    "(var-a: var(b);)",
-    "(var-a:)",
-    "(var-: a)",
-    "(var-a: var(1px))",
-    "(VAR-a: a)",
-    "(var-a: a))",
-    "(var-a: \"\n",
-    "(var-a: url(\"\n",
+    "(--a: var(--b,))",
+    "(--a: var(--b,/**/))",
+    "(--a: var(--b,!))",
+    "(--a: var(--b,!important))",
+    "((--a: var(--b) !important !important))",
+    "(--a: var(--b,;))",
+    "(--a: var(--b);)",
+    "(--a:)",
+    "(--a: var(1px))",
+    "(--a: a))",
+    "(--a: \"\n",
+    "(--a: url(\"\n",
+    "(--a: var(a))",
   ];
 
   var passingDeclarations = [
-    ["color", "var(a)"],
-    ["color", " var(a)"],
-    ["color", "var(a) "],
-    ["color", "var( a ) "],
-    ["color", "var(a, )"],
-    ["color", "var(a,/**/a)"],
-    ["color", "1px var(a)"],
-    ["color", "var(a) 1px"],
-    ["color", "something 3px url(whereever) calc(var(a) + 1px)"],
-    ["color", "var(a)var(b)"],
-    ["color", "var(a, var(b, var(c, black)))"],
-    ["color", "var(a) <!--"],
-    ["color", "--> var(a)"],
-    ["color", "{ [ var(a) ] }"],
-    ["color", "[;] var(a)"],
-    ["color", "var(a,(;))"],
-    ["color", "VAR(a)"],
-    ["color", "var(\\30)"],
-    ["color", "var(\\d800)"],
-    ["color", "var(\\ffffff)"],
-    ["color", "var(a"],
-    ["color", "var(a , "],
-    ["color", "var(a, "],
-    ["color", "var(a, var(b"],
-    ["color", "var(a /* unclosed comment"],
-    ["color", "var(a, '"],
-    ["color", "var(a, '\\"],
-    ["color", "var(a, \\"],
+    ["color", "var(--a)"],
+    ["color", " var(--a)"],
+    ["color", "var(--a) "],
+    ["color", "var( --a ) "],
+    ["color", "var(--a, )"],
+    ["color", "var(--a,/**/a)"],
+    ["color", "1px var(--a)"],
+    ["color", "var(--a) 1px"],
+    ["color", "something 3px url(whereever) calc(var(--a) + 1px)"],
+    ["color", "var(--a)var(--b)"],
+    ["color", "var(--a, var(--b, var(--c, black)))"],
+    ["color", "var(--a) <!--"],
+    ["color", "--> var(--a)"],
+    ["color", "{ [ var(--a) ] }"],
+    ["color", "[;] var(--a)"],
+    ["color", "var(--a,(;))"],
+    ["color", "VAR(--a)"],
+    ["color", "var(--0)"],
+    ["color", "var(--\\30)"],
+    ["color", "var(--\\d800)"],
+    ["color", "var(--\\ffffff)"],
+    ["color", "var(--a"],
+    ["color", "var(--a , "],
+    ["color", "var(--a, "],
+    ["color", "var(--a, var(--b"],
+    ["color", "var(--a /* unclosed comment"],
+    ["color", "var(--a, '"],
+    ["color", "var(--a, '\\"],
+    ["color", "var(--a, \\"],
+    ["color", "var(--"],
 
-    ["var-a", " var(b)"],
-    ["var-a", "var(b)"],
-    ["var-a", "var(b) "],
-    ["var-a", "var( b ) "],
-    ["var-a", "var(b, )"],
-    ["var-a", "var(b,/**/a)"],
-    ["var-a", "1px var(b)"],
-    ["var-a", "var(b) 1px"],
-    ["var-a", "something 3px url(whereever) calc(var(b) + 1px)"],
-    ["var-a", "var(b)var(b)"],
-    ["var-a", "var(b, var(c, var(d, black)))"],
-    ["var-a", "var(b) <!--"],
-    ["var-a", "--> var(b)"],
-    ["var-a", "{ [ var(b) ] }"],
-    ["var-a", "[;] var(b)"],
-    ["var-a", " "],
-    ["var-a", "var(a)"],
-    ["var-0", "a"],
-    ["var-\\61", "a"],
-    ["var-\\d800", "a"],
-    ["var-\\ffffff", "a"],
-    ["var-\0", "a"],
-    ["var-\ud800", "a"],
-    ["var-a", "a /* unclosed comment"],
-    ["var-a", "var(b"],
-    ["var-a", "var(b, "],
-    ["var-a", "var(b, var(c"],
-    ["var-a", "[{((("],
-    ["var-a ", "a"],
-    ["var-a ", "'"],
-    ["var-a ", "'\\"],
-    ["var-a ", "\\"],
+    ["--a", " var(--b)"],
+    ["--a", "var(--b)"],
+    ["--a", "var(--b) "],
+    ["--a", "var( --b ) "],
+    ["--a", "var(--b, )"],
+    ["--a", "var(--b,/**/a)"],
+    ["--a", "1px var(--b)"],
+    ["--a", "var(--b) 1px"],
+    ["--a", "something 3px url(whereever) calc(var(--b) + 1px)"],
+    ["--a", "var(--b)var(--b)"],
+    ["--a", "var(--b, var(--c, var(--d, black)))"],
+    ["--a", "var(--b) <!--"],
+    ["--a", "--> var(--b)"],
+    ["--a", "{ [ var(--b) ] }"],
+    ["--a", "[;] var(--b)"],
+    ["--a", " "],
+    ["--a", "var(--a)"],
+    ["--0", "a"],
+    ["--\\30", "a"],
+    ["--\\61", "a"],
+    ["--\\d800", "a"],
+    ["--\\ffffff", "a"],
+    ["--\0", "a"],
+    ["--\ud800", "a"],
+    ["--a", "a /* unclosed comment"],
+    ["--a", "var(--b"],
+    ["--a", "var(--b, "],
+    ["--a", "var(--b, var(--c"],
+    ["--a", "[{((("],
+    ["--a ", "a"],
+    ["--a ", "'"],
+    ["--a ", "'\\"],
+    ["--a ", "\\"],
+    ["--", "a"],
   ];
 
   var failingDeclarations = [
-    ["color", "var(a,)"],
-    ["color", "var(a,/**/)"],
-    ["color", "var(a,!)"],
-    ["color", "var(a,!important)"],
-    ["color", "var(a,;)"],
-    ["color", "var(a);"],
-    ["color", "var(0)"],
+    ["color", "var(--a,)"],
+    ["color", "var(--a,/**/)"],
+    ["color", "var(--a,!)"],
+    ["color", "var(--a,!important)"],
+    ["color", "var(--a,;)"],
+    ["color", "var(--a);"],
     ["color", "var(1px)"],
-    ["color", "var(a))"],
-    ["color", "var(a) \"\n"],
-    ["color", "var(a) url(\"\n"],
-    ["color", "var(a) !important"],
-    ["color", "var(a) !important !important"],
+    ["color", "var(--a))"],
+    ["color", "var(--a) \"\n"],
+    ["color", "var(--a) url(\"\n"],
+    ["color", "var(--a) !important"],
+    ["color", "var(--a) !important !important"],
+    ["color", "var(a)"],
 
-    ["var-a", "var(b,)"],
-    ["var-a", "var(b,/**/)"],
-    ["var-a", "var(b,!)"],
-    ["var-a", "var(b,!important)"],
-    ["var-a", "var(b) !important !important"],
-    ["var-a", "var(b,;)"],
-    ["var-a", "var(b);"],
-    ["var-a", ""],
-    ["var-", "a"],
-    ["var-a", "var(1px)"],
+    ["--a", "var(--b,)"],
+    ["--a", "var(--b,/**/)"],
+    ["--a", "var(--b,!)"],
+    ["--a", "var(--b,!important)"],
+    ["--a", "var(--b) !important !important"],
+    ["--a", "var(--b,;)"],
+    ["--a", "var(--b);"],
+    ["--a", ""],
+    ["--a", "var(1px)"],
     ["(VAR-a", "a"],
-    ["var-a", "a)"],
-    ["var-a", "\"\n"],
-    ["var-a", "url(\"\n"],
-    ["var-a", "var(b))"],
+    ["--a", "a)"],
+    ["--a", "\"\n"],
+    ["--a", "url(\"\n"],
+    ["--a", "var(--b))"],
+    ["--a", "var(b)"],
   ];
 
   passingConditions.forEach(function(aCondition) {
     is(CSS.supports(aCondition), true, "CSS.supports returns true for passing condition \"" + aCondition + "\"");
   });
 
   failingConditions.forEach(function(aCondition) {
     is(CSS.supports(aCondition), false, "CSS.supports returns false for failing condition \"" + aCondition + "\"");
--- a/layout/style/test/test_parse_rule.html
+++ b/layout/style/test/test_parse_rule.html
@@ -31,17 +31,18 @@ var testset = [
 { base : base = "div {color:green}",
   tests : [
 // My misc tests
 "<!--#a {color:green}",
 base + "<!-#a {color:red}",
 base + "#a<!--{color:red}",
 "-->#a{color:green}",
 base + "--#a {color:red}",
-base + "--aasdf, #a {color:red}",
+base + "--aasdf, #a {color:green}",
+base + "-0aasdf, #a {color:red}",
 "-asdf, #a {color:green}",
 base + "#a {color: rgb\n(255, 0, 0)}",
 "#a {font: \"Arial\n;color:green}",
 "#a {color: @charset{}\"\\\n'\"url(\na\na); color:green}",
 "#a\r{color:green}",
 "#a\n{color:green}",
 "#a\t{color:green}",
 "@threedee maroon url('asdf\n) ra('asdf\n); " + base,
--- a/layout/style/test/test_value_storage.html
+++ b/layout/style/test/test_value_storage.html
@@ -252,19 +252,19 @@ function test_property(property)
     gDeclaration.removeProperty(property);
   }
 
   function test_value_without_variable(value) {
     test_value(value, null);
   }
 
   function test_value_with_variable(value) {
-    gPrereqDeclaration.setProperty("var-a", value, "");
-    test_value("var(a)", value);
-    gPrereqDeclaration.removeProperty("var-a");
+    gPrereqDeclaration.setProperty("--a", value, "");
+    test_value("var(--a)", value);
+    gPrereqDeclaration.removeProperty("--a");
   }
 
   if ("prerequisites" in info) {
     var prereqs = info.prerequisites;
     for (var prereq in prereqs) {
       gPrereqDeclaration.setProperty(prereq, prereqs[prereq], "");
     }
   }
--- a/layout/style/test/test_variable_serialization_computed.html
+++ b/layout/style/test/test_variable_serialization_computed.html
@@ -7,61 +7,61 @@
 <div>
   <span></span>
 </div>
 
 <script>
 // Each entry is an entire declaration followed by the property to check and
 // its expected computed value.
 var values = [
-  ["", "var-z", "an-inherited-value"],
-  ["var-a: ", "var-a", " "],
-  ["var-a: initial", "var-a", ""],
-  ["var-z: initial", "var-z", ""],
-  ["var-a: inherit", "var-a", ""],
-  ["var-z: inherit", "var-z", "an-inherited-value"],
-  ["var-a: unset", "var-a", ""],
-  ["var-z: unset", "var-z", "an-inherited-value"],
-  ["var-a: 1px", "var-a", " 1px"],
-  ["var-a: var(a)", "var-a", ""],
-  ["var-a: var(b)", "var-a", ""],
-  ["var-a: var(b); var-b: 1px", "var-a", "  1px"],
-  ["var-a: var(b, 1px)", "var-a", "  1px"],
-  ["var-a: var(a, 1px)", "var-a", ""],
-  ["var-a: something 3px url(whereever) calc(var(a) + 1px)", "var-a", ""],
-  ["var-a: something 3px url(whereever) calc(var(b,1em) + 1px)", "var-a", " something 3px url(whereever) calc(1em + 1px)"],
-  ["var-a: var(b, var(c, var(d, Black)))", "var-a", "    Black"],
-  ["var-a: a var(b) c; var-b:b", "var-a", " a b c"],
-  ["var-a: a var(b,b var(c) d) e; var-c:c", "var-a", " a b c d e"],
-  ["var-a: var(b)red; var-b:orange;", "var-a", " orange/**/red"],
-  ["var-a: var(b)var(c); var-b:orange; var-c:red;", "var-a", " orange/**/red"],
-  ["var-a: var(b)var(c,red); var-b:orange;", "var-a", " orange/**/red"],
-  ["var-a: var(b,orange)var(c); var-c:red;", "var-a", " orange/**/red"],
-  ["counter-reset: var(a)red; var-a:orange;", "counter-reset", "orange 0 red 0"],
-  ["var-a: var(b)var(c); var-c:[c]; var-b:('ab", "var-a", " ('ab')[c]"],
-  ["var-a: '", "var-a", " ''"],
-  ["var-a: '\\", "var-a", " ''"],
-  ["var-a: \\", "var-a", " \\\ufffd"],
-  ["var-a: \"", "var-a", " \"\""],
-  ["var-a: \"\\", "var-a", " \"\""],
-  ["var-a: /* abc ", "var-a", " /* abc */"],
-  ["var-a: /* abc *", "var-a", " /* abc */"],
-  ["var-a: url(http://example.org/", "var-a", " url(http://example.org/)"],
-  ["var-a: url(http://example.org/\\", "var-a", " url(http://example.org/\\\ufffd)"],
-  ["var-a: url('http://example.org/", "var-a", " url('http://example.org/')"],
-  ["var-a: url('http://example.org/\\", "var-a", " url('http://example.org/')"],
-  ["var-a: url(\"http://example.org/", "var-a", " url(\"http://example.org/\")"],
-  ["var-a: url(\"http://example.org/\\", "var-a", " url(\"http://example.org/\")"]
+  ["", "--z", "an-inherited-value"],
+  ["--a: ", "--a", " "],
+  ["--a: initial", "--a", ""],
+  ["--z: initial", "--z", ""],
+  ["--a: inherit", "--a", ""],
+  ["--z: inherit", "--z", "an-inherited-value"],
+  ["--a: unset", "--a", ""],
+  ["--z: unset", "--z", "an-inherited-value"],
+  ["--a: 1px", "--a", " 1px"],
+  ["--a: var(--a)", "--a", ""],
+  ["--a: var(--b)", "--a", ""],
+  ["--a: var(--b); --b: 1px", "--a", "  1px"],
+  ["--a: var(--b, 1px)", "--a", "  1px"],
+  ["--a: var(--a, 1px)", "--a", ""],
+  ["--a: something 3px url(whereever) calc(var(--a) + 1px)", "--a", ""],
+  ["--a: something 3px url(whereever) calc(var(--b,1em) + 1px)", "--a", " something 3px url(whereever) calc(1em + 1px)"],
+  ["--a: var(--b, var(--c, var(--d, Black)))", "--a", "    Black"],
+  ["--a: a var(--b) c; --b:b", "--a", " a b c"],
+  ["--a: a var(--b,b var(--c) d) e; --c:c", "--a", " a b c d e"],
+  ["--a: var(--b)red; --b:orange;", "--a", " orange/**/red"],
+  ["--a: var(--b)var(--c); --b:orange; --c:red;", "--a", " orange/**/red"],
+  ["--a: var(--b)var(--c,red); --b:orange;", "--a", " orange/**/red"],
+  ["--a: var(--b,orange)var(--c); --c:red;", "--a", " orange/**/red"],
+  ["counter-reset: var(--a)red; --a:orange;", "counter-reset", "orange 0 red 0"],
+  ["--a: var(--b)var(--c); --c:[c]; --b:('ab", "--a", " ('ab')[c]"],
+  ["--a: '", "--a", " ''"],
+  ["--a: '\\", "--a", " ''"],
+  ["--a: \\", "--a", " \\\ufffd"],
+  ["--a: \"", "--a", " \"\""],
+  ["--a: \"\\", "--a", " \"\""],
+  ["--a: /* abc ", "--a", " /* abc */"],
+  ["--a: /* abc *", "--a", " /* abc */"],
+  ["--a: url(http://example.org/", "--a", " url(http://example.org/)"],
+  ["--a: url(http://example.org/\\", "--a", " url(http://example.org/\\\ufffd)"],
+  ["--a: url('http://example.org/", "--a", " url('http://example.org/')"],
+  ["--a: url('http://example.org/\\", "--a", " url('http://example.org/')"],
+  ["--a: url(\"http://example.org/", "--a", " url(\"http://example.org/\")"],
+  ["--a: url(\"http://example.org/\\", "--a", " url(\"http://example.org/\")"]
 ];
 
 function runTest() {
   var div = document.querySelector("div");
   var span = document.querySelector("span");
 
-  div.setAttribute("style", "var-z:an-inherited-value");
+  div.setAttribute("style", "--z:an-inherited-value");
 
   values.forEach(function(entry, i) {
     var declaration = entry[0];
     var property = entry[1];
     var expected = entry[2];
     span.setAttribute("style", declaration);
     var cs = getComputedStyle(span, "");
     is(cs.getPropertyValue(property), expected, "subtest #" + i);
--- a/layout/style/test/test_variable_serialization_specified.html
+++ b/layout/style/test/test_variable_serialization_specified.html
@@ -5,76 +5,77 @@
 <link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">
 
 <style id=style1>#test { }</style>
 <style id=style2></style>
 
 <script>
 // Values that should be serialized back to the same string.
 var values_with_unchanged_specified_value_serialization = [
-  "var(a)",
-  "var(a)",
-  "var(a) ",
-  "var( a ) ",
-  "var(a, )",
-  "var(a,/**/a)",
-  "1px var(a)",
-  "var(a) 1px",
-  "something 3px url(whereever) calc(var(a) + 1px)",
-  "var(a)",
-  "var(a)var(b)",
-  "var(a, var(b, var(c, black)))",
-  "var(a) <!--",
-  "--> var(a)",
-  "{ [ var(a) ] }",
-  "[;] var(a)",
-  "var(a,(;))",
-  "VAR(a)",
-  "var(\\30)",
-  "var(\\d800)",
-  "var(\\ffffff)",
+  "var(--a)",
+  "var(--a)",
+  "var(--a) ",
+  "var( --a ) ",
+  "var(--a, )",
+  "var(--a,/**/a)",
+  "1px var(--a)",
+  "var(--a) 1px",
+  "something 3px url(whereever) calc(var(--a) + 1px)",
+  "var(--a)",
+  "var(--a)var(--b)",
+  "var(--a, var(--b, var(--c, black)))",
+  "var(--a) <!--",
+  "--> var(--a)",
+  "{ [ var(--a) ] }",
+  "[;] var(--a)",
+  "var(--a,(;))",
+  "VAR(--a)",
+  "var(--0)",
+  "var(--\\30)",
+  "var(--\\d800)",
+  "var(--\\ffffff)",
 ];
 
 // Values that serialize differently, due to additional implied closing
 // characters at EOF.
 var values_with_changed_specified_value_serialization = [
-  ["var(a",                       "var(a)"],
-  ["var(a , ",                    "var(a , )"],
-  ["var(a, ",                     "var(a, )"],
-  ["var(a, var(b",                "var(a, var(b))"],
-  ["var(a /* unclosed comment",   "var(a /* unclosed comment*/)"],
-  ["var(a /* unclosed comment *", "var(a /* unclosed comment */)"],
-  ["[{(((var(a",                  "[{(((var(a))))}]"],
-  ["var(a, \"unclosed string",    "var(a, \"unclosed string\")"],
-  ["var(a, 'unclosed string",     "var(a, 'unclosed string')"],
-  ["var(a) \"unclosed string\\",  "var(a) \"unclosed string\""],
-  ["var(a) 'unclosed string\\",   "var(a) 'unclosed string'"],
-  ["var(a) \\",                   "var(a) \\\ufffd"],
-  ["var(a) url(unclosedurl",      "var(a) url(unclosedurl)"],
-  ["var(a) url('unclosedurl",     "var(a) url('unclosedurl')"],
-  ["var(a) url(\"unclosedurl",    "var(a) url(\"unclosedurl\")"],
-  ["var(a) url(unclosedurl\\",    "var(a) url(unclosedurl\\\ufffd)"],
-  ["var(a) url('unclosedurl\\",   "var(a) url('unclosedurl')"],
-  ["var(a) url(\"unclosedurl\\",  "var(a) url(\"unclosedurl\")"],
+  ["var(--a",                       "var(--a)"],
+  ["var(--a , ",                    "var(--a , )"],
+  ["var(--a, ",                     "var(--a, )"],
+  ["var(--a, var(--b",              "var(--a, var(--b))"],
+  ["var(--a /* unclosed comment",   "var(--a /* unclosed comment*/)"],
+  ["var(--a /* unclosed comment *", "var(--a /* unclosed comment */)"],
+  ["[{(((var(--a",                  "[{(((var(--a))))}]"],
+  ["var(--a, \"unclosed string",    "var(--a, \"unclosed string\")"],
+  ["var(--a, 'unclosed string",     "var(--a, 'unclosed string')"],
+  ["var(--a) \"unclosed string\\",  "var(--a) \"unclosed string\""],
+  ["var(--a) 'unclosed string\\",   "var(--a) 'unclosed string'"],
+  ["var(--a) \\",                   "var(--a) \\\ufffd"],
+  ["var(--a) url(unclosedurl",      "var(--a) url(unclosedurl)"],
+  ["var(--a) url('unclosedurl",     "var(--a) url('unclosedurl')"],
+  ["var(--a) url(\"unclosedurl",    "var(--a) url(\"unclosedurl\")"],
+  ["var(--a) url(unclosedurl\\",    "var(--a) url(unclosedurl\\\ufffd)"],
+  ["var(--a) url('unclosedurl\\",   "var(--a) url('unclosedurl')"],
+  ["var(--a) url(\"unclosedurl\\",  "var(--a) url(\"unclosedurl\")"],
 ];
 
 var style1 = document.getElementById("style1");
 var style2 = document.getElementById("style2");
 
 var decl = style1.sheet.cssRules[0].style;
 
 function test_specified_value_serialization(value, expected) {
   // Test setting value on a custom property with setProperty.
-  decl.setProperty("var-test", value, "");
-  is(decl.getPropertyValue("var-test"), expected,
+  decl.setProperty("--test", value, "");
+  is(decl.getPropertyValue("--test"), expected,
      "value with identical serialization set on custom property with setProperty");
 
   // Test setting value on a custom property via style sheet parsing.
-  style2.textContent = "#test { var-test:" + value;
-  is(style2.sheet.cssRules[0].style.getPropertyValue("var-test"), expected,
+  style2.textContent = "#test { --test:" + value;
+  is(style2.sheet.cssRules[0].style.getPropertyValue("--test"), expected,
      "value with identical serialization set on custom property via parsing");
 
   // Test setting value on a non-custom longhand property with setProperty.
   decl.setProperty("color", value, "");
   is(decl.getPropertyValue("color"), expected,
      "value with identical serialization set on non-custom longhand property with setProperty");
 
   // Test setting value on a non-custom longhand property via style sheet parsing.
@@ -88,17 +89,17 @@ function test_specified_value_serializat
      "value with identical serialization set on non-custom shorthand property with setProperty");
 
   // Test setting value on a non-custom shorthand property via style sheet parsing.
   style2.textContent = "#test { margin:" + value;
   is(style2.sheet.cssRules[0].style.getPropertyValue("margin"), expected,
      "value with identical serialization set on non-custom shorthand property via parsing");
 
   // Clean up.
-  decl.removeProperty("var-test");
+  decl.removeProperty("--test");
   decl.removeProperty("color");
   decl.removeProperty("margin");
 }
 
 function runTest() {
   values_with_unchanged_specified_value_serialization.forEach(function(value) {
     test_specified_value_serialization(value, value);
   });
--- a/layout/style/test/test_variables.html
+++ b/layout/style/test/test_variables.html
@@ -18,43 +18,43 @@
 
 <div id="t4"></div>
 
 <script>
 var tests = [
   function() {
     // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
     var test1 = document.getElementById("test1");
-    test1.textContent = "p { var-a:123!important; }";
+    test1.textContent = "p { --a:123!important; }";
     var declaration = test1.sheet.cssRules[0].style;
     declaration.cssText;
     declaration.setProperty("color", "black");
-    is(declaration.getPropertyValue("var-a"), "123");
+    is(declaration.getPropertyValue("--a"), "123");
   },
 
   function() {
     // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
     var test2 = document.getElementById("test2");
-    test2.textContent = "p { var-a: a !important; }";
+    test2.textContent = "p { --a: a !important; }";
     var declaration = test2.sheet.cssRules[0].style;
-    is(declaration.getPropertyPriority("var-a"), "important");
+    is(declaration.getPropertyPriority("--a"), "important");
   },
 
   function() {
     // https://bugzilla.mozilla.org/show_bug.cgi?id=955913
     var test3 = document.getElementById("test3");
-    test3.textContent = "p { border-left-style: inset; padding: 1px; var-decoration: line-through; }";
+    test3.textContent = "p { border-left-style: inset; padding: 1px; --decoration: line-through; }";
     var declaration = test3.sheet.cssRules[0].style;
-    is(declaration[declaration.length - 1], "var-decoration");
+    is(declaration[declaration.length - 1], "--decoration");
   },
 
   function() {
     // https://bugzilla.mozilla.org/show_bug.cgi?id=959973
     var test4 = document.getElementById("test4");
-    test4.textContent = "#t4 { background-image: var(a); }";
+    test4.textContent = "#t4 { background-image: var(--a); }";
 
     var element = document.getElementById("t4");
     var path = window.location.pathname;
     var currentDir = path.substring(0, path.lastIndexOf('/'));
     var imageURL = "http://mochi.test:8888" + currentDir + "/image.png";
 
     is(window.getComputedStyle(element).getPropertyValue("background-image"), "url(\"" + imageURL +"\")");
   },