From aa48dda3a4cbd4cc548f829eb3c33d04e5a20579 Mon Sep 17 00:00:00 2001 From: Sam Atkins Date: Wed, 16 Mar 2022 17:14:20 +0000 Subject: [PATCH] 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 | 10 ++ .../Libraries/LibWeb/CSS/MediaFeatures.json | 110 ++++++++++++++++++ Userland/Libraries/LibWeb/HTML/Window.cpp | 57 +++++++-- 3 files changed, 166 insertions(+), 11 deletions(-) diff --git a/Userland/Libraries/LibWeb/CSS/Default.css b/Userland/Libraries/LibWeb/CSS/Default.css index aa670dcb26..fbdfff0386 100644 --- a/Userland/Libraries/LibWeb/CSS/Default.css +++ b/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%); + } +} diff --git a/Userland/Libraries/LibWeb/CSS/MediaFeatures.json b/Userland/Libraries/LibWeb/CSS/MediaFeatures.json index ba7295904e..e35119c1a7 100644 --- a/Userland/Libraries/LibWeb/CSS/MediaFeatures.json +++ b/Userland/Libraries/LibWeb/CSS/MediaFeatures.json @@ -58,6 +58,37 @@ "" ] }, + "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 @@ "" ] }, + "horizontal-viewport-segments": { + "type": "range", + "values": [ + "" + ] + }, "hover": { "type": "discrete", "values": [ @@ -77,12 +114,26 @@ "hover" ] }, + "inverted-colors": { + "type": "discrete", + "values": [ + "none", + "inverted" + ] + }, "monochrome": { "type": "range", "values": [ "" ] }, + "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": [ + "" + ] + }, + "video-color-gamut": { + "type": "discrete", + "values": [ + "srgb", + "p3", + "rec2020" + ] + }, + "video-dynamic-range": { + "type": "discrete", + "values": [ + "standard", + "high" + ] + }, "width": { "type": "range", "values": [ diff --git a/Userland/Libraries/LibWeb/HTML/Window.cpp b/Userland/Libraries/LibWeb/HTML/Window.cpp index 187d6cbb4d..255f699457 100644 --- a/Userland/Libraries/LibWeb/HTML/Window.cpp +++ b/Userland/Libraries/LibWeb/HTML/Window.cpp @@ -1,6 +1,6 @@ /* * Copyright (c) 2020-2022, Andreas Kling - * Copyright (c) 2021, Sam Atkins + * Copyright (c) 2021-2022, Sam Atkins * * SPDX-License-Identifier: BSD-2-Clause */ @@ -376,7 +376,7 @@ Optional 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 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 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 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;