Bug 14586 – Dynamically inserted stylesheets cannot be accessed via document.styleSheets

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Andy Allcorn]

When adding a stylesheet by javascript (appendChild to the head element), it cannot be accessed via document.styleSheets and therefore cannot be modified (the styles do apply).

Reproduce: Add a stylesheet using javascript and attempt to find it (or its rules) through document.styleSheets

Actual results: The browser behaves as if the stylesheet is not added (despite using its contents).

Expected results: The stylesheet can be accessed through document.getStylesheets.

Does not occur on Firefox 2.0.0.2 - it correctly makes the stylesheet accessible.

[Andy Allcorn]

Created attachment 15480 [details]
Test case (simple html + css files in zip archive)

[Alexey Proskuryakov]

Confirmed with r24226.

[Andy Allcorn]

Followup - although Firefox makes the stylesheet visible it is still not editable, so it partially shares this bug.

[Mitch 74]

Three years and no work done on this...

Well now, a usable test case, that hits on a similar problem (I think this bug should be renamed anyway).

Webkit doesn't populate document.styleSheets with stylesheets other than the default/preferred one (no way to access alternate stylesheets for example), so there is no way to use a Javascript stylesheet switcher. The following methods don't work:

 - inserting a new stylesheet through Javascript then enabling it
 - disabling the preferred stylesheet
 - enabling an alternate stylesheet
 - disabling (as in, object.disabled=true) the (X)HTML element that loads the preferred stylesheet (STYLE or LINK tags)

Untested: deleting the DOM node.

Test case:

http://www.arcrachatcredits.org

This website disables the stylesheet 'style-vert-css2.css' loaded through a STYLE tag in the head if the document's body is smaller than 640x400 (and re-enables it if resized above said resolution).

The test case works on Firefox 2.0 to 3.7a5pre, IE 7 (real and emulated) to 9, Opera 10.10.

It doesn't work in Konqueror 4.2, Chromium 5.0.339, Chrome 4.1.249.1045, Safari 4.0.5 (531.22.7).

[Simon Fraser (smfr)]

That's what you said in bug 38113.

[Mitch 74]

I said it in bug 38113 too because I would guess the two bugs are linked: Webkit doesn't support alternate stylesheets at all (outside of disregarding them) - eventhough Firefox, IE, Opera etc. do.

[Ryosuke Niwa]

We do eventually show all style sheets. It's just that it happens asynchronously.

[Ryosuke Niwa]

(In reply to Ryosuke Niwa from comment #7)
> We do eventually show all style sheets. It's just that it happens
> asynchronously.

Actually, this is true of all major browser engines like Gecko and Blink.

So this must have been fixed as of https://commits.webkit.org/181549@main or sometime earlier than that.

[Ryosuke Niwa]

Created attachment 461191 [details]
Sync test case

This modified test case inserts a style element with inline style and checks document.styleSheets.length. Here, all major browsers including Safari show 1 as the result.

[Ryosuke Niwa]

Let's add this as a test case.

[Ryosuke Niwa]

Pull request: https://github.com/WebKit/WebKit/pull/2731

[EWS]

Committed 252816@main (dc0078a2b47f): <https://commits.webkit.org/252816@main>

Reviewed commits have been landed. Closing PR #2731 and removing active labels.

[Radar WebKit Bug Importer]

<rdar://problem/97591536>