From 7c2601f315305ca352c8adb4b28186bceb566387 Mon Sep 17 00:00:00 2001
From: Lucas CHOLLET <lucas.chollet@free.fr>
Date: Fri, 15 Nov 2024 08:16:35 -0500
Subject: [PATCH] LibWeb/CSS: Add support for the `srgb-linear` color space in
 `color()`

That makes us pass the following WPT tests:
 - css/css-color/srgb-linear-001.html
 - css/css-color/srgb-linear-002.html
 - css/css-color/srgb-linear-003.html
---
 Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp  |  5 +++++
 Libraries/LibWeb/CSS/StyleValues/CSSColor.h    |  2 +-
 .../LibWeb/CSS/StyleValues/CSSColorValue.h     |  1 +
 .../css/css-color/blacksquare-ref.html         | 10 ++++++++++
 .../css/css-color/srgb-linear-003-ref.html     | 11 +++++++++++
 .../css/css-color/srgb-linear-004-ref.html     | 10 ++++++++++
 .../css/css-color/srgb-linear-001.html         | 15 +++++++++++++++
 .../css/css-color/srgb-linear-002.html         | 15 +++++++++++++++
 .../css/css-color/srgb-linear-003.html         | 18 ++++++++++++++++++
 .../css/css-color/srgb-linear-004.html         | 17 +++++++++++++++++
 Tests/LibWeb/TestConfig.ini                    |  1 +
 11 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-color/blacksquare-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-color/srgb-linear-003-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-color/srgb-linear-004-ref.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-002.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-003.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-004.html

diff --git a/Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp b/Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp
index d77727a6840..39703551ed8 100644
--- a/Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp
@@ -17,6 +17,8 @@ CSSColorValue::ColorType color_type_from_string_view(StringView color_space)
 {
     if (color_space == "srgb"sv)
         return CSSColorValue::ColorType::sRGB;
+    if (color_space == "srgb-linear"sv)
+        return CSSColorValue::ColorType::sRGBLinear;
     if (color_space == "xyz-d50"sv)
         return CSSColorValue::ColorType::XYZD50;
     if (color_space == "xyz"sv || color_space == "xyz-d65")
@@ -68,6 +70,9 @@ Color CSSColor::to_color(Optional<Layout::NodeWithStyle const&>) const
         return Color(to_u8(c1), to_u8(c2), to_u8(c3), to_u8(alpha_val));
     }
 
+    if (color_type() == ColorType::sRGBLinear)
+        return Color::from_linear_srgb(c1, c2, c3, alpha_val);
+
     if (color_type() == ColorType::XYZD50)
         return Color::from_xyz50(c1, c2, c3, alpha_val);
 
diff --git a/Libraries/LibWeb/CSS/StyleValues/CSSColor.h b/Libraries/LibWeb/CSS/StyleValues/CSSColor.h
index 639a205538a..6e7f46a5523 100644
--- a/Libraries/LibWeb/CSS/StyleValues/CSSColor.h
+++ b/Libraries/LibWeb/CSS/StyleValues/CSSColor.h
@@ -21,7 +21,7 @@ public:
     virtual Color to_color(Optional<Layout::NodeWithStyle const&>) const override;
     virtual String to_string() const override;
 
-    static constexpr Array s_supported_color_space = { "srgb"sv, "xyz"sv, "xyz-d50"sv, "xyz-d65"sv };
+    static constexpr Array s_supported_color_space = { "srgb"sv, "srgb-linear"sv, "xyz"sv, "xyz-d50"sv, "xyz-d65"sv };
 
 private:
     CSSColor(ColorType color_type, ValueComparingNonnullRefPtr<CSSStyleValue> c1, ValueComparingNonnullRefPtr<CSSStyleValue> c2, ValueComparingNonnullRefPtr<CSSStyleValue> c3, ValueComparingNonnullRefPtr<CSSStyleValue> alpha)
diff --git a/Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h b/Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h
index 03f8a4765cb..5c771501357 100644
--- a/Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h
+++ b/Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h
@@ -31,6 +31,7 @@ public:
         OKLab,
         OKLCH,
         sRGB, // This is used by CSSColor for color(srgb ...).
