Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 12 commits into from
Sep 5, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
565162b
First stroke properties
meyerweb Aug 15, 2024
e88bd18
feat: Add stroke CSS SVG properties
meyerweb Aug 16, 2024
1319932
Fixed shorthand animation, computed, etc. referents
meyerweb Aug 16, 2024
db2418a
Further lint corrections
meyerweb Aug 16, 2024
2815ea8
Restored 'asLonghands'
meyerweb Aug 16, 2024
74927fb
Restored 'asLonghands'
meyerweb Aug 16, 2024
51dadf9
Added 'asLonghands'
meyerweb Aug 16, 2024
9e0ceae
JSON formatting error fixes
meyerweb Aug 16, 2024
4ab884f
Schema correction
meyerweb Aug 16, 2024
7e6fa2c
Merge branch 'main' into css/strokes
meyerweb Aug 26, 2024
9234215
fix: broken JSON in /Web/CSS/stroke prop
bsmth Sep 5, 2024
a5bec9a
Merge branch 'main' into css/strokes
bsmth Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 144 additions & 0 deletions css/properties.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9441,6 +9441,150 @@
"status": "standard",
"mdn_url": "https://developer.mozilla.org/docs/Web/CSS/shape-rendering"
},
"stroke": {
"syntax": "",
"media": "visual",
"inherited": true,
"animationType": [
bsmth marked this conversation as resolved.
Show resolved Hide resolved
"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>",
bsmth marked this conversation as resolved.
Show resolved Hide resolved
"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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In https://www.w3.org/TR/fill-stroke-3/#stroke-linejoin, it has the following:

Suggested change
"syntax": "miter | miter-clip | round | bevel | arcs",
"syntax": "[ crop | arcs | miter ] || [ bevel | round | stupid ]",

Am I looking at the right spec?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The MDN page references https://drafts.fxtf.org/fill-stroke-3/#stroke-linejoin

which has the following syntax [ crop | arcs | miter ] || [ bevel | round | fallback ]

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No browser supports this syntax, and all of them support the syntax I included. Is there a way to mark formal syntaxes that diverge from reality? Happy to use that if so.

Copy link
Member

@bsmth bsmth Sep 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's my understanding that we should be reflecting spec land in this repo and BCD will be where we have implementation data (reality) / granularity per value, but I'm going to get confirmation and get back with an answer shortly.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Eric, we discussed this, and as for mdn/data we always mirror spec syntax, but considering the circumstance with SVG definitions / CSS spec definitions, your additions are good for now so that we have formal definition values.

"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>",
bsmth marked this conversation as resolved.
Show resolved Hide resolved
"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",
Expand Down
6 changes: 6 additions & 0 deletions css/properties.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
"referToSVGViewportHeight",
"referToSVGViewportSize",
"referToSVGViewportWidth",
"referToSVGViewportDiagonal",
"referToTotalPathLength",
"referToWidthAndHeightOfElement",
"referToWidthOfAffectedGlyph",
Expand Down Expand Up @@ -110,6 +111,7 @@
"absoluteLengthOrNone",
"absoluteLengthOrNormal",
"absoluteLengthOrPercentage",
"absoluteLengthOrPercentageNumbersConverted",
"absoluteLengthsSpecifiedColorAsSpecified",
"absoluteLengthZeroIfBorderStyleNoneOrHidden",
"absoluteLengthZeroOrLarger",
Expand All @@ -119,6 +121,7 @@
"asColorOrAbsoluteURL",
"asDefinedForBasicShapeWithAbsoluteURIOtherwiseAsSpecified",
"asLength",
"asLonghands",
"asSpecified",
"asSpecifiedAppliesToEachProperty",
"asSpecifiedButVisibleOrClipReplacedToAutoOrHiddenIfOtherValueDifferent",
Expand All @@ -142,6 +145,7 @@
"keywordPlusIntegerIfDigits",
"lengthAbsolutePercentageAsSpecifiedOtherwiseAuto",
"listEachItemConsistingOfAbsoluteLengthPercentageAndOrigin",
"listEachItemConsistingOfAbsoluteLengthPercentageOrKeyword",
"listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage",
"listEachItemConsistingOfPairsOfAutoOrLengthPercentage",
"listEachItemHasTwoKeywordsOnePerDimension",
Expand Down Expand Up @@ -198,6 +202,7 @@
"allElementsTreeAbidingPseudoElementsPageMarginBoxes",
"allElementsUAsNotRequiredWhenCollapse",
"anyElementEffectOnProgressAndMeter",
"asLonghands",
"beforeAndAfterPseudos",
"blockContainerElements",
"blockContainers",
Expand Down Expand Up @@ -250,6 +255,7 @@
"limitedSVGElementsGraphicsAndUse",
"limitedSVGElementsPath",
"limitedSVGElementsShapes",
"limitedSVGElementsShapesAndTextContent",
"limitedSVGElementsShapeText",
"limitedSVGElementsTextContent",
"listItems",
Expand Down
16 changes: 14 additions & 2 deletions l10n/css.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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'、長さのパーセント値、タイムラインの範囲名と長さのパーセント値のいずれか。"
Expand Down Expand Up @@ -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",
Expand Down
Loading