beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-25 00:50:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

LibWeb/CSS: Add support for the prophoto-rgb color space in color()

Browse source 
That makes us pass the following WPT tests:
 - css/css-color/prophoto-rgb-001.html
 - css/css-color/prophoto-rgb-002.html
 - css/css-color/prophoto-rgb-003.html
 - css/css-color/prophoto-rgb-004.html
 - css/css-color/prophoto-rgb-005.html
 - css/css-color/predefined-009.html
 - css/css-color/predefined-010.html
This commit is contained in:
Lucas CHOLLET 2024-11-14 22:10:16 -05:00 committed by Andreas Kling
parent 596a4e55dd
commit 0b9c4b8adc
Notes: github-actions[bot] 2024-11-16 09:30:50 +00:00 
Author: https://github.com/LucasChollet
Commit: https://github.com/LadybirdBrowser/ladybird/commit/0b9c4b8adc1
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2374
15 changed files with 176 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
Libraries/LibGfx/Color.cpp
View file

@ -453,6 +453,29 @@ Color Color::from_display_p3(float r, float g, float b, float alpha)
return from_xyz65(x, y, z, alpha);
}
// https://www.w3.org/TR/css-color-4/#predefined-prophoto-rgb
Color Color::from_pro_photo_rgb(float r, float g, float b, float alpha)
{
auto to_linear = [](float c) -> float {
u8 sign = c < 0 ? -1 : 1;
float absolute = abs(c);
if (absolute <= 16. / 252)
return c / 16;
return sign * pow(c, 1.8);
};
auto linear_r = to_linear(r);
auto linear_g = to_linear(g);
auto linear_b = to_linear(b);
float x = 0.79776664 * linear_r + 0.13518130 * linear_g + 0.03134773 * linear_b;
float y = 0.28807483 * linear_r + 0.71183523 * linear_g + 0.00008994 * linear_b;
float z = 0.00000000 * linear_r + 0.00000000 * linear_g + 0.82510460 * linear_b;
return from_xyz50(x, y, z, alpha);
}
Color Color::from_xyz50(float x, float y, float z, float alpha)
{
// See commit description for these values

1
Libraries/LibGfx/Color.h
View file

@ -185,6 +185,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_pro_photo_rgb(float r, float g, 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);
static Color from_linear_srgb(float x, float y, float z, float alpha = 1.0f);

5
Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp
View file

@ -23,6 +23,8 @@ CSSColorValue::ColorType color_type_from_string_view(StringView color_space)
return CSSColorValue::ColorType::sRGB;
if (color_space == "srgb-linear"sv)
return CSSColorValue::ColorType::sRGBLinear;
if (color_space == "prophoto-rgb"sv)
return CSSColorValue::ColorType::ProPhotoRGB;
if (color_space == "xyz-d50"sv)
return CSSColorValue::ColorType::XYZD50;
if (color_space == "xyz"sv || color_space == "xyz-d65")
@ -83,6 +85,9 @@ Color CSSColor::to_color(Optional<Layout::NodeWithStyle const&>) const
if (color_type() == ColorType::sRGBLinear)
return Color::from_linear_srgb(c1, c2, c3, alpha_val);
if (color_type() == ColorType::ProPhotoRGB)
return Color::from_pro_photo_rgb(c1, c2, c3, alpha_val);
if (color_type() == ColorType::XYZD50)
return Color::from_xyz50(c1, c2, c3, alpha_val);

2
Libraries/LibWeb/CSS/StyleValues/CSSColor.h
View file

@ -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 = { "a98-rgb"sv, "display-p3"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, "prophoto-rgb"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)

1
Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h
View file

@ -34,6 +34,7 @@ public:
OKLCH,
sRGB, // This is used by CSSColor for color(srgb ...).
sRGBLinear,
ProPhotoRGB,
XYZD50,
XYZD65,
};

10
Tests/LibWeb/Ref/expected/wpt-import/css/css-color/greensquare-display-p3-ref.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Green square color(display-p3 0 1 0) reference</title>
<style>
.test { background-color: color(display-p3 0 1 0); width: 12em; height: 12em; }
</style>
<body>
<p>Test passes if you see a green square, and no red.</p>
<div class="test"></div>
</body>

