LibGfx: Correctly determine when to invert CMYK

We should invert CMYK data only if color space is JCS_CMYK and either
there is no Adobe marker, or the Adobe transform is 0. Transform 2
indicates YCCK data, which we should not invert.

Libraries/LibGfx/Color.cpp

@@ -422,6 +422,15 @@ Color Color::from_linear_srgb(float red, float green, float blue, float alpha)
         clamp(lroundf(alpha * 255.f), 0, 255));
 }
 
+Color Color::from_linear_display_p3(float r, float g, float b, float alpha)
+{
+    float x = 0.48657095 * r + 0.26566769 * g + 0.19821729 * b;
+    float y = 0.22897456 * r + 0.69173852 * g + 0.07928691 * b;
+    float z = 0.00000000 * r + 0.04511338 * g + 1.04394437 * b;
+
+    return from_xyz65(x, y, z, alpha);
+}
+
 // https://www.w3.org/TR/css-color-4/#predefined-a98-rgb
 Color Color::from_a98rgb(float r, float g, float b, float alpha)
 {
@@ -453,11 +462,7 @@ Color Color::from_display_p3(float r, float g, float b, float alpha)
     auto linear_g = to_linear(g);
     auto linear_b = to_linear(b);
 
-    float x = 0.48657095 * linear_r + 0.26566769 * linear_g + 0.19821729 * linear_b;
+    return from_linear_display_p3(linear_r, linear_g, linear_b, alpha);
-    float y = 0.22897456 * linear_r + 0.69173852 * linear_g + 0.07928691 * linear_b;
-    float z = 0.00000000 * linear_r + 0.04511338 * linear_g + 1.04394437 * linear_b;
-
-    return from_xyz65(x, y, z, alpha);
 }
 
 // https://www.w3.org/TR/css-color-4/#predefined-prophoto-rgb

Libraries/LibGfx/Color.h

@@ -212,6 +212,7 @@ public:
     static Color from_a98rgb(float r, float g, float b, float alpha = 1.0f);
     static Color from_display_p3(float r, float g, float b, float alpha = 1.0f);
     static Color from_lab(float L, float a, float b, float alpha = 1.0f);
+    static Color from_linear_display_p3(float r, float g, float b, float alpha = 1.0f);
     static Color from_linear_srgb(float r, float g, float b, float alpha = 1.0f);
     static Color from_pro_photo_rgb(float r, float g, float b, float alpha = 1.0f);
     static Color from_rec2020(float r, float g, float b, float alpha = 1.0f);

Libraries/LibGfx/ImageFormats/JPEGLoader.cpp

@@ -148,7 +148,10 @@ ErrorOr<void> JPEGLoadingContext::decode()
 
         // Photoshop writes inverted CMYK data (i.e. Photoshop's 0 should be 255). We convert this
         // to expected values.
