Testing iframe background opacity and default colours

This page demonstrates how browsers give embedded iframe documents an opaque or transparent canvas depending on the combination of colour schemes determined for the documents.

Embedded content with a background colour that doesn't match the container's background colour demonstrates the browser applying an opaque background canvas with a default colour appropriate for the colour scheme applied to the document.

light containing element

This column should always display with a light background. It expresses support only for a light scheme.

dark containing element

This column should always display with a dark background. It expresses support only for a dark scheme.

both containing element

This column should display with a background matching user preference, defaulting to light.

none containing element

This column should display with a light blue background. No support is expressed for any colour scheme.