LibWeb: Style font-variant-* css properties

Author: https://github.com/jdahlin
Commit: 1c42d6831b
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2197
Reviewed-by: https://github.com/AtkinsSJ
Reviewed-by: https://github.com/gmta ✅
Reviewed-by: https://github.com/kalenikaliaksandr
Reviewed-by: https://github.com/tcl3

Libraries/LibWeb/CSS/CSSStyleValue.cpp

@@ -495,4 +495,171 @@ int CSSStyleValue::to_font_width() const
     return width;
 }
 
+Optional<Gfx::FontVariantAlternates> CSSStyleValue::to_font_variant_alternates() const
+{
+    VERIFY(is_keyword());
+    switch (as_keyword().keyword()) {
+    case Keyword::Normal:
+        return {};
+    case Keyword::HistoricalForms:
+        return Gfx::FontVariantAlternates { .historical_forms = true };
+    default:
+        VERIFY_NOT_REACHED();
+    }
+}
+
+Optional<FontVariantCaps> CSSStyleValue::to_font_variant_caps() const
+{
+    VERIFY(is_keyword());
+    return keyword_to_font_variant_caps(as_keyword().keyword());
+}
+
+Optional<Gfx::FontVariantEastAsian> CSSStyleValue::to_font_variant_east_asian() const
+{
+    VERIFY(is_value_list());
+    auto& list = as_value_list();
+    Gfx::FontVariantEastAsian east_asian {};
+    for (auto& value : list.values()) {
+        VERIFY(value->is_keyword());
+        switch (value->as_keyword().keyword()) {
+        case Keyword::Normal:
+            return {};
+        case Keyword::Jis78:
+            east_asian.variant = Gfx::FontVariantEastAsian::Variant::Jis78;
+            break;
+        case Keyword::Jis83:
+            east_asian.variant = Gfx::FontVariantEastAsian::Variant::Jis83;
+            break;
+        case Keyword::Jis90:
+            east_asian.variant = Gfx::FontVariantEastAsian::Variant::Jis90;
+            break;
+        case Keyword::Jis04:
+            east_asian.variant = Gfx::FontVariantEastAsian::Variant::Jis04;
+            break;
+        case Keyword::Simplified:
+            east_asian.variant = Gfx::FontVariantEastAsian::Variant::Simplified;
+            break;
+        case Keyword::Traditional:
+            east_asian.variant = Gfx::FontVariantEastAsian::Variant::Traditional;
+            break;
+        case Keyword::FullWidth:
+            east_asian.width = Gfx::FontVariantEastAsian::Width::FullWidth;
+            break;
+        case Keyword::ProportionalWidth:
+            east_asian.width = Gfx::FontVariantEastAsian::Width::Proportional;
+            break;
+        case Keyword::Ruby:
+            east_asian.ruby = true;
+            break;
+        default:
+            VERIFY_NOT_REACHED();
+            break;
+        }
+    }
+    return east_asian;
+}
+
+Optional<FontVariantEmoji> CSSStyleValue::to_font_variant_emoji() const
+{
+    VERIFY(is_keyword());
+    return keyword_to_font_variant_emoji(as_keyword().keyword());
+}
+
+Optional<Gfx::FontVariantLigatures> CSSStyleValue::to_font_variant_ligatures() const
+{
+    if (!is_value_list()) {
+        return {};
+    }
+    auto const& list = as_value_list();
+    Gfx::FontVariantLigatures ligatures {};
+
+    for (auto& value : list.values()) {
+        if (!value->is_keyword())
+            continue;
+        switch (value->as_keyword().keyword()) {
+        case Keyword::Normal:
+            return {};
+        case Keyword::None:
+            ligatures.none = true;
+            return ligatures;
+        case Keyword::CommonLigatures:
+            ligatures.common = Gfx::FontVariantLigatures::Common::Common;
+            break;
+        case Keyword::NoCommonLigatures:
+            ligatures.common = Gfx::FontVariantLigatures::Common::NoCommon;
+            break;
+        case Keyword::DiscretionaryLigatures:
+            ligatures.discretionary = Gfx::FontVariantLigatures::Discretionary::Discretionary;
+            break;
+        case Keyword::NoDiscretionaryLigatures:
+            ligatures.discretionary = Gfx::FontVariantLigatures::Discretionary::NoDiscretionary;
+            break;
+        case Keyword::HistoricalLigatures:
+            ligatures.historical = Gfx::FontVariantLigatures::Historical::Historical;
+            break;
+        case Keyword::NoHistoricalLigatures:
+            ligatures.historical = Gfx::FontVariantLigatures::Historical::NoHistorical;
+            break;
+        case Keyword::Contextual:
+            ligatures.contextual = Gfx::FontVariantLigatures::Contextual::Contextual;
+            break;
+        case Keyword::NoContextual:
+            ligatures.contextual = Gfx::FontVariantLigatures::Contextual::NoContextual;
+            break;
+        default:
+            VERIFY_NOT_REACHED();
+            break;
+        }
+    }
+    return ligatures;
+}
+
+Optional<Gfx::FontVariantNumeric> CSSStyleValue::to_font_variant_numeric() const
+{
+    VERIFY(is_value_list());
+    auto& list = as_value_list();
+    Gfx::FontVariantNumeric numeric {};
+    for (auto& value : list.values()) {
+        VERIFY(value->is_keyword());
+        switch (value->as_keyword().keyword()) {
+        case Keyword::Normal:
+            return {};
+        case Keyword::Ordinal:
+            numeric.ordinal = true;
+            break;
+        case Keyword::SlashedZero:
+            numeric.slashed_zero = true;
+            break;
+        case Keyword::OldstyleNums:
+            numeric.figure = Gfx::FontVariantNumeric::Figure::Oldstyle;
+            break;
+        case Keyword::LiningNums:
+            numeric.figure = Gfx::FontVariantNumeric::Figure::Lining;
+            break;
+        case Keyword::ProportionalNums:
+            numeric.spacing = Gfx::FontVariantNumeric::Spacing::Proportional;
+            break;
+        case Keyword::TabularNums:
+            numeric.spacing = Gfx::FontVariantNumeric::Spacing::Tabular;
+            break;
+        case Keyword::DiagonalFractions:
+            numeric.fraction = Gfx::FontVariantNumeric::Fraction::Diagonal;
+            break;
+        case Keyword::StackedFractions:
+            numeric.fraction = Gfx::FontVariantNumeric::Fraction::Stacked;
+            break;
+        default:
+            VERIFY_NOT_REACHED();
+            break;
+        }
+    }
+    return numeric;
+}
+
+Optional<FontVariantPosition> CSSStyleValue::to_font_variant_position() const
+{
+    VERIFY(is_keyword());
+    return keyword_to_font_variant_position(as_keyword().keyword());
+}
+
 }

