CSS Loading Diagnostic Tests

This directory contains a variety of files that employ various CSS loading techniques. Most files reference a CSS file that may include a 5-second server delay to mimic latency, when tested on a node server. The delay makes it easier to determine if content is rendered before the CSS loads.

Recommended Pattern

Standard Loading Tests

• Link in Head: Does a link to a stylesheet from the head of the page block page rendering?
• Link in Body: Does a stylesheet link in the body of the page block all page rendering, rendering of content that comes after it, or not block at all?
• @import in Head: Does an inline @import reference from the head of the page block rendering?
• @import in Body: Does an inline @import reference from the body of the page block rendering of content below it?
• DOM appendChild: Create a link element and append to the document.
• Link attributes: Do browsers supporting Subresource Integrity correctly handle link attributes?

LoadCSS Assisted Loading

• loadCSS Dynamic Load: Stylesheet loaded with loadCSS() dynamically.
• loadCSS Dynamic Load with onload handler: Same as above with onload script handler.