Precisely validate <filter-function-list>.

See: https://drafts.fxtf.org/filters/#FilterProperty

Fixes: #161

Author: Onno van der Zee

src/css/Properties.js

@@ -285,8 +285,8 @@ var Properties = {
     "empty-cells"                   : "show | hide | inherit",
 
     //F
-    "filter"                        : 1,
     "fill"                          : "<color> | inherit",
+    "filter"                        : "<filter-function-list> | none",
     "fit"                           : "fill | hidden | meet | slice",
     "fit-position"                  : 1,
     "flex"                          : "<flex>",

src/css/ValidationTypes.js

@@ -232,6 +232,21 @@ var ValidationTypes = {
 
         "<feature-tag-value>": function(part){
             return (part.type === "function" && /^[A-Z0-9]{4}$/i.test(part));
+        },
+
+        "<filter-function>": function(part){
+            return part.type === "function" && (
+                    part.name === 'blur' ||
+                    part.name === 'brightness' ||
+                    part.name === 'contrast' ||
+                    part.name === 'custom' || // Not actually in formal spec.
+                    part.name === 'drop-shadow' ||
+                    part.name === 'grayscale' ||
+                    part.name === 'hue-rotate' ||
+                    part.name === 'invert' ||
+                    part.name === 'opacity' ||
+                    part.name === 'saturate' ||
+                    part.name === 'sepia');
         }
     },
 
@@ -340,6 +355,24 @@ var ValidationTypes = {
             }
 
             return result && !expression.hasNext();
+
+        },
+
+        "<filter-function-list>": function(expression){
+            var result, part, i;
+            for (i = 0, result = true; result && expression.hasNext(); i++) {
+                result = ValidationTypes.isAny(expression, "<filter-function> | <uri>");
+            }
+
+            if (i > 1 && !result) {
+                // More precise error message if we fail after the first
+                // parsed <filter-function>.
+                part = expression.peek();
+                throw new ValidationError("Expected (<filter-function> | <uri>) but found '" + part.text + "'.", part.line, part.col);
+            }
+
+            return result;
+
         },
 
         "<repeat-style>": function(expression){

tests/css/Validation.js

@@ -727,6 +727,26 @@
         }
     }));
 
+    suite.add(new ValidationTestCase({
+        property: "filter",
+
+        valid: [
+            "custom(url(vertexshader.vert) mix(url(fragment.frag) normal source-atop), 4 5, time 0)",
+            "blur(30px 30px)",
+            "url('#svgFilter')",
+            "hue-rotate(10deg)",
+            "brightness(0.3) contrast(30)",
+            "brightness(0.3) contrast(30) url(commonfilters.svg#filter)",
+            "none"
+        ],
+
+        invalid: {
+            "circle(50% at 0 0)" : "Expected (<filter-function-list> | none) but found 'circle(50% at 0 0)'.",
+            "foo" :                "Expected (<filter-function-list> | none) but found 'foo'.",
+            "blur(30px 30px) none" : "Expected (<filter-function> | <uri>) but found 'none'."
+        }
+    }));
+
     ["flex", "-ms-flex", "-webkit-flex"].forEach(function(prop_name) {
         suite.add(new ValidationTestCase({
             property: prop_name,