diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
index 07b31496ef..66c3107e8e 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -3570,6 +3570,18 @@ ErrorOr<OwnPtr<CalculationNode>> Parser::parse_clamp_function(Function const& fu
     return TRY(ClampCalculationNode::create(move(calculated_parameters[0]), move(calculated_parameters[1]), move(calculated_parameters[2])));
 }
 
+ErrorOr<OwnPtr<CalculationNode>> Parser::parse_abs_function(Function const& function)
+{
+    auto calculation_node = TRY(parse_a_calculation(function.values()));
+
+    if (!calculation_node) {
+        dbgln_if(CSS_PARSER_DEBUG, "abs() parameter must be a valid calculation"sv);
+        return nullptr;
+    }
+
+    return TRY(AbsCalculationNode::create(calculation_node.release_nonnull()));
+}
+
 ErrorOr<RefPtr<StyleValue>> Parser::parse_dynamic_value(ComponentValue const& component_value)
 {
     if (component_value.is_function()) {
@@ -3608,6 +3620,9 @@ ErrorOr<OwnPtr<CalculationNode>> Parser::parse_a_calc_function_node(Function con
     if (function.name().equals_ignoring_ascii_case("clamp"sv))
         return TRY(parse_clamp_function(function));
 
+    if (function.name().equals_ignoring_ascii_case("abs"sv))
+        return TRY(parse_abs_function(function));
+
     dbgln_if(CSS_PARSER_DEBUG, "We didn't implement `{}` function yet", function.name());
     return nullptr;
 }
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.h b/Userland/Libraries/LibWeb/CSS/Parser/Parser.h
index c696de0be1..cfb52c68bc 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.h
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.h
@@ -293,6 +293,7 @@ private:
     ErrorOr<OwnPtr<CalculationNode>> parse_min_function(Function const&);
     ErrorOr<OwnPtr<CalculationNode>> parse_max_function(Function const&);
     ErrorOr<OwnPtr<CalculationNode>> parse_clamp_function(Function const&);
+    ErrorOr<OwnPtr<CalculationNode>> parse_abs_function(Function const&);
     ErrorOr<RefPtr<StyleValue>> parse_dimension_value(ComponentValue const&);
     ErrorOr<RefPtr<StyleValue>> parse_integer_value(TokenStream<ComponentValue>&);
     ErrorOr<RefPtr<StyleValue>> parse_number_value(TokenStream<ComponentValue>&);
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp b/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
index 09d524c4bb..0c2afb775c 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
@@ -35,6 +35,28 @@ static double resolve_value(CalculatedStyleValue::CalculationResult::Value value
         [](Time const& time) { return time.to_seconds(); });
 };
 
+static CalculatedStyleValue::CalculationResult to_resolved_type(CalculatedStyleValue::ResolvedType type, double value)
+{
+    switch (type) {
+    case CalculatedStyleValue::ResolvedType::Integer:
+        return { Number(Number::Type::Integer, value) };
+    case CalculatedStyleValue::ResolvedType::Number:
+        return { Number(Number::Type::Number, value) };
+    case CalculatedStyleValue::ResolvedType::Angle:
+        return { Angle::make_degrees(value) };
+    case CalculatedStyleValue::ResolvedType::Frequency:
+        return { Frequency::make_hertz(value) };
+    case CalculatedStyleValue::ResolvedType::Length:
+        return { Length::make_px(value) };
+    case CalculatedStyleValue::ResolvedType::Percentage:
+        return { Percentage(value) };
+    case CalculatedStyleValue::ResolvedType::Time:
+        return { Time::make_seconds(value) };
+    }
+
+    VERIFY_NOT_REACHED();
+};
+
 CalculationNode::CalculationNode(Type type)
     : m_type(type)
 {
@@ -639,6 +661,63 @@ ErrorOr<void> ClampCalculationNode::dump(StringBuilder& builder, int indent) con
     return {};
 }
 
+ErrorOr<NonnullOwnPtr<AbsCalculationNode>> AbsCalculationNode::create(NonnullOwnPtr<CalculationNode> value)
+{
+    return adopt_nonnull_own_or_enomem(new (nothrow) AbsCalculationNode(move(value)));
+}
+
+AbsCalculationNode::AbsCalculationNode(NonnullOwnPtr<CalculationNode> value)
+    : CalculationNode(Type::Abs)
+    , m_value(move(value))
+{
+}
+
+AbsCalculationNode::~AbsCalculationNode() = default;
+
+ErrorOr<String> AbsCalculationNode::to_string() const
+{
+    StringBuilder builder;
+    builder.append("abs("sv);
+    builder.append(TRY(m_value->to_string()));
+    builder.append(")"sv);
+    return builder.to_string();
+}
+
+Optional<CalculatedStyleValue::ResolvedType> AbsCalculationNode::resolved_type() const
+{
+    return m_value->resolved_type();
+}
+
+bool AbsCalculationNode::contains_percentage() const
+{
+    return m_value->contains_percentage();
+}
+
+CalculatedStyleValue::CalculationResult AbsCalculationNode::resolve(Optional<Length::ResolutionContext const&> context, CalculatedStyleValue::PercentageBasis const& percentage_basis) const
+{
+    auto resolved_type = m_value->resolved_type().value();
+    auto node_a = m_value->resolve(context, percentage_basis);
+    auto node_a_value = resolve_value(node_a.value(), context);
+
+    if (node_a_value < 0)
+        return to_resolved_type(resolved_type, -node_a_value);
+
+    return node_a;
+}
+
+ErrorOr<void> AbsCalculationNode::for_each_child_node(Function<ErrorOr<void>(NonnullOwnPtr<CalculationNode>&)> const& callback)
+{
+    TRY(m_value->for_each_child_node(callback));
+    TRY(callback(m_value));
+    return {};
+}
+
+ErrorOr<void> AbsCalculationNode::dump(StringBuilder& builder, int indent) const
+{
+    TRY(builder.try_appendff("{: >{}}ABS: {}\n", "", indent, TRY(to_string())));
+    return {};
+}
+
 void CalculatedStyleValue::CalculationResult::add(CalculationResult const& other, Optional<Length::ResolutionContext const&> context, PercentageBasis const& percentage_basis)
 {
     add_or_subtract_internal(SumOperation::Add, other, context, percentage_basis);
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
index d053f196de..4111b320e2 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
@@ -133,6 +133,11 @@ public:
         Negate,
         Invert,
 
+        // Sign-Related Functions, a sub-type of operator node
+        // https://drafts.csswg.org/css-values-4/#sign-funcs
+        Abs,
+        Sign,
+
         // This only exists during parsing.
         Unparsed,
     };
@@ -313,4 +318,22 @@ private:
     NonnullOwnPtr<CalculationNode> m_max_value;
 };
 
+class AbsCalculationNode final : public CalculationNode {
+public:
+    static ErrorOr<NonnullOwnPtr<AbsCalculationNode>> create(NonnullOwnPtr<CalculationNode>);
+    ~AbsCalculationNode();
+
+    virtual ErrorOr<String> to_string() const override;
+    virtual Optional<CalculatedStyleValue::ResolvedType> resolved_type() const override;
+    virtual bool contains_percentage() const override;
+    virtual CalculatedStyleValue::CalculationResult resolve(Optional<Length::ResolutionContext const&>, CalculatedStyleValue::PercentageBasis const&) const override;
+    virtual ErrorOr<void> for_each_child_node(Function<ErrorOr<void>(NonnullOwnPtr<CalculationNode>&)> const&) override;
+
+    virtual ErrorOr<void> dump(StringBuilder&, int indent) const override;
+
+private:
+    AbsCalculationNode(NonnullOwnPtr<CalculationNode>);
+    NonnullOwnPtr<CalculationNode> m_value;
+};
+
 }