We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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 months ago
parent
3b04c983f1
commit
a3ef24e30a
5 changed files with 37 additions and 2 deletions
Split View Show Diff Stats
  1. 7 0
      Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp
  2. 1 1
      Libraries/LibWeb/CSS/StyleValues/CSSColor.h
  3. 2 1
      Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h
  4. 10 0
      Tests/LibWeb/Ref/expected/wpt-import/css/css-color/greensquare-090-ref.html
  5. 17 0
      Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-001.html

+ 7 - 0
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);

+ 1 - 1
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)

+ 2 - 1
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 - 0
Tests/LibWeb/Ref/expected/wpt-import/css/css-color/greensquare-090-ref.html
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 - 0
Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-001.html
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>

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5