Bug 24898 - Inline JavaScript block executed out of order with external CSS.
Summary: Inline JavaScript block executed out of order with external CSS.
Status: RESOLVED DUPLICATE of bug 8852
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows XP
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2009-03-27 14:38 PDT by slamm
Modified: 2010-12-29 09:35 PST (History)
4 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description slamm 2009-03-27 14:38:22 PDT
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>
  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)";
Comment 1 Antti Koivisto 2010-12-29 09:35:29 PST

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