The css d property for svg paths isn't supported in Pale Moon #1904

Open
opened 6 months ago by Joshix · 5 comments

Steps to reproduce (in Pale Moon 31.0.0):

  1. go to https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/SVG/Attribute/d/sample.using_d_as_a_css_property.html (found on https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#using_d_as_a_css_property )
  2. hover over the heard and see that it doesn't change on hover

Expected behaviour:
The heart should get crossed. (like stated on https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#using_d_as_a_css_property )

The reason why it doesn't work:

#svg_css_ex1:hover path {
  d: path("M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90")
}

doesn't get applied because the css d property for svg paths isn't supported in Pale Moon

Is that enough information?

btw It's rude to just close an issue and don't give users the chance to explain themselves

Steps to reproduce (in Pale Moon 31.0.0): 1. go to https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/SVG/Attribute/d/_sample_.using_d_as_a_css_property.html (found on https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#using_d_as_a_css_property ) 2. hover over the heard and see that it doesn't change on hover Expected behaviour: The heart should get crossed. (like stated on https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#using_d_as_a_css_property ) The reason why it doesn't work: ``` #svg_css_ex1:hover path { d: path("M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90") } ``` doesn't get applied because the css d property for svg paths isn't supported in Pale Moon Is that enough information? btw It's rude to just close an issue and don't give users the chance to explain themselves
Collaborator

Actually, it's only the change on hover that isn't working. The heart would not even be drawn at all if the "d" property were not supported. So the property itself appears to be supported, just not in a way that allows it to update itself on hover.

Actually, it's only the change on hover that isn't working. The heart would not even be drawn at all if the "d" property were not supported. So the property itself appears to be supported, just not in a way that allows it to update itself on hover.
Poster

The heart is drawn because the d is specified in the html. The update comes from the css.
The d property in css isn't supported.

The heart is drawn because the d is specified in the html. The update comes from the css. The d property in css isn't supported.
Collaborator

https://bugzilla.mozilla.org/show_bug.cgi?id=1340422

Okay, I understand the problem now. So apparently this was broken in Firefox until version 91. I don't know how much help the bug will be, but this is how they fixed it.

https://bugzilla.mozilla.org/show_bug.cgi?id=1340422 Okay, I understand the problem now. So apparently this was broken in Firefox until version 91. I don't know how much help the bug will be, but this is how they fixed it.
Owner

Firefox didn't support this until 97, not 91.

d/path is supported in SVG but what is asked for here is to link it to CSS styling (similar to a few hand-picked other attributes in SVG extending beyond the SVG element to be controlled by CSS).

Since Firefox will be doing this via Servo/Rust, this will require a new implementation for us. SVG is a vector image format. Blurring the lines between images and css this way is not something I'm happy with, to begin with. Looking at the support table this is another Chrome-ism, by the looks of it.

Unfortunately for OP I also don't see this as having high priority. Patches welcome if someone wants to have a go at this.

Firefox didn't support this until *97*, not 91. d/path is supported in SVG but what is asked for here is to **link it to CSS styling** (similar to a few hand-picked other attributes in SVG extending beyond the SVG element to be controlled by CSS). Since Firefox will be doing this via Servo/Rust, this will require a new implementation for us. SVG is a vector image format. Blurring the lines between images and css this way is not something I'm happy with, to begin with. Looking at the support table this is another Chrome-ism, by the looks of it. Unfortunately for OP I also don't see this as having high priority. Patches welcome if someone wants to have a go at this.
Moonchild added the
Enhancement
Layout - CSS
Images
Low Priority
labels 6 months ago
Owner

https://bugzilla.mozilla.org/show_bug.cgi?id=1340422

Emilio again. Why am I not surprised :D

> https://bugzilla.mozilla.org/show_bug.cgi?id=1340422 Emilio again. Why am I not surprised :D
Sign in to join this conversation.
No Milestone
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MoonchildProductions/UXP#1904
Loading…
There is no content yet.