-        if (cinfo.saw_Adobe_marker) {
+        bool should_invert_cmyk = cinfo.jpeg_color_space == JCS_CMYK
+            && (!cinfo.saw_Adobe_marker || cinfo.Adobe_transform == 0);
+
+        if (should_invert_cmyk) {
             for (int i = 0; i < cmyk_bitmap->size().height(); ++i) {
                 auto* line = cmyk_bitmap->scanline(i);
 

Libraries/LibWeb/CSS/StyleValues/ColorFunctionStyleValue.cpp

@@ -21,6 +21,8 @@ ColorStyleValue::ColorType color_type_from_string_view(StringView color_space)
         return ColorStyleValue::ColorType::A98RGB;
     if (color_space == "display-p3"sv)
         return ColorStyleValue::ColorType::DisplayP3;
+    if (color_space == "display-p3-linear"sv)
+        return ColorStyleValue::ColorType::DisplayP3Linear;
     if (color_space == "srgb"sv)
         return ColorStyleValue::ColorType::sRGB;
     if (color_space == "srgb-linear"sv)
@@ -42,6 +44,8 @@ StringView string_view_from_color_type(ColorStyleValue::ColorType color_type)
         return "a98-rgb"sv;
     if (color_type == ColorStyleValue::ColorType::DisplayP3)
         return "display-p3"sv;
+    if (color_type == ColorStyleValue::ColorType::DisplayP3Linear)
+        return "display-p3-linear"sv;
     if (color_type == ColorStyleValue::ColorType::sRGB)
         return "srgb"sv;
     if (color_type == ColorStyleValue::ColorType::sRGBLinear)
@@ -171,6 +175,9 @@ Optional<Color> ColorFunctionStyleValue::to_color(ColorResolutionContext color_r
     if (color_type() == ColorType::DisplayP3)
         return Color::from_display_p3(c1, c2, c3, alpha_val);
 
+    if (color_type() == ColorType::DisplayP3Linear)
+        return Color::from_linear_display_p3(c1, c2, c3, alpha_val);
+
     if (color_type() == ColorType::sRGB) {
         auto const to_u8 = [](float c) -> u8 { return round_to<u8>(clamp(255 * c, 0, 255)); };
         return Color(to_u8(c1), to_u8(c2), to_u8(c3), to_u8(alpha_val));

Libraries/LibWeb/CSS/StyleValues/ColorFunctionStyleValue.h

@@ -22,7 +22,7 @@ public:
 
     virtual bool is_color_function() const override { return true; }
 
-    static constexpr Array s_supported_color_space = { "a98-rgb"sv, "display-p3"sv, "srgb"sv, "srgb-linear"sv, "prophoto-rgb"sv, "rec2020"sv, "xyz"sv, "xyz-d50"sv, "xyz-d65"sv };
+    static constexpr Array s_supported_color_space = { "a98-rgb"sv, "display-p3"sv, "display-p3-linear"sv, "srgb"sv, "srgb-linear"sv, "prophoto-rgb"sv, "rec2020"sv, "xyz"sv, "xyz-d50"sv, "xyz-d65"sv };
 
 private:
     ColorFunctionStyleValue(ColorType color_type, ValueComparingNonnullRefPtr<StyleValue const> c1, ValueComparingNonnullRefPtr<StyleValue const> c2, ValueComparingNonnullRefPtr<StyleValue const> c3, ValueComparingNonnullRefPtr<StyleValue const> alpha)

Libraries/LibWeb/CSS/StyleValues/ColorStyleValue.h

@@ -31,6 +31,7 @@ public:
         RGB, // This is used by RGBColorStyleValue for rgb(...) and rgba(...).
         A98RGB,
         DisplayP3,
+        DisplayP3Linear,
         HSL,
         HWB,
         Lab,

Tests/LibGfx/TestImageDecoder.cpp

@@ -323,6 +323,42 @@ TEST_CASE(test_jpeg_ycck)
     }
 }
 
+TEST_CASE(test_jpeg_cmyk_no_adobe_marker)
+{
+    auto file = TRY_OR_FAIL(Core::MappedFile::map(TEST_INPUT("jpg/cmyk-no-adobe-marker.jpg"sv)));
+    EXPECT(Gfx::JPEGImageDecoderPlugin::sniff(file->bytes()));
+    auto plugin_decoder = TRY_OR_FAIL(Gfx::JPEGImageDecoderPlugin::create(file->bytes()));
+    TRY_OR_FAIL(expect_single_frame_of_size(*plugin_decoder, { 10, 10 }));
+
+    EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(8, 1), Gfx::Color(44, 184, 97));
+    EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(1, 8), Gfx::Color(184, 44, 97));
+    EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(9, 9), Gfx::Color(24, 24, 194));
+}
+
+TEST_CASE(test_jpeg_cmyk_adobe_transform_0)
+{
+    auto file = TRY_OR_FAIL(Core::MappedFile::map(TEST_INPUT("jpg/cmyk-adobe-transform-0.jpg"sv)));
+    EXPECT(Gfx::JPEGImageDecoderPlugin::sniff(file->bytes()));
+    auto plugin_decoder = TRY_OR_FAIL(Gfx::JPEGImageDecoderPlugin::create(file->bytes()));
+    TRY_OR_FAIL(expect_single_frame_of_size(*plugin_decoder, { 10, 10 }));
+
+    EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(8, 1), Gfx::Color(44, 184, 97));
+    EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(1, 8), Gfx::Color(184, 44, 97));
+    EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(9, 9), Gfx::Color(24, 24, 194));
+}
+
+TEST_CASE(test_jpeg_ycck_adobe_transform_2)
+{
+    auto file = TRY_OR_FAIL(Core::MappedFile::map(TEST_INPUT("jpg/ycck-adobe-transform-2.jpg"sv)));
+    EXPECT(Gfx::JPEGImageDecoderPlugin::sniff(file->bytes()));
+    auto plugin_decoder = TRY_OR_FAIL(Gfx::JPEGImageDecoderPlugin::create(file->bytes()));
+    TRY_OR_FAIL(expect_single_frame_of_size(*plugin_decoder, { 10, 10 }));
+
+    EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(8, 1), Gfx::Color(197, 27, 134));
+    EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(1, 8), Gfx::Color(24, 199, 134));
+    EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(9, 9), Gfx::Color(227, 224, 19));
+}
+
 TEST_CASE(test_jpeg_sof2_spectral_selection)
 {
     auto file = TRY_OR_FAIL(Core::MappedFile::map(TEST_INPUT("jpg/spectral_selection.jpg"sv)));

Tests/LibWeb/Ref/expected/wpt-import/css/css-color/display-p3-linear-004-ref.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4:display-p3-linear</title>
+<style>
+    .test { background-color: lab(86.61399% -106.539 102.871); width: 12em; height: 12em; } /* color(display-p3-linear 0 1 0) converted to Lab */
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="test"></div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-001.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3-linear</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3-linear">
+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
+<meta name="assert" content="display-p3-linear with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: color(display-p3-linear 0.0383 0.2087 0.0156); } /* green (sRGB #008000) converted to display-p3-linear */
+</style>
+<body>
+    <p>Test passes if you see a green square, and no red.</p>
+    <div class="test"></div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-002.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3-linear</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3-linear">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-predefined">
+<link rel="match" href="../../../../expected/wpt-import/css/css-color/blacksquare-ref.html">
+<meta name="assert" content="display-p3-linear with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: color(display-p3-linear 0 0 0); } /* black (sRGB #000000) converted to display-p3-linear */
+</style>
+<body>
+    <p>Test passes if you see a black square, and no red.</p>
+    <div class="test"></div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-003.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3-linear</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3-linear">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-predefined">
+<link rel="match" href="../../../../expected/wpt-import/css/css-color/whitesquare-ref.html">
+<meta name="assert" content="display-p3-linear with no alpha">
+<style>
+    body { background-color: grey; }
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(100% 100% 100%); width: 12em; height: 6em; margin-bottom: 0; } /* color(display-p3-linear 1 1 1) converted to sRGB */
+    .test { background-color: color(display-p3-linear 1 1 1); }
+</style>
+<body>
+    <p>Test passes if you see a white square, and no red.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-004.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3-linear</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3-linear">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab">
+<link rel="match" href="../../../../expected/wpt-import/css/css-color/display-p3-linear-004-ref.html">
+<meta name="assert" content="display-p3-linear with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: lab(86.61399% -106.539 102.871); width: 12em; height: 6em; margin-bottom: 0; } /* color(display-p3-linear 0 1 0) converted to Lab */
+    .test { background-color: color(display-p3-linear 0 1 0); }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-005.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3-linear</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3-linear">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-predefined">
+<link rel="match" href="../../../../expected/wpt-import/css/css-color/yellowsquare-ref.html">
+<meta name="assert" content="display-p3-linear with no alpha">
+<style>
+    body { background-color: grey; }
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: yellow; width: 12em; height: 6em; margin-bottom: 0; }
+    /* sRGB yellow converted to display-p3-linear */
+    .test { background-color: color(display-p3-linear 1 1 0.0895); }
+</style>
+<body>
+    <p>Test passes if you see a yellow square, and no red.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-006.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: display-p3-linear and sRGB with medium chroma</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3-linear">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-sRGB">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined">
+<link rel="match" href="../../../../expected/wpt-import/css/css-color/mossgreensquare-ref.html">
+<meta name="assert" content="display-p3-linear with no alpha">
+<style>
+    .test, .test2 { background-color: red; width: 12em; height: 4em; }
+    .ref {background-color: rgb(44.8436% 53.537% 28.8112%); width: 12em; height: 4em; }
+        /* lch(54% 35 118) converted to legacy sRGB */
+    .test { background-color: color(display-p3-linear 0.183382 0.245634 0.082317); }
+        /* lch(54% 35 118) converted to display-p3-linear */
+    .test2 {background-color: color(srgb 0.448436 0.53537 0.288113); }
+        /* lch(54% 35 118) converted to color(sRGB) */
+</style>
+<body>
+    <p>Test passes if you see a moss green square, and no red.</p>
+    <div class="test"></div>
+    <div class="ref"></div>
+    <div class="test2"></div>
+</body>

Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-color-function.txt

@@ -1,9 +1,9 @@
 Harness status: OK
 
-Found 421 tests
+Found 468 tests
 
-401 Pass
+446 Pass
-20 Fail
+22 Fail
 Pass	Property color value 'color(srgb 0% 0% 0%)'
 Pass	Property color value 'color(srgb 10% 10% 10%)'
 Pass	Property color value 'color(srgb .2 .2 25%)'
