feat: clip-path

lib/CSSStyleDeclaration.test.js

@@ -812,6 +812,19 @@ describe('properties', () => {
       expect(style.clip).toBe('rect(calc(10px), calc(10px), calc(10px), calc(10px))');
     });
   });
+  describe('clip-path', () => {
+    test('basic shape and geometry box in any order', () => {
+      const style = new CSSStyleDeclaration();
+      const valid = [
+        ['fill-box circle()', 'circle(at center center) fill-box'],
+        ['circle() fill-box', 'circle(at center center) fill-box'],
+      ];
+      valid.forEach(([input, expected = input]) => {
+        style.clipPath = input;
+        expect(style.clipPath).toBe(expected);
+      });
+    });
+  });
   describe('flex', () => {
     test('shorthand propagates to longhands', () => {
       const style = new CSSStyleDeclaration();

lib/properties/clipPath.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const {
+  parseGeometryBox,
+  parseKeyword,
+  parseResource,
+  parseBasicShape,
+  splitTokens,
+} = require('../parsers');
+
+function parseShapeGeometry(val) {
+  const [args] = splitTokens(val);
+  if (args.length === 2) {
+    let shape = parseBasicShape(args[0]);
+    let box = parseGeometryBox(args[1]);
+    if (!shape && !box) {
+      shape = parseBasicShape(args[1]);
+      box = parseGeometryBox(args[0]);
+    }
+    if (shape && box) {
+      return `${shape} ${box}`;
+    }
+  }
+  return parseBasicShape(val) || parseGeometryBox(val);
+}
+
+function parse(val) {
+  return parseResource(val) || parseShapeGeometry(val) || parseKeyword(val, ['none']);
+}
+
+module.exports.definition = {
+  set: function(v) {
+    this._setProperty('clip-path', parse(v));
+  },
+  get: function() {
+    return this.getPropertyValue('clip-path');
+  },
+  enumerable: true,
+  configurable: true,
+};