mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-22 07:30:19 +00:00
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
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:
parent
6319dedbcd
commit
7c2601f315
Notes:
github-actions[bot]
2024-11-15 19:35:12 +00:00
Author: https://github.com/LucasChollet Commit: https://github.com/LadybirdBrowser/ladybird/commit/7c2601f3153 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2338
11 changed files with 104 additions and 1 deletions
|
@ -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);
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -31,6 +31,7 @@ public:
|
|||
OKLab,
|
||||
OKLCH,
|
||||
sRGB, // This is used by CSSColor for color(srgb ...).
|
||||
sRGBLinear,
|
||||
XYZD50,
|
||||
XYZD65,
|
||||
};
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue