feat: Add marker CSS SVG properties (#756)

* Add five SVG-based CSS properties * Add one more SVG-based CSS property * First shape marker * Add marker CSS SVG properties * Apply suggestions from code review wbamberg corrections Co-authored-by: wbamberg <[email protected]> --------- Co-authored-by: wbamberg <[email protected]>
mdn · Aug 20, 2024 · ebe6b02 · ebe6b02
1 parent b703067
commit ebe6b02
Show file tree

Hide file tree

Showing 3 changed files with 188 additions and 0 deletions.
diff --git a/css/properties.json b/css/properties.json
@@ -4107,6 +4107,22 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/clip-path"
   },
+  "clip-rule": {
+    "syntax": "nonzero | evenodd",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "nonzero",
+    "appliesto": "limitedSVGElementsGraphics",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/clip-rule"
+  },
   "color": {
     "syntax": "<color>",
     "media": "visual",
@@ -4128,6 +4144,22 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color"
   },
+  "color-interpolation-filters": {
+    "syntax": "auto | sRGB | linearRGB",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "linearRGB",
+    "appliesto": "limitedSVGElementsFilterPrimitives",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/clip-rule"
+  },
   "color-scheme": {
     "syntax": "normal | [ light | dark | <custom-ident> ]+ && only?",
     "media": "visual",
@@ -4653,6 +4685,22 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/display"
   },
+  "dominant-baseline": {
+    "syntax": "auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top",
+    "media": "all",
+    "inherited": true,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "auto",
+    "appliesto": "blockContainersFlexContainersGridContainersInlineBoxesTableRowsSVGTextContentElements",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/dominant-baseline"
+  },
   "empty-cells": {
     "syntax": "show | hide",
     "media": "visual",
@@ -6698,6 +6746,74 @@
     "status": "experimental",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/margin-trim"
   },
+  "marker": {
+    "syntax": "none | <url>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": [
+      "marker-start",
+      "marker-mid",
+      "marker-end"
+    ],
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/marker"
+  },
+  "marker-end": {
+    "syntax": "none | <url>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "none",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecifiedURLsAbsolute",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/marker-end"
+  },
+  "marker-mid": {
+    "syntax": "none | <url>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "none",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecifiedURLsAbsolute",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/marker-mid"
+  },
+  "marker-start": {
+    "syntax": "none | <url>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "none",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecifiedURLsAbsolute",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/marker-start"
+  },
   "mask": {
     "syntax": "<mask-layer>#",
     "media": "visual",
@@ -9245,6 +9361,22 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/shape-outside"
   },
+  "shape-rendering": {
+    "syntax": "auto | optimizeSpeed | crispEdges | geometricPrecision",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "CSS Shapes"
+    ],
+    "initial": "auto",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/shape-rendering"
+  },
   "tab-size": {
     "syntax": "<integer> | <length>",
     "media": "visual",
@@ -9312,6 +9444,22 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/text-align-last"
   },
+  "text-anchor": {
+    "syntax": "start | middle | end",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "start",
+    "appliesto": "limitedSVGElementsTextContent",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/text-anchor"
+  },
   "text-combine-upright": {
     "syntax": "none | all | [ digits <integer>? ]",
     "media": "visual",
@@ -10065,6 +10213,22 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/user-select"
   },
