Inline JavaScript block executed out of order with external CSS.

• Component: DOM
• Status: RESOLVED DUPLICATE

WebKit does not wait for CSS before executing JavaScript. I see this problem in Safari 4 and Chrome 2.

In the example page below, the JavaScript should get values after the external CSS is applied (e.g. font-size should be 7px and not 23px; stylesheet count should be 2 and not 1). The WebKit behavior is different from both IE and FF.

Another test is in Steve Souders' UA profiler for CSS and Inline JavaScript: http://stevesouders.com/ua/inline-script-after-stylesheet.php?step=1

All browsers are currently failing that test. WebKit could be the first. WebKit browsers and FF fail for different reasons. FF fails because it blocks. WebKit browsers fail because the JavaScript is executed before the CSS is downloaded.

This example uses JavaScript to access state that the external CSS changes:

<style>span { font-size: 23px; }</style>
<link type="text/css" rel="stylesheet" href="[css has: #note{font-size: 7px;} ]">
<span id="note">The note.</span>
<script>
  var elem = document.getElementById("note")
  var style = document.defaultView.getComputedStyle(elem, null);
  var size = style.getPropertyValue("font-size");
  var num_style_sheets = document.styleSheets.length;
  elem.innerHTML = "<br>font size: " + size + " (expected '7px') +
     "<br>sheet count: " + num_style_sheets + " (expected 2)";
</script>

[Antti Koivisto]

*** This bug has been marked as a duplicate of bug 8852 ***