beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-28 18:40:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb/CSS: Add support for the srgb color space in color()

Browse source 
It makes the following WPT tests pass:
 - css/css-color/predefined-001.html
 - css/css-color/xyz-003.html
 - css/css-color/xyz-d50-003.html
 - css/css-color/xyz-d50-004.html
 - css/css-color/xyz-d65-003.html

Also we now render the reference of color-mix-currentcolor-nested-for-
color-property.html properly. Which means that it's now different from
the actual test, that is still rendered incorrectly. In other word, the
false positive for this test is now turned into a true negative.
This commit is contained in:
Lucas CHOLLET 2024-10-28 19:22:59 -04:00 committed by Sam Atkins
parent 3b04c983f1
commit a3ef24e30a
Notes: github-actions[bot] 2024-11-14 09:27:29 +00:00 
Author: https://github.com/LucasChollet
Commit: https://github.com/LadybirdBrowser/ladybird/commit/a3ef24e30a0
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2329
Reviewed-by: https://github.com/AtkinsSJ ✅
5 changed files with 37 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,6 +15,8 @@ namespace {
CSSColorValue::ColorType color_type_from_string_view(StringView color_space)
{
if (color_space == "srgb"sv)
return CSSColorValue::ColorType::sRGB;
if (color_space == "xyz-d50"sv)
return CSSColorValue::ColorType::XYZD50;
if (color_space == "xyz"sv || color_space == "xyz-d65")
@ -61,6 +63,11 @@ Color CSSColor::to_color(Optional<Layout::NodeWithStyle const&>) const
auto const c3 = resolve_with_reference_value(m_properties.channels[2], 100).value_or(0);
auto const alpha_val = resolve_alpha(m_properties.alpha).value_or(1);
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));
}
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 = { "xyz"sv, "xyz-d50"sv, "xyz-d65"sv };
static constexpr Array s_supported_color_space = { "srgb"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)

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

@ -23,13 +23,14 @@ public:
virtual bool has_color() const override { return true; }
enum class ColorType {
RGB,
RGB, // This is used by CSSRGB for rgb(...) and rgba(...).
HSL,
HWB,
Lab,
LCH,
OKLab,
OKLCH,
sRGB, // This is used by CSSColor for color(srgb ...).
XYZD50,
XYZD65,
};

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

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

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

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