diff --git a/Libraries/LibWeb/CSS/StyleValues/CSSHSL.cpp b/Libraries/LibWeb/CSS/StyleValues/CSSHSL.cpp index 8407592dc39..9eaa1e77841 100644 --- a/Libraries/LibWeb/CSS/StyleValues/CSSHSL.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/CSSHSL.cpp @@ -8,6 +8,7 @@ #include #include #include +#include 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(); } } diff --git a/Libraries/LibWeb/CSS/StyleValues/CSSHWB.cpp b/Libraries/LibWeb/CSS/StyleValues/CSSHWB.cpp index 7dfb31d83ef..96b68b8ca06 100644 --- a/Libraries/LibWeb/CSS/StyleValues/CSSHWB.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/CSSHWB.cpp @@ -8,6 +8,7 @@ #include #include #include +#include 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(); } } diff --git a/Libraries/LibWeb/CSS/StyleValues/CSSRGB.cpp b/Libraries/LibWeb/CSS/StyleValues/CSSRGB.cpp index b7dd0f3928e..38773410c3a 100644 --- a/Libraries/LibWeb/CSS/StyleValues/CSSRGB.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/CSSRGB.cpp @@ -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(); } } diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-hsl.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-hsl.txt index 21293963931..034938f6e54 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-hsl.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-hsl.txt @@ -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 \ No newline at end of file +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 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-hwb.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-hwb.txt index 760626aecae..1aa874249c3 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-hwb.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-hwb.txt @@ -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 \ No newline at end of file +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 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-rgb.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-rgb.txt index ac271c92cb8..82dff78f859 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-rgb.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-rgb.txt @@ -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 \ No newline at end of file +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 \ No newline at end of file