feat(css): Add stroke CSS SVG properties (#757)

* First stroke properties * feat: Add stroke CSS SVG properties * Fixed shorthand animation, computed, etc. referents * Further lint corrections * Restored 'asLonghands' * Restored 'asLonghands' * Added 'asLonghands' * JSON formatting error fixes * Schema correction * fix: broken JSON in /Web/CSS/stroke prop --------- Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
mdn · Sep 5, 2024 · e577bd0 · e577bd0
1 parent 417a371
commit e577bd0
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 2 deletions.
diff --git a/css/properties.json b/css/properties.json
@@ -9441,6 +9441,150 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/shape-rendering"
   },
+  "stroke": {
+    "syntax": "",
+    "media": "visual",
+    "inherited": true,
+    "animationType": [
+      "stroke-dasharray",
+      "stroke-dashoffset",
+      "stroke-linecap",
+      "stroke-linejoin",
+      "stroke-miterlimit",
+      "stroke-opacity",
+      "stroke-width"
+    ],
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": [
+      "stroke-dasharray",
+      "stroke-dashoffset",
+      "stroke-linecap",
+      "stroke-linejoin",
+      "stroke-miterlimit",
+      "stroke-opacity",
+      "stroke-width"
+    ],
+    "appliesto": "asLonghands",
+    "computed": "asLonghands",
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke"
+  },
+  "stroke-dasharray": {
+    "syntax": "none | <dasharray>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "repeatableList",
+    "percentages": "referToSVGViewportDiagonal",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "none",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "listEachItemConsistingOfAbsoluteLengthPercentageOrKeyword",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-dasharray"
+  },
+  "stroke-dashoffset": {
+    "syntax": "<length-percentage> | <number>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportDiagonal",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "0",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "absoluteLengthOrPercentageNumbersConverted",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-dashoffset"
+  },
+  "stroke-linecap": {
+    "syntax": "butt | round | square",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "butt",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-linecap"
+  },
+  "stroke-linejoin": {
+    "syntax": "miter | miter-clip | round | bevel | arcs",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "discrete",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "miter",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-linejoin"
+  },
+  "stroke-miterlimit": {
+    "syntax": "<number>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "byComputedValueType",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "4",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-miterlimit"
+  },
+  "stroke-opacity": {
+    "syntax": "<opacity>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "byComputedValueType",
+    "percentages": "no",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "1",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "specifiedValueClipped0To1",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-opacity"
+  },
+  "stroke-width": {
+    "syntax": "<length-percentage> | <number>",
+    "media": "visual",
+    "inherited": true,
+    "animationType": "byComputedValueType",
+    "percentages": "referToSVGViewportDiagonal",
+    "groups": [
+      "Scalable Vector Graphics"
+    ],
+    "initial": "1px",
+    "appliesto": "limitedSVGElementsShapes",
+    "computed": "absoluteLengthOrPercentageNumbersConverted",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/stroke-width"
+  },
   "tab-size": {
     "syntax": "<integer> | <length>",
     "media": "visual",

diff --git a/css/properties.schema.json b/css/properties.schema.json
@@ -77,6 +77,7 @@
         "referToSVGViewportHeight",
         "referToSVGViewportSize",
         "referToSVGViewportWidth",
+        "referToSVGViewportDiagonal",
         "referToTotalPathLength",
         "referToWidthAndHeightOfElement",
         "referToWidthOfAffectedGlyph",
@@ -110,6 +111,7 @@
         "absoluteLengthOrNone",
         "absoluteLengthOrNormal",
         "absoluteLengthOrPercentage",
+        "absoluteLengthOrPercentageNumbersConverted",
         "absoluteLengthsSpecifiedColorAsSpecified",
         "absoluteLengthZeroIfBorderStyleNoneOrHidden",
         "absoluteLengthZeroOrLarger",
@@ -119,6 +121,7 @@
         "asColorOrAbsoluteURL",
         "asDefinedForBasicShapeWithAbsoluteURIOtherwiseAsSpecified",
         "asLength",
+        "asLonghands",
         "asSpecified",
         "asSpecifiedAppliesToEachProperty",
         "asSpecifiedButVisibleOrClipReplacedToAutoOrHiddenIfOtherValueDifferent",
@@ -142,6 +145,7 @@
         "keywordPlusIntegerIfDigits",
         "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto",
         "listEachItemConsistingOfAbsoluteLengthPercentageAndOrigin",
+        "listEachItemConsistingOfAbsoluteLengthPercentageOrKeyword",
         "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage",
         "listEachItemConsistingOfPairsOfAutoOrLengthPercentage",
         "listEachItemHasTwoKeywordsOnePerDimension",
@@ -198,6 +202,7 @@
         "allElementsTreeAbidingPseudoElementsPageMarginBoxes",
         "allElementsUAsNotRequiredWhenCollapse",
         "anyElementEffectOnProgressAndMeter",
+        "asLonghands",
         "beforeAndAfterPseudos",
         "blockContainerElements",
         "blockContainers",
@@ -250,6 +255,7 @@
         "limitedSVGElementsGraphicsAndUse",
         "limitedSVGElementsPath",
         "limitedSVGElementsShapes",
+        "limitedSVGElementsShapesAndTextContent",
         "limitedSVGElementsShapeText",
         "limitedSVGElementsTextContent",
         "listItems",

diff --git a/l10n/css.json b/l10n/css.json
@@ -91,6 +91,9 @@
     "ja": "{{cssxref(\"length\")}} の場合は絶対的な値、それ以外はパーセント値",
     "ru": "для {{cssxref(\"length\")}} абсолютного значения, иначе процент"
   },
