1876974 - "disabled" property is always "false" for alternate stylesheets linked via <link>

Status: RESOLVED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[Siemens]

Attachment: bug-sample.zip

Steps to reproduce:

At first, this is how it works with inline alternate stylesheets (it seems fine to me):

1. Extract the archive.
2. Open inline-css-toggle.html
3. See debug info:
   Pink enabled
   Yellow disabled
   Rebecca disabled

That's correct.
4. Press Alt, then View → Page Style → Yellow.
Debug info changes to
Pink disabled
Yellow enabled
Rebecca disabled

That's correct.
5. Press F12, go to Style Editor tab.
Click on eye icons in the stylesheet list in any order any number of times. Notice that "disabled" property reflects Style Editor eye icons state. That's correct.

The bug with external alternate stylesheets linked via <link>:

1. Open css-toggling-bug/index.html

2. See debug info:
   Pink enabled
   Yellow enabled
   Rebecca enabled
   That isn't correct. Pink is enabled indeed, but Yellow and Rebecca are inactive now and thus should be disabled.

So, it should be
Pink enabled
Yellow disabled
Rebecca disabled,
as it was with <style> example.

3. Press Alt, then View → Page Style → Yellow.
   Debug info is the same (all enabled) despite Pink became inactive. That isn't correct.
   It should be
   Pink disabled
   Yellow enabled
   Rebecca disabled,
   as it was with <style> example.

4. Press F12, go to Style Editor tab.
   Click on eye icons in the stylesheet list in any order any number of times. The styles applies to the page correctly, but "disabled" property doesn't reflects it.

Actual results:

"disabled" property is always "false" for stylesheets linked via <link>.
It works correctly only for inline <style> stylesheets.

Expected results:

As per MDN (https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet/disabled),

A style sheet may be disabled by manually setting this property to true or if it's an inactive alternative style sheet.

Only one alternate stylesheet should be enabled at the same time. Enabling another alternate stylesheet should toggle "disabled" property on other alternate stylesheets.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'DevTools::Style Editor' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Siemens]

The Bugbug bot thinks this bug should belong to the 'DevTools::Style Editor' component

Actually isn't. I believe this is a CSSOM issue.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

This is working as expected. HTMLLinkElement.disabled and HTMLStyleElement.disabled are different per spec. This is somewhat unfortunate, but it is because HTMLLinkElement.disabled was implemented after the fact with a variety of compat constraints in WebKit and blink, and HTMLStyleElement.disabled already existed with a different meaning.

In particular:

• HTMLLinkElement.disabled just reflects the disabled attribute as per this bit of the spec
• HTMLStyleElement.disabled just forwards to the CSSStyleSheet.disabled attribute as per this bit of the spec

You can read more here about why we had to specify <link disabled> in the way we did.

But the TLDR is that you just want to change your code from:

            let i, styleEl, debugInfo = '';
            for (i = 0; (styleEl = document.getElementsByTagName("link")[i]); i++) {
                debugInfo += styleEl.getAttribute("title")
                    + ' ' + (styleEl.disabled ? 'disabled' : 'enabled') + '\n';
            }

To:

            let i, styleEl, debugInfo = '';
            for (i = 0; (styleEl = document.getElementsByTagName("link")[i]); i++) {
                debugInfo += styleEl.getAttribute("title")
                    + ' ' + (styleEl.sheet?.disabled ? 'disabled' : 'enabled') + '\n';
            }

(So, read the stylesheet disabled property directly, which is what HTMLStyleElement.disabled does anyways)