add CSS Masking types (#713)

Author: saschanaz

baselines/dom.generated.d.ts

@@ -2795,9 +2795,9 @@ interface CSSStyleDeclaration {
     captionSide: string | null;
     caretColor: string;
     clear: string | null;
-    clip: string | null;
-    clipPath: string | null;
-    clipRule: string | null;
+    clip: string;
+    clipPath: string;
+    clipRule: string;
     color: string | null;
     colorInterpolationFilters: string;
     columnCount: string;
@@ -2904,8 +2904,13 @@ interface CSSStyleDeclaration {
     markerEnd: string | null;
     markerMid: string | null;
     markerStart: string | null;
-    mask: string | null;
-    maskImage: string | null;
+    mask: string;
+    maskComposite: string;
+    maskImage: string;
+    maskPosition: string;
+    maskRepeat: string;
+    maskSize: string;
+    maskType: string;
     maxHeight: string | null;
     maxWidth: string | null;
     minHeight: string | null;
@@ -12998,8 +13003,9 @@ declare var SVGCircleElement: {
 };
 
 /** Provides access to the properties of <clipPath> elements, as well as methods to manipulate them. */
-interface SVGClipPathElement extends SVGGraphicsElement {
+interface SVGClipPathElement extends SVGElement {
     readonly clipPathUnits: SVGAnimatedEnumeration;
+    readonly transform: SVGAnimatedTransformList;
     addEventListener<K extends keyof SVGElementEventMap>(type: K, listener: (this: SVGClipPathElement, ev: SVGElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
     removeEventListener<K extends keyof SVGElementEventMap>(type: K, listener: (this: SVGClipPathElement, ev: SVGElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
@@ -13903,7 +13909,7 @@ declare var SVGMarkerElement: {
 };
 
 /** Provides access to the properties of <mask> elements, as well as methods to manipulate them. */
-interface SVGMaskElement extends SVGElement, SVGTests {
+interface SVGMaskElement extends SVGElement {
     readonly height: SVGAnimatedLength;
     readonly maskContentUnits: SVGAnimatedEnumeration;
     readonly maskUnits: SVGAnimatedEnumeration;

inputfiles/addedTypes.json

@@ -1902,6 +1902,14 @@
                     }
                 ]
             },
+            "SVGClipPathElement": {
+                "element": [
+                    {
+                        "namespace": "SVG",
+                        "name": "clipPath"
+                    }
+                ]
+            },
             "SVGEllipseElement": {
                 "element": [
                     {
@@ -2118,6 +2126,14 @@
                     }
                 ]
             },
+            "SVGMaskElement": {
+                "element": [
+                    {
+                        "namespace": "SVG",
+                        "name": "mask"
+                    }
+                ]
+            },
             "SVGPolygonElement": {
                 "element": [
                     {

inputfiles/idl/CSS Masking.widl

@@ -0,0 +1,36 @@
+interface SVGClipPathElement : SVGElement {
+  readonly attribute SVGAnimatedEnumeration clipPathUnits;
+  readonly attribute SVGAnimatedTransformList transform;
+};
+
+interface SVGMaskElement : SVGElement {
+  readonly attribute SVGAnimatedEnumeration maskUnits;
+  readonly attribute SVGAnimatedEnumeration maskContentUnits;
+  readonly attribute SVGAnimatedLength x;
+  readonly attribute SVGAnimatedLength y;
+  readonly attribute SVGAnimatedLength width;
+  readonly attribute SVGAnimatedLength height;
+};
+
+partial interface CSSStyleDeclaration {
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString clipPath;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString clipRule;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskImage;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskMode;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskRepeat;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskPosition;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskClip;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskOrigin;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskSize;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskComposite;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString mask;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskBorderSource;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskBorderMode;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskBorderSlice;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskBorderWidth;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskBorderOutset;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskBorderRepeat;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskBorder;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString maskType;
+  [CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString clip;
+};

inputfiles/idlSources.json

@@ -32,6 +32,10 @@
         "url": "https://drafts.csswg.org/css-images-3/",
         "title": "CSS Images"
     },
+    {
+        "url": "https://drafts.fxtf.org/css-masking-1/",
+        "title": "CSS Masking"
+    },
     {
         "url": "https://www.w3.org/TR/css-multicol-1/",
         "title": "CSS Multi-column Layout"

inputfiles/removedTypes.json

@@ -69,6 +69,16 @@
                 "properties": {
                     "property": {
                         "hangingPunctuation": null,
+                        "maskBorder": null,
+                        "maskBorderMode": null,
+                        "maskBorderOutset": null,
+                        "maskBorderRepeat": null,
+                        "maskBorderSlice": null,
+                        "maskBorderSource": null,
+                        "maskBorderWidth": null,
+                        "maskClip": null,
+                        "maskMode": null,
+                        "maskOrigin": null,
                         "textAlignAll": null
                     }
                 }