@@ -190,6 +190,37 @@ Pass	Property color value 'color(display-p3 calc(NaN) 0 0)'
 Pass	Property color value 'color(display-p3 calc(0 / 0) 0 0)'
 Fail	Property color value 'color(display-p3 calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)'
 Fail	Property color value 'color(display-p3 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))'
+Pass	Property color value 'color(display-p3-linear 0% 0% 0%)'
+Pass	Property color value 'color(display-p3-linear 10% 10% 10%)'
+Pass	Property color value 'color(display-p3-linear .2 .2 25%)'
+Pass	Property color value 'color(display-p3-linear 0 0 0 / 1)'
+Pass	Property color value 'color(display-p3-linear 0% 0 0 / 0.5)'
+Pass	Property color value 'color(display-p3-linear 20% 0 10/0.5)'
+Pass	Property color value 'color(display-p3-linear 20% 0 10/50%)'
+Pass	Property color value 'color(display-p3-linear 400% 0 10/50%)'
+Pass	Property color value 'color(display-p3-linear 50% -160 160)'
+Pass	Property color value 'color(display-p3-linear 50% -200 200)'
+Pass	Property color value 'color(display-p3-linear 0 0 0 / -10%)'
+Pass	Property color value 'color(display-p3-linear 0 0 0 / 110%)'
+Pass	Property color value 'color(display-p3-linear 0 0 0 / 300%)'
+Pass	Property color value 'color(display-p3-linear 200 200 200)'
+Pass	Property color value 'color(display-p3-linear 200 200 200 / 200)'
+Pass	Property color value 'color(display-p3-linear -200 -200 -200)'
+Pass	Property color value 'color(display-p3-linear -200 -200 -200 / -200)'
+Pass	Property color value 'color(display-p3-linear 200% 200% 200%)'
+Pass	Property color value 'color(display-p3-linear 200% 200% 200% / 200%)'
+Pass	Property color value 'color(display-p3-linear -200% -200% -200% / -200%)'
+Pass	Property color value 'color(display-p3-linear calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))'
+Pass	Property color value 'color(display-p3-linear calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))'
+Pass	Property color value 'color(display-p3-linear none none none / none)'
+Pass	Property color value 'color(display-p3-linear none none none)'
+Pass	Property color value 'color(display-p3-linear 10% none none / none)'
+Pass	Property color value 'color(display-p3-linear none none none / 0.5)'
+Pass	Property color value 'color(display-p3-linear 0 0 0 / none)'
+Pass	Property color value 'color(display-p3-linear calc(NaN) 0 0)'
+Pass	Property color value 'color(display-p3-linear calc(0 / 0) 0 0)'
+Fail	Property color value 'color(display-p3-linear calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)'
+Fail	Property color value 'color(display-p3-linear 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))'
 Pass	Property color value 'color(xyz 0 0 0)'
 Pass	Property color value 'color(xyz 0 0 0 / 1)'
 Pass	Property color value 'color(xyz 1 1 1)'
@@ -310,6 +341,22 @@ Pass	Property color value 'color(display-p3 none none none / none)' [Display P3
 Pass	Property color value 'color(display-p3 1.00 none 0.2 / none)' [Display P3 with alpha, number and none]
 Pass	Property color value 'color(display-p3 100% none 20% / 30%)' [Display P3 with alpha, percent and none]
 Pass	Property color value 'color(display-p3 100% none 0.2 / 23.7%)' [Display P3 with alpha, number, percent and none]
+Pass	Property color value 'color(display-p3-linear 1.00 0.50 0.200)' [Display P3 Linear all numbers]
+Pass	Property color value 'color(display-p3-linear 100% 50% 20%)' [Display P3 Linear all percent]
+Pass	Property color value 'color(display-p3-linear 100% 0.5 20%)' [Display P3 Linear mixed number and percent]
+Pass	Property color value 'color(display-p3-linear 1.00 50% 0.2)' [Display P3 Linear mixed number and percent 2]
+Pass	Property color value 'color(display-p3-linear none none none)' [Display P3 Linear all none]
+Pass	Property color value 'color(display-p3-linear 1.00 none 0.2)' [Display P3 Linear number and none]
+Pass	Property color value 'color(display-p3-linear 100% none 20%)' [Display P3 Linear percent and none]
+Pass	Property color value 'color(display-p3-linear 100% none 0.2)' [Display P3 Linear number, percent and none]
+Pass	Property color value 'color(display-p3-linear 1.00 0.50 0.200 / 0.6)' [Display P3 Linear with alpha, all numbers]
+Pass	Property color value 'color(display-p3-linear 100% 50% 20% / 60%)' [Display P3 Linear with alpha, all percent]
+Pass	Property color value 'color(display-p3-linear 100% 0.5 20% / 0.6)' [Display P3 Linear with alpha, mixed number and percent]
+Pass	Property color value 'color(display-p3-linear 1.00 50% 0.2 / 60%)' [Display P3 Linear with alpha, mixed number and percent 2]
+Pass	Property color value 'color(display-p3-linear none none none / none)' [Display P3 Linear with alpha, all none]
+Pass	Property color value 'color(display-p3-linear 1.00 none 0.2 / none)' [Display P3 Linear with alpha, number and none]
+Pass	Property color value 'color(display-p3-linear 100% none 20% / 30%)' [Display P3 Linear with alpha, percent and none]
+Pass	Property color value 'color(display-p3-linear 100% none 0.2 / 23.7%)' [Display P3 Linear with alpha, number, percent and none]
 Pass	Property color value 'color(a98-rgb 1.00 0.50 0.200)' [A98 RGB all numbers]
 Pass	Property color value 'color(a98-rgb 100% 50% 20%)' [A98 RGB all percent]
 Pass	Property color value 'color(a98-rgb 100% 0.5 20%)' [A98 RGB mixed number and percent]

Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-invalid-color-mix-function.txt

@@ -1,8 +1,8 @@
 Harness status: OK
 
-Found 174 tests
+Found 169 tests
 
-174 Pass
+169 Pass
 Pass	e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) -10%, hsl(30deg 30% 40%))" should not set the property value
 Pass	e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 150%, hsl(30deg 30% 40%))" should not set the property value
 Pass	e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%) 0%)" should not set the property value
@@ -15,7 +15,6 @@ Pass	e.style['color'] = "color-mix(in hsl foo, hsl(120deg 10% 20%), hsl(30deg 30
 Pass	e.style['color'] = "color-mix(in hsl hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should not set the property value
 Pass	e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) hsl(30deg 30% 40%))" should not set the property value
 Pass	e.style['color'] = "color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%), in hsl)" should not set the property value
-Pass	e.style['color'] = "color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should not set the property value
 Pass	e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))" should not set the property value
 Pass	e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 150%, hwb(30deg 30% 40%))" should not set the property value
 Pass	e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%) 0%)" should not set the property value
