Merge pull request #195 from cscott/paint-validation

Validate fill, stroke, and opacity properties.

Author: XhmikosR

src/css/Properties.js

@@ -287,7 +287,9 @@ var Properties = {
     "empty-cells"                   : "show | hide | inherit",
 
     //F
-    "fill"                          : "<color> | inherit",
+    "fill"                          : "<paint> | inherit",
+    "fill-opacity"                  : "<opacity-value> | inherit",
+    "fill-rule"                     : "nonzero | evenodd | inherit",
     "filter"                        : "<filter-function-list> | none",
     "fit"                           : "fill | hidden | meet | slice",
     "fit-position"                  : 1,
@@ -423,7 +425,7 @@ var Properties = {
     //O
     "object-fit"                    : "fill | contain | cover | none | scale-down",
     "object-position"               : "<position> | inherit",
-    "opacity"                       : "<number> | inherit",
+    "opacity"                       : "<opacity-value> | inherit",
     "order"                         : "<integer>",
     "-webkit-order"                 : "<integer>",
     "orphans"                       : "<integer> | inherit",
@@ -491,6 +493,14 @@ var Properties = {
     "src"                           : 1,
     "stress"                        : 1,
     "string-set"                    : 1,
+    "stroke"                        : "<paint> | inherit",
+    "stroke-dasharray"              : "none | <dasharray> | inherit",
+    "stroke-dashoffset"             : "<percentage> | <length> | inherit",
+    "stroke-linecap"                : "butt | round | square | inherit",
+    "stroke-linejoin"               : "miter | round | bevel | inherit",
+    "stroke-miterlimit"             : "<miterlimit> | inherit",
+    "stroke-opacity"                : "<opacity-value> | inherit",
+    "stroke-width"                  : "<percentage> | <length> | inherit",
 
     "table-layout"                  : "auto | fixed | inherit",
     "tab-size"                      : "<integer> | <length>",

src/css/ValidationTypes.js

@@ -388,10 +388,39 @@ ValidationTypes = {
             return part.type === "color" || String(part) === "transparent" || String(part) === "currentColor";
         },
 
+        // The SVG <color> spec doesn't include "currentColor" or "transparent" as a color.
+        "<color-svg>": function(part) {
+            return part.type === "color";
+        },
+
+        "<icccolor>": function(part){
+            /* ex.:
+                https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/local
+                    icc-color(acmecmyk, 0.11, 0.48, 0.83, 0.00)
+                    cielab(62.253188, 23.950124, 48.410653)
+                    cielch(62.253188, 54.011108, 63.677091)
+                    icc-color(FooColors, Sandy23C)
+                http://www.w3.org/TR/2009/WD-SVGColor12-20091001/#iccnamedcolor
+                    ~"icc-color(" name (comma-wsp number)+ ")"
+                    ~"icc-named-color(" name comma-wsp namedColor ")"
+                    ~"cielab(" lightness comma-wsp a-value comma-wsp b-value ")"
+                    ~"cielchab(" lightness comma-wsp chroma comma-wsp hue ")"
+            */
+            return ValidationTypes.isLiteral(part, "cielab() | cielch() | cielchab() | icc-color() | icc-named-color()");
+        },
+
         "<number>": function(part){
             return part.type === "number" || this["<integer>"](part);
         },
 
+        "<miterlimit>": function(part){
+            return this["<number>"](part) && part.value >= 1;
+        },
+
+        "<opacity-value>": function(part){
+            return this["<number>"](part) && part.value >= 0 && part.value <= 1;
+        },
+
         "<integer>": function(part){
             return part.type === "integer";
         },
@@ -517,10 +546,31 @@ ValidationTypes = {
         // <basic-shape> || <geometry-box>
         Matcher.cast("<basic-shape>").oror("<geometry-box>"),
 
+        "<dasharray>":
+        // "list of comma and/or white space separated <length>s and
+        // <percentage>s".  We use <padding-width> to enforce the
+        // nonnegative constraint.
+        Matcher.cast("<padding-width>")
+            .braces(1, Infinity, "#", Matcher.cast(",").question()),
+
         "<filter-function-list>":
         // [ <filter-function> | <uri> ]+
         Matcher.cast("<filter-function> | <uri>").plus(),
 
+        "<paint>":
+        // none | currentColor | <color> [<icccolor>]? |
+        // <funciri> [ none | currentColor | <color> [<icccolor>]? ]?
+
+        // Note that <color> here is "as defined in the SVG spec", which
+        // is more restrictive that the <color> defined in the CSS spec.
+        Matcher.alt("<paint-basic>",
+                    Matcher.seq("<uri>", Matcher.cast("<paint-basic>").question())),
+        // Helper definition for <paint> above.
+        "<paint-basic>":
+        Matcher.alt("none", "currentColor",
+                    Matcher.seq("<color-svg>",
+                                Matcher.cast("<icccolor>").question())),
+
         "<position>":
         // <position> = [
         //  [ left | center | right | top | bottom | <percentage> | <length> ]

tests/css/Validation.js

@@ -729,6 +729,46 @@
         }
     }));
 