+  "vector-effect": {
+    "syntax": "none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "none",
+    "appliesto": "limitedSVGElementsGraphicsAndUse",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/vector-effect"
+  },
   "vertical-align": {
     "syntax": "baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>",
     "media": "visual",

diff --git a/css/properties.schema.json b/css/properties.schema.json
@@ -204,6 +204,7 @@
         "blockContainersExceptMultiColumnContainers",
         "blockContainersExceptTableWrappers",
         "blockContainersFlexContainersGridContainers",
+        "blockContainersFlexContainersGridContainersInlineBoxesTableRowsSVGTextContentElements",
         "blockContainersMultiColumnContainersFlexContainersGridContainers",
         "blockElementsInNormalFlow",
         "blockLevelElements",
@@ -242,7 +243,12 @@
         "limitedSVGElementsCircle",
         "limitedSVGElementsEllipse",
         "limitedSVGElementsEllipseRect",
+        "limitedSVGElementsFilterPrimitives",
         "limitedSVGElementsGeometry",
+        "limitedSVGElementsGraphics",
+        "limitedSVGElementsGraphicsAndUse",
+        "limitedSVGElementsShapes",
+        "limitedSVGElementsTextContent",
         "listItems",
         "maskElements",
         "multicolElements",

diff --git a/l10n/css.json b/l10n/css.json
@@ -549,6 +549,9 @@
     "en-US": "Block-containers, flex containers, and grid containers",
     "ja": "ブロックコンテナー, フレックスコンテナー, グリッドコンテナー"
   },
+  "blockContainersFlexContainersGridContainersInlineBoxesTableRowsSVGTextContentElements": {
+    "en-US": "Block-containers, flex containers, grid containers, inline boxes, table rows, and SVG text content elements"
+  },
   "blockContainersMultiColumnContainersFlexContainersGridContainers": {
     "en-US": "Block-containers, multi-column containers, flex containers"
   },
@@ -971,6 +974,21 @@
   "limitedSVGElementsEllipseRect": {
     "en-US": "{{SVGElement(\"ellipse\")}} and {{SVGElement(\"rect\")}} elements in {{SVGElement(\"svg\")}}"
   },
+  "limitedSVGElementsFilterPrimitives": {
+    "en-US": "The set of elements that control the output of a {{SVGElement(\"filter\")}} element in {{SVGElement(\"svg\")}}"
+  },
+  "limitedSVGElementsGraphics": {
+    "en-US": "{{SVGElement(\"circle\")}}, {{SVGElement(\"ellipse\")}}, {{SVGElement(\"foreignObject\")}}, {{SVGElement(\"image\")}}, {{SVGElement(\"line\")}}, {{SVGElement(\"path\")}}, {{SVGElement(\"polygon\")}}, {{SVGElement(\"polyline\")}}, {{SVGElement(\"rect\")}}, {{SVGElement(\"text\")}}, {{SVGElement(\"textPath\")}}, and {{SVGElement(\"tspan\")}} elements in {{SVGElement(\"svg\")}}"
+  },
+  "limitedSVGElementsGraphicsAndUse": {
+    "en-US": "{{SVGElement(\"circle\")}}, {{SVGElement(\"ellipse\")}}, {{SVGElement(\"foreignObject\")}}, {{SVGElement(\"image\")}}, {{SVGElement(\"line\")}}, {{SVGElement(\"path\")}}, {{SVGElement(\"polygon\")}}, {{SVGElement(\"polyline\")}}, {{SVGElement(\"rect\")}}, {{SVGElement(\"use\")}}, {{SVGElement(\"text\")}}, {{SVGElement(\"textPath\")}}, and {{SVGElement(\"tspan\")}} elements in {{SVGElement(\"svg\")}}"
+  },
+  "limitedSVGElementsShapes": {
+    "en-US": "{{SVGElement(\"circle\")}}, {{SVGElement(\"ellipse\")}}, {{SVGElement(\"line\")}}, {{SVGElement(\"path\")}}, {{SVGElement(\"polygon\")}}, {{SVGElement(\"polyline\")}}, and {{SVGElement(\"rect\")}} elements in {{SVGElement(\"svg\")}}"
+  },
+  "limitedSVGElementsTextContent": {
+    "en-US": "{{SVGElement(\"text\")}}, {{SVGElement(\"textPath\")}} , and {{SVGElement(\"tspan\")}} elements in {{SVGElement(\"svg\")}}"
+  },
   "listEachItemConsistingOfAbsoluteLengthPercentageAndOrigin": {
     "de": "Eine Liste, bei der jeder Eintrag aus einem Versatz besteht, der durch eine Kombination aus absoluter Länge und einem Prozentsatz plus einem Ursprungsschlüsselwort definiert wird",
     "en-US": "A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword",