Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-10-20 08:03:21 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Libraries/LibWeb/CSS/StyleValues/CSSLabLike.cpp

62 lines
2.1 KiB
C++
Raw Normal View History

LibWeb: Introduce color-function-specific style values Instead of CSSColorValue holding a Gfx::Color, make it an abstract class with subclasses for each different color function, to match the Typed-OM spec. This means moving the color calculations from the parsing code to the `to_color()` method on the style value. This lets us have calc() inside a color function, instead of having to fully resolve the color at parse time. The canvas fillStyle tests have been updated to reflect this. The other test change is Screenshot/css-color-functions.html: previously we produced slightly different colors for an alpha of 0.5 and one of 50%, and this incorrect behavior was baked into the test. So now it's more correct. :^)
2024-08-16 16:42:16 +01:00
/*
* Copyright (c) 2024, Sam Atkins <sam@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
LibWeb/CSS: Make CSSOKLab inherit from a new CSSLabLike class This class provides the common base for both CSSOKLab and the future CSSLab classes.
2024-10-26 16:14:04 -04:00
#include "CSSLabLike.h"
LibWeb: Introduce color-function-specific style values Instead of CSSColorValue holding a Gfx::Color, make it an abstract class with subclasses for each different color function, to match the Typed-OM spec. This means moving the color calculations from the parsing code to the `to_color()` method on the style value. This lets us have calc() inside a color function, instead of having to fully resolve the color at parse time. The canvas fillStyle tests have been updated to reflect this. The other test change is Screenshot/css-color-functions.html: previously we produced slightly different colors for an alpha of 0.5 and one of 50%, and this incorrect behavior was baked into the test. So now it's more correct. :^)
2024-08-16 16:42:16 +01:00
#include <AK/TypeCasts.h>
#include <LibWeb/CSS/Serialize.h>
Revert "LibWeb/CSS: Rename CalculatedStyleValue -> CSSMathValue" This reverts commit 76daba3069de4c184c6b2317d0c89b50f81a8c00. We're going to need separate types for the JS-exposed style values, so it doesn't make sense for us to match their names with our internal types.
2024-12-11 15:05:56 +00:00
#include <LibWeb/CSS/StyleValues/CalculatedStyleValue.h>
LibWeb: Introduce color-function-specific style values Instead of CSSColorValue holding a Gfx::Color, make it an abstract class with subclasses for each different color function, to match the Typed-OM spec. This means moving the color calculations from the parsing code to the `to_color()` method on the style value. This lets us have calc() inside a color function, instead of having to fully resolve the color at parse time. The canvas fillStyle tests have been updated to reflect this. The other test change is Screenshot/css-color-functions.html: previously we produced slightly different colors for an alpha of 0.5 and one of 50%, and this incorrect behavior was baked into the test. So now it's more correct. :^)
2024-08-16 16:42:16 +01:00
#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
namespace Web::CSS {
LibWeb/CSS: Make CSSOKLab inherit from a new CSSLabLike class This class provides the common base for both CSSOKLab and the future CSSLab classes.
2024-10-26 16:14:04 -04:00
bool CSSLabLike::equals(CSSStyleValue const& other) const
{
if (type() != other.type())
return false;
auto const& other_color = other.as_color();
if (color_type() != other_color.color_type())
return false;
AK+Everywhere: Rename `verify_cast` to `as` Follow-up to fc20e61e7249006247b43f84a3189d5a37fa103e.
2025-01-21 09:12:05 -05:00
auto const& other_lab_like = as<CSSLabLike>(other_color);
LibWeb/CSS: Make CSSOKLab inherit from a new CSSLabLike class This class provides the common base for both CSSOKLab and the future CSSLab classes.
2024-10-26 16:14:04 -04:00
return m_properties == other_lab_like.m_properties;
}
LibWeb: Introduce color-function-specific style values Instead of CSSColorValue holding a Gfx::Color, make it an abstract class with subclasses for each different color function, to match the Typed-OM spec. This means moving the color calculations from the parsing code to the `to_color()` method on the style value. This lets us have calc() inside a color function, instead of having to fully resolve the color at parse time. The canvas fillStyle tests have been updated to reflect this. The other test change is Screenshot/css-color-functions.html: previously we produced slightly different colors for an alpha of 0.5 and one of 50%, and this incorrect behavior was baked into the test. So now it's more correct. :^)
2024-08-16 16:42:16 +01:00
Color CSSOKLab::to_color(Optional<Layout::NodeWithStyle const&>) const
{
auto const l_val = clamp(resolve_with_reference_value(m_properties.l, 1.0).value_or(0), 0, 1);
auto const a_val = resolve_with_reference_value(m_properties.a, 0.4).value_or(0);
auto const b_val = resolve_with_reference_value(m_properties.b, 0.4).value_or(0);
auto const alpha_val = resolve_alpha(m_properties.alpha).value_or(1);
return Color::from_oklab(l_val, a_val, b_val, alpha_val);
}
// https://www.w3.org/TR/css-color-4/#serializing-oklab-oklch
LibWeb: Add mode flag to CSSStyleValue::to_string() This will be used to differentiate between serialization for resolved style (i.e window.getComputedStyle()) and serialization for all other purposes.
2024-12-07 00:59:49 +01:00
String CSSOKLab::to_string(SerializationMode) const
LibWeb: Introduce color-function-specific style values Instead of CSSColorValue holding a Gfx::Color, make it an abstract class with subclasses for each different color function, to match the Typed-OM spec. This means moving the color calculations from the parsing code to the `to_color()` method on the style value. This lets us have calc() inside a color function, instead of having to fully resolve the color at parse time. The canvas fillStyle tests have been updated to reflect this. The other test change is Screenshot/css-color-functions.html: previously we produced slightly different colors for an alpha of 0.5 and one of 50%, and this incorrect behavior was baked into the test. So now it's more correct. :^)
2024-08-16 16:42:16 +01:00
{
// FIXME: Do this properly, taking unresolved calculated values into account.
return serialize_a_srgb_value(to_color({}));
}
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) ```
2024-10-26 17:16:13 -04:00
Color CSSLab::to_color(Optional<Layout::NodeWithStyle const&>) const
{
auto const l_val = clamp(resolve_with_reference_value(m_properties.l, 100).value_or(0), 0, 100);
auto const a_val = resolve_with_reference_value(m_properties.a, 125).value_or(0);
auto const b_val = resolve_with_reference_value(m_properties.b, 125).value_or(0);
auto const alpha_val = resolve_alpha(m_properties.alpha).value_or(1);
return Color::from_lab(l_val, a_val, b_val, alpha_val);
}
// https://www.w3.org/TR/css-color-4/#serializing-lab-lch
LibWeb: Add mode flag to CSSStyleValue::to_string() This will be used to differentiate between serialization for resolved style (i.e window.getComputedStyle()) and serialization for all other purposes.
2024-12-07 00:59:49 +01:00
String CSSLab::to_string(SerializationMode) const
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) ```
2024-10-26 17:16:13 -04:00
{
// FIXME: Do this properly, taking unresolved calculated values into account.
return serialize_a_srgb_value(to_color({}));
}
LibWeb: Introduce color-function-specific style values Instead of CSSColorValue holding a Gfx::Color, make it an abstract class with subclasses for each different color function, to match the Typed-OM spec. This means moving the color calculations from the parsing code to the `to_color()` method on the style value. This lets us have calc() inside a color function, instead of having to fully resolve the color at parse time. The canvas fillStyle tests have been updated to reflect this. The other test change is Screenshot/css-color-functions.html: previously we produced slightly different colors for an alpha of 0.5 and one of 50%, and this incorrect behavior was baked into the test. So now it's more correct. :^)
2024-08-16 16:42:16 +01:00
}
Reference in a new issue Copy permalink