625013 - DOMException fired when Stylesheet not loaded and its cssRules property accessed

Status: RESOLVED WORKSFORME

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

Description

[Christoph Martens]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.8) 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() {

			try{
				if(stylesheet[0].sheet && stylesheet[0].sheet.cssRules) {
					callback && callback(stylesheet);
					clearInterval(interval);
				}

			}catch(e){
				console.log(e);
			}
		}, 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: [e-mail] for more information - if you need a sample page. I think the steps should be quite simple to follow.

Comment 1

[Christoph Martens]

Attachment: Reduced testcase. The bug only happens for link elements. Not for style elements.

Comment 2

[Christoph Martens]

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.

Comment 3

[Boris Zbarsky [:bzbarsky]]

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.

Comment 4

[Christoph Martens]

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.

Comment 5

[Boris Zbarsky [:bzbarsky]]

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.

Comment 6

[sorvell]

This also occurs in a <style> element when an @import is used. Here's a minimal example:

<script>
  var s = document.createElement('style');
  s.textContent = "@import url('sheet1.css');";
  document.head.appendChild(s);
  console.log(s.sheet.cssRules);
</script>

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

Comment 7

[Firefox Bug Husbandry Bot]

https://bugzilla.mozilla.org/show_bug.cgi?id=1472046

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.

Comment 8

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

In the process of migrating remaining bugs to the new severity system, the severity for this bug cannot be automatically determined. Please retriage this bug using the new severity system.

Comment 9

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Is this issue still valid? It's hard for me to tell ... ...

Comment 10

[Emilio Cobos Álvarez (:emilio)]

We return a null stylesheet until it's loaded now, which seems somewhat sane.