mirror of
https://github.com/RGBCube/serenity
synced 2025-07-16 06:57:35 +00:00
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. :^)
This commit is contained in:
parent
84a06a1209
commit
aa48dda3a4
3 changed files with 166 additions and 11 deletions
|
@ -306,3 +306,13 @@ mark {
|
||||||
* https://html.spec.whatwg.org/multipage/rendering.html#embedded-content-rendering-rules
|
* https://html.spec.whatwg.org/multipage/rendering.html#embedded-content-rendering-rules
|
||||||
*/
|
*/
|
||||||
iframe { border: 2px inset; }
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -58,6 +58,37 @@
|
||||||
"<length>"
|
"<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": {
|
"grid": {
|
||||||
"type": "discrete",
|
"type": "discrete",
|
||||||
"values": [
|
"values": [
|
||||||
|
@ -70,6 +101,12 @@
|
||||||
"<length>"
|
"<length>"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"horizontal-viewport-segments": {
|
||||||
|
"type": "range",
|
||||||
|
"values": [
|
||||||
|
"<integer>"
|
||||||
|
]
|
||||||
|
},
|
||||||
"hover": {
|
"hover": {
|
||||||
"type": "discrete",
|
"type": "discrete",
|
||||||
"values": [
|
"values": [
|
||||||
|
@ -77,12 +114,26 @@
|
||||||
"hover"
|
"hover"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"inverted-colors": {
|
||||||
|
"type": "discrete",
|
||||||
|
"values": [
|
||||||
|
"none",
|
||||||
|
"inverted"
|
||||||
|
]
|
||||||
|
},
|
||||||
"monochrome": {
|
"monochrome": {
|
||||||
"type": "range",
|
"type": "range",
|
||||||
"values": [
|
"values": [
|
||||||
"<integer>"
|
"<integer>"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"nav-controls": {
|
||||||
|
"type": "discrete",
|
||||||
|
"values": [
|
||||||
|
"none",
|
||||||
|
"back"
|
||||||
|
]
|
||||||
|
},
|
||||||
"orientation": {
|
"orientation": {
|
||||||
"type": "discrete",
|
"type": "discrete",
|
||||||
"values": [
|
"values": [
|
||||||
|
@ -120,6 +171,36 @@
|
||||||
"dark"
|
"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": {
|
"resolution": {
|
||||||
"type": "range",
|
"type": "range",
|
||||||
"values": [
|
"values": [
|
||||||
|
@ -134,6 +215,14 @@
|
||||||
"progressive"
|
"progressive"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"scripting": {
|
||||||
|
"type": "discrete",
|
||||||
|
"values": [
|
||||||
|
"none",
|
||||||
|
"initial-only",
|
||||||
|
"enabled"
|
||||||
|
]
|
||||||
|
},
|
||||||
"update": {
|
"update": {
|
||||||
"type": "discrete",
|
"type": "discrete",
|
||||||
"values": [
|
"values": [
|
||||||
|
@ -142,6 +231,27 @@
|
||||||
"fast"
|
"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": {
|
"width": {
|
||||||
"type": "range",
|
"type": "range",
|
||||||
"values": [
|
"values": [
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
/*
|
/*
|
||||||
* Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
|
* 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
|
* 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
|
// 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) {
|
switch (media_feature) {
|
||||||
case CSS::MediaFeatureID::AnyHover:
|
case CSS::MediaFeatureID::AnyHover:
|
||||||
return CSS::MediaFeatureValue(CSS::ValueID::Hover);
|
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-aspect-ratio
|
||||||
// FIXME: device-height
|
// FIXME: device-height
|
||||||
// FIXME: device-width
|
// 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:
|
case CSS::MediaFeatureID::Grid:
|
||||||
return CSS::MediaFeatureValue(0);
|
return CSS::MediaFeatureValue(0);
|
||||||
case CSS::MediaFeatureID::Height:
|
case CSS::MediaFeatureID::Height:
|
||||||
return CSS::MediaFeatureValue(CSS::Length::make_px(inner_height()));
|
return CSS::MediaFeatureValue(CSS::Length::make_px(inner_height()));
|
||||||
|
case CSS::MediaFeatureID::HorizontalViewportSegments:
|
||||||
|
return CSS::MediaFeatureValue(1);
|
||||||
case CSS::MediaFeatureID::Hover:
|
case CSS::MediaFeatureID::Hover:
|
||||||
return CSS::MediaFeatureValue(CSS::ValueID::Hover);
|
return CSS::MediaFeatureValue(CSS::ValueID::Hover);
|
||||||
|
case CSS::MediaFeatureID::InvertedColors:
|
||||||
|
return CSS::MediaFeatureValue(CSS::ValueID::None);
|
||||||
case CSS::MediaFeatureID::Monochrome:
|
case CSS::MediaFeatureID::Monochrome:
|
||||||
return CSS::MediaFeatureValue(0);
|
return CSS::MediaFeatureValue(0);
|
||||||
|
case CSS::MediaFeatureID::NavControls:
|
||||||
|
return CSS::MediaFeatureValue(CSS::ValueID::Back);
|
||||||
case CSS::MediaFeatureID::Orientation:
|
case CSS::MediaFeatureID::Orientation:
|
||||||
return CSS::MediaFeatureValue(inner_height() >= inner_width() ? CSS::ValueID::Portrait : CSS::ValueID::Landscape);
|
return CSS::MediaFeatureValue(inner_height() >= inner_width() ? CSS::ValueID::Portrait : CSS::ValueID::Landscape);
|
||||||
case CSS::MediaFeatureID::OverflowBlock:
|
case CSS::MediaFeatureID::OverflowBlock:
|
||||||
|
@ -409,15 +424,6 @@ Optional<CSS::MediaFeatureValue> Window::query_media_feature(CSS::MediaFeatureID
|
||||||
return CSS::MediaFeatureValue(CSS::ValueID::Scroll);
|
return CSS::MediaFeatureValue(CSS::ValueID::Scroll);
|
||||||
case CSS::MediaFeatureID::Pointer:
|
case CSS::MediaFeatureID::Pointer:
|
||||||
return CSS::MediaFeatureValue(CSS::ValueID::Fine);
|
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: {
|
case CSS::MediaFeatureID::PrefersColorScheme: {
|
||||||
if (auto* page = this->page()) {
|
if (auto* page = this->page()) {
|
||||||
switch (page->preferred_color_scheme()) {
|
switch (page->preferred_color_scheme()) {
|
||||||
|
@ -432,6 +438,35 @@ Optional<CSS::MediaFeatureValue> Window::query_media_feature(CSS::MediaFeatureID
|
||||||
}
|
}
|
||||||
return CSS::MediaFeatureValue(CSS::ValueID::Light);
|
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:
|
default:
|
||||||
break;
|
break;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue