RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 18:57:45 +00:00
Code Issues Activity Actions

LibWeb: Introduce MediaFeatureValue type for use in media queries

Browse source 
Previously, we were using StyleValues for this, which was a bit of a
hack and was brittle, breaking when I modified how custom properties
were parsed. This is better and also lets us limit the kinds of value
that can be used here, to match the spec.
This commit is contained in:
Sam Atkins 2021-12-29 17:52:14 +00:00 • committed by Andreas Kling
parent 0a8e289f37
commit 6299d68e45
6 changed files with 176 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

38
Userland/Libraries/LibWeb/DOM/Window.cpp
View file

@ -291,59 +291,59 @@ NonnullRefPtr<CSS::MediaQueryList> Window::match_media(String media)
return media_query_list;
}
RefPtr<CSS::StyleValue> Window::query_media_feature(FlyString const& name) const
Optional<CSS::MediaFeatureValue> Window::query_media_feature(FlyString const& name) const
{
// FIXME: Many of these should be dependent on the hardware
// MEDIAQUERIES-4 properties - https://www.w3.org/TR/mediaqueries-4/#media-descriptor-table
if (name.equals_ignoring_case("any-hover"sv))
return CSS::IdentifierStyleValue::create(CSS::ValueID::Hover);
return CSS::MediaFeatureValue("hover");
if (name.equals_ignoring_case("any-pointer"sv))
return CSS::IdentifierStyleValue::create(CSS::ValueID::Fine);
return CSS::MediaFeatureValue("fine");
// FIXME: aspect-ratio
if (name.equals_ignoring_case("color"sv))
return CSS::NumericStyleValue::create_integer(32);
return CSS::MediaFeatureValue(32);
if (name.equals_ignoring_case("color-gamut"sv))
return CSS::IdentifierStyleValue::create(CSS::ValueID::Srgb);
return CSS::MediaFeatureValue("srgb");
if (name.equals_ignoring_case("color-index"sv))
return CSS::NumericStyleValue::create_integer(0);
return CSS::MediaFeatureValue(0);
// FIXME: device-aspect-ratio
// FIXME: device-height
// FIXME: device-width
if (name.equals_ignoring_case("grid"sv))
return CSS::NumericStyleValue::create_integer(0);
return CSS::MediaFeatureValue(0);
if (name.equals_ignoring_case("height"sv))
return CSS::LengthStyleValue::create(CSS::Length::make_px(inner_height()));
return CSS::MediaFeatureValue(CSS::Length::make_px(inner_height()));
if (name.equals_ignoring_case("hover"sv))
return CSS::IdentifierStyleValue::create(CSS::ValueID::Hover);
return CSS::MediaFeatureValue("hover");
if (name.equals_ignoring_case("monochrome"sv))
return CSS::NumericStyleValue::create_integer(0);
return CSS::MediaFeatureValue(0);
if (name.equals_ignoring_case("hover"sv))
return CSS::IdentifierStyleValue::create(inner_height() >= inner_width() ? CSS::ValueID::Portrait : CSS::ValueID::Landscape);
return CSS::MediaFeatureValue(inner_height() >= inner_width() ? "portrait" : "landscape");
if (name.equals_ignoring_case("overflow-block"sv))
return CSS::IdentifierStyleValue::create(CSS::ValueID::Scroll);
return CSS::MediaFeatureValue("scroll");
// FIXME: overflow-inline
if (name.equals_ignoring_case("pointer"sv))
return CSS::IdentifierStyleValue::create(CSS::ValueID::Fine);
return CSS::MediaFeatureValue("fine");
// FIXME: resolution
if (name.equals_ignoring_case("scan"sv))
return CSS::IdentifierStyleValue::create(CSS::ValueID::Progressive);
return CSS::MediaFeatureValue("progressive");
if (name.equals_ignoring_case("update"sv))
return CSS::IdentifierStyleValue::create(CSS::ValueID::Fast);
return CSS::MediaFeatureValue("fast");
if (name.equals_ignoring_case("width"sv))
return CSS::LengthStyleValue::create(CSS::Length::make_px(inner_width()));
return CSS::MediaFeatureValue(CSS::Length::make_px(inner_width()));
// MEDIAQUERIES-5 properties - https://www.w3.org/TR/mediaqueries-5/#media-descriptor-table
if (name.equals_ignoring_case("prefers-color-scheme")) {
if (auto* page = this->page()) {
switch (page->preferred_color_scheme()) {
case CSS::PreferredColorScheme::Light:
return CSS::IdentifierStyleValue::create(CSS::ValueID::Light);
return CSS::MediaFeatureValue("light");
case CSS::PreferredColorScheme::Dark:
return CSS::IdentifierStyleValue::create(CSS::ValueID::Dark);
return CSS::MediaFeatureValue("dark");
case CSS::PreferredColorScheme::Auto:
default:
return CSS::IdentifierStyleValue::create(page->palette().is_dark() ? CSS::ValueID::Dark : CSS::ValueID::Light);
return CSS::MediaFeatureValue(page->palette().is_dark() ? "dark" : "light");
}
}
}