@@ -28,7 +27,6 @@ Pass	e.style['color'] = "color-mix(in hwb foo, hwb(120deg 10% 20%), hwb(30deg 30
 Pass	e.style['color'] = "color-mix(in hwb hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should not set the property value
 Pass	e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) hwb(30deg 30% 40%))" should not set the property value
 Pass	e.style['color'] = "color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%), in hwb)" should not set the property value
-Pass	e.style['color'] = "color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should not set the property value
 Pass	e.style['color'] = "color-mix(in srgb, red, blue blue)" should not set the property value
 Pass	e.style['color'] = "color-mix(in lch, lch(10% 20 30deg) -10%, lch(50% 60 70deg))" should not set the property value
 Pass	e.style['color'] = "color-mix(in lch, lch(10% 20 30deg) 150%, lch(50% 60 70deg))" should not set the property value
@@ -42,7 +40,6 @@ Pass	e.style['color'] = "color-mix(in lch foo, lch(10% 20 30deg), lch(50% 60 70d
 Pass	e.style['color'] = "color-mix(in lch lch(10% 20 30deg), lch(50% 60 70deg))" should not set the property value
 Pass	e.style['color'] = "color-mix(in lch, lch(10% 20 30deg) lch(50% 60 70deg))" should not set the property value
 Pass	e.style['color'] = "color-mix(lch(10% 20 30deg), lch(50% 60 70deg), in lch)" should not set the property value
-Pass	e.style['color'] = "color-mix(lch(10% 20 30deg), lch(50% 60 70deg))" should not set the property value
 Pass	e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) -10%, oklch(50% 60 70deg))" should not set the property value
 Pass	e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) 150%, oklch(50% 60 70deg))" should not set the property value
 Pass	e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) 0%, oklch(50% 60 70deg) 0%)" should not set the property value
@@ -55,7 +52,6 @@ Pass	e.style['color'] = "color-mix(in oklch foo, oklch(10% 20 30deg), oklch(50%
 Pass	e.style['color'] = "color-mix(in oklch oklch(10% 20 30deg), oklch(50% 60 70deg))" should not set the property value
 Pass	e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) oklch(50% 60 70deg))" should not set the property value
 Pass	e.style['color'] = "color-mix(oklch(10% 20 30deg), oklch(50% 60 70deg), in oklch)" should not set the property value
-Pass	e.style['color'] = "color-mix(oklch(10% 20 30deg), oklch(50% 60 70deg))" should not set the property value
 Pass	e.style['color'] = "color-mix(in lab, lab(10% 20 30) -10%, lab(50% 60 70))" should not set the property value
 Pass	e.style['color'] = "color-mix(in lab, lab(10% 20 30) 150%, lab(50% 60 70))" should not set the property value
 Pass	e.style['color'] = "color-mix(in lab, lab(10% 20 30) 0%, lab(50% 60 70) 0%)" should not set the property value
@@ -66,7 +62,6 @@ Pass	e.style['color'] = "color-mix(in lab longer hue, lab(10% 20 30), lab(50% 60
 Pass	e.style['color'] = "color-mix(in lab lab(10% 20 30), lab(50% 60 70))" should not set the property value
 Pass	e.style['color'] = "color-mix(in lab, lab(10% 20 30) lab(50% 60 70))" should not set the property value
 Pass	e.style['color'] = "color-mix(lab(10% 20 30), lab(50% 60 70), in lab)" should not set the property value
-Pass	e.style['color'] = "color-mix(lab(10% 20 30), lab(50% 60 70))" should not set the property value
 Pass	e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) -10%, oklab(50% 60 70))" should not set the property value
 Pass	e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) 150%, oklab(50% 60 70))" should not set the property value
 Pass	e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) 0%, oklab(50% 60 70) 0%)" should not set the property value
@@ -77,7 +72,6 @@ Pass	e.style['color'] = "color-mix(in oklab longer hue, oklab(10% 20 30), oklab(
 Pass	e.style['color'] = "color-mix(in oklab oklab(10% 20 30), oklab(50% 60 70))" should not set the property value
 Pass	e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) oklab(50% 60 70))" should not set the property value
 Pass	e.style['color'] = "color-mix(oklab(10% 20 30), oklab(50% 60 70), in oklab)" should not set the property value
