css-masking.json

{
  "spec": {
    "title": "CSS Masking Module Level 1",
    "url": "https://www.w3.org/TR/css-masking-1/"
  },
  "properties": {
    "clip-path": {
      "name": "clip-path",
      "value": "<clip-source> | [ <basic-shape> || <geometry-box> ] | none",
      "initial": "none",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified, but with <url> values made absolute",
      "canonicalOrder": "per grammar",
      "animationType": "by computed value",
      "media": "visual",
      "styleDeclaration": [
        "clip-path",
        "clipPath"
      ]
    },
    "clip-rule": {
      "name": "clip-rule",
      "value": "nonzero | evenodd",
      "initial": "nonzero",
      "appliesTo": "Applies to SVG graphics elements",
      "inherited": "yes",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "clip-rule",
        "clipRule"
      ]
    },
    "mask-image": {
      "name": "mask-image",
      "value": "<mask-reference>#",
      "initial": "none",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "the keyword none, a computed <image>, or a computed <url>",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-image",
        "maskImage"
      ]
    },
    "mask-mode": {
      "name": "mask-mode",
      "value": "<masking-mode>#",
      "initial": "match-source",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-mode",
        "maskMode"
      ]
    },
    "mask-repeat": {
      "name": "mask-repeat",
      "value": "<repeat-style>#",
      "initial": "repeat",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "Consists of: two keywords, one per dimension",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-repeat",
        "maskRepeat"
      ]
    },
    "mask-position": {
      "name": "mask-position",
      "value": "<position>#",
      "initial": "0% 0%",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "refer to size of mask painting area minus size of mask layer image; see text background-position [CSS3BG]",
      "computedValue": "Consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.",
      "canonicalOrder": "per grammar",
      "animationType": "repeatable list",
      "media": "visual",
      "styleDeclaration": [
        "mask-position",
        "maskPosition"
      ]
    },
    "mask-clip": {
      "name": "mask-clip",
      "value": "[ <geometry-box> | no-clip ]#",
      "initial": "border-box",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-clip",
        "maskClip"
      ]
    },
    "mask-origin": {
      "name": "mask-origin",
      "value": "<geometry-box>#",
      "initial": "border-box",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-origin",
        "maskOrigin"
      ]
    },
    "mask-size": {
      "name": "mask-size",
      "value": "<bg-size>#",
      "initial": "auto",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified, but with lengths made absolute",
      "canonicalOrder": "per grammar",
      "animationType": "repeatable list",
      "media": "visual",
      "styleDeclaration": [
        "mask-size",
        "maskSize"
      ]
    },
    "mask-composite": {
      "name": "mask-composite",
      "value": "<compositing-operator>#",
      "initial": "add",
      "appliesTo": "All elements. In SVG, it applies to container elements without the defs element and all graphics elements",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-composite",
        "maskComposite"
      ]
    },
    "mask": {
      "name": "mask",
      "value": "<mask-layer>#",
      "initial": "see individual properties",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "see individual properties",
      "computedValue": "see individual properties",
      "canonicalOrder": "per grammar",
      "animationType": "see individual properties",
      "media": "visual",
      "styleDeclaration": [
        "mask"
      ]
    },
    "mask-border-source": {
      "name": "mask-border-source",
      "value": "none | <image>",
      "initial": "none",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "they keyword none or the computed <image>",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-border-source",
        "maskBorderSource"
      ]
    },
    "mask-border-mode": {
      "name": "mask-border-mode",
      "value": "luminance | alpha",
      "initial": "alpha",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-border-mode",
        "maskBorderMode"
      ]
    },
    "mask-border-slice": {
      "name": "mask-border-slice",
      "value": "<number-percentage>{1,4} fill?",
      "initial": "0",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "refer to size of the mask border image",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-border-slice",
        "maskBorderSlice"
      ]
    },
    "mask-border-width": {
      "name": "mask-border-width",
      "value": "[ <length-percentage> | <number> | auto ]{1,4}",
      "initial": "auto",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "relative to width/height of the mask border image area",
      "computedValue": "all <length>s made absolute, otherwise as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-border-width",
        "maskBorderWidth"
      ]
    },
    "mask-border-outset": {
      "name": "mask-border-outset",
      "value": "[ <length> | <number> ]{1,4}",
      "initial": "0",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "all <length>s made absolute, otherwise as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-border-outset",
        "maskBorderOutset"
      ]
    },
    "mask-border-repeat": {
      "name": "mask-border-repeat",
      "value": "[ stretch | repeat | round | space ]{1,2}",
      "initial": "stretch",
      "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-border-repeat",
        "maskBorderRepeat"
      ]
    },
    "mask-border": {
      "name": "mask-border",
      "value": "<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>",
      "initial": "See individual properties",
      "appliesTo": "See individual properties",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "See individual properties",
      "canonicalOrder": "per grammar",
      "animationType": "See individual properties",
      "media": "visual",
      "styleDeclaration": [
        "mask-border",
        "maskBorder"
      ]
    },
    "mask-type": {
      "name": "mask-type",
      "value": "luminance | alpha",
      "initial": "luminance",
      "appliesTo": "mask elements",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "media": "visual",
      "styleDeclaration": [
        "mask-type",
        "maskType"
      ]
    },
    "clip": {
      "name": "clip",
      "value": "rect() | auto",
      "initial": "auto",
      "appliesTo": "Absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, pattern elements and mask elements.",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "by computed value",
      "media": "visual",
      "styleDeclaration": [
        "clip"
      ]
    }
  },
  "descriptors": {},
  "valuespaces": {
    "<clip-source>": {
      "value": "<url>"
    },
    "<geometry-box>": {
      "value": "<shape-box> | fill-box | stroke-box | view-box"
    },
    "<mask-reference>": {
      "value": "none | <image> | <mask-source>"
    },
    "<mask-source>": {
      "value": "<url>"
    },
    "<masking-mode>": {
      "value": "alpha | luminance | match-source"
    },
    "<compositing-operator>": {
      "value": "add | subtract | intersect | exclude"
    },
    "<mask-layer>": {
      "value": "<mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>"
    },
    "<rect()>": {
      "value": "rect( <top>, <right>, <bottom>, <left> )"
    },
    "<url>": {
      "prose": "A URL reference to a mask element (for example url(commonmasks.svg#mask)) or to a CSS image."
    }
  }
}