LibWeb: Make resolution calculable

No tests unfortunately, because no CSS property we currently support
accepts `<resolution>`.

Userland/Libraries/LibWeb/CSS/CalculatedOr.cpp

@@ -50,6 +50,11 @@ Percentage PercentageOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedSt
     return calculated->resolve_percentage().value();
 }
 
+Resolution ResolutionOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const&) const
+{
+    return calculated->resolve_resolution().value();
+}
+
 Time TimeOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const&) const
 {
     return calculated->resolve_time().value();

Userland/Libraries/LibWeb/CSS/CalculatedOr.h

@@ -12,6 +12,7 @@
 #include <LibWeb/CSS/Frequency.h>
 #include <LibWeb/CSS/Length.h>
 #include <LibWeb/CSS/Percentage.h>
+#include <LibWeb/CSS/Resolution.h>
 #include <LibWeb/CSS/StyleValues/CalculatedStyleValue.h>
 #include <LibWeb/CSS/Time.h>
 
@@ -128,6 +129,13 @@ public:
     Percentage resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
 };
 
+class ResolutionOrCalculated : public CalculatedOr<Resolution> {
+public:
+    using CalculatedOr<Resolution>::CalculatedOr;
+
+    Resolution resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+};
+
 class TimeOrCalculated : public CalculatedOr<Time> {
 public:
     using CalculatedOr<Time>::CalculatedOr;

Userland/Libraries/LibWeb/CSS/Resolution.cpp

@@ -14,6 +14,11 @@ Resolution::Resolution(double value, Type type)
 {
 }
 
+Resolution Resolution::make_dots_per_pixel(double value)
+{
+    return { value, Type::Dppx };
+}
+
 String Resolution::to_string() const
 {
     return MUST(String::formatted("{}dppx", to_dots_per_pixel()));

Userland/Libraries/LibWeb/CSS/Resolution.h

@@ -22,10 +22,14 @@ public:
     static Optional<Type> unit_from_name(StringView);
 
     Resolution(double value, Type type);
+    static Resolution make_dots_per_pixel(double);
 
     String to_string() const;
     double to_dots_per_pixel() const;
 
+    Type type() const { return m_type; }
+    double raw_value() const { return m_value; }
+
     bool operator==(Resolution const& other) const
     {
         return m_type == other.m_type && m_value == other.m_value;

Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp

@@ -42,6 +42,7 @@ static double resolve_value(CalculatedStyleValue::CalculationResult::Value value
         [](Frequency const& frequency) { return frequency.to_hertz(); },
         [&context](Length const& length) { return length.to_px(*context).to_double(); },
         [](Percentage const& percentage) { return percentage.value(); },
+        [](Resolution const& resolution) { return resolution.to_dots_per_pixel(); },
         [](Time const& time) { return time.to_seconds(); });
 }
 
@@ -83,6 +84,8 @@ static CalculatedStyleValue::CalculationResult to_resolved_type(CalculatedStyleV
         return { Length::make_px(CSSPixels::nearest_value_for(value)) };
     case CalculatedStyleValue::ResolvedType::Percentage:
         return { Percentage(value) };
+    case CalculatedStyleValue::ResolvedType::Resolution:
+        return { Resolution::make_dots_per_pixel(value) };
     case CalculatedStyleValue::ResolvedType::Time:
         return { Time::make_seconds(value) };
     }
@@ -144,6 +147,7 @@ Optional<CalculatedStyleValue::ResolvedType> NumericCalculationNode::resolved_ty
         [](Frequency const&) { return CalculatedStyleValue::ResolvedType::Frequency; },
         [](Length const&) { return CalculatedStyleValue::ResolvedType::Length; },
         [](Percentage const&) { return CalculatedStyleValue::ResolvedType::Percentage; },
+        [](Resolution const&) { return CalculatedStyleValue::ResolvedType::Resolution; },
         [](Time const&) { return CalculatedStyleValue::ResolvedType::Time; });
 }
 
@@ -178,7 +182,11 @@ Optional<CSSNumericType> NumericCalculationNode::determine_type(PropertyID prope
             //    the type is «[ "frequency" → 1 ]»
             return CSSNumericType { CSSNumericType::BaseType::Frequency, 1 };
         },
-        // FIXME: <resolution>
+        [](Resolution const&) {
+            // -> <resolution>
+            //    the type is «[ "resolution" → 1 ]»
+            return CSSNumericType { CSSNumericType::BaseType::Resolution, 1 };
+        },
         [](Flex const&) {
             // -> <flex>
             //    the type is «[ "flex" → 1 ]»
@@ -2115,6 +2123,15 @@ void CalculatedStyleValue::CalculationResult::add_or_subtract_internal(SumOperat
                     m_value = Length::make_px(this_px - other_px);
             }
         },