-Pass	e.style['color'] = "color-mix(oklab(10% 20 30), oklab(50% 60 70))" should not set the property value
 Pass	e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) -10%, color(srgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 150%, color(srgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 0%, color(srgb .5 .6 .7) 0%)" should not set the property value
@@ -88,7 +82,6 @@ Pass	e.style['color'] = "color-mix(in srgb longer hue, color(srgb .1 .2 .3), col
 Pass	e.style['color'] = "color-mix(in srgb color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) color(srgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(color(srgb .1 .2 .3), color(srgb .5 .6 .7), in srgb)" should not set the property value
-Pass	e.style['color'] = "color-mix(color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) -10%, color(srgb-linear .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 150%, color(srgb-linear .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 0%, color(srgb-linear .5 .6 .7) 0%)" should not set the property value
@@ -99,7 +92,6 @@ Pass	e.style['color'] = "color-mix(in srgb-linear longer hue, color(srgb-linear
 Pass	e.style['color'] = "color-mix(in srgb-linear color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) color(srgb-linear .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7), in srgb-linear)" should not set the property value
-Pass	e.style['color'] = "color-mix(color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) -10%, color(display-p3 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 150%, color(display-p3 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 0%, color(display-p3 .5 .6 .7) 0%)" should not set the property value
@@ -110,7 +102,16 @@ Pass	e.style['color'] = "color-mix(in display-p3 longer hue, color(display-p3 .1
 Pass	e.style['color'] = "color-mix(in display-p3 color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) color(display-p3 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7), in display-p3)" should not set the property value
-Pass	e.style['color'] = "color-mix(color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should not set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) -10%, color(display-p3-linear .5 .6 .7))" should not set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 150%, color(display-p3-linear .5 .6 .7))" should not set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 0%, color(display-p3-linear .5 .6 .7) 0%)" should not set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) -10%, color(display-p3-linear .5 .6 .7 / .8))" should not set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 150%, color(display-p3-linear .5 .6 .7 / .8))" should not set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 0%, color(display-p3-linear .5 .6 .7 / .8) 0%)" should not set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear longer hue, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should not set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should not set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) color(display-p3-linear .5 .6 .7))" should not set the property value
+Pass	e.style['color'] = "color-mix(color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7), in display-p3-linear)" should not set the property value
 Pass	e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) -10%, color(a98-rgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 150%, color(a98-rgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 0%, color(a98-rgb .5 .6 .7) 0%)" should not set the property value
@@ -121,7 +122,6 @@ Pass	e.style['color'] = "color-mix(in a98-rgb longer hue, color(a98-rgb .1 .2 .3
 Pass	e.style['color'] = "color-mix(in a98-rgb color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) color(a98-rgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7), in a98-rgb)" should not set the property value
-Pass	e.style['color'] = "color-mix(color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) -10%, color(prophoto-rgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 150%, color(prophoto-rgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 0%, color(prophoto-rgb .5 .6 .7) 0%)" should not set the property value
@@ -132,7 +132,6 @@ Pass	e.style['color'] = "color-mix(in prophoto-rgb longer hue, color(prophoto-rg
 Pass	e.style['color'] = "color-mix(in prophoto-rgb color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) color(prophoto-rgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7), in prophoto-rgb)" should not set the property value
-Pass	e.style['color'] = "color-mix(color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) -10%, color(rec2020 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 150%, color(rec2020 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 0%, color(rec2020 .5 .6 .7) 0%)" should not set the property value
@@ -143,7 +142,6 @@ Pass	e.style['color'] = "color-mix(in rec2020 longer hue, color(rec2020 .1 .2 .3
 Pass	e.style['color'] = "color-mix(in rec2020 color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) color(rec2020 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7), in rec2020)" should not set the property value
-Pass	e.style['color'] = "color-mix(color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) -10%, color(xyz .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 150%, color(xyz .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 0%, color(xyz .5 .6 .7) 0%)" should not set the property value
@@ -154,7 +152,6 @@ Pass	e.style['color'] = "color-mix(in xyz longer hue, color(xyz .1 .2 .3), color
 Pass	e.style['color'] = "color-mix(in xyz color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) color(xyz .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(color(xyz .1 .2 .3), color(xyz .5 .6 .7), in xyz)" should not set the property value
-Pass	e.style['color'] = "color-mix(color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) -10%, color(xyz-d50 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 150%, color(xyz-d50 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 0%, color(xyz-d50 .5 .6 .7) 0%)" should not set the property value
@@ -165,7 +162,6 @@ Pass	e.style['color'] = "color-mix(in xyz-d50 longer hue, color(xyz-d50 .1 .2 .3
 Pass	e.style['color'] = "color-mix(in xyz-d50 color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) color(xyz-d50 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7), in xyz-d50)" should not set the property value
-Pass	e.style['color'] = "color-mix(color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) -10%, color(xyz-d65 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 150%, color(xyz-d65 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 0%, color(xyz-d65 .5 .6 .7) 0%)" should not set the property value
@@ -176,4 +172,3 @@ Pass	e.style['color'] = "color-mix(in xyz-d65 longer hue, color(xyz-d65 .1 .2 .3
 Pass	e.style['color'] = "color-mix(in xyz-d65 color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) color(xyz-d65 .5 .6 .7))" should not set the property value
 Pass	e.style['color'] = "color-mix(color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7), in xyz-d65)" should not set the property value
-Pass	e.style['color'] = "color-mix(color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should not set the property value

Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-function.txt

@@ -1,8 +1,8 @@
 Harness status: OK
 
-Found 306 tests
+Found 340 tests
 
-306 Pass
+340 Pass
 Pass	e.style['color'] = "color(srgb 0% 0% 0%)" should set the property value
 Pass	e.style['color'] = "color(srgb 10% 10% 10%)" should set the property value
 Pass	e.style['color'] = "color(srgb .2 .2 25%)" should set the property value
@@ -207,6 +207,40 @@ Pass	e.style['color'] = "color(display-p3 calc(NaN) 0 0)" should set the propert
 Pass	e.style['color'] = "color(display-p3 calc(0 / 0) 0 0)" should set the property value
 Pass	e.style['color'] = "color(display-p3 calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)" should set the property value
 Pass	e.style['color'] = "color(display-p3 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 0% 0% 0%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 10% 10% 10%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear .2 .2 25%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 0 0 0 / 1)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 0% 0 0 / 0.5)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 20% 0 10/0.5)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 20% 0 10/50%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 400% 0 10/50%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 50% -160 160)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 50% -200 200)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 0 0 0 / -10%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 0 0 0 / 110%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 0 0 0 / 300%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 200 200 200)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 200 200 200 / 200)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear -200 -200 -200)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear -200 -200 -200 / -200)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 200% 200% 200%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 200% 200% 200% / 200%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear -200% -200% -200% / -200%)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear calc(50%) 50% 0.5)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear none none none / none)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear none none none)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 10% none none / none)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear none none none / 0.5)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 0 0 0 / none)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 0 calc(infinity) 0)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 0 calc(-infinity) 0)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear calc(NaN) 0 0)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear calc(0 / 0) 0 0)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)" should set the property value
+Pass	e.style['color'] = "color(display-p3-linear 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
 Pass	e.style['color'] = "color(xyz 0% 0% 0%)" should set the property value
 Pass	e.style['color'] = "color(xyz 10% 10% 10%)" should set the property value
 Pass	e.style['color'] = "color(xyz .2 .2 25%)" should set the property value

Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt

@@ -1,8 +1,9 @@
 Harness status: OK
 
-Found 587 tests
+Found 631 tests
 
-587 Pass
+588 Pass
+43 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
@@ -73,6 +74,7 @@ Pass	e.style['color'] = "color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%
 Pass	e.style['color'] = "color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40%))" should set the property value
 Pass	e.style['color'] = "color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / none))" should set the property value
+Fail	e.style['color'] = "color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should set the property value
 Pass	e.style['color'] = "color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)" should set the property value
 Pass	e.style['color'] = "color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)" should set the property value
 Pass	e.style['color'] = "color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)" should set the property value
@@ -154,6 +156,7 @@ Pass	e.style['color'] = "color-mix(in hwb, oklch(100 0.399 336.3) 100%, rgb(0, 0
 Pass	e.style['color'] = "color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)" should set the property value
 Pass	e.style['color'] = "color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)" should set the property value
 Pass	e.style['color'] = "color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)" should set the property value
+Fail	e.style['color'] = "color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should set the property value
 Pass	e.style['color'] = "color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg))" should set the property value
 Pass	e.style['color'] = "color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg))" should set the property value
 Pass	e.style['color'] = "color-mix(in lch, 25% lch(10 20 30deg), lch(50 60 70deg))" should set the property value
@@ -211,6 +214,7 @@ Pass	e.style['color'] = "color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg
 Pass	e.style['color'] = "color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))" should set the property value
 Pass	e.style['color'] = "color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))" should set the property value
+Fail	e.style['color'] = "color-mix(lch(10 20 30), lch(50 60 70))" should set the property value
 Pass	e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))" should set the property value
 Pass	e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg))" should set the property value
 Pass	e.style['color'] = "color-mix(in oklch, 25% oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))" should set the property value
