LibWeb: Introduce and parse CSS Ratio type

This is only used by media-queries, so for now we can skip
adding/parsing a StyleValue for these.

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -44,6 +44,7 @@ set(SOURCES
     CSS/PropertyID.cpp
     CSS/PropertyID.h
     CSS/QuirksModeStyleSheetSource.cpp
+    CSS/Ratio.cpp
     CSS/Resolution.cpp
     CSS/ResolvedCSSStyleDeclaration.cpp
     CSS/Screen.cpp

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

@@ -2231,6 +2231,39 @@ Optional<Length> Parser::parse_length(StyleComponentValueRule const& component_v
     return {};
 }
 
+Optional<Ratio> Parser::parse_ratio(TokenStream<StyleComponentValueRule>& tokens)
+{
+    auto position = tokens.position();
+    tokens.skip_whitespace();
+
+    auto error = [&]() -> Optional<Ratio> {
+        tokens.rewind_to_position(position);
+        return {};
+    };
+
+    // `<ratio> = <number [0,∞]> [ / <number [0,∞]> ]?`
+    // FIXME: I think either part is allowed to be calc(), which makes everything complicated.
+    auto first_number = tokens.next_token();
+    if (!first_number.is(Token::Type::Number) || first_number.token().number_value() < 0)
+        return error();
+
+    auto position_after_first_number = tokens.position();
+
+    tokens.skip_whitespace();
+    auto solidus = tokens.next_token();
+    tokens.skip_whitespace();
+    auto second_number = tokens.next_token();
+    if (solidus.is(Token::Type::Delim) && solidus.token().delim() == "/"
+        && second_number.is(Token::Type::Number) && second_number.token().number_value() > 0) {
+        // Two-value ratio
+        return Ratio { static_cast<float>(first_number.token().number_value()), static_cast<float>(second_number.token().number_value()) };
+    }
+
+    // Single-value ratio
+    tokens.rewind_to_position(position_after_first_number);
+    return Ratio { static_cast<float>(first_number.token().number_value()) };
+}
+
 RefPtr<StyleValue> Parser::parse_dimension_value(StyleComponentValueRule const& component_value)
 {
     // Numbers with no units can be lengths, in two situations:

Userland/Libraries/LibWeb/CSS/Parser/Parser.h

@@ -22,6 +22,7 @@
 #include <LibWeb/CSS/Parser/StyleFunctionRule.h>
 #include <LibWeb/CSS/Parser/StyleRule.h>
 #include <LibWeb/CSS/Parser/Tokenizer.h>
+#include <LibWeb/CSS/Ratio.h>
 #include <LibWeb/CSS/Selector.h>
 #include <LibWeb/CSS/StyleValue.h>
 #include <LibWeb/CSS/Supports.h>
@@ -243,6 +244,7 @@ private:
     Optional<Dimension> parse_dimension(StyleComponentValueRule const&);
     Optional<Color> parse_color(StyleComponentValueRule const&);
     Optional<Length> parse_length(StyleComponentValueRule const&);
+    Optional<Ratio> parse_ratio(TokenStream<StyleComponentValueRule>&);
 
     enum class AllowedDataUrlType {
         None,

Userland/Libraries/LibWeb/CSS/Ratio.cpp

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "Ratio.h"
+#include <math.h>
+
+namespace Web::CSS {
+
+Ratio::Ratio(float first, float second)
+    : m_first_value(first)
+    , m_second_value(second)
+{
+}
+
+// https://www.w3.org/TR/css-values-4/#degenerate-ratio
+bool Ratio::is_degenerate() const
+{
+    return !isfinite(m_first_value) || m_first_value == 0
+        || !isfinite(m_second_value) || m_second_value == 0;
+}
+
+String Ratio::to_string() const
+{
+    return String::formatted("{} / {}", m_first_value, m_second_value);
+}
+
+auto Ratio::operator<=>(const Ratio& other) const
+{
+    return value() - other.value();
+}
+
+}

Userland/Libraries/LibWeb/CSS/Ratio.h

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <AK/String.h>
+
+namespace Web::CSS {
+
+// https://www.w3.org/TR/css-values-4/#ratios
+class Ratio {
+public:
+    Ratio(float first, float second = 1);
+    float value() const { return m_first_value / m_second_value; }
+    bool is_degenerate() const;
+
+    String to_string() const;
+    auto operator<=>(Ratio const& other) const;
+
+private:
+    float m_first_value { 0 };
+    float m_second_value { 1 };
+};
+
+}