mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-21 17:51:52 +00:00
LibWeb/CSS: Add support for the lch
color function
This makes us pass all `css/css-color/lch-00*.html` tests.
This commit is contained in:
parent
e8fc731b8c
commit
f253246a6c
Notes:
github-actions[bot]
2024-10-28 22:38:03 +00:00
Author: https://github.com/LucasChollet
Commit: f253246a6c
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2013
5 changed files with 56 additions and 1 deletions
|
@ -3385,6 +3385,26 @@ Optional<Array<RefPtr<CSSStyleValue>, 4>> Parser::parse_lch_like_color_value(Tok
|
||||||
return Array { move(l), move(c), move(h), move(alpha) };
|
return Array { move(l), move(c), move(h), move(alpha) };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// https://www.w3.org/TR/css-color-4/#funcdef-lch
|
||||||
|
RefPtr<CSSStyleValue> Parser::parse_lch_color_value(TokenStream<ComponentValue>& outer_tokens)
|
||||||
|
{
|
||||||
|
// lch() = lch( [<percentage> | <number> | none]
|
||||||
|
// [ <percentage> | <number> | none]
|
||||||
|
// [ <hue> | none]
|
||||||
|
// [ / [<alpha-value> | none] ]? )
|
||||||
|
|
||||||
|
auto maybe_color_values = parse_lch_like_color_value(outer_tokens, "lch"sv);
|
||||||
|
if (!maybe_color_values.has_value())
|
||||||
|
return {};
|
||||||
|
|
||||||
|
auto& color_values = *maybe_color_values;
|
||||||
|
|
||||||
|
return CSSLCHLike::create<CSSLCH>(color_values[0].release_nonnull(),
|
||||||
|
color_values[1].release_nonnull(),
|
||||||
|
color_values[2].release_nonnull(),
|
||||||
|
color_values[3].release_nonnull());
|
||||||
|
}
|
||||||
|
|
||||||
// https://www.w3.org/TR/css-color-4/#funcdef-oklch
|
// https://www.w3.org/TR/css-color-4/#funcdef-oklch
|
||||||
RefPtr<CSSStyleValue> Parser::parse_oklch_color_value(TokenStream<ComponentValue>& outer_tokens)
|
RefPtr<CSSStyleValue> Parser::parse_oklch_color_value(TokenStream<ComponentValue>& outer_tokens)
|
||||||
{
|
{
|
||||||
|
@ -3490,6 +3510,8 @@ RefPtr<CSSStyleValue> Parser::parse_color_value(TokenStream<ComponentValue>& tok
|
||||||
return hwb;
|
return hwb;
|
||||||
if (auto lab = parse_lab_color_value(tokens))
|
if (auto lab = parse_lab_color_value(tokens))
|
||||||
return lab;
|
return lab;
|
||||||
|
if (auto lch = parse_lch_color_value(tokens))
|
||||||
|
return lch;
|
||||||
if (auto oklab = parse_oklab_color_value(tokens))
|
if (auto oklab = parse_oklab_color_value(tokens))
|
||||||
return oklab;
|
return oklab;
|
||||||
if (auto oklch = parse_oklch_color_value(tokens))
|
if (auto oklch = parse_oklch_color_value(tokens))
|
||||||
|
|
|
@ -254,6 +254,7 @@ private:
|
||||||
RefPtr<CSSStyleValue> parse_lab_color_value(TokenStream<ComponentValue>&);
|
RefPtr<CSSStyleValue> parse_lab_color_value(TokenStream<ComponentValue>&);
|
||||||
RefPtr<CSSStyleValue> parse_oklab_color_value(TokenStream<ComponentValue>&);
|
RefPtr<CSSStyleValue> parse_oklab_color_value(TokenStream<ComponentValue>&);
|
||||||
Optional<Array<RefPtr<CSSStyleValue>, 4>> parse_lch_like_color_value(TokenStream<ComponentValue>&, StringView);
|
Optional<Array<RefPtr<CSSStyleValue>, 4>> parse_lch_like_color_value(TokenStream<ComponentValue>&, StringView);
|
||||||
|
RefPtr<CSSStyleValue> parse_lch_color_value(TokenStream<ComponentValue>&);
|
||||||
RefPtr<CSSStyleValue> parse_oklch_color_value(TokenStream<ComponentValue>&);
|
RefPtr<CSSStyleValue> parse_oklch_color_value(TokenStream<ComponentValue>&);
|
||||||
RefPtr<CSSStyleValue> parse_color_function(TokenStream<ComponentValue>&);
|
RefPtr<CSSStyleValue> parse_color_function(TokenStream<ComponentValue>&);
|
||||||
RefPtr<CSSStyleValue> parse_color_value(TokenStream<ComponentValue>&);
|
RefPtr<CSSStyleValue> parse_color_value(TokenStream<ComponentValue>&);
|
||||||
|
|
|
@ -27,6 +27,7 @@ public:
|
||||||
HSL,
|
HSL,
|
||||||
HWB,
|
HWB,
|
||||||
Lab,
|
Lab,
|
||||||
|
LCH,
|
||||||
OKLab,
|
OKLab,
|
||||||
OKLCH,
|
OKLCH,
|
||||||
XYZD50,
|
XYZD50,
|
||||||
|
|
|
@ -25,6 +25,23 @@ bool CSSLCHLike::equals(CSSStyleValue const& other) const
|
||||||
return m_properties == other_oklch_like.m_properties;
|
return m_properties == other_oklch_like.m_properties;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Color CSSLCH::to_color(Optional<Layout::NodeWithStyle const&>) const
|
||||||
|
{
|
||||||
|
auto const l_val = clamp(resolve_with_reference_value(m_properties.l, 100).value_or(0), 0, 100);
|
||||||
|
auto const c_val = resolve_with_reference_value(m_properties.c, 150).value_or(0);
|
||||||
|
auto const h_val = AK::to_radians(resolve_hue(m_properties.h).value_or(0));
|
||||||
|
auto const alpha_val = resolve_alpha(m_properties.alpha).value_or(1);
|
||||||
|
|
||||||
|
return Color::from_lab(l_val, c_val * cos(h_val), c_val * sin(h_val), alpha_val);
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://www.w3.org/TR/css-color-4/#serializing-lab-lch
|
||||||
|
String CSSLCH::to_string() const
|
||||||
|
{
|
||||||
|
// FIXME: Do this properly, taking unresolved calculated values into account.
|
||||||
|
return serialize_a_srgb_value(to_color({}));
|
||||||
|
}
|
||||||
|
|
||||||
Color CSSOKLCH::to_color(Optional<Layout::NodeWithStyle const&>) const
|
Color CSSOKLCH::to_color(Optional<Layout::NodeWithStyle const&>) const
|
||||||
{
|
{
|
||||||
auto const l_val = clamp(resolve_with_reference_value(m_properties.l, 1.0).value_or(0), 0, 1);
|
auto const l_val = clamp(resolve_with_reference_value(m_properties.l, 1.0).value_or(0), 0, 1);
|
||||||
|
|
|
@ -14,7 +14,7 @@ namespace Web::CSS {
|
||||||
class CSSLCHLike : public CSSColorValue {
|
class CSSLCHLike : public CSSColorValue {
|
||||||
public:
|
public:
|
||||||
template<DerivedFrom<CSSLCHLike> T>
|
template<DerivedFrom<CSSLCHLike> T>
|
||||||
static ValueComparingNonnullRefPtr<CSSOKLCH> create(ValueComparingNonnullRefPtr<CSSStyleValue> l, ValueComparingNonnullRefPtr<CSSStyleValue> c, ValueComparingNonnullRefPtr<CSSStyleValue> h, ValueComparingRefPtr<CSSStyleValue> alpha = {})
|
static ValueComparingNonnullRefPtr<T> create(ValueComparingNonnullRefPtr<CSSStyleValue> l, ValueComparingNonnullRefPtr<CSSStyleValue> c, ValueComparingNonnullRefPtr<CSSStyleValue> h, ValueComparingRefPtr<CSSStyleValue> alpha = {})
|
||||||
{
|
{
|
||||||
// alpha defaults to 1
|
// alpha defaults to 1
|
||||||
if (!alpha)
|
if (!alpha)
|
||||||
|
@ -47,6 +47,20 @@ protected:
|
||||||
} m_properties;
|
} m_properties;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// https://drafts.css-houdini.org/css-typed-om-1/#csslch
|
||||||
|
class CSSLCH final : public CSSLCHLike {
|
||||||
|
public:
|
||||||
|
CSSLCH(Badge<CSSLCHLike>, ValueComparingNonnullRefPtr<CSSStyleValue> l, ValueComparingNonnullRefPtr<CSSStyleValue> c, ValueComparingNonnullRefPtr<CSSStyleValue> h, ValueComparingNonnullRefPtr<CSSStyleValue> alpha)
|
||||||
|
: CSSLCHLike(ColorType::LCH, move(l), move(c), move(h), move(alpha))
|
||||||
|
{
|
||||||
|
}
|
||||||
|
virtual ~CSSLCH() override = default;
|
||||||
|
|
||||||
|
virtual Color to_color(Optional<Layout::NodeWithStyle const&>) const override;
|
||||||
|
|
||||||
|
virtual String to_string() const override;
|
||||||
|
};
|
||||||
|
|
||||||
// https://drafts.css-houdini.org/css-typed-om-1/#cssoklch
|
// https://drafts.css-houdini.org/css-typed-om-1/#cssoklch
|
||||||
class CSSOKLCH final : public CSSLCHLike {
|
class CSSOKLCH final : public CSSLCHLike {
|
||||||
public:
|
public:
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue