mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-13 03:29:49 +00:00
LibWeb: Implement serialization of lab-like color values
This commit is contained in:
parent
4d0301d2d2
commit
5074d90888
Notes:
github-actions[bot]
2025-04-20 16:45:09 +00:00
Author: https://github.com/tcl3
Commit: 5074d90888
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4403
Reviewed-by: https://github.com/shannonbooth
5 changed files with 428 additions and 6 deletions
|
@ -109,4 +109,41 @@ Optional<double> CSSColorValue::resolve_alpha(CSSStyleValue const& style_value)
|
|||
return {};
|
||||
}
|
||||
|
||||
void CSSColorValue::serialize_color_component(StringBuilder& builder, SerializationMode mode, CSSStyleValue const& component, float one_hundred_percent_value, Optional<double> clamp_min, Optional<double> clamp_max) const
|
||||
{
|
||||
if (component.to_keyword() == Keyword::None) {
|
||||
builder.append("none"sv);
|
||||
return;
|
||||
}
|
||||
if (component.is_calculated() && mode == SerializationMode::Normal) {
|
||||
builder.append(component.to_string(mode));
|
||||
return;
|
||||
}
|
||||
auto resolved_value = resolve_with_reference_value(component, one_hundred_percent_value).value_or(0);
|
||||
if (clamp_min.has_value() && resolved_value < *clamp_min)
|
||||
resolved_value = *clamp_min;
|
||||
if (clamp_max.has_value() && resolved_value > *clamp_max)
|
||||
resolved_value = *clamp_max;
|
||||
|
||||
// FIXME: Find a better way to format a decimal with trimmed trailing zeroes
|
||||
auto resolved_string = MUST(String::formatted("{:.2}", resolved_value));
|
||||
if (resolved_string.contains('.'))
|
||||
resolved_string = MUST(resolved_string.trim("0"sv, TrimMode::Right));
|
||||
builder.append(resolved_string);
|
||||
}
|
||||
|
||||
void CSSColorValue::serialize_alpha_component(StringBuilder& builder, SerializationMode mode, CSSStyleValue const& component) const
|
||||
{
|
||||
if (component.to_keyword() == Keyword::None) {
|
||||
builder.append("none"sv);
|
||||
return;
|
||||
}
|
||||
if (component.is_calculated() && mode == SerializationMode::Normal) {
|
||||
builder.append(component.to_string(mode));
|
||||
return;
|
||||
}
|
||||
auto resolved_value = resolve_alpha(component).value_or(0);
|
||||
builder.appendff("{}", resolved_value);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -61,6 +61,9 @@ protected:
|
|||
static Optional<double> resolve_with_reference_value(CSSStyleValue const&, float one_hundred_percent_value);
|
||||
static Optional<double> resolve_alpha(CSSStyleValue const&);
|
||||
|
||||
void serialize_color_component(StringBuilder& builder, SerializationMode mode, CSSStyleValue const& component, float one_hundred_percent_value, Optional<double> clamp_min = {}, Optional<double> clamp_max = {}) const;
|
||||
void serialize_alpha_component(StringBuilder& builder, SerializationMode mode, CSSStyleValue const& component) const;
|
||||
|
||||
ColorType m_color_type;
|
||||
ColorSyntax m_color_syntax;
|
||||
};
|
||||
|
|
|
@ -1,11 +1,13 @@
|
|||
/*
|
||||
* Copyright (c) 2024, Sam Atkins <sam@ladybird.org>
|
||||
* Copyright (c) 2025, Tim Ledbetter <tim.ledbetter@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include "CSSLabLike.h"
|
||||
#include <AK/TypeCasts.h>
|
||||
#include <LibWeb/CSS/CSSStyleValue.h>
|
||||
#include <LibWeb/CSS/Serialize.h>
|
||||
#include <LibWeb/CSS/StyleValues/CalculatedStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
|
||||
|
@ -35,10 +37,23 @@ Color CSSOKLab::to_color(Optional<Layout::NodeWithStyle const&>) const
|
|||
}
|
||||
|
||||
// https://www.w3.org/TR/css-color-4/#serializing-oklab-oklch
|
||||
String CSSOKLab::to_string(SerializationMode) const
|
||||
String CSSOKLab::to_string(SerializationMode mode) const
|
||||
{
|
||||
// FIXME: Do this properly, taking unresolved calculated values into account.
|
||||
return serialize_a_srgb_value(to_color({}));
|
||||
StringBuilder builder;
|
||||
builder.append("oklab("sv);
|
||||
serialize_color_component(builder, mode, m_properties.l, 1.0f, 0, 1);
|
||||
builder.append(' ');
|
||||
serialize_color_component(builder, mode, m_properties.a, 0.4f);
|
||||
builder.append(' ');
|
||||
serialize_color_component(builder, mode, m_properties.b, 0.4f);
|
||||
if ((!m_properties.alpha->is_number() || m_properties.alpha->as_number().number() < 1)
|
||||
&& (!m_properties.alpha->is_percentage() || m_properties.alpha->as_percentage().percentage().as_fraction() < 1)) {
|
||||
builder.append(" / "sv);
|
||||
serialize_alpha_component(builder, mode, m_properties.alpha);
|
||||
}
|
||||
|
||||
builder.append(')');
|
||||
return MUST(builder.to_string());
|
||||
}
|
||||
|
||||
Color CSSLab::to_color(Optional<Layout::NodeWithStyle const&>) const
|
||||
|
@ -52,10 +67,23 @@ Color CSSLab::to_color(Optional<Layout::NodeWithStyle const&>) const
|
|||
}
|
||||
|
||||
// https://www.w3.org/TR/css-color-4/#serializing-lab-lch
|
||||
String CSSLab::to_string(SerializationMode) const
|
||||
String CSSLab::to_string(SerializationMode mode) const
|
||||
{
|
||||
// FIXME: Do this properly, taking unresolved calculated values into account.
|
||||
return serialize_a_srgb_value(to_color({}));
|
||||
StringBuilder builder;
|
||||
builder.append("lab("sv);
|
||||
serialize_color_component(builder, mode, m_properties.l, 100, 0, 100);
|
||||
builder.append(' ');
|
||||
serialize_color_component(builder, mode, m_properties.a, 125);
|
||||
builder.append(' ');
|
||||
serialize_color_component(builder, mode, m_properties.b, 125);
|
||||
if ((!m_properties.alpha->is_number() || m_properties.alpha->as_number().number() < 1)
|
||||
&& (!m_properties.alpha->is_percentage() || m_properties.alpha->as_percentage().percentage().as_fraction() < 1)) {
|
||||
builder.append(" / "sv);
|
||||
serialize_alpha_component(builder, mode, m_properties.alpha);
|
||||
}
|
||||
|
||||
builder.append(')');
|
||||
return MUST(builder.to_string());
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue