mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-30 04:39:06 +00:00
LibWeb: Serialize RGB, HWB and HSL colors with unresolved components
Gains us 44 WPT passes.
This commit is contained in:
Callum Law
Sam Atkins
parent
6a9c8d7767
commit
33cf3d7782
Notes:
github-actions[bot]
2025-07-16 12:06:41 +00:00
Author: https://github.com/Calme1709
Commit: 33cf3d7782
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5305
Reviewed-by: https://github.com/AtkinsSJ ✅
6 changed files with 95 additions and 58 deletions
|
|
@ -8,6 +8,7 @@
|
|||
#include <AK/TypeCasts.h>
|
||||
#include <LibWeb/CSS/Serialize.h>
|
||||
#include <LibWeb/CSS/StyleValues/CalculatedStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
|
||||
|
||||
namespace Web::CSS {
|
||||
|
||||
|
|
@ -36,13 +37,27 @@ bool CSSHSL::equals(CSSStyleValue const& other) const
|
|||
}
|
||||
|
||||
// https://www.w3.org/TR/css-color-4/#serializing-sRGB-values
|
||||
String CSSHSL::to_string(SerializationMode) const
|
||||
String CSSHSL::to_string(SerializationMode mode) const
|
||||
{
|
||||
if (auto color = to_color({}, {}); color.has_value())
|
||||
return serialize_a_srgb_value(color.value());
|
||||
|
||||
// FIXME: Do this properly, taking unresolved calculated values into account.
|
||||
return ""_string;
|
||||
StringBuilder builder;
|
||||
|
||||
builder.append("hsl("sv);
|
||||
serialize_hue_component(builder, mode, m_properties.h);
|
||||
builder.append(" "sv);
|
||||
serialize_color_component(builder, mode, m_properties.s, 100, 0);
|
||||
builder.append(" "sv);
|
||||
serialize_color_component(builder, mode, m_properties.l, 100, 0);
|
||||
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(")"sv);
|
||||
|
||||
return builder.to_string_without_validation();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
#include <AK/TypeCasts.h>
|
||||
#include <LibWeb/CSS/Serialize.h>
|
||||
#include <LibWeb/CSS/StyleValues/CalculatedStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
|
||||
|
||||
namespace Web::CSS {
|
||||
|
||||
|
|
@ -49,13 +50,25 @@ bool CSSHWB::equals(CSSStyleValue const& other) const
|
|||
}
|
||||
|
||||
// https://www.w3.org/TR/css-color-4/#serializing-sRGB-values
|
||||
String CSSHWB::to_string(SerializationMode) const
|
||||
String CSSHWB::to_string(SerializationMode mode) const
|
||||
{
|
||||
if (auto color = to_color({}, {}); color.has_value())
|
||||
return serialize_a_srgb_value(color.value());
|
||||
|
||||
// FIXME: Do this properly, taking unresolved calculated values into account.
|
||||
return ""_string;
|
||||
StringBuilder builder;
|
||||
builder.append("hwb("sv);
|
||||
serialize_hue_component(builder, mode, m_properties.h);
|
||||
builder.append(" "sv);
|
||||
serialize_color_component(builder, mode, m_properties.w, 100, 0);
|
||||
builder.append(" "sv);
|
||||
serialize_color_component(builder, mode, m_properties.b, 100, 0);
|
||||
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(")"sv);
|
||||
|
||||
return builder.to_string_without_validation();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,8 +92,20 @@ String CSSRGB::to_string(SerializationMode mode) const
|
|||
if (auto color = to_color({}, {}); color.has_value())
|
||||
return serialize_a_srgb_value(color.value());
|
||||
|
||||
// FIXME: Do this properly, taking unresolved calculated values into account.
|
||||
return ""_string;
|
||||
StringBuilder builder;
|
||||
builder.append("rgb("sv);
|
||||
serialize_color_component(builder, mode, m_properties.r, 255, 0, 255);
|
||||
builder.append(" "sv);
|
||||
serialize_color_component(builder, mode, m_properties.g, 255, 0, 255);
|
||||
builder.append(" "sv);
|
||||
serialize_color_component(builder, mode, m_properties.b, 255, 0, 255);
|
||||
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(")"sv);
|
||||
|
||||
return builder.to_string_without_validation();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@ Harness status: OK
|
|||
|
||||
Found 59 tests
|
||||
|
||||
41 Pass
|
||||
18 Fail
|
||||
59 Pass
|
||||
Pass e.style['color'] = "hsl(120 30% 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30% 50% / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsl(none none none)" should set the property value
|
||||
|
|
@ -45,21 +44,21 @@ Pass e.style['color'] = "hsl(calc(0 / 0) 100% 50%)" should set the property valu
|
|||
Pass e.style['color'] = "hsl(90 50% 50% / calc(infinity))" should set the property value
|
||||
Pass e.style['color'] = "hsl(90 50% 50% / calc(-infinity))" should set the property value
|
||||
Pass e.style['color'] = "hsl(90 50% 50% / calc(0 / 0))" should set the property value
|
||||
Fail e.style['color'] = "hsl(calc(50deg + (sign(1em - 10px) * 10deg)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsl(calc(50 + (sign(1em - 10px) * 10)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50 + (sign(1em - 10px) * 10)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsl(0deg, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsla(0deg, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsl(0, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsla(0, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsl(calc(50deg + (sign(1em - 10px) * 10deg)) 0% 0% / 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)) 0% 0% / 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsl(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "hsl(0deg 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsla(0deg 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsl(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "hsla(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)) -100 300 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)) -100% 300% / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsl(calc(50deg + (sign(1em - 10px) * 10deg)), 0%, 0%, 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)), 0%, 0%, 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(calc(50 + (sign(1em - 10px) * 10)), 0%, 0%, 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsla(calc(50 + (sign(1em - 10px) * 10)), 0%, 0%, 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(0deg, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "hsla(0deg, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "hsl(0, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "hsla(0, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "hsl(calc(50deg + (sign(1em - 10px) * 10deg)) 0% 0% / 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)) 0% 0% / 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsla(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsl(0deg 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "hsla(0deg 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "hsl(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Pass e.style['color'] = "hsla(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Pass e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)) -100 300 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)) -100% 300% / 0.5)" should set the property value
|
||||
|
|
@ -2,8 +2,7 @@ Harness status: OK
|
|||
|
||||
Found 38 tests
|
||||
|
||||
34 Pass
|
||||
4 Fail
|
||||
38 Pass
|
||||
Pass e.style['color'] = "hwb(120 30% 50%)" should set the property value
|
||||
Pass e.style['color'] = "hwb(120 30% 50% / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hwb(none none none)" should set the property value
|
||||
|
|
@ -38,7 +37,7 @@ Pass e.style['color'] = "hwb(calc(0 / 0) 20% 10%)" should set the property value
|
|||
Pass e.style['color'] = "hwb(90 20% 10% / calc(infinity))" should set the property value
|
||||
Pass e.style['color'] = "hwb(90 20% 10% / calc(-infinity))" should set the property value
|
||||
Pass e.style['color'] = "hwb(90 20% 10% / calc(0 / 0))" should set the property value
|
||||
Fail e.style['color'] = "hwb(calc(110deg + (sign(1em - 10px) * 10deg)) 30% 50% / 50%)" should set the property value
|
||||
Fail e.style['color'] = "hwb(calc(110 + (sign(1em - 10px) * 10)) 30 50 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "hwb(120deg 30% 50% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hwb(120 30 50 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Pass e.style['color'] = "hwb(calc(110deg + (sign(1em - 10px) * 10deg)) 30% 50% / 50%)" should set the property value
|
||||
Pass e.style['color'] = "hwb(calc(110 + (sign(1em - 10px) * 10)) 30 50 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hwb(120deg 30% 50% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "hwb(120 30 50 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
|
|
@ -2,8 +2,7 @@ Harness status: OK
|
|||
|
||||
Found 70 tests
|
||||
|
||||
48 Pass
|
||||
22 Fail
|
||||
70 Pass
|
||||
Pass e.style['color'] = "rgb(none none none)" should set the property value
|
||||
Pass e.style['color'] = "rgb(none none none / none)" should set the property value
|
||||
Pass e.style['color'] = "rgb(128 none none)" should set the property value
|
||||
|
|
@ -52,25 +51,25 @@ Pass e.style['color'] = "rgb(calc(0 / 0), 0, 0)" should set the property value
|
|||
Pass e.style['color'] = "rgb(0, calc(0 / 0), 0)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0, 0, calc(0 / 0))" should set the property value
|
||||
Pass e.style['color'] = "rgba(0, 0, 0, calc(0 / 0))" should set the property value
|
||||
Fail e.style['color'] = "rgb(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "rgb(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgb(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "rgb(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "rgb(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)" should set the property value
|
||||
Fail e.style['color'] = "rgb(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgb(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "rgb(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)) 0 0% / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(0% 0 0% / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)) 400 -400 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)) 400% -400% / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)), 400, -400, 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)), 400%, -400%, 0.5)" should set the property value
|
||||
Pass e.style['color'] = "rgb(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)" should set the property value
|
||||
Pass e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)" should set the property value
|
||||
Pass e.style['color'] = "rgb(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)" should set the property value
|
||||
Pass e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "rgba(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "rgb(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Pass e.style['color'] = "rgba(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Pass e.style['color'] = "rgb(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)" should set the property value
|
||||
Pass e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)" should set the property value
|
||||
Pass e.style['color'] = "rgb(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "rgba(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Pass e.style['color'] = "rgb(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Pass e.style['color'] = "rgba(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Pass e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)) 0 0% / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "rgba(0% 0 0% / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Pass e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)) 400 -400 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)) 400% -400% / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)), 400, -400, 0.5)" should set the property value
|
||||
Pass e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)), 400%, -400%, 0.5)" should set the property value
|
||||
Loading…
Add table
Add a link
Reference in a new issue