Bug 56932 – Alternate stylesheets are not present in document.styleSheets

• Component: DOM
• Status: RESOLVED FIXED

[Michael Bester]

Created attachment 86630 [details]
Test case reductions for the bug outlined in this issue.

When you have multiple <link> elements which have populated title attributes listed consecutively in the source code, only the first linked resource will load. For instance:

	<link rel="stylesheet" href="css/one.css" type="text/css" media="screen" title="one" charset="utf-8" />
	<link rel="stylesheet" href="css/two.css" type="text/css" media="screen" title="two" charset="utf-8" />
	<link rel="stylesheet" href="css/three.css" type="text/css" media="screen" title="three" charset="utf-8" />

In this example, where all the link elements have title attributes, only the first CSS file - one.css - will be loaded. The others will simply be ignored.

Another example:

	<link rel="stylesheet" href="css/one.css" type="text/css" media="screen" title="one" charset="utf-8" />
	<link rel="stylesheet" href="css/two.css" type="text/css" media="screen" title="two" charset="utf-8" />
	<link rel="stylesheet" href="css/three.css" type="text/css" media="screen" charset="utf-8" />

This one will load one.css and three.css, but not two.css, as the link elements for both one and two have title elements, but three does not.

When you remove all title elements (or give them empty values), like so:

	<link rel="stylesheet" href="css/one.css" type="text/css" media="screen" charset="utf-8" />
	<link rel="stylesheet" href="css/two.css" type="text/css" media="screen" charset="utf-8" />
	<link rel="stylesheet" href="css/three.css" type="text/css" media="screen" charset="utf-8" />

all three CSS files will load.

I've attached a zip file containing these test cases.

[Alexey Proskuryakov]

What I see is that all three stylesheets load successfully. It's just that the other two are correctly disabled due to being alternate ones, and we don't add such to document.styleSheets. Re-titling accordingly.

You can verify that e.g. by evaluating document.getElementsByTagName("link")[1].sheet.rules[0].cssText

See also: bug 14586.

[Michaël Burtin]

Is there's a specific reason for alternate style sheets not being present in document.styleSheets ?
According to W3C DOM specifications, document.styleSheets should return all the linked and embedded style sheets in document : http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet-DocumentStyle

[Ben]

I have created (and I'm working to improve) an extension for Chrome which allows users to pick between alternative styles on websites that provide them. Having all the styles available in document.styleSheets would greatly simplify the task of finding and enabling or disabling specific styles. I imagine there are other similar use-cases, though I cannot think of any off-hand.

See also: http://crbug.com/88310

[Arunprasad]

Other browser(like Opera,FireFox,NetFront,..) don't have this issue. Only Webkit based browsers like Safari,Chrome,.. have this issue.

Anybody working on this?

Regards,
Arun

[Ryosuke Niwa]

*** Bug 225363 has been marked as a duplicate of this bug. ***

[Ryosuke Niwa]

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

[EWS]

Committed 252781@main (a39b520b8e0c): <https://commits.webkit.org/252781@main>

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

[Radar WebKit Bug Importer]

<rdar://problem/97536629>

[Ahmad Saleem]

@[e-mail] - Thanks a lot.. 🎉👍👏

[Ryosuke Niwa]

*** Bug 118708 has been marked as a duplicate of this bug. ***