mirror of
https://github.com/RGBCube/serenity
synced 2025-05-31 00:08:11 +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:
Sam Atkins
Andreas Kling
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
|
||||
*/
|
||||
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>"
|
||||
]
|
||||
},
|
||||
"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": [
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue