diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index 9f187275bd7..aa587fcf670 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -281,6 +281,12 @@
         ]
       },
       "testharness": {
+        "css/test_variable_legal_values.html": [
+          {
+            "path": "css/test_variable_legal_values.html",
+            "url": "/_mozilla/css/test_variable_legal_values.html"
+          }
+        ],
         "mozilla/DOMParser.html": [
           {
             "path": "mozilla/DOMParser.html",
diff --git a/tests/wpt/mozilla/tests/css/test_variable_legal_values.html b/tests/wpt/mozilla/tests/css/test_variable_legal_values.html
new file mode 100644
index 00000000000..22826c4d29c
--- /dev/null
+++ b/tests/wpt/mozilla/tests/css/test_variable_legal_values.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html><head>
+  <title>CSS Variables Allowed Syntax</title>
+  <link href="http://dbaron.org/" rel="author" title="L. David Baron">
+  <link href="http://mozilla.com/" rel="author" title="Mozilla Corporation">
+  <link href="http://www.w3.org/TR/css-variables-1/#defining-variables" rel="help">
+  <meta content='The <value> type used in the syntax above is defined as anything matching the "value" production in CSS 2.1 Chapter 4.1 [CSS21].' name="assert">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+<script id="metadata_cache">/*
+{
+  "percentage": { "assert": "Value allowed within variable: percentage" },
+  "number": { "assert": "Value allowed within variable: number" },
+  "length": { "assert": "Value allowed within variable: length" },
+  "time": { "assert": "Value allowed within variable: time" },
+  "function": { "assert": "Value allowed within variable: function" },
+  "nested_function": { "assert": "Value allowed within variable: nested function" },
+  "parentheses": { "assert": "Value allowed within variable: parentheses" },
+  "braces": { "assert": "Value allowed within variable: braces" },
+  "brackets": { "assert": "Value allowed within variable: brackets" },
+  "at_keyword_unknown": { "assert": "Value allowed within variable: at-keyword (unknown)" },
+  "at_keyword_known": { "assert": "Value allowed within variable: at-keyword (known)" },
+  "at_keyword_unknown_and_block": { "assert": "Value allowed within variable: at-keyword (unknown) and block" },
+  "at_keyword_known_and_block": { "assert": "Value allowed within variable: at-keyword (known) and block" },
+  "unbalanced_close_bracket_at_toplevel": { "assert": "Value not allowed within variable: unbalanced close bracket at toplevel" },
+  "unbalanced_close_paren_at_toplevel": { "assert": "Value not allowed within variable: unbalanced close paren at toplevel" },
+  "unbalanced_close_bracket_in_something_balanced": { "assert": "Value not allowed within variable: unbalanced close bracket in something balanced" },
+  "unbalanced_close_paren_in_something_balanced": { "assert": "Value not allowed within variable: unbalanced close paren in something balanced" },
+  "unbalanced_close_brace_in_something_balanced": { "assert": "Value not allowed within variable: unbalanced close brace in something balanced" },
+  "CDO_at_top_level": { "assert": "Value allowed within variable: CDO at top level" },
+  "CDC_at_top_level": { "assert": "Value allowed within variable: CDC at top level" },
+  "semicolon_not_at_top_level_value_unused": { "assert": "Value allowed within variable: semicolon not at top level (value -> unused)" },
+  "CDO_not_at_top_level_value_unused": { "assert": "Value allowed within variable: CDO not at top level (value -> unused)" },
+  "CDC_not_at_top_level_value_unused": { "assert": "Value allowed within variable: CDC not at top level (value -> unused)" }
+}
+*/</script>
+</head>
+<body onload="run()">
+<div id="log"></div>
+<div id="test"></div>
+<script>
+setup({ "explicit_done": true });
+
+function run() {
+  // Setup the iframe
+  var div = document.getElementById("test");
+  var test_cs = window.getComputedStyle(div, "");
+
+  var initial_cs = test_cs.backgroundColor;
+  div.setAttribute("style", "background-color: green");
+  var green_cs = test_cs.backgroundColor;
+  div.setAttribute("style", "background-color: red");
+  var red_cs = test_cs.backgroundColor;
+
+  function description_to_name(description) {
+    return description.replace(/\W+/g, "_").replace(/^_/, "").replace(/_$/, "");
+  }
+
+  function assert_allowed_variable_value(value, description) {
+    test(function() {
+           div.setAttribute("style",
+                            "  --test: red;\n" +
+                            "  --test: " + value + ";\n" +
+                            "  background-color: red;\n" +
+                            "  background-color: var(--test);\n" +
+                            "");
+           assert_not_equals(initial_cs, red_cs);
+           assert_equals(initial_cs, test_cs.backgroundColor);
+         },
+         description_to_name(description),
+         { assert: "Value allowed within variable: " + description });
+  }
+
+  function assert_disallowed_balanced_variable_value(value, description) {
+    test(function() {
+           div.setAttribute("style",
+                            "  --test: green;\n" +
+                            "  --test: " + value + ";\n" +
+                            "  background-color: red;\n" +
+                            "  background-color: var(--test);\n" +
+                            "");
+           assert_not_equals(green_cs, red_cs);
+           assert_equals(green_cs, test_cs.backgroundColor);
+         },
+         description_to_name(description),
+         { assert: "Value not allowed within variable: " + description });
+  }
+
+  assert_allowed_variable_value("25%", "percentage");
+  assert_allowed_variable_value("37", "number");
+  assert_allowed_variable_value("12em", "length");
+  assert_allowed_variable_value("75ms", "time");
+  assert_allowed_variable_value("foo()", "function");
+  assert_allowed_variable_value("foo(bar())", "nested function");
+  assert_allowed_variable_value("( )", "parentheses");
+  assert_allowed_variable_value("{ }", "braces");
+  assert_allowed_variable_value("[ ]", "brackets");
+  assert_allowed_variable_value("@foobar", "at-keyword (unknown)");
+  assert_allowed_variable_value("@media", "at-keyword (known)");
+  assert_allowed_variable_value("@foobar {}", "at-keyword (unknown) and block");
+  assert_allowed_variable_value("@media {}", "at-keyword (known) and block");
+  assert_disallowed_balanced_variable_value("]", "unbalanced close bracket at toplevel");
+  assert_disallowed_balanced_variable_value(")", "unbalanced close paren at toplevel");
+  assert_disallowed_balanced_variable_value("(])", "unbalanced close bracket in something balanced");
+  assert_disallowed_balanced_variable_value("[)]", "unbalanced close paren in something balanced");
+  assert_disallowed_balanced_variable_value("(})", "unbalanced close brace in something balanced");
+  assert_allowed_variable_value("<!--", "CDO at top level");
+  assert_allowed_variable_value("-->", "CDC at top level");
+  assert_allowed_variable_value("(;)", "semicolon not at top level (value -> unused)");
+  assert_allowed_variable_value("(<!--)", "CDO not at top level (value -> unused)");
+  assert_allowed_variable_value("(-->)", "CDC not at top level (value -> unused)");
+
+  done();
+}
+
+</script>
+
+
+</body></html>
