LibGfx+LibWeb/CSS: Add support for the lab() color function

The support in LibWeb is quite easy as the previous commits introduced
helpers to support lab-like colors.

Now for the methods in Color:
 - The formulas in `from_lab()` are derived from the CIEXYZ to CIELAB
   formulas the "Colorimetry" paper published by the CIE.
 - The conversion in `from_xyz50()` can be decomposed in multiple steps
   XYZ D50 -> XYZ D65 -> Linear sRGB -> sRGB. The two first conversion
   are done with a singular matrix operation. This matrix was generated
   with a Python script [1].

This commit makes us pass all the `css/css-color/lab-00*.html` WPT
tests (0 to 7 at the time of writing).

[1] Python script used to generate the XYZ D50 -> Linear sRGB
conversion:

```python
import numpy as np

# http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html
# First let's convert from D50 to D65 using the Bradford method.
m_a = np.array([
    [0.8951000, 0.2664000, -0.1614000],
    [-0.7502000, 1.7135000, 0.0367000],
    [0.0389000, -0.0685000, 1.0296000]
])

# D50
chromaticities_source = np.array([0.96422, 1, 0.82521])
# D65
chromaticities_destination = np.array([0.9505, 1, 1.0890])

cone_response_source = m_a @ chromaticities_source
cone_response_destination = m_a @ chromaticities_destination

cone_response_ratio = cone_response_destination / cone_response_source
m = np.linalg.inv(m_a) @ np.diagflat(cone_response_ratio) @ m_a

D50_to_D65 = m

# https://en.wikipedia.org/wiki/SRGB#From_CIE_XYZ_to_sRGB
# Then, the matrix to convert to linear sRGB.
xyz_65_to_srgb = np.array([
    [3.2406, - 1.5372, - 0.4986],
    [-0.9689, + 1.8758, 0.0415],
    [0.0557, - 0.2040, 1.0570]
])

# Finally, let's retrieve the final transformation.
xyz_50_to_srgb = xyz_65_to_srgb @ D50_to_D65

print(xyz_50_to_srgb)
```
This commit is contained in:
Lucas CHOLLET 2024-10-26 17:16:13 -04:00 committed by Andreas Kling
commit 3406b69614
Notes: github-actions[bot] 2024-10-27 09:28:33 +00:00
7 changed files with 116 additions and 0 deletions

View file

@ -3296,6 +3296,26 @@ Optional<Array<RefPtr<CSSStyleValue>, 4>> Parser::parse_lab_like_color_value(Tok
return Array { move(l), move(a), move(b), move(alpha) };
}
// https://www.w3.org/TR/css-color-4/#funcdef-lab
RefPtr<CSSStyleValue> Parser::parse_lab_color_value(TokenStream<ComponentValue>& outer_tokens)
{
// lab() = lab( [<percentage> | <number> | none]
// [ <percentage> | <number> | none]
// [ <percentage> | <number> | none]
// [ / [<alpha-value> | none] ]? )
auto maybe_color_values = parse_lab_like_color_value(outer_tokens, "lab"sv);
if (!maybe_color_values.has_value())
return {};
auto& color_values = *maybe_color_values;
return CSSLab::create(color_values[0].release_nonnull(),
color_values[1].release_nonnull(),
color_values[2].release_nonnull(),
color_values[3].release_nonnull());
}
// https://www.w3.org/TR/css-color-4/#funcdef-oklab
RefPtr<CSSStyleValue> Parser::parse_oklab_color_value(TokenStream<ComponentValue>& outer_tokens)
{
@ -3387,6 +3407,8 @@ RefPtr<CSSStyleValue> Parser::parse_color_value(TokenStream<ComponentValue>& tok
return hsl;
if (auto hwb = parse_hwb_color_value(tokens))
return hwb;
if (auto lab = parse_lab_color_value(tokens))
return lab;
if (auto oklab = parse_oklab_color_value(tokens))
return oklab;
if (auto oklch = parse_oklch_color_value(tokens))