Libraries/LibWeb/CSS/CSSStyleValue.h

@@ -20,6 +20,7 @@
 #include <AK/Vector.h>
 #include <AK/WeakPtr.h>
 #include <LibGfx/Color.h>
+#include <LibGfx/Font/FontVariant.h>
 #include <LibURL/URL.h>
 #include <LibWeb/CSS/Enums.h>
 #include <LibWeb/CSS/Keyword.h>
@@ -104,6 +105,7 @@ public:
         Edge,
         FilterValueList,
         Flex,
+        FontVariant,
         Frequency,
         GridAutoFlow,
         GridTemplateArea,
@@ -370,6 +372,13 @@ public:
     [[nodiscard]] int to_font_weight() const;
     [[nodiscard]] int to_font_slope() const;
     [[nodiscard]] int to_font_width() const;
+    [[nodiscard]] Optional<Gfx::FontVariantAlternates> to_font_variant_alternates() const;
+    [[nodiscard]] Optional<FontVariantCaps> to_font_variant_caps() const;
+    [[nodiscard]] Optional<Gfx::FontVariantEastAsian> to_font_variant_east_asian() const;
+    [[nodiscard]] Optional<FontVariantEmoji> to_font_variant_emoji() const;
+    [[nodiscard]] Optional<Gfx::FontVariantLigatures> to_font_variant_ligatures() const;
+    [[nodiscard]] Optional<Gfx::FontVariantNumeric> to_font_variant_numeric() const;
+    [[nodiscard]] Optional<FontVariantPosition> to_font_variant_position() const;
 
     virtual bool equals(CSSStyleValue const& other) const = 0;
 

