LibWeb: Add missing MEDIAQUERIES-5 media-features

This adds (or at least stubs-out) the following:
- display-mode
- dynamic-range
- environment-blending
- forced-colors
- horizontal-viewport-segments
- vertical-viewport-segments
- inverted-colors
- nav-controls
- prefers-contrast
- prefers-reduced-data
- prefers-reduced-motion
- prefers-reduced-transparency
- scripting
- video-color-gamut
- video-dynamic-range

The `@media (inverted-colors)` CSS that the spec requires we add to the
UA style sheet does not actually do anything for us yet since we don't
support `filter`, but it seemed sensible to include it now to avoid
forgetting later. :^)

Userland/Libraries/LibWeb/CSS/Default.css

@@ -306,3 +306,13 @@ mark {
  * https://html.spec.whatwg.org/multipage/rendering.html#embedded-content-rendering-rules
  */
 iframe { border: 2px inset; }
+
+/* https://www.w3.org/TR/mediaqueries-5/#descdef-media-inverted-colors
+ */
+@media (inverted-colors) {
+    img:not(picture>img),
+    picture,
+    video {
+        filter: invert(100%);
+    }
+}

Userland/Libraries/LibWeb/CSS/MediaFeatures.json

@@ -58,6 +58,37 @@
             "<length>"
         ]
     },
+    "display-mode": {
+        "type": "discrete",
+        "values": [
+            "fullscreen",
+            "standalone",
+            "minimal-ui",
+            "browser"
+        ]
+    },
+    "dynamic-range": {
+        "type": "discrete",
+        "values": [
+            "standard",
+            "high"
+        ]
+    },
+    "environment-blending": {
+        "type": "discrete",
+        "values": [
+            "opaque",
+            "additive",
+            "subtractive"
+        ]
+    },
+    "forced-colors": {
+        "type": "discrete",
+        "values": [
+            "none",
+            "active"
+        ]
+    },
     "grid": {
         "type": "discrete",
         "values": [
@@ -70,6 +101,12 @@
             "<length>"
         ]
     },
+    "horizontal-viewport-segments": {
+        "type": "range",
+        "values": [
+            "<integer>"
+        ]
+    },
     "hover": {
         "type": "discrete",
         "values": [
@@ -77,12 +114,26 @@
             "hover"
         ]
     },
+    "inverted-colors": {
+        "type": "discrete",
+        "values": [
+            "none",
+            "inverted"
+        ]
+    },
     "monochrome": {
         "type": "range",
         "values": [
             "<integer>"
         ]
     },
+    "nav-controls": {
+        "type": "discrete",
+        "values": [
+            "none",
+            "back"
+        ]
+    },
     "orientation": {
         "type": "discrete",
         "values": [
@@ -120,6 +171,36 @@
             "dark"
         ]
     },
+    "prefers-contrast": {
+        "type": "discrete",
+        "values": [
+            "no-preference",
+            "less",
+            "more",
+            "custom"
+        ]
+    },
+    "prefers-reduced-data": {
+        "type": "discrete",
+        "values": [
+            "no-preference",
+            "reduce"
+        ]
+    },
+    "prefers-reduced-motion": {
+        "type": "discrete",
+        "values": [
+            "no-preference",
+            "reduce"
+        ]
+    },
+    "prefers-reduced-transparency": {
+        "type": "discrete",
+        "values": [
+            "no-preference",
+            "reduce"
+        ]
+    },
     "resolution": {
         "type": "range",
         "values": [
@@ -134,6 +215,14 @@
             "progressive"
         ]
     },
+    "scripting": {
+        "type": "discrete",
+        "values": [
+            "none",
+            "initial-only",
+            "enabled"
+        ]
+    },
     "update": {
         "type": "discrete",
         "values": [
@@ -142,6 +231,27 @@
             "fast"
         ]
     },
