1712623 - Add disabled property to SVGStyleElement

Status: RESOLVED FIXED

(Core :: SVG, enhancement)

Description

[Robert Longson [:longsonr]]

Chrome supports this: https://github.com/chromium/chromium/blob/d7da0240cae77824d1eda25745c4022757499131/third_party/blink/renderer/core/svg/svg_style_element.idl#L42 The comment there is old i.e. prior to emilio's disabled rewrite in bug 1281135 I think.

It's consistent with the specification's desire to align SVG and HTML style elements per https://www.w3.org/TR/SVG2/styling.html#StyleElement

And users want it per https://stackoverflow.com/questions/66785148/can-a-svgstyleelement-be-disabled-like-an-htmlstyleelement-can

Comment 1

[Robert Longson [:longsonr]]

Attachment: Bug 1712623 - add disabled property to SVGStyleElement

consistent with Chrome, the desires of the specification

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

There's a r+ patch which didn't land and no activity in this bug for 2 weeks.
:longsonr, could you have a look please?
For more information, please visit auto_nag documentation.

Comment 3

[Robert Longson [:longsonr]]

Sent intent to ship: https://groups.google.com/a/mozilla.org/g/dev-platform/c/qMoKScceGac/m/QudczRplBgAJ?utm_medium=email&utm_source=footer

Spec change landed here: https://github.com/w3c/svgwg/pull/879 although the spec itself has not been regenerated.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a36d2a126866
add disabled property to SVGStyleElement r=emilio

Comment 5

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34630 for changes under testing/web-platform/tests

Comment 6

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/a36d2a126866

Comment 7

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 8

[Hamish Willee]

FYI FF104 docs work for this can be tracked in https://github.com/mdn/content/issues/18775

Hi Robert,

Some questions around SVGStyleElement, including to do with disabled (docs for the page in poor form currently so I want to make sure we cover everything).

1. Based on your answer here, I have attached some test code for SVGStyleElement here that logs the media, type, disabled, sheet properties. What this appears to show is that FF does not support media or type properties in the same way. Can you explain why?

2. The subset of your code in which disables might be set is shown below. This makes sense - you first create an element of the svg namespace, which is what tells the user agent you're after an SVGStyleElement, then you create some style information and add it to that element. The disabled only works once you have added the stylesheet information to the node.

    const svg = document.getElementsByTagName("svg")[0];
    const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
    const node = document.createTextNode('circle { fill: red; }');
   
    svg.appendChild(style);
    style.disabled=true;  //Won't work!
    style.appendChild(node);
    // style.disabled=true;  //Will work if not commented
   

   It is inline with the spec that there must be a stylesheet or setting disabled = true has no effect. However how then should you add a stylesheet "initially disabled"? (I'd kind of assumed the first case would work - and "empty stylesheet" not being the same as "no stylesheet".

3. HTMLStyleElement.type is marked as deprecated in MDN docs. Is the same thing true for SVGStyleElement? The spec seems to indicate the default value but not other values that might be supplied - what might they be?

Comment 9

[Robert Longson [:longsonr]]

1, 2, 3 SVG style elements work the same as for HTML style elements.