Libraries/LibWeb/CSS/ComputedValues.h

@@ -97,7 +97,6 @@ public:
     static AspectRatio aspect_ratio() { return AspectRatio { true, {} }; }
     static CSSPixels font_size() { return 16; }
     static int font_weight() { return 400; }
-    static CSS::FontVariant font_variant() { return CSS::FontVariant::Normal; }
     static CSSPixels line_height() { return 0; }
     static CSS::Float float_() { return CSS::Float::None; }
     static CSS::Length border_spacing() { return CSS::Length::make_px(0); }
@@ -515,7 +514,13 @@ public:
     Gfx::FontCascadeList const& font_list() const { return *m_inherited.font_list; }
     CSSPixels font_size() const { return m_inherited.font_size; }
     int font_weight() const { return m_inherited.font_weight; }
-    CSS::FontVariant font_variant() const { return m_inherited.font_variant; }
+    Optional<Gfx::FontVariantAlternates> font_variant_alternates() const { return m_inherited.font_variant_alternates; }
+    FontVariantCaps font_variant_caps() const { return m_inherited.font_variant_caps; }
+    Optional<Gfx::FontVariantEastAsian> font_variant_east_asian() const { return m_inherited.font_variant_east_asian; }
+    FontVariantEmoji font_variant_emoji() const { return m_inherited.font_variant_emoji; }
+    Optional<Gfx::FontVariantLigatures> font_variant_ligatures() const { return m_inherited.font_variant_ligatures; }
+    Optional<Gfx::FontVariantNumeric> font_variant_numeric() const { return m_inherited.font_variant_numeric; }
+    FontVariantPosition font_variant_position() const { return m_inherited.font_variant_position; }
     Optional<FlyString> font_language_override() const { return m_inherited.font_language_override; }
     Optional<HashMap<FlyString, IntegerOrCalculated>> font_feature_settings() const { return m_inherited.font_feature_settings; }
     Optional<HashMap<FlyString, NumberOrCalculated>> font_variation_settings() const { return m_inherited.font_variation_settings; }
@@ -549,7 +554,13 @@ protected:
         RefPtr<Gfx::FontCascadeList> font_list {};
         CSSPixels font_size { InitialValues::font_size() };
         int font_weight { InitialValues::font_weight() };
-        CSS::FontVariant font_variant { InitialValues::font_variant() };
+        Optional<Gfx::FontVariantAlternates> font_variant_alternates;
+        FontVariantCaps font_variant_caps { FontVariantCaps::Normal };
+        Optional<Gfx::FontVariantEastAsian> font_variant_east_asian;
+        FontVariantEmoji font_variant_emoji { FontVariantEmoji::Normal };
+        Optional<Gfx::FontVariantLigatures> font_variant_ligatures;
+        Optional<Gfx::FontVariantNumeric> font_variant_numeric;
+        FontVariantPosition font_variant_position { FontVariantPosition::Normal };
         Optional<FlyString> font_language_override;
         Optional<HashMap<FlyString, IntegerOrCalculated>> font_feature_settings;
         Optional<HashMap<FlyString, NumberOrCalculated>> font_variation_settings;
@@ -725,7 +736,13 @@ public:
     void set_font_list(NonnullRefPtr<Gfx::FontCascadeList> font_list) { m_inherited.font_list = move(font_list); }
     void set_font_size(CSSPixels font_size) { m_inherited.font_size = font_size; }
     void set_font_weight(int font_weight) { m_inherited.font_weight = font_weight; }
