/* * Copyright (c) 2018-2020, Andreas Kling * Copyright (c) 2021-2023, Sam Atkins * Copyright (c) 2021, Tobias Christiansen * Copyright (c) 2022-2023, MacDue * * SPDX-License-Identifier: BSD-2-Clause */ #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include #include namespace Web::CSS { StyleValue::StyleValue(Type type) : m_type(type) { } AbstractImageStyleValue const& StyleValue::as_abstract_image() const { VERIFY(is_abstract_image()); return static_cast(*this); } AngleStyleValue const& StyleValue::as_angle() const { VERIFY(is_angle()); return static_cast(*this); } BackgroundStyleValue const& StyleValue::as_background() const { VERIFY(is_background()); return static_cast(*this); } BackgroundRepeatStyleValue const& StyleValue::as_background_repeat() const { VERIFY(is_background_repeat()); return static_cast(*this); } BackgroundSizeStyleValue const& StyleValue::as_background_size() const { VERIFY(is_background_size()); return static_cast(*this); } BorderStyleValue const& StyleValue::as_border() const { VERIFY(is_border()); return static_cast(*this); } BorderRadiusStyleValue const& StyleValue::as_border_radius() const { VERIFY(is_border_radius()); return static_cast(*this); } BorderRadiusShorthandStyleValue const& StyleValue::as_border_radius_shorthand() const { VERIFY(is_border_radius_shorthand()); return static_cast(*this); } ShadowStyleValue const& StyleValue::as_shadow() const { VERIFY(is_shadow()); return static_cast(*this); } CalculatedStyleValue const& StyleValue::as_calculated() const { VERIFY(is_calculated()); return static_cast(*this); } ColorStyleValue const& StyleValue::as_color() const { VERIFY(is_color()); return static_cast(*this); } ConicGradientStyleValue const& StyleValue::as_conic_gradient() const { VERIFY(is_conic_gradient()); return static_cast(*this); } ContentStyleValue const& StyleValue::as_content() const { VERIFY(is_content()); return static_cast(*this); } FilterValueListStyleValue const& StyleValue::as_filter_value_list() const { VERIFY(is_filter_value_list()); return static_cast(*this); } FlexStyleValue const& StyleValue::as_flex() const { VERIFY(is_flex()); return static_cast(*this); } FlexFlowStyleValue const& StyleValue::as_flex_flow() const { VERIFY(is_flex_flow()); return static_cast(*this); } FontStyleValue const& StyleValue::as_font() const { VERIFY(is_font()); return static_cast(*this); } FrequencyStyleValue const& StyleValue::as_frequency() const { VERIFY(is_frequency()); return static_cast(*this); } GridTrackPlacementShorthandStyleValue const& StyleValue::as_grid_track_placement_shorthand() const { VERIFY(is_grid_track_placement_shorthand()); return static_cast(*this); } GridAreaShorthandStyleValue const& StyleValue::as_grid_area_shorthand() const { VERIFY(is_grid_area_shorthand()); return static_cast(*this); } GridTemplateAreaStyleValue const& StyleValue::as_grid_template_area() const { VERIFY(is_grid_template_area()); return static_cast(*this); } GridTrackPlacementStyleValue const& StyleValue::as_grid_track_placement() const { VERIFY(is_grid_track_placement()); return static_cast(*this); } IdentifierStyleValue const& StyleValue::as_identifier() const { VERIFY(is_identifier()); return static_cast(*this); } ImageStyleValue const& StyleValue::as_image() const { VERIFY(is_image()); return static_cast(*this); } InheritStyleValue const& StyleValue::as_inherit() const { VERIFY(is_inherit()); return static_cast(*this); } InitialStyleValue const& StyleValue::as_initial() const { VERIFY(is_initial()); return static_cast(*this); } LengthStyleValue const& StyleValue::as_length() const { VERIFY(is_length()); return static_cast(*this); } GridTrackSizeStyleValue const& StyleValue::as_grid_track_size_list() const { VERIFY(is_grid_track_size_list()); return static_cast(*this); } LinearGradientStyleValue const& StyleValue::as_linear_gradient() const { VERIFY(is_linear_gradient()); return static_cast(*this); } ListStyleStyleValue const& StyleValue::as_list_style() const { VERIFY(is_list_style()); return static_cast(*this); } NumericStyleValue const& StyleValue::as_numeric() const { VERIFY(is_numeric()); return static_cast(*this); } OverflowStyleValue const& StyleValue::as_overflow() const { VERIFY(is_overflow()); return static_cast(*this); } PercentageStyleValue const& StyleValue::as_percentage() const { VERIFY(is_percentage()); return static_cast(*this); } PositionStyleValue const& StyleValue::as_position() const { VERIFY(is_position()); return static_cast(*this); } RadialGradientStyleValue const& StyleValue::as_radial_gradient() const { VERIFY(is_radial_gradient()); return static_cast(*this); } RectStyleValue const& StyleValue::as_rect() const { VERIFY(is_rect()); return static_cast(*this); } ResolutionStyleValue const& StyleValue::as_resolution() const { VERIFY(is_resolution()); return static_cast(*this); } StringStyleValue const& StyleValue::as_string() const { VERIFY(is_string()); return static_cast(*this); } TextDecorationStyleValue const& StyleValue::as_text_decoration() const { VERIFY(is_text_decoration()); return static_cast(*this); } TimeStyleValue const& StyleValue::as_time() const { VERIFY(is_time()); return static_cast(*this); } TransformationStyleValue const& StyleValue::as_transformation() const { VERIFY(is_transformation()); return static_cast(*this); } UnresolvedStyleValue const& StyleValue::as_unresolved() const { VERIFY(is_unresolved()); return static_cast(*this); } UnsetStyleValue const& StyleValue::as_unset() const { VERIFY(is_unset()); return static_cast(*this); } StyleValueList const& StyleValue::as_value_list() const { VERIFY(is_value_list()); return static_cast(*this); } void CalculatedStyleValue::CalculationResult::add(CalculationResult const& other, Layout::Node const* layout_node, PercentageBasis const& percentage_basis) { add_or_subtract_internal(SumOperation::Add, other, layout_node, percentage_basis); } void CalculatedStyleValue::CalculationResult::subtract(CalculationResult const& other, Layout::Node const* layout_node, PercentageBasis const& percentage_basis) { add_or_subtract_internal(SumOperation::Subtract, other, layout_node, percentage_basis); } void CalculatedStyleValue::CalculationResult::add_or_subtract_internal(SumOperation op, CalculationResult const& other, Layout::Node const* layout_node, PercentageBasis const& percentage_basis) { // We know from validation when resolving the type, that "both sides have the same type, or that one side is a and the other is an ". // Though, having the same type may mean that one side is a and the other a . // Note: This is almost identical to ::add() m_value.visit( [&](Number const& number) { auto other_number = other.m_value.get(); if (op == SumOperation::Add) { m_value = number + other_number; } else { m_value = number - other_number; } }, [&](Angle const& angle) { auto this_degrees = angle.to_degrees(); if (other.m_value.has()) { auto other_degrees = other.m_value.get().to_degrees(); if (op == SumOperation::Add) m_value = Angle::make_degrees(this_degrees + other_degrees); else m_value = Angle::make_degrees(this_degrees - other_degrees); } else { VERIFY(percentage_basis.has()); auto other_degrees = percentage_basis.get().percentage_of(other.m_value.get()).to_degrees(); if (op == SumOperation::Add) m_value = Angle::make_degrees(this_degrees + other_degrees); else m_value = Angle::make_degrees(this_degrees - other_degrees); } }, [&](Frequency const& frequency) { auto this_hertz = frequency.to_hertz(); if (other.m_value.has()) { auto other_hertz = other.m_value.get().to_hertz(); if (op == SumOperation::Add) m_value = Frequency::make_hertz(this_hertz + other_hertz); else m_value = Frequency::make_hertz(this_hertz - other_hertz); } else { VERIFY(percentage_basis.has()); auto other_hertz = percentage_basis.get().percentage_of(other.m_value.get()).to_hertz(); if (op == SumOperation::Add) m_value = Frequency::make_hertz(this_hertz + other_hertz); else m_value = Frequency::make_hertz(this_hertz - other_hertz); } }, [&](Length const& length) { auto this_px = length.to_px(*layout_node); if (other.m_value.has()) { auto other_px = other.m_value.get().to_px(*layout_node); if (op == SumOperation::Add) m_value = Length::make_px(this_px + other_px); else m_value = Length::make_px(this_px - other_px); } else { VERIFY(percentage_basis.has()); auto other_px = percentage_basis.get().percentage_of(other.m_value.get()).to_px(*layout_node); if (op == SumOperation::Add) m_value = Length::make_px(this_px + other_px); else m_value = Length::make_px(this_px - other_px); } }, [&](Time const& time) { auto this_seconds = time.to_seconds(); if (other.m_value.has()) { auto other_seconds = other.m_value.get().to_seconds(); if (op == SumOperation::Add) m_value = Time::make_seconds(this_seconds + other_seconds); else m_value = Time::make_seconds(this_seconds - other_seconds); } else { VERIFY(percentage_basis.has()); auto other_seconds = percentage_basis.get().percentage_of(other.m_value.get()).to_seconds(); if (op == SumOperation::Add) m_value = Time::make_seconds(this_seconds + other_seconds); else m_value = Time::make_seconds(this_seconds - other_seconds); } }, [&](Percentage const& percentage) { if (other.m_value.has()) { if (op == SumOperation::Add) m_value = Percentage { percentage.value() + other.m_value.get().value() }; else m_value = Percentage { percentage.value() - other.m_value.get().value() }; return; } // Other side isn't a percentage, so the easiest way to handle it without duplicating all the logic, is just to swap `this` and `other`. CalculationResult new_value = other; if (op == SumOperation::Add) { new_value.add(*this, layout_node, percentage_basis); } else { // Turn 'this - other' into '-other + this', as 'A + B == B + A', but 'A - B != B - A' new_value.multiply_by({ Number { Number::Type::Integer, -1.0f } }, layout_node); new_value.add(*this, layout_node, percentage_basis); } *this = new_value; }); } void CalculatedStyleValue::CalculationResult::multiply_by(CalculationResult const& other, Layout::Node const* layout_node) { // We know from validation when resolving the type, that at least one side must be a or . // Both of these are represented as a float. VERIFY(m_value.has() || other.m_value.has()); bool other_is_number = other.m_value.has(); m_value.visit( [&](Number const& number) { if (other_is_number) { m_value = number * other.m_value.get(); } else { // Avoid duplicating all the logic by swapping `this` and `other`. CalculationResult new_value = other; new_value.multiply_by(*this, layout_node); *this = new_value; } }, [&](Angle const& angle) { m_value = Angle::make_degrees(angle.to_degrees() * other.m_value.get().value()); }, [&](Frequency const& frequency) { m_value = Frequency::make_hertz(frequency.to_hertz() * other.m_value.get().value()); }, [&](Length const& length) { VERIFY(layout_node); m_value = Length::make_px(length.to_px(*layout_node) * other.m_value.get().value()); }, [&](Time const& time) { m_value = Time::make_seconds(time.to_seconds() * other.m_value.get().value()); }, [&](Percentage const& percentage) { m_value = Percentage { percentage.value() * other.m_value.get().value() }; }); } void CalculatedStyleValue::CalculationResult::divide_by(CalculationResult const& other, Layout::Node const* layout_node) { // We know from validation when resolving the type, that `other` must be a or . // Both of these are represented as a Number. auto denominator = other.m_value.get().value(); // FIXME: Dividing by 0 is invalid, and should be caught during parsing. VERIFY(denominator != 0.0f); m_value.visit( [&](Number const& number) { m_value = Number { Number::Type::Number, number.value() / denominator }; }, [&](Angle const& angle) { m_value = Angle::make_degrees(angle.to_degrees() / denominator); }, [&](Frequency const& frequency) { m_value = Frequency::make_hertz(frequency.to_hertz() / denominator); }, [&](Length const& length) { VERIFY(layout_node); m_value = Length::make_px(length.to_px(*layout_node) / denominator); }, [&](Time const& time) { m_value = Time::make_seconds(time.to_seconds() / denominator); }, [&](Percentage const& percentage) { m_value = Percentage { percentage.value() / denominator }; }); } ErrorOr CalculatedStyleValue::to_string() const { return String::formatted("calc({})", TRY(m_expression->to_string())); } bool CalculatedStyleValue::equals(StyleValue const& other) const { if (type() != other.type()) return false; // This is a case where comparing the strings actually makes sense. return to_string().release_value_but_fixme_should_propagate_errors() == other.to_string().release_value_but_fixme_should_propagate_errors(); } ErrorOr CalculatedStyleValue::CalcNumberValue::to_string() const { return value.visit( [](Number const& number) -> ErrorOr { return String::number(number.value()); }, [](NonnullOwnPtr const& sum) -> ErrorOr { return String::formatted("({})", TRY(sum->to_string())); }); } ErrorOr CalculatedStyleValue::CalcValue::to_string() const { return value.visit( [](Number const& number) -> ErrorOr { return String::number(number.value()); }, [](NonnullOwnPtr const& sum) -> ErrorOr { return String::formatted("({})", TRY(sum->to_string())); }, [](auto const& v) -> ErrorOr { return v.to_string(); }); } ErrorOr CalculatedStyleValue::CalcSum::to_string() const { StringBuilder builder; TRY(builder.try_append(TRY(first_calc_product->to_string()))); for (auto const& item : zero_or_more_additional_calc_products) TRY(builder.try_append(TRY(item->to_string()))); return builder.to_string(); } ErrorOr CalculatedStyleValue::CalcNumberSum::to_string() const { StringBuilder builder; TRY(builder.try_append(TRY(first_calc_number_product->to_string()))); for (auto const& item : zero_or_more_additional_calc_number_products) TRY(builder.try_append(TRY(item->to_string()))); return builder.to_string(); } ErrorOr CalculatedStyleValue::CalcProduct::to_string() const { StringBuilder builder; TRY(builder.try_append(TRY(first_calc_value.to_string()))); for (auto const& item : zero_or_more_additional_calc_values) TRY(builder.try_append(TRY(item->to_string()))); return builder.to_string(); } ErrorOr CalculatedStyleValue::CalcSumPartWithOperator::to_string() const { return String::formatted(" {} {}", op == SumOperation::Add ? "+"sv : "-"sv, TRY(value->to_string())); } ErrorOr CalculatedStyleValue::CalcProductPartWithOperator::to_string() const { auto value_string = TRY(value.visit( [](CalcValue const& v) { return v.to_string(); }, [](CalcNumberValue const& v) { return v.to_string(); })); return String::formatted(" {} {}", op == ProductOperation::Multiply ? "*"sv : "/"sv, value_string); } ErrorOr CalculatedStyleValue::CalcNumberProduct::to_string() const { StringBuilder builder; TRY(builder.try_append(TRY(first_calc_number_value.to_string()))); for (auto const& item : zero_or_more_additional_calc_number_values) TRY(builder.try_append(TRY(item->to_string()))); return builder.to_string(); } ErrorOr CalculatedStyleValue::CalcNumberProductPartWithOperator::to_string() const { return String::formatted(" {} {}", op == ProductOperation::Multiply ? "*"sv : "/"sv, TRY(value.to_string())); } ErrorOr CalculatedStyleValue::CalcNumberSumPartWithOperator::to_string() const { return String::formatted(" {} {}", op == SumOperation::Add ? "+"sv : "-"sv, TRY(value->to_string())); } Optional CalculatedStyleValue::resolve_angle() const { auto result = m_expression->resolve(nullptr, {}); if (result.value().has()) return result.value().get(); return {}; } Optional CalculatedStyleValue::resolve_angle_percentage(Angle const& percentage_basis) const { auto result = m_expression->resolve(nullptr, percentage_basis); return result.value().visit( [&](Angle const& angle) -> Optional { return angle; }, [&](Percentage const& percentage) -> Optional { return percentage_basis.percentage_of(percentage); }, [&](auto const&) -> Optional { return {}; }); } Optional CalculatedStyleValue::resolve_frequency() const { auto result = m_expression->resolve(nullptr, {}); if (result.value().has()) return result.value().get(); return {}; } Optional CalculatedStyleValue::resolve_frequency_percentage(Frequency const& percentage_basis) const { auto result = m_expression->resolve(nullptr, percentage_basis); return result.value().visit( [&](Frequency const& frequency) -> Optional { return frequency; }, [&](Percentage const& percentage) -> Optional { return percentage_basis.percentage_of(percentage); }, [&](auto const&) -> Optional { return {}; }); } Optional CalculatedStyleValue::resolve_length(Layout::Node const& layout_node) const { auto result = m_expression->resolve(&layout_node, {}); if (result.value().has()) return result.value().get(); return {}; } Optional CalculatedStyleValue::resolve_length_percentage(Layout::Node const& layout_node, Length const& percentage_basis) const { auto result = m_expression->resolve(&layout_node, percentage_basis); return result.value().visit( [&](Length const& length) -> Optional { return length; }, [&](Percentage const& percentage) -> Optional { return percentage_basis.percentage_of(percentage); }, [&](auto const&) -> Optional { return {}; }); } Optional CalculatedStyleValue::resolve_percentage() const { auto result = m_expression->resolve(nullptr, {}); if (result.value().has()) return result.value().get(); return {}; } Optional CalculatedStyleValue::resolve_time() const { auto result = m_expression->resolve(nullptr, {}); if (result.value().has()) return result.value().get(); return {}; } Optional CalculatedStyleValue::resolve_time_percentage(Time const& percentage_basis) const { auto result = m_expression->resolve(nullptr, percentage_basis); return result.value().visit( [&](Time const& time) -> Optional { return time; }, [&](auto const&) -> Optional { return {}; }); } Optional CalculatedStyleValue::resolve_number() { auto result = m_expression->resolve(nullptr, {}); if (result.value().has()) return result.value().get().value(); return {}; } Optional CalculatedStyleValue::resolve_integer() { auto result = m_expression->resolve(nullptr, {}); if (result.value().has()) return result.value().get().integer_value(); return {}; } static bool is_number(CalculatedStyleValue::ResolvedType type) { return type == CalculatedStyleValue::ResolvedType::Number || type == CalculatedStyleValue::ResolvedType::Integer; } static bool is_dimension(CalculatedStyleValue::ResolvedType type) { return type != CalculatedStyleValue::ResolvedType::Number && type != CalculatedStyleValue::ResolvedType::Integer && type != CalculatedStyleValue::ResolvedType::Percentage; } template static Optional resolve_sum_type(CalculatedStyleValue::ResolvedType first_type, Vector> const& zero_or_more_additional_products) { auto type = first_type; for (auto const& product : zero_or_more_additional_products) { auto maybe_product_type = product->resolved_type(); if (!maybe_product_type.has_value()) return {}; auto product_type = maybe_product_type.value(); // At + or -, check that both sides have the same type, or that one side is a and the other is an . // If both sides are the same type, resolve to that type. if (product_type == type) continue; // If one side is a and the other is an , resolve to . if (is_number(type) && is_number(product_type)) { type = CalculatedStyleValue::ResolvedType::Number; continue; } // FIXME: calc() handles by allowing them to pretend to be whatever type is allowed at this location. // Since we can't easily check what that type is, we just allow to combine with any other type. if (type == CalculatedStyleValue::ResolvedType::Percentage && is_dimension(product_type)) { type = product_type; continue; } if (is_dimension(type) && product_type == CalculatedStyleValue::ResolvedType::Percentage) continue; return {}; } return type; } Optional CalculatedStyleValue::CalcSum::resolved_type() const { auto maybe_type = first_calc_product->resolved_type(); if (!maybe_type.has_value()) return {}; auto type = maybe_type.value(); return resolve_sum_type(type, zero_or_more_additional_calc_products); } // https://www.w3.org/TR/CSS2/visufx.html#value-def-shape Gfx::FloatRect EdgeRect::resolved(Layout::Node const& layout_node, Gfx::FloatRect border_box) const { // In CSS 2.1, the only valid value is: rect(, , , ) where // and specify offsets from the top border edge of the box, and , and // specify offsets from the left border edge of the box. // The value 'auto' means that a given edge of the clipping region will be the same as the edge // of the element's generated border box (i.e., 'auto' means the same as '0' for and // , the same as the used value of the height plus the sum of vertical padding and border // widths for , and the same as the used value of the width plus the sum of the // horizontal padding and border widths for , such that four 'auto' values result in the // clipping region being the same as the element's border box). auto left = border_box.left() + (left_edge.is_auto() ? 0 : left_edge.to_px(layout_node)).value(); auto top = border_box.top() + (top_edge.is_auto() ? 0 : top_edge.to_px(layout_node)).value(); auto right = border_box.left() + (right_edge.is_auto() ? border_box.width() : right_edge.to_px(layout_node)).value(); auto bottom = border_box.top() + (bottom_edge.is_auto() ? border_box.height() : bottom_edge.to_px(layout_node)).value(); return Gfx::FloatRect { left, top, right - left, bottom - top }; } Optional CalculatedStyleValue::CalcNumberSum::resolved_type() const { auto maybe_type = first_calc_number_product->resolved_type(); if (!maybe_type.has_value()) return {}; auto type = maybe_type.value(); return resolve_sum_type(type, zero_or_more_additional_calc_number_products); } template static Optional resolve_product_type(CalculatedStyleValue::ResolvedType first_type, Vector> const& zero_or_more_additional_values) { auto type = first_type; for (auto const& value : zero_or_more_additional_values) { auto maybe_value_type = value->resolved_type(); if (!maybe_value_type.has_value()) return {}; auto value_type = maybe_value_type.value(); if (value->op == CalculatedStyleValue::ProductOperation::Multiply) { // At *, check that at least one side is . if (!(is_number(type) || is_number(value_type))) return {}; // If both sides are , resolve to . if (type == CalculatedStyleValue::ResolvedType::Integer && value_type == CalculatedStyleValue::ResolvedType::Integer) { type = CalculatedStyleValue::ResolvedType::Integer; } else { // Otherwise, resolve to the type of the other side. if (is_number(type)) type = value_type; } continue; } else { VERIFY(value->op == CalculatedStyleValue::ProductOperation::Divide); // At /, check that the right side is . if (!is_number(value_type)) return {}; // If the left side is , resolve to . if (type == CalculatedStyleValue::ResolvedType::Integer) { type = CalculatedStyleValue::ResolvedType::Number; } else { // Otherwise, resolve to the type of the left side. } // FIXME: Division by zero makes the whole calc() expression invalid. } } return type; } Optional CalculatedStyleValue::CalcProduct::resolved_type() const { auto maybe_type = first_calc_value.resolved_type(); if (!maybe_type.has_value()) return {}; auto type = maybe_type.value(); return resolve_product_type(type, zero_or_more_additional_calc_values); } Optional CalculatedStyleValue::CalcSumPartWithOperator::resolved_type() const { return value->resolved_type(); } Optional CalculatedStyleValue::CalcNumberProduct::resolved_type() const { auto maybe_type = first_calc_number_value.resolved_type(); if (!maybe_type.has_value()) return {}; auto type = maybe_type.value(); return resolve_product_type(type, zero_or_more_additional_calc_number_values); } Optional CalculatedStyleValue::CalcNumberProductPartWithOperator::resolved_type() const { return value.resolved_type(); } Optional CalculatedStyleValue::CalcNumberSumPartWithOperator::resolved_type() const { return value->resolved_type(); } Optional CalculatedStyleValue::CalcProductPartWithOperator::resolved_type() const { return value.visit( [](CalcValue const& calc_value) { return calc_value.resolved_type(); }, [](CalcNumberValue const& calc_number_value) { return calc_number_value.resolved_type(); }); } Optional CalculatedStyleValue::CalcValue::resolved_type() const { return value.visit( [](Number const& number) -> Optional { return { number.is_integer() ? ResolvedType::Integer : ResolvedType::Number }; }, [](Angle const&) -> Optional { return { ResolvedType::Angle }; }, [](Frequency const&) -> Optional { return { ResolvedType::Frequency }; }, [](Length const&) -> Optional { return { ResolvedType::Length }; }, [](Percentage const&) -> Optional { return { ResolvedType::Percentage }; }, [](Time const&) -> Optional { return { ResolvedType::Time }; }, [](NonnullOwnPtr const& sum) { return sum->resolved_type(); }); } Optional CalculatedStyleValue::CalcNumberValue::resolved_type() const { return value.visit( [](Number const& number) -> Optional { return { number.is_integer() ? ResolvedType::Integer : ResolvedType::Number }; }, [](NonnullOwnPtr const& sum) { return sum->resolved_type(); }); } CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalcNumberValue::resolve(Layout::Node const* layout_node, PercentageBasis const& percentage_basis) const { return value.visit( [&](Number const& number) -> CalculatedStyleValue::CalculationResult { return CalculatedStyleValue::CalculationResult { number }; }, [&](NonnullOwnPtr const& sum) -> CalculatedStyleValue::CalculationResult { return sum->resolve(layout_node, percentage_basis); }); } CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalcValue::resolve(Layout::Node const* layout_node, PercentageBasis const& percentage_basis) const { return value.visit( [&](NonnullOwnPtr const& sum) -> CalculatedStyleValue::CalculationResult { return sum->resolve(layout_node, percentage_basis); }, [&](auto const& v) -> CalculatedStyleValue::CalculationResult { return CalculatedStyleValue::CalculationResult { v }; }); } CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalcSum::resolve(Layout::Node const* layout_node, PercentageBasis const& percentage_basis) const { auto value = first_calc_product->resolve(layout_node, percentage_basis); for (auto& additional_product : zero_or_more_additional_calc_products) { auto additional_value = additional_product->resolve(layout_node, percentage_basis); if (additional_product->op == CalculatedStyleValue::SumOperation::Add) value.add(additional_value, layout_node, percentage_basis); else if (additional_product->op == CalculatedStyleValue::SumOperation::Subtract) value.subtract(additional_value, layout_node, percentage_basis); else VERIFY_NOT_REACHED(); } return value; } CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalcNumberSum::resolve(Layout::Node const* layout_node, PercentageBasis const& percentage_basis) const { auto value = first_calc_number_product->resolve(layout_node, percentage_basis); for (auto& additional_product : zero_or_more_additional_calc_number_products) { auto additional_value = additional_product->resolve(layout_node, percentage_basis); if (additional_product->op == CSS::CalculatedStyleValue::SumOperation::Add) value.add(additional_value, layout_node, percentage_basis); else if (additional_product->op == CalculatedStyleValue::SumOperation::Subtract) value.subtract(additional_value, layout_node, percentage_basis); else VERIFY_NOT_REACHED(); } return value; } CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalcProduct::resolve(Layout::Node const* layout_node, PercentageBasis const& percentage_basis) const { auto value = first_calc_value.resolve(layout_node, percentage_basis); for (auto& additional_value : zero_or_more_additional_calc_values) { additional_value->value.visit( [&](CalculatedStyleValue::CalcValue const& calc_value) { VERIFY(additional_value->op == CalculatedStyleValue::ProductOperation::Multiply); auto resolved_value = calc_value.resolve(layout_node, percentage_basis); value.multiply_by(resolved_value, layout_node); }, [&](CalculatedStyleValue::CalcNumberValue const& calc_number_value) { VERIFY(additional_value->op == CalculatedStyleValue::ProductOperation::Divide); auto resolved_calc_number_value = calc_number_value.resolve(layout_node, percentage_basis); // FIXME: Checking for division by 0 should happen during parsing. VERIFY(resolved_calc_number_value.value().get().value() != 0.0f); value.divide_by(resolved_calc_number_value, layout_node); }); } return value; } CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalcNumberProduct::resolve(Layout::Node const* layout_node, PercentageBasis const& percentage_basis) const { auto value = first_calc_number_value.resolve(layout_node, percentage_basis); for (auto& additional_number_value : zero_or_more_additional_calc_number_values) { auto additional_value = additional_number_value->resolve(layout_node, percentage_basis); if (additional_number_value->op == CalculatedStyleValue::ProductOperation::Multiply) value.multiply_by(additional_value, layout_node); else if (additional_number_value->op == CalculatedStyleValue::ProductOperation::Divide) value.divide_by(additional_value, layout_node); else VERIFY_NOT_REACHED(); } return value; } CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalcProductPartWithOperator::resolve(Layout::Node const* layout_node, PercentageBasis const& percentage_basis) const { return value.visit( [&](CalcValue const& calc_value) { return calc_value.resolve(layout_node, percentage_basis); }, [&](CalcNumberValue const& calc_number_value) { return calc_number_value.resolve(layout_node, percentage_basis); }); } CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalcSumPartWithOperator::resolve(Layout::Node const* layout_node, PercentageBasis const& percentage_basis) const { return value->resolve(layout_node, percentage_basis); } CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalcNumberProductPartWithOperator::resolve(Layout::Node const* layout_node, PercentageBasis const& percentage_basis) const { return value.resolve(layout_node, percentage_basis); } CalculatedStyleValue::CalculationResult CalculatedStyleValue::CalcNumberSumPartWithOperator::resolve(Layout::Node const* layout_node, PercentageBasis const& percentage_basis) const { return value->resolve(layout_node, percentage_basis); } ErrorOr GridTrackSizeStyleValue::to_string() const { return m_grid_track_size_list.to_string(); } ErrorOr IdentifierStyleValue::to_string() const { return String::from_utf8(CSS::string_from_value_id(m_id)); } bool IdentifierStyleValue::has_color() const { switch (m_id) { case ValueID::Currentcolor: case ValueID::LibwebLink: case ValueID::LibwebPaletteActiveLink: case ValueID::LibwebPaletteActiveWindowBorder1: case ValueID::LibwebPaletteActiveWindowBorder2: case ValueID::LibwebPaletteActiveWindowTitle: case ValueID::LibwebPaletteBase: case ValueID::LibwebPaletteBaseText: case ValueID::LibwebPaletteButton: case ValueID::LibwebPaletteButtonText: case ValueID::LibwebPaletteDesktopBackground: case ValueID::LibwebPaletteFocusOutline: case ValueID::LibwebPaletteHighlightWindowBorder1: case ValueID::LibwebPaletteHighlightWindowBorder2: case ValueID::LibwebPaletteHighlightWindowTitle: case ValueID::LibwebPaletteHoverHighlight: case ValueID::LibwebPaletteInactiveSelection: case ValueID::LibwebPaletteInactiveSelectionText: case ValueID::LibwebPaletteInactiveWindowBorder1: case ValueID::LibwebPaletteInactiveWindowBorder2: case ValueID::LibwebPaletteInactiveWindowTitle: case ValueID::LibwebPaletteLink: case ValueID::LibwebPaletteMenuBase: case ValueID::LibwebPaletteMenuBaseText: case ValueID::LibwebPaletteMenuSelection: case ValueID::LibwebPaletteMenuSelectionText: case ValueID::LibwebPaletteMenuStripe: case ValueID::LibwebPaletteMovingWindowBorder1: case ValueID::LibwebPaletteMovingWindowBorder2: case ValueID::LibwebPaletteMovingWindowTitle: case ValueID::LibwebPaletteRubberBandBorder: case ValueID::LibwebPaletteRubberBandFill: case ValueID::LibwebPaletteRuler: case ValueID::LibwebPaletteRulerActiveText: case ValueID::LibwebPaletteRulerBorder: case ValueID::LibwebPaletteRulerInactiveText: case ValueID::LibwebPaletteSelection: case ValueID::LibwebPaletteSelectionText: case ValueID::LibwebPaletteSyntaxComment: case ValueID::LibwebPaletteSyntaxControlKeyword: case ValueID::LibwebPaletteSyntaxIdentifier: case ValueID::LibwebPaletteSyntaxKeyword: case ValueID::LibwebPaletteSyntaxNumber: case ValueID::LibwebPaletteSyntaxOperator: case ValueID::LibwebPaletteSyntaxPreprocessorStatement: case ValueID::LibwebPaletteSyntaxPreprocessorValue: case ValueID::LibwebPaletteSyntaxPunctuation: case ValueID::LibwebPaletteSyntaxString: case ValueID::LibwebPaletteSyntaxType: case ValueID::LibwebPaletteTextCursor: case ValueID::LibwebPaletteThreedHighlight: case ValueID::LibwebPaletteThreedShadow1: case ValueID::LibwebPaletteThreedShadow2: case ValueID::LibwebPaletteVisitedLink: case ValueID::LibwebPaletteWindow: case ValueID::LibwebPaletteWindowText: return true; default: return false; } } Color IdentifierStyleValue::to_color(Layout::NodeWithStyle const& node) const { if (id() == CSS::ValueID::Currentcolor) { if (!node.has_style()) return Color::Black; return node.computed_values().color(); } auto& document = node.document(); if (id() == CSS::ValueID::LibwebLink) return document.link_color(); if (!document.page()) return {}; auto palette = document.page()->palette(); switch (id()) { case CSS::ValueID::LibwebPaletteDesktopBackground: return palette.color(ColorRole::DesktopBackground); case CSS::ValueID::LibwebPaletteActiveWindowBorder1: return palette.color(ColorRole::ActiveWindowBorder1); case CSS::ValueID::LibwebPaletteActiveWindowBorder2: return palette.color(ColorRole::ActiveWindowBorder2); case CSS::ValueID::LibwebPaletteActiveWindowTitle: return palette.color(ColorRole::ActiveWindowTitle); case CSS::ValueID::LibwebPaletteInactiveWindowBorder1: return palette.color(ColorRole::InactiveWindowBorder1); case CSS::ValueID::LibwebPaletteInactiveWindowBorder2: return palette.color(ColorRole::InactiveWindowBorder2); case CSS::ValueID::LibwebPaletteInactiveWindowTitle: return palette.color(ColorRole::InactiveWindowTitle); case CSS::ValueID::LibwebPaletteMovingWindowBorder1: return palette.color(ColorRole::MovingWindowBorder1); case CSS::ValueID::LibwebPaletteMovingWindowBorder2: return palette.color(ColorRole::MovingWindowBorder2); case CSS::ValueID::LibwebPaletteMovingWindowTitle: return palette.color(ColorRole::MovingWindowTitle); case CSS::ValueID::LibwebPaletteHighlightWindowBorder1: return palette.color(ColorRole::HighlightWindowBorder1); case CSS::ValueID::LibwebPaletteHighlightWindowBorder2: return palette.color(ColorRole::HighlightWindowBorder2); case CSS::ValueID::LibwebPaletteHighlightWindowTitle: return palette.color(ColorRole::HighlightWindowTitle); case CSS::ValueID::LibwebPaletteMenuStripe: return palette.color(ColorRole::MenuStripe); case CSS::ValueID::LibwebPaletteMenuBase: return palette.color(ColorRole::MenuBase); case CSS::ValueID::LibwebPaletteMenuBaseText: return palette.color(ColorRole::MenuBaseText); case CSS::ValueID::LibwebPaletteMenuSelection: return palette.color(ColorRole::MenuSelection); case CSS::ValueID::LibwebPaletteMenuSelectionText: return palette.color(ColorRole::MenuSelectionText); case CSS::ValueID::LibwebPaletteWindow: return palette.color(ColorRole::Window); case CSS::ValueID::LibwebPaletteWindowText: return palette.color(ColorRole::WindowText); case CSS::ValueID::LibwebPaletteButton: return palette.color(ColorRole::Button); case CSS::ValueID::LibwebPaletteButtonText: return palette.color(ColorRole::ButtonText); case CSS::ValueID::LibwebPaletteBase: return palette.color(ColorRole::Base); case CSS::ValueID::LibwebPaletteBaseText: return palette.color(ColorRole::BaseText); case CSS::ValueID::LibwebPaletteThreedHighlight: return palette.color(ColorRole::ThreedHighlight); case CSS::ValueID::LibwebPaletteThreedShadow1: return palette.color(ColorRole::ThreedShadow1); case CSS::ValueID::LibwebPaletteThreedShadow2: return palette.color(ColorRole::ThreedShadow2); case CSS::ValueID::LibwebPaletteHoverHighlight: return palette.color(ColorRole::HoverHighlight); case CSS::ValueID::LibwebPaletteSelection: return palette.color(ColorRole::Selection); case CSS::ValueID::LibwebPaletteSelectionText: return palette.color(ColorRole::SelectionText); case CSS::ValueID::LibwebPaletteInactiveSelection: return palette.color(ColorRole::InactiveSelection); case CSS::ValueID::LibwebPaletteInactiveSelectionText: return palette.color(ColorRole::InactiveSelectionText); case CSS::ValueID::LibwebPaletteRubberBandFill: return palette.color(ColorRole::RubberBandFill); case CSS::ValueID::LibwebPaletteRubberBandBorder: return palette.color(ColorRole::RubberBandBorder); case CSS::ValueID::LibwebPaletteLink: return palette.color(ColorRole::Link); case CSS::ValueID::LibwebPaletteActiveLink: return palette.color(ColorRole::ActiveLink); case CSS::ValueID::LibwebPaletteVisitedLink: return palette.color(ColorRole::VisitedLink); case CSS::ValueID::LibwebPaletteRuler: return palette.color(ColorRole::Ruler); case CSS::ValueID::LibwebPaletteRulerBorder: return palette.color(ColorRole::RulerBorder); case CSS::ValueID::LibwebPaletteRulerActiveText: return palette.color(ColorRole::RulerActiveText); case CSS::ValueID::LibwebPaletteRulerInactiveText: return palette.color(ColorRole::RulerInactiveText); case CSS::ValueID::LibwebPaletteTextCursor: return palette.color(ColorRole::TextCursor); case CSS::ValueID::LibwebPaletteFocusOutline: return palette.color(ColorRole::FocusOutline); case CSS::ValueID::LibwebPaletteSyntaxComment: return palette.color(ColorRole::SyntaxComment); case CSS::ValueID::LibwebPaletteSyntaxNumber: return palette.color(ColorRole::SyntaxNumber); case CSS::ValueID::LibwebPaletteSyntaxString: return palette.color(ColorRole::SyntaxString); case CSS::ValueID::LibwebPaletteSyntaxType: return palette.color(ColorRole::SyntaxType); case CSS::ValueID::LibwebPaletteSyntaxPunctuation: return palette.color(ColorRole::SyntaxPunctuation); case CSS::ValueID::LibwebPaletteSyntaxOperator: return palette.color(ColorRole::SyntaxOperator); case CSS::ValueID::LibwebPaletteSyntaxKeyword: return palette.color(ColorRole::SyntaxKeyword); case CSS::ValueID::LibwebPaletteSyntaxControlKeyword: return palette.color(ColorRole::SyntaxControlKeyword); case CSS::ValueID::LibwebPaletteSyntaxIdentifier: return palette.color(ColorRole::SyntaxIdentifier); case CSS::ValueID::LibwebPaletteSyntaxPreprocessorStatement: return palette.color(ColorRole::SyntaxPreprocessorStatement); case CSS::ValueID::LibwebPaletteSyntaxPreprocessorValue: return palette.color(ColorRole::SyntaxPreprocessorValue); default: return {}; } } ImageStyleValue::ImageStyleValue(AK::URL const& url) : AbstractImageStyleValue(Type::Image) , m_url(url) { } void ImageStyleValue::load_any_resources(DOM::Document& document) { if (resource()) return; m_document = &document; auto request = LoadRequest::create_for_url_on_page(m_url, document.page()); set_resource(ResourceLoader::the().load_resource(Resource::Type::Image, request)); } void ImageStyleValue::resource_did_load() { if (!m_document) return; // FIXME: Do less than a full repaint if possible? if (m_document && m_document->browsing_context()) m_document->browsing_context()->set_needs_display(); if (resource()->is_animated() && resource()->frame_count() > 1) { m_timer = Platform::Timer::create(); m_timer->set_interval(resource()->frame_duration(0)); m_timer->on_timeout = [this] { animate(); }; m_timer->start(); } } void ImageStyleValue::animate() { m_current_frame_index = (m_current_frame_index + 1) % resource()->frame_count(); auto current_frame_duration = resource()->frame_duration(m_current_frame_index); if (current_frame_duration != m_timer->interval()) m_timer->restart(current_frame_duration); if (m_current_frame_index == resource()->frame_count() - 1) { ++m_loops_completed; if (m_loops_completed > 0 && m_loops_completed == resource()->loop_count()) m_timer->stop(); } if (on_animate) on_animate(); } Gfx::Bitmap const* ImageStyleValue::bitmap(size_t frame_index) const { if (!resource()) return nullptr; return resource()->bitmap(frame_index); } ErrorOr ImageStyleValue::to_string() const { return serialize_a_url(m_url.to_deprecated_string()); } bool ImageStyleValue::equals(StyleValue const& other) const { if (type() != other.type()) return false; return m_url == other.as_image().m_url; } Optional ImageStyleValue::natural_width() const { if (auto* b = bitmap(0); b != nullptr) return b->width(); return {}; } Optional ImageStyleValue::natural_height() const { if (auto* b = bitmap(0); b != nullptr) return b->height(); return {}; } void ImageStyleValue::paint(PaintContext& context, DevicePixelRect const& dest_rect, CSS::ImageRendering image_rendering) const { if (auto* b = bitmap(m_current_frame_index); b != nullptr) context.painter().draw_scaled_bitmap(dest_rect.to_type(), *b, bitmap(0)->rect(), 1.0f, to_gfx_scaling_mode(image_rendering)); } static ErrorOr serialize_color_stop_list(StringBuilder& builder, auto const& color_stop_list) { bool first = true; for (auto const& element : color_stop_list) { if (!first) TRY(builder.try_append(", "sv)); if (element.transition_hint.has_value()) TRY(builder.try_appendff("{}, "sv, TRY(element.transition_hint->value.to_string()))); TRY(serialize_a_srgb_value(builder, element.color_stop.color)); for (auto position : Array { &element.color_stop.position, &element.color_stop.second_position }) { if (position->has_value()) TRY(builder.try_appendff(" {}"sv, TRY((*position)->to_string()))); } first = false; } return {}; } ErrorOr LinearGradientStyleValue::to_string() const { StringBuilder builder; auto side_or_corner_to_string = [](SideOrCorner value) { switch (value) { case SideOrCorner::Top: return "top"sv; case SideOrCorner::Bottom: return "bottom"sv; case SideOrCorner::Left: return "left"sv; case SideOrCorner::Right: return "right"sv; case SideOrCorner::TopLeft: return "top left"sv; case SideOrCorner::TopRight: return "top right"sv; case SideOrCorner::BottomLeft: return "bottom left"sv; case SideOrCorner::BottomRight: return "bottom right"sv; default: VERIFY_NOT_REACHED(); } }; if (m_properties.gradient_type == GradientType::WebKit) TRY(builder.try_append("-webkit-"sv)); if (is_repeating()) TRY(builder.try_append("repeating-"sv)); TRY(builder.try_append("linear-gradient("sv)); TRY(m_properties.direction.visit( [&](SideOrCorner side_or_corner) -> ErrorOr { return builder.try_appendff("{}{}, "sv, m_properties.gradient_type == GradientType::Standard ? "to "sv : ""sv, side_or_corner_to_string(side_or_corner)); }, [&](Angle const& angle) -> ErrorOr { return builder.try_appendff("{}, "sv, TRY(angle.to_string())); })); TRY(serialize_color_stop_list(builder, m_properties.color_stop_list)); TRY(builder.try_append(")"sv)); return builder.to_string(); } bool LinearGradientStyleValue::equals(StyleValue const& other_) const { if (type() != other_.type()) return false; auto& other = other_.as_linear_gradient(); return m_properties == other.m_properties; } float LinearGradientStyleValue::angle_degrees(CSSPixelSize gradient_size) const { auto corner_angle_degrees = [&] { return static_cast(atan2(gradient_size.height().value(), gradient_size.width().value())) * 180 / AK::Pi; }; return m_properties.direction.visit( [&](SideOrCorner side_or_corner) { auto angle = [&] { switch (side_or_corner) { case SideOrCorner::Top: return 0.0f; case SideOrCorner::Bottom: return 180.0f; case SideOrCorner::Left: return 270.0f; case SideOrCorner::Right: return 90.0f; case SideOrCorner::TopRight: return corner_angle_degrees(); case SideOrCorner::BottomLeft: return corner_angle_degrees() + 180.0f; case SideOrCorner::TopLeft: return -corner_angle_degrees(); case SideOrCorner::BottomRight: return -(corner_angle_degrees() + 180.0f); default: VERIFY_NOT_REACHED(); } }(); // Note: For unknowable reasons the angles are opposite on the -webkit- version if (m_properties.gradient_type == GradientType::WebKit) return angle + 180.0f; return angle; }, [&](Angle const& angle) { return angle.to_degrees(); }); } void LinearGradientStyleValue::resolve_for_size(Layout::Node const& node, CSSPixelSize size) const { if (m_resolved.has_value() && m_resolved->size == size) return; m_resolved = ResolvedData { Painting::resolve_linear_gradient_data(node, size, *this), size }; } void LinearGradientStyleValue::paint(PaintContext& context, DevicePixelRect const& dest_rect, CSS::ImageRendering) const { VERIFY(m_resolved.has_value()); Painting::paint_linear_gradient(context, dest_rect, m_resolved->data); } CSSPixelPoint PositionValue::resolved(Layout::Node const& node, CSSPixelRect const& rect) const { // Note: A preset + a none default x/y_relative_to is impossible in the syntax (and makes little sense) CSSPixels x = horizontal_position.visit( [&](HorizontalPreset preset) -> CSSPixels { return rect.width() * [&] { switch (preset) { case HorizontalPreset::Left: return 0.0f; case HorizontalPreset::Center: return 0.5f; case HorizontalPreset::Right: return 1.0f; default: VERIFY_NOT_REACHED(); } }(); }, [&](LengthPercentage length_percentage) -> CSSPixels { return length_percentage.resolved(node, Length::make_px(rect.width())).to_px(node); }); CSSPixels y = vertical_position.visit( [&](VerticalPreset preset) -> CSSPixels { return rect.height() * [&] { switch (preset) { case VerticalPreset::Top: return 0.0f; case VerticalPreset::Center: return 0.5f; case VerticalPreset::Bottom: return 1.0f; default: VERIFY_NOT_REACHED(); } }(); }, [&](LengthPercentage length_percentage) -> CSSPixels { return length_percentage.resolved(node, Length::make_px(rect.height())).to_px(node); }); if (x_relative_to == HorizontalEdge::Right) x = rect.width() - x; if (y_relative_to == VerticalEdge::Bottom) y = rect.height() - y; return CSSPixelPoint { rect.x() + x, rect.y() + y }; } ErrorOr PositionValue::serialize(StringBuilder& builder) const { // Note: This means our serialization with simplify any with explicit edges that are just `top left`. bool has_relative_edges = x_relative_to == HorizontalEdge::Right || y_relative_to == VerticalEdge::Bottom; if (has_relative_edges) TRY(builder.try_append(x_relative_to == HorizontalEdge::Left ? "left "sv : "right "sv)); TRY(horizontal_position.visit( [&](HorizontalPreset preset) -> ErrorOr { return builder.try_append([&] { switch (preset) { case HorizontalPreset::Left: return "left"sv; case HorizontalPreset::Center: return "center"sv; case HorizontalPreset::Right: return "right"sv; default: VERIFY_NOT_REACHED(); } }()); }, [&](LengthPercentage length_percentage) -> ErrorOr { return builder.try_appendff(TRY(length_percentage.to_string())); })); TRY(builder.try_append(' ')); if (has_relative_edges) TRY(builder.try_append(y_relative_to == VerticalEdge::Top ? "top "sv : "bottom "sv)); TRY(vertical_position.visit( [&](VerticalPreset preset) -> ErrorOr { return builder.try_append([&] { switch (preset) { case VerticalPreset::Top: return "top"sv; case VerticalPreset::Center: return "center"sv; case VerticalPreset::Bottom: return "bottom"sv; default: VERIFY_NOT_REACHED(); } }()); }, [&](LengthPercentage length_percentage) -> ErrorOr { return builder.try_append(TRY(length_percentage.to_string())); })); return {}; } ErrorOr RadialGradientStyleValue::to_string() const { StringBuilder builder; if (is_repeating()) TRY(builder.try_append("repeating-"sv)); TRY(builder.try_appendff("radial-gradient({} "sv, m_properties.ending_shape == EndingShape::Circle ? "circle"sv : "ellipse"sv)); TRY(m_properties.size.visit( [&](Extent extent) -> ErrorOr { return builder.try_append([&] { switch (extent) { case Extent::ClosestCorner: return "closest-corner"sv; case Extent::ClosestSide: return "closest-side"sv; case Extent::FarthestCorner: return "farthest-corner"sv; case Extent::FarthestSide: return "farthest-side"sv; default: VERIFY_NOT_REACHED(); } }()); }, [&](CircleSize const& circle_size) -> ErrorOr { return builder.try_append(TRY(circle_size.radius.to_string())); }, [&](EllipseSize const& ellipse_size) -> ErrorOr { return builder.try_appendff("{} {}", TRY(ellipse_size.radius_a.to_string()), TRY(ellipse_size.radius_b.to_string())); })); if (m_properties.position != PositionValue::center()) { TRY(builder.try_appendff(" at "sv)); TRY(m_properties.position.serialize(builder)); } TRY(builder.try_append(", "sv)); TRY(serialize_color_stop_list(builder, m_properties.color_stop_list)); TRY(builder.try_append(')')); return builder.to_string(); } Gfx::FloatSize RadialGradientStyleValue::resolve_size(Layout::Node const& node, Gfx::FloatPoint center, Gfx::FloatRect const& size) const { auto const side_shape = [&](auto distance_function) { auto const distance_from = [&](float v, float a, float b, auto distance_function) { return distance_function(fabs(a - v), fabs(b - v)); }; auto x_dist = distance_from(center.x(), size.left(), size.right(), distance_function); auto y_dist = distance_from(center.y(), size.top(), size.bottom(), distance_function); if (m_properties.ending_shape == EndingShape::Circle) { auto dist = distance_function(x_dist, y_dist); return Gfx::FloatSize { dist, dist }; } else { return Gfx::FloatSize { x_dist, y_dist }; } }; auto const closest_side_shape = [&] { return side_shape(AK::min); }; auto const farthest_side_shape = [&] { return side_shape(AK::max); }; auto const corner_distance = [&](auto distance_compare, Gfx::FloatPoint& corner) { auto top_left_distance = size.top_left().distance_from(center); auto top_right_distance = size.top_right().distance_from(center); auto bottom_right_distance = size.bottom_right().distance_from(center); auto bottom_left_distance = size.bottom_left().distance_from(center); auto distance = top_left_distance; if (distance_compare(top_right_distance, distance)) { corner = size.top_right(); distance = top_right_distance; } if (distance_compare(bottom_right_distance, distance)) { corner = size.top_right(); distance = bottom_right_distance; } if (distance_compare(bottom_left_distance, distance)) { corner = size.top_right(); distance = bottom_left_distance; } return distance; }; auto const closest_corner_distance = [&](Gfx::FloatPoint& corner) { return corner_distance([](float a, float b) { return a < b; }, corner); }; auto const farthest_corner_distance = [&](Gfx::FloatPoint& corner) { return corner_distance([](float a, float b) { return a > b; }, corner); }; auto const corner_shape = [&](auto corner_distance, auto get_shape) { Gfx::FloatPoint corner {}; auto distance = corner_distance(corner); if (m_properties.ending_shape == EndingShape::Ellipse) { auto shape = get_shape(); auto aspect_ratio = shape.width() / shape.height(); auto p = corner - center; auto radius_a = AK::sqrt(p.y() * p.y() * aspect_ratio * aspect_ratio + p.x() * p.x()); auto radius_b = radius_a / aspect_ratio; return Gfx::FloatSize { radius_a, radius_b }; } return Gfx::FloatSize { distance, distance }; }; // https://w3c.github.io/csswg-drafts/css-images/#radial-gradient-syntax auto resolved_size = m_properties.size.visit( [&](Extent extent) { switch (extent) { case Extent::ClosestSide: // The ending shape is sized so that it exactly meets the side of the gradient box closest to the gradient’s center. // If the shape is an ellipse, it exactly meets the closest side in each dimension. return closest_side_shape(); case Extent::ClosestCorner: // The ending shape is sized so that it passes through the corner of the gradient box closest to the gradient’s center. // If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified return corner_shape(closest_corner_distance, closest_side_shape); case Extent::FarthestCorner: // Same as closest-corner, except the ending shape is sized based on the farthest corner. // If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified. return corner_shape(farthest_corner_distance, farthest_side_shape); case Extent::FarthestSide: // Same as closest-side, except the ending shape is sized based on the farthest side(s). return farthest_side_shape(); default: VERIFY_NOT_REACHED(); } }, [&](CircleSize const& circle_size) { auto radius = circle_size.radius.to_px(node); return Gfx::FloatSize { radius, radius }; }, [&](EllipseSize const& ellipse_size) { auto radius_a = ellipse_size.radius_a.resolved(node, CSS::Length::make_px(size.width())).to_px(node); auto radius_b = ellipse_size.radius_b.resolved(node, CSS::Length::make_px(size.height())).to_px(node); return Gfx::FloatSize { radius_a, radius_b }; }); // Handle degenerate cases // https://w3c.github.io/csswg-drafts/css-images/#degenerate-radials constexpr auto arbitrary_small_number = 1e-10; constexpr auto arbitrary_large_number = 1e10; // If the ending shape is a circle with zero radius: if (m_properties.ending_shape == EndingShape::Circle && resolved_size.is_empty()) { // Render as if the ending shape was a circle whose radius was an arbitrary very small number greater than zero. // This will make the gradient continue to look like a circle. return Gfx::FloatSize { arbitrary_small_number, arbitrary_small_number }; } // If the ending shape has zero width (regardless of the height): if (resolved_size.width() <= 0) { // Render as if the ending shape was an ellipse whose height was an arbitrary very large number // and whose width was an arbitrary very small number greater than zero. // This will make the gradient look similar to a horizontal linear gradient that is mirrored across the center of the ellipse. // It also means that all color-stop positions specified with a percentage resolve to 0px. return Gfx::FloatSize { arbitrary_small_number, arbitrary_large_number }; } // Otherwise, if the ending shape has zero height: if (resolved_size.height() <= 0) { // Render as if the ending shape was an ellipse whose width was an arbitrary very large number and whose height // was an arbitrary very small number greater than zero. This will make the gradient look like a solid-color image equal // to the color of the last color-stop, or equal to the average color of the gradient if it’s repeating. return Gfx::FloatSize { arbitrary_large_number, arbitrary_small_number }; } return resolved_size; } void RadialGradientStyleValue::resolve_for_size(Layout::Node const& node, CSSPixelSize paint_size) const { CSSPixelRect gradient_box { { 0, 0 }, paint_size }; auto center = m_properties.position.resolved(node, gradient_box).to_type(); auto gradient_size = resolve_size(node, center, gradient_box.to_type()); if (m_resolved.has_value() && m_resolved->gradient_size == gradient_size) return; m_resolved = ResolvedData { Painting::resolve_radial_gradient_data(node, gradient_size.to_type(), *this), gradient_size, center, }; } bool RadialGradientStyleValue::equals(StyleValue const& other) const { if (type() != other.type()) return false; auto& other_gradient = other.as_radial_gradient(); return m_properties == other_gradient.m_properties; } void RadialGradientStyleValue::paint(PaintContext& context, DevicePixelRect const& dest_rect, CSS::ImageRendering) const { VERIFY(m_resolved.has_value()); Painting::paint_radial_gradient(context, dest_rect, m_resolved->data, context.rounded_device_point(m_resolved->center.to_type()), context.rounded_device_size(m_resolved->gradient_size.to_type())); } ErrorOr ConicGradientStyleValue::to_string() const { StringBuilder builder; if (is_repeating()) TRY(builder.try_append("repeating-"sv)); TRY(builder.try_append("conic-gradient("sv)); bool has_from_angle = false; bool has_at_position = false; if ((has_from_angle = m_properties.from_angle.to_degrees() != 0)) TRY(builder.try_appendff("from {}", TRY(m_properties.from_angle.to_string()))); if ((has_at_position = m_properties.position != PositionValue::center())) { if (has_from_angle) TRY(builder.try_append(' ')); TRY(builder.try_appendff("at "sv)); TRY(m_properties.position.serialize(builder)); } if (has_from_angle || has_at_position) TRY(builder.try_append(", "sv)); TRY(serialize_color_stop_list(builder, m_properties.color_stop_list)); TRY(builder.try_append(')')); return builder.to_string(); } void ConicGradientStyleValue::resolve_for_size(Layout::Node const& node, CSSPixelSize size) const { if (!m_resolved.has_value()) m_resolved = ResolvedData { Painting::resolve_conic_gradient_data(node, *this), {} }; m_resolved->position = m_properties.position.resolved(node, CSSPixelRect { { 0, 0 }, size }); } void ConicGradientStyleValue::paint(PaintContext& context, DevicePixelRect const& dest_rect, CSS::ImageRendering) const { VERIFY(m_resolved.has_value()); Painting::paint_conic_gradient(context, dest_rect, m_resolved->data, context.rounded_device_point(m_resolved->position)); } bool ConicGradientStyleValue::equals(StyleValue const& other) const { if (type() != other.type()) return false; auto& other_gradient = other.as_conic_gradient(); return m_properties == other_gradient.m_properties; } float ConicGradientStyleValue::angle_degrees() const { return m_properties.from_angle.to_degrees(); } ErrorOr ListStyleStyleValue::to_string() const { return String::formatted("{} {} {}", TRY(m_properties.position->to_string()), TRY(m_properties.image->to_string()), TRY(m_properties.style_type->to_string())); } ErrorOr NumericStyleValue::to_string() const { return m_value.visit( [](auto value) { return String::formatted("{}", value); }); } ErrorOr OverflowStyleValue::to_string() const { return String::formatted("{} {}", TRY(m_properties.overflow_x->to_string()), TRY(m_properties.overflow_y->to_string())); } ErrorOr PercentageStyleValue::to_string() const { return m_percentage.to_string(); } ErrorOr PositionStyleValue::to_string() const { auto to_string = [](PositionEdge edge) { switch (edge) { case PositionEdge::Left: return "left"; case PositionEdge::Right: return "right"; case PositionEdge::Top: return "top"; case PositionEdge::Bottom: return "bottom"; } VERIFY_NOT_REACHED(); }; return String::formatted("{} {} {} {}", to_string(m_properties.edge_x), TRY(m_properties.offset_x.to_string()), to_string(m_properties.edge_y), TRY(m_properties.offset_y.to_string())); } ErrorOr RectStyleValue::to_string() const { return String::formatted("rect({} {} {} {})", m_rect.top_edge, m_rect.right_edge, m_rect.bottom_edge, m_rect.left_edge); } ErrorOr ShadowStyleValue::to_string() const { StringBuilder builder; TRY(builder.try_appendff("{} {} {} {} {}", m_properties.color.to_deprecated_string(), TRY(m_properties.offset_x.to_string()), TRY(m_properties.offset_y.to_string()), TRY(m_properties.blur_radius.to_string()), TRY(m_properties.spread_distance.to_string()))); if (m_properties.placement == ShadowPlacement::Inner) TRY(builder.try_append(" inset"sv)); return builder.to_string(); } ErrorOr TextDecorationStyleValue::to_string() const { return String::formatted("{} {} {} {}", TRY(m_properties.line->to_string()), TRY(m_properties.thickness->to_string()), TRY(m_properties.style->to_string()), TRY(m_properties.color->to_string())); } ErrorOr TransformationStyleValue::to_string() const { StringBuilder builder; TRY(builder.try_append(CSS::to_string(m_properties.transform_function))); TRY(builder.try_append('(')); for (size_t i = 0; i < m_properties.values.size(); ++i) { TRY(builder.try_append(TRY(m_properties.values[i]->to_string()))); if (i != m_properties.values.size() - 1) TRY(builder.try_append(", "sv)); } TRY(builder.try_append(')')); return builder.to_string(); } bool TransformationStyleValue::Properties::operator==(Properties const& other) const { return transform_function == other.transform_function && values.span() == other.values.span(); } ErrorOr UnresolvedStyleValue::to_string() const { StringBuilder builder; for (auto& value : m_values) TRY(builder.try_append(TRY(value.to_string()))); return builder.to_string(); } bool UnresolvedStyleValue::equals(StyleValue const& other) const { if (type() != other.type()) return false; // This is a case where comparing the strings actually makes sense. return to_string().release_value_but_fixme_should_propagate_errors() == other.to_string().release_value_but_fixme_should_propagate_errors(); } bool StyleValueList::Properties::operator==(Properties const& other) const { return separator == other.separator && values.span() == other.values.span(); } ErrorOr StyleValueList::to_string() const { auto separator = ""sv; switch (m_properties.separator) { case Separator::Space: separator = " "sv; break; case Separator::Comma: separator = ", "sv; break; default: VERIFY_NOT_REACHED(); } StringBuilder builder; for (size_t i = 0; i < m_properties.values.size(); ++i) { TRY(builder.try_append(TRY(m_properties.values[i]->to_string()))); if (i != m_properties.values.size() - 1) TRY(builder.try_append(separator)); } return builder.to_string(); } ValueComparingNonnullRefPtr GridTrackSizeStyleValue::create(CSS::GridTrackSizeList grid_track_size_list) { return adopt_ref(*new GridTrackSizeStyleValue(grid_track_size_list)); } ValueComparingNonnullRefPtr GridTrackSizeStyleValue::make_auto() { return adopt_ref(*new GridTrackSizeStyleValue(CSS::GridTrackSizeList())); } ValueComparingNonnullRefPtr RectStyleValue::create(EdgeRect rect) { return adopt_ref(*new RectStyleValue(rect)); } ValueComparingNonnullRefPtr LengthStyleValue::create(Length const& length) { if (length.is_auto()) { static auto value = adopt_ref(*new LengthStyleValue(CSS::Length::make_auto())); return value; } if (length.is_px()) { if (length.raw_value() == 0) { static auto value = adopt_ref(*new LengthStyleValue(CSS::Length::make_px(0))); return value; } if (length.raw_value() == 1) { static auto value = adopt_ref(*new LengthStyleValue(CSS::Length::make_px(1))); return value; } } return adopt_ref(*new LengthStyleValue(length)); } Optional absolutized_length(CSS::Length const& length, CSSPixelRect const& viewport_rect, Gfx::FontPixelMetrics const& font_metrics, CSSPixels font_size, CSSPixels root_font_size, CSSPixels line_height, CSSPixels root_line_height) { if (length.is_px()) return {}; if (length.is_absolute() || length.is_relative()) { auto px = length.to_px(viewport_rect, font_metrics, font_size, root_font_size, line_height, root_line_height); return CSS::Length::make_px(px); } return {}; } ValueComparingNonnullRefPtr StyleValue::absolutized(CSSPixelRect const&, Gfx::FontPixelMetrics const&, CSSPixels, CSSPixels, CSSPixels, CSSPixels) const { return *this; } ValueComparingNonnullRefPtr LengthStyleValue::absolutized(CSSPixelRect const& viewport_rect, Gfx::FontPixelMetrics const& font_metrics, CSSPixels font_size, CSSPixels root_font_size, CSSPixels line_height, CSSPixels root_line_height) const { if (auto length = absolutized_length(m_length, viewport_rect, font_metrics, font_size, root_font_size, line_height, root_line_height); length.has_value()) return LengthStyleValue::create(length.release_value()); return *this; } ValueComparingNonnullRefPtr ShadowStyleValue::absolutized(CSSPixelRect const& viewport_rect, Gfx::FontPixelMetrics const& font_metrics, CSSPixels font_size, CSSPixels root_font_size, CSSPixels line_height, CSSPixels root_line_height) const { auto absolutized_offset_x = absolutized_length(m_properties.offset_x, viewport_rect, font_metrics, font_size, root_font_size, line_height, root_line_height).value_or(m_properties.offset_x); auto absolutized_offset_y = absolutized_length(m_properties.offset_y, viewport_rect, font_metrics, font_size, root_font_size, line_height, root_line_height).value_or(m_properties.offset_y); auto absolutized_blur_radius = absolutized_length(m_properties.blur_radius, viewport_rect, font_metrics, font_size, root_font_size, line_height, root_line_height).value_or(m_properties.blur_radius); auto absolutized_spread_distance = absolutized_length(m_properties.spread_distance, viewport_rect, font_metrics, font_size, root_font_size, line_height, root_line_height).value_or(m_properties.spread_distance); return ShadowStyleValue::create(m_properties.color, absolutized_offset_x, absolutized_offset_y, absolutized_blur_radius, absolutized_spread_distance, m_properties.placement); } bool CalculatedStyleValue::contains_percentage() const { return m_expression->contains_percentage(); } bool CalculatedStyleValue::CalcSum::contains_percentage() const { if (first_calc_product->contains_percentage()) return true; for (auto& part : zero_or_more_additional_calc_products) { if (part->contains_percentage()) return true; } return false; } bool CalculatedStyleValue::CalcSumPartWithOperator::contains_percentage() const { return value->contains_percentage(); } bool CalculatedStyleValue::CalcProduct::contains_percentage() const { if (first_calc_value.contains_percentage()) return true; for (auto& part : zero_or_more_additional_calc_values) { if (part->contains_percentage()) return true; } return false; } bool CalculatedStyleValue::CalcProductPartWithOperator::contains_percentage() const { return value.visit( [](CalcValue const& value) { return value.contains_percentage(); }, [](CalcNumberValue const&) { return false; }); } bool CalculatedStyleValue::CalcValue::contains_percentage() const { return value.visit( [](Percentage const&) { return true; }, [](NonnullOwnPtr const& sum) { return sum->contains_percentage(); }, [](auto const&) { return false; }); } bool calculated_style_value_contains_percentage(CalculatedStyleValue const& value) { return value.contains_percentage(); } }