@@ -268,6 +272,7 @@ Pass	e.style['color'] = "color-mix(in oklch, oklch(none 0.2 30deg), oklch(0.5 no
 Pass	e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg))" should set the property value
 Pass	e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / none))" should set the property value
+Fail	e.style['color'] = "color-mix(oklch(0.1 20 30), oklch(0.5 60 70))" should set the property value
 Pass	e.style['color'] = "color-mix(in lab, lab(10 20 30), lab(50 60 70))" should set the property value
 Pass	e.style['color'] = "color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))" should set the property value
 Pass	e.style['color'] = "color-mix(in lab, 25% lab(10 20 30), lab(50 60 70))" should set the property value
@@ -295,33 +300,35 @@ Pass	e.style['color'] = "color-mix(in lab, lab(none 20 30), lab(50 none 70))" sh
 Pass	e.style['color'] = "color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))" should set the property value
 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(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(lab(10 20 30), lab(50 60 70))" 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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-Pass	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(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(0.5 0.6 0.7))" 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
-Pass	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(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 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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
+Fail	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
 Pass	e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3), 50% color(srgb .5 .6 .7))" should set the property value
@@ -350,6 +357,7 @@ Pass	e.style['color'] = "color-mix(in srgb, color(srgb none .2 .3), color(srgb .
 Pass	e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / none), color(srgb .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / none), color(srgb .5 .6 .7 / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / none), color(srgb .5 .6 .7 / none))" should set the property value
+Fail	e.style['color'] = "color-mix(color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in srgb-linear, 50% color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), 50% color(srgb-linear .5 .6 .7))" should set the property value
@@ -378,6 +386,7 @@ Pass	e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear none .2 .3)
 Pass	e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / none), color(srgb-linear .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / none), color(srgb-linear .5 .6 .7 / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / none), color(srgb-linear .5 .6 .7 / none))" should set the property value
+Fail	e.style['color'] = "color-mix(color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in display-p3, 50% color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3), 50% color(display-p3 .5 .6 .7))" should set the property value
@@ -406,6 +415,36 @@ Pass	e.style['color'] = "color-mix(in display-p3, color(display-p3 none .2 .3),
 Pass	e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7 / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7 / none))" should set the property value
+Fail	e.style['color'] = "color-mix(color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, 50% color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), 50% color(display-p3-linear .5 .6 .7))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 25%, color(display-p3-linear .5 .6 .7))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7) 25%)" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 25%, color(display-p3-linear .5 .6 .7) 75%)" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 30%, color(display-p3-linear .5 .6 .7) 90%)" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 12.5%, color(display-p3-linear .5 .6 .7) 37.5%)" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 0%, color(display-p3-linear .5 .6 .7))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .5), color(display-p3-linear .5 .6 .7 / .8))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 25%, color(display-p3-linear .5 .6 .7 / .8))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4), color(display-p3-linear .5 .6 .7 / .8) 25%)" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 25%, color(display-p3-linear .5 .6 .7 / .8) 75%)" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 30%, color(display-p3-linear .5 .6 .7 / .8) 90%)" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 12.5%, color(display-p3-linear .5 .6 .7 / .8) 37.5%)" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 0%, color(display-p3-linear .5 .6 .7 / .8))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear 2 3 4 / 5), color(display-p3-linear 4 6 8 / 10))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear -2 -3 -4), color(display-p3-linear -4 -6 -8))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear -2 -3 -4 / -5), color(display-p3-linear -4 -6 -8 / -10))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none none none), color(display-p3-linear none none none))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none none none), color(display-p3-linear .5 .6 .7))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear none none none))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 none), color(display-p3-linear .5 .6 .7))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 none))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none .2 .3), color(display-p3-linear .5 none .7))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7 / 0.5))" should set the property value
+Pass	e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7 / none))" should set the property value
+Fail	e.style['color'] = "color-mix(color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in a98-rgb, 50% color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3), 50% color(a98-rgb .5 .6 .7))" should set the property value
@@ -434,6 +473,7 @@ Pass	e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb none .2 .3), color(
 Pass	e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / none), color(a98-rgb .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / none), color(a98-rgb .5 .6 .7 / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / none), color(a98-rgb .5 .6 .7 / none))" should set the property value
+Fail	e.style['color'] = "color-mix(color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in prophoto-rgb, 50% color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3), 50% color(prophoto-rgb .5 .6 .7))" should set the property value
@@ -462,6 +502,7 @@ Pass	e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb none .2 .
 Pass	e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / none), color(prophoto-rgb .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / none), color(prophoto-rgb .5 .6 .7 / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / none), color(prophoto-rgb .5 .6 .7 / none))" should set the property value
+Fail	e.style['color'] = "color-mix(color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in rec2020, 50% color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3), 50% color(rec2020 .5 .6 .7))" should set the property value
@@ -490,6 +531,7 @@ Pass	e.style['color'] = "color-mix(in rec2020, color(rec2020 none .2 .3), color(
 Pass	e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / none), color(rec2020 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / none), color(rec2020 .5 .6 .7 / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / none), color(rec2020 .5 .6 .7 / none))" should set the property value
+Fail	e.style['color'] = "color-mix(color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz, 50% color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3), 50% color(xyz .5 .6 .7))" should set the property value
@@ -518,6 +560,7 @@ Pass	e.style['color'] = "color-mix(in xyz, color(xyz none .2 .3), color(xyz .5 n
 Pass	e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / none), color(xyz .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / none), color(xyz .5 .6 .7 / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / none), color(xyz .5 .6 .7 / none))" should set the property value
+Fail	e.style['color'] = "color-mix(color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d50, 50% color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), 50% color(xyz-d50 .5 .6 .7))" should set the property value
@@ -546,6 +589,7 @@ Pass	e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 none .2 .3), color(
 Pass	e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / none), color(xyz-d50 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / none), color(xyz-d50 .5 .6 .7 / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / none), color(xyz-d50 .5 .6 .7 / none))" should set the property value
+Fail	e.style['color'] = "color-mix(color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d65, 50% color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), 50% color(xyz-d65 .5 .6 .7))" should set the property value
@@ -574,6 +618,7 @@ Pass	e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 none .2 .3), color(
 Pass	e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / none), color(xyz-d65 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / none), color(xyz-d65 .5 .6 .7 / 0.5))" should set the property value
 Pass	e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / none), color(xyz-d65 .5 .6 .7 / none))" should set the property value
+Fail	e.style['color'] = "color-mix(color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should set the property value
 Pass	e.style['color'] = "color-mix(in srgb, red 50%,       blue 50%)" should set the property value
 Pass	e.style['color'] = "color-mix(in srgb, red 10%,       blue 90%)" should set the property value
 Pass	e.style['color'] = "color-mix(in srgb, red 50%,       blue 40%)" should set the property value

Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid.txt

