From 5bdc2981e3ad73a879d40de4797a939ea59091a3 Mon Sep 17 00:00:00 2001
From: Sam Atkins <sam@ladybird.org>
Date: Fri, 15 Aug 2025 12:55:58 +0100
Subject: [PATCH] LibWeb/CSS: Rename CSSNumericType to NumericType

The CSSNumericType defined in the spec is a simple dictionary which is
only used for OM purposes. This NumericType class is used internally
and matches the more abstract definition of a "type".
---
 Libraries/LibWeb/CMakeLists.txt               |   2 +-
 Libraries/LibWeb/CSS/Interpolation.cpp        |  16 +--
 .../{CSSNumericType.cpp => NumericType.cpp}   |  86 +++++------
 .../CSS/{CSSNumericType.h => NumericType.h}   |  34 +++--
 .../LibWeb/CSS/Parser/PropertyParsing.cpp     |   2 +-
 .../CSS/StyleValues/CalculatedStyleValue.cpp  | 134 +++++++++---------
 .../CSS/StyleValues/CalculatedStyleValue.h    |  46 +++---
 .../LibWeb/CSS/StyleValues/EdgeStyleValue.cpp |   2 +-
 Libraries/LibWeb/Forward.h                    |   1 +
 .../LibWeb/GenerateCSSMathFunctions.cpp       |   4 +-
 10 files changed, 163 insertions(+), 164 deletions(-)
 rename Libraries/LibWeb/CSS/{CSSNumericType.cpp => NumericType.cpp} (87%)
 rename Libraries/LibWeb/CSS/{CSSNumericType.h => NumericType.h} (78%)

