LibWeb/CSS: Add support for the srgb-linear color space in color()
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Push notes / build (push) Waiting to run

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
This commit is contained in:
Lucas CHOLLET 2024-11-15 08:16:35 -05:00 committed by Andreas Kling
parent 6319dedbcd
commit 7c2601f315
Notes: github-actions[bot] 2024-11-15 19:35:12 +00:00
11 changed files with 104 additions and 1 deletions

View file

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

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 = { "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)

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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