@@ -1,8 +1,8 @@
 Harness status: OK
 
-Found 16 tests
+Found 17 tests
 
-16 Pass
+17 Pass
 Pass	e.style['color'] = "currentcolor" should set the property value
 Pass	e.style['color'] = "transparent" should set the property value
 Pass	e.style['color'] = "red" should set the property value
@@ -19,3 +19,4 @@ Pass	e.style['color'] = "rgb(-2, 3, 4)" should set the property value
 Pass	e.style['color'] = "rgb(100, 200, 300)" should set the property value
 Pass	e.style['color'] = "rgb(20, 10, 0, -10)" should set the property value
 Pass	e.style['color'] = "rgb(100%, 200%, 300%)" should set the property value
+Pass	e.style['color'] = "light-dark(black, white)" should set the property value

Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-computed-color-function.html

@@ -18,7 +18,7 @@
   }
 </style>
 <script>
-for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3" ]) {
+for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3", "display-p3-linear" ]) {
     test_computed_value("color", `color(${colorSpace} 0% 0% 0%)`, `color(${colorSpace} 0 0 0)`);
     test_computed_value("color", `color(${colorSpace} 10% 10% 10%)`, `color(${colorSpace} 0.1 0.1 0.1)`);
     test_computed_value("color", `color(${colorSpace} .2 .2 25%)`, `color(${colorSpace} 0.2 0.2 0.25)`);
@@ -149,6 +149,26 @@ test_computed_value("color", "color(display-p3 1.00 none 0.2 / none)", "color(di
 test_computed_value("color", "color(display-p3 100% none 20% / 30%)", "color(display-p3 1 none 0.2 / 0.3)", "[Display P3 with alpha, percent and none]");
 test_computed_value("color", "color(display-p3 100% none 0.2 / 23.7%)", "color(display-p3 1 none 0.2 / 0.237)", "[Display P3 with alpha, number, percent and none]");
 
+// Opaque Display P3 Linear in color()
+test_computed_value("color", "color(display-p3-linear 1.00 0.50 0.200)", "color(display-p3-linear 1 0.5 0.2)", "[Display P3 Linear all numbers]");
+test_computed_value("color", "color(display-p3-linear 100% 50% 20%)", "color(display-p3-linear 1 0.5 0.2)", "[Display P3 Linear all percent]");
+test_computed_value("color", "color(display-p3-linear 100% 0.5 20%)", "color(display-p3-linear 1 0.5 0.2)", "[Display P3 Linear mixed number and percent]");
+test_computed_value("color", "color(display-p3-linear 1.00 50% 0.2)", "color(display-p3-linear 1 0.5 0.2)", "[Display P3 Linear mixed number and percent 2]");
+test_computed_value("color", "color(display-p3-linear none none none)", "color(display-p3-linear none none none)", "[Display P3 Linear all none]");
+test_computed_value("color", "color(display-p3-linear 1.00 none 0.2)", "color(display-p3-linear 1 none 0.2)", "[Display P3 Linear number and none]");
+test_computed_value("color", "color(display-p3-linear 100% none 20%)", "color(display-p3-linear 1 none 0.2)", "[Display P3 Linear percent and none]");
+test_computed_value("color", "color(display-p3-linear 100% none 0.2)", "color(display-p3-linear 1 none 0.2)", "[Display P3 Linear number, percent and none]");
+
+// non-unity alpha, Display P3 Linear in  color()
+test_computed_value("color", "color(display-p3-linear 1.00 0.50 0.200 / 0.6)", "color(display-p3-linear 1 0.5 0.2 / 0.6)", "[Display P3 Linear with alpha, all numbers]");
+test_computed_value("color", "color(display-p3-linear 100% 50% 20% / 60%)", "color(display-p3-linear 1 0.5 0.2 / 0.6)", "[Display P3 Linear with alpha, all percent]");
+test_computed_value("color", "color(display-p3-linear 100% 0.5 20% / 0.6)", "color(display-p3-linear 1 0.5 0.2 / 0.6)", "[Display P3 Linear with alpha, mixed number and percent]");
+test_computed_value("color", "color(display-p3-linear 1.00 50% 0.2 / 60%)", "color(display-p3-linear 1 0.5 0.2 / 0.6)", "[Display P3 Linear with alpha, mixed number and percent 2]");
+test_computed_value("color", "color(display-p3-linear none none none / none)", "color(display-p3-linear none none none / none)", "[Display P3 Linear with alpha, all none]");
+test_computed_value("color", "color(display-p3-linear 1.00 none 0.2 / none)", "color(display-p3-linear 1 none 0.2 / none)", "[Display P3 Linear with alpha, number and none]");
+test_computed_value("color", "color(display-p3-linear 100% none 20% / 30%)", "color(display-p3-linear 1 none 0.2 / 0.3)", "[Display P3 Linear with alpha, percent and none]");
+test_computed_value("color", "color(display-p3-linear 100% none 0.2 / 23.7%)", "color(display-p3-linear 1 none 0.2 / 0.237)", "[Display P3 Linear with alpha, number, percent and none]");
+
 // Opaque A98 RGB in color()
 test_computed_value("color", "color(a98-rgb 1.00 0.50 0.200)", "color(a98-rgb 1 0.5 0.2)", "[A98 RGB all numbers]");
 test_computed_value("color", "color(a98-rgb 100% 50% 20%)", "color(a98-rgb 1 0.5 0.2)", "[A98 RGB all percent]");

Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-invalid-color-mix-function.html

@@ -27,7 +27,6 @@
     test_invalid_value(`color`, `color-mix(in hsl hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // Missing comma after interpolation method.
     test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) hsl(30deg 30% 40%))`); // Missing comma between colors.
     test_invalid_value(`color`, `color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%), in hsl)`); // Interpolation method not at the beginning.
-    test_invalid_value(`color`, `color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // Missing interpolation method.
 
     test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))`); // Percentages less than 0 are not valid.
     test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 150%, hwb(30deg 30% 40%))`); // Percentages greater than 100 are not valid.
@@ -41,7 +40,6 @@
     test_invalid_value(`color`, `color-mix(in hwb hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // Missing comma after interpolation method.
     test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) hwb(30deg 30% 40%))`); // Missing comma between colors.
     test_invalid_value(`color`, `color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%), in hwb)`); // Interpolation method not at the beginning.
-    test_invalid_value(`color`, `color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // Missing interpolation method.
     test_invalid_value(`color`, `color-mix(in srgb, red, blue blue)`); // Too many parameters.
 
     for (const colorSpace of [ "lch", "oklch" ]) {
@@ -57,7 +55,6 @@
         test_invalid_value(`color`, `color-mix(in ${colorSpace} ${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // Missing comma after interpolation method.
         test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg) ${colorSpace}(50% 60 70deg))`); // Missing comma between colors.
         test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg), in ${colorSpace})`); // Interpolation method not at the beginning.
-        test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // Missing interpolation method.
     }
 
     for (const colorSpace of [ "lab", "oklab" ]) {
@@ -71,10 +68,9 @@
         test_invalid_value(`color`, `color-mix(in ${colorSpace} ${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70))`); // Missing comma after interpolation method.
         test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30) ${colorSpace}(50% 60 70))`); // Missing comma between colors.
         test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70), in ${colorSpace})`); // Interpolation method not at the beginning.
-        test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70))`); // Missing interpolation method.
     }
 
