Human Injection Laboratories

CSS Media Queries Test Cases

Ambient Light Level

Dim Light Level

@media only all and (light-level: dim)

Normal Light Level

@media only all and (light-level: normal)

Washed Light Level

@media only all and (light-level: washed)

Display Technology

Opaque Environment Blending

@media only all and (environment-blending: opaque)

Additive Environment Blending

@media only all and (environment-blending: additive)

Subtractive Environment Blending

@media only all and (environment-blending: subtractive)

Scripting Media Features

Scripting none

@media only all and (scripting: none)

Scripting initial-only

@media only all and (scripting: initial-only)

Scripting enabled

@media only all and (scripting: enabled)

Inverted Colors Detection

Inverted Colors

@media only all and (inverted-colors: inverted)

Not Inverted Colors

@media only all and (inverted-colors: none)

Detection of Reduced Motion Preferences

Reduced Motions

@media only all and (prefers-reduced-motion: reduce)

No Preference for Motion

@media only all and (prefers-reduced-motion: no-preference)

Detection of Reduced Transparency Preferences

Reduced Transparency

@media only all and (prefers-reduced-transparency: reduce)

No preference for transparency

@media only all and (prefers-reduced-transparency: no-preference)

Detection of Contrast Preferences

High Contrast

@media only all and (prefers-contrast: high)

Low Contrast

@media only all and (prefers-contrast: low)

No Preference for Contrast

@media only all and (prefers-contrast: no-preference)

Detection of Color Schemes Preferences

Dark Color Scheme

@media only all and (prefers-color-scheme: dark)

Light Color Scheme

@media only all and (prefers-color-scheme: light)

No Preference for Color Scheme

@media only all and (prefers-color-scheme: no-preference)

Detection of Forced Colors Palette

Forced Colors Active

@media only all and (forced-colors: active)

None Forced Colors

@media only all and (forced-colors: none)