+        sRGBLinear,
         XYZD50,
         XYZD65,
     };
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/blacksquare-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/blacksquare-ref.html
new file mode 100644
index 00000000000..14bc74b33fa
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/blacksquare-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Black square reference</title>
+<style>
+    .test { background-color: #000000; width: 12em; height: 12em; }
+</style>
+<body>
+    <p>Test passes if you see a black square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/srgb-linear-003-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/srgb-linear-003-ref.html
new file mode 100644
index 00000000000..9de25f6ba06
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/srgb-linear-003-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: CSS Color 4: srgb-linear</title>
+<style>
+    body { background-color: grey; }
+    .test { background-color: color(srgb 1 1 1); width: 12em; height: 12em; } /* color(srgb-linear 1 1 1) converted to sRGB */
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="test"></div>
+</body>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/srgb-linear-004-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/srgb-linear-004-ref.html
new file mode 100644
index 00000000000..a1574caa303
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/srgb-linear-004-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: CSS Color 4: srgb-linear</title>
+<style>
+    .test { background-color: lab(87.8185% -79.271 80.9946); width: 12em; height: 12em; } /* color(srgb-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>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-001.html
new file mode 100644
index 00000000000..3c81704a222
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-001.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: srgb-linear</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-srgb-linear">
+<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
+<meta name="assert" content="srgb-linear with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: color(srgb-linear 0 0.21586 0); } /* green (sRGB #008000) converted to srgb-linear */
+</style>
+<body>
+    <p>Test passes if you see a green square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-002.html
new file mode 100644
index 00000000000..e3494cac308
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-002.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: srgb-linear</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-srgb-linear">
+<link rel="match" href="../../../../expected/wpt-import/css/css-color/blacksquare-ref.html">
+<meta name="assert" content="srgb-linear with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: color(srgb-linear 0 0 0); } /* black (sRGB #000000) converted to srgb-linear */
+</style>
+<body>
+    <p>Test passes if you see a black square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-003.html
new file mode 100644
index 00000000000..39c5cbbba1a
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-003.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: srgb-linear</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-srgb-linear">
+<link rel="match" href="../../../../expected/wpt-import/css/css-color/srgb-linear-003-ref.html">
+<meta name="assert" content="srgb-linear with no alpha">
+<style>
+    body { background-color: grey; }
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: color(srgb 1 1 1); width: 12em; height: 6em; margin-bottom: 0; } /* color(srgb-linear 1 1 1) converted to sRGB */
+    .test { background-color: color(srgb-linear 1 1 1); }
+</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>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-004.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-004.html
new file mode 100644
index 00000000000..335694409cd
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/srgb-linear-004.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: srgb-linear</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-srgb-linear">
+<link rel="match" href="../../../../expected/wpt-import/css/css-color/srgb-linear-004-ref.html">
+<meta name="assert" content="srgb-linear with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: lab(87.8185% -79.271 80.9946); width: 12em; height: 6em; margin-bottom: 0; } /* color(srgb-linear 0 1 0) converted to Lab */
+    .test { background-color: color(srgb-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>
diff --git a/Tests/LibWeb/TestConfig.ini b/Tests/LibWeb/TestConfig.ini
index ea789db014b..d91e4da6911 100644
--- a/Tests/LibWeb/TestConfig.ini
+++ b/Tests/LibWeb/TestConfig.ini
@@ -59,6 +59,7 @@ Text/input/wpt-import/html/infrastructure/safe-passing-of-structured-data/resour
 Text/input/wpt-import/css/css-flexbox/flex-item-compressible-001.html
 
 ; WPT ref-tests that currently fail
+Ref/input/wpt-import/css/css-color/srgb-linear-004.html
 Ref/input/wpt-import/css/css-nesting/host-nesting-003.html
 Ref/input/wpt-import/css/css-nesting/host-nesting-004.html
 Ref/input/wpt-import/css/CSS2/floats/floats-wrap-top-below-bfc-002r.xht