mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-24 13:35:12 +00:00
LibWeb: Implement serialization of lch-like color values
This commit is contained in:
Tim Ledbetter
Andreas Kling
parent
5074d90888
commit
e860dd4f65
Notes:
github-actions[bot]
2025-04-20 16:45:02 +00:00
Author: https://github.com/tcl3 Commit: https://github.com/LadybirdBrowser/ladybird/commit/e860dd4f65b Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4403 Reviewed-by: https://github.com/shannonbooth
4 changed files with 131 additions and 89 deletions
|
|
@ -8,6 +8,7 @@
|
|||
*/
|
||||
|
||||
#include "CSSColorValue.h"
|
||||
#include <LibJS/Runtime/AbstractOperations.h>
|
||||
#include <LibWeb/CSS/Serialize.h>
|
||||
#include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
|
||||
|
|
@ -33,7 +34,7 @@ Optional<double> CSSColorValue::resolve_hue(CSSStyleValue const& style_value)
|
|||
{
|
||||
// <number> | <angle> | none
|
||||
auto normalized = [](double number) {
|
||||
return fmod(number, 360.0);
|
||||
return JS::modulo(number, 360.0);
|
||||
};
|
||||
|
||||
if (style_value.is_number())
|
||||
|
|
@ -146,4 +147,17 @@ void CSSColorValue::serialize_alpha_component(StringBuilder& builder, Serializat
|
|||
builder.appendff("{}", resolved_value);
|
||||
}
|
||||
|
||||
void CSSColorValue::serialize_hue_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;
|
||||
}
|
||||
builder.appendff("{:.4}", resolve_hue(component).value_or(0));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ protected:
|
|||
|
||||
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;
|
||||
void serialize_hue_component(StringBuilder& builder, SerializationMode mode, CSSStyleValue const& component) const;
|
||||
|
||||
ColorType m_color_type;
|
||||
ColorSyntax m_color_syntax;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
* Copyright (c) 2024, Sam Atkins <sam@ladybird.org>
|
||||
* Copyright (c) 2025, Tim Ledbetter <tim.ledbetter@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
|
@ -8,6 +9,7 @@
|
|||
#include <AK/Math.h>
|
||||
#include <AK/TypeCasts.h>
|
||||
#include <LibWeb/CSS/Serialize.h>
|
||||
#include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/CalculatedStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
|
||||
|
|
@ -36,10 +38,23 @@ Color CSSLCH::to_color(Optional<Layout::NodeWithStyle const&>) const
|
|||
}
|
||||
|
||||
// https://www.w3.org/TR/css-color-4/#serializing-lab-lch
|
||||
String CSSLCH::to_string(SerializationMode) const
|
||||
String CSSLCH::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("lch("sv);
|
||||
serialize_color_component(builder, mode, m_properties.l, 100, 0, 100);
|
||||
builder.append(' ');
|
||||
serialize_color_component(builder, mode, m_properties.c, 150, 0, 230);
|
||||
builder.append(' ');
|
||||
serialize_hue_component(builder, mode, m_properties.h);
|
||||
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 CSSOKLCH::to_color(Optional<Layout::NodeWithStyle const&>) const
|
||||
|
|
@ -53,10 +68,23 @@ Color CSSOKLCH::to_color(Optional<Layout::NodeWithStyle const&>) const
|
|||
}
|
||||
|
||||
// https://www.w3.org/TR/css-color-4/#serializing-oklab-oklch
|
||||
String CSSOKLCH::to_string(SerializationMode) const
|
||||
String CSSOKLCH::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("oklch("sv);
|
||||
serialize_color_component(builder, mode, m_properties.l, 1.0f, 0, 1);
|
||||
builder.append(' ');
|
||||
serialize_color_component(builder, mode, m_properties.c, 0.4f, 0, 2.3);
|
||||
builder.append(' ');
|
||||
serialize_hue_component(builder, mode, m_properties.h);
|
||||
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());
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@ Harness status: OK
|
|||
|
||||
Found 150 tests
|
||||
|
||||
70 Pass
|
||||
80 Fail
|
||||
150 Pass
|
||||
Pass e.style['color'] = "lab(0 0 0)" should set the property value
|
||||
Pass e.style['color'] = "lab(0 0 0 / 1)" should set the property value
|
||||
Pass e.style['color'] = "lab(0 0 0 / 0.5)" should set the property value
|
||||
|
|
@ -70,87 +69,87 @@ Pass e.style['color'] = "oklab(0.5 calc(infinity) 0)" should set the property va
|
|||
Pass e.style['color'] = "oklab(0.5 calc(-infinity) 0)" should set the property value
|
||||
Pass e.style['color'] = "oklab(calc(NaN) 0 0)" should set the property value
|
||||
Pass e.style['color'] = "oklab(calc(0 / 0) 0 0)" should set the property value
|
||||
Fail e.style['color'] = "lch(0 0 0deg)" should set the property value
|
||||
Fail e.style['color'] = "lch(0 0 0deg / 1)" should set the property value
|
||||
Fail e.style['color'] = "lch(0 0 0deg / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "lch(100 230 0deg / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "lch(20 50 20deg/0.5)" should set the property value
|
||||
Fail e.style['color'] = "lch(20 50 20deg/50%)" should set the property value
|
||||
Fail e.style['color'] = "lch(10 20 20deg / -10%)" should set the property value
|
||||
Fail e.style['color'] = "lch(10 20 20deg / 110%)" should set the property value
|
||||
Fail e.style['color'] = "lch(10 20 1.28rad)" should set the property value
|
||||
Fail e.style['color'] = "lch(10 20 380deg)" should set the property value
|
||||
Fail e.style['color'] = "lch(10 20 -340deg)" should set the property value
|
||||
Fail e.style['color'] = "lch(10 20 740deg)" should set the property value
|
||||
Fail e.style['color'] = "lch(10 20 -700deg)" should set the property value
|
||||
Fail e.style['color'] = "lch(-40 0 0)" should set the property value
|
||||
Fail e.style['color'] = "lch(20 -20 0)" should set the property value
|
||||
Fail e.style['color'] = "lch(0 0 0 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "lch(10 20 20 / 110%)" should set the property value
|
||||
Fail e.style['color'] = "lch(10 20 -700)" should set the property value
|
||||
Fail e.style['color'] = "lch(50% 50% 20)" should set the property value
|
||||
Fail e.style['color'] = "lch(0.5 -20% -20)" should set the property value
|
||||
Fail e.style['color'] = "lch(calc(50 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))" should set the property value
|
||||
Fail e.style['color'] = "lch(calc(-50 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))" should set the property value
|
||||
Fail e.style['color'] = "lch(calc(50%) 50% 0.5)" should set the property value
|
||||
Fail e.style['color'] = "lch(200 calc(50%) 0.5)" should set the property value
|
||||
Fail e.style['color'] = "lch(-200 calc(50%) 0.5)" should set the property value
|
||||
Fail e.style['color'] = "lch(calc(50%) -100 0.5)" should set the property value
|
||||
Fail e.style['color'] = "lch(none 20 calc(0.5))" should set the property value
|
||||
Fail e.style['color'] = "lch(none none none / none)" should set the property value
|
||||
Fail e.style['color'] = "lch(none none none)" should set the property value
|
||||
Fail e.style['color'] = "lch(20 none none / none)" should set the property value
|
||||
Fail e.style['color'] = "lch(none none none / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "lch(0 0 0 / none)" should set the property value
|
||||
Fail e.style['color'] = "lch(calc(infinity) 0 0)" should set the property value
|
||||
Fail e.style['color'] = "lch(50 calc(infinity) 0)" should set the property value
|
||||
Fail e.style['color'] = "lch(50 calc(-infinity) 0)" should set the property value
|
||||
Fail e.style['color'] = "lch(calc(NaN) 0 0)" should set the property value
|
||||
Fail e.style['color'] = "lch(calc(0 / 0) 0 0)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0 0 0deg)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0 0 0deg / 1)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0 0 0deg / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(1 2.3 0deg / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.2 0.5 20deg/0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.2 0.5 20deg/50%)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.1 0.2 20deg / -10%)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.1 0.2 20deg / 110%)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.1 0.2 1.28rad)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.1 0.2 380deg)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.1 0.2 -340deg)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.1 0.2 740deg)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.1 0.2 -700deg)" should set the property value
|
||||
Fail e.style['color'] = "oklch(-4 0 0)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.2 -0.2 0)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0 0 0 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.1 0.2 20 / 110%)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.1 0.2 -700)" should set the property value
|
||||
Fail e.style['color'] = "oklch(50% 50% 20)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.5 -20% -20)" should set the property value
|
||||
Fail e.style['color'] = "oklch(calc(0.5 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))" should set the property value
|
||||
Fail e.style['color'] = "oklch(calc(-0.5 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))" should set the property value
|
||||
Fail e.style['color'] = "oklch(calc(50%) 50% 0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(200 calc(50%) 0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(-200 calc(50%) 0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(calc(50%) -100 0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(none 0.2 calc(0.5))" should set the property value
|
||||
Fail e.style['color'] = "oklch(none none none / none)" should set the property value
|
||||
Fail e.style['color'] = "oklch(none none none)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.2 none none / none)" should set the property value
|
||||
Fail e.style['color'] = "oklch(none none none / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0 0 0 / none)" should set the property value
|
||||
Fail e.style['color'] = "lch(20% 80% 10/0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(20% 60% 10/0.5)" should set the property value
|
||||
Fail e.style['color'] = "oklch(calc(infinity) 0 0)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.5 calc(infinity) 0)" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.5 calc(-infinity) 0)" should set the property value
|
||||
Fail e.style['color'] = "oklch(calc(NaN) 0 0)" should set the property value
|
||||
Fail e.style['color'] = "oklch(calc(0 / 0) 0 0)" should set the property value
|
||||
Pass e.style['color'] = "lch(0 0 0deg)" should set the property value
|
||||
Pass e.style['color'] = "lch(0 0 0deg / 1)" should set the property value
|
||||
Pass e.style['color'] = "lch(0 0 0deg / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "lch(100 230 0deg / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "lch(20 50 20deg/0.5)" should set the property value
|
||||
Pass e.style['color'] = "lch(20 50 20deg/50%)" should set the property value
|
||||
Pass e.style['color'] = "lch(10 20 20deg / -10%)" should set the property value
|
||||
Pass e.style['color'] = "lch(10 20 20deg / 110%)" should set the property value
|
||||
Pass e.style['color'] = "lch(10 20 1.28rad)" should set the property value
|
||||
Pass e.style['color'] = "lch(10 20 380deg)" should set the property value
|
||||
Pass e.style['color'] = "lch(10 20 -340deg)" should set the property value
|
||||
Pass e.style['color'] = "lch(10 20 740deg)" should set the property value
|
||||
Pass e.style['color'] = "lch(10 20 -700deg)" should set the property value
|
||||
Pass e.style['color'] = "lch(-40 0 0)" should set the property value
|
||||
Pass e.style['color'] = "lch(20 -20 0)" should set the property value
|
||||
Pass e.style['color'] = "lch(0 0 0 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "lch(10 20 20 / 110%)" should set the property value
|
||||
Pass e.style['color'] = "lch(10 20 -700)" should set the property value
|
||||
Pass e.style['color'] = "lch(50% 50% 20)" should set the property value
|
||||
Pass e.style['color'] = "lch(0.5 -20% -20)" should set the property value
|
||||
Pass e.style['color'] = "lch(calc(50 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))" should set the property value
|
||||
Pass e.style['color'] = "lch(calc(-50 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))" should set the property value
|
||||
Pass e.style['color'] = "lch(calc(50%) 50% 0.5)" should set the property value
|
||||
Pass e.style['color'] = "lch(200 calc(50%) 0.5)" should set the property value
|
||||
Pass e.style['color'] = "lch(-200 calc(50%) 0.5)" should set the property value
|
||||
Pass e.style['color'] = "lch(calc(50%) -100 0.5)" should set the property value
|
||||
Pass e.style['color'] = "lch(none 20 calc(0.5))" should set the property value
|
||||
Pass e.style['color'] = "lch(none none none / none)" should set the property value
|
||||
Pass e.style['color'] = "lch(none none none)" should set the property value
|
||||
Pass e.style['color'] = "lch(20 none none / none)" should set the property value
|
||||
Pass e.style['color'] = "lch(none none none / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "lch(0 0 0 / none)" should set the property value
|
||||
Pass e.style['color'] = "lch(calc(infinity) 0 0)" should set the property value
|
||||
Pass e.style['color'] = "lch(50 calc(infinity) 0)" should set the property value
|
||||
Pass e.style['color'] = "lch(50 calc(-infinity) 0)" should set the property value
|
||||
Pass e.style['color'] = "lch(calc(NaN) 0 0)" should set the property value
|
||||
Pass e.style['color'] = "lch(calc(0 / 0) 0 0)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0 0 0deg)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0 0 0deg / 1)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0 0 0deg / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(1 2.3 0deg / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.2 0.5 20deg/0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.2 0.5 20deg/50%)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.1 0.2 20deg / -10%)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.1 0.2 20deg / 110%)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.1 0.2 1.28rad)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.1 0.2 380deg)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.1 0.2 -340deg)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.1 0.2 740deg)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.1 0.2 -700deg)" should set the property value
|
||||
Pass e.style['color'] = "oklch(-4 0 0)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.2 -0.2 0)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0 0 0 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.1 0.2 20 / 110%)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.1 0.2 -700)" should set the property value
|
||||
Pass e.style['color'] = "oklch(50% 50% 20)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.5 -20% -20)" should set the property value
|
||||
Pass e.style['color'] = "oklch(calc(0.5 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))" should set the property value
|
||||
Pass e.style['color'] = "oklch(calc(-0.5 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))" should set the property value
|
||||
Pass e.style['color'] = "oklch(calc(50%) 50% 0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(200 calc(50%) 0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(-200 calc(50%) 0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(calc(50%) -100 0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(none 0.2 calc(0.5))" should set the property value
|
||||
Pass e.style['color'] = "oklch(none none none / none)" should set the property value
|
||||
Pass e.style['color'] = "oklch(none none none)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.2 none none / none)" should set the property value
|
||||
Pass e.style['color'] = "oklch(none none none / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0 0 0 / none)" should set the property value
|
||||
Pass e.style['color'] = "lch(20% 80% 10/0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(20% 60% 10/0.5)" should set the property value
|
||||
Pass e.style['color'] = "oklch(calc(infinity) 0 0)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.5 calc(infinity) 0)" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.5 calc(-infinity) 0)" should set the property value
|
||||
Pass e.style['color'] = "oklch(calc(NaN) 0 0)" should set the property value
|
||||
Pass e.style['color'] = "oklch(calc(0 / 0) 0 0)" should set the property value
|
||||
Pass e.style['color'] = "lab(calc(50 + (sign(1em - 10px) * 10)) 30 50 / 50%)" should set the property value
|
||||
Pass e.style['color'] = "oklab(calc(0.5 + (sign(1em - 10px) * 0.1)) 0.3 0.5 / 50%)" should set the property value
|
||||
Pass e.style['color'] = "lab(60 30 50 / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "oklab(0.6 0.3 0.5 / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "lch(calc(50 + (sign(1em - 10px) * 10)) 30 50deg / 50%)" should set the property value
|
||||
Fail e.style['color'] = "oklch(calc(0.5 + (sign(1em - 10px) * 0.1)) 0.3 50deg / 50%)" should set the property value
|
||||
Fail e.style['color'] = "lch(60 30 50deg / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "oklch(0.6 0.3 50deg / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "lch(calc(50 + (sign(1em - 10px) * 10)) 30 50deg / 50%)" should set the property value
|
||||
Pass e.style['color'] = "oklch(calc(0.5 + (sign(1em - 10px) * 0.1)) 0.3 50deg / 50%)" should set the property value
|
||||
Pass e.style['color'] = "lch(60 30 50deg / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "oklch(0.6 0.3 50deg / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Loading…
Add table
Reference in a new issue