CSS Loading Diagnostic Tests

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

Standard Loading

• 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?
• Rel=preload Test: standard link[rel=preload] with an onload handler to apply as a stylesheet once loaded. This will only work in supporting browsers.
• 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

• Preload with loadCSS Polyfill: Stylesheet preloaded and polyfilled if necessary
• Preload with loadCSS Polyfill before link: Same as prior demo, script and link switched in order.
• loadCSS Dynamic Load: Stylesheet loaded with loadCSS() dynamically.
• loadCSS Dynamic Load with onload handler: Same as above with onload script handler.