LibWeb: Store font-style in ComputedProperties in computed form

Calme1709 · AtkinsSJ · commit dc41d045d8e9 · 2025-09-19T10:06:33.000+01:00
diff --git a/Libraries/LibWeb/CSS/ComputedProperties.cpp b/Libraries/LibWeb/CSS/ComputedProperties.cpp
@@ -18,6 +18,7 @@
 #include <LibWeb/CSS/StyleValues/CustomIdentStyleValue.h>
 #include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FitContentStyleValue.h>
+#include <LibWeb/CSS/StyleValues/FontStyleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridAutoFlowStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridTemplateAreaStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.h>
@@ -2114,4 +2115,9 @@ Percentage ComputedProperties::font_width() const
     return property(PropertyID::FontWidth).as_percentage().percentage();
 }
 
+int ComputedProperties::font_slope() const
+{
+    return property(PropertyID::FontStyle).as_font_style().to_font_slope();
+}
+
 }
diff --git a/Libraries/LibWeb/CSS/ComputedProperties.h b/Libraries/LibWeb/CSS/ComputedProperties.h
@@ -236,6 +236,7 @@ class WEB_API ComputedProperties final : public JS::Cell {
     [[nodiscard]] CSSPixels font_size() const;
     double font_weight() const;
     Percentage font_width() const;
+    int font_slope() const;
 
     bool operator==(ComputedProperties const&) const;
 
diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -1078,6 +1078,9 @@ void StyleComputer::collect_animation_into(DOM::AbstractElement abstract_element
         if (auto const& font_width_specified_value = specified_values.get(PropertyID::FontWidth); font_width_specified_value.has_value())
             result.set(PropertyID::FontWidth, compute_font_width(*font_width_specified_value.value(), parent_length_resolution_context));
 
+        if (auto const& font_style_specified_value = specified_values.get(PropertyID::FontStyle); font_style_specified_value.has_value())
+            result.set(PropertyID::FontStyle, compute_font_style(*font_style_specified_value.value(), parent_length_resolution_context));
+
         PropertyValueComputationContext property_value_computation_context {
             .length_resolution_context = {
                 .viewport_rect = viewport_rect(),
@@ -1849,16 +1852,14 @@ CSSPixels StyleComputer::relative_size_mapping(RelativeSize relative_size, CSSPi
     VERIFY_NOT_REACHED();
 }
 
-RefPtr<Gfx::FontCascadeList const> StyleComputer::compute_font_for_style_values(StyleValue const& font_family, CSSPixels const& font_size, StyleValue const& font_style, double font_weight, Percentage const& font_width) const
+RefPtr<Gfx::FontCascadeList const> StyleComputer::compute_font_for_style_values(StyleValue const& font_family, CSSPixels const& font_size, int slope, double font_weight, Percentage const& font_width) const
 {
     // FIXME: We round to int here as that is what is expected by our font infrastructure below
     auto width = round_to<int>(font_width.value());
 
     // FIXME: We round to int here as that is what is expected by our font infrastructure below
     auto weight = round_to<int>(font_weight);
 
-    auto slope = font_style.as_font_style().to_font_slope();
-
     // FIXME: Implement the full font-matching algorithm: https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm
 
     float const font_size_in_pt = font_size * 0.75f;
@@ -2002,10 +2003,16 @@ void StyleComputer::compute_font(ComputedProperties& style, Optional<DOM::Abstra
         compute_font_width(font_width_specified_value, length_resolution_context),
         style.is_property_inherited(PropertyID::FontWidth) ? ComputedProperties::Inherited::Yes : ComputedProperties::Inherited::No);
 
+    auto const& font_style_specified_value = style.property(PropertyID::FontStyle, ComputedProperties::WithAnimationsApplied::No);
+
+    style.set_property(
+        PropertyID::FontStyle,
+        compute_font_style(font_style_specified_value, length_resolution_context),
+        style.is_property_inherited(PropertyID::FontStyle) ? ComputedProperties::Inherited::Yes : ComputedProperties::Inherited::No);
+
     auto const& font_family = style.property(CSS::PropertyID::FontFamily);
-    auto const& font_style = style.property(CSS::PropertyID::FontStyle);
 
-    auto font_list = compute_font_for_style_values(font_family, style.font_size(), font_style, style.font_weight(), style.font_width());
+    auto font_list = compute_font_for_style_values(font_family, style.font_size(), style.font_slope(), style.font_weight(), style.font_width());
     VERIFY(font_list);
     VERIFY(!font_list->is_empty());
 
@@ -3261,6 +3268,25 @@ NonnullRefPtr<StyleValue const> StyleComputer::compute_font_size(NonnullRefPtr<S
     VERIFY_NOT_REACHED();
 }
 
+NonnullRefPtr<StyleValue const> StyleComputer::compute_font_style(NonnullRefPtr<StyleValue const> const& specified_value, Length::ResolutionContext const& parent_length_resolution_context)
+{
+    // https://drafts.csswg.org/css-fonts-4/#font-style-prop
+    // the keyword specified, plus angle in degrees if specified
+
+    auto const& angle_value = specified_value->as_font_style().angle();
+
+    if (!angle_value)
+        return specified_value;
+
+    if (angle_value->is_angle())
+        return FontStyleStyleValue::create(specified_value->as_font_style().font_style(), AngleStyleValue::create(Angle::make_degrees(angle_value->as_angle().angle().to_degrees())));
+
+    if (angle_value->is_calculated())
+        return FontStyleStyleValue::create(specified_value->as_font_style().font_style(), AngleStyleValue::create(angle_value->as_calculated().resolve_angle({ .length_resolution_context = parent_length_resolution_context }).value()));
+
+    VERIFY_NOT_REACHED();
+}
+
 NonnullRefPtr<StyleValue const> StyleComputer::compute_font_weight(NonnullRefPtr<StyleValue const> const& specified_value, double inherited_font_weight, Length::ResolutionContext const& parent_length_resolution_context)
 {
     // https://drafts.csswg.org/css-fonts-4/#font-weight-prop
diff --git a/Libraries/LibWeb/CSS/StyleComputer.h b/Libraries/LibWeb/CSS/StyleComputer.h
@@ -177,7 +177,7 @@ class WEB_API StyleComputer final : public GC::Cell {
     static CSSPixels default_user_font_size();
     static CSSPixels absolute_size_mapping(AbsoluteSize, CSSPixels default_font_size);
     static CSSPixels relative_size_mapping(RelativeSize, CSSPixels inherited_font_size);
-    RefPtr<Gfx::FontCascadeList const> compute_font_for_style_values(StyleValue const& font_family, CSSPixels const& font_size, StyleValue const& font_style, double font_weight, Percentage const& font_width) const;
+    RefPtr<Gfx::FontCascadeList const> compute_font_for_style_values(StyleValue const& font_family, CSSPixels const& font_size, int font_slope, double font_weight, Percentage const& font_width) const;
     [[nodiscard]] RefPtr<StyleValue const> recascade_font_size_if_needed(DOM::AbstractElement, CascadedProperties&) const;
 
     void set_viewport_rect(Badge<DOM::Document>, CSSPixelRect const& viewport_rect) { m_viewport_rect = viewport_rect; }
@@ -205,6 +205,7 @@ class WEB_API StyleComputer final : public GC::Cell {
     static NonnullRefPtr<StyleValue const> compute_value_of_property(PropertyID, NonnullRefPtr<StyleValue const> const& specified_value, Function<NonnullRefPtr<StyleValue const>(PropertyID)> const& get_property_specified_value, PropertyValueComputationContext const&);
     static NonnullRefPtr<StyleValue const> compute_border_or_outline_width(NonnullRefPtr<StyleValue const> const& specified_value, NonnullRefPtr<StyleValue const> const& style_specified_value, PropertyValueComputationContext const&);
     static NonnullRefPtr<StyleValue const> compute_font_size(NonnullRefPtr<StyleValue const> const& specified_value, int computed_math_depth, CSSPixels inherited_font_size, int inherited_math_depth, Length::ResolutionContext const& parent_length_resolution_context);
+    static NonnullRefPtr<StyleValue const> compute_font_style(NonnullRefPtr<StyleValue const> const& specified_value, Length::ResolutionContext const& parent_length_resolution_context);
     static NonnullRefPtr<StyleValue const> compute_font_weight(NonnullRefPtr<StyleValue const> const& specified_value, double inherited_font_weight, Length::ResolutionContext const& parent_length_resolution_context);
     static NonnullRefPtr<StyleValue const> compute_font_width(NonnullRefPtr<StyleValue const> const& specified_value, Length::ResolutionContext const& parent_length_resolution_context);
     static NonnullRefPtr<StyleValue const> compute_opacity(NonnullRefPtr<StyleValue const> const& specified_value, PropertyValueComputationContext const&);
diff --git a/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h b/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h
@@ -8,6 +8,7 @@
 
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/StyleComputer.h>
+#include <LibWeb/CSS/StyleValues/FontStyleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
 #include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
@@ -128,11 +129,12 @@ class CanvasTextDrawingStyles {
                 auto const& computed_font_size = CSS::StyleComputer::compute_font_size(font_size, computed_math_depth, inherited_font_size, inherited_math_depth, length_resolution_context);
                 auto const& computed_font_weight = CSS::StyleComputer::compute_font_weight(font_weight, inherited_font_weight, length_resolution_context);
                 auto const& computed_font_width = CSS::StyleComputer::compute_font_width(font_width, length_resolution_context);
+                auto const& computed_font_style = CSS::StyleComputer::compute_font_style(font_style, length_resolution_context);
 
                 return document->style_computer().compute_font_for_style_values(
                     font_family,
                     computed_font_size->as_length().length().absolute_length_to_px(),
-                    font_style,
+                    computed_font_style->as_font_style().to_font_slope(),
                     computed_font_weight->as_number().number(),
                     computed_font_width->as_percentage().percentage());
             },
diff --git a/Tests/LibWeb/Text/expected/css/computed-font-style-with-relative-lengths-in-calc.txt b/Tests/LibWeb/Text/expected/css/computed-font-style-with-relative-lengths-in-calc.txt
@@ -1 +1 @@
-oblique calc(57.29578deg * sign(1em - 1px))
+oblique 57.29578deg
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-fonts/variations/font-style-parsing.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-fonts/variations/font-style-parsing.txt
@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 43 tests
 
-40 Pass
-3 Fail
+41 Pass
+2 Fail
 Pass	Font-style (supports): 'italic' is valid
 Pass	Font-style (supports): 'italic' followed by angle is invalid
 Pass	Font-style (supports): 'italic' followed by non-number is invalid
@@ -46,4 +46,4 @@ Pass	Font-style (computed): 'oblique' followed by positive angle is valid
 Pass	Font-style (computed): 'oblique' followed by calc is valid
 Fail	Font-style (computed): 'oblique' followed by calc is valid even if it must be clamped (no computation)
 Fail	Font-style (computed): 'oblique' followed by calc is valid even if it must be clamped (with computation)
-Fail	Font-style (computed): 'oblique' followed by calc is valid even if it mixes units (with computation)
+Pass	Font-style (computed): 'oblique' followed by calc is valid even if it mixes units (with computation)

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-oblique calc(57.29578deg * sign(1em - 1px))`
	`1`	`+oblique 57.29578deg`