From 35bb1e20eeda5c116273e4e6c35831ad0d2897d5 Mon Sep 17 00:00:00 2001 From: Sam Atkins Date: Fri, 9 Jan 2026 16:21:43 +0000 Subject: [PATCH] LibWeb/CSS: Don't serialize "in oklab" in color-mix() This is the default interpolation method, so should be skipped according to the rule of the shortest serialization. --- .../CSS/StyleValues/ColorMixStyleValue.cpp | 13 +++-- .../color-valid-color-mix-function.txt | 58 +++++++++---------- 2 files changed, 37 insertions(+), 34 deletions(-) diff --git a/Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.cpp index 4eb2d1e715..b35477f2a8 100644 --- a/Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.cpp @@ -116,11 +116,14 @@ void ColorMixStyleValue::serialize(StringBuilder& builder, SerializationMode mod builder.append("color-mix("sv); - if (m_properties.color_interpolation_method.has_value()) { - builder.appendff("in {}", m_properties.color_interpolation_method->color_space); - if (m_properties.color_interpolation_method->hue_interpolation_method.value_or(HueInterpolationMethod::Shorter) != HueInterpolationMethod::Shorter) - builder.appendff(" {} hue", CSS::to_string(*m_properties.color_interpolation_method->hue_interpolation_method)); - builder.append(", "sv); + if (auto const& interpolation = m_properties.color_interpolation_method; interpolation.has_value()) { + // NB: We're expected to skip the interpolation method if it's the default. + if (!interpolation->color_space.equals_ignoring_ascii_case("oklab"sv) || interpolation->hue_interpolation_method.has_value()) { + builder.appendff("in {}", interpolation->color_space); + if (interpolation->hue_interpolation_method.value_or(HueInterpolationMethod::Shorter) != HueInterpolationMethod::Shorter) + builder.appendff(" {} hue", CSS::to_string(*interpolation->hue_interpolation_method)); + builder.append(", "sv); + } } m_properties.first_component.color->serialize(builder, mode); diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt index 6900bb0488..db44bc4565 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt @@ -2,8 +2,8 @@ Harness status: OK Found 631 tests -603 Pass -28 Fail +630 Pass +1 Fail Pass e.style['color'] = "color-mix(in srgb, red, blue)" should set the property value Pass e.style['color'] = "color-mix(in srgb, 70% red, 50% blue)" should set the property value Pass e.style['color'] = "color-mix(in hsl, red, blue)" should set the property value @@ -301,33 +301,33 @@ Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))" Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))" should set the property value Pass e.style['color'] = "color-mix(lab(10 20 30), lab(50 60 70))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 12.5%, oklab(0.5 0.6 0.7 / .8) 37.5%)" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(none none none), oklab(none none none))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))" should set the property value -Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 12.5%, oklab(0.5 0.6 0.7 / .8) 37.5%)" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(none none none), oklab(none none none))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))" should set the property value +Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))" should set the property value Pass e.style['color'] = "color-mix(oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in srgb, 50% color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should set the property value