-    void set_font_variant(CSS::FontVariant font_variant) { m_inherited.font_variant = font_variant; }
+    void set_font_variant_alternates(Optional<Gfx::FontVariantAlternates> font_variant_alternates) { m_inherited.font_variant_alternates = font_variant_alternates; }
+    void set_font_variant_caps(FontVariantCaps font_variant_caps) { m_inherited.font_variant_caps = font_variant_caps; }
+    void set_font_variant_east_asian(Optional<Gfx::FontVariantEastAsian> font_variant_east_asian) { m_inherited.font_variant_east_asian = font_variant_east_asian; }
+    void set_font_variant_emoji(FontVariantEmoji font_variant_emoji) { m_inherited.font_variant_emoji = font_variant_emoji; }
+    void set_font_variant_ligatures(Optional<Gfx::FontVariantLigatures> font_variant_ligatures) { m_inherited.font_variant_ligatures = font_variant_ligatures; }
+    void set_font_variant_numeric(Optional<Gfx::FontVariantNumeric> font_variant_numeric) { m_inherited.font_variant_numeric = font_variant_numeric; }
+    void set_font_variant_position(FontVariantPosition font_variant_position) { m_inherited.font_variant_position = font_variant_position; }
     void set_font_language_override(Optional<FlyString> font_language_override) { m_inherited.font_language_override = font_language_override; }
     void set_font_feature_settings(Optional<HashMap<FlyString, IntegerOrCalculated>> value) { m_inherited.font_feature_settings = move(value); }
     void set_font_variation_settings(Optional<HashMap<FlyString, NumberOrCalculated>> value) { m_inherited.font_variation_settings = move(value); }

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -2110,6 +2110,14 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
     compute_defaulted_property_value(style, element, CSS::PropertyID::FontStyle, pseudo_element);
     compute_defaulted_property_value(style, element, CSS::PropertyID::FontWeight, pseudo_element);
     compute_defaulted_property_value(style, element, CSS::PropertyID::LineHeight, pseudo_element);
+    compute_defaulted_property_value(style, element, CSS::PropertyID::FontVariant, pseudo_element);
+    compute_defaulted_property_value(style, element, CSS::PropertyID::FontVariantAlternates, pseudo_element);
+    compute_defaulted_property_value(style, element, CSS::PropertyID::FontVariantCaps, pseudo_element);
+    compute_defaulted_property_value(style, element, CSS::PropertyID::FontVariantEmoji, pseudo_element);
+    compute_defaulted_property_value(style, element, CSS::PropertyID::FontVariantEastAsian, pseudo_element);
+    compute_defaulted_property_value(style, element, CSS::PropertyID::FontVariantLigatures, pseudo_element);
+    compute_defaulted_property_value(style, element, CSS::PropertyID::FontVariantNumeric, pseudo_element);
+    compute_defaulted_property_value(style, element, CSS::PropertyID::FontVariantPosition, pseudo_element);
 
     auto const& font_family = style.property(CSS::PropertyID::FontFamily);
     auto const& font_size = style.property(CSS::PropertyID::FontSize);

Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -1173,12 +1173,6 @@ Variant<CSS::VerticalAlign, CSS::LengthPercentage> StyleProperties::vertical_ali
     VERIFY_NOT_REACHED();
 }
 
-Optional<CSS::FontVariant> StyleProperties::font_variant() const
-{
-    auto const& value = property(CSS::PropertyID::FontVariant);
-    return keyword_to_font_variant(value.to_keyword());
-}
-
 Optional<FlyString> StyleProperties::font_language_override() const
 {
     auto const& value = property(CSS::PropertyID::FontLanguageOverride);
@@ -1187,6 +1181,48 @@ Optional<FlyString> StyleProperties::font_language_override() const
     return {};
 }
 