+  "absoluteLengthOrPercentageNumbersConverted": {
+    "en-US": "an absolute {{cssxref(\"length\")}} or {{cssxref(\"percentage\")}}, numbers converted to absolute lengths first"
+  },
   "absoluteLengthsSpecifiedColorAsSpecified": {
     "de": "Längen absolut gemacht; angegebene Farben berechnet; ansonsten wie angegeben",
     "en-US": "any length made absolute; any specified color computed; otherwise as specified",
@@ -993,10 +996,13 @@
     "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\")}}"
+    "en-US": "{{SVGElement(\"circle\")}}, {{SVGElement(\"ellipse\")}}, {{SVGElement(\"line\")}}, {{SVGElement(\"path\")}}, {{SVGElement(\"polygon\")}}, {{SVGElement(\"polyline\")}}, and {{SVGElement(\"rect\")}} elements in an <code>svg</code>"
+  },
+  "limitedSVGElementsShapesAndTextContent": {
+    "en-US": "{{SVGElement(\"circle\")}}, {{SVGElement(\"ellipse\")}}, {{SVGElement(\"line\")}}, {{SVGElement(\"path\")}}, {{SVGElement(\"polygon\")}}, {{SVGElement(\"polyline\")}}, {{SVGElement(\"rect\")}}, {{SVGElement(\"text\")}}, {{SVGElement(\"textPath\")}}, and {{SVGElement(\"tspan\")}} elements in an <code>svg</code>"
   },
   "limitedSVGElementsTextContent": {
-    "en-US": "{{SVGElement(\"text\")}}, {{SVGElement(\"textPath\")}} , and {{SVGElement(\"tspan\")}} elements in {{SVGElement(\"svg\")}}"
+    "en-US": "{{SVGElement(\"text\")}}, {{SVGElement(\"textPath\")}}, and {{SVGElement(\"tspan\")}} elements in an <code>svg</code>"
   },
   "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",
@@ -1005,6 +1011,9 @@
     "ja": "絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。",
     "ru": "Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово"
   },
+  "listEachItemConsistingOfAbsoluteLengthPercentageOrKeyword": {
+    "en-US": "A comma separated list of absolute lengths or percentages, numbers converted to absolute lengths first, or keyword specified"
+  },
   "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage": {
     "en-US": "A list where each item may be 'normal', a length percentage, or a timeline range name and a length percentage",
     "ja": "リストで、それぞれの項目は 'normal'、長さのパーセント値、タイムラインの範囲名と長さのパーセント値のいずれか。"
@@ -1457,6 +1466,9 @@
   "referToSVGViewportWidth": {
     "en-US": "refer to the width of the current SVG viewport"
   },
+  "referToSVGViewportDiagonal": {
+    "en-US": "refer to the normalized diagonal measure of the current SVG viewport’s applied {{SVGAttr(\"viewBox\")}}, or of the viewport itself if no `viewBox` is specified"
+  },
   "referToTotalPathLength": {
     "de": "beziehen sich auf die Gesamtlänge des Pfads",
     "en-US": "refer to the total path length",