From cd66949b3ceb03ed7d8a0a7c7f62c53379d224c6 Mon Sep 17 00:00:00 2001
From: Guillaume <gui.lebas@gmail.com>
Date: Wed, 9 Jun 2021 10:25:41 +0200
Subject: [PATCH] feat: clip-path

---
 lib/CSSStyleDeclaration.test.js | 13 +++++++++++
 lib/properties/clipPath.js      | 40 +++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 lib/properties/clipPath.js

diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js
index 8440242a..33943e02 100644
--- a/lib/CSSStyleDeclaration.test.js
+++ b/lib/CSSStyleDeclaration.test.js
@@ -805,6 +805,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();
diff --git a/lib/properties/clipPath.js b/lib/properties/clipPath.js
new file mode 100644
index 00000000..86a73d8b
--- /dev/null
+++ b/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,
+};