feat: add CSS SVG geometric properties (#753)

* Feat: add CSS SVG geometric properties * referToSVGViewportSize * group definition * comma in json * comma in json * space or tab?
mdn · Aug 9, 2024 · ab6bf8a · ab6bf8a
1 parent 0edc1ea
commit ab6bf8a
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 0 deletions.
diff --git a/css/definitions.json b/css/definitions.json
@@ -73,6 +73,7 @@
       "Pseudo-classes",
       "Pseudo-elements",
       "Selectors",
+      "Scalable Vector Graphics",
       "WebKit Extensions"
     ]
   }

diff --git a/css/properties.json b/css/properties.json
@@ -4589,6 +4589,38 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/cursor"
   },
+  "cx": {
+    "syntax": "<length> | <percentage>",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportWidth",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "0",
+    "appliesto": "limitedSVGElementsEllipse",
+    "computed": "percentageAsSpecifiedOrAbsoluteLength",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/cx"
+  },
+  "cy": {
+    "syntax": "<length> | <percentage>",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportHeight",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "0",
+    "appliesto": "limitedSVGElementsEllipse",
+    "computed": "percentageAsSpecifiedOrAbsoluteLength",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/cy"
+  },
   "direction": {
     "syntax": "ltr | rtl",
     "media": "visual",
@@ -8327,6 +8359,22 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/quotes"
   },
+  "r": {
+    "syntax": "<length> | <percentage>",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportSize",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "0",
+    "appliesto": "limitedSVGElementsCircle",
+    "computed": "percentageAsSpecifiedOrAbsoluteLength",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/r"
+  },
   "resize": {
     "syntax": "none | both | horizontal | vertical | block | inline",
     "media": "visual",
@@ -8439,6 +8487,38 @@
     "status": "experimental",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/ruby-position"
   },
+  "rx": {
+    "syntax": "<length> | <percentage>",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportWidth",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "0",
+    "appliesto": "limitedSVGElementsEllipseRect",
+    "computed": "percentageAsSpecifiedOrAbsoluteLength",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/rx"
+  },
+  "ry": {
+    "syntax": "<length> | <percentage>",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportHeight",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "0",
+    "appliesto": "limitedSVGElementsEllipseRect",
+    "computed": "percentageAsSpecifiedOrAbsoluteLength",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/ry"
+  },
   "scale": {
     "syntax": "none | <number>{1,3}",
     "media": "visual",
@@ -10260,6 +10340,38 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/writing-mode"
   },
+  "x": {
+    "syntax": "<length> | <percentage>",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportWidth",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "0",
+    "appliesto": "limitedSVGElementsGeometry",
+    "computed": "percentageAsSpecifiedOrAbsoluteLength",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/x"
+  },
+  "y": {
+    "syntax": "<length> | <percentage>",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportHeight",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "0",
+    "appliesto": "limitedSVGElementsGeometry",
+    "computed": "percentageAsSpecifiedOrAbsoluteLength",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/y"
+  },
   "z-index": {
     "syntax": "auto | <integer>",
     "media": "visual",

diff --git a/css/properties.schema.json b/css/properties.schema.json
@@ -74,6 +74,9 @@
         "referToSizeOfFont",
         "referToSizeOfMaskBorderImage",
         "referToSizeOfMaskPaintingArea",
+        "referToSVGViewportHeight",
+        "referToSVGViewportSize",
+        "referToSVGViewportWidth",
         "referToTotalPathLength",
         "referToWidthAndHeightOfElement",
         "referToWidthOfAffectedGlyph",
@@ -235,6 +238,11 @@
         "inFlowChildrenOfBoxElements",
         "inlineBoxesAndBlockContainers",
         "inlineLevelAndTableCellElements",
+        "limitedSVGElements",
+        "limitedSVGElementsCircle",
+        "limitedSVGElementsEllipse",
+        "limitedSVGElementsEllipseRect",
+        "limitedSVGElementsGeometry",
         "listItems",
         "maskElements",
         "multicolElements",

diff --git a/l10n/css.json b/l10n/css.json
@@ -959,6 +959,18 @@
   "lengthsAsPercentages": {
     "en-US": "The lengths may be specified as percentages"
   },
+  "limitedSVGElementsCircle": {
+    "en-US": "{{SVGElement(\"circle\")}} element in {{SVGElement(\"svg\")}}"
+  },
+  "limitedSVGElementsEllipse": {
+    "en-US": "{{SVGElement(\"ellipse\")}} and {{SVGElement(\"circle\")}} elements in {{SVGElement(\"svg\")}}"
+  },
+  "limitedSVGElementsGeometry": {
+    "en-US": "{{SVGElement(\"svg\")}}, {{SVGElement(\"rect\")}}, {{SVGElement(\"image\")}}, and {{SVGElement(\"foreignObject\")}} elements in an <code>svg</code>"
+  },
+  "limitedSVGElementsEllipseRect": {
+    "en-US": "{{SVGElement(\"ellipse\")}} and {{SVGElement(\"rect\")}} 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",
@@ -1409,6 +1421,15 @@
     "ja": "マスク描画領域の寸法からマスクレイヤー画像の寸法を引いたものに対する相対値 ({{cssxref(\"background-position\")}} のテキストを参照)",
     "ru": "относятся к размеру маски области рисования минус размер маски слоя изображения (смотрите статью о {{cssxref(\"background-position\")}})"
   },
+  "referToSVGViewportSize": {
+    "en-US": "refer to the normalized diagonal of the current SVG viewport"
+  },
+  "referToSVGViewportHeight": {
+    "en-US": "refer to the height of the current SVG viewport"
+  },
+  "referToSVGViewportWidth": {
+    "en-US": "refer to the width of the current SVG viewport"
+  },
   "referToTotalPathLength": {
     "de": "beziehen sich auf die Gesamtlänge des Pfads",
     "en-US": "refer to the total path length",