+Optional<Gfx::FontVariantAlternates> StyleProperties::font_variant_alternates() const
+{
+    auto const& value = property(CSS::PropertyID::FontVariantAlternates);
+    return value.to_font_variant_alternates();
+}
+
+Optional<FontVariantCaps> StyleProperties::font_variant_caps() const
+{
+    auto const& value = property(CSS::PropertyID::FontVariantCaps);
+    return value.to_font_variant_caps();
+}
+
+Optional<Gfx::FontVariantEastAsian> StyleProperties::font_variant_east_asian() const
+{
+    auto const& value = property(CSS::PropertyID::FontVariantEastAsian);
+    return value.to_font_variant_east_asian();
+}
+
+Optional<FontVariantEmoji> StyleProperties::font_variant_emoji() const
+{
+    auto const& value = property(CSS::PropertyID::FontVariantEmoji);
+    return value.to_font_variant_emoji();
+}
+
+Optional<Gfx::FontVariantLigatures> StyleProperties::font_variant_ligatures() const
+{
+    auto const& value = property(CSS::PropertyID::FontVariantLigatures);
+    return value.to_font_variant_ligatures();
+}
+
+Optional<Gfx::FontVariantNumeric> StyleProperties::font_variant_numeric() const
+{
+    auto const& value = property(CSS::PropertyID::FontVariantNumeric);
+    return value.to_font_variant_numeric();
+}
+
+Optional<FontVariantPosition> StyleProperties::font_variant_position() const
+{
+    auto const& value = property(CSS::PropertyID::FontVariantPosition);
+    return value.to_font_variant_position();
+}
+
 Optional<HashMap<FlyString, IntegerOrCalculated>> StyleProperties::font_feature_settings() const
 {
     auto const& value = property(PropertyID::FontFeatureSettings);

Libraries/LibWeb/CSS/StyleProperties.h

@@ -149,7 +149,13 @@ public:
     Optional<CSS::BoxSizing> box_sizing() const;
     Optional<CSS::PointerEvents> pointer_events() const;
     Variant<CSS::VerticalAlign, CSS::LengthPercentage> vertical_align() const;
-    Optional<CSS::FontVariant> font_variant() const;
+    Optional<Gfx::FontVariantAlternates> font_variant_alternates() const;
+    Optional<FontVariantCaps> font_variant_caps() const;
+    Optional<Gfx::FontVariantEastAsian> font_variant_east_asian() const;
+    Optional<FontVariantEmoji> font_variant_emoji() const;
+    Optional<Gfx::FontVariantLigatures> font_variant_ligatures() const;
+    Optional<Gfx::FontVariantNumeric> font_variant_numeric() const;
+    Optional<FontVariantPosition> font_variant_position() const;
     Optional<FlyString> font_language_override() const;
     Optional<HashMap<FlyString, IntegerOrCalculated>> font_feature_settings() const;
     Optional<HashMap<FlyString, NumberOrCalculated>> font_variation_settings() const;

Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp

@@ -173,6 +173,102 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
             longhand(PropertyID::FontSize)->to_string(mode),
             longhand(PropertyID::LineHeight)->to_string(mode),
             longhand(PropertyID::FontFamily)->to_string(mode)));