+        [&](Resolution const& resolution) {
+            auto this_dots_per_pixel = resolution.to_dots_per_pixel();
+            // NOTE: <resolution-percentage> is not a type, so we don't have to worry about percentages.
+            auto other_dots_per_pixel = other.m_value.get<Resolution>().to_dots_per_pixel();
+            if (op == SumOperation::Add)
+                m_value = Resolution::make_dots_per_pixel(this_dots_per_pixel + other_dots_per_pixel);
+            else
+                m_value = Resolution::make_dots_per_pixel(this_dots_per_pixel - other_dots_per_pixel);
+        },
         [&](Time const& time) {
             auto this_seconds = time.to_seconds();
             if (other.m_value.has<Time>()) {
@@ -2186,6 +2203,9 @@ void CalculatedStyleValue::CalculationResult::multiply_by(CalculationResult cons
         [&](Length const& length) {
             m_value = Length::make_px(CSSPixels::nearest_value_for(length.to_px(*context) * static_cast<double>(other.m_value.get<Number>().value())));
         },
+        [&](Resolution const& resolution) {
+            m_value = Resolution::make_dots_per_pixel(resolution.to_dots_per_pixel() * other.m_value.get<Number>().value());
+        },
         [&](Time const& time) {
             m_value = Time::make_seconds(time.to_seconds() * other.m_value.get<Number>().value());
         },
@@ -2221,6 +2241,9 @@ void CalculatedStyleValue::CalculationResult::divide_by(CalculationResult const&
         [&](Length const& length) {
             m_value = Length::make_px(CSSPixels::nearest_value_for(length.to_px(*context) / static_cast<double>(denominator)));
         },
+        [&](Resolution const& resolution) {
+            m_value = Resolution::make_dots_per_pixel(resolution.to_dots_per_pixel() / denominator);
+        },
         [&](Time const& time) {
             m_value = Time::make_seconds(time.to_seconds() / denominator);
         },
@@ -2247,6 +2270,9 @@ void CalculatedStyleValue::CalculationResult::negate()
         [&](Length const& length) {
             m_value = Length { 0 - length.raw_value(), length.type() };
         },
+        [&](Resolution const& resolution) {
+            m_value = Resolution { 0 - resolution.raw_value(), resolution.type() };
+        },
         [&](Time const& time) {
             m_value = Time { 0 - time.raw_value(), time.type() };
         },
@@ -2274,6 +2300,9 @@ void CalculatedStyleValue::CalculationResult::invert()
         [&](Length const& length) {
             m_value = Length { 1 / length.raw_value(), length.type() };
         },
+        [&](Resolution const& resolution) {
+            m_value = Resolution { 1 / resolution.raw_value(), resolution.type() };
+        },
         [&](Time const& time) {
             m_value = Time { 1 / time.raw_value(), time.type() };
         },
@@ -2403,6 +2432,14 @@ Optional<Percentage> CalculatedStyleValue::resolve_percentage() const
     return {};
 }
 
+Optional<Resolution> CalculatedStyleValue::resolve_resolution() const
+{
+    auto result = m_calculation->resolve({}, {});
+    if (result.value().has<Resolution>())
+        return result.value().get<Resolution>();
+    return {};
+}
+
 Optional<Time> CalculatedStyleValue::resolve_time() const
 {
     auto result = m_calculation->resolve({}, {});

Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h

@@ -16,6 +16,7 @@
 #include <LibWeb/CSS/Frequency.h>
 #include <LibWeb/CSS/Length.h>
 #include <LibWeb/CSS/Percentage.h>
+#include <LibWeb/CSS/Resolution.h>
 #include <LibWeb/CSS/StyleValue.h>
 #include <LibWeb/CSS/Time.h>
 
@@ -33,6 +34,7 @@ public:
         Length,
         Number,
         Percentage,
+        Resolution,
         Time,
     };
 
@@ -49,7 +51,7 @@ public:
 
     class CalculationResult {
     public:
-        using Value = Variant<Number, Angle, Flex, Frequency, Length, Percentage, Time>;
+        using Value = Variant<Number, Angle, Flex, Frequency, Length, Percentage, Resolution, Time>;
         CalculationResult(Value value)
             : m_value(move(value))
         {
@@ -100,6 +102,9 @@ public:
     bool resolves_to_percentage() const { return m_resolved_type.matches_percentage(); }
     Optional<Percentage> resolve_percentage() const;
 
+    bool resolves_to_resolution() const { return m_resolved_type.matches_resolution(); }
+    Optional<Resolution> resolve_resolution() const;
+
     bool resolves_to_time() const { return m_resolved_type.matches_time(); }
     bool resolves_to_time_percentage() const { return m_resolved_type.matches_time_percentage(); }
     Optional<Time> resolve_time() const;

Userland/Libraries/LibWeb/Forward.h

@@ -166,6 +166,7 @@ class Ratio;
 class RatioStyleValue;
 class RectStyleValue;
 class Resolution;
+class ResolutionOrCalculated;
 class ResolutionStyleValue;
 class RevertStyleValue;
 class Screen;