Support clip properties.

The clip property has has browser support for a long time, and even
parser-lib was nearly there. The clip property is now deprecated, and
its successor clip-path is more versatile, the use cases are much more
credible. Also support for the clip-rule propery. The properties can
be used without support of a svg file.

See: https://drafts.fxtf.org/css-masking-1/#the-clip-path

Fixes: #160

Author: Onno van der Zee

src/css/Properties.js

@@ -246,7 +246,10 @@ var Properties = {
     //C
     "caption-side"                  : "top | bottom | inherit",
     "clear"                         : "none | right | left | both | inherit",
-    "clip"                          : 1,
+    "clip"                          : "<shape> | auto | inherit",
+    "-webkit-clip-path"             : "<clip-source> | <clip-path> | none",
+    "clip-path"                     : "<clip-source> | <clip-path> | none",
+    "clip-rule"                     : "nonzero | evenodd | inherit",
     "color"                         : "<color> | inherit",
     "color-profile"                 : 1,
     "column-count"                  : "<integer> | auto",                      //http://www.w3.org/TR/css3-multicol/

src/css/ValidationTypes.js

@@ -184,6 +184,24 @@ var ValidationTypes = {
             return part.type == "function" && (part.name == "rect" || part.name == "inset-rect");
         },
 
+        "<basic-shape>": function(part){
+            // inset() = inset( <shape-arg>{1,4} [round <border-radius>]? )
+            // circle() = circle( [<shape-radius>]? [at <position>]? )
+            // ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
+            // polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
+            return part.type == "function" && (
+                part.name == "inset" || part.name == "circle" || part.name == "ellipse" || part.name == "polygon"
+            );
+        },
+
+        "<shape-box>": function(part) {
+            return this["<box>"](part) || ValidationTypes.isLiteral(part, "margin-box");
+        },
+
+        "<geometry-box>": function(part) {
+            return this["<shape-box>"](part) || ValidationTypes.isLiteral(part, "fill-box | stroke-box | view-box");
+        },
+
         "<time>": function(part) {
             return part.type == "time";
         },
@@ -211,7 +229,7 @@ var ValidationTypes = {
         "<flex-wrap>": function(part){
             return ValidationTypes.isLiteral(part, "nowrap | wrap | wrap-reverse");
         },
-        
+
         "<feature-tag-value>": function(part){
             return (part.type == "function" && /^[A-Z0-9]{4}$/i.test(part));
         }
@@ -308,6 +326,29 @@ var ValidationTypes = {
             return result;
         },
 
+        "<clip-source>": function(expression){
+			return ValidationTypes.isAny(expression, "<uri>");
+        },
+
+        "<clip-path>": function(expression) {
+            // <basic-shape> || <geometry-box>
+            var result = false;
+
+            if (ValidationTypes.isType(expression, "<basic-shape>")) {
+                result = true;
+                if (expression.hasNext()) {
+                    result = ValidationTypes.isType(expression, "<geometry-box>");
+                }
+            } else if (ValidationTypes.isType(expression, "<geometry-box>")) {
+                result = true;
+                if (expression.hasNext()) {
+                    result = ValidationTypes.isType(expression, "<basic-shape>");
+                }
+            }
+
+            return result && !expression.hasNext();
+        },
+
         "<repeat-style>": function(expression){
             //repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
             var result  = false,

tests/css/Validation.js

@@ -573,6 +573,57 @@
         }
     }));
 
+    suite.add(new ValidationTestCase({
+        property: "clip",
+
+        valid: [
+            "rect(10%, 85%, 90%, 15%)",
+            'auto'
+        ],
+
+        invalid: {
+            "foo" : "Expected (<shape> | auto | inherit) but found 'foo'."
+        }
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "clip-path",
+
+        valid: [
+            "inset(10% 15% 10% 15%)",
+            "circle(30% at 85% 15%)",
+	        "url('#myPath')",
+	        "ellipse(40% 40%)",
+	        "margin-box",
+	        "ellipse(40% 40%) content-box",
+	        "stroke-box ellipse(40% 40%)",
+	        "none"
+        ],
+
+        invalid: {
+	        "stroke-box ellipse(40% 40%) 40%" : "Expected end of value but found '40%'.",
+	        "x-box" : "Expected (<clip-source> | <clip-path> | none) but found 'x-box'.",
+            "foo" : "Expected (<clip-source> | <clip-path> | none) but found 'foo'.",
+	        "invert(40% 40%)" : "Expected (<clip-source> | <clip-path> | none) but found 'invert(40% 40%)'.",
+	        "40%" : "Expected (<clip-source> | <clip-path> | none) but found '40%'.",
+	        "0.4" : "Expected (<clip-source> | <clip-path> | none) but found '0.4'."
+        }
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "clip-rule",
+
+        valid: [
+            "nonzero",
+            "evenodd",
+            "inherit"
+        ],
+
+        invalid: {
+            "foo" : "Expected (nonzero | evenodd | inherit) but found 'foo'."
+        }
+    }));
+
     suite.add(new ValidationTestCase({
         property: "color",