mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-20 03:25:13 +00:00
LibWeb: Style font-variant-* css properties
This commit is contained in:
Johan Dahlin
Jelle Raaijmakers
parent
aabbe87628
commit
1c42d6831b
Notes:
github-actions[bot]
2024-12-17 18:08:30 +00:00
Author: https://github.com/jdahlin Commit: https://github.com/LadybirdBrowser/ladybird/commit/1c42d6831b2 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
11 changed files with 659 additions and 203 deletions
91
Libraries/LibGfx/Font/FontVariant.h
Normal file
91
Libraries/LibGfx/Font/FontVariant.h
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
/*
|
||||
* Copyright (c) 2024, Johan Dahlin <jdahlin@gmail.com>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include <AK/Optional.h>
|
||||
#include <AK/StringView.h>
|
||||
#include <AK/Vector.h>
|
||||
|
||||
#pragma once
|
||||
|
||||
namespace Gfx {
|
||||
|
||||
struct FontVariantAlternates {
|
||||
bool historical_forms { false };
|
||||
};
|
||||
|
||||
struct FontVariantEastAsian {
|
||||
enum class Variant {
|
||||
Unset,
|
||||
Jis78,
|
||||
Jis83,
|
||||
Jis90,
|
||||
Jis04,
|
||||
Simplified,
|
||||
Traditional
|
||||
};
|
||||
enum class Width {
|
||||
Unset,
|
||||
Proportional,
|
||||
FullWidth
|
||||
};
|
||||
|
||||
bool ruby = false;
|
||||
Variant variant { Variant::Unset };
|
||||
Width width { Width::Unset };
|
||||
};
|
||||
|
||||
struct FontVariantLigatures {
|
||||
enum class Common {
|
||||
Unset,
|
||||
Common,
|
||||
NoCommon
|
||||
};
|
||||
enum class Discretionary {
|
||||
Unset,
|
||||
Discretionary,
|
||||
NoDiscretionary
|
||||
};
|
||||
enum class Historical {
|
||||
Unset,
|
||||
Historical,
|
||||
NoHistorical
|
||||
};
|
||||
enum class Contextual {
|
||||
Unset,
|
||||
Contextual,
|
||||
NoContextual
|
||||
};
|
||||
bool none = false;
|
||||
Common common { Common::Unset };
|
||||
Discretionary discretionary { Discretionary::Unset };
|
||||
Historical historical { Historical::Unset };
|
||||
Contextual contextual { Contextual::Unset };
|
||||
};
|
||||
|
||||
struct FontVariantNumeric {
|
||||
enum class Figure {
|
||||
Unset,
|
||||
Lining,
|
||||
Oldstyle
|
||||
};
|
||||
enum class Spacing {
|
||||
Unset,
|
||||
Proportional,
|
||||
Tabular
|
||||
};
|
||||
enum class Fraction {
|
||||
Unset,
|
||||
Diagonal,
|
||||
Stacked
|
||||
};
|
||||
bool ordinal = false;
|
||||
bool slashed_zero = false;
|
||||
Figure figure { Figure::Unset };
|
||||
Spacing spacing { Spacing::Unset };
|
||||
Fraction fraction { Fraction::Unset };
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -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());
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
|
||||
'cssText': ''
|
||||
'length': '206'
|
||||
'length': '212'
|
||||
'parentRule': 'null'
|
||||
'cssFloat': 'none'
|
||||
'WebkitAlignContent': 'normal'
|
||||
|
|
@ -305,6 +305,20 @@ All supported properties and their default values exposed from CSSStyleDeclarati
|
|||
'font-style': 'normal'
|
||||
'fontVariant': 'normal'
|
||||
'font-variant': 'normal'
|
||||
'fontVariantAlternates': 'normal'
|
||||
'font-variant-alternates': 'normal'
|
||||
'fontVariantCaps': 'normal'
|
||||
'font-variant-caps': 'normal'
|
||||
'fontVariantEastAsian': 'normal'
|
||||
'font-variant-east-asian': 'normal'
|
||||
'fontVariantEmoji': 'normal'
|
||||
'font-variant-emoji': 'normal'
|
||||
'fontVariantLigatures': 'normal'
|
||||
'font-variant-ligatures': 'normal'
|
||||
'fontVariantNumeric': 'normal'
|
||||
'font-variant-numeric': 'normal'
|
||||
'fontVariantPosition': 'normal'
|
||||
'font-variant-position': 'normal'
|
||||
'fontVariationSettings': 'normal'
|
||||
'font-variation-settings': 'normal'
|
||||
'fontWeight': '400'
|
||||
|
|
|
|||
|
|
@ -17,195 +17,201 @@ All properties associated with getComputedStyle(document.body):
|
|||
"14": "font-language-override",
|
||||
"15": "font-size",
|
||||
"16": "font-style",
|
||||
"17": "font-variant",
|
||||
"18": "font-variation-settings",
|
||||
"19": "font-weight",
|
||||
"20": "font-width",
|
||||
"21": "image-rendering",
|
||||
"22": "letter-spacing",
|
||||
"23": "line-height",
|
||||
"24": "list-style-image",
|
||||
"25": "list-style-position",
|
||||
"26": "list-style-type",
|
||||
"27": "math-depth",
|
||||
"28": "math-shift",
|
||||
"29": "math-style",
|
||||
"30": "pointer-events",
|
||||
"31": "quotes",
|
||||
"32": "stroke",
|
||||
"33": "stroke-dasharray",
|
||||
"34": "stroke-dashoffset",
|
||||
"35": "stroke-linecap",
|
||||
"36": "stroke-linejoin",
|
||||
"37": "stroke-miterlimit",
|
||||
"38": "stroke-opacity",
|
||||
"39": "stroke-width",
|
||||
"40": "tab-size",
|
||||
"41": "text-align",
|
||||
"42": "text-anchor",
|
||||
"43": "text-decoration-line",
|
||||
"44": "text-indent",
|
||||
"45": "text-justify",
|
||||
"46": "text-shadow",
|
||||
"47": "text-transform",
|
||||
"48": "visibility",
|
||||
"49": "white-space",
|
||||
"50": "word-break",
|
||||
"51": "word-spacing",
|
||||
"52": "word-wrap",
|
||||
"53": "writing-mode",
|
||||
"54": "align-content",
|
||||
"55": "align-items",
|
||||
"56": "align-self",
|
||||
"57": "animation-delay",
|
||||
"58": "animation-direction",
|
||||
"59": "animation-duration",
|
||||
"60": "animation-fill-mode",
|
||||
"61": "animation-iteration-count",
|
||||
"62": "animation-name",
|
||||
"63": "animation-play-state",
|
||||
"64": "animation-timing-function",
|
||||
"65": "appearance",
|
||||
"66": "aspect-ratio",
|
||||
"67": "backdrop-filter",
|
||||
"68": "background-attachment",
|
||||
"69": "background-clip",
|
||||
"70": "background-color",
|
||||
"71": "background-image",
|
||||
"72": "background-origin",
|
||||
"73": "background-position-x",
|
||||
"74": "background-position-y",
|
||||
"75": "background-repeat",
|
||||
"76": "background-size",
|
||||
"77": "border-bottom-color",
|
||||
"78": "border-bottom-left-radius",
|
||||
"79": "border-bottom-right-radius",
|
||||
"80": "border-bottom-style",
|
||||
"81": "border-bottom-width",
|
||||
"82": "border-left-color",
|
||||
"83": "border-left-style",
|
||||
"84": "border-left-width",
|
||||
"85": "border-right-color",
|
||||
"86": "border-right-style",
|
||||
"87": "border-right-width",
|
||||
"88": "border-top-color",
|
||||
"89": "border-top-left-radius",
|
||||
"90": "border-top-right-radius",
|
||||
"91": "border-top-style",
|
||||
"92": "border-top-width",
|
||||
"93": "bottom",
|
||||
"94": "box-shadow",
|
||||
"95": "box-sizing",
|
||||
"96": "clear",
|
||||
"97": "clip",
|
||||
"98": "clip-path",
|
||||
"99": "column-count",
|
||||
"100": "column-gap",
|
||||
"101": "column-span",
|
||||
"102": "column-width",
|
||||
"103": "content",
|
||||
"104": "content-visibility",
|
||||
"105": "counter-increment",
|
||||
"106": "counter-reset",
|
||||
"107": "counter-set",
|
||||
"108": "cx",
|
||||
"109": "cy",
|
||||
"110": "display",
|
||||
"111": "filter",
|
||||
"112": "flex-basis",
|
||||
"113": "flex-direction",
|
||||
"114": "flex-grow",
|
||||
"115": "flex-shrink",
|
||||
"116": "flex-wrap",
|
||||
"117": "float",
|
||||
"118": "grid-auto-columns",
|
||||
"119": "grid-auto-flow",
|
||||
"120": "grid-auto-rows",
|
||||
"121": "grid-column-end",
|
||||
"122": "grid-column-start",
|
||||
"123": "grid-row-end",
|
||||
"124": "grid-row-start",
|
||||
"125": "grid-template-areas",
|
||||
"126": "grid-template-columns",
|
||||
"127": "grid-template-rows",
|
||||
"128": "height",
|
||||
"129": "inline-size",
|
||||
"130": "inset-block-end",
|
||||
"131": "inset-block-start",
|
||||
"132": "inset-inline-end",
|
||||
"133": "inset-inline-start",
|
||||
"134": "justify-content",
|
||||
"135": "justify-items",
|
||||
"136": "justify-self",
|
||||
"137": "left",
|
||||
"138": "margin-block-end",
|
||||
"139": "margin-block-start",
|
||||
"140": "margin-bottom",
|
||||
"141": "margin-inline-end",
|
||||
"142": "margin-inline-start",
|
||||
"143": "margin-left",
|
||||
"144": "margin-right",
|
||||
"145": "margin-top",
|
||||
"146": "mask",
|
||||
"147": "mask-image",
|
||||
"148": "mask-type",
|
||||
"149": "max-height",
|
||||
"150": "max-inline-size",
|
||||
"151": "max-width",
|
||||
"152": "min-height",
|
||||
"153": "min-inline-size",
|
||||
"154": "min-width",
|
||||
"155": "object-fit",
|
||||
"156": "object-position",
|
||||
"157": "opacity",
|
||||
"158": "order",
|
||||
"159": "outline-color",
|
||||
"160": "outline-offset",
|
||||
"161": "outline-style",
|
||||
"162": "outline-width",
|
||||
"163": "overflow-x",
|
||||
"164": "overflow-y",
|
||||
"165": "padding-block-end",
|
||||
"166": "padding-block-start",
|
||||
"167": "padding-bottom",
|
||||
"168": "padding-inline-end",
|
||||
"169": "padding-inline-start",
|
||||
"170": "padding-left",
|
||||
"171": "padding-right",
|
||||
"172": "padding-top",
|
||||
"173": "position",
|
||||
"174": "r",
|
||||
"175": "right",
|
||||
"176": "rotate",
|
||||
"177": "row-gap",
|
||||
"178": "rx",
|
||||
"179": "ry",
|
||||
"180": "scale",
|
||||
"181": "scrollbar-gutter",
|
||||
"182": "scrollbar-width",
|
||||
"183": "stop-color",
|
||||
"184": "stop-opacity",
|
||||
"185": "table-layout",
|
||||
"186": "text-decoration-color",
|
||||
"187": "text-decoration-style",
|
||||
"188": "text-decoration-thickness",
|
||||
"189": "text-overflow",
|
||||
"190": "top",
|
||||
"191": "transform",
|
||||
"192": "transform-box",
|
||||
"193": "transform-origin",
|
||||
"194": "transition-delay",
|
||||
"195": "transition-duration",
|
||||
"196": "transition-property",
|
||||
"197": "transition-timing-function",
|
||||
"198": "translate",
|
||||
"199": "unicode-bidi",
|
||||
"200": "user-select",
|
||||
"201": "vertical-align",
|
||||
"202": "width",
|
||||
"203": "x",
|
||||
"204": "y",
|
||||
"205": "z-index"
|
||||
"17": "font-variant-alternates",
|
||||
"18": "font-variant-caps",
|
||||
"19": "font-variant-east-asian",
|
||||
"20": "font-variant-emoji",
|
||||
"21": "font-variant-ligatures",
|
||||
"22": "font-variant-numeric",
|
||||
"23": "font-variant-position",
|
||||
"24": "font-variation-settings",
|
||||
"25": "font-weight",
|
||||
"26": "font-width",
|
||||
"27": "image-rendering",
|
||||
"28": "letter-spacing",
|
||||
"29": "line-height",
|
||||
"30": "list-style-image",
|
||||
"31": "list-style-position",
|
||||
"32": "list-style-type",
|
||||
"33": "math-depth",
|
||||
"34": "math-shift",
|
||||
"35": "math-style",
|
||||
"36": "pointer-events",
|
||||
"37": "quotes",
|
||||
"38": "stroke",
|
||||
"39": "stroke-dasharray",
|
||||
"40": "stroke-dashoffset",
|
||||
"41": "stroke-linecap",
|
||||
"42": "stroke-linejoin",
|
||||
"43": "stroke-miterlimit",
|
||||
"44": "stroke-opacity",
|
||||
"45": "stroke-width",
|
||||
"46": "tab-size",
|
||||
"47": "text-align",
|
||||
"48": "text-anchor",
|
||||
"49": "text-decoration-line",
|
||||
"50": "text-indent",
|
||||
"51": "text-justify",
|
||||
"52": "text-shadow",
|
||||
"53": "text-transform",
|
||||
"54": "visibility",
|
||||
"55": "white-space",
|
||||
"56": "word-break",
|
||||
"57": "word-spacing",
|
||||
"58": "word-wrap",
|
||||
"59": "writing-mode",
|
||||
"60": "align-content",
|
||||
"61": "align-items",
|
||||
"62": "align-self",
|
||||
"63": "animation-delay",
|
||||
"64": "animation-direction",
|
||||
"65": "animation-duration",
|
||||
"66": "animation-fill-mode",
|
||||
"67": "animation-iteration-count",
|
||||
"68": "animation-name",
|
||||
"69": "animation-play-state",
|
||||
"70": "animation-timing-function",
|
||||
"71": "appearance",
|
||||
"72": "aspect-ratio",
|
||||
"73": "backdrop-filter",
|
||||
"74": "background-attachment",
|
||||
"75": "background-clip",
|
||||
"76": "background-color",
|
||||
"77": "background-image",
|
||||
"78": "background-origin",
|
||||
"79": "background-position-x",
|
||||
"80": "background-position-y",
|
||||
"81": "background-repeat",
|
||||
"82": "background-size",
|
||||
"83": "border-bottom-color",
|
||||
"84": "border-bottom-left-radius",
|
||||
"85": "border-bottom-right-radius",
|
||||
"86": "border-bottom-style",
|
||||
"87": "border-bottom-width",
|
||||
"88": "border-left-color",
|
||||
"89": "border-left-style",
|
||||
"90": "border-left-width",
|
||||
"91": "border-right-color",
|
||||
"92": "border-right-style",
|
||||
"93": "border-right-width",
|
||||
"94": "border-top-color",
|
||||
"95": "border-top-left-radius",
|
||||
"96": "border-top-right-radius",
|
||||
"97": "border-top-style",
|
||||
"98": "border-top-width",
|
||||
"99": "bottom",
|
||||
"100": "box-shadow",
|
||||
"101": "box-sizing",
|
||||
"102": "clear",
|
||||
"103": "clip",
|
||||
"104": "clip-path",
|
||||
"105": "column-count",
|
||||
"106": "column-gap",
|
||||
"107": "column-span",
|
||||
"108": "column-width",
|
||||
"109": "content",
|
||||
"110": "content-visibility",
|
||||
"111": "counter-increment",
|
||||
"112": "counter-reset",
|
||||
"113": "counter-set",
|
||||
"114": "cx",
|
||||
"115": "cy",
|
||||
"116": "display",
|
||||
"117": "filter",
|
||||
"118": "flex-basis",
|
||||
"119": "flex-direction",
|
||||
"120": "flex-grow",
|
||||
"121": "flex-shrink",
|
||||
"122": "flex-wrap",
|
||||
"123": "float",
|
||||
"124": "grid-auto-columns",
|
||||
"125": "grid-auto-flow",
|
||||
"126": "grid-auto-rows",
|
||||
"127": "grid-column-end",
|
||||
"128": "grid-column-start",
|
||||
"129": "grid-row-end",
|
||||
"130": "grid-row-start",
|
||||
"131": "grid-template-areas",
|
||||
"132": "grid-template-columns",
|
||||
"133": "grid-template-rows",
|
||||
"134": "height",
|
||||
"135": "inline-size",
|
||||
"136": "inset-block-end",
|
||||
"137": "inset-block-start",
|
||||
"138": "inset-inline-end",
|
||||
"139": "inset-inline-start",
|
||||
"140": "justify-content",
|
||||
"141": "justify-items",
|
||||
"142": "justify-self",
|
||||
"143": "left",
|
||||
"144": "margin-block-end",
|
||||
"145": "margin-block-start",
|
||||
"146": "margin-bottom",
|
||||
"147": "margin-inline-end",
|
||||
"148": "margin-inline-start",
|
||||
"149": "margin-left",
|
||||
"150": "margin-right",
|
||||
"151": "margin-top",
|
||||
"152": "mask",
|
||||
"153": "mask-image",
|
||||
"154": "mask-type",
|
||||
"155": "max-height",
|
||||
"156": "max-inline-size",
|
||||
"157": "max-width",
|
||||
"158": "min-height",
|
||||
"159": "min-inline-size",
|
||||
"160": "min-width",
|
||||
"161": "object-fit",
|
||||
"162": "object-position",
|
||||
"163": "opacity",
|
||||
"164": "order",
|
||||
"165": "outline-color",
|
||||
"166": "outline-offset",
|
||||
"167": "outline-style",
|
||||
"168": "outline-width",
|
||||
"169": "overflow-x",
|
||||
"170": "overflow-y",
|
||||
"171": "padding-block-end",
|
||||
"172": "padding-block-start",
|
||||
"173": "padding-bottom",
|
||||
"174": "padding-inline-end",
|
||||
"175": "padding-inline-start",
|
||||
"176": "padding-left",
|
||||
"177": "padding-right",
|
||||
"178": "padding-top",
|
||||
"179": "position",
|
||||
"180": "r",
|
||||
"181": "right",
|
||||
"182": "rotate",
|
||||
"183": "row-gap",
|
||||
"184": "rx",
|
||||
"185": "ry",
|
||||
"186": "scale",
|
||||
"187": "scrollbar-gutter",
|
||||
"188": "scrollbar-width",
|
||||
"189": "stop-color",
|
||||
"190": "stop-opacity",
|
||||
"191": "table-layout",
|
||||
"192": "text-decoration-color",
|
||||
"193": "text-decoration-style",
|
||||
"194": "text-decoration-thickness",
|
||||
"195": "text-overflow",
|
||||
"196": "top",
|
||||
"197": "transform",
|
||||
"198": "transform-box",
|
||||
"199": "transform-origin",
|
||||
"200": "transition-delay",
|
||||
"201": "transition-duration",
|
||||
"202": "transition-property",
|
||||
"203": "transition-timing-function",
|
||||
"204": "translate",
|
||||
"205": "unicode-bidi",
|
||||
"206": "user-select",
|
||||
"207": "vertical-align",
|
||||
"208": "width",
|
||||
"209": "x",
|
||||
"210": "y",
|
||||
"211": "z-index"
|
||||
}
|
||||
All properties associated with document.body.style by default:
|
||||
{}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,13 @@ font-feature-settings: normal
|
|||
font-language-override: normal
|
||||
font-size: 16px
|
||||
font-style: normal
|
||||
font-variant: normal
|
||||
font-variant-alternates: normal
|
||||
font-variant-caps: normal
|
||||
font-variant-east-asian: normal
|
||||
font-variant-emoji: normal
|
||||
font-variant-ligatures: normal
|
||||
font-variant-numeric: normal
|
||||
font-variant-position: normal
|
||||
font-variation-settings: normal
|
||||
font-weight: 400
|
||||
font-width: normal
|
||||
|
|
@ -126,7 +132,7 @@ grid-row-start: auto
|
|||
grid-template-areas: none
|
||||
grid-template-columns: auto
|
||||
grid-template-rows: auto
|
||||
height: 2176px
|
||||
height: 2278px
|
||||
inline-size: auto
|
||||
inset-block-end: auto
|
||||
inset-block-start: auto
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue