diff --git a/Libraries/LibGfx/Color.cpp b/Libraries/LibGfx/Color.cpp index a5f9757a85c..df473a61163 100644 --- a/Libraries/LibGfx/Color.cpp +++ b/Libraries/LibGfx/Color.cpp @@ -433,6 +433,26 @@ Color Color::from_a98rgb(float r, float g, float b, float alpha) return from_xyz65(x, y, z, alpha); } +// https://www.w3.org/TR/css-color-4/#predefined-a98-rgb +Color Color::from_display_p3(float r, float g, float b, float alpha) +{ + auto to_linear = [](float c) { + if (c < 0.04045) + return c / 12.92; + return pow((c + 0.055) / (1.055), 2.4); + }; + + auto linear_r = to_linear(r); + 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; + 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); +} + Color Color::from_xyz50(float x, float y, float z, float alpha) { // See commit description for these values diff --git a/Libraries/LibGfx/Color.h b/Libraries/LibGfx/Color.h index e95cfbbcb3d..ba7e3dc58a1 100644 --- a/Libraries/LibGfx/Color.h +++ b/Libraries/LibGfx/Color.h @@ -183,6 +183,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_xyz50(float x, float y, float z, float alpha = 1.0f); static Color from_xyz65(float x, float y, float z, float alpha = 1.0f); diff --git a/Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp b/Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp index 5c3f58af9ea..6c3ec478e4a 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 == "a98-rgb"sv) return CSSColorValue::ColorType::A98RGB; + if (color_space == "display-p3"sv) + return CSSColorValue::ColorType::DisplayP3; if (color_space == "srgb"sv) return CSSColorValue::ColorType::sRGB; if (color_space == "srgb-linear"sv) @@ -70,6 +72,9 @@ Color CSSColor::to_color(Optional) const if (color_type() == ColorType::A98RGB) return Color::from_a98rgb(c1, c2, c3, alpha_val); + if (color_type() == ColorType::DisplayP3) + return Color::from_display_p3(c1, c2, c3, alpha_val); + if (color_type() == ColorType::sRGB) { auto const to_u8 = [](float c) -> u8 { return round_to(clamp(255 * c, 0, 255)); }; return Color(to_u8(c1), to_u8(c2), to_u8(c3), to_u8(alpha_val)); diff --git a/Libraries/LibWeb/CSS/StyleValues/CSSColor.h b/Libraries/LibWeb/CSS/StyleValues/CSSColor.h index 433f7576db7..c606f5faa87 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) const override; virtual String to_string() const override; - static constexpr Array s_supported_color_space = { "a98-rgb"sv, "srgb"sv, "srgb-linear"sv, "xyz"sv, "xyz-d50"sv, "xyz-d65"sv }; + static constexpr Array s_supported_color_space = { "a98-rgb"sv, "display-p3"sv, "srgb"sv, "srgb-linear"sv, "xyz"sv, "xyz-d50"sv, "xyz-d65"sv }; private: CSSColor(ColorType color_type, ValueComparingNonnullRefPtr c1, ValueComparingNonnullRefPtr c2, ValueComparingNonnullRefPtr c3, ValueComparingNonnullRefPtr alpha) diff --git a/Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h b/Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h index 3a2ae3e8793..c3aa5c83aa5 100644 --- a/Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h +++ b/Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h @@ -25,6 +25,7 @@ public: enum class ColorType { RGB, // This is used by CSSRGB for rgb(...) and rgba(...). A98RGB, + DisplayP3, HSL, HWB, Lab, diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/display-p3-004-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/display-p3-004-ref.html new file mode 100644 index 00000000000..fd1c8a67c76 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/display-p3-004-ref.html @@ -0,0 +1,10 @@ + + +CSS Color 4:display-p3 + + +

Test passes if you see a single square, and not two rectangles of different colors.

+
+ diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/mossgreensquare-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/mossgreensquare-ref.html new file mode 100644 index 00000000000..06f866c02dd --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/mossgreensquare-ref.html @@ -0,0 +1,10 @@ + + +Moss green (medium chroma) square reference + + +

Test passes if you see a moss green square, and no red.

+
+ diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/whitesquare-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/whitesquare-ref.html new file mode 100644 index 00000000000..ea7103759ba --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/whitesquare-ref.html @@ -0,0 +1,11 @@ + + +White square reference + + +

Test passes if you see a white square, and no red.

+
+ diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/yellowsquare-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/yellowsquare-ref.html new file mode 100644 index 00000000000..34463bc6ebb --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/yellowsquare-ref.html @@ -0,0 +1,11 @@ + + +sRGB yellow square reference + + +

Test passes if you see a yellow square, and no red.

+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-001.html new file mode 100644 index 00000000000..6cc251b1467 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-001.html @@ -0,0 +1,15 @@ + + +CSS Color 4: display-p3 + + + + + + +

Test passes if you see a green square, and no red.

+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-002.html new file mode 100644 index 00000000000..f3b95ab5f74 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-002.html @@ -0,0 +1,16 @@ + + +CSS Color 4: display-p3 + + + + + + + +

Test passes if you see a black square, and no red.

+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-003.html new file mode 100644 index 00000000000..3ff60b708da --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-003.html @@ -0,0 +1,19 @@ + + +CSS Color 4: display-p3 + + + + + + + +

Test passes if you see a white square, and no red.

+
+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-004.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-004.html new file mode 100644 index 00000000000..1e9313e7f38 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-004.html @@ -0,0 +1,19 @@ + + +CSS Color 4: display-p3 + + + + + + + + +

Test passes if you see a single square, and not two rectangles of different colors.

+
+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-005.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-005.html new file mode 100644 index 00000000000..8384fb70728 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-005.html @@ -0,0 +1,19 @@ + + +CSS Color 4: display-p3 + + + + + + + +

Test passes if you see a yellow square, and no red.

+
+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-006.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-006.html new file mode 100644 index 00000000000..76a51ce60c4 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-006.html @@ -0,0 +1,24 @@ + + +CSS Color 4: display-p3 and sRGB with medium chroma + + + + + + + + +

Test passes if you see a moss green square, and no red.

+
+
+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-005.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-005.html new file mode 100644 index 00000000000..1031a7b5039 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-005.html @@ -0,0 +1,17 @@ + + +CSS Color 4: predefined colorspaces, display-p3, decimal values + + + + + + +

Test passes if you see a green square, and no red.

+

+

+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-006.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-006.html new file mode 100644 index 00000000000..726d5a32348 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-006.html @@ -0,0 +1,17 @@ + + +CSS Color 4: predefined colorspaces, display-p3, percent values + + + + + + +

Test passes if you see a green square, and no red.

+

+

+