+    "vertical-viewport-segments": {
+        "type": "range",
+        "values": [
+            "<integer>"
+        ]
+    },
+    "video-color-gamut": {
+        "type": "discrete",
+        "values": [
+            "srgb",
+            "p3",
+            "rec2020"
+        ]
+    },
+    "video-dynamic-range": {
+        "type": "discrete",
+        "values": [
+            "standard",
+            "high"
+        ]
+    },
     "width": {
         "type": "range",
         "values": [

Userland/Libraries/LibWeb/HTML/Window.cpp

@@ -1,6 +1,6 @@
 /*
  * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
- * Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -376,7 +376,7 @@ Optional<CSS::MediaFeatureValue> Window::query_media_feature(CSS::MediaFeatureID
 {
     // FIXME: Many of these should be dependent on the hardware
 
-    // MEDIAQUERIES-4 properties - https://www.w3.org/TR/mediaqueries-4/#media-descriptor-table
+    // https://www.w3.org/TR/mediaqueries-5/#media-descriptor-table
     switch (media_feature) {
     case CSS::MediaFeatureID::AnyHover:
         return CSS::MediaFeatureValue(CSS::ValueID::Hover);
@@ -393,14 +393,29 @@ Optional<CSS::MediaFeatureValue> Window::query_media_feature(CSS::MediaFeatureID
     // FIXME: device-aspect-ratio
     // FIXME: device-height
     // FIXME: device-width
+    case CSS::MediaFeatureID::DisplayMode:
+        // FIXME: Detect if window is fullscreen
+        return CSS::MediaFeatureValue(CSS::ValueID::Browser);
+    case CSS::MediaFeatureID::DynamicRange:
+        return CSS::MediaFeatureValue(CSS::ValueID::Standard);
+    case CSS::MediaFeatureID::EnvironmentBlending:
+        return CSS::MediaFeatureValue(CSS::ValueID::Opaque);
+    case CSS::MediaFeatureID::ForcedColors:
+        return CSS::MediaFeatureValue(CSS::ValueID::None);
     case CSS::MediaFeatureID::Grid:
         return CSS::MediaFeatureValue(0);
     case CSS::MediaFeatureID::Height:
         return CSS::MediaFeatureValue(CSS::Length::make_px(inner_height()));
+    case CSS::MediaFeatureID::HorizontalViewportSegments:
+        return CSS::MediaFeatureValue(1);
     case CSS::MediaFeatureID::Hover:
         return CSS::MediaFeatureValue(CSS::ValueID::Hover);
+    case CSS::MediaFeatureID::InvertedColors:
+        return CSS::MediaFeatureValue(CSS::ValueID::None);
     case CSS::MediaFeatureID::Monochrome:
         return CSS::MediaFeatureValue(0);
+    case CSS::MediaFeatureID::NavControls:
+        return CSS::MediaFeatureValue(CSS::ValueID::Back);
     case CSS::MediaFeatureID::Orientation:
         return CSS::MediaFeatureValue(inner_height() >= inner_width() ? CSS::ValueID::Portrait : CSS::ValueID::Landscape);
     case CSS::MediaFeatureID::OverflowBlock:
@@ -409,15 +424,6 @@ Optional<CSS::MediaFeatureValue> Window::query_media_feature(CSS::MediaFeatureID
         return CSS::MediaFeatureValue(CSS::ValueID::Scroll);
     case CSS::MediaFeatureID::Pointer:
         return CSS::MediaFeatureValue(CSS::ValueID::Fine);
-    // FIXME: resolution
-    case CSS::MediaFeatureID::Scan:
-        return CSS::MediaFeatureValue(CSS::ValueID::Progressive);
-    case CSS::MediaFeatureID::Update:
-        return CSS::MediaFeatureValue(CSS::ValueID::Fast);
-    case CSS::MediaFeatureID::Width:
-        return CSS::MediaFeatureValue(CSS::Length::make_px(inner_width()));
-
-    // MEDIAQUERIES-5 properties - https://www.w3.org/TR/mediaqueries-5/#media-descriptor-table
     case CSS::MediaFeatureID::PrefersColorScheme: {
         if (auto* page = this->page()) {
             switch (page->preferred_color_scheme()) {
@@ -432,6 +438,35 @@ Optional<CSS::MediaFeatureValue> Window::query_media_feature(CSS::MediaFeatureID
         }
         return CSS::MediaFeatureValue(CSS::ValueID::Light);
     }
+    case CSS::MediaFeatureID::PrefersContrast:
+        // FIXME: Make this a preference
+        return CSS::MediaFeatureValue(CSS::ValueID::NoPreference);
+    case CSS::MediaFeatureID::PrefersReducedData:
+        // FIXME: Make this a preference
+        return CSS::MediaFeatureValue(CSS::ValueID::NoPreference);
+    case CSS::MediaFeatureID::PrefersReducedMotion:
+        // FIXME: Make this a preference
+        return CSS::MediaFeatureValue(CSS::ValueID::NoPreference);
+    case CSS::MediaFeatureID::PrefersReducedTransparency:
+        // FIXME: Make this a preference
+        return CSS::MediaFeatureValue(CSS::ValueID::NoPreference);
+    // FIXME: resolution
+    case CSS::MediaFeatureID::Scan:
+        return CSS::MediaFeatureValue(CSS::ValueID::Progressive);
+    case CSS::MediaFeatureID::Scripting:
+        if (associated_document().is_scripting_enabled())
+            return CSS::MediaFeatureValue(CSS::ValueID::Enabled);
+        return CSS::MediaFeatureValue(CSS::ValueID::None);
+    case CSS::MediaFeatureID::Update:
+        return CSS::MediaFeatureValue(CSS::ValueID::Fast);
+    case CSS::MediaFeatureID::VerticalViewportSegments:
+        return CSS::MediaFeatureValue(1);
+    case CSS::MediaFeatureID::VideoColorGamut:
+        return CSS::MediaFeatureValue(CSS::ValueID::Srgb);
+    case CSS::MediaFeatureID::VideoDynamicRange:
+        return CSS::MediaFeatureValue(CSS::ValueID::Standard);
+    case CSS::MediaFeatureID::Width:
+        return CSS::MediaFeatureValue(CSS::Length::make_px(inner_width()));
 
     default:
         break;