LibWeb: Don't resolve colors with unresolved components

`CSSColorValue`s which have unresolved `calc` components should be able
to be resolved. Previously we would always resolve them but with
incorrect values.

This is useful as we will now be able to now whether we should serialize
colors in their normalized form or not.

Slight regression in that we now serialize (RGB, HSL and HWB) colors
with components that rely on compute-time information as an empty
string, but that will be fixed in the next commit.
This commit is contained in:
Callum Law 2025-07-03 12:59:24 +12:00 committed by Sam Atkins
commit 6a9c8d7767
Notes: github-actions[bot] 2025-07-16 12:06:47 +00:00
30 changed files with 278 additions and 129 deletions

View file

@ -26,14 +26,17 @@ bool CSSLabLike::equals(CSSStyleValue const& other) const
return m_properties == other_lab_like.m_properties;
}
Color CSSOKLab::to_color(Optional<Layout::NodeWithStyle const&>, CalculationResolutionContext const& resolution_context) const
Optional<Color> CSSOKLab::to_color(Optional<Layout::NodeWithStyle const&>, CalculationResolutionContext const& resolution_context) const
{
auto const l_val = clamp(resolve_with_reference_value(m_properties.l, 1.0, resolution_context).value_or(0), 0, 1);
auto const a_val = resolve_with_reference_value(m_properties.a, 0.4, resolution_context).value_or(0);
auto const b_val = resolve_with_reference_value(m_properties.b, 0.4, resolution_context).value_or(0);
auto const alpha_val = resolve_alpha(m_properties.alpha, resolution_context).value_or(1);
auto const l_val = resolve_with_reference_value(m_properties.l, 1.0, resolution_context);
auto const a_val = resolve_with_reference_value(m_properties.a, 0.4, resolution_context);
auto const b_val = resolve_with_reference_value(m_properties.b, 0.4, resolution_context);
auto const alpha_val = resolve_alpha(m_properties.alpha, resolution_context);
return Color::from_oklab(l_val, a_val, b_val, alpha_val);
if (!l_val.has_value() || !a_val.has_value() || !b_val.has_value() || !alpha_val.has_value())
return {};
return Color::from_oklab(clamp(l_val.value(), 0, 1), a_val.value(), b_val.value(), alpha_val.value());
}
// https://www.w3.org/TR/css-color-4/#serializing-oklab-oklch
@ -56,14 +59,17 @@ String CSSOKLab::to_string(SerializationMode mode) const
return MUST(builder.to_string());
}
Color CSSLab::to_color(Optional<Layout::NodeWithStyle const&>, CalculationResolutionContext const& resolution_context) const
Optional<Color> CSSLab::to_color(Optional<Layout::NodeWithStyle const&>, CalculationResolutionContext const& resolution_context) const
{
auto const l_val = clamp(resolve_with_reference_value(m_properties.l, 100, resolution_context).value_or(0), 0, 100);
auto const a_val = resolve_with_reference_value(m_properties.a, 125, resolution_context).value_or(0);
auto const b_val = resolve_with_reference_value(m_properties.b, 125, resolution_context).value_or(0);
auto const alpha_val = resolve_alpha(m_properties.alpha, resolution_context).value_or(1);
auto l_val = resolve_with_reference_value(m_properties.l, 100, resolution_context);
auto a_val = resolve_with_reference_value(m_properties.a, 125, resolution_context);
auto b_val = resolve_with_reference_value(m_properties.b, 125, resolution_context);
auto alpha_val = resolve_alpha(m_properties.alpha, resolution_context);
return Color::from_lab(l_val, a_val, b_val, alpha_val);
if (!l_val.has_value() || !a_val.has_value() || !b_val.has_value() || !alpha_val.has_value())
return {};
return Color::from_lab(clamp(l_val.value(), 0, 100), a_val.value(), b_val.value(), alpha_val.value());
}
// https://www.w3.org/TR/css-color-4/#serializing-lab-lch