mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-23 13:05:12 +00:00
LibWeb: Implement the color-mix() function
This takes 2 color values and returns the result of mixing them by a given amount.
This commit is contained in:
Tim Ledbetter
Andreas Kling
parent
a14711a9d7
commit
9cf04f40f6
Notes:
github-actions[bot]
2025-04-22 10:45:32 +00:00
Author: https://github.com/tcl3 Commit: https://github.com/LadybirdBrowser/ladybird/commit/9cf04f40f63 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4419
18 changed files with 1946 additions and 0 deletions
|
|
@ -154,6 +154,7 @@ set(SOURCES
|
|||
CSS/StyleValues/CounterDefinitionsStyleValue.cpp
|
||||
CSS/StyleValues/CounterStyleValue.cpp
|
||||
CSS/StyleValues/ColorFunctionStyleValue.cpp
|
||||
CSS/StyleValues/ColorMixStyleValue.cpp
|
||||
CSS/StyleValues/CSSColorValue.cpp
|
||||
CSS/StyleValues/CSSHSL.cpp
|
||||
CSS/StyleValues/CSSHWB.cpp
|
||||
|
|
|
|||
|
|
@ -329,6 +329,12 @@
|
|||
"ui-monospace",
|
||||
"ui-rounded"
|
||||
],
|
||||
"hue-interpolation-method": [
|
||||
"shorter",
|
||||
"longer",
|
||||
"increasing",
|
||||
"decreasing"
|
||||
],
|
||||
"image-rendering": [
|
||||
"auto",
|
||||
"crisp-edges",
|
||||
|
|
@ -469,6 +475,12 @@
|
|||
"all",
|
||||
"none"
|
||||
],
|
||||
"polar-color-space": [
|
||||
"hsl",
|
||||
"hwb",
|
||||
"lch",
|
||||
"oklch"
|
||||
],
|
||||
"positioning": [
|
||||
"absolute",
|
||||
"fixed",
|
||||
|
|
|
|||
|
|
@ -141,6 +141,7 @@
|
|||
"dashed",
|
||||
"decimal",
|
||||
"decimal-leading-zero",
|
||||
"decreasing",
|
||||
"default",
|
||||
"diagonal-fractions",
|
||||
"difference",
|
||||
|
|
@ -206,10 +207,13 @@
|
|||
"historical-ligatures",
|
||||
"horizontal-tb",
|
||||
"hover",
|
||||
"hsl",
|
||||
"hue",
|
||||
"hwb",
|
||||
"inactiveborder",
|
||||
"inactivecaption",
|
||||
"inactivecaptiontext",
|
||||
"increasing",
|
||||
"infinite",
|
||||
"infinity",
|
||||
"infobackground",
|
||||
|
|
@ -249,6 +253,7 @@
|
|||
"large",
|
||||
"larger",
|
||||
"layout",
|
||||
"lch",
|
||||
"left",
|
||||
"legacy",
|
||||
"less",
|
||||
|
|
@ -262,6 +267,7 @@
|
|||
"list-item",
|
||||
"listbox",
|
||||
"local",
|
||||
"longer",
|
||||
"lower-alpha",
|
||||
"lower-latin",
|
||||
"lower-roman",
|
||||
|
|
@ -313,6 +319,7 @@
|
|||
"nwse-resize",
|
||||
"oblique",
|
||||
"off",
|
||||
"oklch",
|
||||
"oldstyle-nums",
|
||||
"on",
|
||||
"opaque",
|
||||
|
|
@ -389,6 +396,7 @@
|
|||
"semi-expanded",
|
||||
"separate",
|
||||
"serif",
|
||||
"shorter",
|
||||
"sideways-lr",
|
||||
"sideways-rl",
|
||||
"simplified",
|
||||
|
|
|
|||
|
|
@ -324,6 +324,7 @@ private:
|
|||
RefPtr<CSSStyleValue const> parse_lch_color_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<CSSStyleValue const> parse_oklch_color_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<CSSStyleValue const> parse_color_function(TokenStream<ComponentValue>&);
|
||||
RefPtr<CSSStyleValue const> parse_color_mix_function(TokenStream<ComponentValue>&);
|
||||
RefPtr<CSSStyleValue const> parse_light_dark_color_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<CSSStyleValue const> parse_color_value(TokenStream<ComponentValue>&);
|
||||
RefPtr<CSSStyleValue const> parse_color_scheme_value(TokenStream<ComponentValue>&);
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
#include <LibWeb/CSS/StyleValues/CSSLightDark.h>
|
||||
#include <LibWeb/CSS/StyleValues/CSSRGB.h>
|
||||
#include <LibWeb/CSS/StyleValues/ColorFunctionStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ColorMixStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/ConicGradientStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/CounterDefinitionsStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/CounterStyleValue.h>
|
||||
|
|
@ -1691,6 +1692,130 @@ RefPtr<CSSStyleValue const> Parser::parse_color_function(TokenStream<ComponentVa
|
|||
alpha.release_nonnull());
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-color-5/#color-mix
|
||||
RefPtr<CSSStyleValue const> Parser::parse_color_mix_function(TokenStream<ComponentValue>& tokens)
|
||||
{
|
||||
auto parse_color_interpolation_method = [this](TokenStream<ComponentValue>& function_tokens) -> Optional<ColorMixStyleValue::ColorInterpolationMethod> {
|
||||
// <rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
|
||||
// <polar-color-space> = hsl | hwb | lch | oklch
|
||||
// <custom-color-space> = <dashed-ident>
|
||||
// <hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue
|
||||
// <color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]
|
||||
function_tokens.discard_whitespace();
|
||||
if (!function_tokens.consume_a_token().is_ident("in"sv))
|
||||
return {};
|
||||
function_tokens.discard_whitespace();
|
||||
|
||||
String color_space;
|
||||
Optional<HueInterpolationMethod> hue_interpolation_method;
|
||||
auto color_space_value = parse_keyword_value(function_tokens);
|
||||
if (color_space_value) {
|
||||
auto color_space_keyword = color_space_value->to_keyword();
|
||||
color_space = MUST(String::from_utf8(string_from_keyword(color_space_keyword)));
|
||||
if (auto polar_color_space = keyword_to_polar_color_space(color_space_keyword); polar_color_space.has_value()) {
|
||||
function_tokens.discard_whitespace();
|
||||
if (auto hue_interpolation_method_keyword = parse_keyword_value(function_tokens)) {
|
||||
hue_interpolation_method = keyword_to_hue_interpolation_method(hue_interpolation_method_keyword->to_keyword());
|
||||
if (!hue_interpolation_method.has_value())
|
||||
return {};
|
||||
|
||||
function_tokens.discard_whitespace();
|
||||
if (!function_tokens.consume_a_token().is_ident("hue"sv))
|
||||
return {};
|
||||
|
||||
function_tokens.discard_whitespace();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
auto color_space_token = function_tokens.consume_a_token();
|
||||
if (color_space_token.token().type() != Token::Type::Ident)
|
||||
return {};
|
||||
color_space = color_space_token.token().ident().to_string();
|
||||
}
|
||||
function_tokens.discard_whitespace();
|
||||
|
||||
return ColorMixStyleValue::ColorInterpolationMethod {
|
||||
.color_space = color_space,
|
||||
.hue_interpolation_method = hue_interpolation_method,
|
||||
};
|
||||
};
|
||||
|
||||
auto parse_component = [this](TokenStream<ComponentValue>& function_tokens) -> Optional<ColorMixStyleValue::ColorMixComponent> {
|
||||
function_tokens.discard_whitespace();
|
||||
auto percentage_style_value = parse_percentage_value(function_tokens);
|
||||
function_tokens.discard_whitespace();
|
||||
auto color_style_value = parse_color_value(function_tokens);
|
||||
if (!color_style_value)
|
||||
return {};
|
||||
function_tokens.discard_whitespace();
|
||||
if (!percentage_style_value) {
|
||||
percentage_style_value = parse_percentage_value(function_tokens);
|
||||
function_tokens.discard_whitespace();
|
||||
}
|
||||
if (percentage_style_value && !percentage_style_value->is_calculated()) {
|
||||
auto percentage = percentage_style_value->as_percentage().percentage().value();
|
||||
if (percentage < 0 || percentage > 100)
|
||||
return {};
|
||||
}
|
||||
Optional<PercentageOrCalculated> percentage_or_calculated;
|
||||
if (percentage_style_value) {
|
||||
if (percentage_style_value->is_calculated()) {
|
||||
percentage_or_calculated = PercentageOrCalculated { percentage_style_value->as_calculated() };
|
||||
} else if (percentage_style_value->is_percentage()) {
|
||||
percentage_or_calculated = PercentageOrCalculated { percentage_style_value->as_percentage().percentage() };
|
||||
} else {
|
||||
VERIFY_NOT_REACHED();
|
||||
}
|
||||
}
|
||||
|
||||
return ColorMixStyleValue::ColorMixComponent {
|
||||
.color = color_style_value.release_nonnull(),
|
||||
.percentage = move(percentage_or_calculated),
|
||||
};
|
||||
};
|
||||
|
||||
// color-mix() = color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})
|
||||
auto transaction = tokens.begin_transaction();
|
||||
tokens.discard_whitespace();
|
||||
|
||||
auto const& function_token = tokens.consume_a_token();
|
||||
if (!function_token.is_function("color-mix"sv))
|
||||
return {};
|
||||
|
||||
auto context_guard = push_temporary_value_parsing_context(FunctionContext { function_token.function().name });
|
||||
auto function_tokens = TokenStream { function_token.function().value };
|
||||
auto color_interpolation_method = parse_color_interpolation_method(function_tokens);
|
||||
if (!color_interpolation_method.has_value())
|
||||
return {};
|
||||
function_tokens.discard_whitespace();
|
||||
if (!function_tokens.consume_a_token().is(Token::Type::Comma))
|
||||
return {};
|
||||
|
||||
auto first_component = parse_component(function_tokens);
|
||||
if (!first_component.has_value())
|
||||
return {};
|
||||
tokens.discard_whitespace();
|
||||
if (!function_tokens.consume_a_token().is(Token::Type::Comma))
|
||||
return {};
|
||||
|
||||
auto second_component = parse_component(function_tokens);
|
||||
if (!second_component.has_value())
|
||||
return {};
|
||||
|
||||
if (first_component->percentage.has_value() && second_component->percentage.has_value()
|
||||
&& !first_component->percentage->is_calculated() && !second_component->percentage->is_calculated()
|
||||
&& first_component->percentage->value().value() == 0 && second_component->percentage->value().value() == 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
tokens.discard_whitespace();
|
||||
if (function_tokens.has_next_token())
|
||||
return {};
|
||||
|
||||
transaction.commit();
|
||||
return ColorMixStyleValue::create(move(*color_interpolation_method), move(*first_component), move(*second_component));
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-color-5/#funcdef-light-dark
|
||||
RefPtr<CSSStyleValue const> Parser::parse_light_dark_color_value(TokenStream<ComponentValue>& outer_tokens)
|
||||
{
|
||||
|
|
@ -1742,6 +1867,9 @@ RefPtr<CSSStyleValue const> Parser::parse_color_value(TokenStream<ComponentValue
|
|||
if (auto color = parse_color_function(tokens))
|
||||
return color;
|
||||
|
||||
if (auto color = parse_color_mix_function(tokens))
|
||||
return color;
|
||||
|
||||
if (auto rgb = parse_rgb_color_value(tokens))
|
||||
return rgb;
|
||||
if (auto hsl = parse_hsl_color_value(tokens))
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ public:
|
|||
XYZD50,
|
||||
XYZD65,
|
||||
LightDark, // This is used by CSSLightDark for light-dark(..., ...).
|
||||
ColorMix,
|
||||
};
|
||||
ColorType color_type() const { return m_color_type; }
|
||||
ColorSyntax color_syntax() const { return m_color_syntax; }
|
||||
|
|
|
|||
189
Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.cpp
Normal file
189
Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.cpp
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
/*
|
||||
* Copyright (c) 2025, Tim Ledbetter <tim.ledbetter@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include "ColorMixStyleValue.h"
|
||||
#include <AK/TypeCasts.h>
|
||||
#include <LibWeb/CSS/Interpolation.h>
|
||||
#include <LibWeb/Layout/Node.h>
|
||||
|
||||
namespace Web::CSS {
|
||||
|
||||
ValueComparingNonnullRefPtr<ColorMixStyleValue const> ColorMixStyleValue::create(ColorInterpolationMethod interpolation_method, ColorMixComponent first_component, ColorMixComponent second_component)
|
||||
{
|
||||
return adopt_ref(*new (nothrow) ColorMixStyleValue(move(interpolation_method), move(first_component), move(second_component)));
|
||||
}
|
||||
|
||||
ColorMixStyleValue::ColorMixStyleValue(ColorInterpolationMethod color_interpolation_method, ColorMixComponent first_component, ColorMixComponent second_component)
|
||||
: CSSColorValue(ColorType::ColorMix, ColorSyntax::Modern)
|
||||
, m_properties {
|
||||
.color_interpolation_method = move(color_interpolation_method),
|
||||
.first_component = move(first_component),
|
||||
.second_component = move(second_component)
|
||||
}
|
||||
{
|
||||
}
|
||||
|
||||
bool ColorMixStyleValue::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;
|
||||
auto const& other_color_mix = as<ColorMixStyleValue>(other_color);
|
||||
return m_properties == other_color_mix.m_properties;
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-color-5/#serial-color-mix
|
||||
String ColorMixStyleValue::to_string(SerializationMode mode) const
|
||||
{
|
||||
auto serialize_first_percentage = [](StringBuilder& builder, Optional<PercentageOrCalculated> const& p1, Optional<PercentageOrCalculated> const& p2) {
|
||||
// if BOTH the first percentage p1 and second percentage p2 are specified:
|
||||
if (p1.has_value() && p2.has_value()) {
|
||||
// If both p1 equals 50% and p2 equals 50%, nothing is serialized.
|
||||
if (!p1->is_calculated() && !p2->is_calculated() && p1->value().value() == 50 && p2->value().value() == 50)
|
||||
return;
|
||||
|
||||
// else, p1 is serialized as is.
|
||||
builder.appendff(" {}", p1->to_string());
|
||||
}
|
||||
// else if ONLY the first percentage p1 is specified:
|
||||
else if (p1.has_value()) {
|
||||
// If p1 is equal to 50%, nothing is serialized.
|
||||
if (!p1->is_calculated() && p1->value().value() == 50)
|
||||
return;
|
||||
|
||||
// else, p1 is serialized as is.
|
||||
builder.appendff(" {}", p1->to_string());
|
||||
}
|
||||
// else if ONLY the second percentage p2 is specified:
|
||||
else if (p2.has_value()) {
|
||||
// if p2 equals 50%, nothing is serialized.
|
||||
if (!p2->is_calculated() && p2->value().value() == 50)
|
||||
return;
|
||||
|
||||
// if p2 is not calc(), the value of 100% - p2 is serialized.
|
||||
if (!p2->is_calculated())
|
||||
builder.appendff(" {}%", 100 - p2->value().value());
|
||||
|
||||
// else, nothing is serialized.
|
||||
}
|
||||
// else if NEITHER is specified:
|
||||
else {
|
||||
// nothing is serialized.
|
||||
}
|
||||
};
|
||||
|
||||
auto serialize_second_percentage = [](StringBuilder& builder, Optional<PercentageOrCalculated> const& p1, Optional<PercentageOrCalculated> const& p2) {
|
||||
// If BOTH the first percentage p1 and second percentages p2 are specified:
|
||||
if (p1.has_value() && p2.has_value()) {
|
||||
// if neither p1 nor p2 is calc(), and p1 + p2 equals 100%, nothing is serialized.
|
||||
if (!p1->is_calculated() && !p2->is_calculated() && p1->value().value() + p2->value().value() == 100)
|
||||
return;
|
||||
|
||||
// else, p2 is serialized as is.
|
||||
builder.appendff(" {}", p2->to_string());
|
||||
}
|
||||
// else if ONLY the first percentage p1 is specified:
|
||||
else if (p1.has_value()) {
|
||||
// nothing is serialized.
|
||||
}
|
||||
// else if ONLY the second percentage p2 is specified:
|
||||
else if (p2.has_value()) {
|
||||
// if p2 equals 50%, nothing is serialized.
|
||||
if (!p2->is_calculated() && p2->value().value() == 50)
|
||||
return;
|
||||
|
||||
// if p2 is not calc(), nothing is serialized.
|
||||
if (!p2->is_calculated())
|
||||
return;
|
||||
|
||||
// else, p2 is serialized as is.
|
||||
builder.appendff(" {}", p2->to_string());
|
||||
}
|
||||
// else if NEITHER is specified:
|
||||
else {
|
||||
// nothing is serialized.
|
||||
}
|
||||
};
|
||||
|
||||
StringBuilder builder;
|
||||
builder.appendff("color-mix(in {}", m_properties.color_interpolation_method.color_space);
|
||||
if (m_properties.color_interpolation_method.hue_interpolation_method.value_or(HueInterpolationMethod::Shorter) != HueInterpolationMethod::Shorter)
|
||||
builder.appendff(" {} hue", CSS::to_string(*m_properties.color_interpolation_method.hue_interpolation_method));
|
||||
builder.append(", "sv);
|
||||
builder.append(m_properties.first_component.color->to_string(mode));
|
||||
serialize_first_percentage(builder, m_properties.first_component.percentage, m_properties.second_component.percentage);
|
||||
builder.appendff(", {}", m_properties.second_component.color->to_string(mode));
|
||||
serialize_second_percentage(builder, m_properties.first_component.percentage, m_properties.second_component.percentage);
|
||||
builder.append(')');
|
||||
return MUST(builder.to_string());
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-color-5/#color-mix-percent-norm
|
||||
ColorMixStyleValue::PercentageNormalizationResult ColorMixStyleValue::normalize_percentages() const
|
||||
{
|
||||
auto resolve_percentage = [&](Optional<PercentageOrCalculated> const& percentage_or_calculated) -> Optional<Percentage> {
|
||||
if (!percentage_or_calculated.has_value())
|
||||
return {};
|
||||
if (!percentage_or_calculated->is_calculated())
|
||||
return percentage_or_calculated->value();
|
||||
return percentage_or_calculated->resolved({});
|
||||
};
|
||||
|
||||
// 1. Let p1 be the first percentage and p2 the second one.
|
||||
auto p1 = resolve_percentage(m_properties.first_component.percentage);
|
||||
auto p2 = resolve_percentage(m_properties.second_component.percentage);
|
||||
double alpha_multiplier = 0;
|
||||
|
||||
// 2. If both percentages are omitted, they each default to 50% (an equal mix of the two colors).
|
||||
if (!p1.has_value() && !p2.has_value()) {
|
||||
p1 = Percentage(50);
|
||||
p2 = Percentage(50);
|
||||
}
|
||||
// 3. Otherwise, if p2 is omitted, it becomes 100% - p1
|
||||
else if (!p2.has_value()) {
|
||||
p2 = Percentage(100 - p1->value());
|
||||
}
|
||||
// 4. Otherwise, if p1 is omitted, it becomes 100% - p2
|
||||
else if (!p1.has_value()) {
|
||||
p1 = Percentage(100 - p2->value());
|
||||
}
|
||||
// 5. Otherwise, if both are provided and add up to greater than 100%, they are scaled accordingly so that they add up to 100%.
|
||||
else if (p1->value() + p2->value() > 100) {
|
||||
auto sum = p1->value() + p2->value();
|
||||
p1 = Percentage((p1->value() / sum) * 100);
|
||||
p2 = Percentage((p2->value() / sum) * 100);
|
||||
}
|
||||
// 6. Otherwise, if both are provided and add up to less than 100%, the sum is saved as an alpha multiplier. If the sum is greater than zero, they are then scaled accordingly so that they add up to 100%.
|
||||
else if (p1->value() + p2->value() < 100) {
|
||||
auto sum = p1->value() + p2->value();
|
||||
alpha_multiplier = sum / 100;
|
||||
if (sum > 0) {
|
||||
p1 = Percentage((p1->value() / sum) * 100);
|
||||
p2 = Percentage((p2->value() / sum) * 100);
|
||||
}
|
||||
}
|
||||
|
||||
VERIFY(p1.has_value());
|
||||
VERIFY(p2.has_value());
|
||||
|
||||
return PercentageNormalizationResult { .p1 = *p1, .p2 = *p2, .alpha_multiplier = alpha_multiplier };
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-color-5/#color-mix-result
|
||||
Color ColorMixStyleValue::to_color(Optional<Layout::NodeWithStyle const&> node) const
|
||||
{
|
||||
// FIXME: Do this in a spec-compliant way.
|
||||
// Our color interpolation doesn't currently take the color space or hue interpolation method into account.
|
||||
auto normalized_percentages = normalize_percentages();
|
||||
auto from_color = m_properties.first_component.color->to_color(node);
|
||||
auto to_color = m_properties.second_component.color->to_color(node);
|
||||
auto delta = normalized_percentages.p2.value() / 100;
|
||||
return interpolate_color(from_color, to_color, delta);
|
||||
}
|
||||
|
||||
}
|
||||
56
Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.h
Normal file
56
Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.h
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
/*
|
||||
* Copyright (c) 2025, Tim Ledbetter <tim.ledbetter@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#pragma once
|
||||
|
||||
#include <LibWeb/CSS/CalculatedOr.h>
|
||||
#include <LibWeb/CSS/StyleValues/CSSColorValue.h>
|
||||
|
||||
namespace Web::CSS {
|
||||
|
||||
class ColorMixStyleValue final : public CSSColorValue {
|
||||
public:
|
||||
virtual ~ColorMixStyleValue() override = default;
|
||||
|
||||
struct ColorInterpolationMethod {
|
||||
String color_space;
|
||||
Optional<HueInterpolationMethod> hue_interpolation_method;
|
||||
bool operator==(ColorInterpolationMethod const&) const = default;
|
||||
};
|
||||
|
||||
struct ColorMixComponent {
|
||||
ValueComparingNonnullRefPtr<CSSStyleValue const> color;
|
||||
Optional<PercentageOrCalculated> percentage;
|
||||
bool operator==(ColorMixComponent const&) const = default;
|
||||
};
|
||||
|
||||
static ValueComparingNonnullRefPtr<ColorMixStyleValue const> create(ColorInterpolationMethod, ColorMixComponent first_component, ColorMixComponent second_component);
|
||||
|
||||
virtual bool equals(CSSStyleValue const&) const override;
|
||||
virtual Color to_color(Optional<Layout::NodeWithStyle const&>) const override;
|
||||
virtual String to_string(SerializationMode) const override;
|
||||
|
||||
private:
|
||||
struct Properties {
|
||||
ColorInterpolationMethod color_interpolation_method;
|
||||
ColorMixComponent first_component;
|
||||
ColorMixComponent second_component;
|
||||
bool operator==(Properties const&) const = default;
|
||||
};
|
||||
|
||||
ColorMixStyleValue(ColorInterpolationMethod, ColorMixComponent first_component, ColorMixComponent second_component);
|
||||
|
||||
struct PercentageNormalizationResult {
|
||||
Percentage p1;
|
||||
Percentage p2;
|
||||
double alpha_multiplier;
|
||||
};
|
||||
PercentageNormalizationResult normalize_percentages() const;
|
||||
|
||||
Properties m_properties;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -151,6 +151,7 @@ class BasicShapeStyleValue;
|
|||
class BorderRadiusStyleValue;
|
||||
class CalculatedStyleValue;
|
||||
class Clip;
|
||||
class ColorMixStyleValue;
|
||||
class ColorSchemeStyleValue;
|
||||
class ConicGradientStyleValue;
|
||||
class ContentStyleValue;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ source_set("StyleValues") {
|
|||
"CSSRGB.cpp",
|
||||
"CalculatedStyleValue.cpp",
|
||||
"ColorFunctionStyleValue.cpp",
|
||||
"ColorMixStyleValue.cpp",
|
||||
"ConicGradientStyleValue.cpp",
|
||||
"ContentStyleValue.cpp",
|
||||
"CounterDefinitionsStyleValue.cpp",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color 5: color-mix</title>
|
||||
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
|
||||
<style>
|
||||
.test { background-color: rgb(68.4898% 36.015% 68.3102%); width: 14em; height: 14em; margin-top: 0; margin-bottom: 0;}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if you see a purple square, and no red.</p>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color 5: color-mix</title>
|
||||
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#interpolation-space">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#hue-interpolation">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-color/color-mix-percents-01-ref.html">
|
||||
<meta name="assert" content="missing percentages, percent normalization">
|
||||
<style>
|
||||
.test { background-color: red; width: 14em; height: 2em; margin-top: 0; margin-bottom: 0;}
|
||||
.t1 { background-color: rgb(68.4898% 36.015% 68.3102%); }
|
||||
.t2 { background-color: color-mix(in lch, purple 50%, plum 50%);}
|
||||
.t3 { background-color: color-mix(in lch, purple 50%, plum);}
|
||||
.t4 { background-color: color-mix(in lch, purple, plum 50%); }
|
||||
.t5 { background-color: color-mix(in lch, purple, plum);}
|
||||
.t6 { background-color: color-mix(in lch, plum, purple);}
|
||||
.t7 { background-color: color-mix(in lch, purple 80%, plum 80%);}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if you see a purple square, and no red.</p>
|
||||
<div class="test t1"></div>
|
||||
<div class="test t2"></div>
|
||||
<div class="test t3"></div>
|
||||
<div class="test t4"></div>
|
||||
<div class="test t5"></div>
|
||||
<div class="test t6"></div>
|
||||
<div class="test t7"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color 5: color-mix</title>
|
||||
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#interpolation-space">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#hue-interpolation">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-color/color-mix-percents-01-ref.html">
|
||||
<meta name="assert" content="percent normalization for opaque mixes">
|
||||
<style>
|
||||
.test { background-color: red; width: 14em; height: 2em; margin-top: 0; margin-bottom: 0;}
|
||||
.negative-test { background-color: rgb(68.4898% 36.015% 68.3102%); width: 14em; height: 2em; margin-top: 0; margin-bottom: 0;}
|
||||
.t1 { background-color: rgb(68.4898% 36.015% 68.3102%); }
|
||||
.t2 { background-color: color-mix(in lch, purple 50%, plum 50%);}
|
||||
.t3 { background-color: color-mix(in lch, purple 55%, plum 55%);}
|
||||
.t4 { background-color: color-mix(in lch, purple 70%, plum 70%); }
|
||||
.t5 { background-color: color-mix(in lch, purple 95%, plum 95%);}
|
||||
.t6 { background-color: color-mix(in lch, purple 125%, plum 125%);}
|
||||
.t7 { background-color: color-mix(in lch, purple 9999%, plum 9999%);}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if you see a purple square, and no red.</p>
|
||||
<div class="test t1"></div>
|
||||
<div class="test t2"></div>
|
||||
<div class="test t3"></div>
|
||||
<div class="test t4"></div>
|
||||
<div class="test t5"></div>
|
||||
<div class="negative-test t6"></div>
|
||||
<div class="negative-test t7"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 174 tests
|
||||
|
||||
174 Pass
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) -10%, hsl(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 150%, hsl(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20% 40%) -10%, hsl(30deg 30% 40% 80%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20% 40%) 150%, hsl(30deg 30% 40% 80%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20% 40%) 0%, hsl(30deg 30% 40% 80%) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl hue, hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl shorter, hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl foo, hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) hsl(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%), in hsl)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 150%, hwb(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% 40%) -10%, hwb(30deg 30% 40% 80%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% 40%) 150%, hwb(30deg 30% 40% 80%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% 40%) 0%, hwb(30deg 30% 40% 80%) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb hue, hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb shorter, hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb foo, hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) hwb(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%), in hwb)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red, blue blue)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10% 20 30deg) -10%, lch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10% 20 30deg) 150%, lch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10% 20 30deg) 0%, lch(50% 60 70deg) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10% 20 30deg / .4) -10%, lch(50% 60 70deg / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10% 20 30deg / .4) 150%, lch(50% 60 70deg / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10% 20 30deg / .4) 0%, lch(50% 60 70deg / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch hue, lch(10% 20 30deg), lch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch shorter, lch(10% 20 30deg), lch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch foo, lch(10% 20 30deg), lch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch lch(10% 20 30deg), lch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10% 20 30deg) lch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(lch(10% 20 30deg), lch(50% 60 70deg), in lch)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(lch(10% 20 30deg), lch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) -10%, oklch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) 150%, oklch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) 0%, oklch(50% 60 70deg) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg / .4) -10%, oklch(50% 60 70deg / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg / .4) 150%, oklch(50% 60 70deg / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg / .4) 0%, oklch(50% 60 70deg / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch hue, oklch(10% 20 30deg), oklch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch shorter, oklch(10% 20 30deg), oklch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch foo, oklch(10% 20 30deg), oklch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch oklch(10% 20 30deg), oklch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) oklch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(oklch(10% 20 30deg), oklch(50% 60 70deg), in oklch)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(oklch(10% 20 30deg), oklch(50% 60 70deg))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30) -10%, lab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30) 150%, lab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30) 0%, lab(50% 60 70) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30 / .4) -10%, lab(50% 60 70 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30 / .4) 150%, lab(50% 60 70 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30 / .4) 0%, lab(50% 60 70 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab longer hue, lab(10% 20 30), lab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab lab(10% 20 30), lab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30) lab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(lab(10% 20 30), lab(50% 60 70), in lab)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(lab(10% 20 30), lab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) -10%, oklab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) 150%, oklab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) 0%, oklab(50% 60 70) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30 / .4) -10%, oklab(50% 60 70 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30 / .4) 150%, oklab(50% 60 70 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30 / .4) 0%, oklab(50% 60 70 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab longer hue, oklab(10% 20 30), oklab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab oklab(10% 20 30), oklab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) oklab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(oklab(10% 20 30), oklab(50% 60 70), in oklab)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(oklab(10% 20 30), oklab(50% 60 70))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) -10%, color(srgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 150%, color(srgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 0%, color(srgb .5 .6 .7) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / .4) -10%, color(srgb .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 150%, color(srgb .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 0%, color(srgb .5 .6 .7 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb longer hue, color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) color(srgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(srgb .1 .2 .3), color(srgb .5 .6 .7), in srgb)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) -10%, color(srgb-linear .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 150%, color(srgb-linear .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 0%, color(srgb-linear .5 .6 .7) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) -10%, color(srgb-linear .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 150%, color(srgb-linear .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 0%, color(srgb-linear .5 .6 .7 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear longer hue, color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) color(srgb-linear .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7), in srgb-linear)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) -10%, color(display-p3 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 150%, color(display-p3 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 0%, color(display-p3 .5 .6 .7) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / .4) -10%, color(display-p3 .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / .4) 150%, color(display-p3 .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / .4) 0%, color(display-p3 .5 .6 .7 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3 longer hue, color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3 color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) color(display-p3 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7), in display-p3)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) -10%, color(a98-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 150%, color(a98-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 0%, color(a98-rgb .5 .6 .7) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / .4) -10%, color(a98-rgb .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / .4) 150%, color(a98-rgb .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / .4) 0%, color(a98-rgb .5 .6 .7 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb longer hue, color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) color(a98-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7), in a98-rgb)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) -10%, color(prophoto-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 150%, color(prophoto-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 0%, color(prophoto-rgb .5 .6 .7) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / .4) -10%, color(prophoto-rgb .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / .4) 150%, color(prophoto-rgb .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / .4) 0%, color(prophoto-rgb .5 .6 .7 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb longer hue, color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) color(prophoto-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7), in prophoto-rgb)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) -10%, color(rec2020 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 150%, color(rec2020 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 0%, color(rec2020 .5 .6 .7) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / .4) -10%, color(rec2020 .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / .4) 150%, color(rec2020 .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / .4) 0%, color(rec2020 .5 .6 .7 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020 longer hue, color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020 color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) color(rec2020 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7), in rec2020)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) -10%, color(xyz .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 150%, color(xyz .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 0%, color(xyz .5 .6 .7) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / .4) -10%, color(xyz .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 150%, color(xyz .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 0%, color(xyz .5 .6 .7 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz longer hue, color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) color(xyz .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(xyz .1 .2 .3), color(xyz .5 .6 .7), in xyz)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) -10%, color(xyz-d50 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 150%, color(xyz-d50 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 0%, color(xyz-d50 .5 .6 .7) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) -10%, color(xyz-d50 .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 150%, color(xyz-d50 .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 0%, color(xyz-d50 .5 .6 .7 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50 longer hue, color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50 color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) color(xyz-d50 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7), in xyz-d50)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) -10%, color(xyz-d65 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 150%, color(xyz-d65 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 0%, color(xyz-d65 .5 .6 .7) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) -10%, color(xyz-d65 .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 150%, color(xyz-d65 .5 .6 .7 / .8))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 0%, color(xyz-d65 .5 .6 .7 / .8) 0%)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65 longer hue, color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65 color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) color(xyz-d65 .5 .6 .7))" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7), in xyz-d65)" should not set the property value
|
||||
Pass e.style['color'] = "color-mix(color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should not set the property value
|
||||
|
|
@ -0,0 +1,593 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 587 tests
|
||||
|
||||
559 Pass
|
||||
28 Fail
|
||||
Pass e.style['color'] = "color-mix(in srgb, red, blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, 70% red, 50% blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, red, blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, red calc(20%), blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, red calc(var(--v)*1%), blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, currentcolor, blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, red 60%, blue 40%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, red 50%, blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, red, blue 50%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch decreasing hue, red, hsl(120, 100%, 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, red calc(50% * sign(100em - 1px)), blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, 50% hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%), 50% hsl(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, 25% hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%), 25% hsl(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 30%, hsl(30deg 30% 40%) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 12.5%, hsl(30deg 30% 40%) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40% / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, 25% hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20% / .4), 25% hsl(30deg 30% 40% / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20% / .4) 25%, hsl(30deg 30% 40% / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20% / .4) 30%, hsl(30deg 30% 40% / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20% / .4) 12.5%, hsl(30deg 30% 40% / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20% / .4) 0%, hsl(30deg 30% 40% / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(40deg 50% 50%), hsl(60deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(60deg 50% 50%), hsl(40deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(50deg 50% 50%), hsl(330deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(330deg 50% 50%), hsl(50deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(20deg 50% 50%), hsl(320deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(320deg 50% 50%), hsl(20deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl shorter hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl shorter hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl shorter hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl shorter hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl shorter hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl shorter hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl longer hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl longer hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl longer hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl longer hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl longer hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl longer hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl increasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl increasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl increasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl increasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl increasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl increasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl decreasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl decreasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl decreasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl decreasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl decreasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl decreasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(none none none), hsl(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(none none none), hsl(30deg 40% 80%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 20% 40%), hsl(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 20% none), hsl(30deg 40% 60%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 20% 40%), hsl(30deg 20% none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, oklab(100 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, oklch(100 0.399 336.3) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hsl, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, 50% hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%), 50% hwb(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, 25% hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 30%, hwb(30deg 30% 40%) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 12.5%, hwb(30deg 30% 40%) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, 25% hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40% / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% / .4) 30%, hwb(30deg 30% 40% / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% / .4) 12.5%, hwb(30deg 30% 40% / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% / .4) 0%, hwb(30deg 30% 40% / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(40deg 30% 40%), hwb(60deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(60deg 30% 40%), hwb(40deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(50deg 30% 40%), hwb(330deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(330deg 30% 40%), hwb(50deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(20deg 30% 40%), hwb(320deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(320deg 30% 40%), hwb(20deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb shorter hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb shorter hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb shorter hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb shorter hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb shorter hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb shorter hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb longer hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb longer hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb longer hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb longer hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb longer hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb longer hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb increasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb increasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb increasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb increasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb increasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb increasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb decreasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb decreasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb decreasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb decreasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb decreasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb decreasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(none none none), hwb(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(none none none), hwb(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%), hwb(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% none), hwb(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(none 10% 20%), hwb(30deg none 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, oklab(100 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, oklch(100 0.399 336.3) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, 25% lch(10 20 30deg), lch(50 60 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg), 25% lch(50 60 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg) 30%, lch(50 60 70deg) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg) 12.5%, lch(50 60 70deg) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg) 0%, lch(50 60 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, 25% lch(10 20 30deg / .4), lch(50 60 70deg / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / .4), 25% lch(50 60 70deg / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / .4) 30%, lch(50 60 70deg / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / .4) 12.5%, lch(50 60 70deg / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / .4) 0%, lch(50 60 70deg / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(100 0 40deg), lch(100 0 60deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(100 0 60deg), lch(100 0 40deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(100 0 50deg), lch(100 0 330deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(100 0 330deg), lch(100 0 50deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(100 0 20deg), lch(100 0 320deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(100 0 320deg), lch(100 0 20deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch shorter hue, lch(100 0 40deg), lch(100 0 60deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch shorter hue, lch(100 0 60deg), lch(100 0 40deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch shorter hue, lch(100 0 50deg), lch(100 0 330deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch shorter hue, lch(100 0 330deg), lch(100 0 50deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch shorter hue, lch(100 0 20deg), lch(100 0 320deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch shorter hue, lch(100 0 320deg), lch(100 0 20deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch longer hue, lch(100 0 40deg), lch(100 0 60deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch longer hue, lch(100 0 60deg), lch(100 0 40deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch longer hue, lch(100 0 50deg), lch(100 0 330deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch longer hue, lch(100 0 330deg), lch(100 0 50deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch longer hue, lch(100 0 20deg), lch(100 0 320deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch longer hue, lch(100 0 320deg), lch(100 0 20deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch increasing hue, lch(100 0 40deg), lch(100 0 60deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch increasing hue, lch(100 0 60deg), lch(100 0 40deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch increasing hue, lch(100 0 50deg), lch(100 0 330deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch increasing hue, lch(100 0 330deg), lch(100 0 50deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch increasing hue, lch(100 0 20deg), lch(100 0 320deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch increasing hue, lch(100 0 320deg), lch(100 0 20deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch decreasing hue, lch(100 0 40deg), lch(100 0 60deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch decreasing hue, lch(100 0 60deg), lch(100 0 40deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch decreasing hue, lch(100 0 50deg), lch(100 0 330deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch decreasing hue, lch(100 0 330deg), lch(100 0 50deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch decreasing hue, lch(100 0 20deg), lch(100 0 320deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch decreasing hue, lch(100 0 320deg), lch(100 0 20deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(none none none), lch(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(none none none), lch(50 60 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg), lch(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 none), lch(50 60 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg), lch(50 60 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, 25% oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg), 25% oklch(0.5 0.6 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg) 30%, oklch(0.5 0.6 70deg) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg) 12.5%, oklch(0.5 0.6 70deg) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg) 0%, oklch(0.5 0.6 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, 25% oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / .4), 25% oklch(0.5 0.6 70deg / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 30%, oklch(0.5 0.6 70deg / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 12.5%, oklch(0.5 0.6 70deg / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 0%, oklch(0.5 0.6 70deg / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(1 0 40deg), oklch(1 0 60deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(1 0 60deg), oklch(1 0 40deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(1 0 50deg), oklch(1 0 330deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(1 0 330deg), oklch(1 0 50deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(1 0 20deg), oklch(1 0 320deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(1 0 320deg), oklch(1 0 20deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch shorter hue, oklch(1 0 40deg), oklch(1 0 60deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch shorter hue, oklch(1 0 60deg), oklch(1 0 40deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch shorter hue, oklch(1 0 50deg), oklch(1 0 330deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch shorter hue, oklch(1 0 330deg), oklch(1 0 50deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch shorter hue, oklch(1 0 20deg), oklch(1 0 320deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch shorter hue, oklch(1 0 320deg), oklch(1 0 20deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch longer hue, oklch(1 0 40deg), oklch(1 0 60deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch longer hue, oklch(1 0 60deg), oklch(1 0 40deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch longer hue, oklch(1 0 50deg), oklch(1 0 330deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch longer hue, oklch(1 0 330deg), oklch(1 0 50deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch longer hue, oklch(1 0 20deg), oklch(1 0 320deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch longer hue, oklch(1 0 320deg), oklch(1 0 20deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch increasing hue, oklch(1 0 40deg), oklch(1 0 60deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch increasing hue, oklch(1 0 60deg), oklch(1 0 40deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch increasing hue, oklch(1 0 50deg), oklch(1 0 330deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch increasing hue, oklch(1 0 330deg), oklch(1 0 50deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch increasing hue, oklch(1 0 20deg), oklch(1 0 320deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch increasing hue, oklch(1 0 320deg), oklch(1 0 20deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch decreasing hue, oklch(1 0 40deg), oklch(1 0 60deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch decreasing hue, oklch(1 0 60deg), oklch(1 0 40deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch decreasing hue, oklch(1 0 50deg), oklch(1 0 330deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch decreasing hue, oklch(1 0 330deg), oklch(1 0 50deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch decreasing hue, oklch(1 0 20deg), oklch(1 0 320deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch decreasing hue, oklch(1 0 320deg), oklch(1 0 20deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(none none none), oklch(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(none none none), oklch(0.5 0.6 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(none 0.2 30deg), oklch(0.5 none 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30), lab(50 60 70))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, 25% lab(10 20 30), lab(50 60 70))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30), 25% lab(50 60 70))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30), lab(50 60 70) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30) 30%, lab(50 60 70) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30) 12.5%, lab(50 60 70) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30) 0%, lab(50 60 70))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, 25% lab(10 20 30 / .4), lab(50 60 70 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / .4), 25% lab(50 60 70 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / .4) 30%, lab(50 60 70 / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / .4) 12.5%, lab(50 60 70 / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / .4) 0%, lab(50 60 70 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(none none none), lab(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(none none none), lab(50 60 70))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30), lab(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 none), lab(50 60 70))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30), lab(50 60 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(none 20 30), lab(50 none 70))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 12.5%, oklab(0.5 0.6 0.7 / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(none none none), oklab(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, 50% color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3), 50% color(srgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 25%, color(srgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3), color(srgb .5 .6 .7) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 25%, color(srgb .5 .6 .7) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 30%, color(srgb .5 .6 .7) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 12.5%, color(srgb .5 .6 .7) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 0%, color(srgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / .5), color(srgb .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 25%, color(srgb .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / .4), color(srgb .5 .6 .7 / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 25%, color(srgb .5 .6 .7 / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 30%, color(srgb .5 .6 .7 / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 12.5%, color(srgb .5 .6 .7 / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 0%, color(srgb .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb 2 3 4 / 5), color(srgb 4 6 8 / 10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb -2 -3 -4), color(srgb -4 -6 -8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb -2 -3 -4 / -5), color(srgb -4 -6 -8 / -10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb none none none), color(srgb none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb none none none), color(srgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3), color(srgb none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 none), color(srgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3), color(srgb .5 .6 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb none .2 .3), color(srgb .5 none .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / none), color(srgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / none), color(srgb .5 .6 .7 / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / none), color(srgb .5 .6 .7 / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, 50% color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), 50% color(srgb-linear .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 25%, color(srgb-linear .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 25%, color(srgb-linear .5 .6 .7) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 30%, color(srgb-linear .5 .6 .7) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 12.5%, color(srgb-linear .5 .6 .7) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 0%, color(srgb-linear .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .5), color(srgb-linear .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 25%, color(srgb-linear .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4), color(srgb-linear .5 .6 .7 / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 25%, color(srgb-linear .5 .6 .7 / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 30%, color(srgb-linear .5 .6 .7 / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 12.5%, color(srgb-linear .5 .6 .7 / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 0%, color(srgb-linear .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear 2 3 4 / 5), color(srgb-linear 4 6 8 / 10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear -2 -3 -4), color(srgb-linear -4 -6 -8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear -2 -3 -4 / -5), color(srgb-linear -4 -6 -8 / -10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear none none none), color(srgb-linear none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear none none none), color(srgb-linear .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), color(srgb-linear none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 none), color(srgb-linear .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear none .2 .3), color(srgb-linear .5 none .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / none), color(srgb-linear .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / none), color(srgb-linear .5 .6 .7 / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / none), color(srgb-linear .5 .6 .7 / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, 50% color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3), 50% color(display-p3 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 25%, color(display-p3 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 25%, color(display-p3 .5 .6 .7) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 30%, color(display-p3 .5 .6 .7) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 12.5%, color(display-p3 .5 .6 .7) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 0%, color(display-p3 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / .5), color(display-p3 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / .4) 25%, color(display-p3 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / .4), color(display-p3 .5 .6 .7 / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / .4) 25%, color(display-p3 .5 .6 .7 / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / .4) 30%, color(display-p3 .5 .6 .7 / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / .4) 12.5%, color(display-p3 .5 .6 .7 / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / .4) 0%, color(display-p3 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 2 3 4 / 5), color(display-p3 4 6 8 / 10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 -2 -3 -4), color(display-p3 -4 -6 -8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 -2 -3 -4 / -5), color(display-p3 -4 -6 -8 / -10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 none none none), color(display-p3 none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 none none none), color(display-p3 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3), color(display-p3 none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 none), color(display-p3 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3), color(display-p3 .5 .6 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 none .2 .3), color(display-p3 .5 none .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7 / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7 / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, 50% color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3), 50% color(a98-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 25%, color(a98-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 25%, color(a98-rgb .5 .6 .7) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 30%, color(a98-rgb .5 .6 .7) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 12.5%, color(a98-rgb .5 .6 .7) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 0%, color(a98-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / .5), color(a98-rgb .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / .4) 25%, color(a98-rgb .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / .4), color(a98-rgb .5 .6 .7 / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / .4) 25%, color(a98-rgb .5 .6 .7 / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / .4) 30%, color(a98-rgb .5 .6 .7 / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / .4) 12.5%, color(a98-rgb .5 .6 .7 / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / .4) 0%, color(a98-rgb .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb 2 3 4 / 5), color(a98-rgb 4 6 8 / 10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb -2 -3 -4), color(a98-rgb -4 -6 -8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb -2 -3 -4 / -5), color(a98-rgb -4 -6 -8 / -10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb none none none), color(a98-rgb none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb none none none), color(a98-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3), color(a98-rgb none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 none), color(a98-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb none .2 .3), color(a98-rgb .5 none .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / none), color(a98-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / none), color(a98-rgb .5 .6 .7 / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / none), color(a98-rgb .5 .6 .7 / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, 50% color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3), 50% color(prophoto-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 25%, color(prophoto-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 25%, color(prophoto-rgb .5 .6 .7) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 30%, color(prophoto-rgb .5 .6 .7) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 12.5%, color(prophoto-rgb .5 .6 .7) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 0%, color(prophoto-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / .5), color(prophoto-rgb .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / .4) 25%, color(prophoto-rgb .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / .4), color(prophoto-rgb .5 .6 .7 / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / .4) 25%, color(prophoto-rgb .5 .6 .7 / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / .4) 30%, color(prophoto-rgb .5 .6 .7 / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / .4) 12.5%, color(prophoto-rgb .5 .6 .7 / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / .4) 0%, color(prophoto-rgb .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb 2 3 4 / 5), color(prophoto-rgb 4 6 8 / 10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb -2 -3 -4), color(prophoto-rgb -4 -6 -8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb -2 -3 -4 / -5), color(prophoto-rgb -4 -6 -8 / -10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb none none none), color(prophoto-rgb none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb none none none), color(prophoto-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3), color(prophoto-rgb none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 none), color(prophoto-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb none .2 .3), color(prophoto-rgb .5 none .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / none), color(prophoto-rgb .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / none), color(prophoto-rgb .5 .6 .7 / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / none), color(prophoto-rgb .5 .6 .7 / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, 50% color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3), 50% color(rec2020 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 25%, color(rec2020 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 25%, color(rec2020 .5 .6 .7) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 30%, color(rec2020 .5 .6 .7) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 12.5%, color(rec2020 .5 .6 .7) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 0%, color(rec2020 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / .5), color(rec2020 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / .4) 25%, color(rec2020 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / .4), color(rec2020 .5 .6 .7 / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / .4) 25%, color(rec2020 .5 .6 .7 / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / .4) 30%, color(rec2020 .5 .6 .7 / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / .4) 12.5%, color(rec2020 .5 .6 .7 / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / .4) 0%, color(rec2020 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 2 3 4 / 5), color(rec2020 4 6 8 / 10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 -2 -3 -4), color(rec2020 -4 -6 -8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 -2 -3 -4 / -5), color(rec2020 -4 -6 -8 / -10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 none none none), color(rec2020 none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 none none none), color(rec2020 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3), color(rec2020 none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 none), color(rec2020 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3), color(rec2020 .5 .6 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 none .2 .3), color(rec2020 .5 none .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / none), color(rec2020 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / none), color(rec2020 .5 .6 .7 / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / none), color(rec2020 .5 .6 .7 / none))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, 50% color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3), 50% color(xyz .5 .6 .7))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 25%, color(xyz .5 .6 .7))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3), color(xyz .5 .6 .7) 25%)" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 25%, color(xyz .5 .6 .7) 75%)" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 30%, color(xyz .5 .6 .7) 90%)" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 12.5%, color(xyz .5 .6 .7) 37.5%)" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 0%, color(xyz .5 .6 .7))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / .5), color(xyz .5 .6 .7 / .8))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 25%, color(xyz .5 .6 .7 / .8))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / .4), color(xyz .5 .6 .7 / .8) 25%)" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 25%, color(xyz .5 .6 .7 / .8) 75%)" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 30%, color(xyz .5 .6 .7 / .8) 90%)" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 12.5%, color(xyz .5 .6 .7 / .8) 37.5%)" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 0%, color(xyz .5 .6 .7 / .8))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz 2 3 4 / 5), color(xyz 4 6 8 / 10))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz -2 -3 -4), color(xyz -4 -6 -8))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz -2 -3 -4 / -5), color(xyz -4 -6 -8 / -10))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz none none none), color(xyz none none none))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz none none none), color(xyz .5 .6 .7))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3), color(xyz none none none))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 none), color(xyz .5 .6 .7))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3), color(xyz .5 .6 none))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz none .2 .3), color(xyz .5 none .7))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / none), color(xyz .5 .6 .7))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / none), color(xyz .5 .6 .7 / 0.5))" should set the property value
|
||||
Fail e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / none), color(xyz .5 .6 .7 / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, 50% color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), 50% color(xyz-d50 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 25%, color(xyz-d50 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 25%, color(xyz-d50 .5 .6 .7) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 30%, color(xyz-d50 .5 .6 .7) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 12.5%, color(xyz-d50 .5 .6 .7) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 0%, color(xyz-d50 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .5), color(xyz-d50 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 25%, color(xyz-d50 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4), color(xyz-d50 .5 .6 .7 / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 25%, color(xyz-d50 .5 .6 .7 / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 30%, color(xyz-d50 .5 .6 .7 / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 12.5%, color(xyz-d50 .5 .6 .7 / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 0%, color(xyz-d50 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 2 3 4 / 5), color(xyz-d50 4 6 8 / 10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 -2 -3 -4), color(xyz-d50 -4 -6 -8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 -2 -3 -4 / -5), color(xyz-d50 -4 -6 -8 / -10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 none none none), color(xyz-d50 none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 none none none), color(xyz-d50 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), color(xyz-d50 none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 none), color(xyz-d50 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 none .2 .3), color(xyz-d50 .5 none .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / none), color(xyz-d50 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / none), color(xyz-d50 .5 .6 .7 / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / none), color(xyz-d50 .5 .6 .7 / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, 50% color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), 50% color(xyz-d65 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 25%, color(xyz-d65 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 25%, color(xyz-d65 .5 .6 .7) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 30%, color(xyz-d65 .5 .6 .7) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 12.5%, color(xyz-d65 .5 .6 .7) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 0%, color(xyz-d65 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .5), color(xyz-d65 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 25%, color(xyz-d65 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4), color(xyz-d65 .5 .6 .7 / .8) 25%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 25%, color(xyz-d65 .5 .6 .7 / .8) 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 30%, color(xyz-d65 .5 .6 .7 / .8) 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 12.5%, color(xyz-d65 .5 .6 .7 / .8) 37.5%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 0%, color(xyz-d65 .5 .6 .7 / .8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 2 3 4 / 5), color(xyz-d65 4 6 8 / 10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 -2 -3 -4), color(xyz-d65 -4 -6 -8))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 -2 -3 -4 / -5), color(xyz-d65 -4 -6 -8 / -10))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 none none none), color(xyz-d65 none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 none none none), color(xyz-d65 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), color(xyz-d65 none none none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 none), color(xyz-d65 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 none .2 .3), color(xyz-d65 .5 none .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / none), color(xyz-d65 .5 .6 .7))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / none), color(xyz-d65 .5 .6 .7 / 0.5))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / none), color(xyz-d65 .5 .6 .7 / none))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red 50%, blue 50%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red 10%, blue 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red 50%, blue 40%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red 40%, blue 50%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red 30%, blue 40%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red 75%, blue 75%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red calc(10%), blue 50%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red 50%, blue calc(10%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red calc(10%), blue calc(90%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red 50%, blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red 10%, blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red calc(50%), blue)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red, blue 50%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red, blue 90%)" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red, blue calc(50%))" should set the property value
|
||||
Pass e.style['color'] = "color-mix(in srgb, red, blue)" should set the property value
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color Level 5: Parsing and serialization of colors using invalid color-mix() function syntax</title>
|
||||
<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-mix">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-color-mix">
|
||||
<meta name="assert" content="invalid color-mix() values fail to parse for all color interpolation methods">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) -10%, hsl(30deg 30% 40%))`); // Percentages less than 0 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 150%, hsl(30deg 30% 40%))`); // Percentages greater than 100 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%) 0%)`); // Sum of percengates cannot be 0%.
|
||||
test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% 40%) -10%, hsl(30deg 30% 40% 80%))`); // Percentages less than 0 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% 40%) 150%, hsl(30deg 30% 40% 80%))`); // Percentages greater than 100 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% 40%) 0%, hsl(30deg 30% 40% 80%) 0%)`); // Sum of percengates cannot be 0%.
|
||||
test_invalid_value(`color`, `color-mix(in hsl hue, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // `hue` keyword without a specified method.
|
||||
test_invalid_value(`color`, `color-mix(in hsl shorter, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // Specified hue method without trailing `hue` keyword.
|
||||
test_invalid_value(`color`, `color-mix(in hsl foo, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // Trailing identifier after color space that is not a hue method.
|
||||
test_invalid_value(`color`, `color-mix(in hsl hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // Missing comma after interpolation method.
|
||||
test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) hsl(30deg 30% 40%))`); // Missing comma between colors.
|
||||
test_invalid_value(`color`, `color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%), in hsl)`); // Interpolation method not at the beginning.
|
||||
test_invalid_value(`color`, `color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // Missing interpolation method.
|
||||
|
||||
test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))`); // Percentages less than 0 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 150%, hwb(30deg 30% 40%))`); // Percentages greater than 100 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%) 0%)`); // Sum of percengates cannot be 0%.
|
||||
test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% 40%) -10%, hwb(30deg 30% 40% 80%))`); // Percentages less than 0 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% 40%) 150%, hwb(30deg 30% 40% 80%))`); // Percentages greater than 100 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% 40%) 0%, hwb(30deg 30% 40% 80%) 0%)`); // Sum of percengates cannot be 0%.
|
||||
test_invalid_value(`color`, `color-mix(in hwb hue, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // `hue` keyword without a specified method.
|
||||
test_invalid_value(`color`, `color-mix(in hwb shorter, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // Specified hue method without trailing `hue` keyword.
|
||||
test_invalid_value(`color`, `color-mix(in hwb foo, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // Trailing identifier after color space that is not a hue method.
|
||||
test_invalid_value(`color`, `color-mix(in hwb hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // Missing comma after interpolation method.
|
||||
test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) hwb(30deg 30% 40%))`); // Missing comma between colors.
|
||||
test_invalid_value(`color`, `color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%), in hwb)`); // Interpolation method not at the beginning.
|
||||
test_invalid_value(`color`, `color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // Missing interpolation method.
|
||||
test_invalid_value(`color`, `color-mix(in srgb, red, blue blue)`); // Too many parameters.
|
||||
|
||||
for (const colorSpace of [ "lch", "oklch" ]) {
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg) -10%, ${colorSpace}(50% 60 70deg))`); // Percentages less than 0 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg) 150%, ${colorSpace}(50% 60 70deg))`); // Percentages greater than 100 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg) 0%, ${colorSpace}(50% 60 70deg) 0%)`); // Sum of percengates cannot be 0%.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) -10%, ${colorSpace}(50% 60 70deg / .8))`); // Percentages less than 0 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 150%, ${colorSpace}(50% 60 70deg / .8))`); // Percentages greater than 100 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 0%, ${colorSpace}(50% 60 70deg / .8) 0%)`); // Sum of percengates cannot be 0%.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace} hue, ${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // `hue` keyword without a specified method.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace} shorter, ${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // Specified hue method without trailing `hue` keyword.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace} foo, ${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // Trailing identifier after color space that is not a hue method.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace} ${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // Missing comma after interpolation method.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg) ${colorSpace}(50% 60 70deg))`); // Missing comma between colors.
|
||||
test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg), in ${colorSpace})`); // Interpolation method not at the beginning.
|
||||
test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // Missing interpolation method.
|
||||
}
|
||||
|
||||
for (const colorSpace of [ "lab", "oklab" ]) {
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30) -10%, ${colorSpace}(50% 60 70))`); // Percentages less than 0 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30) 150%, ${colorSpace}(50% 60 70))`); // Percentages greater than 100 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30) 0%, ${colorSpace}(50% 60 70) 0%)`); // Sum of percengates cannot be 0%.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) -10%, ${colorSpace}(50% 60 70 / .8))`); // Percentages less than 0 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 150%, ${colorSpace}(50% 60 70 / .8))`); // Percentages greater than 100 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 0%, ${colorSpace}(50% 60 70 / .8) 0%)`); // Sum of percengates cannot be 0%.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace} longer hue, ${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70))`); // Hue modifier on a non-polar color space.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace} ${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70))`); // Missing comma after interpolation method.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30) ${colorSpace}(50% 60 70))`); // Missing comma between colors.
|
||||
test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70), in ${colorSpace})`); // Interpolation method not at the beginning.
|
||||
test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70))`); // Missing interpolation method.
|
||||
}
|
||||
|
||||
for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) {
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) -10%, color(${colorSpace} .5 .6 .7))`); // Percentages less than 0 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 150%, color(${colorSpace} .5 .6 .7))`); // Percentages greater than 100 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 0%, color(${colorSpace} .5 .6 .7) 0%)`); // Sum of percengates cannot be 0%.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) -10%, color(${colorSpace} .5 .6 .7 / .8))`); // Percentages less than 0 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 150%, color(${colorSpace} .5 .6 .7 / .8))`); // Percentages greater than 100 are not valid.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 0%, color(${colorSpace} .5 .6 .7 / .8) 0%)`); // Sum of percengates cannot be 0%.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace} longer hue, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`); // Hue modifier on a non-polar color space.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace} color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`); // Missing comma after interpolation method.
|
||||
test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) color(${colorSpace} .5 .6 .7))`); // Missing comma between colors.
|
||||
test_invalid_value(`color`, `color-mix(color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7), in ${colorSpace})`); // Interpolation method not at the beginning.
|
||||
test_invalid_value(`color`, `color-mix(color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`); // Missing interpolation method.
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,447 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color Level 5: Parsing and serialization of colors using valid color-mix() function syntax</title>
|
||||
<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-mix">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-color-mix">
|
||||
<meta name="assert" content="color-mix() parses and serializes for all color interpolation methods">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
<script src="../../../css/support/color-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
// https://github.com/w3c/csswg-drafts/issues/7302: Specified values shouldn't resolve keyword colors or calc values
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red, blue)`, `color-mix(in srgb, red, blue)`);
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, 70% red, 50% blue)`, `color-mix(in srgb, red 70%, blue 50%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, red, blue)`, `color-mix(in hsl, red, blue)`);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, red calc(20%), blue)`, `color-mix(in hsl, red calc(20%), blue)`);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, red calc(var(--v)*1%), blue)`, `color-mix(in hsl, red calc(var(--v)*1%), blue)`);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, currentcolor, blue)`, `color-mix(in hsl, currentcolor, blue)`);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, red 60%, blue 40%)`, `color-mix(in hsl, red 60%, blue)`);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, red 50%, blue)`, `color-mix(in hsl, red, blue)`);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, red, blue 50%)`, `color-mix(in hsl, red, blue)`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch decreasing hue, red, hsl(120, 100%, 50%))`, `color-mix(in lch decreasing hue, red, rgb(0, 255, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, red calc(50% * sign(100em - 1px)), blue)`, `color-mix(in hsl, red calc(50% * sign(100em - 1px)), blue)`);
|
||||
|
||||
// NOTE: For the epsilon to meaningful for fuzzy_test_valid_color when used with integer rounded results like rgb(), it must be at least 1.
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, 50% hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%), 50% hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, 25% hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%), 25% hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 75%, rgb(133, 102, 71))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%) 25%)`, `color-mix(in hsl, rgb(46, 56, 46) 75%, rgb(133, 102, 71))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%) 75%)`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 30%, hsl(30deg 30% 40%) 90%)`, `color-mix(in hsl, rgb(46, 56, 46) 30%, rgb(133, 102, 71) 90%)`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 12.5%, hsl(30deg 30% 40%) 37.5%)`, `color-mix(in hsl, rgb(46, 56, 46) 12.5%, rgb(133, 102, 71) 37.5%)`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 0%, rgb(133, 102, 71))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4), rgba(133, 102, 71, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgba(133, 102, 71, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, 25% hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 25%, rgba(133, 102, 71, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4), 25% hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 75%, rgba(133, 102, 71, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8) 25%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 75%, rgba(133, 102, 71, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 25%, hsl(30deg 30% 40% / .8) 75%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 25%, rgba(133, 102, 71, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 30%, hsl(30deg 30% 40% / .8) 90%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 30%, rgba(133, 102, 71, 0.8) 90%)`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 12.5%, hsl(30deg 30% 40% / .8) 37.5%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 12.5%, rgba(133, 102, 71, 0.8) 37.5%)`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 0%, hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 0%, rgba(133, 102, 71, 0.8))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl, rgb(191, 149, 64), rgb(191, 191, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl, rgb(191, 191, 64), rgb(191, 149, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl, rgb(191, 170, 64), rgb(191, 64, 128))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 128), rgb(191, 170, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl, rgb(191, 106, 64), rgb(191, 64, 149))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 149), rgb(191, 106, 64))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl, rgb(191, 149, 64), rgb(191, 191, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl, rgb(191, 191, 64), rgb(191, 149, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl, rgb(191, 170, 64), rgb(191, 64, 128))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 128), rgb(191, 170, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl, rgb(191, 106, 64), rgb(191, 64, 149))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 149), rgb(191, 106, 64))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 149, 64), rgb(191, 191, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 191, 64), rgb(191, 149, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 170, 64), rgb(191, 64, 128))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 64, 128), rgb(191, 170, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 106, 64), rgb(191, 64, 149))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 64, 149), rgb(191, 106, 64))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 149, 64), rgb(191, 191, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 191, 64), rgb(191, 149, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 170, 64), rgb(191, 64, 128))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 64, 128), rgb(191, 170, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 106, 64), rgb(191, 64, 149))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 64, 149), rgb(191, 106, 64))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 149, 64), rgb(191, 191, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 191, 64), rgb(191, 149, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 170, 64), rgb(191, 64, 128))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 64, 128), rgb(191, 170, 64))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 106, 64), rgb(191, 64, 149))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 64, 149), rgb(191, 106, 64))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(none none none), hsl(none none none))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(none none none), hsl(30deg 40% 80%))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(224, 204, 184))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 20% 40%), hsl(none none none))`, `color-mix(in hsl, rgb(82, 122, 82), rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 20% none), hsl(30deg 40% 60%))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(194, 153, 112))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 20% 40%), hsl(30deg 20% none))`, `color-mix(in hsl, rgb(82, 122, 82), rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%))`, `color-mix(in hsl, rgb(122, 82, 82), rgb(204, 204, 204))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40%))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgb(143, 61, 61))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgba(143, 61, 61, 0.5))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / none))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgba(143, 61, 61, 0))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lch(100 116 334) 100%, rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lch(0 116 334) 100%, rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, oklab(100 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, oklch(100 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hsl, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, 50% hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), 50% hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, 25% hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%) 25%)`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%) 75%)`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%) 30%, hwb(30deg 30% 40%) 90%)`, `color-mix(in hwb, rgb(26, 204, 26) 30%, rgb(153, 115, 77) 90%)`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%) 12.5%, hwb(30deg 30% 40%) 37.5%)`, `color-mix(in hwb, rgb(26, 204, 26) 12.5%, rgb(153, 115, 77) 37.5%)`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 0%, rgb(153, 115, 77))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4), rgba(153, 115, 77, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, 25% hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgba(153, 115, 77, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8) 25%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 75%, rgba(153, 115, 77, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8) 75%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 30%, hwb(30deg 30% 40% / .8) 90%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 30%, rgba(153, 115, 77, 0.8) 90%)`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 12.5%, hwb(30deg 30% 40% / .8) 37.5%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 12.5%, rgba(153, 115, 77, 0.8) 37.5%)`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 0%, hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 0%, rgba(153, 115, 77, 0.8))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb, rgb(153, 128, 77), rgb(153, 153, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb, rgb(153, 153, 77), rgb(153, 128, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb, rgb(153, 140, 77), rgb(153, 77, 115))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 115), rgb(153, 140, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb, rgb(153, 102, 77), rgb(153, 77, 128))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 128), rgb(153, 102, 77))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb, rgb(153, 128, 77), rgb(153, 153, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb, rgb(153, 153, 77), rgb(153, 128, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb, rgb(153, 140, 77), rgb(153, 77, 115))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 115), rgb(153, 140, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb, rgb(153, 102, 77), rgb(153, 77, 128))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 128), rgb(153, 102, 77))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 128, 77), rgb(153, 153, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 153, 77), rgb(153, 128, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 140, 77), rgb(153, 77, 115))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 77, 115), rgb(153, 140, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 102, 77), rgb(153, 77, 128))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 77, 128), rgb(153, 102, 77))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 128, 77), rgb(153, 153, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 153, 77), rgb(153, 128, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 140, 77), rgb(153, 77, 115))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 77, 115), rgb(153, 140, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 102, 77), rgb(153, 77, 128))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 77, 128), rgb(153, 102, 77))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 128, 77), rgb(153, 153, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 153, 77), rgb(153, 128, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 140, 77), rgb(153, 77, 115))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 77, 115), rgb(153, 140, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 102, 77), rgb(153, 77, 128))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 77, 128), rgb(153, 102, 77))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(none none none), hwb(none none none))`, `color-mix(in hwb, rgb(255, 0, 0), rgb(255, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(none none none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(255, 0, 0), rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(none none none))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(255, 0, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 255, 26), rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% none))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(255, 166, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(none 10% 20%), hwb(30deg none 40%))`, `color-mix(in hwb, rgb(204, 26, 26), rgb(153, 77, 0))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgb(153, 115, 77))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / 0.5))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgba(153, 115, 77, 0.5))`, 1);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / none))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgba(153, 115, 77, 0))`, 1);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, color(display-p3 0 1 0) 100%, rgb(0, 0, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lch(100 116 334) 100%, rgb(0, 0, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lch(0 116 334) 100%, rgb(0, 0, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, oklab(100 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, oklch(100 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
|
||||
fuzzy_test_valid_color(`color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
|
||||
|
||||
// lch()
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30), lch(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, 25% lch(10 20 30deg), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), 25% lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 75%, lch(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg) 25%)`, `color-mix(in lch, lch(10 20 30) 75%, lch(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg) 75%)`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 30%, lch(50 60 70deg) 90%)`, `color-mix(in lch, lch(10 20 30) 30%, lch(50 60 70) 90%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 12.5%, lch(50 60 70deg) 37.5%)`, `color-mix(in lch, lch(10 20 30) 12.5%, lch(50 60 70) 37.5%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 0%, lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 0%, lch(50 60 70))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4), lch(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, 25% lch(10 20 30deg / .4), lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4), 25% lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 75%, lch(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8) 25%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 75%, lch(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8) 75%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4) 30%, lch(50 60 70deg / .8) 90%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 30%, lch(50 60 70 / 0.8) 90%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4) 12.5%, lch(50 60 70deg / .8) 37.5%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 12.5%, lch(50 60 70 / 0.8) 37.5%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4) 0%, lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 0%, lch(50 60 70 / 0.8))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch, lch(100 0 40), lch(100 0 60))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch, lch(100 0 60), lch(100 0 40))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch, lch(100 0 50), lch(100 0 330))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch, lch(100 0 330), lch(100 0 50))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch, lch(100 0 20), lch(100 0 320))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch, lch(100 0 320), lch(100 0 20))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch, lch(100 0 40), lch(100 0 60))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch, lch(100 0 60), lch(100 0 40))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch, lch(100 0 50), lch(100 0 330))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch, lch(100 0 330), lch(100 0 50))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch, lch(100 0 20), lch(100 0 320))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch, lch(100 0 320), lch(100 0 20))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch longer hue, lch(100 0 40), lch(100 0 60))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch longer hue, lch(100 0 60), lch(100 0 40))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch longer hue, lch(100 0 50), lch(100 0 330))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch longer hue, lch(100 0 330), lch(100 0 50))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch longer hue, lch(100 0 20), lch(100 0 320))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch longer hue, lch(100 0 320), lch(100 0 20))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch increasing hue, lch(100 0 40), lch(100 0 60))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch increasing hue, lch(100 0 60), lch(100 0 40))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch increasing hue, lch(100 0 50), lch(100 0 330))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch increasing hue, lch(100 0 330), lch(100 0 50))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch increasing hue, lch(100 0 20), lch(100 0 320))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch increasing hue, lch(100 0 320), lch(100 0 20))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch decreasing hue, lch(100 0 40), lch(100 0 60))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch decreasing hue, lch(100 0 60), lch(100 0 40))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch decreasing hue, lch(100 0 50), lch(100 0 330))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch decreasing hue, lch(100 0 330), lch(100 0 50))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch decreasing hue, lch(100 0 20), lch(100 0 320))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch decreasing hue, lch(100 0 320), lch(100 0 20))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(none none none), lch(none none none))`, `color-mix(in lch, lch(none none none), lch(none none none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(none none none), lch(50 60 70deg))`, `color-mix(in lch, lch(none none none), lch(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), lch(none none none))`, `color-mix(in lch, lch(10 20 30), lch(none none none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 none), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 none), lch(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), lch(50 60 none))`, `color-mix(in lch, lch(10 20 30), lch(50 60 none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg))`, `color-mix(in lch, lch(none 20 30), lch(50 none 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70 / 0.5))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70 / none))`);
|
||||
|
||||
// oklch()
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(0.5 0.6 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, 25% oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), 25% oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 75%, oklch(0.5 0.6 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg) 25%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 75%, oklch(0.5 0.6 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg) 75%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 30%, oklch(0.5 0.6 70deg) 90%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 30%, oklch(0.5 0.6 70) 90%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 12.5%, oklch(0.5 0.6 70deg) 37.5%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 12.5%, oklch(0.5 0.6 70) 37.5%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 0%, oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 0%, oklch(0.5 0.6 70))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4), oklch(0.5 0.6 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, 25% oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4), 25% oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 75%, oklch(0.5 0.6 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8) 25%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 75%, oklch(0.5 0.6 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8) 75%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 30%, oklch(0.5 0.6 70deg / .8) 90%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 30%, oklch(0.5 0.6 70 / 0.8) 90%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 12.5%, oklch(0.5 0.6 70deg / .8) 37.5%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 12.5%, oklch(0.5 0.6 70 / 0.8) 37.5%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 0%, oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 0%, oklch(0.5 0.6 70 / 0.8))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch, oklch(1 0 40), oklch(1 0 60))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch, oklch(1 0 60), oklch(1 0 40))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch, oklch(1 0 50), oklch(1 0 330))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch, oklch(1 0 330), oklch(1 0 50))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch, oklch(1 0 20), oklch(1 0 320))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch, oklch(1 0 320), oklch(1 0 20))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch, oklch(1 0 40), oklch(1 0 60))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch, oklch(1 0 60), oklch(1 0 40))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch, oklch(1 0 50), oklch(1 0 330))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch, oklch(1 0 330), oklch(1 0 50))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch, oklch(1 0 20), oklch(1 0 320))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch, oklch(1 0 320), oklch(1 0 20))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch longer hue, oklch(1 0 40), oklch(1 0 60))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch longer hue, oklch(1 0 60), oklch(1 0 40))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch longer hue, oklch(1 0 50), oklch(1 0 330))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch longer hue, oklch(1 0 330), oklch(1 0 50))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch longer hue, oklch(1 0 20), oklch(1 0 320))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch longer hue, oklch(1 0 320), oklch(1 0 20))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch increasing hue, oklch(1 0 40), oklch(1 0 60))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch increasing hue, oklch(1 0 60), oklch(1 0 40))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch increasing hue, oklch(1 0 50), oklch(1 0 330))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch increasing hue, oklch(1 0 330), oklch(1 0 50))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch increasing hue, oklch(1 0 20), oklch(1 0 320))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch increasing hue, oklch(1 0 320), oklch(1 0 20))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 40), oklch(1 0 60))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 60), oklch(1 0 40))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 50), oklch(1 0 330))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 330), oklch(1 0 50))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 20), oklch(1 0 320))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 320), oklch(1 0 20))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(none none none), oklch(none none none))`, `color-mix(in oklch, oklch(none none none), oklch(none none none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(none none none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(none none none), oklch(0.5 0.6 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(none none none))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(none none none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 none))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(0.5 0.6 none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(none 0.2 30deg), oklch(0.5 none 70deg))`, `color-mix(in oklch, oklch(none 0.2 30), oklch(0.5 none 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / 0.5))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70 / 0.5))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / none))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70 / none))`);
|
||||
|
||||
// lab()
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30), lab(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, 25% lab(10 20 30), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), 25% lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 75%, lab(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), lab(50 60 70) 25%)`, `color-mix(in lab, lab(10 20 30) 75%, lab(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70) 75%)`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 30%, lab(50 60 70) 90%)`, `color-mix(in lab, lab(10 20 30) 30%, lab(50 60 70) 90%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 12.5%, lab(50 60 70) 37.5%)`, `color-mix(in lab, lab(10 20 30) 12.5%, lab(50 60 70) 37.5%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 0%, lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 0%, lab(50 60 70))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4), lab(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, 25% lab(10 20 30 / .4), lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4), 25% lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 75%, lab(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8) 25%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 75%, lab(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8) 75%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4) 30%, lab(50 60 70 / .8) 90%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 30%, lab(50 60 70 / 0.8) 90%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4) 12.5%, lab(50 60 70 / .8) 37.5%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 12.5%, lab(50 60 70 / 0.8) 37.5%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4) 0%, lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 0%, lab(50 60 70 / 0.8))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(none none none), lab(none none none))`, `color-mix(in lab, lab(none none none), lab(none none none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(none none none), lab(50 60 70))`, `color-mix(in lab, lab(none none none), lab(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), lab(none none none))`, `color-mix(in lab, lab(10 20 30), lab(none none none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 none), lab(50 60 70))`, `color-mix(in lab, lab(10 20 none), lab(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), lab(50 60 none))`, `color-mix(in lab, lab(10 20 30), lab(50 60 none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(none 20 30), lab(50 none 70))`, `color-mix(in lab, lab(none 20 30), lab(50 none 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`);
|
||||
fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`);
|
||||
|
||||
// oklab()
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4), oklab(0.5 0.6 0.7 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 30%, oklab(0.5 0.6 0.7 / 0.8) 90%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 12.5%, oklab(0.5 0.6 0.7 / .8) 37.5%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 12.5%, oklab(0.5 0.6 0.7 / 0.8) 37.5%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 0%, oklab(0.5 0.6 0.7 / 0.8))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(none none none), oklab(none none none))`, `color-mix(in oklab, oklab(none none none), oklab(none none none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`, `color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`);
|
||||
fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`);
|
||||
|
||||
for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) {
|
||||
const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace;
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, 50% color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), 50% color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 25%, color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 25%, color(${resultColorSpace} 0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7) 25%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 75%, color(${resultColorSpace} 0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 25%, color(${colorSpace} .5 .6 .7) 75%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 25%, color(${resultColorSpace} 0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 30%, color(${colorSpace} .5 .6 .7) 90%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 30%, color(${resultColorSpace} 0.5 0.6 0.7) 90%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 12.5%, color(${colorSpace} .5 .6 .7) 37.5%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 12.5%, color(${resultColorSpace} 0.5 0.6 0.7) 37.5%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 0%, color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 0%, color(${resultColorSpace} 0.5 0.6 0.7))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .5), color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.5), color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 25%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8) 25%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 75%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8) 75%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 25%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 30%, color(${colorSpace} .5 .6 .7 / .8) 90%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 30%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8) 90%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 12.5%, color(${colorSpace} .5 .6 .7 / .8) 37.5%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 12.5%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8) 37.5%)`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 0%, color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 0%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} 2 3 4 / 5), color(${colorSpace} 4 6 8 / 10))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 2 3 4), color(${resultColorSpace} 4 6 8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4), color(${colorSpace} -4 -6 -8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} -2 -3 -4), color(${resultColorSpace} -4 -6 -8))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4 / -5), color(${colorSpace} -4 -6 -8 / -10))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} -2 -3 -4 / 0), color(${resultColorSpace} -4 -6 -8 / 0))`);
|
||||
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} none none none), color(${colorSpace} none none none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none none none), color(${resultColorSpace} none none none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} none none none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none none none), color(${resultColorSpace} 0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} none none none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} none none none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 none), color(${resultColorSpace} 0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 none))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} none .2 .3), color(${colorSpace} .5 none .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none 0.2 0.3), color(${resultColorSpace} 0.5 none 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / 0.5))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7 / 0.5))`);
|
||||
fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7 / none))`);
|
||||
}
|
||||
|
||||
// Test percent normalization
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red 50%, blue 50%)`, `color-mix(in srgb, red, blue)`) // both 50%
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red 10%, blue 90%)`, `color-mix(in srgb, red 10%, blue)`) // sum to 100%
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red 50%, blue 40%)`, `color-mix(in srgb, red 50%, blue 40%)`) // only one is 50% (p1)
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red 40%, blue 50%)`, `color-mix(in srgb, red 40%, blue 50%)`) // only one is 50% (p2)
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red 30%, blue 40%)`, `color-mix(in srgb, red 30%, blue 40%)`) // sum to less than 100
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red 75%, blue 75%)`, `color-mix(in srgb, red 75%, blue 75%)`) // sum to more than 100
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red calc(10%), blue 50%)`, `color-mix(in srgb, red calc(10%), blue 50%)`) // one is `calc()` (p1)
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red 50%, blue calc(10%))`, `color-mix(in srgb, red 50%, blue calc(10%))`) // one is `calc()` (p2)
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red calc(10%), blue calc(90%))`, `color-mix(in srgb, red calc(10%), blue calc(90%))`) // both are `calc()`
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red 50%, blue)`, `color-mix(in srgb, red, blue)`) // only p1 specified, is 50%
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red 10%, blue)`, `color-mix(in srgb, red 10%, blue)`) // only p1 specified
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red calc(50%), blue)`, `color-mix(in srgb, red calc(50%), blue)`) // only p1 specified, is `calc()`
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red, blue 50%)`, `color-mix(in srgb, red, blue)`) // only p2 specified, is 50%
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red, blue 90%)`, `color-mix(in srgb, red 10%, blue)`) // only p2 specified
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red, blue calc(50%))`, `color-mix(in srgb, red, blue calc(50%))`) // only p2 specified, is `calc()`
|
||||
fuzzy_test_valid_color(`color-mix(in srgb, red, blue)`, `color-mix(in srgb, red, blue)`) // neither is specified
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
'use strict';
|
||||
|
||||
/**
|
||||
* Set up a test for color properties that does not expect exact equality for
|
||||
* numeric values within the color. This is necessary for color-mix and
|
||||
* relative color syntax, which perform float arithmetic on color channels.
|
||||
*
|
||||
* @param {number} epsilon Epsilon for comparison of numeric values.
|
||||
*/
|
||||
function set_up_fuzzy_color_test(epsilon) {
|
||||
if (!epsilon) {
|
||||
epsilon = 0.01;
|
||||
}
|
||||
|
||||
// The function
|
||||
function fuzzy_compare_colors(input, expected) {
|
||||
const colorElementDividers = /( |\(|,)/;
|
||||
// Return the string stripped of numbers.
|
||||
function getNonNumbers(color) {
|
||||
return color.replace(/[0-9\.]/g, '');
|
||||
}
|
||||
// Return an array of all numbers in the color.
|
||||
function getNumbers(color) {
|
||||
const result = [];
|
||||
color.split(colorElementDividers).forEach(element => {
|
||||
const numberElement = parseFloat(element);
|
||||
if (!isNaN(numberElement)) {
|
||||
result.push(numberElement);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
try {
|
||||
assert_array_approx_equals(getNumbers(input), getNumbers(expected), epsilon, "Numeric parameters are approximately equal.");
|
||||
// Assert that the text of the two colors are equal. i.e. colorSpace, colorFunction and format.
|
||||
assert_equals(getNonNumbers(input), getNonNumbers(expected), "Color format is correct.");
|
||||
} catch (error) {
|
||||
throw `Colors do not match.\nActual: ${input}\nExpected: ${expected}.\n${error}`
|
||||
}
|
||||
}
|
||||
|
||||
return fuzzy_compare_colors;
|
||||
}
|
||||
|
||||
/**
|
||||
* Test the computed value of a color with some tolerance for numeric parameters.
|
||||
*
|
||||
* @param {string} specified A specified value for the color.
|
||||
* @param {string} computed The expected computed color. If omitted, defaults
|
||||
* to the default test_computed_value test, as
|
||||
* fuzziness is unnecessary.
|
||||
* @param {object} epsilon Epsilon for comparison of numeric values.
|
||||
*/
|
||||
|
||||
function fuzzy_test_computed_color(specified, computed, epsilon) {
|
||||
if (!computed) {
|
||||
test_computed_value("color", specified);
|
||||
return;
|
||||
}
|
||||
|
||||
test_computed_value("color", specified, computed, undefined /* titleExtra */, {comparisonFunction: set_up_fuzzy_color_test(epsilon)});
|
||||
}
|
||||
|
||||
/**
|
||||
* Test the computed value of a color property with some tolerance for numeric parameters.
|
||||
*
|
||||
* @param {string} property A style property to test.
|
||||
* @param {string} specified A specified value for the color.
|
||||
* @param {string} computed The expected computed color. If omitted, defaults
|
||||
* to the default test_computed_value test, as
|
||||
* fuzziness is unnecessary.
|
||||
* @param {object} epsilon Epsilon for comparison of numeric values.
|
||||
*/
|
||||
|
||||
function fuzzy_test_computed_color_property(property, specified, computed, epsilon) {
|
||||
if (!computed) {
|
||||
test_computed_value(property, specified);
|
||||
return;
|
||||
}
|
||||
|
||||
test_computed_value(property, specified, computed, undefined /* titleExtra */, {comparisonFunction: set_up_fuzzy_color_test(epsilon)});
|
||||
}
|
||||
|
||||
/**
|
||||
* Test the parsed value of a color.
|
||||
*
|
||||
* @param {string} specified A specified value for the property.
|
||||
* @param {string} parsed The expected parsed color. If omitted, defaults
|
||||
* to the default test_valid_value test, as
|
||||
* fuzziness is unnecessary.
|
||||
* @param {object} epsilon Epsilon for comparison of numeric values.
|
||||
*/
|
||||
function fuzzy_test_valid_color(specified, parsed, epsilon) {
|
||||
if (!parsed) {
|
||||
test_valid_value("color", specified);
|
||||
return;
|
||||
}
|
||||
|
||||
test_valid_value("color", specified, parsed, {comparisonFunction: set_up_fuzzy_color_test(epsilon)});
|
||||
}
|
||||
|
||||
/**
|
||||
* Test the parsed value of a color property.
|
||||
*
|
||||
* @param {string} property A style property to test.
|
||||
* @param {string} specified A specified value for the property.
|
||||
* @param {string} parsed The expected parsed color. If omitted, defaults
|
||||
* to the default test_valid_value test, as
|
||||
* fuzziness is unnecessary.
|
||||
* @param {object} epsilon Epsilon for comparison of numeric values.
|
||||
*/
|
||||
function fuzzy_test_valid_color_property(property, specified, parsed, epsilon) {
|
||||
if (!parsed) {
|
||||
test_valid_value(property, specified);
|
||||
return;
|
||||
}
|
||||
|
||||
test_valid_value(property, specified, parsed, {comparisonFunction: set_up_fuzzy_color_test(epsilon)});
|
||||
}
|
||||
|
||||
/**
|
||||
* Fuzzy color matcher for oklab color with optional transparency.
|
||||
* @param {string} actual Observed color
|
||||
* @param {string} expected What the color should be
|
||||
* @param {string} message Error message to facilitate diagnostics
|
||||
*/
|
||||
function assert_oklab_color(actual, expected, message) {
|
||||
const paramMatch = '(\\-?\\d*\\.?\\d*)';
|
||||
const optAlphaMatch = '( \\/ (\\d*\\.?\\d*))?';
|
||||
const pattern =
|
||||
`oklab\\(${paramMatch} ${paramMatch} ${paramMatch}${optAlphaMatch}\\)`;
|
||||
const oklabRegex = new RegExp(pattern);
|
||||
let matches =
|
||||
expected.match(oklabRegex);
|
||||
assert_true(!!matches,
|
||||
`Expected value ${expected} not recognized as an oklab color`);
|
||||
|
||||
const p0 = parseFloat(matches[1]);
|
||||
const p1 = parseFloat(matches[2]);
|
||||
const p2 = parseFloat(matches[3]);
|
||||
const alpha =
|
||||
(matches[5] !== undefined) ? parseFloat(matches[5]) : undefined;
|
||||
|
||||
matches =
|
||||
actual.match(oklabRegex);
|
||||
assert_true(!!matches,
|
||||
`Actual value ${actual} not recognized as an oklab color`);
|
||||
|
||||
const tolerance = 0.01;
|
||||
let colorMatch =
|
||||
Math.abs(parseFloat(matches[1]) - p0) <= tolerance &&
|
||||
Math.abs(parseFloat(matches[2]) - p1) <= tolerance &&
|
||||
Math.abs(parseFloat(matches[3]) - p2) <= tolerance;
|
||||
if (colorMatch) {
|
||||
if (alpha !== undefined) {
|
||||
colorMatch =
|
||||
matches[5] != undefined &&
|
||||
Math.abs(parseFloat(matches[5]) - alpha) <= tolerance;
|
||||
} else {
|
||||
colorMatch = matches[5] == undefined;
|
||||
}
|
||||
}
|
||||
assert_true(
|
||||
colorMatch,
|
||||
`expected: ${expected} actual ${actual} -- ${message}`);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue