Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 8 users
Status: Fixed
Owner:
Closed: Jan 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment
Programmatically injected CSS file should be non-blocking
Reported by cath...@gmail.com, Dec 23 2015 Back to list
Chrome Version       : 47.0.2526.106 (64-bit)
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Safari:
    Firefox: 42.0 OK
         IE: (don't remember version) OK

What steps will reproduce the problem?
1. Set up HTML:
<script>
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'really-really-slow.css');
document.head.appendChild(link);
</script>
<div>This should be black then red.</div>
2. Set up server to respond really-really-slow.css with a 10 seconds delay and with this content:
div { color: red; }
3. Load the page in Chrome.

What is the expected result?
The text in the div should be black initially. After about 10 seconds (when really-really-slow.css is loaded), it turns red.

What happens instead?
The text in the div doesn't show up initially. After about 10 seconds (when really-really-slow.css is loaded), it shows up and it's red from the beginning.

Please provide any additional information below. Attach a screenshot if
possible.
Any inflight CSS download blocks the parsing of HTML, even if the CSS is injected programmatically. This can be verified in Timeline. No HTML parsing during CSS download. This behavior is different from Firefox and IE.
 
Cc: tkonch...@chromium.org
Labels: Needs-Feedback
Could you please provide a sample test case to reproduce the issue from test team end.
Comment 2 by tkent@chromium.org, Dec 28 2015
Labels: Cr-Blink-CSS Cr-Blink-Loader
Here's a rough demo of this:

http://jsbin.com/rakipajele
http://jsbin.com/rakipajele/edit?html,console,output

In this demo, a script tag inserts a css stylesheet from a server that takes 10 seconds to respond. In Firefox, the content all shows up right away. In chrome, the browser waits for the slow stylesheet before displaying content.
Looking at the spec, this seems to contradict the behavior around executing scripts:


<script>document.write(performance.now())</script>
<script>
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'https://fake-response.appspot.com/?sleep=5');
document.head.appendChild(link);
</script>
<script>document.write(performance.now())</script>

https://jsfiddle.net/vzs9b3v9/4/

http://www.w3.org/TR/html5/document-metadata.html#styling

A style sheet in the context of the Document of an HTML parser or XML parser is said to be a style sheet that is blocking scripts if the element was created by that Document's parser, and the element is either a style element or a link element that was an external resource link that contributes to the styling processing model when the element was created by the parser, and the element's style sheet was enabled when the element was created by the parser, and the element's style sheet ready flag is not yet set, and, the last time the event loop reached step 1, the element was in that Document, and the user agent hasn't given up on that particular style sheet yet. A user agent may give up on a style sheet at any time.

In this example, the stylesheet element was not created by the Document's parser (it was created via the DOM APIs). Therefore, it should not be  "a style sheet that is blocking scripts". In Firefox you can see that if you change the stylesheet to be inserted by the parser it does block the execution of the script tag:

https://jsfiddle.net/hrrrwd07/1/
Comment 5 by horo@chromium.org, Jan 5 2016
Cc: kouhei@chromium.org
Status: Untriaged
Comment 7 by n...@fb.com, Jan 12 2016
Labels: DevRel-Facebook
Comment 8 by horo@chromium.org, Jan 20 2016
Owner: horo@chromium.org
Status: Started
I'm not familiar with CSS enough.
But I think just checking isCreatedByParser() in LinkStyle::process() is enough.
https://codereview.chromium.org/1603873004/
Labels: Hotlist-Loading
Comment 11 by horo@chromium.org, Jan 21 2016
Status: Fixed
Comment 12 by horo@chromium.org, Jan 21 2016
Labels: M-50
Comment 13 by bmau...@fb.com, Jan 21 2016
Thanks for doing this. FYI I filed  bug 580158  as a followup here around the priority for the CSS request -- sending async stylesheets using the "lowest" priority isn't ideal at least for the FB use case
Sign in to add a comment