css-shapes.json

{
  "spec": {
    "title": "CSS Shapes Module Level 1",
    "url": "https://drafts.csswg.org/css-shapes/"
  },
  "properties": {
    "shape-outside": {
      "name": "shape-outside",
      "value": "none | [ <basic-shape> || <shape-box> ] | <image>",
      "initial": "none",
      "appliesTo": "floats",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as defined for <basic-shape> (with <shape-box> following, if supplied); else the computed <image>; else the keyword as specified",
      "canonicalOrder": "per grammar",
      "animationType": "as defined for <basic-shape>, otherwise discrete",
      "styleDeclaration": [
        "shape-outside",
        "shapeOutside"
      ]
    },
    "shape-image-threshold": {
      "name": "shape-image-threshold",
      "value": "<alpha-value>",
      "initial": "0",
      "appliesTo": "floats",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "specified number, clamped to the range [0,1]",
      "canonicalOrder": "per grammar",
      "animationType": "by computed value",
      "styleDeclaration": [
        "shape-image-threshold",
        "shapeImageThreshold"
      ]
    },
    "shape-margin": {
      "name": "shape-margin",
      "value": "<length-percentage>",
      "initial": "0",
      "appliesTo": "floats",
      "inherited": "no",
      "percentages": "refer to the inline size of the containing block",
      "computedValue": "computed <length-percentage> value",
      "canonicalOrder": "per grammar",
      "animationType": "by computed value",
      "styleDeclaration": [
        "shape-margin",
        "shapeMargin"
      ]
    }
  },
  "descriptors": {},
  "valuespaces": {
    "<shape-box>": {
      "value": "<box> | margin-box"
    },
    "<inset()>": {
      "value": "inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )"
    },
    "<circle()>": {
      "value": "circle( <shape-radius>? [ at <position> ]? )"
    },
    "<ellipse()>": {
      "value": "ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )"
    },
    "<polygon()>": {
      "value": "polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )"
    },
    "<path()>": {
      "value": "path( [<'fill-rule'>,]? <string> )"
    },
    "<shape-radius>": {
      "value": "<length-percentage> | closest-side | farthest-side",
      "prose": "Defines a radius for a circle or ellipse. If omitted it defaults to closest-side. closest-side uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension. farthest-side uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension."
    }
  }
}