Kaynağa Gözat

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

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.
Lucas CHOLLET 8 ay önce
ebeveyn
işleme
a3ef24e30a

+ 7 - 0
Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp

@@ -15,6 +15,8 @@ namespace {
 
 
 CSSColorValue::ColorType color_type_from_string_view(StringView color_space)
 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)
     if (color_space == "xyz-d50"sv)
         return CSSColorValue::ColorType::XYZD50;
         return CSSColorValue::ColorType::XYZD50;
     if (color_space == "xyz"sv || color_space == "xyz-d65")
     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 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);
     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)
     if (color_type() == ColorType::XYZD50)
         return Color::from_xyz50(c1, c2, c3, alpha_val);
         return Color::from_xyz50(c1, c2, c3, alpha_val);
 
 

+ 1 - 1
Libraries/LibWeb/CSS/StyleValues/CSSColor.h

@@ -21,7 +21,7 @@ public:
     virtual Color to_color(Optional<Layout::NodeWithStyle const&>) const override;
     virtual Color to_color(Optional<Layout::NodeWithStyle const&>) const override;
     virtual String to_string() 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:
 private:
     CSSColor(ColorType color_type, ValueComparingNonnullRefPtr<CSSStyleValue> c1, ValueComparingNonnullRefPtr<CSSStyleValue> c2, ValueComparingNonnullRefPtr<CSSStyleValue> c3, ValueComparingNonnullRefPtr<CSSStyleValue> alpha)
     CSSColor(ColorType color_type, ValueComparingNonnullRefPtr<CSSStyleValue> c1, ValueComparingNonnullRefPtr<CSSStyleValue> c2, ValueComparingNonnullRefPtr<CSSStyleValue> c3, ValueComparingNonnullRefPtr<CSSStyleValue> alpha)

+ 2 - 1
Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h

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

+ 10 - 0
Tests/LibWeb/Ref/expected/wpt-import/css/css-color/greensquare-090-ref.html

@@ -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 - 0
Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-001.html

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