css-media-features.html | Explore in Territory

<!DOCTYPE html>
<style>
  p {
    --prefers-color-scheme:invalid;
    --prefers-reduced-motion:invalid;
    --prefers-reduced-data:invalid;
    --prefers-reduced-transparency:invalid;
    --prefers-contrast:invalid;
    --color-gamut:invalid;
    --forced-colors:invalid;
  }
  @media (prefers-color-scheme: no-preference) { p { --prefers-color-scheme:no-preference; } }
  @media (prefers-color-scheme: light) { p { --prefers-color-scheme:light; } }
  @media (prefers-color-scheme: dark) { p { --prefers-color-scheme:dark; } }
  @media (prefers-reduced-motion: no-preference) { p { --prefers-reduced-motion:no-preference; } }
  @media (prefers-reduced-motion: reduce) { p { --prefers-reduced-motion:reduce; } }
  @media (prefers-reduced-data: no-preference) { p { --prefers-reduced-data:no-preference; } }
  @media (prefers-reduced-data: reduce) { p { --prefers-reduced-data:reduce; } }
  @media (prefers-reduced-transparency: no-preference) { p { --prefers-reduced-transparency:no-preference; } }
  @media (prefers-reduced-transparency: reduce) { p { --prefers-reduced-transparency:reduce; } }
  @media (prefers-contrast: no-preference) { p { --prefers-contrast:no-preference; } }
  @media (prefers-contrast: more) { p { --prefers-contrast:more; } }
  @media (prefers-contrast: less) { p { --prefers-contrast:less; } }
  @media (prefers-contrast: custom) { p { --prefers-contrast:custom; } }
  @media (prefers-color-scheme: dark) and (prefers-reduced-motion: reduce) { p { --prefers-color-scheme:dark2; --prefers-reduced-motion:reduce2; } }
  @media (color-gamut: p3) { p { --color-gamut:p3; } }
  @media (color-gamut: rec2020) { p { --color-gamut:rec2020; } }
  @media (forced-colors: active) { p { --forced-colors:active; } }
  @media (forced-colors: none) { p { --forced-colors:none; } }
</style>
<p id="p">
chromium/third_party/blink/web_tests/inspector-protocol/resources/css-media-features.html
