)]}'
{"id": 4861677550043136, "name": "Support 'path-length' as a CSS property.", "summary": "This change introduces a new CSS property, 'path-length', which maps to the existing SVG 'pathLength' presentation attribute. It applies to SVG geometry elements that support 'pathLength' (including <path>, <circle>, <rect>, <line>, <polyline>, <polygon>, and <ellipse>).\n\nExposing 'pathLength' as a CSS property allows authors to specify it via stylesheets, inline styles, and animations, enabling it to participate in normal CSS cascading, specificity, transitions, and animations. The property affects all computations that depend on the total path length, including stroke dash rendering and text positioning along a <textPath>.\n\nCSS declarations override the presentation attribute following standard CSS precedence rules. The initial value of 'path-length' is 'none', which represents the absence of an author-supplied path length and is distinct from an explicit numeric value such as '0'.\n\nExisting attribute-only behavior is preserved when the feature is disabled.", "markdown_fields": [], "blink_components": ["Blink>SVG"], "star_count": 90, "search_tags": [], "created": {"by": "viralipurbey@microsoft.com", "when": "2026-02-23 20:21:42.036763"}, "updated": {"by": "viralipurbey@microsoft.com", "when": "2026-06-10 15:06:31.608503"}, "category": "Miscellaneous", "category_int": 2, "feature_notes": "The SVG 2 specification defines the 'pathLength' attribute. Formal CSS property text exist in a draft PR https://github.com/w3c/svgwg/pull/1073; the SVG Working Group has come to a resolution https://github.com/w3c/svgwg/issues/773. This implementation is based on that resolution and follows the same pattern used for other SVG geometry properties already exposed as CSS properties (e.g. 'r', 'cx', 'cy', 'd').", "web_feature": "svg-path-length-css", "is_official_web_feature": true, "webdx_usecounter_enum": null, "enterprise_feature_categories": [], "enterprise_product_category": 0, "is_releasenotes_content_reviewed": false, "is_releasenotes_publish_ready": false, "stages": [{"id": 5108077365952512, "created": "2026-02-23 20:21:42.761272", "feature_id": 4861677550043136, "stage_type": 220, "display_name": null, "intent_stage": 1, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": null, "announcement_url": null, "experiment_goals": null, "experiment_risks": null, "origin_trial_id": null, "origin_trial_feedback_url": null, "ot_action_requested": false, "ot_approval_buganizer_component": null, "ot_approval_buganizer_custom_field_id": null, "ot_approval_criteria_url": null, "ot_approval_group_email": null, "ot_chromium_trial_name": null, "ot_description": null, "ot_display_name": null, "ot_documentation_url": null, "ot_emails": [], "ot_feedback_submission_url": null, "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": null, "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": null, "ot_webfeature_use_counter": null, "extensions": [], "experiment_extension_reason": null, "ot_stage_id": null, "finch_url": null, "rollout_milestone": null, "rollout_platforms": [], "rollout_details": null, "rollout_impact": 2, "rollout_stage_plan": null, "enterprise_policies": [], "desktop_first": null, "android_first": null, "ios_first": null, "webview_first": null, "desktop_last": null, "android_last": null, "ios_last": null, "webview_last": null}, {"id": 5987577456885760, "created": "2026-02-23 20:21:42.900302", "feature_id": 4861677550043136, "stage_type": 230, "display_name": null, "intent_stage": 2, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": null, "announcement_url": null, "experiment_goals": null, "experiment_risks": null, "origin_trial_id": null, "origin_trial_feedback_url": null, "ot_action_requested": false, "ot_approval_buganizer_component": null, "ot_approval_buganizer_custom_field_id": null, "ot_approval_criteria_url": null, "ot_approval_group_email": null, "ot_chromium_trial_name": null, "ot_description": null, "ot_display_name": null, "ot_documentation_url": null, "ot_emails": [], "ot_feedback_submission_url": null, "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": null, "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": null, "ot_webfeature_use_counter": null, "extensions": [], "experiment_extension_reason": null, "ot_stage_id": null, "finch_url": null, "rollout_milestone": null, "rollout_platforms": [], "rollout_details": null, "rollout_impact": 2, "rollout_stage_plan": null, "enterprise_policies": [], "desktop_first": null, "android_first": null, "ios_first": null, "webview_first": null, "desktop_last": null, "android_last": null, "ios_last": null, "webview_last": null}, {"id": 5185502204526592, "created": "2026-02-23 20:21:42.944717", "feature_id": 4861677550043136, "stage_type": 250, "display_name": null, "intent_stage": 3, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": null, "announcement_url": null, "experiment_goals": null, "experiment_risks": null, "origin_trial_id": null, "origin_trial_feedback_url": null, "ot_action_requested": false, "ot_approval_buganizer_component": null, "ot_approval_buganizer_custom_field_id": null, "ot_approval_criteria_url": null, "ot_approval_group_email": null, "ot_chromium_trial_name": null, "ot_description": null, "ot_display_name": null, "ot_documentation_url": null, "ot_emails": [], "ot_feedback_submission_url": null, "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": null, "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": null, "ot_webfeature_use_counter": null, "extensions": [], "experiment_extension_reason": null, "ot_stage_id": null, "finch_url": null, "rollout_milestone": null, "rollout_platforms": [], "rollout_details": null, "rollout_impact": 2, "rollout_stage_plan": null, "enterprise_policies": [], "desktop_first": null, "android_first": null, "ios_first": null, "webview_first": null, "desktop_last": null, "android_last": null, "ios_last": null, "webview_last": null}, {"id": 5192758191063040, "created": "2026-02-23 20:21:43.095548", "feature_id": 4861677550043136, "stage_type": 260, "display_name": null, "intent_stage": 5, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": "https://groups.google.com/a/chromium.org/d/msgid/blink-dev/SIAP153MB1213B2575DD18EA3E24F528DC13F2%40SIAP153MB1213.APCP153.PROD.OUTLOOK.COM", "announcement_url": null, "experiment_goals": null, "experiment_risks": null, "origin_trial_id": null, "origin_trial_feedback_url": null, "ot_action_requested": false, "ot_approval_buganizer_component": null, "ot_approval_buganizer_custom_field_id": null, "ot_approval_criteria_url": null, "ot_approval_group_email": null, "ot_chromium_trial_name": null, "ot_description": null, "ot_display_name": null, "ot_documentation_url": null, "ot_emails": [], "ot_feedback_submission_url": null, "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": null, "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": null, "ot_webfeature_use_counter": null, "extensions": [], "experiment_extension_reason": null, "ot_stage_id": null, "finch_url": null, "rollout_milestone": null, "rollout_platforms": [], "rollout_details": null, "rollout_impact": 2, "rollout_stage_plan": null, "enterprise_policies": [], "desktop_first": 150, "android_first": 150, "ios_first": null, "webview_first": 150, "desktop_last": null, "android_last": null, "ios_last": null, "webview_last": null}], "accurate_as_of": "2026-06-08 13:01:34.742847", "creator_email": "viralipurbey@microsoft.com", "updater_email": "viralipurbey@microsoft.com", "owner_emails": ["viralipurbey@microsoft.com"], "editor_emails": ["viralipurbey@microsoft.com"], "cc_emails": ["viralipurbey@microsoft.com"], "spec_mentor_emails": [], "unlisted": false, "deleted": false, "editors": ["viralipurbey@microsoft.com"], "cc_recipients": ["viralipurbey@microsoft.com"], "spec_mentors": [], "creator": "viralipurbey@microsoft.com", "feature_type": "Chromium catches up", "feature_type_int": 1, "intent_stage": "None", "intent_stage_int": 0, "active_stage_id": 5192758191063040, "bug_url": "https://issues.chromium.org/issues/40670251", "launch_bug_url": null, "new_crbug_url": "https://bugs.chromium.org/p/chromium/issues/entry?components=Blink>SVG&blocking=40670251&cc=viralipurbey@microsoft.com", "screenshot_links": [], "first_enterprise_notification_milestone": null, "enterprise_impact": 1, "breaking_change": false, "confidential": false, "shipping_year": 2026, "flag_name": null, "finch_name": "SvgPathLengthCssProperty", "non_finch_justification": null, "ongoing_constraints": null, "rollout_plan": 0, "rollout_plan_displayname": "Will ship enabled for all users", "motivation": "Today, 'pathLength' can only be specified as an SVG presentation attribute. As a result, it cannot participate in the CSS cascade, specificity, animations, or transitions, unlike other SVG geometry properties such as 'r', 'cx', 'cy', 'x', 'y', and 'd', which are already exposed as CSS properties.\n\nThis limitation prevents authors from controlling total path length using stylesheets, overriding presentation attributes via CSS, or animating 'pathLength' using standard CSS animation and transition mechanisms. Common authoring patterns, such as CSS-driven stroke dash animations and text-on-path effects that rely on scalable path length, require workarounds or script today.\n\nPromoting 'pathLength' to a CSS property aligns it with existing SVG geometry properties, enables full participation in CSS cascading and animation, and closes a long-standing authoring gap identified by the SVG Working Group (https://github.com/w3c/svgwg/issues/773). Existing attribute behavior is preserved, with CSS declarations taking precedence according to standard cascade rules.", "devtrial_instructions": null, "activation_risks": null, "measurement": null, "availability_expectation": null, "adoption_expectation": null, "adoption_plan": null, "initial_public_proposal_url": null, "explainer_links": [], "requires_embedder_support": false, "spec_link": "https://github.com/w3c/svgwg/pull/1073", "api_spec": true, "automation_spec": false, "interop_compat_risks": "Behavior change risk:\nPreviously, pathLength was only accessible as an SVG presentation attribute. This change introduces a new path-length CSS property that maps to the existing SVG behavior. Because this is a new CSS property and does not alter default rendering when unused, the risk to existing content is minimal. The presentation attribute mapping follows standard SVG/CSS cascade rules, meaning CSS declarations take precedence over the pathLength attribute, consistent with how other SVG presentation attributes behave.\n\nMitigation:\nThe feature is guarded by a Finch flag (SvgPathLengthCssProperty), which can be used as a kill switch if unexpected compatibility issues arise.\n\nEdge cases: \nBlink treats `path-length: 0` as an infinite scaling factor: any non-zero dash value in `stroke-dasharray` extends to infinity, rendering the stroke as solid. This matches the SVG 2 spec text (\"a value of zero is valid and must be treated as a scaling factor of infinity\"). Earlier WG discussions on zero-value semantics (https://github.com/w3c/svgwg/issues/81, https://github.com/w3c/svgwg/issues/383) have been resolved and closed. The spec PR (https://github.com/w3c/svgwg/pull/1073) has WG consensus and codifies this behavior. This change preserves Blink's existing attribute semantics for `pathLength = 0` while exposing the same behavior through CSS, verified by `path-length-css-zero.tentative.svg`.", "all_platforms": true, "all_platforms_descr": null, "non_oss_deps": null, "anticipated_spec_changes": "The spec PR (https://github.com/w3c/svgwg/pull/1073) has WG consensus and is about to be merged. No anticipated spec changes that would introduce web compat or interop risk.", "security_risks": "This feature introduces a new CSS property for an existing SVG concept (`pathLength`). It does not add new capabilities beyond what authors can already express via the `pathLength` attribute, and it reuses existing `parsing/rendering` logic. No new cross-origin access, network access, or privilege changes are introduced.", "ergonomics_risks": null, "wpt": true, "wpt_descr": "Yes.\n\nParsing:\n- Valid values: https://wpt.fyi/results/svg/path/parsing/path-length-valid.tentative.svg\n- Invalid values: https://wpt.fyi/results/svg/path/parsing/path-length-invalid.tentative.svg\n- Computed values: https://wpt.fyi/results/svg/path/parsing/path-length-computed.tentative.svg\n\nProperty behavior:\n- Inheritance: https://wpt.fyi/results/svg/path/property/inheritance.tentative.svg\n\nAnimations:\n- SVG animate element: https://wpt.fyi/results/svg/animations/animate-pathLength.tentative.html\n- CSS interpolation: https://wpt.fyi/results/svg/path/animations/path-length-interpolation.tentative.html\n\nRendering / distance:\n- CSS path-length rendering: https://wpt.fyi/results/svg/path/distance/path-length-css-property.tentative.svg\n- CSS overrides presentation attribute: https://wpt.fyi/results/svg/path/distance/path-length-css-overrides-presentation-attribute.tentative.svg\n- Zero value handling (path-length: 0): https://wpt.fyi/results/svg/path/distance/path-length-css-zero.tentative.svg\n\nText on path:\n- textPath with display:none: https://wpt.fyi/results/svg/text/reftests/textpath-pathlength-css-display-none.tentative.svg", "webview_risks": "No.\nThis change does not deprecate or modify existing APIs. It introduces a new CSS property that maps to an existing SVG presentation attribute and preserves existing attribute-only behavior when the feature flag is disabled.", "devrel_emails": ["devrel-chromestatus-all@google.com"], "debuggability": "Issues related to this feature are debuggable using existing CSS and SVG inspection tools. The computed value of path-length is visible in DevTools\u2019 Computed Style panel. Invalid values are rejected at parse time, and the \"none\" initial value is represented distinctly from authored numeric values (including 0). No new debugging tooling is required.", "doc_links": [], "sample_links": [], "prefixed": null, "tags": [], "tag_review": "Not applicable.", "tag_review_status": "Not applicable", "tag_review_status_int": 4, "security_review_status": "Not applicable", "security_review_status_int": 4, "privacy_review_status": "Not applicable", "privacy_review_status_int": 4, "security_continuity_id": null, "security_launch_issue_id": null, "updated_display": null, "resources": {"samples": [], "docs": []}, "comments": "The SVG 2 specification defines the 'pathLength' attribute. Formal CSS property text exist in a draft PR https://github.com/w3c/svgwg/pull/1073; the SVG Working Group has come to a resolution https://github.com/w3c/svgwg/issues/773. This implementation is based on that resolution and follows the same pattern used for other SVG geometry properties already exposed as CSS properties (e.g. 'r', 'cx', 'cy', 'd').", "ff_views": 5, "safari_views": 5, "web_dev_views": 2, "browsers": {"chrome": {"bug": "https://issues.chromium.org/issues/40670251", "blink_components": ["Blink>SVG"], "devrel": ["devrel-chromestatus-all@google.com"], "owners": ["viralipurbey@microsoft.com"], "origintrial": false, "prefixed": null, "flag": false, "status": {"text": "Proposed", "val": 2, "milestone_str": "Proposed"}, "announced": true, "desktop": 150, "android": 150, "webview": 150, "ios": null}, "ff": {"view": {"url": "https://github.com/mozilla/standards-positions/issues/1363", "notes": null, "text": "No signal", "val": 5}}, "safari": {"view": {"url": "https://github.com/WebKit/standards-positions/issues/621", "notes": null, "text": "Closed Without a Position", "val": 5}}, "webdev": {"view": {"text": "Positive", "val": 2, "url": null, "notes": "8 users have upvoted for this CrBug."}}, "other": {"view": {"text": null, "val": null, "url": null, "notes": null}}}, "standards": {"spec": "https://github.com/w3c/svgwg/pull/1073", "maturity": {"text": "Specification currently under development in a Working Group", "short_text": "Working draft", "val": 4}}, "is_released": false, "is_enterprise_feature": false, "experiment_timeline": null, "ai_test_eval_report": null, "ai_test_eval_run_status": null, "ai_test_eval_status_timestamp": null}