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
This commit is contained in:
Lucas CHOLLET 2024-11-13 21:33:03 -05:00 committed by Sam Atkins
parent a3ef24e30a
commit 1b38ebcc7f
Notes: github-actions[bot] 2024-11-14 09:27:24 +00:00
2 changed files with 20 additions and 3 deletions

View file

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

View file

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