Bug 14586 - Dynamically inserted stylesheets cannot be accessed via document.styleSheets
Summary: Dynamically inserted stylesheets cannot be accessed via document.styleSheets
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 523.x (Safari 3)
Hardware: Mac OS X 10.4
: P2 Normal
Assignee: Ryosuke Niwa
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2007-07-11 15:23 PDT by Andy Allcorn
Modified: 2022-07-26 00:33 PDT (History)
5 users (show)

See Also:


Attachments
Test case (simple html + css files in zip archive) (853 bytes, application/zip)
2007-07-11 15:31 PDT, Andy Allcorn
no flags Details
Sync test case (393 bytes, text/html)
2022-07-24 22:22 PDT, Ryosuke Niwa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Andy Allcorn 2007-07-11 15:23:55 PDT
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.
Comment 1 Andy Allcorn 2007-07-11 15:31:14 PDT
Created attachment 15480 [details]
Test case (simple html + css files in zip archive)
Comment 2 Alexey Proskuryakov 2007-07-11 21:57:08 PDT
Confirmed with r24226.
Comment 3 Andy Allcorn 2007-07-12 06:11:48 PDT
Followup - although Firefox makes the stylesheet visible it is still not editable, so it partially shares this bug.
Comment 4 Mitch 74 2010-04-23 03:42:12 PDT
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).
Comment 5 Simon Fraser (smfr) 2011-01-08 21:32:40 PST
That's what you said in bug 38113.
Comment 6 Mitch 74 2011-01-09 03:15:42 PST
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.
Comment 7 Ryosuke Niwa 2022-07-24 22:01:35 PDT
We do eventually show all style sheets. It's just that it happens asynchronously.
Comment 8 Ryosuke Niwa 2022-07-24 22:17:59 PDT
(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.
Comment 9 Ryosuke Niwa 2022-07-24 22:22:18 PDT
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.
Comment 10 Ryosuke Niwa 2022-07-25 23:21:52 PDT
Let's add this as a test case.
Comment 11 Ryosuke Niwa 2022-07-25 23:26:16 PDT
Pull request: https://github.com/WebKit/WebKit/pull/2731
Comment 12 EWS 2022-07-26 00:32:37 PDT
Committed 252816@main (dc0078a2b47f): <https://commits.webkit.org/252816@main>

Reviewed commits have been landed. Closing PR #2731 and removing active labels.
Comment 13 Radar WebKit Bug Importer 2022-07-26 00:33:17 PDT
<rdar://problem/97591536>