-    for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) {
+    for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "display-p3-linear", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) {
         test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) -10%, color(${colorSpace} .5 .6 .7))`); // Percentages less than 0 are not valid.
         test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 150%, color(${colorSpace} .5 .6 .7))`); // Percentages greater than 100 are not valid.
         test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 0%, color(${colorSpace} .5 .6 .7) 0%)`); // Sum of percengates cannot be 0%.
@@ -85,7 +81,6 @@
         test_invalid_value(`color`, `color-mix(in ${colorSpace} color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`); // Missing comma after interpolation method.
         test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) color(${colorSpace} .5 .6 .7))`); // Missing comma between colors.
         test_invalid_value(`color`, `color-mix(color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7), in ${colorSpace})`); // Interpolation method not at the beginning.
-        test_invalid_value(`color`, `color-mix(color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`); // Missing interpolation method.
     }
 </script>
 </body>

Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-valid-color-function.html

@@ -12,7 +12,7 @@
 </head>
 <body>
 <script>
-for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3", "xyz", "xyz-d50", "xyz-d65" ]) {
+for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3", "display-p3-linear", "xyz", "xyz-d50", "xyz-d65" ]) {
     const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace;
 
     test_valid_value("color", `color(${colorSpace} 0% 0% 0%)`, `color(${resultColorSpace} 0 0 0)`);

Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-valid-color-mix-function.html

@@ -104,6 +104,8 @@
     fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgba(143, 61, 61, 0.5))`, 1);
     fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / none))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgba(143, 61, 61, 0))`, 1);
 
+    fuzzy_test_valid_color(`color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(rgb(46, 56, 46), rgb(133, 102, 71))`); // Missing interpolation method.
+
     fuzzy_test_valid_color(`color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0))`, 1);
     fuzzy_test_valid_color(`color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0))`, 1);
     fuzzy_test_valid_color(`color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0))`, 1);
@@ -195,6 +197,8 @@
     fuzzy_test_valid_color(`color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
     fuzzy_test_valid_color(`color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
 
+    fuzzy_test_valid_color(`color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(rgb(26, 204, 26), rgb(153, 115, 77))`); // Missing interpolation method.
+
     // lch()
     fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30), lch(50 60 70))`);
     fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`);
@@ -260,6 +264,7 @@
     fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70))`);
     fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70 / 0.5))`);
     fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70 / none))`);
+    fuzzy_test_valid_color(`color-mix(lch(10 20 30), lch(50 60 70))`); // Missing interpolation method.
 
     // oklch()
     fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(0.5 0.6 70))`);
@@ -327,6 +332,8 @@
     fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / 0.5))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70 / 0.5))`);
     fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / none))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70 / none))`);
 
+    fuzzy_test_valid_color(`color-mix(oklch(0.1 20 30), oklch(0.5 60 70))`); // Missing interpolation method.
+
     // lab()
     fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30), lab(50 60 70))`);
     fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`);
@@ -358,38 +365,42 @@
     fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`);
     fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`);
 
+    fuzzy_test_valid_color(`color-mix(lab(10 20 30), lab(50 60 70))`); // Missing interpolation method.
+
     // oklab()
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`, `color-mix(oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))`, `color-mix(oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)`, `color-mix(oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)`, `color-mix(oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`, `color-mix(oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`, `color-mix(oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`, `color-mix(oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`);
 
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4), oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(oklab(0.1 0.2 0.3 / 0.4), oklab(0.5 0.6 0.7 / 0.8))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))`, `color-mix(oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)`, `color-mix(oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)`, `color-mix(oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 30%, oklab(0.5 0.6 0.7 / 0.8) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)`, `color-mix(oklab(0.1 0.2 0.3 / 0.4) 30%, oklab(0.5 0.6 0.7 / 0.8) 90%)`);
-    fuzzy_test_valid_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%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 12.5%, oklab(0.5 0.6 0.7 / 0.8) 37.5%)`);
+    fuzzy_test_valid_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%)`, `color-mix(oklab(0.1 0.2 0.3 / 0.4) 12.5%, oklab(0.5 0.6 0.7 / 0.8) 37.5%)`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 0%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(oklab(0.1 0.2 0.3 / 0.4) 0%, oklab(0.5 0.6 0.7 / 0.8))`);
 
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(none none none), oklab(none none none))`, `color-mix(in oklab, oklab(none none none), oklab(none none none))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(none none none), oklab(none none none))`, `color-mix(oklab(none none none), oklab(none none none))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`, `color-mix(oklab(none none none), oklab(0.5 0.6 0.7))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`, `color-mix(oklab(0.1 0.2 0.3), oklab(none none none))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`, `color-mix(oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`, `color-mix(oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`, `color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`, `color-mix(oklab(none 0.2 0.3), oklab(0.5 none 0.7))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`, `color-mix(oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`, `color-mix(oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`);
-    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`, `color-mix(oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`);
 
-    for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) {
+    fuzzy_test_valid_color(`color-mix(oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`); // Missing interpolation method.
+
+    for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "display-p3-linear", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) {
       const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace;
 
       fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
@@ -423,6 +434,8 @@
       fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7))`);
       fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / 0.5))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7 / 0.5))`);
       fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7 / none))`);
+
+      fuzzy_test_valid_color(`color-mix(color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color-mix(color(${resultColorSpace} .1 .2 .3), color(${resultColorSpace} .5 .6 .7))`); // Missing interpolation method.
     }
 
     // Test percent normalization

Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-valid.html

@@ -28,6 +28,7 @@ test_valid_value("color", "rgb(-2, 3, 4)", "rgb(0, 3, 4)");
 test_valid_value("color", "rgb(100, 200, 300)", "rgb(100, 200, 255)");
 test_valid_value("color", "rgb(20, 10, 0, -10)", "rgba(20, 10, 0, 0)");
 test_valid_value("color", "rgb(100%, 200%, 300%)", "rgb(255, 255, 255)");
+test_valid_value("color", "light-dark(black, white)");
 </script>
 </body>
 </html>