11
Tests/LibWeb/Ref/expected/wpt-import/css/css-color/prophoto-rgb-003-ref.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: CSS Color 4: prophoto-rgb</title>
<style>
body { background-color: grey; }
.test { background-color: lab(100% 0.0131 0.0085); width: 12em; height: 12em; } /* color(prophoto-rgb 1 1 1) 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>

10
Tests/LibWeb/Ref/expected/wpt-import/css/css-color/prophoto-rgb-004-ref.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: CSS Color 4: prophoto-rgb</title>
<style>
.test { background-color: lab(87.5745% -186.6921 150.9905); width: 12em; height: 12em; } /* color(prophoto-rgb 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>

17
Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-009.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: predefined colorspaces, prophoto-rgb, decimal values</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined">
<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-090-ref.html">
<meta name="assert" content="Color function with explicit prophoto-rgb value as decimal matches sRGB #009900. Note that prophoto-rgb uses a D50 white so the chromatic adaptation step from Lab must be skipped.">
<style>
.test { background-color: red; width: 12em; height: 6em; margin-top:0}
.ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0}
.test {background-color: color(prophoto-rgb 0.2861 0.49131 0.16133)}
</style>
<body>
<p>Test passes if you see a green square, and no red.</p>
<p class="ref"> </p>
<p class="test"> </p>
</body>

17
Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-010.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: predefined colorspaces, prophoto-rgb, percent values</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined">
<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-090-ref.html">
<meta name="assert" content="Color function with explicit prophoto-rgb value as percent matches sRGB #009900. Note that prophoto-rgb uses a D50 white so the chromatic adaptation step from Lab must be skipped.">
<style>
.test { background-color: red; width: 12em; height: 6em; margin-top:0}
.ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0}
.test {background-color: color(prophoto-rgb 28.610% 49.131% 16.133%)}
</style>
<body>
<p>Test passes if you see a green square, and no red.</p>
<p class="ref"> </p>
<p class="test"> </p>
</body>

15
Tests/LibWeb/Ref/input/wpt-import/css/css-color/prophoto-rgb-001.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: prophoto-rgb</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-prophoto-rgb">
<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-ref.html">
<meta name="assert" content="prophoto-rgb with no alpha">
<style>
.test { background-color: red; width: 12em; height: 12em; }
.test { background-color: color(prophoto-rgb 0.230479 0.395789 0.129968); } /* green (sRGB #008000) converted to prophoto-rgb */
</style>
<body>
<p>Test passes if you see a green square, and no red.</p>
<div class="test"></div>
</body>

15
Tests/LibWeb/Ref/input/wpt-import/css/css-color/prophoto-rgb-002.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: prophoto-rgb</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-prophoto-rgb">
<link rel="match" href="../../../../expected/wpt-import/css/css-color/blacksquare-ref.html">
<meta name="assert" content="prophoto-rgb with no alpha">
<style>
.test { background-color: red; width: 12em; height: 12em; }
.test { background-color: color(prophoto-rgb 0 0 0); } /* black (sRGB #000000) converted to prophoto-rgb */
</style>
<body>
<p>Test passes if you see a black square, and no red.</p>
<div class="test"></div>
</body>

18
Tests/LibWeb/Ref/input/wpt-import/css/css-color/prophoto-rgb-003.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: prophoto-rgb</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-prophoto-rgb">
<link rel="match" href="../../../../expected/wpt-import/css/css-color/prophoto-rgb-003-ref.html">
<meta name="assert" content="prophoto-rgb with no alpha">
<style>
body { background-color: grey; }
.test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
.ref { background-color: lab(100% 0.0131 0.0085); width: 12em; height: 6em; margin-bottom: 0; } /* color(prophoto-rgb 1 1 1) converted to Lab */
.test { background-color: color(prophoto-rgb 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>

17
Tests/LibWeb/Ref/input/wpt-import/css/css-color/prophoto-rgb-004.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: prophoto-rgb</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-prophoto-rgb">
<link rel="match" href="../../../../expected/wpt-import/css/css-color/prophoto-rgb-004-ref.html">
<meta name="assert" content="prophoto-rgb with no alpha">
<style>
.test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
.ref { background-color: lab(87.5745% -186.6921 150.9905); width: 12em; height: 6em; margin-bottom: 0; } /* color(prophoto-rgb 0 1 0) converted to Lab */
.test { background-color: color(prophoto-rgb 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>

15
Tests/LibWeb/Ref/input/wpt-import/css/css-color/prophoto-rgb-005.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: prophoto-rgb</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-prophoto-rgb">
<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-display-p3-ref.html">
<meta name="assert" content="prophoto-rgb outside the sRGB gamut">
<style>
.test { background-color: red; width: 12em; height: 12em; }
.test { background-color: color(prophoto-rgb 0.42444 0.934918 0.190922); } /* green color(display-p3 0 1 0) converted to prophoto-rgb */
</style>
<body>
<p>Test passes if you see a green square, and no red.</p>
<div class="test"></div>
</body>