+    // test <paint>
+    suite.add(new ValidationTestCase({
+        property: "fill",
+
+        valid: [
+            "url('myGradient')",
+            "url('myGradient') darkred",
+            "url('myGradient') darkred icc-color(myCmykDarkRed)",
+            "currentColor",
+            "darkred icc-color(myCmykDarkRed)",
+            "none",
+            "inherit"
+        ],
+
+        invalid: {
+            "url('myGradient') inherit" : "Expected end of value but found 'inherit'.",
+            "url('myGradient') icc-color(myCmykDarkRed)" : "Expected end of value but found 'icc-color(myCmykDarkRed)'.",
+            "currentColor icc-color(myCmykDarkRed)" : "Expected end of value but found 'icc-color(myCmykDarkRed)'.",
+            "icc-color(myCmykDarkRed) darkred" : "Expected (<paint> | inherit) but found 'icc-color(myCmykDarkRed) darkred'.",
+            "icc-color(myCmykDarkRed)" : "Expected (<paint> | inherit) but found 'icc-color(myCmykDarkRed)'.",
+            "icc-color(myCmykDarkRed) inherit" : "Expected (<paint> | inherit) but found 'icc-color(myCmykDarkRed) inherit'.",
+            "inherit icc-color(myCmykDarkRed)" : "Expected end of value but found 'icc-color(myCmykDarkRed)'.",
+            "none inherit" : "Expected end of value but found 'inherit'."
+        }
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "fill-rule",
+
+        valid: [
+            "nonzero",
+            "evenodd",
+            "inherit"
+        ],
+
+        invalid: {
+            "foo" : "Expected (nonzero | evenodd | inherit) but found 'foo'."
+        }
+    }));
+
     suite.add(new ValidationTestCase({
         property: "filter",
 
@@ -1040,11 +1080,15 @@
         property: "opacity",
 
         valid: [
+            "0",
+            "0.5",
             "1"
         ],
 
         invalid: {
-            "foo" : "Expected (<number> | inherit) but found 'foo'."
+            "-0.75" : "Expected (<opacity-value> | inherit) but found '-0.75'.",
+            "12" : "Expected (<opacity-value> | inherit) but found '12'.",
+            "foo" : "Expected (<opacity-value> | inherit) but found 'foo'."
         }
     }));
 
@@ -1070,6 +1114,78 @@
         }
     }));
 
+    suite.add(new ValidationTestCase({
+        property: "stroke-dasharray",
+
+        valid: [
+            "0",
+            "4",
+            "20px",
+            "20px 40px 30px",
+            "20px, 40px, 30px",
+            "calc(1px + 2px) calc(3px + 1em)",
+            "none",
+            "inherit"
+        ],
+
+        invalid: {
+            "-20px" : "Expected (none | <dasharray> | inherit) but found '-20px'.",
+            "20px," : "Expected end of value but found ','.",
+            "20px, -20px": "Expected end of value but found ','.",
+            "auto"  : "Expected (none | <dasharray> | inherit) but found 'auto'."
+        }
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "stroke-linecap",
+
+        valid: [
+            "butt",
+            "round",
+            "square",
+            "inherit"
+        ],
+
+        invalid: {
+            "auto" : "Expected (butt | round | square | inherit) but found 'auto'.",
+            "none" : "Expected (butt | round | square | inherit) but found 'none'."
+        }
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "stroke-linejoin",
+
+        valid: [
+            "miter",
+            "round",
+            "bevel",
+            "inherit"
+        ],
+
+        invalid: {
+            "auto" : "Expected (miter | round | bevel | inherit) but found 'auto'.",
+            "none" : "Expected (miter | round | bevel | inherit) but found 'none'."
+        }
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "stroke-miterlimit",
+
+        valid: [
+            "1",
+            "1.4",
+            "20",
+            "10",
+            "inherit"
+        ],
+
+        invalid: {
+            "-10" : "Expected (<miterlimit> | inherit) but found '-10'.",
+            "0.5" : "Expected (<miterlimit> | inherit) but found '0.5'.",
+            "foo" : "Expected (<miterlimit> | inherit) but found 'foo'."
+        }
+    }));
+
     suite.add(new ValidationTestCase({
         property: "-ms-touch-action",