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 display-p3 color space in color()

Browse source 
This color space is often used as a reference in WPT tests, having
support for it makes us pass 15 new tests:
  - css/css-color/display-p3-001.html
  - css/css-color/display-p3-002.html
  - css/css-color/display-p3-003.html
  - css/css-color/display-p3-004.html
  - css/css-color/display-p3-005.html
  - css/css-color/display-p3-006.html
  - css/css-color/lab-008.html
  - css/css-color/lch-008.html
  - css/css-color/oklab-008.html
  - css/css-color/oklch-008.html
  - css/css-color/predefined-005.html
  - css/css-color/predefined-006.html
  - css/css-color/xyz-005.html
  - css/css-color/xyz-d50-005.html
  - css/css-color/xyz-d65-005.html
This commit is contained in:
Lucas CHOLLET 2024-11-14 00:26:39 -05:00 committed by Andreas Kling
parent f949334a9a
commit 596a4e55dd
Notes: github-actions[bot] 2024-11-16 09:30:55 +00:00 
Author: https://github.com/LucasChollet
Commit: https://github.com/LadybirdBrowser/ladybird/commit/596a4e55dd0
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2374
17 changed files with 216 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
Libraries/LibGfx/Color.cpp
View file

@ -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

1
Libraries/LibGfx/Color.h
View file

@ -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);

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

@ -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<Layout::NodeWithStyle const&>) 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<u8>(clamp(255 * c, 0, 255)); };
return Color(to_u8(c1), to_u8(c2), to_u8(c3), to_u8(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, "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<CSSStyleValue> c1, ValueComparingNonnullRefPtr<CSSStyleValue> c2, ValueComparingNonnullRefPtr<CSSStyleValue> c3, ValueComparingNonnullRefPtr<CSSStyleValue> alpha)

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

@ -25,6 +25,7 @@ public:
enum class ColorType {
RGB, // This is used by CSSRGB for rgb(...) and rgba(...).
A98RGB,
DisplayP3,
HSL,
HWB,
Lab,

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

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

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

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

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

@ -0,0 +1,11 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>White square reference</title>
<style>
body { background-color: grey; }
.test { background-color: #FFFFFF; width: 12em; height: 12em; }
</style>
<body>
<p>Test passes if you see a white square, and no red.</p>
<div class="test"></div>
</body>

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

@ -0,0 +1,11 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>sRGB yellow square reference</title>
<style>
body { background-color: grey; }
.test { background-color: #FFFF00; width: 12em; height: 12em; }
</style>
<body>
<p>Test passes if you see a yellow square, and no red.</p>
<div class="test"></div>
</body>

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

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

16
Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-002.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: display-p3</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">
<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 with no alpha">
<style>
.test { background-color: red; width: 12em; height: 12em; }
.test { background-color: color(display-p3 0 0 0); } /* black (sRGB #000000) converted to display-p3 */
</style>
<body>
<p>Test passes if you see a black square, and no red.</p>
<div class="test"></div>
</body>

19
Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-003.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: display-p3</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">
<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 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 1 1 1) converted to sRGB */
.test { background-color: color(display-p3 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>

19
Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-004.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: display-p3</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">
<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-004-ref.html">
<meta name="assert" content="display-p3 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 0 1 0) converted to Lab */
.test { background-color: color(display-p3 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>

19
Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-005.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: display-p3</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">
<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 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 */
.test { background-color: color(display-p3 1 1 0.330897); }
</style>
<body>
<p>Test passes if you see a yellow square, and no red.</p>
<div class="ref"></div>
<div class="test"></div>
</body>

24
Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-006.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: display-p3 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">
<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 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 0.465377 0.532768 0.317713); }
/* lch(54% 35 118) converted to display-p3 */
.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>

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

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: predefined colorspaces, display-p3, 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/#valdef-color-display-p3">
<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-090-ref.html">
<meta name="assert" content="Color function with explicit display-p3 value as decimal matches sRGB #009900">
<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(display-p3 0.26374 0.59085 0.16434)}
</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-006.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: predefined colorspaces, display-p3, 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/#valdef-color-display-p3">
<link rel="match" href="../../../../expected/wpt-import/css/css-color/greensquare-090-ref.html">
<meta name="assert" content="Color function with explicit display-p3 value as percent matches sRGB #009900">
<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(display-p3 26.374% 59.085% 16.434%)}
</style>
<body>
<p>Test passes if you see a green square, and no red.</p>
<p class="ref"> </p>
<p class="test"> </p>
</body>