Переглянути джерело

LibWeb/CSS: Resolve percentage values against 1 in CSSColor

This was a silly mistake on my end and percentages values are not
covered by device-independent color space, so I had to add support for
srgb to run a WPT test that made me realize the mistake.

This makes the following test pass:
 - css/css-color/predefined-002.html
Lucas CHOLLET 8 місяців тому
батько
коміт
1b38ebcc7f

+ 3 - 3
Libraries/LibWeb/CSS/StyleValues/CSSColor.cpp

@@ -58,9 +58,9 @@ String CSSColor::to_string() const
 
 Color CSSColor::to_color(Optional<Layout::NodeWithStyle const&>) const
 {
-    auto const c1 = resolve_with_reference_value(m_properties.channels[0], 100).value_or(0);
-    auto const c2 = resolve_with_reference_value(m_properties.channels[1], 100).value_or(0);
-    auto const c3 = resolve_with_reference_value(m_properties.channels[2], 100).value_or(0);
+    auto const c1 = resolve_with_reference_value(m_properties.channels[0], 1).value_or(0);
+    auto const c2 = resolve_with_reference_value(m_properties.channels[1], 1).value_or(0);
+    auto const c3 = resolve_with_reference_value(m_properties.channels[2], 1).value_or(0);
     auto const alpha_val = resolve_alpha(m_properties.alpha).value_or(1);
 
     if (color_type() == ColorType::sRGB) {

+ 17 - 0
Tests/LibWeb/Ref/input/wpt-import/css/css-color/predefined-002.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: predefined colorspaces, srgb, percent 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 percent 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% 60% 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>