RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:37:35 +00:00
Code Issues Activity Actions

LibWeb: Implement relative lengths in media queries :^)

Browse source 
As noted, this is not entirely right, since we are using the computed
font's metrics instead of the initial font's metrics, but we do not
have a good way to obtain the latter.
This commit is contained in:
Sam Atkins 2022-02-15 16:12:22 +00:00 • committed by Andreas Kling
parent 50cc008efd
commit d2ade9800f
2 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

37
Userland/Libraries/LibWeb/CSS/MediaQuery.cpp
View file

@ -91,20 +91,20 @@ bool MediaFeature::evaluate(DOM::Window const& window) const
return false; return false;
case Type::ExactValue: case Type::ExactValue:
return compare(*m_value, Comparison::Equal, queried_value); return compare(window, *m_value, Comparison::Equal, queried_value);
case Type::MinValue: case Type::MinValue:
return compare(queried_value, Comparison::GreaterThanOrEqual, *m_value); return compare(window, queried_value, Comparison::GreaterThanOrEqual, *m_value);
case Type::MaxValue: case Type::MaxValue:
return compare(queried_value, Comparison::LessThanOrEqual, *m_value); return compare(window, queried_value, Comparison::LessThanOrEqual, *m_value);
case Type::Range: case Type::Range:
if (!compare(m_range->left_value, m_range->left_comparison, queried_value)) if (!compare(window, m_range->left_value, m_range->left_comparison, queried_value))
return false; return false;
if (m_range->right_comparison.has_value()) if (m_range->right_comparison.has_value())
if (!compare(queried_value, *m_range->right_comparison, *m_range->right_value)) if (!compare(window, queried_value, *m_range->right_comparison, *m_range->right_value))
return false; return false;
return true; return true;
@ -113,7 +113,7 @@ bool MediaFeature::evaluate(DOM::Window const& window) const
VERIFY_NOT_REACHED(); VERIFY_NOT_REACHED();
} }
bool MediaFeature::compare(MediaFeatureValue left, Comparison comparison, MediaFeatureValue right) bool MediaFeature::compare(DOM::Window const& window, MediaFeatureValue left, Comparison comparison, MediaFeatureValue right)
{ {
if (!left.is_same_type(right)) if (!left.is_same_type(right))
return false; return false;
@ -141,14 +141,25 @@ bool MediaFeature::compare(MediaFeatureValue left, Comparison comparison, MediaF
} }
if (left.is_length()) { if (left.is_length()) {
// FIXME: Handle relative lengths. https://www.w3.org/TR/mediaqueries-4/#ref-for-relative-length
if (!left.length().is_absolute() || !right.length().is_absolute()) {
dbgln("TODO: Support relative lengths in media queries!");
return false;
}
auto left_px = left.length().absolute_length_to_px(); float left_px;
auto right_px = right.length().absolute_length_to_px(); float right_px;
// Save ourselves some work if neither side is a relative length.
if (left.length().is_absolute() && right.length().is_absolute()) {
left_px = left.length().absolute_length_to_px();
right_px = right.length().absolute_length_to_px();
} else {
Gfx::IntRect viewport_rect { 0, 0, window.inner_width(), window.inner_height() };
// FIXME: This isn't right - we want to query the initial-value font, which is the one used
// if no author styles are defined.
auto const& font = window.associated_document().root().layout_node()->font();
Gfx::FontMetrics const& font_metrics = font.metrics('M');
float root_font_size = font.presentation_size();
left_px = left.length().to_px(viewport_rect, font_metrics, root_font_size);
right_px = right.length().to_px(viewport_rect, font_metrics, root_font_size);
}
switch (comparison) { switch (comparison) {
case Comparison::Equal: case Comparison::Equal:

2
Userland/Libraries/LibWeb/CSS/MediaQuery.h
View file

@ -135,7 +135,7 @@ private:
{ {
} }
static bool compare(MediaFeatureValue left, Comparison comparison, MediaFeatureValue right); static bool compare(DOM::Window const& window, MediaFeatureValue left, Comparison comparison, MediaFeatureValue right);
struct Range { struct Range {
MediaFeatureValue left_value; MediaFeatureValue left_value;