Open Bug 625013 Opened 11 years ago Updated 2 months ago

DOMException fired when Stylesheet not loaded and its cssRules property accessed


(Core :: DOM: Core & HTML, defect, P5)






(Reporter: cmartens, Unassigned)



(1 file)

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv: Gecko/20100722 Firefox/3.6.8
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv: Gecko/20100722 Firefox/3.6.8

Well, create a style element and append it to the head-Node.
Try using an URL that doesn't exist as its href attribute.

Set an interval and within the interval try accessing the property (e.g. stylesheetNode[0].sheet.cssRules) DOM Exception fires when this property was accessed before the Stylesheet itself is ready.

The .sheet property is always there, even if the stylesheet isnt loaded successfully. There is actually no other way to check if a stylesheet was loaded than checking the cssRules.length. But there the DOM Exception fires.

Sample Code below (requires jQuery, but that hasn't something to do with the Bug.):

		var stylesheet = $('<link rel="stylesheet" href="'+url+'" type="text/css" media="screen">').appendTo('head');
		var interval = window.setInterval(function() {

				if(stylesheet[0].sheet && stylesheet[0].sheet.cssRules) {
					callback && callback(stylesheet);

		}, 13);

Reproducible: Always

Steps to Reproduce:
1. var xyz=createElement('style');
2. xyz.setAttribute('href','/url/that/doesnt/exist.css');
3. document.getElementsByTagName('head')[0].appendChild(xyz);
4. alert(xyz.sheet.cssRules);

everytime the cssRules property is accessed (well, it's still there, but locked!) the problem occurs.
Actual Results:  
DOM Exception, which is only avoidable using try/catch.

Expected Results:  
cssRules property of unloaded Stylesheets should either be not set or accessible as a getter.

Well, contact me at my email address at work: for more information - if you need a sample page. I think the steps should be quite simple to follow.
My Steps won't work due to coding typos. I added a reduced testcase that produces the error and works fine. Seems as the bug only happens on link elements.
Component: General → DOM
Product: Firefox → Core
QA Contact: general → general
This is by-design.  There is no sane way to return a .cssRules in this situation....  We could return null, I suppose, but is that really any better?  The cssRules of a sheet is not supposed to be a mutable object.

What you really want apparently is a way to detect when the sheet is done loading, right?  There's an existing bug on firing a load event on stylesheets.
Well, Webkit and Opera both return null without firing a DOM Exception.

I don't know if that is the right way...but that's the difference to Gecko.
Maybe we should think about firing such an event for handling that cases.
For what it's worth, it looks like Webkit returns null for the sheet before it's loaded, but in Webkit the sheet is not present in document.styleSheets either, which means the indices in document.styleSheets shift around as network loads happen.  We really don't want that behavior.

Opera seems to hand back an CSSRuleList, but it also has a security bug as a result.
This also occurs in a <style> element when an @import is used. Here's a minimal example:

  var s = document.createElement('style');
  s.textContent = "@import url('sheet1.css');";

Throwing an exception is pretty undesirable. Webkit, Blink, and IE all return a CSSRuleList with a single rule for the @import.

Move all DOM bugs that haven’t been updated in more than 3 years and has no one currently assigned to P5.

If you have questions, please contact :mdaly.
Priority: -- → P5
Component: DOM → DOM: Core & HTML
QA Whiteboard: qa-not-actionable
You need to log in before you can comment on or make changes to this bug.