use cssparser::Parser;
use image::{GenericImageView, Rgba};
use super::gradient_utils::{
GradientOverlayTile, adaptive_lut_size, build_color_lut_with_interpolation,
resolve_stops_along_axis,
};
use crate::{
layout::style::{
ColorInterpolationMethod, CssToken, FromCss, GradientStop, GradientStops, Length, MakeComputed,
ObjectPosition, ParseResult, declare_enum_from_css_impl,
},
rendering::{RenderContext, Sizing},
};
#[derive(Debug, Clone, PartialEq)]
pub struct RadialGradient {
pub shape: RadialShape,
pub size: RadialSize,
pub center: ObjectPosition,
pub interpolation: ColorInterpolationMethod,
pub stops: Box<[GradientStop]>,
}
impl MakeComputed for RadialGradient {
fn make_computed(&mut self, sizing: &Sizing) {
self.center.make_computed(sizing);
self.stops.make_computed(sizing);
}
}
#[derive(Debug, Clone, Copy, PartialEq, Default)]
pub enum RadialShape {
Circle,
#[default]
Ellipse,
}
declare_enum_from_css_impl!(
RadialShape,
"circle" => RadialShape::Circle,
"ellipse" => RadialShape::Ellipse,
);
#[derive(Debug, Clone, Copy, PartialEq, Default)]
pub enum RadialSize {
ClosestSide,
FarthestSide,
ClosestCorner,
#[default]
FarthestCorner,
}
declare_enum_from_css_impl!(
RadialSize,
"closest-side" => RadialSize::ClosestSide,
"farthest-side" => RadialSize::FarthestSide,
"closest-corner" => RadialSize::ClosestCorner,
"farthest-corner" => RadialSize::FarthestCorner,
);
#[derive(Debug, Clone)]
pub(crate) struct RadialGradientTile {
pub width: u32,
pub height: u32,
pub cx: f32,
pub cy: f32,
pub radius_x: f32,
pub radius_y: f32,
pub inv_radius_x: f32,
pub inv_radius_y: f32,
pub distance_to_lut_scale: f32,
pub color_lut: Vec<Rgba<u8>>,
}
#[derive(Debug, Clone, Copy)]
pub(crate) struct RadialGradientRowState {
dx2: f32,
dx2_step: f32,
dx2_step_delta: f32,
dy2: f32,
max_lut_index: usize,
}
impl GenericImageView for RadialGradientTile {
type Pixel = Rgba<u8>;
fn dimensions(&self) -> (u32, u32) {
(self.width, self.height)
}
fn get_pixel(&self, x: u32, y: u32) -> Self::Pixel {
if self.color_lut.is_empty() {
return Rgba([0, 0, 0, 0]);
}
if self.color_lut.len() == 1 {
return self.color_lut[0];
}
let dx = (x as f32 - self.cx) / self.radius_x.max(1e-6);
let dy = (y as f32 - self.cy) / self.radius_y.max(1e-6);
let normalized_distance = (dx * dx + dy * dy).sqrt();
let lut_idx =
self.lut_index_for_normalized_distance_with_len(normalized_distance, self.color_lut.len());
self.color_lut[lut_idx]
}
}
impl RadialGradientTile {
#[inline(always)]
pub(crate) fn lut_index_for_normalized_distance_with_len(
&self,
normalized_distance: f32,
lut_len: usize,
) -> usize {
if lut_len <= 1 {
return 0;
}
((normalized_distance.clamp(0.0, 1.0) * self.distance_to_lut_scale).round() as usize)
.min(lut_len - 1)
}
pub fn new(gradient: &RadialGradient, width: u32, height: u32, context: &RenderContext) -> Self {
let cx = Length::from(gradient.center.0.x).to_px(&context.sizing, width as f32);
let cy = Length::from(gradient.center.0.y).to_px(&context.sizing, height as f32);
let dx_left = cx;
let dx_right = width as f32 - cx;
let dy_top = cy;
let dy_bottom = height as f32 - cy;
let (radius_x, radius_y) = match (gradient.shape, gradient.size) {
(RadialShape::Ellipse, RadialSize::FarthestCorner) => {
(dx_left.max(dx_right), dy_top.max(dy_bottom))
}
(RadialShape::Circle, RadialSize::FarthestCorner) => {
let candidates = [
(cx, cy),
(cx, dy_bottom),
(dx_right, cy),
(dx_right, dy_bottom),
];
let r = candidates
.iter()
.map(|(dx, dy)| (dx * dx + dy * dy).sqrt())
.fold(0.0_f32, f32::max);
(r, r)
}
(RadialShape::Ellipse, RadialSize::FarthestSide) => {
(dx_left.max(dx_right), dy_top.max(dy_bottom))
}
(RadialShape::Ellipse, RadialSize::ClosestSide) => {
(dx_left.min(dx_right), dy_top.min(dy_bottom))
}
(RadialShape::Circle, RadialSize::FarthestSide) => {
let r = dx_left.max(dx_right).max(dy_top.max(dy_bottom));
(r, r)
}
(RadialShape::Circle, RadialSize::ClosestSide) => {
let r = dx_left.min(dx_right).min(dy_top.min(dy_bottom));
(r, r)
}
(RadialShape::Ellipse, RadialSize::ClosestCorner) => {
let f_rx = dx_left.max(dx_right);
let f_ry = dy_top.max(dy_bottom);
let corners = [
(dx_left, dy_top),
(dx_right, dy_top),
(dx_left, dy_bottom),
(dx_right, dy_bottom),
];
let distances = corners.map(|(dx, dy)| (dx * dx + dy * dy).sqrt());
let dist_to_closest_corner = distances.iter().fold(f32::INFINITY, |a, &b| a.min(b));
let dist_to_farthest_corner = distances.iter().fold(0.0f32, |a, &b| a.max(b));
let ratio = dist_to_closest_corner / dist_to_farthest_corner.max(1e-6);
(f_rx * ratio, f_ry * ratio)
}
(RadialShape::Circle, RadialSize::ClosestCorner) => {
let candidates = [
(cx, cy),
(cx, dy_bottom),
(dx_right, cy),
(dx_right, dy_bottom),
];
let r = candidates
.iter()
.map(|(dx, dy)| (dx * dx + dy * dy).sqrt())
.fold(f32::INFINITY, f32::min);
(r, r)
}
};
let radius_scale = radius_x.max(radius_y);
let resolved_stops = resolve_stops_along_axis(&gradient.stops, radius_scale.max(1e-6), context);
let lut_size = adaptive_lut_size(radius_scale, &resolved_stops);
let color_lut = build_color_lut_with_interpolation(
&resolved_stops,
radius_scale,
lut_size,
gradient.interpolation.color_space,
gradient.interpolation.hue_direction,
);
let lut_len = color_lut.len();
let inv_radius_x = radius_x.max(1e-6).recip();
let inv_radius_y = radius_y.max(1e-6).recip();
let distance_to_lut_scale = if lut_len <= 1 {
0.0
} else {
(lut_len - 1) as f32
};
RadialGradientTile {
width,
height,
cx,
cy,
radius_x,
radius_y,
inv_radius_x,
inv_radius_y,
distance_to_lut_scale,
color_lut,
}
}
}
impl GradientOverlayTile for RadialGradientTile {
type RowState = RadialGradientRowState;
#[inline(always)]
fn width(&self) -> u32 {
self.width
}
#[inline(always)]
fn height(&self) -> u32 {
self.height
}
#[inline(always)]
fn lut_len(&self) -> usize {
self.color_lut.len()
}
#[inline(always)]
fn sample_at(&self, lut_idx: usize) -> Rgba<u8> {
self.color_lut[lut_idx]
}
#[inline(always)]
fn begin_row(&self, src_x_start: u32, src_y: u32, lut_len: usize) -> Self::RowState {
let dy = (src_y as f32 - self.cy) * self.inv_radius_y;
let dx = (src_x_start as f32 - self.cx) * self.inv_radius_x;
let dx_step = self.inv_radius_x;
RadialGradientRowState {
dx2: dx * dx,
dx2_step: 2.0 * dx * dx_step + dx_step * dx_step,
dx2_step_delta: 2.0 * dx_step * dx_step,
dy2: dy * dy,
max_lut_index: lut_len.saturating_sub(1),
}
}
#[inline(always)]
fn next_lut_index(&self, row_state: &mut Self::RowState) -> usize {
if row_state.dy2 >= 1.0 {
return row_state.max_lut_index;
}
let normalized_distance = (row_state.dx2 + row_state.dy2).sqrt();
let lut_idx = self
.lut_index_for_normalized_distance_with_len(normalized_distance, row_state.max_lut_index + 1);
row_state.dx2 += row_state.dx2_step;
row_state.dx2_step += row_state.dx2_step_delta;
lut_idx
}
}
impl<'i> FromCss<'i> for RadialGradient {
fn from_css(input: &mut Parser<'i, '_>) -> ParseResult<'i, RadialGradient> {
input.expect_function_matching("radial-gradient")?;
input.parse_nested_block(|input| {
let mut shape = RadialShape::Ellipse;
let mut size = RadialSize::FarthestCorner;
let mut center = ObjectPosition::default();
let mut interpolation = ColorInterpolationMethod::default();
loop {
if let Ok(s) = input.try_parse(RadialShape::from_css) {
shape = s;
continue;
}
if let Ok(s) = input.try_parse(RadialSize::from_css) {
size = s;
continue;
}
if input.try_parse(|i| i.expect_ident_matching("at")).is_ok() {
center = ObjectPosition::from_css(input)?;
continue;
}
if let Ok(parsed_interpolation) = input.try_parse(ColorInterpolationMethod::from_css) {
interpolation = parsed_interpolation;
continue;
}
input.try_parse(Parser::expect_comma).ok();
break;
}
let stops = GradientStops::from_css(input)?;
Ok(RadialGradient {
shape,
size,
center,
interpolation,
stops: stops.into_boxed_slice(),
})
})
}
fn valid_tokens() -> &'static [CssToken] {
&[CssToken::Token("radial-gradient()")]
}
}
#[cfg(test)]
mod tests {
use color::{ColorSpaceTag, HueDirection};
use super::*;
use crate::layout::style::{
BackgroundPosition, Color, Length, PositionComponent, PositionKeywordX, PositionKeywordY,
SpacePair, StopPosition,
};
use crate::{GlobalContext, rendering::RenderContext};
#[test]
fn test_parse_radial_gradient_basic() {
let gradient = RadialGradient::from_str("radial-gradient(#ff0000, #0000ff)");
assert_eq!(
gradient,
Ok(RadialGradient {
shape: RadialShape::Ellipse,
size: RadialSize::FarthestCorner,
center: ObjectPosition::default(),
interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color([255, 0, 0, 255]).into(),
hint: None,
},
GradientStop::ColorHint {
color: Color([0, 0, 255, 255]).into(),
hint: None,
},
]
.into(),
})
);
}
#[test]
fn test_parse_radial_gradient_with_interpolation_color_space() {
assert_eq!(
RadialGradient::from_str("radial-gradient(in oklab, red, blue)"),
Ok(RadialGradient {
shape: RadialShape::Ellipse,
size: RadialSize::FarthestCorner,
center: ObjectPosition::default(),
interpolation: ColorInterpolationMethod {
color_space: ColorSpaceTag::Oklab,
hue_direction: HueDirection::Shorter,
},
stops: [
GradientStop::ColorHint {
color: Color::from_rgb(0xff0000).into(),
hint: None,
},
GradientStop::ColorHint {
color: Color::from_rgb(0x0000ff).into(),
hint: None,
},
]
.into(),
})
);
}
#[test]
fn test_parse_radial_gradient_circle_farthest_side() {
let gradient =
RadialGradient::from_str("radial-gradient(circle farthest-side, #ff0000, #0000ff)");
assert_eq!(
gradient,
Ok(RadialGradient {
shape: RadialShape::Circle,
size: RadialSize::FarthestSide,
center: ObjectPosition::default(),
interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color([255, 0, 0, 255]).into(),
hint: None,
},
GradientStop::ColorHint {
color: Color([0, 0, 255, 255]).into(),
hint: None,
},
]
.into(),
})
);
}
#[test]
fn test_parse_radial_gradient_ellipse_at_left_top() {
let gradient =
RadialGradient::from_str("radial-gradient(ellipse at left top, #ff0000, #0000ff)");
assert_eq!(
gradient,
Ok(RadialGradient {
shape: RadialShape::Ellipse,
size: RadialSize::FarthestCorner,
center: BackgroundPosition::<false>(SpacePair::from_pair(
PositionComponent::KeywordX(PositionKeywordX::Left),
PositionComponent::KeywordY(PositionKeywordY::Top),
)),
interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color([255, 0, 0, 255]).into(),
hint: None,
},
GradientStop::ColorHint {
color: Color([0, 0, 255, 255]).into(),
hint: None,
},
]
.into(),
})
);
}
#[test]
fn test_parse_radial_gradient_size_then_position() {
let gradient =
RadialGradient::from_str("radial-gradient(farthest-corner at 25% 70%, #ffffff, #000000)");
assert_eq!(
gradient,
Ok(RadialGradient {
shape: RadialShape::Ellipse,
size: RadialSize::FarthestCorner,
center: BackgroundPosition::<false>(SpacePair::from_pair(
Length::Percentage(25.0).into(),
Length::Percentage(70.0).into(),
)),
interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color::white().into(),
hint: None,
},
GradientStop::ColorHint {
color: Color::black().into(),
hint: None,
},
]
.into(),
})
);
}
#[test]
fn test_parse_radial_gradient_circle_farthest_side_with_stops() {
let gradient = RadialGradient::from_str(
"radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%)",
);
assert_eq!(
gradient,
Ok(RadialGradient {
shape: RadialShape::Circle,
size: RadialSize::FarthestCorner,
center: BackgroundPosition::<false>(SpacePair::from_single(PositionComponent::Length(
Length::Px(25.0),
))),
interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color([211, 211, 211, 255]).into(),
hint: Some(StopPosition(Length::Percentage(2.0))),
},
GradientStop::ColorHint {
color: Color::transparent().into(),
hint: Some(StopPosition(Length::Percentage(0.0))),
},
]
.into(),
})
);
}
#[test]
fn test_parse_radial_gradient_with_stop_positions() {
let gradient =
RadialGradient::from_str("radial-gradient(circle, #ff0000 0%, #00ff00 50%, #0000ff 100%)");
assert_eq!(
gradient,
Ok(RadialGradient {
shape: RadialShape::Circle,
size: RadialSize::FarthestCorner,
center: ObjectPosition::default(),
interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color([255, 0, 0, 255]).into(),
hint: Some(StopPosition(Length::Percentage(0.0))),
},
GradientStop::ColorHint {
color: Color([0, 255, 0, 255]).into(),
hint: Some(StopPosition(Length::Percentage(50.0))),
},
GradientStop::ColorHint {
color: Color([0, 0, 255, 255]).into(),
hint: Some(StopPosition(Length::Percentage(100.0))),
},
]
.into(),
})
);
}
#[test]
fn test_parse_radial_gradient_with_double_position_color_stop() {
assert_eq!(
RadialGradient::from_str("radial-gradient(circle, red 10% 20%, blue)"),
Ok(RadialGradient {
shape: RadialShape::Circle,
size: RadialSize::FarthestCorner,
center: ObjectPosition::default(),
interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color::from_rgb(0xff0000).into(),
hint: Some(StopPosition(Length::Percentage(10.0))),
},
GradientStop::ColorHint {
color: Color::from_rgb(0xff0000).into(),
hint: Some(StopPosition(Length::Percentage(20.0))),
},
GradientStop::ColorHint {
color: Color::from_rgb(0x0000ff).into(),
hint: None,
},
]
.into(),
})
);
}
#[test]
fn resolve_stops_percentage_and_px_radial() {
let gradient = RadialGradient {
shape: RadialShape::Ellipse,
size: RadialSize::FarthestCorner,
center: ObjectPosition::default(),
interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color::black().into(),
hint: Some(StopPosition(Length::Percentage(0.0))),
},
GradientStop::ColorHint {
color: Color::black().into(),
hint: Some(StopPosition(Length::Percentage(50.0))),
},
GradientStop::ColorHint {
color: Color::black().into(),
hint: Some(StopPosition(Length::Px(100.0))),
},
]
.into(),
};
let context = GlobalContext::default();
let render_context = RenderContext::new_test(&context, (200, 100).into());
let resolved = resolve_stops_along_axis(
&gradient.stops,
render_context.sizing.viewport.width.unwrap_or_default() as f32,
&render_context,
);
assert_eq!(resolved.len(), 3);
assert!((resolved[0].position - 0.0).abs() < 1e-3);
assert_eq!(resolved[1].position, resolved[2].position);
}
#[test]
fn resolve_stops_equal_positions_distributed_radial() {
let gradient = RadialGradient {
shape: RadialShape::Ellipse,
size: RadialSize::FarthestCorner,
center: ObjectPosition::default(),
interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color::black().into(),
hint: Some(StopPosition(Length::Px(0.0))),
},
GradientStop::ColorHint {
color: Color::black().into(),
hint: Some(StopPosition(Length::Px(0.0))),
},
GradientStop::ColorHint {
color: Color::black().into(),
hint: Some(StopPosition(Length::Px(0.0))),
},
]
.into(),
};
let context = GlobalContext::default();
let render_context = RenderContext::new_test(&context, (200, 100).into());
let resolved = resolve_stops_along_axis(
&gradient.stops,
render_context.sizing.viewport.width.unwrap_or_default() as f32,
&render_context,
);
assert_eq!(resolved.len(), 3);
assert!(resolved[0].position >= 0.0);
assert!(resolved[1].position >= resolved[0].position);
assert!(resolved[2].position >= resolved[1].position);
}
#[test]
fn test_radial_gradient_at() {
let gradient = RadialGradient {
shape: RadialShape::Circle,
size: RadialSize::FarthestCorner,
center: ObjectPosition::default(), interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color([255, 0, 0, 255]).into(), hint: Some(StopPosition(Length::Percentage(0.0))),
},
GradientStop::ColorHint {
color: Color([0, 0, 255, 255]).into(), hint: Some(StopPosition(Length::Percentage(100.0))),
},
]
.into(),
};
let context = GlobalContext::default();
let dummy_context = RenderContext::new_test(&context, (100, 100).into());
let tile = RadialGradientTile::new(&gradient, 100, 100, &dummy_context);
let color_center = tile.get_pixel(50, 50);
assert_eq!(color_center, Rgba([255, 0, 0, 255]));
let color_far = tile.get_pixel(200, 200);
assert_eq!(color_far, Rgba([0, 0, 255, 255]));
}
#[test]
fn test_radial_gradient_ellipse_closest_corner() {
let gradient = RadialGradient {
shape: RadialShape::Ellipse,
size: RadialSize::ClosestCorner,
center: BackgroundPosition::<false>(SpacePair::from_pair(
Length::Px(20.0).into(),
Length::Px(20.0).into(),
)),
interpolation: ColorInterpolationMethod::default(),
stops: [
GradientStop::ColorHint {
color: Color::black().into(),
hint: Some(StopPosition(Length::Percentage(0.0))),
},
GradientStop::ColorHint {
color: Color::white().into(),
hint: Some(StopPosition(Length::Percentage(100.0))),
},
]
.into(),
};
let context = GlobalContext::default();
let dummy_context = RenderContext::new_test(&context, (100, 100).into());
let tile = RadialGradientTile::new(&gradient, 100, 100, &dummy_context);
assert!((tile.radius_x - 20.0).abs() < 1e-3);
assert!((tile.radius_y - 20.0).abs() < 1e-3);
}
}