+    case PropertyID::FontVariant: {
+        Vector<StringView> values;
+        auto ligatures_or_null = longhand(PropertyID::FontVariantLigatures)->to_font_variant_ligatures();
+        if (ligatures_or_null.has_value()) {
+            auto ligatures = ligatures_or_null.release_value();
+            if (ligatures.none) {
+                return MUST(String::formatted(""sv));
+            } else {
+                if (ligatures.common == Gfx::FontVariantLigatures::Common::Common)
+                    values.append("common-ligatures"sv);
+                else if (ligatures.common == Gfx::FontVariantLigatures::Common::NoCommon)
+                    values.append("no-common-ligatures"sv);
+                if (ligatures.discretionary == Gfx::FontVariantLigatures::Discretionary::Discretionary)
+                    values.append("discretionary-ligatures"sv);
+                else if (ligatures.discretionary == Gfx::FontVariantLigatures::Discretionary::NoDiscretionary)
+                    values.append("no-discretionary-ligatures"sv);
+                if (ligatures.historical == Gfx::FontVariantLigatures::Historical::Historical)
+                    values.append("historical-ligatures"sv);
+                else if (ligatures.historical == Gfx::FontVariantLigatures::Historical::NoHistorical)
+                    values.append("no-historical-ligatures"sv);
+                if (ligatures.contextual == Gfx::FontVariantLigatures::Contextual::Contextual)
+                    values.append("contextual"sv);
+                else if (ligatures.contextual == Gfx::FontVariantLigatures::Contextual::NoContextual)
+                    values.append("no-contextual"sv);
+            }
+        }
+
+        auto caps_or_null = longhand(PropertyID::FontVariantCaps)->to_font_variant_caps();
+        if (caps_or_null.has_value() && caps_or_null.value() != CSS::FontVariantCaps::Normal) {
+            values.append(CSS::to_string(caps_or_null.release_value()));
+        }
+
+        auto emoji_or_null = longhand(PropertyID::FontVariantEmoji)->to_font_variant_emoji();
+        if (emoji_or_null.has_value() && emoji_or_null.value() != CSS::FontVariantEmoji::Normal) {
+            values.append(CSS::to_string(emoji_or_null.release_value()));
+        }
+
+        auto alternates_or_null = longhand(PropertyID::FontVariantAlternates)->to_font_variant_alternates();
+        if (alternates_or_null.has_value())
+            values.append("historical-forms"sv);
+
+        auto numeric_or_null = longhand(PropertyID::FontVariantNumeric)->to_font_variant_numeric();
+        if (numeric_or_null.has_value()) {
+            auto numeric = numeric_or_null.release_value();
+            if (numeric.ordinal)
+                values.append("ordinal"sv);
+            if (numeric.slashed_zero)
+                values.append("slashed-zero"sv);
+            if (numeric.figure == Gfx::FontVariantNumeric::Figure::Oldstyle)
+                values.append("oldstyle-nums"sv);
+            else if (numeric.figure == Gfx::FontVariantNumeric::Figure::Lining)
+                values.append("lining-nums"sv);
+            if (numeric.spacing == Gfx::FontVariantNumeric::Spacing::Proportional)
+                values.append("proportional-nums"sv);
+            else if (numeric.spacing == Gfx::FontVariantNumeric::Spacing::Tabular)
+                values.append("tabular-nums"sv);
+            if (numeric.fraction == Gfx::FontVariantNumeric::Fraction::Diagonal)
+                values.append("diagonal-fractions"sv);
+            else if (numeric.fraction == Gfx::FontVariantNumeric::Fraction::Stacked)
+                values.append("stacked-fractions"sv);
+        }
+        auto east_asian_or_null = longhand(PropertyID::FontVariantEastAsian)->to_font_variant_east_asian();
+        if (east_asian_or_null.has_value()) {
+            auto east_asian = east_asian_or_null.release_value();
+            if (east_asian.ruby)
+                values.append("ruby"sv);
+            else {
+                if (east_asian.variant == Gfx::FontVariantEastAsian::Variant::Jis78)
+                    values.append("jis78"sv);
+                else if (east_asian.variant == Gfx::FontVariantEastAsian::Variant::Jis83)
+                    values.append("jis83"sv);
+                else if (east_asian.variant == Gfx::FontVariantEastAsian::Variant::Jis90)
+                    values.append("jis90"sv);
+                else if (east_asian.variant == Gfx::FontVariantEastAsian::Variant::Jis04)
+                    values.append("jis04"sv);
+                else if (east_asian.variant == Gfx::FontVariantEastAsian::Variant::Simplified)
+                    values.append("simplified"sv);
+                else if (east_asian.variant == Gfx::FontVariantEastAsian::Variant::Traditional)
+                    values.append("traditional"sv);
+                if (east_asian.width == Gfx::FontVariantEastAsian::Width::Proportional)
+                    values.append("proportional-width"sv);
+                else if (east_asian.width == Gfx::FontVariantEastAsian::Width::FullWidth)
+                    values.append("full-width"sv);
+            }
+        }
+        auto position_or_null = longhand(PropertyID::FontVariantPosition)->to_font_variant_position();
+        if (position_or_null.has_value() && position_or_null.value() != CSS::FontVariantPosition::Normal) {
+            values.append(CSS::to_string(position_or_null.release_value()));
+        }
+        StringBuilder builder;
+        if (values.is_empty())
+            builder.append("normal"sv);
+        else
+            builder.join(' ', values);
+        return MUST(builder.to_string());
+    }
     case PropertyID::GridArea: {
         auto& row_start = longhand(PropertyID::GridRowStart)->as_grid_track_placement();
         auto& column_start = longhand(PropertyID::GridColumnStart)->as_grid_track_placement();