LibWeb: Implement <resolution> as a media feature type

This is the only dimension type besides `<length>` that is used in any
media queries in levels 4 or 5 right now. Others can be included
if/when they're needed.

Userland/Libraries/LibWeb/CSS/MediaQuery.cpp

@@ -25,6 +25,7 @@ String MediaFeatureValue::to_string() const
     return m_value.visit(
         [](String const& ident) { return serialize_an_identifier(ident); },
         [](Length const& length) { return length.to_string(); },
+        [](Resolution const& resolution) { return resolution.to_string(); },
         [](double number) { return String::number(number); });
 }
 
@@ -33,6 +34,7 @@ bool MediaFeatureValue::is_same_type(MediaFeatureValue const& other) const
     return m_value.visit(
         [&](String const&) { return other.is_ident(); },
         [&](Length const&) { return other.is_length(); },
+        [&](Resolution const&) { return other.is_resolution(); },
         [&](double) { return other.is_number(); });
 }
 
@@ -86,6 +88,8 @@ bool MediaFeature::evaluate(DOM::Window const& window) const
             return queried_value.number() != 0;
         if (queried_value.is_length())
             return queried_value.length().raw_value() != 0;
+        if (queried_value.is_resolution())
+            return queried_value.resolution().to_dots_per_pixel() != 0;
         if (queried_value.is_ident())
             return queried_value.ident() != "none";
         return false;
@@ -141,7 +145,6 @@ bool MediaFeature::compare(DOM::Window const& window, MediaFeatureValue left, Co
     }
 
     if (left.is_length()) {
-
         float left_px;
         float right_px;
         // Save ourselves some work if neither side is a relative length.
@@ -178,6 +181,25 @@ bool MediaFeature::compare(DOM::Window const& window, MediaFeatureValue left, Co
         VERIFY_NOT_REACHED();
     }
 
+    if (left.is_resolution()) {
+        auto left_dppx = left.resolution().to_dots_per_pixel();
+        auto right_dppx = right.resolution().to_dots_per_pixel();
+
+        switch (comparison) {
+        case Comparison::Equal:
+            return left_dppx == right_dppx;
+        case Comparison::LessThan:
+            return left_dppx < right_dppx;
+        case Comparison::LessThanOrEqual:
+            return left_dppx <= right_dppx;
+        case Comparison::GreaterThan:
+            return left_dppx > right_dppx;
+        case Comparison::GreaterThanOrEqual:
+            return left_dppx >= right_dppx;
+        }
+        VERIFY_NOT_REACHED();
+    }
+
     VERIFY_NOT_REACHED();
 }
 

Userland/Libraries/LibWeb/CSS/MediaQuery.h

@@ -30,6 +30,11 @@ public:
     {
     }
 
+    explicit MediaFeatureValue(Resolution resolution)
+        : m_value(move(resolution))
+    {
+    }
+
     explicit MediaFeatureValue(double number)
         : m_value(number)
     {
@@ -40,6 +45,7 @@ public:
     bool is_ident() const { return m_value.has<String>(); }
     bool is_length() const { return m_value.has<Length>(); }
     bool is_number() const { return m_value.has<double>(); }
+    bool is_resolution() const { return m_value.has<Resolution>(); }
     bool is_same_type(MediaFeatureValue const& other) const;
 
     String const& ident() const
@@ -54,6 +60,12 @@ public:
         return m_value.get<Length>();
     }
 
+    Resolution const& resolution() const
+    {
+        VERIFY(is_resolution());
+        return m_value.get<Resolution>();
+    }
+
     double number() const
     {
         VERIFY(is_number());
@@ -62,7 +74,7 @@ public:
 
 private:
     // TODO: Support <ratio> once we have that.
-    Variant<String, Length, double> m_value;
+    Variant<String, Length, Resolution, double> m_value;
 };
 
 // https://www.w3.org/TR/mediaqueries-4/#mq-features

Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -1149,8 +1149,12 @@ Optional<MediaFeatureValue> Parser::parse_media_feature_value(TokenStream<StyleC
         return MediaFeatureValue(first.token().number_value());
 
     // `<dimension>`
-    if (auto length = parse_length(first); length.has_value())
+    if (auto dimension = parse_dimension(first); dimension.has_value()) {
-        return MediaFeatureValue(length.release_value());
+        if (dimension->is_length())
+            return MediaFeatureValue(dimension->length());
+        if (dimension->is_resolution())
+            return MediaFeatureValue(dimension->resolution());
+    }
 
     // `<ident>`
     if (first.is(Token::Type::Ident))