1 files changed, 247 insertions, 0 deletions
diff --git a/layout/style/test/test_css_supports_variables.html b/layout/style/test/test_css_supports_variables.html
new file mode 100644
index 0000000000..04f3889b85
--- /dev/null
+++ b/layout/style/test/test_css_supports_variables.html
@@ -0,0 +1,247 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=773296
+-->
+<head>
+  <title>Test for Bug 773296</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=773296">Mozilla Bug 773296</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<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(--))",
+    "(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, \\",
+
+    "(--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(1px))",
+    "(color: var(--a)))",
+    "(color: var(--a) \"\n",
+    "(color: var(--a) url(\"\n",
+    "(color: var(a))",
+
+    "(--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(--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(--"],
+
+    ["--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(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)"],
+
+    ["--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"],
+    ["--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 + "\"");
+  });
+
+  passingDeclarations.forEach(function(aDeclaration) {
+    is(CSS.supports(aDeclaration[0], aDeclaration[1]), true, "CSS.supports returns true for supported declaration \"" + aDeclaration.join(":") + "\"");
+  });
+
+  failingDeclarations.forEach(function(aDeclaration) {
+    is(CSS.supports(aDeclaration[0], aDeclaration[1]), false, "CSS.supports returns false for unsupported declaration \"" + aDeclaration.join(":") + "\"");
+  });
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+runTest();
+</script>
+</pre>
+</body>
+</html>