diff --git a/Libraries/LibWeb/CMakeLists.txt b/Libraries/LibWeb/CMakeLists.txt
index cab0761aed1..3be8ef08c7d 100644
--- a/Libraries/LibWeb/CMakeLists.txt
+++ b/Libraries/LibWeb/CMakeLists.txt
@@ -119,7 +119,6 @@ set(SOURCES
     CSS/CSSMediaRule.cpp
     CSS/CSSNamespaceRule.cpp
     CSS/CSSNestedDeclarations.cpp
-    CSS/CSSNumericType.cpp
     CSS/CSSPageRule.cpp
     CSS/CSSPageDescriptors.cpp
     CSS/CSSPropertyRule.cpp
@@ -153,6 +152,7 @@ set(SOURCES
     CSS/MediaQueryList.cpp
     CSS/MediaQueryListEvent.cpp
     CSS/Number.cpp
+    CSS/NumericType.cpp
     CSS/PageSelector.cpp
     CSS/ParsedFontFace.cpp
     CSS/Parser/ArbitrarySubstitutionFunctions.cpp
diff --git a/Libraries/LibWeb/CSS/Interpolation.cpp b/Libraries/LibWeb/CSS/Interpolation.cpp
index bc9b6293e52..6a2fed7b530 100644
--- a/Libraries/LibWeb/CSS/Interpolation.cpp
+++ b/Libraries/LibWeb/CSS/Interpolation.cpp
@@ -1023,30 +1023,30 @@ static RefPtr<StyleValue const> interpolate_value_impl(DOM::Element& element, Ca
         // https://www.w3.org/TR/css-values-4/#mixed-percentages
 
         struct NumericBaseTypeAndDefault {
-            CSSNumericType::BaseType base_type;
+            NumericType::BaseType base_type;
             ValueComparingNonnullRefPtr<StyleValue const> default_value;
         };
         static constexpr auto numeric_base_type_and_default = [](StyleValue const& value) -> Optional<NumericBaseTypeAndDefault> {
             switch (value.type()) {
             case StyleValue::Type::Angle: {
                 static auto default_angle_value = AngleStyleValue::create(Angle::make_degrees(0));
-                return NumericBaseTypeAndDefault { CSSNumericType::BaseType::Angle, default_angle_value };
+                return NumericBaseTypeAndDefault { NumericType::BaseType::Angle, default_angle_value };
             }
             case StyleValue::Type::Frequency: {
                 static auto default_frequency_value = FrequencyStyleValue::create(Frequency::make_hertz(0));
-                return NumericBaseTypeAndDefault { CSSNumericType::BaseType::Frequency, default_frequency_value };
+                return NumericBaseTypeAndDefault { NumericType::BaseType::Frequency, default_frequency_value };
             }
             case StyleValue::Type::Length: {
                 static auto default_length_value = LengthStyleValue::create(Length::make_px(0));
-                return NumericBaseTypeAndDefault { CSSNumericType::BaseType::Length, default_length_value };
+                return NumericBaseTypeAndDefault { NumericType::BaseType::Length, default_length_value };
             }
             case StyleValue::Type::Percentage: {
                 static auto default_percentage_value = PercentageStyleValue::create(Percentage { 0.0 });
-                return NumericBaseTypeAndDefault { CSSNumericType::BaseType::Percent, default_percentage_value };
+                return NumericBaseTypeAndDefault { NumericType::BaseType::Percent, default_percentage_value };
             }
             case StyleValue::Type::Time: {
                 static auto default_time_value = TimeStyleValue::create(Time::make_seconds(0));
-                return NumericBaseTypeAndDefault { CSSNumericType::BaseType::Time, default_time_value };
+                return NumericBaseTypeAndDefault { NumericType::BaseType::Time, default_time_value };
             }
             default:
                 return {};
@@ -1073,7 +1073,7 @@ static RefPtr<StyleValue const> interpolate_value_impl(DOM::Element& element, Ca
         auto from_base_type_and_default = numeric_base_type_and_default(from);
         auto to_base_type_and_default = numeric_base_type_and_default(to);
 
-        if (from_base_type_and_default.has_value() && to_base_type_and_default.has_value() && (from_base_type_and_default->base_type == CSSNumericType::BaseType::Percent || to_base_type_and_default->base_type == CSSNumericType::BaseType::Percent)) {
+        if (from_base_type_and_default.has_value() && to_base_type_and_default.has_value() && (from_base_type_and_default->base_type == NumericType::BaseType::Percent || to_base_type_and_default->base_type == NumericType::BaseType::Percent)) {
             // This is an interpolation from a numeric unit to a percentage, or vice versa. The trick here is to
             // interpolate two separate values. For example, consider an interpolation from 30px to 80%. It's quite
             // hard to understand how this interpolation works, but if instead we rewrite the values as "30px + 0%" and
@@ -1089,7 +1089,7 @@ static RefPtr<StyleValue const> interpolate_value_impl(DOM::Element& element, Ca
             values.unchecked_append(to_calculation_node(*interpolated_from));
             values.unchecked_append(to_calculation_node(*interpolated_to));
             auto calc_node = SumCalculationNode::create(move(values));
-            return CalculatedStyleValue::create(move(calc_node), CSSNumericType { to_base_type_and_default->base_type, 1 }, calculation_context);
+            return CalculatedStyleValue::create(move(calc_node), NumericType { to_base_type_and_default->base_type, 1 }, calculation_context);
         }
 
         return {};
diff --git a/Libraries/LibWeb/CSS/CSSNumericType.cpp b/Libraries/LibWeb/CSS/NumericType.cpp
similarity index 87%
rename from Libraries/LibWeb/CSS/CSSNumericType.cpp
rename to Libraries/LibWeb/CSS/NumericType.cpp
index 5b2a4361254..45ea328e21e 100644
--- a/Libraries/LibWeb/CSS/CSSNumericType.cpp
+++ b/Libraries/LibWeb/CSS/NumericType.cpp
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
-#include "CSSNumericType.h"
+#include "NumericType.h"
 #include <LibWeb/CSS/Angle.h>
 #include <LibWeb/CSS/Frequency.h>
 #include <LibWeb/CSS/Length.h>
@@ -14,7 +14,7 @@
 
 namespace Web::CSS {
 
-Optional<CSSNumericType::BaseType> CSSNumericType::base_type_from_value_type(ValueType value_type)
+Optional<NumericType::BaseType> NumericType::base_type_from_value_type(ValueType value_type)
 {
     switch (value_type) {
     case ValueType::Angle:
@@ -38,50 +38,50 @@ Optional<CSSNumericType::BaseType> CSSNumericType::base_type_from_value_type(Val
 }
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-create-a-type
-Optional<CSSNumericType> CSSNumericType::create_from_unit(StringView unit)
+Optional<NumericType> NumericType::create_from_unit(StringView unit)
 {
     // To create a type from a string unit, follow the appropriate branch of the following:
 
     // unit is "number"
     if (unit == "number"sv) {
         // Return «[ ]» (empty map)
-        return CSSNumericType {};
+        return NumericType {};
     }
 
     // unit is "percent"
     if (unit == "percent"sv) {
         // Return «[ "percent" → 1 ]»
-        return CSSNumericType { BaseType::Percent, 1 };
+        return NumericType { BaseType::Percent, 1 };
     }
 
     // unit is a <length> unit
     if (Length::unit_from_name(unit).has_value()) {
         // Return «[ "length" → 1 ]»
-        return CSSNumericType { BaseType::Length, 1 };
+        return NumericType { BaseType::Length, 1 };
     }
 
     // unit is an <angle> unit
     if (Angle::unit_from_name(unit).has_value()) {
         //    Return «[ "angle" → 1 ]»
-        return CSSNumericType { BaseType::Angle, 1 };
+        return NumericType { BaseType::Angle, 1 };
     }
 
     // unit is a <time> unit
     if (Time::unit_from_name(unit).has_value()) {
         //    Return «[ "time" → 1 ]»
-        return CSSNumericType { BaseType::Time, 1 };
+        return NumericType { BaseType::Time, 1 };
     }
 
     // unit is a <frequency> unit
     if (Frequency::unit_from_name(unit).has_value()) {
         //    Return «[ "frequency" → 1 ]»
-        return CSSNumericType { BaseType::Frequency, 1 };
+        return NumericType { BaseType::Frequency, 1 };
     }
 
     // unit is a <resolution> unit
     if (Resolution::unit_from_name(unit).has_value()) {
         //    Return «[ "resolution" → 1 ]»
-        return CSSNumericType { BaseType::Resolution, 1 };
+        return NumericType { BaseType::Resolution, 1 };
     }
 
     // unit is a <flex> unit
@@ -96,15 +96,15 @@ Optional<CSSNumericType> CSSNumericType::create_from_unit(StringView unit)
 }
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types
-Optional<CSSNumericType> CSSNumericType::added_to(CSSNumericType const& other) const
+Optional<NumericType> NumericType::added_to(NumericType const& other) const
 {
     // To add two types type1 and type2, perform the following steps:
 
     // 1. Replace type1 with a fresh copy of type1, and type2 with a fresh copy of type2.
     //    Let finalType be a new type with an initially empty ordered map and an initially null percent hint.
-    CSSNumericType type1 = *this;
-    CSSNumericType type2 = other;
-    CSSNumericType final_type {};
+    NumericType type1 = *this;
+    NumericType type2 = other;
+    NumericType final_type {};
 
     // 2. If both type1 and type2 have non-null percent hints with different values
     if (type1.percent_hint().has_value() && type2.percent_hint().has_value() && type1.percent_hint() != type2.percent_hint()) {
@@ -175,15 +175,15 @@ Optional<CSSNumericType> CSSNumericType::added_to(CSSNumericType const& other) c
 }
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types
-Optional<CSSNumericType> CSSNumericType::multiplied_by(CSSNumericType const& other) const
+Optional<NumericType> NumericType::multiplied_by(NumericType const& other) const
 {
     // To multiply two types type1 and type2, perform the following steps:
 
     // 1. Replace type1 with a fresh copy of type1, and type2 with a fresh copy of type2.
     //    Let finalType be a new type with an initially empty ordered map and an initially null percent hint.
-    CSSNumericType type1 = *this;
-    CSSNumericType type2 = other;
-    CSSNumericType final_type {};
+    NumericType type1 = *this;
+    NumericType type2 = other;
+    NumericType final_type {};
 
     // 2. If both type1 and type2 have non-null percent hints with different values,
     //    the types can’t be multiplied. Return failure.
@@ -224,12 +224,12 @@ Optional<CSSNumericType> CSSNumericType::multiplied_by(CSSNumericType const& oth
 }
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-invert-a-type
-CSSNumericType CSSNumericType::inverted() const
+NumericType NumericType::inverted() const
 {
     // To invert a type type, perform the following steps:
 
     // 1. Let result be a new type with an initially empty ordered map and a percent hint matching that of type.
-    CSSNumericType result;
+    NumericType result;
     result.set_percent_hint(percent_hint());
 
     // 2. For each unit → exponent of type, set result[unit] to (-1 * exponent).
@@ -246,21 +246,21 @@ CSSNumericType CSSNumericType::inverted() const
 }
 
 // https://drafts.csswg.org/css-values-4/#css-consistent-typec
-bool CSSNumericType::has_consistent_type_with(CSSNumericType const& other) const
+bool NumericType::has_consistent_type_with(NumericType const& other) const
 {
     // Two or more calculations have a consistent type if adding the types doesn’t result in failure.
     return added_to(other).has_value();
 }
 
 // https://drafts.csswg.org/css-values-4/#css-consistent-typec
-Optional<CSSNumericType> CSSNumericType::consistent_type(CSSNumericType const& other) const
+Optional<NumericType> NumericType::consistent_type(NumericType const& other) const
 {
     // The consistent type is the result of the type addition.
     return added_to(other);
 }
 
 // https://drafts.csswg.org/css-values-4/#css-make-a-type-consistent
-Optional<CSSNumericType> CSSNumericType::made_consistent_with(CSSNumericType const& input) const
+Optional<NumericType> NumericType::made_consistent_with(NumericType const& input) const
 {
     auto base = *this;
 
@@ -279,7 +279,7 @@ Optional<CSSNumericType> CSSNumericType::made_consistent_with(CSSNumericType con
 }
 
 // https://drafts.css-houdini.org/css-typed-om-1/#apply-the-percent-hint
-void CSSNumericType::apply_percent_hint(BaseType hint)
+void NumericType::apply_percent_hint(BaseType hint)
 {
     // To apply the percent hint hint to a type without a percent hint, perform the following steps:
     VERIFY(!percent_hint().has_value());
@@ -302,7 +302,7 @@ void CSSNumericType::apply_percent_hint(BaseType hint)
     // FIXME: Is this needed? Nothing uses the value. https://github.com/w3c/css-houdini-drafts/issues/1135
 }
 
-bool CSSNumericType::contains_all_the_non_zero_entries_of_other_with_the_same_value(CSSNumericType const& other) const
+bool NumericType::contains_all_the_non_zero_entries_of_other_with_the_same_value(NumericType const& other) const
 {
     for (auto i = 0; i < to_underlying(BaseType::__Count); ++i) {
         auto other_exponent = other.exponent(static_cast<BaseType>(i));
@@ -314,7 +314,7 @@ bool CSSNumericType::contains_all_the_non_zero_entries_of_other_with_the_same_va
     return true;
 }
 
-bool CSSNumericType::contains_a_key_other_than_percent_with_a_non_zero_value() const
+bool NumericType::contains_a_key_other_than_percent_with_a_non_zero_value() const
 {
     for (auto i = 0; i < to_underlying(BaseType::__Count); ++i) {
         if (i == to_underlying(BaseType::Percent))
@@ -325,7 +325,7 @@ bool CSSNumericType::contains_a_key_other_than_percent_with_a_non_zero_value() c
     return false;
 }
 
-void CSSNumericType::copy_all_entries_from(CSSNumericType const& other, SkipIfAlreadyPresent ignore_existing_values)
+void NumericType::copy_all_entries_from(NumericType const& other, SkipIfAlreadyPresent ignore_existing_values)
 {
     for (auto i = 0; i < to_underlying(BaseType::__Count); ++i) {
         auto base_type = static_cast<BaseType>(i);
@@ -338,7 +338,7 @@ void CSSNumericType::copy_all_entries_from(CSSNumericType const& other, SkipIfAl
     }
 }
 
-Optional<CSSNumericType::BaseType> CSSNumericType::entry_with_value_1_while_all_others_are_0() const
+Optional<NumericType::BaseType> NumericType::entry_with_value_1_while_all_others_are_0() const
 {
     Optional<BaseType> result;
     for (auto i = 0; i < to_underlying(BaseType::__Count); ++i) {
@@ -355,31 +355,31 @@ Optional<CSSNumericType::BaseType> CSSNumericType::entry_with_value_1_while_all_
     return result;
 }
 
-static bool matches(CSSNumericType::BaseType base_type, ValueType value_type)
+static bool matches(NumericType::BaseType base_type, ValueType value_type)
 {
     switch (base_type) {
-    case CSSNumericType::BaseType::Length:
+    case NumericType::BaseType::Length:
         return value_type == ValueType::Length;
-    case CSSNumericType::BaseType::Angle:
+    case NumericType::BaseType::Angle:
         return value_type == ValueType::Angle;
-    case CSSNumericType::BaseType::Time:
+    case NumericType::BaseType::Time:
         return value_type == ValueType::Time;
-    case CSSNumericType::BaseType::Frequency:
+    case NumericType::BaseType::Frequency:
         return value_type == ValueType::Frequency;
-    case CSSNumericType::BaseType::Resolution:
+    case NumericType::BaseType::Resolution:
         return value_type == ValueType::Resolution;
-    case CSSNumericType::BaseType::Flex:
+    case NumericType::BaseType::Flex:
         return value_type == ValueType::Flex;
-    case CSSNumericType::BaseType::Percent:
+    case NumericType::BaseType::Percent:
         return value_type == ValueType::Percentage;
-    case CSSNumericType::BaseType::__Count:
+    case NumericType::BaseType::__Count:
     default:
         return false;
     }
 }
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match
-bool CSSNumericType::matches_dimension(BaseType type, Optional<ValueType> percentages_resolve_as) const
+bool NumericType::matches_dimension(BaseType type, Optional<ValueType> percentages_resolve_as) const
 {
     // A type matches <length> if its only non-zero entry is «[ "length" → 1 ]».
     // Similarly for <angle>, <time>, <frequency>, <resolution>, and <flex>.
@@ -399,7 +399,7 @@ bool CSSNumericType::matches_dimension(BaseType type, Optional<ValueType> percen
 }
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match
-bool CSSNumericType::matches_percentage() const
+bool NumericType::matches_percentage() const
 {
     // A type matches <percentage> if its only non-zero entry is «[ "percent" → 1 ]», and its percent hint is either
     // null or "percent".
@@ -410,7 +410,7 @@ bool CSSNumericType::matches_percentage() const
 }
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match
-bool CSSNumericType::matches_dimension_percentage(BaseType type, Optional<ValueType> percentages_resolve_as) const
+bool NumericType::matches_dimension_percentage(BaseType type, Optional<ValueType> percentages_resolve_as) const
 {
     // A type matches <length-percentage> if it matches <length> or matches <percentage>.
     // Same for <angle-percentage>, <time-percentage>, etc.
@@ -418,7 +418,7 @@ bool CSSNumericType::matches_dimension_percentage(BaseType type, Optional<ValueT
 }
 
 // https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match
-bool CSSNumericType::matches_number(Optional<ValueType> percentages_resolve_as) const
+bool NumericType::matches_number(Optional<ValueType> percentages_resolve_as) const
 {
     // A type matches <number> if it has no non-zero entries.
     for (auto i = 0; i < to_underlying(BaseType::__Count); ++i) {
@@ -445,7 +445,7 @@ bool CSSNumericType::matches_number(Optional<ValueType> percentages_resolve_as)
     return !percent_hint().has_value();
 }
 
-bool CSSNumericType::matches_dimension() const
+bool NumericType::matches_dimension() const
 {
     // This isn't a spec algorithm.
     // A type should match `<dimension>` if there are no non-zero entries,
@@ -471,7 +471,7 @@ bool CSSNumericType::matches_dimension() const
     return number_of_one_exponents == 0 || number_of_one_exponents == 1;
 }
 
-String CSSNumericType::dump() const
+String NumericType::dump() const
 {
     StringBuilder builder;
     builder.appendff("{{ hint: {}", m_percent_hint.map([](auto base_type) { return base_type_name(base_type); }));
diff --git a/Libraries/LibWeb/CSS/CSSNumericType.h b/Libraries/LibWeb/CSS/NumericType.h
similarity index 78%
rename from Libraries/LibWeb/CSS/CSSNumericType.h
rename to Libraries/LibWeb/CSS/NumericType.h
index 71cc53b2e00..063f52b7821 100644
--- a/Libraries/LibWeb/CSS/CSSNumericType.h
+++ b/Libraries/LibWeb/CSS/NumericType.h
@@ -13,11 +13,9 @@
 
 namespace Web::CSS {
 
-// https://drafts.css-houdini.org/css-typed-om-1/#numeric-typing
-// FIXME: Add IDL for this.
-class CSSNumericType {
+// https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type
+class NumericType {
 public:
-    // https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-base-type
     enum class BaseType {
         Length,
         Angle,
@@ -53,20 +51,20 @@ public:
         VERIFY_NOT_REACHED();
     }
 
-    static Optional<CSSNumericType> create_from_unit(StringView unit);
-    CSSNumericType() = default;
-    CSSNumericType(BaseType type, i32 power)
+    static Optional<NumericType> create_from_unit(StringView unit);
+    NumericType() = default;
+    NumericType(BaseType type, i32 power)
     {
         set_exponent(type, power);
     }
 
-    Optional<CSSNumericType> added_to(CSSNumericType const& other) const;
-    Optional<CSSNumericType> multiplied_by(CSSNumericType const& other) const;
-    CSSNumericType inverted() const;
+    Optional<NumericType> added_to(NumericType const& other) const;
+    Optional<NumericType> multiplied_by(NumericType const& other) const;
+    NumericType inverted() const;
 
-    bool has_consistent_type_with(CSSNumericType const& other) const;
-    Optional<CSSNumericType> consistent_type(CSSNumericType const& other) const;
-    Optional<CSSNumericType> made_consistent_with(CSSNumericType const& other) const;
+    bool has_consistent_type_with(NumericType const& other) const;
+    Optional<NumericType> consistent_type(NumericType const& other) const;
+    Optional<NumericType> made_consistent_with(NumericType const& other) const;
 
     bool matches_angle(Optional<ValueType> percentages_resolve_as) const { return matches_dimension(BaseType::Angle, percentages_resolve_as); }
     bool matches_angle_percentage(Optional<ValueType> percentages_resolve_as) const { return matches_dimension_percentage(BaseType::Angle, percentages_resolve_as); }
@@ -90,18 +88,18 @@ public:
     void set_percent_hint(Optional<BaseType> hint) { m_percent_hint = hint; }
     void apply_percent_hint(BaseType hint);
 
-    bool operator==(CSSNumericType const& other) const = default;
+    bool operator==(NumericType const& other) const = default;
 
     String dump() const;
 
 private:
-    bool contains_all_the_non_zero_entries_of_other_with_the_same_value(CSSNumericType const& other) const;
+    bool contains_all_the_non_zero_entries_of_other_with_the_same_value(NumericType const& other) const;
     bool contains_a_key_other_than_percent_with_a_non_zero_value() const;
     enum class SkipIfAlreadyPresent {
         No,
         Yes,
     };
-    void copy_all_entries_from(CSSNumericType const& other, SkipIfAlreadyPresent);
+    void copy_all_entries_from(NumericType const& other, SkipIfAlreadyPresent);
 
     Optional<BaseType> entry_with_value_1_while_all_others_are_0() const;
     bool matches_dimension(BaseType, Optional<ValueType> percentages_resolve_as) const;
@@ -114,8 +112,8 @@ private:
 }
 
 template<>
-struct AK::Formatter<Web::CSS::CSSNumericType> : Formatter<StringView> {
-    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::CSSNumericType const& value)
+struct AK::Formatter<Web::CSS::NumericType> : Formatter<StringView> {
+    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::NumericType const& value)
     {
         return Formatter<StringView>::format(builder, value.dump());
     }
diff --git a/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp b/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp
index cd13ddfc706..612b6257997 100644
--- a/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp
+++ b/Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp
@@ -3831,7 +3831,7 @@ RefPtr<StyleValue const> Parser::parse_opacity_value(PropertyID property_id, Tok
             auto resolved_percentage = maybe_percentage->as_fraction();
             CalculationContext context {};
             auto calc_node = NumericCalculationNode::create(Number { Number::Type::Number, resolved_percentage }, context);
-            value = CalculatedStyleValue::create(move(calc_node), CSSNumericType { CSSNumericType::BaseType::Length, 1 }, context);
+            value = CalculatedStyleValue::create(move(calc_node), NumericType { NumericType::BaseType::Length, 1 }, context);
         }
     }
 
diff --git a/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
index da7cd415bdc..2fb5c502838 100644
--- a/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
@@ -24,9 +24,9 @@
 
 namespace Web::CSS {
 
-static Optional<CSSNumericType> add_the_types(Vector<NonnullRefPtr<CalculationNode const>> const& nodes)
+static Optional<NumericType> add_the_types(Vector<NonnullRefPtr<CalculationNode const>> const& nodes)
 {
-    Optional<CSSNumericType> left_type;
+    Optional<NumericType> left_type;
     for (auto const& value : nodes) {
         auto right_type = value->numeric_type();
         if (!right_type.has_value())
@@ -45,7 +45,7 @@ static Optional<CSSNumericType> add_the_types(Vector<NonnullRefPtr<CalculationNo
     return left_type;
 }
 
-static Optional<CSSNumericType> add_the_types(CalculationNode const& a, CalculationNode const& b)
+static Optional<NumericType> add_the_types(CalculationNode const& a, CalculationNode const& b)
 {
     auto a_type = a.numeric_type();
     auto b_type = b.numeric_type();
@@ -54,7 +54,7 @@ static Optional<CSSNumericType> add_the_types(CalculationNode const& a, Calculat
     return a_type->added_to(*b_type);
 }
 
-static Optional<CSSNumericType> add_the_types(CalculationNode const& a, CalculationNode const& b, CalculationNode const& c)
+static Optional<NumericType> add_the_types(CalculationNode const& a, CalculationNode const& b, CalculationNode const& c)
 {
     auto a_type = a.numeric_type();
     auto b_type = b.numeric_type();
@@ -69,11 +69,11 @@ static Optional<CSSNumericType> add_the_types(CalculationNode const& a, Calculat
     return a_and_b_type->added_to(*c_type);
 }
 
-static Optional<CSSNumericType> multiply_the_types(Vector<NonnullRefPtr<CalculationNode const>> const& nodes)
+static Optional<NumericType> multiply_the_types(Vector<NonnullRefPtr<CalculationNode const>> const& nodes)
 {
     // At a * sub-expression, multiply the types of the left and right arguments.
     // The sub-expression’s type is the returned result.
-    Optional<CSSNumericType> left_type;
+    Optional<NumericType> left_type;
     for (auto const& value : nodes) {
         auto right_type = value->numeric_type();
         if (!right_type.has_value())
@@ -491,7 +491,7 @@ static String serialize_a_calculation_tree(CalculationNode const& root, Calculat
     VERIFY_NOT_REACHED();
 }
 
-CalculationNode::CalculationNode(Type type, Optional<CSSNumericType> numeric_type)
+CalculationNode::CalculationNode(Type type, Optional<NumericType> numeric_type)
     : m_type(type)
     , m_numeric_type(move(numeric_type))
 {
@@ -552,7 +552,7 @@ StringView CalculationNode::name() const
     VERIFY_NOT_REACHED();
 }
 
-static CSSNumericType numeric_type_from_calculated_style_value(CalculatedStyleValue::CalculationResult::Value const& value, CalculationContext const& context)
+static NumericType numeric_type_from_calculated_style_value(CalculatedStyleValue::CalculationResult::Value const& value, CalculationContext const& context)
 {
     // https://drafts.csswg.org/css-values-4/#determine-the-type-of-a-calculation
     // Anything else is a terminal value, whose type is determined based on its CSS type.
@@ -562,37 +562,37 @@ static CSSNumericType numeric_type_from_calculated_style_value(CalculatedStyleVa
             // -> <number>
             // -> <integer>
             //    the type is «[ ]» (empty map)
-            return CSSNumericType {};
+            return NumericType {};
         },
         [](Length const&) {
             // -> <length>
             //    the type is «[ "length" → 1 ]»
-            return CSSNumericType { CSSNumericType::BaseType::Length, 1 };
+            return NumericType { NumericType::BaseType::Length, 1 };
         },
         [](Angle const&) {
             // -> <angle>
             //    the type is «[ "angle" → 1 ]»
-            return CSSNumericType { CSSNumericType::BaseType::Angle, 1 };
+            return NumericType { NumericType::BaseType::Angle, 1 };
         },
         [](Time const&) {
             // -> <time>
             //    the type is «[ "time" → 1 ]»
-            return CSSNumericType { CSSNumericType::BaseType::Time, 1 };
+            return NumericType { NumericType::BaseType::Time, 1 };
         },
         [](Frequency const&) {
             // -> <frequency>
             //    the type is «[ "frequency" → 1 ]»
-            return CSSNumericType { CSSNumericType::BaseType::Frequency, 1 };
+            return NumericType { NumericType::BaseType::Frequency, 1 };
         },
         [](Resolution const&) {
             // -> <resolution>
             //    the type is «[ "resolution" → 1 ]»
-            return CSSNumericType { CSSNumericType::BaseType::Resolution, 1 };
+            return NumericType { NumericType::BaseType::Resolution, 1 };
         },
         [](Flex const&) {
             // -> <flex>
             //    the type is «[ "flex" → 1 ]»
-            return CSSNumericType { CSSNumericType::BaseType::Flex, 1 };
+            return NumericType { NumericType::BaseType::Flex, 1 };
         },
         // NOTE: <calc-constant> is a separate node type. (FIXME: Should it be?)
         [&context](Percentage const&) {
@@ -602,17 +602,17 @@ static CSSNumericType numeric_type_from_calculated_style_value(CalculatedStyleVa
             //    where <percentage> is resolved against a <length>), and that other type is not <number>,
             //    the type is determined as the other type, but with a percent hint set to that other type.
             if (context.percentages_resolve_as.has_value() && context.percentages_resolve_as != ValueType::Number && context.percentages_resolve_as != ValueType::Percentage) {
-                auto base_type = CSSNumericType::base_type_from_value_type(*context.percentages_resolve_as);
+                auto base_type = NumericType::base_type_from_value_type(*context.percentages_resolve_as);
                 VERIFY(base_type.has_value());
-                auto result = CSSNumericType { base_type.value(), 1 };
+                auto result = NumericType { base_type.value(), 1 };
                 result.set_percent_hint(base_type);
                 return result;
             }
 
             //    Otherwise, the type is «[ "percent" → 1 ]», with a percent hint of "percent".
-            auto result = CSSNumericType { CSSNumericType::BaseType::Percent, 1 };
+            auto result = NumericType { NumericType::BaseType::Percent, 1 };
             // FIXME: Setting the percent hint to "percent" causes us to fail tests.
-            // result.set_percent_hint(CSSNumericType::BaseType::Percent);
+            // result.set_percent_hint(NumericType::BaseType::Percent);
             return result;
         });
 }
@@ -646,7 +646,7 @@ RefPtr<NumericCalculationNode const> NumericCalculationNode::from_keyword(Keywor
     }
 }
 
-NumericCalculationNode::NumericCalculationNode(NumericValue value, CSSNumericType numeric_type)
+NumericCalculationNode::NumericCalculationNode(NumericValue value, NumericType numeric_type)
     : CalculationNode(Type::Numeric, move(numeric_type))
     , m_value(move(value))
 {
@@ -813,7 +813,7 @@ NonnullRefPtr<SumCalculationNode const> SumCalculationNode::create(Vector<Nonnul
     return adopt_ref(*new (nothrow) SumCalculationNode(move(values), move(numeric_type)));
 }
 
-SumCalculationNode::SumCalculationNode(Vector<NonnullRefPtr<CalculationNode const>> values, Optional<CSSNumericType> numeric_type)
+SumCalculationNode::SumCalculationNode(Vector<NonnullRefPtr<CalculationNode const>> values, Optional<NumericType> numeric_type)
     : CalculationNode(Type::Sum, move(numeric_type))
     , m_values(move(values))
 {
@@ -883,7 +883,7 @@ NonnullRefPtr<ProductCalculationNode const> ProductCalculationNode::create(Vecto
     return adopt_ref(*new (nothrow) ProductCalculationNode(move(values), move(numeric_type)));
 }
 
-ProductCalculationNode::ProductCalculationNode(Vector<NonnullRefPtr<CalculationNode const>> values, Optional<CSSNumericType> numeric_type)
+ProductCalculationNode::ProductCalculationNode(Vector<NonnullRefPtr<CalculationNode const>> values, Optional<NumericType> numeric_type)
     : CalculationNode(Type::Product, move(numeric_type))
     , m_values(move(values))
 {
@@ -1002,7 +1002,7 @@ NonnullRefPtr<InvertCalculationNode const> InvertCalculationNode::create(Nonnull
     return adopt_ref(*new (nothrow) InvertCalculationNode(move(value), move(numeric_type)));
 }
 
-InvertCalculationNode::InvertCalculationNode(NonnullRefPtr<CalculationNode const> value, Optional<CSSNumericType> numeric_type)
+InvertCalculationNode::InvertCalculationNode(NonnullRefPtr<CalculationNode const> value, Optional<NumericType> numeric_type)
     : CalculationNode(Type::Invert, move(numeric_type))
     , m_value(move(value))
 {
@@ -1050,7 +1050,7 @@ NonnullRefPtr<MinCalculationNode const> MinCalculationNode::create(Vector<Nonnul
     return adopt_ref(*new (nothrow) MinCalculationNode(move(values), move(numeric_type)));
 }
 
-MinCalculationNode::MinCalculationNode(Vector<NonnullRefPtr<CalculationNode const>> values, Optional<CSSNumericType> numeric_type)
+MinCalculationNode::MinCalculationNode(Vector<NonnullRefPtr<CalculationNode const>> values, Optional<NumericType> numeric_type)
     : CalculationNode(Type::Min, move(numeric_type))
     , m_values(move(values))
 {
@@ -1174,7 +1174,7 @@ NonnullRefPtr<MaxCalculationNode const> MaxCalculationNode::create(Vector<Nonnul
     return adopt_ref(*new (nothrow) MaxCalculationNode(move(values), move(numeric_type)));
 }
 
-MaxCalculationNode::MaxCalculationNode(Vector<NonnullRefPtr<CalculationNode const>> values, Optional<CSSNumericType> numeric_type)
+MaxCalculationNode::MaxCalculationNode(Vector<NonnullRefPtr<CalculationNode const>> values, Optional<NumericType> numeric_type)
     : CalculationNode(Type::Max, move(numeric_type))
     , m_values(move(values))
 {
@@ -1251,7 +1251,7 @@ NonnullRefPtr<ClampCalculationNode const> ClampCalculationNode::create(NonnullRe
     return adopt_ref(*new (nothrow) ClampCalculationNode(move(min), move(center), move(max), move(numeric_type)));
 }
 
-ClampCalculationNode::ClampCalculationNode(NonnullRefPtr<CalculationNode const> min, NonnullRefPtr<CalculationNode const> center, NonnullRefPtr<CalculationNode const> max, Optional<CSSNumericType> numeric_type)
+ClampCalculationNode::ClampCalculationNode(NonnullRefPtr<CalculationNode const> min, NonnullRefPtr<CalculationNode const> center, NonnullRefPtr<CalculationNode const> max, Optional<NumericType> numeric_type)
     : CalculationNode(Type::Clamp, move(numeric_type))
     , m_min_value(move(min))
     , m_center_value(move(center))
@@ -1425,7 +1425,7 @@ NonnullRefPtr<SignCalculationNode const> SignCalculationNode::create(NonnullRefP
 SignCalculationNode::SignCalculationNode(NonnullRefPtr<CalculationNode const> value)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ ]» (empty map).
-    : CalculationNode(Type::Sign, CSSNumericType {})
+    : CalculationNode(Type::Sign, NumericType {})
     , m_value(move(value))
 {
 }
@@ -1443,12 +1443,12 @@ CalculatedStyleValue::CalculationResult SignCalculationNode::resolve(Calculation
     auto node_a_value = node_a.value();
 
     if (node_a_value < 0)
-        return { -1, CSSNumericType {} };
+        return { -1, NumericType {} };
 
     if (node_a_value > 0)
-        return { 1, CSSNumericType {} };
+        return { 1, NumericType {} };
 
-    return { 0, CSSNumericType {} };
+    return { 0, NumericType {} };
 }
 
 NonnullRefPtr<CalculationNode const> SignCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -1481,7 +1481,7 @@ Optional<CalculatedStyleValue::CalculationResult> SignCalculationNode::run_opera
         sign = extractor.sign ? -0.0 : 0.0;
     }
 
-    return CalculatedStyleValue::CalculationResult { sign, CSSNumericType {}.made_consistent_with(numeric_child.numeric_type().value_or({})) };
+    return CalculatedStyleValue::CalculationResult { sign, NumericType {}.made_consistent_with(numeric_child.numeric_type().value_or({})) };
 }
 
 void SignCalculationNode::dump(StringBuilder& builder, int indent) const
@@ -1506,7 +1506,7 @@ NonnullRefPtr<SinCalculationNode const> SinCalculationNode::create(NonnullRefPtr
 
 SinCalculationNode::SinCalculationNode(NonnullRefPtr<CalculationNode const> value)
     // «[ ]» (empty map).
-    : CalculationNode(Type::Sin, CSSNumericType {})
+    : CalculationNode(Type::Sin, NumericType {})
     , m_value(move(value))
 {
 }
@@ -1524,7 +1524,7 @@ CalculatedStyleValue::CalculationResult SinCalculationNode::resolve(CalculationR
     auto node_a_value = AK::to_radians(node_a.value());
     auto result = sin(node_a_value);
 
-    return { result, CSSNumericType {} };
+    return { result, NumericType {} };
 }
 
 NonnullRefPtr<CalculationNode const> SinCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -1568,7 +1568,7 @@ static Optional<CalculatedStyleValue::CalculationResult> run_sin_cos_or_tan_oper
         break;
     }
 
-    return CalculatedStyleValue::CalculationResult { result, CSSNumericType {}.made_consistent_with(child.numeric_type().value()) };
+    return CalculatedStyleValue::CalculationResult { result, NumericType {}.made_consistent_with(child.numeric_type().value()) };
 }
 
 // https://drafts.csswg.org/css-values-4/#funcdef-sin
@@ -1600,7 +1600,7 @@ NonnullRefPtr<CosCalculationNode const> CosCalculationNode::create(NonnullRefPtr
 CosCalculationNode::CosCalculationNode(NonnullRefPtr<CalculationNode const> value)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ ]» (empty map).
-    : CalculationNode(Type::Cos, CSSNumericType {})
+    : CalculationNode(Type::Cos, NumericType {})
     , m_value(move(value))
 {
 }
@@ -1618,7 +1618,7 @@ CalculatedStyleValue::CalculationResult CosCalculationNode::resolve(CalculationR
     auto node_a_value = AK::to_radians(node_a.value());
     auto result = cos(node_a_value);
 
-    return { result, CSSNumericType {} };
+    return { result, NumericType {} };
 }
 
 NonnullRefPtr<CalculationNode const> CosCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -1655,7 +1655,7 @@ NonnullRefPtr<TanCalculationNode const> TanCalculationNode::create(NonnullRefPtr
 TanCalculationNode::TanCalculationNode(NonnullRefPtr<CalculationNode const> value)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ ]» (empty map).
-    : CalculationNode(Type::Tan, CSSNumericType {})
+    : CalculationNode(Type::Tan, NumericType {})
     , m_value(move(value))
 {
 }
@@ -1673,7 +1673,7 @@ CalculatedStyleValue::CalculationResult TanCalculationNode::resolve(CalculationR
     auto node_a_value = AK::to_radians(node_a.value());
     auto result = tan(node_a_value);
 
-    return { result, CSSNumericType {} };
+    return { result, NumericType {} };
 }
 
 NonnullRefPtr<CalculationNode const> TanCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -1710,7 +1710,7 @@ NonnullRefPtr<AsinCalculationNode const> AsinCalculationNode::create(NonnullRefP
 AsinCalculationNode::AsinCalculationNode(NonnullRefPtr<CalculationNode const> value)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ "angle" → 1 ]».
-    : CalculationNode(Type::Asin, CSSNumericType { CSSNumericType::BaseType::Angle, 1 })
+    : CalculationNode(Type::Asin, NumericType { NumericType::BaseType::Angle, 1 })
     , m_value(move(value))
 {
 }
@@ -1726,7 +1726,7 @@ CalculatedStyleValue::CalculationResult AsinCalculationNode::resolve(Calculation
 {
     auto node_a = m_value->resolve(context);
     auto result = AK::to_degrees(asin(node_a.value()));
-    return { result, CSSNumericType { CSSNumericType::BaseType::Angle, 1 } };
+    return { result, NumericType { NumericType::BaseType::Angle, 1 } };
 }
 
 NonnullRefPtr<CalculationNode const> AsinCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -1775,7 +1775,7 @@ static Optional<CalculatedStyleValue::CalculationResult> run_asin_acos_or_atan_o
         break;
     }
 
-    return CalculatedStyleValue::CalculationResult { result, CSSNumericType { CSSNumericType::BaseType::Angle, 1 }.made_consistent_with(child.numeric_type().value()) };
+    return CalculatedStyleValue::CalculationResult { result, NumericType { NumericType::BaseType::Angle, 1 }.made_consistent_with(child.numeric_type().value()) };
 }
 
 // https://drafts.csswg.org/css-values-4/#funcdef-asin
@@ -1807,7 +1807,7 @@ NonnullRefPtr<AcosCalculationNode const> AcosCalculationNode::create(NonnullRefP
 AcosCalculationNode::AcosCalculationNode(NonnullRefPtr<CalculationNode const> value)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ "angle" → 1 ]».
-    : CalculationNode(Type::Acos, CSSNumericType { CSSNumericType::BaseType::Angle, 1 })
+    : CalculationNode(Type::Acos, NumericType { NumericType::BaseType::Angle, 1 })
     , m_value(move(value))
 {
 }
@@ -1823,7 +1823,7 @@ CalculatedStyleValue::CalculationResult AcosCalculationNode::resolve(Calculation
 {
     auto node_a = m_value->resolve(context);
     auto result = AK::to_degrees(acos(node_a.value()));
-    return { result, CSSNumericType { CSSNumericType::BaseType::Angle, 1 } };
+    return { result, NumericType { NumericType::BaseType::Angle, 1 } };
 }
 
 NonnullRefPtr<CalculationNode const> AcosCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -1860,7 +1860,7 @@ NonnullRefPtr<AtanCalculationNode const> AtanCalculationNode::create(NonnullRefP
 AtanCalculationNode::AtanCalculationNode(NonnullRefPtr<CalculationNode const> value)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ "angle" → 1 ]».
-    : CalculationNode(Type::Atan, CSSNumericType { CSSNumericType::BaseType::Angle, 1 })
+    : CalculationNode(Type::Atan, NumericType { NumericType::BaseType::Angle, 1 })
     , m_value(move(value))
 {
 }
@@ -1876,7 +1876,7 @@ CalculatedStyleValue::CalculationResult AtanCalculationNode::resolve(Calculation
 {
     auto node_a = m_value->resolve(context);
     auto result = AK::to_degrees(atan(node_a.value()));
-    return { result, CSSNumericType { CSSNumericType::BaseType::Angle, 1 } };
+    return { result, NumericType { NumericType::BaseType::Angle, 1 } };
 }
 
 NonnullRefPtr<CalculationNode const> AtanCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -1913,7 +1913,7 @@ NonnullRefPtr<Atan2CalculationNode const> Atan2CalculationNode::create(NonnullRe
 Atan2CalculationNode::Atan2CalculationNode(NonnullRefPtr<CalculationNode const> y, NonnullRefPtr<CalculationNode const> x)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ "angle" → 1 ]».
-    : CalculationNode(Type::Atan2, CSSNumericType { CSSNumericType::BaseType::Angle, 1 })
+    : CalculationNode(Type::Atan2, NumericType { NumericType::BaseType::Angle, 1 })
     , m_y(move(y))
     , m_x(move(x))
 {
@@ -1931,7 +1931,7 @@ CalculatedStyleValue::CalculationResult Atan2CalculationNode::resolve(Calculatio
     auto node_a = m_y->resolve(context);
     auto node_b = m_x->resolve(context);
     auto result = AK::to_degrees(atan2(node_a.value(), node_b.value()));
-    return { result, CSSNumericType { CSSNumericType::BaseType::Angle, 1 } };
+    return { result, NumericType { NumericType::BaseType::Angle, 1 } };
 }
 
 NonnullRefPtr<CalculationNode const> Atan2CalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -1964,7 +1964,7 @@ Optional<CalculatedStyleValue::CalculationResult> Atan2CalculationNode::run_oper
     while (degrees > 180)
         degrees -= 360;
 
-    return CalculatedStyleValue::CalculationResult { degrees, CSSNumericType { CSSNumericType::BaseType::Angle, 1 }.made_consistent_with(*input_consistent_type) };
+    return CalculatedStyleValue::CalculationResult { degrees, NumericType { NumericType::BaseType::Angle, 1 }.made_consistent_with(*input_consistent_type) };
 }
 
 void Atan2CalculationNode::dump(StringBuilder& builder, int indent) const
@@ -1992,7 +1992,7 @@ NonnullRefPtr<PowCalculationNode const> PowCalculationNode::create(NonnullRefPtr
 PowCalculationNode::PowCalculationNode(NonnullRefPtr<CalculationNode const> x, NonnullRefPtr<CalculationNode const> y)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ ]» (empty map).
-    : CalculationNode(Type::Pow, CSSNumericType {})
+    : CalculationNode(Type::Pow, NumericType {})
     , m_x(move(x))
     , m_y(move(y))
 {
@@ -2005,7 +2005,7 @@ CalculatedStyleValue::CalculationResult PowCalculationNode::resolve(CalculationR
     auto node_a = m_x->resolve(context);
     auto node_b = m_y->resolve(context);
     auto result = pow(node_a.value(), node_b.value());
-    return { result, CSSNumericType {} };
+    return { result, NumericType {} };
 }
 
 NonnullRefPtr<CalculationNode const> PowCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -2056,7 +2056,7 @@ NonnullRefPtr<SqrtCalculationNode const> SqrtCalculationNode::create(NonnullRefP
 SqrtCalculationNode::SqrtCalculationNode(NonnullRefPtr<CalculationNode const> value)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ ]» (empty map).
-    : CalculationNode(Type::Sqrt, CSSNumericType {})
+    : CalculationNode(Type::Sqrt, NumericType {})
     , m_value(move(value))
 {
 }
@@ -2067,7 +2067,7 @@ CalculatedStyleValue::CalculationResult SqrtCalculationNode::resolve(Calculation
 {
     auto node_a = m_value->resolve(context);
     auto result = sqrt(node_a.value());
-    return { result, CSSNumericType {} };
+    return { result, NumericType {} };
 }
 
 NonnullRefPtr<CalculationNode const> SqrtCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -2086,7 +2086,7 @@ Optional<CalculatedStyleValue::CalculationResult> SqrtCalculationNode::run_opera
     if (!number.has_value())
         return {};
 
-    auto consistent_type = CSSNumericType {}.made_consistent_with(m_value->numeric_type().value());
+    auto consistent_type = NumericType {}.made_consistent_with(m_value->numeric_type().value());
     if (!consistent_type.has_value())
         return {};
 
@@ -2116,7 +2116,7 @@ NonnullRefPtr<HypotCalculationNode const> HypotCalculationNode::create(Vector<No
     return adopt_ref(*new (nothrow) HypotCalculationNode(move(values), move(numeric_type)));
 }
 
-HypotCalculationNode::HypotCalculationNode(Vector<NonnullRefPtr<CalculationNode const>> values, Optional<CSSNumericType> numeric_type)
+HypotCalculationNode::HypotCalculationNode(Vector<NonnullRefPtr<CalculationNode const>> values, Optional<NumericType> numeric_type)
     : CalculationNode(Type::Hypot, move(numeric_type))
     , m_values(move(values))
 {
@@ -2137,7 +2137,7 @@ bool HypotCalculationNode::contains_percentage() const
 CalculatedStyleValue::CalculationResult HypotCalculationNode::resolve(CalculationResolutionContext const& context) const
 {
     double square_sum = 0.0;
-    Optional<CSSNumericType> result_type;
+    Optional<NumericType> result_type;
 
     for (auto const& value : m_values) {
         auto child_resolved = value->resolve(context);
@@ -2169,7 +2169,7 @@ Optional<CalculatedStyleValue::CalculationResult> HypotCalculationNode::run_oper
     // <percentage>, but must have a consistent type or else the function is invalid; the result’s type will be the
     // consistent type.
 
-    Optional<CSSNumericType> consistent_type;
+    Optional<NumericType> consistent_type;
     double value = 0;
 
     for (auto const& child : m_values) {
@@ -2222,7 +2222,7 @@ NonnullRefPtr<LogCalculationNode const> LogCalculationNode::create(NonnullRefPtr
 LogCalculationNode::LogCalculationNode(NonnullRefPtr<CalculationNode const> x, NonnullRefPtr<CalculationNode const> y)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ ]» (empty map).
-    : CalculationNode(Type::Log, CSSNumericType {})
+    : CalculationNode(Type::Log, NumericType {})
     , m_x(move(x))
     , m_y(move(y))
 {
@@ -2235,7 +2235,7 @@ CalculatedStyleValue::CalculationResult LogCalculationNode::resolve(CalculationR
     auto node_a = m_x->resolve(context);
     auto node_b = m_y->resolve(context);
     auto result = log2(node_a.value()) / log2(node_b.value());
-    return { result, CSSNumericType {} };
+    return { result, NumericType {} };
 }
 
 NonnullRefPtr<CalculationNode const> LogCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -2255,7 +2255,7 @@ Optional<CalculatedStyleValue::CalculationResult> LogCalculationNode::run_operat
     if (!number.has_value() || !base.has_value())
         return {};
 
-    auto consistent_type = CSSNumericType {}.made_consistent_with(m_x->numeric_type().value());
+    auto consistent_type = NumericType {}.made_consistent_with(m_x->numeric_type().value());
     if (!consistent_type.has_value())
         return {};
 
@@ -2287,7 +2287,7 @@ NonnullRefPtr<ExpCalculationNode const> ExpCalculationNode::create(NonnullRefPtr
 ExpCalculationNode::ExpCalculationNode(NonnullRefPtr<CalculationNode const> value)
     // https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation
     // «[ ]» (empty map).
-    : CalculationNode(Type::Exp, CSSNumericType {})
+    : CalculationNode(Type::Exp, NumericType {})
     , m_value(move(value))
 {
 }
@@ -2298,7 +2298,7 @@ CalculatedStyleValue::CalculationResult ExpCalculationNode::resolve(CalculationR
 {
     auto node_a = m_value->resolve(context);
     auto result = exp(node_a.value());
-    return { result, CSSNumericType {} };
+    return { result, NumericType {} };
 }
 
 NonnullRefPtr<CalculationNode const> ExpCalculationNode::with_simplified_children(CalculationContext const& context, CalculationResolutionContext const& resolution_context) const
@@ -2316,7 +2316,7 @@ Optional<CalculatedStyleValue::CalculationResult> ExpCalculationNode::run_operat
     if (!number.has_value())
         return {};
 
-    auto consistent_type = CSSNumericType {}.made_consistent_with(m_value->numeric_type().value());
+    auto consistent_type = NumericType {}.made_consistent_with(m_value->numeric_type().value());
     if (!consistent_type.has_value())
         return {};
 
@@ -2346,7 +2346,7 @@ NonnullRefPtr<RoundCalculationNode const> RoundCalculationNode::create(RoundingS
     return adopt_ref(*new (nothrow) RoundCalculationNode(strategy, move(x), move(y), move(numeric_type)));
 }
 
-RoundCalculationNode::RoundCalculationNode(RoundingStrategy mode, NonnullRefPtr<CalculationNode const> x, NonnullRefPtr<CalculationNode const> y, Optional<CSSNumericType> numeric_type)
+RoundCalculationNode::RoundCalculationNode(RoundingStrategy mode, NonnullRefPtr<CalculationNode const> x, NonnullRefPtr<CalculationNode const> y, Optional<NumericType> numeric_type)
     : CalculationNode(Type::Round, move(numeric_type))
     , m_strategy(mode)
     , m_x(move(x))
@@ -2556,7 +2556,7 @@ NonnullRefPtr<ModCalculationNode const> ModCalculationNode::create(NonnullRefPtr
     return adopt_ref(*new (nothrow) ModCalculationNode(move(x), move(y), move(numeric_type)));
 }
 
-ModCalculationNode::ModCalculationNode(NonnullRefPtr<CalculationNode const> x, NonnullRefPtr<CalculationNode const> y, Optional<CSSNumericType> numeric_type)
+ModCalculationNode::ModCalculationNode(NonnullRefPtr<CalculationNode const> x, NonnullRefPtr<CalculationNode const> y, Optional<NumericType> numeric_type)
     : CalculationNode(Type::Mod, move(numeric_type))
     , m_x(move(x))
     , m_y(move(y))
@@ -2659,7 +2659,7 @@ NonnullRefPtr<RemCalculationNode const> RemCalculationNode::create(NonnullRefPtr
     return adopt_ref(*new (nothrow) RemCalculationNode(move(x), move(y), move(numeric_type)));
 }
 
-RemCalculationNode::RemCalculationNode(NonnullRefPtr<CalculationNode const> x, NonnullRefPtr<CalculationNode const> y, Optional<CSSNumericType> numeric_type)
+RemCalculationNode::RemCalculationNode(NonnullRefPtr<CalculationNode const> x, NonnullRefPtr<CalculationNode const> y, Optional<NumericType> numeric_type)
     : CalculationNode(Type::Rem, move(numeric_type))
     , m_x(move(x))
     , m_y(move(y))
@@ -2709,7 +2709,7 @@ bool RemCalculationNode::equals(CalculationNode const& other) const
         && m_y->equals(*static_cast<RemCalculationNode const&>(other).m_y);
 }
 
-CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalculationResult::from_value(Value const& value, CalculationResolutionContext const& context, Optional<CSSNumericType> numeric_type)
+CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalculationResult::from_value(Value const& value, CalculationResolutionContext const& context, Optional<NumericType> numeric_type)
 {
     auto number = value.visit(
         [](Number const& number) { return number.value(); },
@@ -3478,7 +3478,7 @@ NonnullRefPtr<CalculationNode const> simplify_a_calculation_tree(CalculationNode
             //         percent. `make_calculation_node` will still calculate the correct numeric type for the
             //         simplified node. See spec issue: https://github.com/w3c/csswg-drafts/issues/11588
             if (numeric_child.value().has<Percentage>())
-                child_type = CSSNumericType { CSSNumericType::BaseType::Percent, 1 };
+                child_type = NumericType { NumericType::BaseType::Percent, 1 };
 
             auto child_value = CalculatedStyleValue::CalculationResult::from_value(numeric_child.value(), resolution_context, child_type);
 
diff --git a/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h b/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
index 3ea3dbc6262..d227a51e3b3 100644
--- a/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
+++ b/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
@@ -11,12 +11,12 @@
 
 #include <AK/Function.h>
 #include <LibWeb/CSS/Angle.h>
-#include <LibWeb/CSS/CSSNumericType.h>
 #include <LibWeb/CSS/Enums.h>
 #include <LibWeb/CSS/Flex.h>
 #include <LibWeb/CSS/Frequency.h>
 #include <LibWeb/CSS/Length.h>
 #include <LibWeb/CSS/Number.h>
+#include <LibWeb/CSS/NumericType.h>
 #include <LibWeb/CSS/Percentage.h>
 #include <LibWeb/CSS/Resolution.h>
 #include <LibWeb/CSS/StyleValues/StyleValue.h>
@@ -39,9 +39,9 @@ public:
     class CalculationResult {
     public:
         using Value = Variant<Number, Angle, Flex, Frequency, Length, Percentage, Resolution, Time>;
-        static CalculationResult from_value(Value const&, CalculationResolutionContext const&, Optional<CSSNumericType>);
+        static CalculationResult from_value(Value const&, CalculationResolutionContext const&, Optional<NumericType>);
 
-        CalculationResult(double value, Optional<CSSNumericType> type)
+        CalculationResult(double value, Optional<NumericType> type)
             : m_value(value)
             , m_type(move(type))
         {
@@ -55,16 +55,16 @@ public:
         void invert();
 
         double value() const { return m_value; }
-        Optional<CSSNumericType> const& type() const { return m_type; }
+        Optional<NumericType> const& type() const { return m_type; }
 
         [[nodiscard]] bool operator==(CalculationResult const&) const = default;
 
     private:
         double m_value;
-        Optional<CSSNumericType> m_type;
+        Optional<NumericType> m_type;
     };
 
-    static ValueComparingNonnullRefPtr<CalculatedStyleValue const> create(NonnullRefPtr<CalculationNode const> calculation, CSSNumericType resolved_type, CalculationContext context)
+    static ValueComparingNonnullRefPtr<CalculatedStyleValue const> create(NonnullRefPtr<CalculationNode const> calculation, NumericType resolved_type, CalculationContext context)
     {
         return adopt_ref(*new (nothrow) CalculatedStyleValue(move(calculation), move(resolved_type), move(context)));
     }
@@ -118,7 +118,7 @@ public:
     String dump() const;
 
 private:
-    explicit CalculatedStyleValue(NonnullRefPtr<CalculationNode const> calculation, CSSNumericType resolved_type, CalculationContext context)
+    explicit CalculatedStyleValue(NonnullRefPtr<CalculationNode const> calculation, NumericType resolved_type, CalculationContext context)
         : StyleValue(Type::Calculated)
         , m_resolved_type(move(resolved_type))
         , m_calculation(move(calculation))
@@ -128,13 +128,13 @@ private:
 
     struct ResolvedValue {
         double value;
-        Optional<CSSNumericType> type;
+        Optional<NumericType> type;
     };
     Optional<ResolvedValue> resolve_value(CalculationResolutionContext const&) const;
 
     Optional<ValueType> percentage_resolved_type() const;
 
-    CSSNumericType m_resolved_type;
+    NumericType m_resolved_type;
     NonnullRefPtr<CalculationNode const> m_calculation;
     CalculationContext m_context;
 };
@@ -240,7 +240,7 @@ public:
     StringView name() const;
     virtual Vector<NonnullRefPtr<CalculationNode const>> children() const = 0;
 
-    Optional<CSSNumericType> const& numeric_type() const { return m_numeric_type; }
+    Optional<NumericType> const& numeric_type() const { return m_numeric_type; }
     virtual bool contains_percentage() const = 0;
     virtual CalculatedStyleValue::CalculationResult resolve(CalculationResolutionContext const&) const = 0;
     virtual NonnullRefPtr<CalculationNode const> with_simplified_children(CalculationContext const&, CalculationResolutionContext const&) const = 0;
@@ -251,11 +251,11 @@ public:
     virtual bool equals(CalculationNode const&) const = 0;
 
 protected:
-    CalculationNode(Type, Optional<CSSNumericType>);
+    CalculationNode(Type, Optional<NumericType>);
 
 private:
     Type m_type;
-    Optional<CSSNumericType> m_numeric_type;
+    Optional<NumericType> m_numeric_type;
 };
 
 enum class NonFiniteValue {
@@ -289,7 +289,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    NumericCalculationNode(NumericValue, CSSNumericType);
+    NumericCalculationNode(NumericValue, NumericType);
     NumericValue m_value;
 };
 
@@ -308,7 +308,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    SumCalculationNode(Vector<NonnullRefPtr<CalculationNode const>>, Optional<CSSNumericType>);
+    SumCalculationNode(Vector<NonnullRefPtr<CalculationNode const>>, Optional<NumericType>);
     Vector<NonnullRefPtr<CalculationNode const>> m_values;
 };
 
@@ -327,7 +327,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    ProductCalculationNode(Vector<NonnullRefPtr<CalculationNode const>>, Optional<CSSNumericType>);
+    ProductCalculationNode(Vector<NonnullRefPtr<CalculationNode const>>, Optional<NumericType>);
     Vector<NonnullRefPtr<CalculationNode const>> m_values;
 };
 
@@ -367,7 +367,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    InvertCalculationNode(NonnullRefPtr<CalculationNode const>, Optional<CSSNumericType>);
+    InvertCalculationNode(NonnullRefPtr<CalculationNode const>, Optional<NumericType>);
     NonnullRefPtr<CalculationNode const> m_value;
 };
 
@@ -387,7 +387,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    MinCalculationNode(Vector<NonnullRefPtr<CalculationNode const>>, Optional<CSSNumericType>);
+    MinCalculationNode(Vector<NonnullRefPtr<CalculationNode const>>, Optional<NumericType>);
     Vector<NonnullRefPtr<CalculationNode const>> m_values;
 };
 
@@ -407,7 +407,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    MaxCalculationNode(Vector<NonnullRefPtr<CalculationNode const>>, Optional<CSSNumericType>);
+    MaxCalculationNode(Vector<NonnullRefPtr<CalculationNode const>>, Optional<NumericType>);
     Vector<NonnullRefPtr<CalculationNode const>> m_values;
 };
 
@@ -427,7 +427,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    ClampCalculationNode(NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, Optional<CSSNumericType>);
+    ClampCalculationNode(NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, Optional<NumericType>);
     NonnullRefPtr<CalculationNode const> m_min_value;
     NonnullRefPtr<CalculationNode const> m_center_value;
     NonnullRefPtr<CalculationNode const> m_max_value;
@@ -671,7 +671,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    HypotCalculationNode(Vector<NonnullRefPtr<CalculationNode const>>, Optional<CSSNumericType>);
+    HypotCalculationNode(Vector<NonnullRefPtr<CalculationNode const>>, Optional<NumericType>);
     Vector<NonnullRefPtr<CalculationNode const>> m_values;
 };
 
@@ -734,7 +734,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    RoundCalculationNode(RoundingStrategy, NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, Optional<CSSNumericType>);
+    RoundCalculationNode(RoundingStrategy, NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, Optional<NumericType>);
     RoundingStrategy m_strategy;
     NonnullRefPtr<CalculationNode const> m_x;
     NonnullRefPtr<CalculationNode const> m_y;
@@ -756,7 +756,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    ModCalculationNode(NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, Optional<CSSNumericType>);
+    ModCalculationNode(NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, Optional<NumericType>);
     NonnullRefPtr<CalculationNode const> m_x;
     NonnullRefPtr<CalculationNode const> m_y;
 };
@@ -777,7 +777,7 @@ public:
     virtual bool equals(CalculationNode const&) const override;
 
 private:
-    RemCalculationNode(NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, Optional<CSSNumericType>);
+    RemCalculationNode(NonnullRefPtr<CalculationNode const>, NonnullRefPtr<CalculationNode const>, Optional<NumericType>);
     NonnullRefPtr<CalculationNode const> m_x;
     NonnullRefPtr<CalculationNode const> m_y;
 };
diff --git a/Libraries/LibWeb/CSS/StyleValues/EdgeStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/EdgeStyleValue.cpp
index b713570afbc..a3e3c766718 100644
--- a/Libraries/LibWeb/CSS/StyleValues/EdgeStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/EdgeStyleValue.cpp
@@ -46,7 +46,7 @@ ValueComparingNonnullRefPtr<EdgeStyleValue const> EdgeStyleValue::resolved_value
             // FIXME: Flip calculated offsets (convert CalculatedStyleValue to CalculationNode, then negate and append)
             return *this;
         }
-        auto flipped_absolute = CalculatedStyleValue::create(SumCalculationNode::create(move(sum_parts)), CSSNumericType(CSSNumericType::BaseType::Length, 1), context);
+        auto flipped_absolute = CalculatedStyleValue::create(SumCalculationNode::create(move(sum_parts)), NumericType(NumericType::BaseType::Length, 1), context);
         return create({}, flipped_absolute);
     }
 
diff --git a/Libraries/LibWeb/Forward.h b/Libraries/LibWeb/Forward.h
index 01ac1d6543e..7941081be3d 100644
--- a/Libraries/LibWeb/Forward.h
+++ b/Libraries/LibWeb/Forward.h
@@ -312,6 +312,7 @@ class MediaQueryListEvent;
 class Number;
 class NumberOrCalculated;
 class NumberStyleValue;
+class NumericType;
 class OKLabColorStyleValue;
 class OKLCHColorStyleValue;
 class OpenTypeTaggedStyleValue;
diff --git a/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSMathFunctions.cpp b/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSMathFunctions.cpp
index d34134d8fde..721cd29ac47 100644
--- a/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSMathFunctions.cpp
+++ b/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSMathFunctions.cpp
@@ -137,7 +137,7 @@ RefPtr<CalculationNode const> Parser::parse_math_function(Function const& functi
         if (function_data.get_bool("is-variadic"sv).value_or(false)) {
             // Variadic function
             function_generator.append(R"~~~(
-        Optional<CSSNumericType> determined_argument_type;
+        Optional<NumericType> determined_argument_type;
         Vector<NonnullRefPtr<CalculationNode const>> parsed_arguments;
         parsed_arguments.ensure_capacity(arguments.size());
 
@@ -240,7 +240,7 @@ RefPtr<CalculationNode const> Parser::parse_math_function(Function const& functi
             return nullptr;
         }
         size_t argument_index = 0;
-        Optional<CSSNumericType> determined_argument_type;
+        Optional<NumericType> determined_argument_type;
 )~~~");
 
             size_t parameter_index = 0;