From f81bb1bd8cdf13104fc8c32dfd6392553e628f03 Mon Sep 17 00:00:00 2001 From: Sam Atkins Date: Thu, 20 Nov 2025 17:16:15 +0000 Subject: [PATCH] LibWeb/CSS: Absolutize GradientStyleValues This lets us not care about non-absolute Length units when resolving gradient data, as they'll already have been converted to px. We can also use Angle::from_style_value() safely on absolutized angles, which reduces some boilerplate code. --- .../StyleValues/AbstractImageStyleValue.cpp | 18 ++ .../CSS/StyleValues/AbstractImageStyleValue.h | 1 + .../StyleValues/ConicGradientStyleValue.cpp | 25 +- .../CSS/StyleValues/ConicGradientStyleValue.h | 3 +- .../StyleValues/LinearGradientStyleValue.cpp | 18 +- .../StyleValues/LinearGradientStyleValue.h | 1 + .../StyleValues/RadialGradientStyleValue.cpp | 51 ++-- .../StyleValues/RadialGradientStyleValue.h | 3 +- .../LibWeb/Painting/GradientPainting.cpp | 22 +- ...gradient-interpolation-method-computed.txt | 224 +++++++++--------- 10 files changed, 205 insertions(+), 161 deletions(-) diff --git a/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.cpp index e690e3d8b09..566af8e97fb 100644 --- a/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.cpp @@ -16,6 +16,24 @@ GC::Ref AbstractImageStyleValue::reify(JS::Realm& realm, FlyStrin return CSSImageValue::create(realm, *this); } +ColorStopListElement ColorStopListElement::absolutized(ComputationContext const& context) const +{ + auto absolutize_if_nonnull = [&context](RefPtr const& input) -> RefPtr { + if (!input) + return {}; + return input->absolutized(context); + }; + + return { + .transition_hint = transition_hint, + .color_stop = { + .color = absolutize_if_nonnull(color_stop.color), + .position = absolutize_if_nonnull(color_stop.position), + .second_position = absolutize_if_nonnull(color_stop.second_position), + }, + }; +} + void serialize_color_stop_list(StringBuilder& builder, Vector const& color_stop_list, SerializationMode mode) { bool first = true; diff --git a/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.h b/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.h index b6c4949b1ef..e4b51719525 100644 --- a/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.h +++ b/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.h @@ -172,6 +172,7 @@ struct ColorStopListElement { } color_stop; bool operator==(ColorStopListElement const&) const = default; + ColorStopListElement absolutized(ComputationContext const& context) const; }; void serialize_color_stop_list(StringBuilder&, Vector const&, SerializationMode); diff --git a/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.cpp index d3f93f73e6a..2c687085a34 100644 --- a/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.cpp @@ -65,6 +65,20 @@ void ConicGradientStyleValue::paint(DisplayListRecordingContext& context, Device context.display_list_recorder().fill_rect_with_conic_gradient(destination_rect, m_resolved->data, position); } +ValueComparingNonnullRefPtr ConicGradientStyleValue::absolutized(ComputationContext const& context) const +{ + Vector absolutized_color_stops; + absolutized_color_stops.ensure_capacity(m_properties.color_stop_list.size()); + for (auto const& color_stop : m_properties.color_stop_list) { + absolutized_color_stops.unchecked_append(color_stop.absolutized(context)); + } + RefPtr absolutized_from_angle; + if (m_properties.from_angle) + absolutized_from_angle = m_properties.from_angle->absolutized(context); + ValueComparingNonnullRefPtr absolutized_position = m_properties.position->absolutized(context)->as_position(); + return create(move(absolutized_from_angle), move(absolutized_position), move(absolutized_color_stops), m_properties.repeating, m_properties.interpolation_method); +} + bool ConicGradientStyleValue::equals(StyleValue const& other) const { if (type() != other.type()) @@ -73,18 +87,11 @@ bool ConicGradientStyleValue::equals(StyleValue const& other) const return m_properties == other_gradient.m_properties; } -float ConicGradientStyleValue::angle_degrees(CalculationResolutionContext const& context) const +float ConicGradientStyleValue::angle_degrees() const { if (!m_properties.from_angle) return 0; - if (m_properties.from_angle->is_angle()) - return m_properties.from_angle->as_angle().angle().to_degrees(); - if (m_properties.from_angle->is_calculated()) { - if (auto maybe_angle = m_properties.from_angle->as_calculated().resolve_angle(context); maybe_angle.has_value()) - return maybe_angle->to_degrees(); - return 0; - } - VERIFY_NOT_REACHED(); + return Angle::from_style_value(*m_properties.from_angle, {}).to_degrees(); } } diff --git a/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.h b/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.h index 92db4d2f470..a3ecad67f46 100644 --- a/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.h +++ b/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.h @@ -27,6 +27,7 @@ public: void paint(DisplayListRecordingContext&, DevicePixelRect const& dest_rect, CSS::ImageRendering) const override; + virtual ValueComparingNonnullRefPtr absolutized(ComputationContext const&) const override; virtual bool equals(StyleValue const& other) const override; Vector const& color_stop_list() const @@ -42,7 +43,7 @@ public: return InterpolationMethod { .color_space = InterpolationMethod::default_color_space(m_properties.color_syntax) }; } - float angle_degrees(CalculationResolutionContext const&) const; + float angle_degrees() const; bool is_paintable() const override { return true; } diff --git a/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.cpp index eeb706e7f09..65adae88901 100644 --- a/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.cpp @@ -74,6 +74,16 @@ String LinearGradientStyleValue::to_string(SerializationMode mode) const return MUST(builder.to_string()); } +ValueComparingNonnullRefPtr LinearGradientStyleValue::absolutized(ComputationContext const& context) const +{ + Vector absolutized_color_stops; + absolutized_color_stops.ensure_capacity(m_properties.color_stop_list.size()); + for (auto const& color_stop : m_properties.color_stop_list) { + absolutized_color_stops.unchecked_append(color_stop.absolutized(context)); + } + return create(m_properties.direction, move(absolutized_color_stops), m_properties.gradient_type, m_properties.repeating, m_properties.interpolation_method); +} + bool LinearGradientStyleValue::equals(StyleValue const& other_) const { if (type() != other_.type()) @@ -117,13 +127,7 @@ float LinearGradientStyleValue::angle_degrees(CSSPixelSize gradient_size) const return angle; }, [&](NonnullRefPtr const& style_value) { - if (style_value->is_angle()) - return style_value->as_angle().angle().to_degrees(); - if (style_value->is_calculated()) { - if (auto maybe_angle = style_value->as_calculated().resolve_angle({}); maybe_angle.has_value()) - return maybe_angle->to_degrees(); - } - return 0.0; + return Angle::from_style_value(style_value, {}).to_degrees(); }); } diff --git a/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.h b/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.h index e1b6b9973ff..157934e5592 100644 --- a/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.h +++ b/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.h @@ -46,6 +46,7 @@ public: virtual String to_string(SerializationMode) const override; virtual ~LinearGradientStyleValue() override = default; + virtual ValueComparingNonnullRefPtr absolutized(ComputationContext const&) const override; virtual bool equals(StyleValue const& other) const override; Vector const& color_stop_list() const diff --git a/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.cpp index 082184b89d1..b38797f45ca 100644 --- a/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.cpp @@ -72,7 +72,7 @@ String RadialGradientStyleValue::to_string(SerializationMode mode) const return MUST(builder.to_string()); } -CSSPixelSize RadialGradientStyleValue::resolve_size(Layout::Node const& node, CSSPixelPoint center, CSSPixelRect const& size) const +CSSPixelSize RadialGradientStyleValue::resolve_size(CSSPixelPoint center, CSSPixelRect const& size) const { auto const side_shape = [&](auto distance_function) { auto const distance_from = [&](CSSPixels v, CSSPixels a, CSSPixels b, auto distance_function) { @@ -180,31 +180,23 @@ CSSPixelSize RadialGradientStyleValue::resolve_size(Layout::Node const& node, CS }, [&](CircleSize const& circle_size) { if (circle_size.radius->is_length()) { - auto radius = circle_size.radius->as_length().length().to_px(node); + auto radius = circle_size.radius->as_length().length().absolute_length_to_px(); return CSSPixelSize { radius, radius }; } if (circle_size.radius->is_calculated()) { - CalculationResolutionContext context { - .length_resolution_context = Length::ResolutionContext::for_layout_node(node), - }; - auto radius = circle_size.radius->as_calculated().resolve_length(context)->to_px(node); + auto radius = circle_size.radius->as_calculated().resolve_length({})->absolute_length_to_px(); return CSSPixelSize { radius, radius }; } VERIFY_NOT_REACHED(); }, [&](EllipseSize const& ellipse_size) { auto resolve = [&](StyleValue const& radius_value, auto percentage_basis_pixels) { - auto percentage_basis = Length::make_px(percentage_basis_pixels); - CalculationResolutionContext context { - .percentage_basis = percentage_basis, - .length_resolution_context = Length::ResolutionContext::for_layout_node(node), - }; if (radius_value.is_length()) - return radius_value.as_length().length().to_px(node); + return radius_value.as_length().length().absolute_length_to_px(); if (radius_value.is_percentage()) - return percentage_basis.percentage_of(radius_value.as_percentage().percentage()).to_px(node); + return CSSPixels { radius_value.as_percentage().percentage().as_fraction() * percentage_basis_pixels }; if (radius_value.is_calculated()) - return radius_value.as_calculated().resolve_length(context)->to_px(node); + return radius_value.as_calculated().resolve_length({})->absolute_length_to_px(); VERIFY_NOT_REACHED(); }; auto radius_a = resolve(*ellipse_size.radius_a, size.width()); @@ -246,7 +238,7 @@ void RadialGradientStyleValue::resolve_for_size(Layout::NodeWithStyle const& nod { CSSPixelRect gradient_box { { 0, 0 }, paint_size }; auto center = m_properties.position->resolved(node, gradient_box); - auto gradient_size = resolve_size(node, center, gradient_box); + auto gradient_size = resolve_size(center, gradient_box); ResolvedDataCacheKey cache_key { .length_resolution_context = Length::ResolutionContext::for_layout_node(node), @@ -262,6 +254,35 @@ void RadialGradientStyleValue::resolve_for_size(Layout::NodeWithStyle const& nod } } +ValueComparingNonnullRefPtr RadialGradientStyleValue::absolutized(ComputationContext const& context) const +{ + Vector absolutized_color_stops; + absolutized_color_stops.ensure_capacity(m_properties.color_stop_list.size()); + for (auto const& color_stop : m_properties.color_stop_list) { + absolutized_color_stops.unchecked_append(color_stop.absolutized(context)); + } + + auto absolutized_size = m_properties.size.visit( + [&](Extent extent) -> Size { + return extent; + }, + [&](CircleSize const& circle_size) -> Size { + return CircleSize { + .radius = circle_size.radius->absolutized(context), + }; + }, + [&](EllipseSize const& ellipse_size) -> Size { + return EllipseSize { + .radius_a = ellipse_size.radius_a->absolutized(context), + .radius_b = ellipse_size.radius_b->absolutized(context), + }; + }); + + NonnullRefPtr absolutized_position = m_properties.position->absolutized(context)->as_position(); + + return create(m_properties.ending_shape, move(absolutized_size), move(absolutized_position), move(absolutized_color_stops), m_properties.repeating, m_properties.interpolation_method); +} + bool RadialGradientStyleValue::equals(StyleValue const& other) const { if (type() != other.type()) diff --git a/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.h b/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.h index 2a037565dac..4d09536b287 100644 --- a/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.h +++ b/Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.h @@ -54,6 +54,7 @@ public: void paint(DisplayListRecordingContext&, DevicePixelRect const& dest_rect, CSS::ImageRendering) const override; + virtual ValueComparingNonnullRefPtr absolutized(ComputationContext const&) const override; virtual bool equals(StyleValue const& other) const override; Vector const& color_stop_list() const @@ -73,7 +74,7 @@ public: void resolve_for_size(Layout::NodeWithStyle const&, CSSPixelSize) const override; - CSSPixelSize resolve_size(Layout::Node const&, CSSPixelPoint, CSSPixelRect const&) const; + CSSPixelSize resolve_size(CSSPixelPoint, CSSPixelRect const&) const; bool is_repeating() const { return m_properties.repeating == GradientRepeating::Yes; } diff --git a/Libraries/LibWeb/Painting/GradientPainting.cpp b/Libraries/LibWeb/Painting/GradientPainting.cpp index c6e70101482..e896254d00a 100644 --- a/Libraries/LibWeb/Painting/GradientPainting.cpp +++ b/Libraries/LibWeb/Painting/GradientPainting.cpp @@ -122,15 +122,14 @@ LinearGradientData resolve_linear_gradient_data(Layout::NodeWithStyle const& nod CSS::CalculationResolutionContext context { .percentage_basis = CSS::Length::make_px(gradient_length_px), - .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(node), }; auto resolved_color_stops = resolve_color_stop_positions( node, linear_gradient.color_stop_list(), [&](auto const& position) -> float { if (position.is_length()) - return position.as_length().length().to_px_without_rounding(*context.length_resolution_context) / gradient_length_px; + return position.as_length().length().absolute_length_to_px_without_rounding() / gradient_length_px; if (position.is_percentage()) return position.as_percentage().percentage().as_fraction(); - return position.as_calculated().resolve_length(context)->to_px_without_rounding(*context.length_resolution_context) / gradient_length_px; + return position.as_calculated().resolve_length(context)->absolute_length_to_px_without_rounding() / gradient_length_px; }, linear_gradient.is_repeating()); @@ -140,37 +139,28 @@ LinearGradientData resolve_linear_gradient_data(Layout::NodeWithStyle const& nod ConicGradientData resolve_conic_gradient_data(Layout::NodeWithStyle const& node, CSS::ConicGradientStyleValue const& conic_gradient) { CSS::Angle const one_turn { 360.0f, CSS::AngleUnit::Deg }; - CSS::CalculationResolutionContext context { - .percentage_basis = one_turn, - .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(node), - }; auto resolved_color_stops = resolve_color_stop_positions( node, conic_gradient.color_stop_list(), [&](auto const& position) -> float { - if (position.is_angle()) - return position.as_angle().angle().to_degrees() / one_turn.to_degrees(); - if (position.is_percentage()) - return position.as_percentage().percentage().as_fraction(); - return position.as_calculated().resolve_angle(context)->to_degrees() / one_turn.to_degrees(); + return CSS::Angle::from_style_value(position, one_turn).to_degrees() / one_turn.to_degrees(); }, conic_gradient.is_repeating()); - return { conic_gradient.angle_degrees(context), resolved_color_stops, conic_gradient.interpolation_method() }; + return { conic_gradient.angle_degrees(), resolved_color_stops, conic_gradient.interpolation_method() }; } RadialGradientData resolve_radial_gradient_data(Layout::NodeWithStyle const& node, CSSPixelSize gradient_size, CSS::RadialGradientStyleValue const& radial_gradient) { CSS::CalculationResolutionContext context { .percentage_basis = CSS::Length::make_px(gradient_size.width()), - .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(node), }; // Start center, goes right to ending point, where the gradient line intersects the ending shape auto resolved_color_stops = resolve_color_stop_positions( node, radial_gradient.color_stop_list(), [&](auto const& position) -> float { if (position.is_length()) - return position.as_length().length().to_px_without_rounding(*context.length_resolution_context) / gradient_size.width().to_float(); + return position.as_length().length().absolute_length_to_px_without_rounding() / gradient_size.width().to_float(); if (position.is_percentage()) return position.as_percentage().percentage().as_fraction(); - return position.as_calculated().resolve_length(context)->to_px_without_rounding(*context.length_resolution_context) / gradient_size.width().to_float(); + return position.as_calculated().resolve_length(context)->absolute_length_to_px_without_rounding() / gradient_size.width().to_float(); }, radial_gradient.is_repeating()); return { resolved_color_stops, radial_gradient.interpolation_method() }; diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-images/parsing/gradient-interpolation-method-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-images/parsing/gradient-interpolation-method-computed.txt index fc0d53b99ee..d3cc2446e6c 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-images/parsing/gradient-interpolation-method-computed.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-images/parsing/gradient-interpolation-method-computed.txt @@ -2,8 +2,8 @@ Harness status: OK Found 932 tests -712 Pass -220 Fail +822 Pass +110 Fail Pass Property background-image value 'linear-gradient(30deg, red, blue)' Pass Property background-image value 'linear-gradient(to right bottom, red, blue)' Pass Property background-image value 'linear-gradient(30deg, color(srgb 1 0 0), blue)' @@ -279,387 +279,387 @@ Pass Property background-image value 'linear-gradient(in oklch decreasing hue 30 Pass Property background-image value 'linear-gradient(to right bottom in oklch decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'linear-gradient(in oklch decreasing hue to right bottom, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center, red, blue)' Pass Property background-image value 'radial-gradient(50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lab, red, blue)' Pass Property background-image value 'radial-gradient(50px in lab, red, blue)' Pass Property background-image value 'radial-gradient(in lab 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lab, red, blue)' -Fail Property background-image value 'radial-gradient(in lab ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lab, red, blue)' +Pass Property background-image value 'radial-gradient(in lab ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in lab, red, blue)' Pass Property background-image value 'radial-gradient(in lab at right center, red, blue)' Pass Property background-image value 'radial-gradient(in lab, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in lab, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lab 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lab, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in lab ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lab, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in lab ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in lab, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lab at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklab, red, blue)' Pass Property background-image value 'radial-gradient(50px in oklab, red, blue)' Pass Property background-image value 'radial-gradient(in oklab 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklab, red, blue)' -Fail Property background-image value 'radial-gradient(in oklab ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklab, red, blue)' +Pass Property background-image value 'radial-gradient(in oklab ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in oklab, red, blue)' Pass Property background-image value 'radial-gradient(in oklab at right center, red, blue)' Pass Property background-image value 'radial-gradient(in oklab, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in oklab, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklab 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklab, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in oklab ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklab, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in oklab ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in oklab, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklab at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in srgb, red, blue)' Pass Property background-image value 'radial-gradient(50px in srgb, red, blue)' Pass Property background-image value 'radial-gradient(in srgb 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in srgb, red, blue)' -Fail Property background-image value 'radial-gradient(in srgb ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in srgb, red, blue)' +Pass Property background-image value 'radial-gradient(in srgb ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in srgb, red, blue)' Pass Property background-image value 'radial-gradient(in srgb at right center, red, blue)' Pass Property background-image value 'radial-gradient(in srgb, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in srgb, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in srgb 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in srgb, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in srgb ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in srgb, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in srgb ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in srgb, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in srgb at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in srgb-linear, red, blue)' Pass Property background-image value 'radial-gradient(50px in srgb-linear, red, blue)' Pass Property background-image value 'radial-gradient(in srgb-linear 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in srgb-linear, red, blue)' -Fail Property background-image value 'radial-gradient(in srgb-linear ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in srgb-linear, red, blue)' +Pass Property background-image value 'radial-gradient(in srgb-linear ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in srgb-linear, red, blue)' Pass Property background-image value 'radial-gradient(in srgb-linear at right center, red, blue)' Pass Property background-image value 'radial-gradient(in srgb-linear, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in srgb-linear, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in srgb-linear 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in srgb-linear, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in srgb-linear ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in srgb-linear, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in srgb-linear ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in srgb-linear, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in srgb-linear at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in xyz, red, blue)' Pass Property background-image value 'radial-gradient(50px in xyz, red, blue)' Pass Property background-image value 'radial-gradient(in xyz 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in xyz, red, blue)' -Fail Property background-image value 'radial-gradient(in xyz ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in xyz, red, blue)' +Pass Property background-image value 'radial-gradient(in xyz ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in xyz, red, blue)' Pass Property background-image value 'radial-gradient(in xyz at right center, red, blue)' Pass Property background-image value 'radial-gradient(in xyz, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in xyz, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in xyz 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in xyz, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in xyz ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in xyz, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in xyz ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in xyz, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in xyz at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in xyz-d50, red, blue)' Pass Property background-image value 'radial-gradient(50px in xyz-d50, red, blue)' Pass Property background-image value 'radial-gradient(in xyz-d50 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in xyz-d50, red, blue)' -Fail Property background-image value 'radial-gradient(in xyz-d50 ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in xyz-d50, red, blue)' +Pass Property background-image value 'radial-gradient(in xyz-d50 ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in xyz-d50, red, blue)' Pass Property background-image value 'radial-gradient(in xyz-d50 at right center, red, blue)' Pass Property background-image value 'radial-gradient(in xyz-d50, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in xyz-d50, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in xyz-d50 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in xyz-d50, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in xyz-d50 ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in xyz-d50, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in xyz-d50 ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in xyz-d50, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in xyz-d50 at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in xyz-d65, red, blue)' Pass Property background-image value 'radial-gradient(50px in xyz-d65, red, blue)' Pass Property background-image value 'radial-gradient(in xyz-d65 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in xyz-d65, red, blue)' -Fail Property background-image value 'radial-gradient(in xyz-d65 ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in xyz-d65, red, blue)' +Pass Property background-image value 'radial-gradient(in xyz-d65 ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in xyz-d65, red, blue)' Pass Property background-image value 'radial-gradient(in xyz-d65 at right center, red, blue)' Pass Property background-image value 'radial-gradient(in xyz-d65, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in xyz-d65, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in xyz-d65 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in xyz-d65, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in xyz-d65 ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in xyz-d65, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in xyz-d65 ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in xyz-d65, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in xyz-d65 at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl, red, blue)' Pass Property background-image value 'radial-gradient(50px in hsl, red, blue)' Pass Property background-image value 'radial-gradient(in hsl 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hsl, red, blue)' -Fail Property background-image value 'radial-gradient(in hsl ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hsl, red, blue)' +Pass Property background-image value 'radial-gradient(in hsl ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in hsl, red, blue)' Pass Property background-image value 'radial-gradient(in hsl at right center, red, blue)' Pass Property background-image value 'radial-gradient(in hsl, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in hsl, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hsl, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in hsl ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hsl, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in hsl ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in hsl, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in hsl shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(in hsl shorter hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hsl shorter hue, red, blue)' -Fail Property background-image value 'radial-gradient(in hsl shorter hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hsl shorter hue, red, blue)' +Pass Property background-image value 'radial-gradient(in hsl shorter hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in hsl shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(in hsl shorter hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in hsl shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in hsl shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl shorter hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hsl shorter hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in hsl shorter hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hsl shorter hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in hsl shorter hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in hsl shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl shorter hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl longer hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in hsl longer hue, red, blue)' Pass Property background-image value 'radial-gradient(in hsl longer hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hsl longer hue, red, blue)' -Fail Property background-image value 'radial-gradient(in hsl longer hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hsl longer hue, red, blue)' +Pass Property background-image value 'radial-gradient(in hsl longer hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in hsl longer hue, red, blue)' Pass Property background-image value 'radial-gradient(in hsl longer hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in hsl longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in hsl longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl longer hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hsl longer hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in hsl longer hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hsl longer hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in hsl longer hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in hsl longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl longer hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in hsl increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in hsl increasing hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hsl increasing hue, red, blue)' -Fail Property background-image value 'radial-gradient(in hsl increasing hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hsl increasing hue, red, blue)' +Pass Property background-image value 'radial-gradient(in hsl increasing hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in hsl increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in hsl increasing hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in hsl increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in hsl increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl increasing hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hsl increasing hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in hsl increasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hsl increasing hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in hsl increasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in hsl increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl increasing hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in hsl decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in hsl decreasing hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hsl decreasing hue, red, blue)' -Fail Property background-image value 'radial-gradient(in hsl decreasing hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hsl decreasing hue, red, blue)' +Pass Property background-image value 'radial-gradient(in hsl decreasing hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in hsl decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in hsl decreasing hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in hsl decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in hsl decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl decreasing hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hsl decreasing hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in hsl decreasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hsl decreasing hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in hsl decreasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in hsl decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hsl decreasing hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb, red, blue)' Pass Property background-image value 'radial-gradient(50px in hwb, red, blue)' Pass Property background-image value 'radial-gradient(in hwb 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hwb, red, blue)' -Fail Property background-image value 'radial-gradient(in hwb ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hwb, red, blue)' +Pass Property background-image value 'radial-gradient(in hwb ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in hwb, red, blue)' Pass Property background-image value 'radial-gradient(in hwb at right center, red, blue)' Pass Property background-image value 'radial-gradient(in hwb, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in hwb, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hwb, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in hwb ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hwb, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in hwb ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in hwb, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in hwb shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(in hwb shorter hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hwb shorter hue, red, blue)' -Fail Property background-image value 'radial-gradient(in hwb shorter hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hwb shorter hue, red, blue)' +Pass Property background-image value 'radial-gradient(in hwb shorter hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in hwb shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(in hwb shorter hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in hwb shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in hwb shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb shorter hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hwb shorter hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in hwb shorter hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hwb shorter hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in hwb shorter hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in hwb shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb shorter hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb longer hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in hwb longer hue, red, blue)' Pass Property background-image value 'radial-gradient(in hwb longer hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hwb longer hue, red, blue)' -Fail Property background-image value 'radial-gradient(in hwb longer hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hwb longer hue, red, blue)' +Pass Property background-image value 'radial-gradient(in hwb longer hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in hwb longer hue, red, blue)' Pass Property background-image value 'radial-gradient(in hwb longer hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in hwb longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in hwb longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb longer hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hwb longer hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in hwb longer hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hwb longer hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in hwb longer hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in hwb longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb longer hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in hwb increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in hwb increasing hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hwb increasing hue, red, blue)' -Fail Property background-image value 'radial-gradient(in hwb increasing hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hwb increasing hue, red, blue)' +Pass Property background-image value 'radial-gradient(in hwb increasing hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in hwb increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in hwb increasing hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in hwb increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in hwb increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb increasing hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hwb increasing hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in hwb increasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hwb increasing hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in hwb increasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in hwb increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb increasing hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in hwb decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in hwb decreasing hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hwb decreasing hue, red, blue)' -Fail Property background-image value 'radial-gradient(in hwb decreasing hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hwb decreasing hue, red, blue)' +Pass Property background-image value 'radial-gradient(in hwb decreasing hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in hwb decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in hwb decreasing hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in hwb decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in hwb decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb decreasing hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in hwb decreasing hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in hwb decreasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in hwb decreasing hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in hwb decreasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in hwb decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in hwb decreasing hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch, red, blue)' Pass Property background-image value 'radial-gradient(50px in lch, red, blue)' Pass Property background-image value 'radial-gradient(in lch 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lch, red, blue)' -Fail Property background-image value 'radial-gradient(in lch ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lch, red, blue)' +Pass Property background-image value 'radial-gradient(in lch ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in lch, red, blue)' Pass Property background-image value 'radial-gradient(in lch at right center, red, blue)' Pass Property background-image value 'radial-gradient(in lch, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in lch, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lch, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in lch ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lch, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in lch ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in lch, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in lch shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(in lch shorter hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lch shorter hue, red, blue)' -Fail Property background-image value 'radial-gradient(in lch shorter hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lch shorter hue, red, blue)' +Pass Property background-image value 'radial-gradient(in lch shorter hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in lch shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(in lch shorter hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in lch shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in lch shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch shorter hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lch shorter hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in lch shorter hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lch shorter hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in lch shorter hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in lch shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch shorter hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch longer hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in lch longer hue, red, blue)' Pass Property background-image value 'radial-gradient(in lch longer hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lch longer hue, red, blue)' -Fail Property background-image value 'radial-gradient(in lch longer hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lch longer hue, red, blue)' +Pass Property background-image value 'radial-gradient(in lch longer hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in lch longer hue, red, blue)' Pass Property background-image value 'radial-gradient(in lch longer hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in lch longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in lch longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch longer hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lch longer hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in lch longer hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lch longer hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in lch longer hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in lch longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch longer hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in lch increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in lch increasing hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lch increasing hue, red, blue)' -Fail Property background-image value 'radial-gradient(in lch increasing hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lch increasing hue, red, blue)' +Pass Property background-image value 'radial-gradient(in lch increasing hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in lch increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in lch increasing hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in lch increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in lch increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch increasing hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lch increasing hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in lch increasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lch increasing hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in lch increasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in lch increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch increasing hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in lch decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in lch decreasing hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lch decreasing hue, red, blue)' -Fail Property background-image value 'radial-gradient(in lch decreasing hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lch decreasing hue, red, blue)' +Pass Property background-image value 'radial-gradient(in lch decreasing hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in lch decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in lch decreasing hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in lch decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in lch decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch decreasing hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in lch decreasing hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in lch decreasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in lch decreasing hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in lch decreasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in lch decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in lch decreasing hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch, red, blue)' Pass Property background-image value 'radial-gradient(50px in oklch, red, blue)' Pass Property background-image value 'radial-gradient(in oklch 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklch, red, blue)' -Fail Property background-image value 'radial-gradient(in oklch ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklch, red, blue)' +Pass Property background-image value 'radial-gradient(in oklch ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in oklch, red, blue)' Pass Property background-image value 'radial-gradient(in oklch at right center, red, blue)' Pass Property background-image value 'radial-gradient(in oklch, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in oklch, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklch, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in oklch ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklch, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in oklch ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in oklch, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in oklch shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(in oklch shorter hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklch shorter hue, red, blue)' -Fail Property background-image value 'radial-gradient(in oklch shorter hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklch shorter hue, red, blue)' +Pass Property background-image value 'radial-gradient(in oklch shorter hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in oklch shorter hue, red, blue)' Pass Property background-image value 'radial-gradient(in oklch shorter hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in oklch shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in oklch shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch shorter hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklch shorter hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in oklch shorter hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklch shorter hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in oklch shorter hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in oklch shorter hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch shorter hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch longer hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in oklch longer hue, red, blue)' Pass Property background-image value 'radial-gradient(in oklch longer hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklch longer hue, red, blue)' -Fail Property background-image value 'radial-gradient(in oklch longer hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklch longer hue, red, blue)' +Pass Property background-image value 'radial-gradient(in oklch longer hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in oklch longer hue, red, blue)' Pass Property background-image value 'radial-gradient(in oklch longer hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in oklch longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in oklch longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch longer hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklch longer hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in oklch longer hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklch longer hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in oklch longer hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in oklch longer hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch longer hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in oklch increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in oklch increasing hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklch increasing hue, red, blue)' -Fail Property background-image value 'radial-gradient(in oklch increasing hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklch increasing hue, red, blue)' +Pass Property background-image value 'radial-gradient(in oklch increasing hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in oklch increasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in oklch increasing hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in oklch increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in oklch increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch increasing hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklch increasing hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in oklch increasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklch increasing hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in oklch increasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in oklch increasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch increasing hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(50px in oklch decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in oklch decreasing hue 50px, red, blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklch decreasing hue, red, blue)' -Fail Property background-image value 'radial-gradient(in oklch decreasing hue ellipse 50% 40em, red, blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklch decreasing hue, red, blue)' +Pass Property background-image value 'radial-gradient(in oklch decreasing hue ellipse 50% 40em, red, blue)' Pass Property background-image value 'radial-gradient(at right center in oklch decreasing hue, red, blue)' Pass Property background-image value 'radial-gradient(in oklch decreasing hue at right center, red, blue)' Pass Property background-image value 'radial-gradient(in oklch decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(50px in oklch decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch decreasing hue 50px, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(ellipse 50% 40em in oklch decreasing hue, color(srgb 1 0 0), blue)' -Fail Property background-image value 'radial-gradient(in oklch decreasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(ellipse 50% 40em in oklch decreasing hue, color(srgb 1 0 0), blue)' +Pass Property background-image value 'radial-gradient(in oklch decreasing hue ellipse 50% 40em, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(at right center in oklch decreasing hue, color(srgb 1 0 0), blue)' Pass Property background-image value 'radial-gradient(in oklch decreasing hue at right center, color(srgb 1 0 0), blue)' Pass Property background-image value 'conic-gradient(from 30deg, red, blue)'