mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-21 03:55:24 +00:00
LibWeb: Don't convert color functions to RGB when resolving color values
This commit is contained in:
Tim Ledbetter
Sam Atkins
parent
02d34dd021
commit
a97fe3123d
Notes:
github-actions[bot]
2025-04-09 11:12:39 +00:00
Author: https://github.com/tcl3 Commit: https://github.com/LadybirdBrowser/ladybird/commit/a97fe3123d7 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4245 Reviewed-by: https://github.com/AtkinsSJ ✅
5 changed files with 746 additions and 10 deletions
|
|
@ -591,6 +591,14 @@ Optional<StyleProperty> CSSStyleProperties::get_property_internal(PropertyID pro
|
|||
return property(property_id);
|
||||
}
|
||||
|
||||
static RefPtr<CSSStyleValue const> resolve_color_style_value(CSSStyleValue const& style_value, Color computed_color)
|
||||
{
|
||||
if (style_value.is_color_function())
|
||||
return style_value;
|
||||
|
||||
return CSSColorValue::create_from_color(computed_color, ColorSyntax::Modern);
|
||||
}
|
||||
|
||||
RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_property(Layout::NodeWithStyle const& layout_node, PropertyID property_id) const
|
||||
{
|
||||
auto used_value_for_property = [&layout_node, property_id](Function<CSSPixels(Painting::PaintableBox const&)>&& used_value_getter) -> Optional<CSSPixels> {
|
||||
|
|
@ -651,7 +659,7 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
|
|||
// -> A resolved value special case property like color defined in another specification
|
||||
// The resolved value is the used value.
|
||||
case PropertyID::BackgroundColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().background_color(), ColorSyntax::Modern);
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().background_color());
|
||||
case PropertyID::BorderBlockEndColor:
|
||||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
return style_value_for_computed_property(layout_node, PropertyID::BorderBottomColor);
|
||||
|
|
@ -659,7 +667,7 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
|
|||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
return style_value_for_computed_property(layout_node, PropertyID::BorderTopColor);
|
||||
case PropertyID::BorderBottomColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().border_bottom().color, ColorSyntax::Modern);
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().border_bottom().color);
|
||||
case PropertyID::BorderInlineEndColor:
|
||||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
return style_value_for_computed_property(layout_node, PropertyID::BorderRightColor);
|
||||
|
|
@ -667,21 +675,21 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
|
|||
// FIXME: Honor writing-mode, direction and text-orientation.
|
||||
return style_value_for_computed_property(layout_node, PropertyID::BorderLeftColor);
|
||||
case PropertyID::BorderLeftColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().border_left().color, ColorSyntax::Modern);
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().border_left().color);
|
||||
case PropertyID::BorderRightColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().border_right().color, ColorSyntax::Modern);
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().border_right().color);
|
||||
case PropertyID::BorderTopColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().border_top().color, ColorSyntax::Modern);
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().border_top().color);
|
||||
case PropertyID::BoxShadow:
|
||||
return style_value_for_shadow(layout_node.computed_values().box_shadow());
|
||||
case PropertyID::CaretColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().caret_color(), ColorSyntax::Modern);
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().caret_color());
|
||||
case PropertyID::Color:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().color(), ColorSyntax::Modern);
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().color());
|
||||
case PropertyID::OutlineColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().outline_color(), ColorSyntax::Modern);
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().outline_color());
|
||||
case PropertyID::TextDecorationColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().text_decoration_color(), ColorSyntax::Modern);
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().text_decoration_color());
|
||||
// NB: text-shadow isn't listed, but is computed the same as box-shadow.
|
||||
case PropertyID::TextShadow:
|
||||
return style_value_for_shadow(layout_node.computed_values().text_shadow());
|
||||
|
|
@ -965,7 +973,7 @@ RefPtr<CSSStyleValue const> CSSStyleProperties::style_value_for_computed_propert
|
|||
return LengthStyleValue::create(outline_width);
|
||||
}
|
||||
case PropertyID::WebkitTextFillColor:
|
||||
return CSSColorValue::create_from_color(layout_node.computed_values().webkit_text_fill_color(), ColorSyntax::Modern);
|
||||
return resolve_color_style_value(get_computed_value(property_id), layout_node.computed_values().webkit_text_fill_color());
|
||||
case PropertyID::Invalid:
|
||||
return CSSKeywordValue::create(Keyword::Invalid);
|
||||
case PropertyID::Custom:
|
||||
|
|
|
|||
|
|
@ -176,6 +176,7 @@ public:
|
|||
bool is_color() const { return type() == Type::Color; }
|
||||
CSSColorValue const& as_color() const;
|
||||
CSSColorValue& as_color() { return const_cast<CSSColorValue&>(const_cast<CSSStyleValue const&>(*this).as_color()); }
|
||||
virtual bool is_color_function() const { return false; }
|
||||
|
||||
bool is_color_scheme() const { return type() == Type::ColorScheme; }
|
||||
ColorSchemeStyleValue const& as_color_scheme() const;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ public:
|
|||
virtual Color to_color(Optional<Layout::NodeWithStyle const&>) const override;
|
||||
virtual String to_string(SerializationMode) const override;
|
||||
|
||||
virtual bool is_color_function() const override { return true; }
|
||||
|
||||
static constexpr Array s_supported_color_space = { "a98-rgb"sv, "display-p3"sv, "srgb"sv, "srgb-linear"sv, "prophoto-rgb"sv, "rec2020"sv, "xyz"sv, "xyz-d50"sv, "xyz-d65"sv };
|
||||
|
||||
private:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,427 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 421 tests
|
||||
|
||||
284 Pass
|
||||
137 Fail
|
||||
Pass Property color value 'color(srgb 0% 0% 0%)'
|
||||
Pass Property color value 'color(srgb 10% 10% 10%)'
|
||||
Pass Property color value 'color(srgb .2 .2 25%)'
|
||||
Pass Property color value 'color(srgb 0 0 0 / 1)'
|
||||
Pass Property color value 'color(srgb 0% 0 0 / 0.5)'
|
||||
Pass Property color value 'color(srgb 20% 0 10/0.5)'
|
||||
Pass Property color value 'color(srgb 20% 0 10/50%)'
|
||||
Pass Property color value 'color(srgb 400% 0 10/50%)'
|
||||
Pass Property color value 'color(srgb 50% -160 160)'
|
||||
Pass Property color value 'color(srgb 50% -200 200)'
|
||||
Pass Property color value 'color(srgb 0 0 0 / -10%)'
|
||||
Pass Property color value 'color(srgb 0 0 0 / 110%)'
|
||||
Pass Property color value 'color(srgb 0 0 0 / 300%)'
|
||||
Pass Property color value 'color(srgb 200 200 200)'
|
||||
Pass Property color value 'color(srgb 200 200 200 / 200)'
|
||||
Pass Property color value 'color(srgb -200 -200 -200)'
|
||||
Pass Property color value 'color(srgb -200 -200 -200 / -200)'
|
||||
Pass Property color value 'color(srgb 200% 200% 200%)'
|
||||
Pass Property color value 'color(srgb 200% 200% 200% / 200%)'
|
||||
Pass Property color value 'color(srgb -200% -200% -200% / -200%)'
|
||||
Pass Property color value 'color(srgb calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))'
|
||||
Pass Property color value 'color(srgb calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))'
|
||||
Fail Property color value 'color(srgb none none none / none)'
|
||||
Fail Property color value 'color(srgb none none none)'
|
||||
Fail Property color value 'color(srgb 10% none none / none)'
|
||||
Fail Property color value 'color(srgb none none none / 0.5)'
|
||||
Fail Property color value 'color(srgb 0 0 0 / none)'
|
||||
Pass Property color value 'color(srgb calc(NaN) 0 0)'
|
||||
Pass Property color value 'color(srgb calc(0 / 0) 0 0)'
|
||||
Fail Property color value 'color(srgb calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)'
|
||||
Fail Property color value 'color(srgb 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Pass Property color value 'color(srgb-linear 0% 0% 0%)'
|
||||
Pass Property color value 'color(srgb-linear 10% 10% 10%)'
|
||||
Pass Property color value 'color(srgb-linear .2 .2 25%)'
|
||||
Pass Property color value 'color(srgb-linear 0 0 0 / 1)'
|
||||
Pass Property color value 'color(srgb-linear 0% 0 0 / 0.5)'
|
||||
Pass Property color value 'color(srgb-linear 20% 0 10/0.5)'
|
||||
Pass Property color value 'color(srgb-linear 20% 0 10/50%)'
|
||||
Pass Property color value 'color(srgb-linear 400% 0 10/50%)'
|
||||
Pass Property color value 'color(srgb-linear 50% -160 160)'
|
||||
Pass Property color value 'color(srgb-linear 50% -200 200)'
|
||||
Pass Property color value 'color(srgb-linear 0 0 0 / -10%)'
|
||||
Pass Property color value 'color(srgb-linear 0 0 0 / 110%)'
|
||||
Pass Property color value 'color(srgb-linear 0 0 0 / 300%)'
|
||||
Pass Property color value 'color(srgb-linear 200 200 200)'
|
||||
Pass Property color value 'color(srgb-linear 200 200 200 / 200)'
|
||||
Pass Property color value 'color(srgb-linear -200 -200 -200)'
|
||||
Pass Property color value 'color(srgb-linear -200 -200 -200 / -200)'
|
||||
Pass Property color value 'color(srgb-linear 200% 200% 200%)'
|
||||
Pass Property color value 'color(srgb-linear 200% 200% 200% / 200%)'
|
||||
Pass Property color value 'color(srgb-linear -200% -200% -200% / -200%)'
|
||||
Pass Property color value 'color(srgb-linear calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))'
|
||||
Pass Property color value 'color(srgb-linear calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))'
|
||||
Fail Property color value 'color(srgb-linear none none none / none)'
|
||||
Fail Property color value 'color(srgb-linear none none none)'
|
||||
Fail Property color value 'color(srgb-linear 10% none none / none)'
|
||||
Fail Property color value 'color(srgb-linear none none none / 0.5)'
|
||||
Fail Property color value 'color(srgb-linear 0 0 0 / none)'
|
||||
Pass Property color value 'color(srgb-linear calc(NaN) 0 0)'
|
||||
Pass Property color value 'color(srgb-linear calc(0 / 0) 0 0)'
|
||||
Fail Property color value 'color(srgb-linear calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)'
|
||||
Fail Property color value 'color(srgb-linear 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Pass Property color value 'color(a98-rgb 0% 0% 0%)'
|
||||
Pass Property color value 'color(a98-rgb 10% 10% 10%)'
|
||||
Pass Property color value 'color(a98-rgb .2 .2 25%)'
|
||||
Pass Property color value 'color(a98-rgb 0 0 0 / 1)'
|
||||
Pass Property color value 'color(a98-rgb 0% 0 0 / 0.5)'
|
||||
Pass Property color value 'color(a98-rgb 20% 0 10/0.5)'
|
||||
Pass Property color value 'color(a98-rgb 20% 0 10/50%)'
|
||||
Pass Property color value 'color(a98-rgb 400% 0 10/50%)'
|
||||
Pass Property color value 'color(a98-rgb 50% -160 160)'
|
||||
Pass Property color value 'color(a98-rgb 50% -200 200)'
|
||||
Pass Property color value 'color(a98-rgb 0 0 0 / -10%)'
|
||||
Pass Property color value 'color(a98-rgb 0 0 0 / 110%)'
|
||||
Pass Property color value 'color(a98-rgb 0 0 0 / 300%)'
|
||||
Pass Property color value 'color(a98-rgb 200 200 200)'
|
||||
Pass Property color value 'color(a98-rgb 200 200 200 / 200)'
|
||||
Pass Property color value 'color(a98-rgb -200 -200 -200)'
|
||||
Pass Property color value 'color(a98-rgb -200 -200 -200 / -200)'
|
||||
Pass Property color value 'color(a98-rgb 200% 200% 200%)'
|
||||
Pass Property color value 'color(a98-rgb 200% 200% 200% / 200%)'
|
||||
Pass Property color value 'color(a98-rgb -200% -200% -200% / -200%)'
|
||||
Pass Property color value 'color(a98-rgb calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))'
|
||||
Pass Property color value 'color(a98-rgb calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))'
|
||||
Fail Property color value 'color(a98-rgb none none none / none)'
|
||||
Fail Property color value 'color(a98-rgb none none none)'
|
||||
Fail Property color value 'color(a98-rgb 10% none none / none)'
|
||||
Fail Property color value 'color(a98-rgb none none none / 0.5)'
|
||||
Fail Property color value 'color(a98-rgb 0 0 0 / none)'
|
||||
Pass Property color value 'color(a98-rgb calc(NaN) 0 0)'
|
||||
Pass Property color value 'color(a98-rgb calc(0 / 0) 0 0)'
|
||||
Fail Property color value 'color(a98-rgb calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)'
|
||||
Fail Property color value 'color(a98-rgb 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Pass Property color value 'color(rec2020 0% 0% 0%)'
|
||||
Pass Property color value 'color(rec2020 10% 10% 10%)'
|
||||
Pass Property color value 'color(rec2020 .2 .2 25%)'
|
||||
Pass Property color value 'color(rec2020 0 0 0 / 1)'
|
||||
Pass Property color value 'color(rec2020 0% 0 0 / 0.5)'
|
||||
Pass Property color value 'color(rec2020 20% 0 10/0.5)'
|
||||
Pass Property color value 'color(rec2020 20% 0 10/50%)'
|
||||
Pass Property color value 'color(rec2020 400% 0 10/50%)'
|
||||
Pass Property color value 'color(rec2020 50% -160 160)'
|
||||
Pass Property color value 'color(rec2020 50% -200 200)'
|
||||
Pass Property color value 'color(rec2020 0 0 0 / -10%)'
|
||||
Pass Property color value 'color(rec2020 0 0 0 / 110%)'
|
||||
Pass Property color value 'color(rec2020 0 0 0 / 300%)'
|
||||
Pass Property color value 'color(rec2020 200 200 200)'
|
||||
Pass Property color value 'color(rec2020 200 200 200 / 200)'
|
||||
Pass Property color value 'color(rec2020 -200 -200 -200)'
|
||||
Pass Property color value 'color(rec2020 -200 -200 -200 / -200)'
|
||||
Pass Property color value 'color(rec2020 200% 200% 200%)'
|
||||
Pass Property color value 'color(rec2020 200% 200% 200% / 200%)'
|
||||
Pass Property color value 'color(rec2020 -200% -200% -200% / -200%)'
|
||||
Pass Property color value 'color(rec2020 calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))'
|
||||
Pass Property color value 'color(rec2020 calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))'
|
||||
Fail Property color value 'color(rec2020 none none none / none)'
|
||||
Fail Property color value 'color(rec2020 none none none)'
|
||||
Fail Property color value 'color(rec2020 10% none none / none)'
|
||||
Fail Property color value 'color(rec2020 none none none / 0.5)'
|
||||
Fail Property color value 'color(rec2020 0 0 0 / none)'
|
||||
Pass Property color value 'color(rec2020 calc(NaN) 0 0)'
|
||||
Pass Property color value 'color(rec2020 calc(0 / 0) 0 0)'
|
||||
Fail Property color value 'color(rec2020 calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)'
|
||||
Fail Property color value 'color(rec2020 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Pass Property color value 'color(prophoto-rgb 0% 0% 0%)'
|
||||
Pass Property color value 'color(prophoto-rgb 10% 10% 10%)'
|
||||
Pass Property color value 'color(prophoto-rgb .2 .2 25%)'
|
||||
Pass Property color value 'color(prophoto-rgb 0 0 0 / 1)'
|
||||
Pass Property color value 'color(prophoto-rgb 0% 0 0 / 0.5)'
|
||||
Pass Property color value 'color(prophoto-rgb 20% 0 10/0.5)'
|
||||
Pass Property color value 'color(prophoto-rgb 20% 0 10/50%)'
|
||||
Pass Property color value 'color(prophoto-rgb 400% 0 10/50%)'
|
||||
Pass Property color value 'color(prophoto-rgb 50% -160 160)'
|
||||
Pass Property color value 'color(prophoto-rgb 50% -200 200)'
|
||||
Pass Property color value 'color(prophoto-rgb 0 0 0 / -10%)'
|
||||
Pass Property color value 'color(prophoto-rgb 0 0 0 / 110%)'
|
||||
Pass Property color value 'color(prophoto-rgb 0 0 0 / 300%)'
|
||||
Pass Property color value 'color(prophoto-rgb 200 200 200)'
|
||||
Pass Property color value 'color(prophoto-rgb 200 200 200 / 200)'
|
||||
Pass Property color value 'color(prophoto-rgb -200 -200 -200)'
|
||||
Pass Property color value 'color(prophoto-rgb -200 -200 -200 / -200)'
|
||||
Pass Property color value 'color(prophoto-rgb 200% 200% 200%)'
|
||||
Pass Property color value 'color(prophoto-rgb 200% 200% 200% / 200%)'
|
||||
Pass Property color value 'color(prophoto-rgb -200% -200% -200% / -200%)'
|
||||
Pass Property color value 'color(prophoto-rgb calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))'
|
||||
Pass Property color value 'color(prophoto-rgb calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))'
|
||||
Fail Property color value 'color(prophoto-rgb none none none / none)'
|
||||
Fail Property color value 'color(prophoto-rgb none none none)'
|
||||
Fail Property color value 'color(prophoto-rgb 10% none none / none)'
|
||||
Fail Property color value 'color(prophoto-rgb none none none / 0.5)'
|
||||
Fail Property color value 'color(prophoto-rgb 0 0 0 / none)'
|
||||
Pass Property color value 'color(prophoto-rgb calc(NaN) 0 0)'
|
||||
Pass Property color value 'color(prophoto-rgb calc(0 / 0) 0 0)'
|
||||
Fail Property color value 'color(prophoto-rgb calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)'
|
||||
Fail Property color value 'color(prophoto-rgb 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Pass Property color value 'color(display-p3 0% 0% 0%)'
|
||||
Pass Property color value 'color(display-p3 10% 10% 10%)'
|
||||
Pass Property color value 'color(display-p3 .2 .2 25%)'
|
||||
Pass Property color value 'color(display-p3 0 0 0 / 1)'
|
||||
Pass Property color value 'color(display-p3 0% 0 0 / 0.5)'
|
||||
Pass Property color value 'color(display-p3 20% 0 10/0.5)'
|
||||
Pass Property color value 'color(display-p3 20% 0 10/50%)'
|
||||
Pass Property color value 'color(display-p3 400% 0 10/50%)'
|
||||
Pass Property color value 'color(display-p3 50% -160 160)'
|
||||
Pass Property color value 'color(display-p3 50% -200 200)'
|
||||
Pass Property color value 'color(display-p3 0 0 0 / -10%)'
|
||||
Pass Property color value 'color(display-p3 0 0 0 / 110%)'
|
||||
Pass Property color value 'color(display-p3 0 0 0 / 300%)'
|
||||
Pass Property color value 'color(display-p3 200 200 200)'
|
||||
Pass Property color value 'color(display-p3 200 200 200 / 200)'
|
||||
Pass Property color value 'color(display-p3 -200 -200 -200)'
|
||||
Pass Property color value 'color(display-p3 -200 -200 -200 / -200)'
|
||||
Pass Property color value 'color(display-p3 200% 200% 200%)'
|
||||
Pass Property color value 'color(display-p3 200% 200% 200% / 200%)'
|
||||
Pass Property color value 'color(display-p3 -200% -200% -200% / -200%)'
|
||||
Pass Property color value 'color(display-p3 calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))'
|
||||
Pass Property color value 'color(display-p3 calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))'
|
||||
Fail Property color value 'color(display-p3 none none none / none)'
|
||||
Fail Property color value 'color(display-p3 none none none)'
|
||||
Fail Property color value 'color(display-p3 10% none none / none)'
|
||||
Fail Property color value 'color(display-p3 none none none / 0.5)'
|
||||
Fail Property color value 'color(display-p3 0 0 0 / none)'
|
||||
Pass Property color value 'color(display-p3 calc(NaN) 0 0)'
|
||||
Pass Property color value 'color(display-p3 calc(0 / 0) 0 0)'
|
||||
Fail Property color value 'color(display-p3 calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)'
|
||||
Fail Property color value 'color(display-p3 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Pass Property color value 'color(xyz 0 0 0)'
|
||||
Pass Property color value 'color(xyz 0 0 0 / 1)'
|
||||
Pass Property color value 'color(xyz 1 1 1)'
|
||||
Pass Property color value 'color(xyz 1 1 1 / 1)'
|
||||
Pass Property color value 'color(xyz -1 -1 -1)'
|
||||
Pass Property color value 'color(xyz 0.1 0.1 0.1)'
|
||||
Pass Property color value 'color(xyz 10 10 10)'
|
||||
Pass Property color value 'color(xyz .2 .2 .25)'
|
||||
Pass Property color value 'color(xyz 0 0 0 / 0.5)'
|
||||
Pass Property color value 'color(xyz .20 0 10/0.5)'
|
||||
Pass Property color value 'color(xyz .20 0 10/50%)'
|
||||
Pass Property color value 'color(xyz 0 0 0 / -10%)'
|
||||
Pass Property color value 'color(xyz 0 0 0 / 110%)'
|
||||
Pass Property color value 'color(xyz 0 0 0 / 300%)'
|
||||
Pass Property color value 'color(xyz calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))'
|
||||
Fail Property color value 'color(xyz none none none / none)'
|
||||
Fail Property color value 'color(xyz none none none)'
|
||||
Fail Property color value 'color(xyz 0.2 none none / none)'
|
||||
Fail Property color value 'color(xyz none none none / 0.5)'
|
||||
Fail Property color value 'color(xyz 0 0 0 / none)'
|
||||
Pass Property color value 'color(xyz calc(NaN) 0 0)'
|
||||
Pass Property color value 'color(xyz calc(0 / 0) 0 0)'
|
||||
Fail Property color value 'color(xyz calc(0.5 + (sign(1em - 10px) * 0.1)) 0 0 / 0.5)'
|
||||
Fail Property color value 'color(xyz 0.5 0 0 / calc(0.5 + (sign(1em - 10px) * 0.1)))'
|
||||
Pass Property color value 'color(xyz-d50 0 0 0)'
|
||||
Pass Property color value 'color(xyz-d50 0 0 0 / 1)'
|
||||
Pass Property color value 'color(xyz-d50 1 1 1)'
|
||||
Pass Property color value 'color(xyz-d50 1 1 1 / 1)'
|
||||
Pass Property color value 'color(xyz-d50 -1 -1 -1)'
|
||||
Pass Property color value 'color(xyz-d50 0.1 0.1 0.1)'
|
||||
Pass Property color value 'color(xyz-d50 10 10 10)'
|
||||
Pass Property color value 'color(xyz-d50 .2 .2 .25)'
|
||||
Pass Property color value 'color(xyz-d50 0 0 0 / 0.5)'
|
||||
Pass Property color value 'color(xyz-d50 .20 0 10/0.5)'
|
||||
Pass Property color value 'color(xyz-d50 .20 0 10/50%)'
|
||||
Pass Property color value 'color(xyz-d50 0 0 0 / -10%)'
|
||||
Pass Property color value 'color(xyz-d50 0 0 0 / 110%)'
|
||||
Pass Property color value 'color(xyz-d50 0 0 0 / 300%)'
|
||||
Pass Property color value 'color(xyz-d50 calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))'
|
||||
Fail Property color value 'color(xyz-d50 none none none / none)'
|
||||
Fail Property color value 'color(xyz-d50 none none none)'
|
||||
Fail Property color value 'color(xyz-d50 0.2 none none / none)'
|
||||
Fail Property color value 'color(xyz-d50 none none none / 0.5)'
|
||||
Fail Property color value 'color(xyz-d50 0 0 0 / none)'
|
||||
Pass Property color value 'color(xyz-d50 calc(NaN) 0 0)'
|
||||
Pass Property color value 'color(xyz-d50 calc(0 / 0) 0 0)'
|
||||
Fail Property color value 'color(xyz-d50 calc(0.5 + (sign(1em - 10px) * 0.1)) 0 0 / 0.5)'
|
||||
Fail Property color value 'color(xyz-d50 0.5 0 0 / calc(0.5 + (sign(1em - 10px) * 0.1)))'
|
||||
Pass Property color value 'color(xyz-d65 0 0 0)'
|
||||
Pass Property color value 'color(xyz-d65 0 0 0 / 1)'
|
||||
Pass Property color value 'color(xyz-d65 1 1 1)'
|
||||
Pass Property color value 'color(xyz-d65 1 1 1 / 1)'
|
||||
Pass Property color value 'color(xyz-d65 -1 -1 -1)'
|
||||
Pass Property color value 'color(xyz-d65 0.1 0.1 0.1)'
|
||||
Pass Property color value 'color(xyz-d65 10 10 10)'
|
||||
Pass Property color value 'color(xyz-d65 .2 .2 .25)'
|
||||
Pass Property color value 'color(xyz-d65 0 0 0 / 0.5)'
|
||||
Pass Property color value 'color(xyz-d65 .20 0 10/0.5)'
|
||||
Pass Property color value 'color(xyz-d65 .20 0 10/50%)'
|
||||
Pass Property color value 'color(xyz-d65 0 0 0 / -10%)'
|
||||
Pass Property color value 'color(xyz-d65 0 0 0 / 110%)'
|
||||
Pass Property color value 'color(xyz-d65 0 0 0 / 300%)'
|
||||
Pass Property color value 'color(xyz-d65 calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))'
|
||||
Fail Property color value 'color(xyz-d65 none none none / none)'
|
||||
Fail Property color value 'color(xyz-d65 none none none)'
|
||||
Fail Property color value 'color(xyz-d65 0.2 none none / none)'
|
||||
Fail Property color value 'color(xyz-d65 none none none / 0.5)'
|
||||
Fail Property color value 'color(xyz-d65 0 0 0 / none)'
|
||||
Pass Property color value 'color(xyz-d65 calc(NaN) 0 0)'
|
||||
Pass Property color value 'color(xyz-d65 calc(0 / 0) 0 0)'
|
||||
Fail Property color value 'color(xyz-d65 calc(0.5 + (sign(1em - 10px) * 0.1)) 0 0 / 0.5)'
|
||||
Fail Property color value 'color(xyz-d65 0.5 0 0 / calc(0.5 + (sign(1em - 10px) * 0.1)))'
|
||||
Pass Property color value 'color(srgb 1.00 0.50 0.200)' [sRGB all numbers]
|
||||
Pass Property color value 'color(srgb 100% 50% 20%)' [sRGB all percent]
|
||||
Pass Property color value 'color(srgb 100% 0.5 20%)' [sRGB mixed number and percent]
|
||||
Pass Property color value 'color(srgb 1.00 50% 0.2)' [sRGB mixed number and percent 2]
|
||||
Fail Property color value 'color(srgb none none none)' [sRGB all none]
|
||||
Fail Property color value 'color(srgb 1.00 none 0.2)' [sRGB number and none]
|
||||
Fail Property color value 'color(srgb 100% none 20%)' [sRGB percent and none]
|
||||
Fail Property color value 'color(srgb 100% none 0.2)' [sRGB number, percent and none]
|
||||
Pass Property color value 'color(srgb 1.00 0.50 0.200 / 0.6)' [sRGB with alpha, all numbers]
|
||||
Pass Property color value 'color(srgb 100% 50% 20% / 60%)' [sRGB with alpha, all percent]
|
||||
Pass Property color value 'color(srgb 100% 0.5 20% / 0.6)' [sRGB with alpha, mixed number and percent]
|
||||
Pass Property color value 'color(srgb 1.00 50% 0.2 / 60%)' [sRGB with alpha, mixed number and percent 2]
|
||||
Fail Property color value 'color(srgb none none none / none)' [sRGB with alpha, all none]
|
||||
Fail Property color value 'color(srgb 1.00 none 0.2 / none)' [sRGB with alpha, number and none]
|
||||
Fail Property color value 'color(srgb 100% none 20% / 30%)' [sRGB with alpha, percent and none]
|
||||
Fail Property color value 'color(srgb 100% none 0.2 / 23.7%)' [sRGB with alpha, number, percent and none]
|
||||
Pass Property color value 'color(srgb-linear 1.00 0.50 0.200)' [Linear-light sRGB all numbers]
|
||||
Pass Property color value 'color(srgb-linear 100% 50% 20%)' [Linear-light sRGB all percent]
|
||||
Pass Property color value 'color(srgb-linear 100% 0.5 20%)' [Linear-light sRGB mixed number and percent]
|
||||
Pass Property color value 'color(srgb-linear 1.00 50% 0.2)' [Linear-light sRGB mixed number and percent 2]
|
||||
Fail Property color value 'color(srgb-linear none none none)' [Linear-light sRGB all none]
|
||||
Fail Property color value 'color(srgb-linear 1.00 none 0.2)' [Linear-light sRGB number and none]
|
||||
Fail Property color value 'color(srgb-linear 100% none 20%)' [Linear-light sRGB percent and none]
|
||||
Fail Property color value 'color(srgb-linear 100% none 0.2)' [Linear-light sRGB number, percent and none]
|
||||
Pass Property color value 'color(srgb-linear 1.00 0.50 0.200 / 0.6)' [Linear-light sRGB with alpha, all numbers]
|
||||
Pass Property color value 'color(srgb-linear 100% 50% 20% / 60%)' [Linear-light sRGB with alpha, all percent]
|
||||
Pass Property color value 'color(srgb-linear 100% 0.5 20% / 0.6)' [Linear-light sRGB with alpha, mixed number and percent]
|
||||
Pass Property color value 'color(srgb-linear 1.00 50% 0.2 / 60%)' [Linear-light sRGB with alpha, mixed number and percent 2]
|
||||
Fail Property color value 'color(srgb-linear none none none / none)' [Linear-light sRGB with alpha, all none]
|
||||
Fail Property color value 'color(srgb-linear 1.00 none 0.2 / none)' [Linear-light sRGB with alpha, number and none]
|
||||
Fail Property color value 'color(srgb-linear 100% none 20% / 30%)' [Linear-light sRGB with alpha, percent and none]
|
||||
Fail Property color value 'color(srgb-linear 100% none 0.2 / 23.7%)' [Linear-light sRGB with alpha, number, percent and none]
|
||||
Pass Property color value 'color(display-p3 1.00 0.50 0.200)' [Display P3 all numbers]
|
||||
Pass Property color value 'color(display-p3 100% 50% 20%)' [Display P3 all percent]
|
||||
Pass Property color value 'color(display-p3 100% 0.5 20%)' [Display P3 mixed number and percent]
|
||||
Pass Property color value 'color(display-p3 1.00 50% 0.2)' [Display P3 mixed number and percent 2]
|
||||
Fail Property color value 'color(display-p3 none none none)' [Display P3 all none]
|
||||
Fail Property color value 'color(display-p3 1.00 none 0.2)' [Display P3 number and none]
|
||||
Fail Property color value 'color(display-p3 100% none 20%)' [Display P3 percent and none]
|
||||
Fail Property color value 'color(display-p3 100% none 0.2)' [Display P3 number, percent and none]
|
||||
Pass Property color value 'color(display-p3 1.00 0.50 0.200 / 0.6)' [Display P3 with alpha, all numbers]
|
||||
Pass Property color value 'color(display-p3 100% 50% 20% / 60%)' [Display P3 with alpha, all percent]
|
||||
Pass Property color value 'color(display-p3 100% 0.5 20% / 0.6)' [Display P3 with alpha, mixed number and percent]
|
||||
Pass Property color value 'color(display-p3 1.00 50% 0.2 / 60%)' [Display P3 with alpha, mixed number and percent 2]
|
||||
Fail Property color value 'color(display-p3 none none none / none)' [Display P3 with alpha, all none]
|
||||
Fail Property color value 'color(display-p3 1.00 none 0.2 / none)' [Display P3 with alpha, number and none]
|
||||
Fail Property color value 'color(display-p3 100% none 20% / 30%)' [Display P3 with alpha, percent and none]
|
||||
Fail Property color value 'color(display-p3 100% none 0.2 / 23.7%)' [Display P3 with alpha, number, percent and none]
|
||||
Pass Property color value 'color(a98-rgb 1.00 0.50 0.200)' [A98 RGB all numbers]
|
||||
Pass Property color value 'color(a98-rgb 100% 50% 20%)' [A98 RGB all percent]
|
||||
Pass Property color value 'color(a98-rgb 100% 0.5 20%)' [A98 RGB mixed number and percent]
|
||||
Pass Property color value 'color(a98-rgb 1.00 50% 0.2)' [A98 RGB mixed number and percent 2]
|
||||
Fail Property color value 'color(a98-rgb none none none)' [A98 RGB all none]
|
||||
Fail Property color value 'color(a98-rgb 1.00 none 0.2)' [A98 RGB number and none]
|
||||
Fail Property color value 'color(a98-rgb 100% none 20%)' [A98 RGB percent and none]
|
||||
Fail Property color value 'color(a98-rgb 100% none 0.2)' [A98 RGB number, percent and none]
|
||||
Pass Property color value 'color(a98-rgb 1.00 0.50 0.200 / 0.6)' [A98 RGB with alpha, all numbers]
|
||||
Pass Property color value 'color(a98-rgb 100% 50% 20% / 60%)' [A98 RGB with alpha, all percent]
|
||||
Pass Property color value 'color(a98-rgb 100% 0.5 20% / 0.6)' [A98 RGB with alpha, mixed number and percent]
|
||||
Pass Property color value 'color(a98-rgb 1.00 50% 0.2 / 60%)' [A98 RGB with alpha, mixed number and percent 2]
|
||||
Fail Property color value 'color(a98-rgb none none none / none)' [A98 RGB with alpha, all none]
|
||||
Fail Property color value 'color(a98-rgb 1.00 none 0.2 / none)' [A98 RGB with alpha, number and none]
|
||||
Fail Property color value 'color(a98-rgb 100% none 20% / 30%)' [A98 RGB with alpha, percent and none]
|
||||
Fail Property color value 'color(a98-rgb 100% none 0.2 / 23.7%)' [A98 RGB with alpha, number, percent and none]
|
||||
Pass Property color value 'color(prophoto-rgb 1.00 0.50 0.200)' [ProPhoto RGB all numbers]
|
||||
Pass Property color value 'color(prophoto-rgb 100% 50% 20%)' [ProPhoto RGB all percent]
|
||||
Pass Property color value 'color(prophoto-rgb 100% 0.5 20%)' [ProPhoto RGB mixed number and percent]
|
||||
Pass Property color value 'color(prophoto-rgb 1.00 50% 0.2)' [ProPhoto RGB mixed number and percent 2]
|
||||
Fail Property color value 'color(prophoto-rgb none none none)' [ProPhoto RGB all none]
|
||||
Fail Property color value 'color(prophoto-rgb 1.00 none 0.2)' [ProPhoto RGB number and none]
|
||||
Fail Property color value 'color(prophoto-rgb 100% none 20%)' [ProPhoto RGB percent and none]
|
||||
Fail Property color value 'color(prophoto-rgb 100% none 0.2)' [ProPhoto RGB number, percent and none]
|
||||
Pass Property color value 'color(prophoto-rgb 1.00 0.50 0.200 / 0.6)' [ProPhoto RGB with alpha, all numbers]
|
||||
Pass Property color value 'color(prophoto-rgb 100% 50% 20% / 60%)' [ProPhoto RGB with alpha, all percent]
|
||||
Pass Property color value 'color(prophoto-rgb 100% 0.5 20% / 0.6)' [ProPhoto RGB with alpha, mixed number and percent]
|
||||
Pass Property color value 'color(prophoto-rgb 1.00 50% 0.2 / 60%)' [ProPhoto RGB with alpha, mixed number and percent 2]
|
||||
Fail Property color value 'color(prophoto-rgb none none none / none)' [ProPhoto RGB with alpha, all none]
|
||||
Fail Property color value 'color(prophoto-rgb 1.00 none 0.2 / none)' [ProPhoto RGB with alpha, number and none]
|
||||
Fail Property color value 'color(prophoto-rgb 100% none 20% / 30%)' [ProPhoto RGB with alpha, percent and none]
|
||||
Fail Property color value 'color(prophoto-rgb 100% none 0.2 / 23.7%)' [ProPhoto RGB with alpha, number, percent and none]
|
||||
Pass Property color value 'color(rec2020 1.00 0.50 0.200)' [Rec BT.2020 all numbers]
|
||||
Pass Property color value 'color(rec2020 100% 50% 20%)' [Rec BT.2020 all percent]
|
||||
Pass Property color value 'color(rec2020 100% 0.5 20%)' [Rec BT.2020 mixed number and percent]
|
||||
Pass Property color value 'color(rec2020 1.00 50% 0.2)' [Rec BT.2020 mixed number and percent 2]
|
||||
Fail Property color value 'color(rec2020 none none none)' [Rec BT.2020 all none]
|
||||
Fail Property color value 'color(rec2020 1.00 none 0.2)' [Rec BT.2020 number and none]
|
||||
Fail Property color value 'color(rec2020 100% none 20%)' [Rec BT.2020 percent and none]
|
||||
Fail Property color value 'color(rec2020 100% none 0.2)' [Rec BT.2020 number, percent and none]
|
||||
Pass Property color value 'color(rec2020 1.00 0.50 0.200 / 0.6)' [Rec BT.2020 with alpha, all numbers]
|
||||
Pass Property color value 'color(rec2020 100% 50% 20% / 60%)' [Rec BT.2020 with alpha, all percent]
|
||||
Pass Property color value 'color(rec2020 100% 0.5 20% / 0.6)' [Rec BT.2020 with alpha, mixed number and percent]
|
||||
Pass Property color value 'color(rec2020 1.00 50% 0.2 / 60%)' [Rec BT.2020 with alpha, mixed number and percent 2]
|
||||
Fail Property color value 'color(rec2020 none none none / none)' [Rec BT.2020 with alpha, all none]
|
||||
Fail Property color value 'color(rec2020 1.00 none 0.2 / none)' [Rec BT.2020 with alpha, number and none]
|
||||
Fail Property color value 'color(rec2020 100% none 20% / 30%)' [Rec BT.2020 with alpha, percent and none]
|
||||
Fail Property color value 'color(rec2020 100% none 0.2 / 23.7%)' [Rec BT.2020 with alpha, number, percent and none]
|
||||
Pass Property color value 'color(xyz-d50 1.00 0.50 0.200)' [CIE XYZ D50 all numbers]
|
||||
Pass Property color value 'color(xyz-d50 100% 50% 20%)' [CIE XYZ D50 all percent]
|
||||
Pass Property color value 'color(xyz-d50 100% 0.5 20%)' [CIE XYZ D50 mixed number and percent]
|
||||
Pass Property color value 'color(xyz-d50 1.00 50% 0.2)' [CIE XYZ D50 mixed number and percent 2]
|
||||
Fail Property color value 'color(xyz-d50 none none none)' [CIE XYZ D50 all none]
|
||||
Fail Property color value 'color(xyz-d50 1.00 none 0.2)' [CIE XYZ D50 number and none]
|
||||
Fail Property color value 'color(xyz-d50 100% none 20%)' [CIE XYZ D50 percent and none]
|
||||
Fail Property color value 'color(xyz-d50 100% none 0.2)' [CIE XYZ D50 number, percent and none]
|
||||
Pass Property color value 'color(xyz-d50 1.00 0.50 0.200 / 0.6)' [CIE XYZ D50 with alpha, all numbers]
|
||||
Pass Property color value 'color(xyz-d50 100% 50% 20% / 60%)' [CIE XYZ D50 with alpha, all percent]
|
||||
Pass Property color value 'color(xyz-d50 100% 0.5 20% / 0.6)' [CIE XYZ D50 with alpha, mixed number and percent]
|
||||
Pass Property color value 'color(xyz-d50 1.00 50% 0.2 / 60%)' [CIE XYZ D50 with alpha, mixed number and percent 2]
|
||||
Fail Property color value 'color(xyz-d50 none none none / none)' [CIE XYZ D50 with alpha, all none]
|
||||
Fail Property color value 'color(xyz-d50 1.00 none 0.2 / none)' [CIE XYZ D50 with alpha, number and none]
|
||||
Fail Property color value 'color(xyz-d50 100% none 20% / 30%)' [CIE XYZ D50 with alpha, percent and none]
|
||||
Fail Property color value 'color(xyz-d50 100% none 0.2 / 23.7%)' [CIE XYZ D50 with alpha, number, percent and none]
|
||||
Pass Property color value 'color(xyz-d65 1.00 0.50 0.200)' [CIE XYZ D65 all numbers]
|
||||
Pass Property color value 'color(xyz-d65 100% 50% 20%)' [CIE XYZ D65 all percent]
|
||||
Pass Property color value 'color(xyz-d65 100% 0.5 20%)' [CIE XYZ D65 mixed number and percent]
|
||||
Pass Property color value 'color(xyz-d65 1.00 50% 0.2)' [CIE XYZ D65 mixed number and percent 2]
|
||||
Fail Property color value 'color(xyz-d65 none none none)' [CIE XYZ D65 all none]
|
||||
Fail Property color value 'color(xyz-d65 1.00 none 0.2)' [CIE XYZ D65 number and none]
|
||||
Fail Property color value 'color(xyz-d65 100% none 20%)' [CIE XYZ D65 percent and none]
|
||||
Fail Property color value 'color(xyz-d65 100% none 0.2)' [CIE XYZ D65 number, percent and none]
|
||||
Pass Property color value 'color(xyz-d65 1.00 0.50 0.200 / 0.6)' [CIE XYZ D65 with alpha, all numbers]
|
||||
Pass Property color value 'color(xyz-d65 100% 50% 20% / 60%)' [CIE XYZ D65 with alpha, all percent]
|
||||
Pass Property color value 'color(xyz-d65 100% 0.5 20% / 0.6)' [CIE XYZ D65 with alpha, mixed number and percent]
|
||||
Pass Property color value 'color(xyz-d65 1.00 50% 0.2 / 60%)' [CIE XYZ D65 with alpha, mixed number and percent 2]
|
||||
Fail Property color value 'color(xyz-d65 none none none / none)' [CIE XYZ D65 with alpha, all none]
|
||||
Fail Property color value 'color(xyz-d65 1.00 none 0.2 / none)' [CIE XYZ D65 with alpha, number and none]
|
||||
Fail Property color value 'color(xyz-d65 100% none 20% / 30%)' [CIE XYZ D65 with alpha, percent and none]
|
||||
Fail Property color value 'color(xyz-d65 100% none 0.2 / 23.7%)' [CIE XYZ D65 with alpha, number, percent and none]
|
||||
Pass Property color value 'color(xyz 1.00 0.50 0.200)' [CIE XYZ (implicit D65) all numbers]
|
||||
Pass Property color value 'color(xyz 100% 50% 20%)' [CIE XYZ (implicit D65) all percent]
|
||||
Pass Property color value 'color(xyz 100% 0.5 20%)' [CIE XYZ (implicit D65) mixed number and percent]
|
||||
Pass Property color value 'color(xyz 1.00 50% 0.2)' [CIE XYZ (implicit D65) mixed number and percent 2]
|
||||
Fail Property color value 'color(xyz none none none)' [CIE XYZ (implicit D65) all none]
|
||||
Fail Property color value 'color(xyz 1.00 none 0.2)' [CIE XYZ (implicit D65) number and none]
|
||||
Fail Property color value 'color(xyz 100% none 20%)' [CIE XYZ (implicit D65) percent and none]
|
||||
Fail Property color value 'color(xyz 100% none 0.2)' [CIE XYZ (implicit D65) number, percent and none]
|
||||
Pass Property color value 'color(xyz 1.00 0.50 0.200 / 0.6)' [CIE XYZ (implicit D65) with alpha, all numbers]
|
||||
Pass Property color value 'color(xyz 100% 50% 20% / 60%)' [CIE XYZ (implicit D65) with alpha, all percent]
|
||||
Pass Property color value 'color(xyz 100% 0.5 20% / 0.6)' [CIE XYZ (implicit D65) with alpha, mixed number and percent]
|
||||
Pass Property color value 'color(xyz 1.00 50% 0.2 / 60%)' [CIE XYZ (implicit D65) with alpha, mixed number and percent 2]
|
||||
Fail Property color value 'color(xyz none none none / none)' [CIE XYZ (implicit D65) with alpha, all none]
|
||||
Fail Property color value 'color(xyz 1.00 none 0.2 / none)' [CIE XYZ (implicit D65) with alpha, number and none]
|
||||
Fail Property color value 'color(xyz 100% none 20% / 30%)' [CIE XYZ (implicit D65) with alpha, percent and none]
|
||||
Fail Property color value 'color(xyz 100% none 0.2 / 23.7%)' [CIE XYZ (implicit D65) with alpha, number, percent and none]
|
||||
Pass Property color value 'color(srgb 1 1 1)' [Basic sRGB white]
|
||||
Pass Property color value 'color( srgb 1 1 1 )' [White with lots of space]
|
||||
Pass Property color value 'color(srgb 0.25 0.5 0.75)' [sRGB color]
|
||||
Pass Property color value 'color(SrGb 0.25 0.5 0.75)' [Different case for sRGB]
|
||||
Pass Property color value 'color(srgb 1.00000 0.500000 0.20)' [sRGB color with unnecessary decimals]
|
||||
Pass Property color value 'color(srgb 1 1 1 / 0.5)' [sRGB white with 0.5 alpha]
|
||||
Pass Property color value 'color(srgb 1 1 1 / 0)' [sRGB white with 0 alpha]
|
||||
Pass Property color value 'color(srgb 1 1 1 / 50%)' [sRGB white with 50% alpha]
|
||||
Pass Property color value 'color(srgb 1 1 1 / 0%)' [sRGB white with 0% alpha]
|
||||
Pass Property color value 'color(display-p3 0.6 0.7 0.8)' [Display P3 color]
|
||||
Pass Property color value 'color(dIspLaY-P3 0.6 0.7 0.8)' [Different case for Display P3]
|
||||
Pass Property color value 'color(srgb -0.25 0.5 0.75)' [sRGB color with negative component should not clamp to 0]
|
||||
Pass Property color value 'color(srgb 0.25 1.5 0.75)' [sRGB color with component > 1 should not clamp]
|
||||
Pass Property color value 'color(display-p3 0.5 -199 0.75)' [Display P3 color with negative component should not clamp to 0]
|
||||
Pass Property color value 'color(display-p3 184 1.00001 1103)' [Display P3 color with component > 1 should not clamp]
|
||||
Pass Property color value 'color(srgb 0.1 0.2 0.3 / 1.9)' [Alpha > 1 should clamp]
|
||||
Pass Property color value 'color(srgb 1 1 1 / -0.2)' [Negative alpha should clamp]
|
||||
Fail Property color value 'color(srgb calc(0.5 + (sign(2cqw - 10px) * 0.1)) 0 0 / 0.51)'
|
||||
Fail Property color value 'color(srgb calc(0.5 + (sign(2cqw - 10px) * 0.1)) 0 0 / 0.52)'
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color Level 4: Computation of colors using color() function syntax</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-function">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-color-function-values">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-color-function-values">
|
||||
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<style>
|
||||
#container {
|
||||
container-type: inline-size;
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3" ]) {
|
||||
test_computed_value("color", `color(${colorSpace} 0% 0% 0%)`, `color(${colorSpace} 0 0 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} 10% 10% 10%)`, `color(${colorSpace} 0.1 0.1 0.1)`);
|
||||
test_computed_value("color", `color(${colorSpace} .2 .2 25%)`, `color(${colorSpace} 0.2 0.2 0.25)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / 1)`, `color(${colorSpace} 0 0 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0% 0 0 / 0.5)`, `color(${colorSpace} 0 0 0 / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} 20% 0 10/0.5)`, `color(${colorSpace} 0.2 0 10 / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} 20% 0 10/50%)`, `color(${colorSpace} 0.2 0 10 / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} 400% 0 10/50%)`, `color(${colorSpace} 4 0 10 / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} 50% -160 160)`, `color(${colorSpace} 0.5 -160 160)`);
|
||||
test_computed_value("color", `color(${colorSpace} 50% -200 200)`, `color(${colorSpace} 0.5 -200 200)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / -10%)`, `color(${colorSpace} 0 0 0 / 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / 110%)`, `color(${colorSpace} 0 0 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / 300%)`, `color(${colorSpace} 0 0 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} 200 200 200)`, `color(${colorSpace} 200 200 200)`);
|
||||
test_computed_value("color", `color(${colorSpace} 200 200 200 / 200)`, `color(${colorSpace} 200 200 200)`);
|
||||
test_computed_value("color", `color(${colorSpace} -200 -200 -200)`, `color(${colorSpace} -200 -200 -200)`);
|
||||
test_computed_value("color", `color(${colorSpace} -200 -200 -200 / -200)`, `color(${colorSpace} -200 -200 -200 / 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} 200% 200% 200%)`, `color(${colorSpace} 2 2 2)`);
|
||||
test_computed_value("color", `color(${colorSpace} 200% 200% 200% / 200%)`, `color(${colorSpace} 2 2 2)`);
|
||||
test_computed_value("color", `color(${colorSpace} -200% -200% -200% / -200%)`, `color(${colorSpace} -2 -2 -2 / 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))`, `color(${colorSpace} 1.5 -0.5 0.5 / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))`, `color(${colorSpace} 1.5 -0.5 0.5 / 0)`);
|
||||
|
||||
test_computed_value("color", `color(${colorSpace} none none none / none)`, `color(${colorSpace} none none none / none)`);
|
||||
test_computed_value("color", `color(${colorSpace} none none none)`, `color(${colorSpace} none none none)`);
|
||||
test_computed_value("color", `color(${colorSpace} 10% none none / none)`, `color(${colorSpace} 0.1 none none / none)`);
|
||||
test_computed_value("color", `color(${colorSpace} none none none / 0.5)`, `color(${colorSpace} none none none / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / none)`, `color(${colorSpace} 0 0 0 / none)`);
|
||||
|
||||
test_computed_value("color", `color(${colorSpace} calc(NaN) 0 0)`, `color(${colorSpace} 0 0 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} calc(0 / 0) 0 0)`, `color(${colorSpace} 0 0 0)`);
|
||||
|
||||
// calc(50% + (sign(1em - 10px) * 10%)), with its font relative units, must be evaluatated for computed value.
|
||||
test_computed_value("color", `color(${colorSpace} calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)`, `color(${colorSpace} 0.6 0 0 / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))`, `color(${colorSpace} 0.5 0 0 / 0.6)`);
|
||||
}
|
||||
|
||||
for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) {
|
||||
const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace;
|
||||
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0)`, `color(${resultColorSpace} 0 0 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / 1)`, `color(${resultColorSpace} 0 0 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} 1 1 1)`, `color(${resultColorSpace} 1 1 1)`);
|
||||
test_computed_value("color", `color(${colorSpace} 1 1 1 / 1)`, `color(${resultColorSpace} 1 1 1)`);
|
||||
test_computed_value("color", `color(${colorSpace} -1 -1 -1)`, `color(${resultColorSpace} -1 -1 -1)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0.1 0.1 0.1)`, `color(${resultColorSpace} 0.1 0.1 0.1)`);
|
||||
test_computed_value("color", `color(${colorSpace} 10 10 10)`, `color(${resultColorSpace} 10 10 10)`);
|
||||
test_computed_value("color", `color(${colorSpace} .2 .2 .25)`, `color(${resultColorSpace} 0.2 0.2 0.25)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / 0.5)`, `color(${resultColorSpace} 0 0 0 / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} .20 0 10/0.5)`, `color(${resultColorSpace} 0.2 0 10 / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} .20 0 10/50%)`, `color(${resultColorSpace} 0.2 0 10 / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / -10%)`, `color(${resultColorSpace} 0 0 0 / 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / 110%)`, `color(${resultColorSpace} 0 0 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / 300%)`, `color(${resultColorSpace} 0 0 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))`, `color(${resultColorSpace} 1.5 -0.5 0.5 / 0.5)`);
|
||||
|
||||
test_computed_value("color", `color(${colorSpace} none none none / none)`, `color(${resultColorSpace} none none none / none)`);
|
||||
test_computed_value("color", `color(${colorSpace} none none none)`, `color(${resultColorSpace} none none none)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0.2 none none / none)`, `color(${resultColorSpace} 0.2 none none / none)`);
|
||||
test_computed_value("color", `color(${colorSpace} none none none / 0.5)`, `color(${resultColorSpace} none none none / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0 0 0 / none)`, `color(${resultColorSpace} 0 0 0 / none)`);
|
||||
|
||||
test_computed_value("color", `color(${colorSpace} calc(NaN) 0 0)`, `color(${resultColorSpace} 0 0 0)`);
|
||||
test_computed_value("color", `color(${colorSpace} calc(0 / 0) 0 0)`, `color(${resultColorSpace} 0 0 0)`);
|
||||
|
||||
// calc(50% + (sign(1em - 10px) * 10%)), with its font relative units, must be evaluatated for computed value.
|
||||
test_computed_value("color", `color(${colorSpace} calc(0.5 + (sign(1em - 10px) * 0.1)) 0 0 / 0.5)`, `color(${resultColorSpace} 0.6 0 0 / 0.5)`);
|
||||
test_computed_value("color", `color(${colorSpace} 0.5 0 0 / calc(0.5 + (sign(1em - 10px) * 0.1)))`, `color(${resultColorSpace} 0.5 0 0 / 0.6)`);
|
||||
}
|
||||
|
||||
// Opaque sRGB in color()
|
||||
test_computed_value("color", "color(srgb 1.00 0.50 0.200)", "color(srgb 1 0.5 0.2)", "[sRGB all numbers]");
|
||||
test_computed_value("color", "color(srgb 100% 50% 20%)", "color(srgb 1 0.5 0.2)", "[sRGB all percent]");
|
||||
test_computed_value("color", "color(srgb 100% 0.5 20%)", "color(srgb 1 0.5 0.2)", "[sRGB mixed number and percent]");
|
||||
test_computed_value("color", "color(srgb 1.00 50% 0.2)", "color(srgb 1 0.5 0.2)", "[sRGB mixed number and percent 2]");
|
||||
test_computed_value("color", "color(srgb none none none)", "color(srgb none none none)", "[sRGB all none]");
|
||||
test_computed_value("color", "color(srgb 1.00 none 0.2)", "color(srgb 1 none 0.2)", "[sRGB number and none]");
|
||||
test_computed_value("color", "color(srgb 100% none 20%)", "color(srgb 1 none 0.2)", "[sRGB percent and none]");
|
||||
test_computed_value("color", "color(srgb 100% none 0.2)", "color(srgb 1 none 0.2)", "[sRGB number, percent and none]");
|
||||
|
||||
// non-unity alpha, sRGB in color()
|
||||
test_computed_value("color", "color(srgb 1.00 0.50 0.200 / 0.6)", "color(srgb 1 0.5 0.2 / 0.6)", "[sRGB with alpha, all numbers]");
|
||||
test_computed_value("color", "color(srgb 100% 50% 20% / 60%)", "color(srgb 1 0.5 0.2 / 0.6)", "[sRGB with alpha, all percent]");
|
||||
test_computed_value("color", "color(srgb 100% 0.5 20% / 0.6)", "color(srgb 1 0.5 0.2 / 0.6)", "[sRGB with alpha, mixed number and percent]");
|
||||
test_computed_value("color", "color(srgb 1.00 50% 0.2 / 60%)", "color(srgb 1 0.5 0.2 / 0.6)", "[sRGB with alpha, mixed number and percent 2]");
|
||||
test_computed_value("color", "color(srgb none none none / none)", "color(srgb none none none / none)", "[sRGB with alpha, all none]");
|
||||
test_computed_value("color", "color(srgb 1.00 none 0.2 / none)", "color(srgb 1 none 0.2 / none)", "[sRGB with alpha, number and none]");
|
||||
test_computed_value("color", "color(srgb 100% none 20% / 30%)", "color(srgb 1 none 0.2 / 0.3)", "[sRGB with alpha, percent and none]");
|
||||
test_computed_value("color", "color(srgb 100% none 0.2 / 23.7%)", "color(srgb 1 none 0.2 / 0.237)", "[sRGB with alpha, number, percent and none]");
|
||||
|
||||
// Opaque linear-light sRGB in color()
|
||||
test_computed_value("color", "color(srgb-linear 1.00 0.50 0.200)", "color(srgb-linear 1 0.5 0.2)", "[Linear-light sRGB all numbers]");
|
||||
test_computed_value("color", "color(srgb-linear 100% 50% 20%)", "color(srgb-linear 1 0.5 0.2)", "[Linear-light sRGB all percent]");
|
||||
test_computed_value("color", "color(srgb-linear 100% 0.5 20%)", "color(srgb-linear 1 0.5 0.2)", "[Linear-light sRGB mixed number and percent]");
|
||||
test_computed_value("color", "color(srgb-linear 1.00 50% 0.2)", "color(srgb-linear 1 0.5 0.2)", "[Linear-light sRGB mixed number and percent 2]");
|
||||
test_computed_value("color", "color(srgb-linear none none none)", "color(srgb-linear none none none)", "[Linear-light sRGB all none]");
|
||||
test_computed_value("color", "color(srgb-linear 1.00 none 0.2)", "color(srgb-linear 1 none 0.2)", "[Linear-light sRGB number and none]");
|
||||
test_computed_value("color", "color(srgb-linear 100% none 20%)", "color(srgb-linear 1 none 0.2)", "[Linear-light sRGB percent and none]");
|
||||
test_computed_value("color", "color(srgb-linear 100% none 0.2)", "color(srgb-linear 1 none 0.2)", "[Linear-light sRGB number, percent and none]");
|
||||
|
||||
// non-unity alpha, linear-light sRGB in color()
|
||||
test_computed_value("color", "color(srgb-linear 1.00 0.50 0.200 / 0.6)", "color(srgb-linear 1 0.5 0.2 / 0.6)", "[Linear-light sRGB with alpha, all numbers]");
|
||||
test_computed_value("color", "color(srgb-linear 100% 50% 20% / 60%)", "color(srgb-linear 1 0.5 0.2 / 0.6)", "[Linear-light sRGB with alpha, all percent]");
|
||||
test_computed_value("color", "color(srgb-linear 100% 0.5 20% / 0.6)", "color(srgb-linear 1 0.5 0.2 / 0.6)", "[Linear-light sRGB with alpha, mixed number and percent]");
|
||||
test_computed_value("color", "color(srgb-linear 1.00 50% 0.2 / 60%)", "color(srgb-linear 1 0.5 0.2 / 0.6)", "[Linear-light sRGB with alpha, mixed number and percent 2]");
|
||||
test_computed_value("color", "color(srgb-linear none none none / none)", "color(srgb-linear none none none / none)", "[Linear-light sRGB with alpha, all none]");
|
||||
test_computed_value("color", "color(srgb-linear 1.00 none 0.2 / none)", "color(srgb-linear 1 none 0.2 / none)", "[Linear-light sRGB with alpha, number and none]");
|
||||
test_computed_value("color", "color(srgb-linear 100% none 20% / 30%)", "color(srgb-linear 1 none 0.2 / 0.3)", "[Linear-light sRGB with alpha, percent and none]");
|
||||
test_computed_value("color", "color(srgb-linear 100% none 0.2 / 23.7%)", "color(srgb-linear 1 none 0.2 / 0.237)", "[Linear-light sRGB with alpha, number, percent and none]");
|
||||
|
||||
// Opaque Display P3 in color()
|
||||
test_computed_value("color", "color(display-p3 1.00 0.50 0.200)", "color(display-p3 1 0.5 0.2)", "[Display P3 all numbers]");
|
||||
test_computed_value("color", "color(display-p3 100% 50% 20%)", "color(display-p3 1 0.5 0.2)", "[Display P3 all percent]");
|
||||
test_computed_value("color", "color(display-p3 100% 0.5 20%)", "color(display-p3 1 0.5 0.2)", "[Display P3 mixed number and percent]");
|
||||
test_computed_value("color", "color(display-p3 1.00 50% 0.2)", "color(display-p3 1 0.5 0.2)", "[Display P3 mixed number and percent 2]");
|
||||
test_computed_value("color", "color(display-p3 none none none)", "color(display-p3 none none none)", "[Display P3 all none]");
|
||||
test_computed_value("color", "color(display-p3 1.00 none 0.2)", "color(display-p3 1 none 0.2)", "[Display P3 number and none]");
|
||||
test_computed_value("color", "color(display-p3 100% none 20%)", "color(display-p3 1 none 0.2)", "[Display P3 percent and none]");
|
||||
test_computed_value("color", "color(display-p3 100% none 0.2)", "color(display-p3 1 none 0.2)", "[Display P3 number, percent and none]");
|
||||
|
||||
// non-unity alpha, Display P3 in color()
|
||||
test_computed_value("color", "color(display-p3 1.00 0.50 0.200 / 0.6)", "color(display-p3 1 0.5 0.2 / 0.6)", "[Display P3 with alpha, all numbers]");
|
||||
test_computed_value("color", "color(display-p3 100% 50% 20% / 60%)", "color(display-p3 1 0.5 0.2 / 0.6)", "[Display P3 with alpha, all percent]");
|
||||
test_computed_value("color", "color(display-p3 100% 0.5 20% / 0.6)", "color(display-p3 1 0.5 0.2 / 0.6)", "[Display P3 with alpha, mixed number and percent]");
|
||||
test_computed_value("color", "color(display-p3 1.00 50% 0.2 / 60%)", "color(display-p3 1 0.5 0.2 / 0.6)", "[Display P3 with alpha, mixed number and percent 2]");
|
||||
test_computed_value("color", "color(display-p3 none none none / none)", "color(display-p3 none none none / none)", "[Display P3 with alpha, all none]");
|
||||
test_computed_value("color", "color(display-p3 1.00 none 0.2 / none)", "color(display-p3 1 none 0.2 / none)", "[Display P3 with alpha, number and none]");
|
||||
test_computed_value("color", "color(display-p3 100% none 20% / 30%)", "color(display-p3 1 none 0.2 / 0.3)", "[Display P3 with alpha, percent and none]");
|
||||
test_computed_value("color", "color(display-p3 100% none 0.2 / 23.7%)", "color(display-p3 1 none 0.2 / 0.237)", "[Display P3 with alpha, number, percent and none]");
|
||||
|
||||
// Opaque A98 RGB in color()
|
||||
test_computed_value("color", "color(a98-rgb 1.00 0.50 0.200)", "color(a98-rgb 1 0.5 0.2)", "[A98 RGB all numbers]");
|
||||
test_computed_value("color", "color(a98-rgb 100% 50% 20%)", "color(a98-rgb 1 0.5 0.2)", "[A98 RGB all percent]");
|
||||
test_computed_value("color", "color(a98-rgb 100% 0.5 20%)", "color(a98-rgb 1 0.5 0.2)", "[A98 RGB mixed number and percent]");
|
||||
test_computed_value("color", "color(a98-rgb 1.00 50% 0.2)", "color(a98-rgb 1 0.5 0.2)", "[A98 RGB mixed number and percent 2]");
|
||||
test_computed_value("color", "color(a98-rgb none none none)", "color(a98-rgb none none none)", "[A98 RGB all none]");
|
||||
test_computed_value("color", "color(a98-rgb 1.00 none 0.2)", "color(a98-rgb 1 none 0.2)", "[A98 RGB number and none]");
|
||||
test_computed_value("color", "color(a98-rgb 100% none 20%)", "color(a98-rgb 1 none 0.2)", "[A98 RGB percent and none]");
|
||||
test_computed_value("color", "color(a98-rgb 100% none 0.2)", "color(a98-rgb 1 none 0.2)", "[A98 RGB number, percent and none]");
|
||||
|
||||
// non-unity alpha, A98 RGB in color()
|
||||
test_computed_value("color", "color(a98-rgb 1.00 0.50 0.200 / 0.6)", "color(a98-rgb 1 0.5 0.2 / 0.6)", "[A98 RGB with alpha, all numbers]");
|
||||
test_computed_value("color", "color(a98-rgb 100% 50% 20% / 60%)", "color(a98-rgb 1 0.5 0.2 / 0.6)", "[A98 RGB with alpha, all percent]");
|
||||
test_computed_value("color", "color(a98-rgb 100% 0.5 20% / 0.6)", "color(a98-rgb 1 0.5 0.2 / 0.6)", "[A98 RGB with alpha, mixed number and percent]");
|
||||
test_computed_value("color", "color(a98-rgb 1.00 50% 0.2 / 60%)", "color(a98-rgb 1 0.5 0.2 / 0.6)", "[A98 RGB with alpha, mixed number and percent 2]");
|
||||
test_computed_value("color", "color(a98-rgb none none none / none)", "color(a98-rgb none none none / none)", "[A98 RGB with alpha, all none]");
|
||||
test_computed_value("color", "color(a98-rgb 1.00 none 0.2 / none)", "color(a98-rgb 1 none 0.2 / none)", "[A98 RGB with alpha, number and none]");
|
||||
test_computed_value("color", "color(a98-rgb 100% none 20% / 30%)", "color(a98-rgb 1 none 0.2 / 0.3)", "[A98 RGB with alpha, percent and none]");
|
||||
test_computed_value("color", "color(a98-rgb 100% none 0.2 / 23.7%)", "color(a98-rgb 1 none 0.2 / 0.237)", "[A98 RGB with alpha, number, percent and none]");
|
||||
|
||||
// Opaque ProPhoto RGB in color()
|
||||
test_computed_value("color", "color(prophoto-rgb 1.00 0.50 0.200)", "color(prophoto-rgb 1 0.5 0.2)", "[ProPhoto RGB all numbers]");
|
||||
test_computed_value("color", "color(prophoto-rgb 100% 50% 20%)", "color(prophoto-rgb 1 0.5 0.2)", "[ProPhoto RGB all percent]");
|
||||
test_computed_value("color", "color(prophoto-rgb 100% 0.5 20%)", "color(prophoto-rgb 1 0.5 0.2)", "[ProPhoto RGB mixed number and percent]");
|
||||
test_computed_value("color", "color(prophoto-rgb 1.00 50% 0.2)", "color(prophoto-rgb 1 0.5 0.2)", "[ProPhoto RGB mixed number and percent 2]");
|
||||
test_computed_value("color", "color(prophoto-rgb none none none)", "color(prophoto-rgb none none none)", "[ProPhoto RGB all none]");
|
||||
test_computed_value("color", "color(prophoto-rgb 1.00 none 0.2)", "color(prophoto-rgb 1 none 0.2)", "[ProPhoto RGB number and none]");
|
||||
test_computed_value("color", "color(prophoto-rgb 100% none 20%)", "color(prophoto-rgb 1 none 0.2)", "[ProPhoto RGB percent and none]");
|
||||
test_computed_value("color", "color(prophoto-rgb 100% none 0.2)", "color(prophoto-rgb 1 none 0.2)", "[ProPhoto RGB number, percent and none]");
|
||||
|
||||
// non-unity alpha, ProPhoto RGB in color()
|
||||
test_computed_value("color", "color(prophoto-rgb 1.00 0.50 0.200 / 0.6)", "color(prophoto-rgb 1 0.5 0.2 / 0.6)", "[ProPhoto RGB with alpha, all numbers]");
|
||||
test_computed_value("color", "color(prophoto-rgb 100% 50% 20% / 60%)", "color(prophoto-rgb 1 0.5 0.2 / 0.6)", "[ProPhoto RGB with alpha, all percent]");
|
||||
test_computed_value("color", "color(prophoto-rgb 100% 0.5 20% / 0.6)", "color(prophoto-rgb 1 0.5 0.2 / 0.6)", "[ProPhoto RGB with alpha, mixed number and percent]");
|
||||
test_computed_value("color", "color(prophoto-rgb 1.00 50% 0.2 / 60%)", "color(prophoto-rgb 1 0.5 0.2 / 0.6)", "[ProPhoto RGB with alpha, mixed number and percent 2]");
|
||||
test_computed_value("color", "color(prophoto-rgb none none none / none)", "color(prophoto-rgb none none none / none)", "[ProPhoto RGB with alpha, all none]");
|
||||
test_computed_value("color", "color(prophoto-rgb 1.00 none 0.2 / none)", "color(prophoto-rgb 1 none 0.2 / none)", "[ProPhoto RGB with alpha, number and none]");
|
||||
test_computed_value("color", "color(prophoto-rgb 100% none 20% / 30%)", "color(prophoto-rgb 1 none 0.2 / 0.3)", "[ProPhoto RGB with alpha, percent and none]");
|
||||
test_computed_value("color", "color(prophoto-rgb 100% none 0.2 / 23.7%)", "color(prophoto-rgb 1 none 0.2 / 0.237)", "[ProPhoto RGB with alpha, number, percent and none]");
|
||||
|
||||
// Opaque Rec BT.2020 in color()
|
||||
test_computed_value("color", "color(rec2020 1.00 0.50 0.200)", "color(rec2020 1 0.5 0.2)", "[Rec BT.2020 all numbers]");
|
||||
test_computed_value("color", "color(rec2020 100% 50% 20%)", "color(rec2020 1 0.5 0.2)", "[Rec BT.2020 all percent]");
|
||||
test_computed_value("color", "color(rec2020 100% 0.5 20%)", "color(rec2020 1 0.5 0.2)", "[Rec BT.2020 mixed number and percent]");
|
||||
test_computed_value("color", "color(rec2020 1.00 50% 0.2)", "color(rec2020 1 0.5 0.2)", "[Rec BT.2020 mixed number and percent 2]");
|
||||
test_computed_value("color", "color(rec2020 none none none)", "color(rec2020 none none none)", "[Rec BT.2020 all none]");
|
||||
test_computed_value("color", "color(rec2020 1.00 none 0.2)", "color(rec2020 1 none 0.2)", "[Rec BT.2020 number and none]");
|
||||
test_computed_value("color", "color(rec2020 100% none 20%)", "color(rec2020 1 none 0.2)", "[Rec BT.2020 percent and none]");
|
||||
test_computed_value("color", "color(rec2020 100% none 0.2)", "color(rec2020 1 none 0.2)", "[Rec BT.2020 number, percent and none]");
|
||||
|
||||
// non-unity alpha, Rec BT.2020 in color()
|
||||
test_computed_value("color", "color(rec2020 1.00 0.50 0.200 / 0.6)", "color(rec2020 1 0.5 0.2 / 0.6)", "[Rec BT.2020 with alpha, all numbers]");
|
||||
test_computed_value("color", "color(rec2020 100% 50% 20% / 60%)", "color(rec2020 1 0.5 0.2 / 0.6)", "[Rec BT.2020 with alpha, all percent]");
|
||||
test_computed_value("color", "color(rec2020 100% 0.5 20% / 0.6)", "color(rec2020 1 0.5 0.2 / 0.6)", "[Rec BT.2020 with alpha, mixed number and percent]");
|
||||
test_computed_value("color", "color(rec2020 1.00 50% 0.2 / 60%)", "color(rec2020 1 0.5 0.2 / 0.6)", "[Rec BT.2020 with alpha, mixed number and percent 2]");
|
||||
test_computed_value("color", "color(rec2020 none none none / none)", "color(rec2020 none none none / none)", "[Rec BT.2020 with alpha, all none]");
|
||||
test_computed_value("color", "color(rec2020 1.00 none 0.2 / none)", "color(rec2020 1 none 0.2 / none)", "[Rec BT.2020 with alpha, number and none]");
|
||||
test_computed_value("color", "color(rec2020 100% none 20% / 30%)", "color(rec2020 1 none 0.2 / 0.3)", "[Rec BT.2020 with alpha, percent and none]");
|
||||
test_computed_value("color", "color(rec2020 100% none 0.2 / 23.7%)", "color(rec2020 1 none 0.2 / 0.237)", "[Rec BT.2020 with alpha, number, percent and none]");
|
||||
|
||||
// Opaque CIE XYZ D50 in color()
|
||||
test_computed_value("color", "color(xyz-d50 1.00 0.50 0.200)", "color(xyz-d50 1 0.5 0.2)", "[CIE XYZ D50 all numbers]");
|
||||
test_computed_value("color", "color(xyz-d50 100% 50% 20%)", "color(xyz-d50 1 0.5 0.2)", "[CIE XYZ D50 all percent]");
|
||||
test_computed_value("color", "color(xyz-d50 100% 0.5 20%)", "color(xyz-d50 1 0.5 0.2)", "[CIE XYZ D50 mixed number and percent]");
|
||||
test_computed_value("color", "color(xyz-d50 1.00 50% 0.2)", "color(xyz-d50 1 0.5 0.2)", "[CIE XYZ D50 mixed number and percent 2]");
|
||||
test_computed_value("color", "color(xyz-d50 none none none)", "color(xyz-d50 none none none)", "[CIE XYZ D50 all none]");
|
||||
test_computed_value("color", "color(xyz-d50 1.00 none 0.2)", "color(xyz-d50 1 none 0.2)", "[CIE XYZ D50 number and none]");
|
||||
test_computed_value("color", "color(xyz-d50 100% none 20%)", "color(xyz-d50 1 none 0.2)", "[CIE XYZ D50 percent and none]");
|
||||
test_computed_value("color", "color(xyz-d50 100% none 0.2)", "color(xyz-d50 1 none 0.2)", "[CIE XYZ D50 number, percent and none]");
|
||||
|
||||
// non-unity alpha, CIE XYZ D50 in color()
|
||||
test_computed_value("color", "color(xyz-d50 1.00 0.50 0.200 / 0.6)", "color(xyz-d50 1 0.5 0.2 / 0.6)", "[CIE XYZ D50 with alpha, all numbers]");
|
||||
test_computed_value("color", "color(xyz-d50 100% 50% 20% / 60%)", "color(xyz-d50 1 0.5 0.2 / 0.6)", "[CIE XYZ D50 with alpha, all percent]");
|
||||
test_computed_value("color", "color(xyz-d50 100% 0.5 20% / 0.6)", "color(xyz-d50 1 0.5 0.2 / 0.6)", "[CIE XYZ D50 with alpha, mixed number and percent]");
|
||||
test_computed_value("color", "color(xyz-d50 1.00 50% 0.2 / 60%)", "color(xyz-d50 1 0.5 0.2 / 0.6)", "[CIE XYZ D50 with alpha, mixed number and percent 2]");
|
||||
test_computed_value("color", "color(xyz-d50 none none none / none)", "color(xyz-d50 none none none / none)", "[CIE XYZ D50 with alpha, all none]");
|
||||
test_computed_value("color", "color(xyz-d50 1.00 none 0.2 / none)", "color(xyz-d50 1 none 0.2 / none)", "[CIE XYZ D50 with alpha, number and none]");
|
||||
test_computed_value("color", "color(xyz-d50 100% none 20% / 30%)", "color(xyz-d50 1 none 0.2 / 0.3)", "[CIE XYZ D50 with alpha, percent and none]");
|
||||
test_computed_value("color", "color(xyz-d50 100% none 0.2 / 23.7%)", "color(xyz-d50 1 none 0.2 / 0.237)", "[CIE XYZ D50 with alpha, number, percent and none]");
|
||||
|
||||
// Opaque CIE XYZ D65 in color()
|
||||
test_computed_value("color", "color(xyz-d65 1.00 0.50 0.200)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ D65 all numbers]");
|
||||
test_computed_value("color", "color(xyz-d65 100% 50% 20%)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ D65 all percent]");
|
||||
test_computed_value("color", "color(xyz-d65 100% 0.5 20%)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ D65 mixed number and percent]");
|
||||
test_computed_value("color", "color(xyz-d65 1.00 50% 0.2)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ D65 mixed number and percent 2]");
|
||||
test_computed_value("color", "color(xyz-d65 none none none)", "color(xyz-d65 none none none)", "[CIE XYZ D65 all none]");
|
||||
test_computed_value("color", "color(xyz-d65 1.00 none 0.2)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ D65 number and none]");
|
||||
test_computed_value("color", "color(xyz-d65 100% none 20%)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ D65 percent and none]");
|
||||
test_computed_value("color", "color(xyz-d65 100% none 0.2)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ D65 number, percent and none]");
|
||||
|
||||
// non-unity alpha, CIE XYZ D65 in color()
|
||||
test_computed_value("color", "color(xyz-d65 1.00 0.50 0.200 / 0.6)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ D65 with alpha, all numbers]");
|
||||
test_computed_value("color", "color(xyz-d65 100% 50% 20% / 60%)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ D65 with alpha, all percent]");
|
||||
test_computed_value("color", "color(xyz-d65 100% 0.5 20% / 0.6)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ D65 with alpha, mixed number and percent]");
|
||||
test_computed_value("color", "color(xyz-d65 1.00 50% 0.2 / 60%)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ D65 with alpha, mixed number and percent 2]");
|
||||
test_computed_value("color", "color(xyz-d65 none none none / none)", "color(xyz-d65 none none none / none)", "[CIE XYZ D65 with alpha, all none]");
|
||||
test_computed_value("color", "color(xyz-d65 1.00 none 0.2 / none)", "color(xyz-d65 1 none 0.2 / none)", "[CIE XYZ D65 with alpha, number and none]");
|
||||
test_computed_value("color", "color(xyz-d65 100% none 20% / 30%)", "color(xyz-d65 1 none 0.2 / 0.3)", "[CIE XYZ D65 with alpha, percent and none]");
|
||||
test_computed_value("color", "color(xyz-d65 100% none 0.2 / 23.7%)", "color(xyz-d65 1 none 0.2 / 0.237)", "[CIE XYZ D65 with alpha, number, percent and none]");
|
||||
|
||||
// Opaque CIE XYZ (implicit D65) in color()
|
||||
test_computed_value("color", "color(xyz 1.00 0.50 0.200)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ (implicit D65) all numbers]");
|
||||
test_computed_value("color", "color(xyz 100% 50% 20%)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ (implicit D65) all percent]");
|
||||
test_computed_value("color", "color(xyz 100% 0.5 20%)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ (implicit D65) mixed number and percent]");
|
||||
test_computed_value("color", "color(xyz 1.00 50% 0.2)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ (implicit D65) mixed number and percent 2]");
|
||||
test_computed_value("color", "color(xyz none none none)", "color(xyz-d65 none none none)", "[CIE XYZ (implicit D65) all none]");
|
||||
test_computed_value("color", "color(xyz 1.00 none 0.2)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ (implicit D65) number and none]");
|
||||
test_computed_value("color", "color(xyz 100% none 20%)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ (implicit D65) percent and none]");
|
||||
test_computed_value("color", "color(xyz 100% none 0.2)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ (implicit D65) number, percent and none]");
|
||||
|
||||
// non-unity alpha, CIE XYZ (implicit D65) in color()
|
||||
test_computed_value("color", "color(xyz 1.00 0.50 0.200 / 0.6)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ (implicit D65) with alpha, all numbers]");
|
||||
test_computed_value("color", "color(xyz 100% 50% 20% / 60%)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ (implicit D65) with alpha, all percent]");
|
||||
test_computed_value("color", "color(xyz 100% 0.5 20% / 0.6)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ (implicit D65) with alpha, mixed number and percent]");
|
||||
test_computed_value("color", "color(xyz 1.00 50% 0.2 / 60%)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ (implicit D65) with alpha, mixed number and percent 2]");
|
||||
test_computed_value("color", "color(xyz none none none / none)", "color(xyz-d65 none none none / none)", "[CIE XYZ (implicit D65) with alpha, all none]");
|
||||
test_computed_value("color", "color(xyz 1.00 none 0.2 / none)", "color(xyz-d65 1 none 0.2 / none)", "[CIE XYZ (implicit D65) with alpha, number and none]");
|
||||
test_computed_value("color", "color(xyz 100% none 20% / 30%)", "color(xyz-d65 1 none 0.2 / 0.3)", "[CIE XYZ (implicit D65) with alpha, percent and none]");
|
||||
test_computed_value("color", "color(xyz 100% none 0.2 / 23.7%)", "color(xyz-d65 1 none 0.2 / 0.237)", "[CIE XYZ (implicit D65) with alpha, number, percent and none]");
|
||||
|
||||
// Tests basic parsing of the color function
|
||||
test_computed_value("color", "color(srgb 1 1 1)", "color(srgb 1 1 1)", "[Basic sRGB white]");
|
||||
test_computed_value("color", "color( srgb 1 1 1 )", "color(srgb 1 1 1)", "[White with lots of space]");
|
||||
test_computed_value("color", "color(srgb 0.25 0.5 0.75)", "color(srgb 0.25 0.5 0.75)", "[sRGB color]");
|
||||
test_computed_value("color", "color(SrGb 0.25 0.5 0.75)", "color(srgb 0.25 0.5 0.75)", "[Different case for sRGB]");
|
||||
test_computed_value("color", "color(srgb 1.00000 0.500000 0.20)", "color(srgb 1 0.5 0.2)", "[sRGB color with unnecessary decimals]");
|
||||
test_computed_value("color", "color(srgb 1 1 1 / 0.5)", "color(srgb 1 1 1 / 0.5)", "[sRGB white with 0.5 alpha]");
|
||||
test_computed_value("color", "color(srgb 1 1 1 / 0)", "color(srgb 1 1 1 / 0)", "[sRGB white with 0 alpha]");
|
||||
test_computed_value("color", "color(srgb 1 1 1 / 50%)", "color(srgb 1 1 1 / 0.5)", "[sRGB white with 50% alpha]");
|
||||
test_computed_value("color", "color(srgb 1 1 1 / 0%)", "color(srgb 1 1 1 / 0)", "[sRGB white with 0% alpha]");
|
||||
test_computed_value("color", "color(display-p3 0.6 0.7 0.8)", "color(display-p3 0.6 0.7 0.8)", "[Display P3 color]");
|
||||
test_computed_value("color", "color(dIspLaY-P3 0.6 0.7 0.8)", "color(display-p3 0.6 0.7 0.8)", "[Different case for Display P3]");
|
||||
|
||||
test_computed_value("color", "color(srgb -0.25 0.5 0.75)", "color(srgb -0.25 0.5 0.75)", "[sRGB color with negative component should not clamp to 0]");
|
||||
test_computed_value("color", "color(srgb 0.25 1.5 0.75)", "color(srgb 0.25 1.5 0.75)", "[sRGB color with component > 1 should not clamp]");
|
||||
test_computed_value("color", "color(display-p3 0.5 -199 0.75)", "color(display-p3 0.5 -199 0.75)", "[Display P3 color with negative component should not clamp to 0]");
|
||||
test_computed_value("color", "color(display-p3 184 1.00001 1103)", "color(display-p3 184 1.00001 1103)", "[Display P3 color with component > 1 should not clamp]");
|
||||
test_computed_value("color", "color(srgb 0.1 0.2 0.3 / 1.9)", "color(srgb 0.1 0.2 0.3)", "[Alpha > 1 should clamp]");
|
||||
test_computed_value("color", "color(srgb 1 1 1 / -0.2)", "color(srgb 1 1 1 / 0)", "[Negative alpha should clamp]");
|
||||
|
||||
|
||||
// Ensure that `calc` values work with dynamically changing relative units (slighly different alpha values to make test harness not complain about duplicate tests).
|
||||
document.getElementById("container").style.width = "1000px";
|
||||
test_computed_value("color", `color(srgb calc(0.5 + (sign(2cqw - 10px) * 0.1)) 0 0 / 0.51)`, `color(srgb 0.6 0 0 / 0.51)`);
|
||||
document.getElementById("container").style.width = "100px";
|
||||
test_computed_value("color", `color(srgb calc(0.5 + (sign(2cqw - 10px) * 0.1)) 0 0 / 0.52)`, `color(srgb 0.4 0 0 / 0.52)`);
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue