Implement gradient color interpolation option (#548)

* Added the better color averaging code (tested & functional)

* rustfmt

* Make Color f32 0..1, clarify premul/unpremul

* Fix imports and test name

* Premultiply gradient colors matching CSS

* Fix indentation

* fixup

* Add gradient image

---------

Co-authored-by: K's Thinkpad <K.T.Kraft@protonmail.com>

17 files changed, 624 insertions, 12 deletions

diff --git a/niri-visual-tests/src/cases/gradient_angle.rs b/niri-visual-tests/src/cases/gradient_angle.rs
index 7d0b7542..fa70dc73 100644
--- a/niri-visual-tests/src/cases/gradient_angle.rs
+++ b/niri-visual-tests/src/cases/gradient_angle.rs
@@ -4,7 +4,7 @@ use std::time::Duration;
 
 use niri::animation::ANIMATION_SLOWDOWN;
 use niri::render_helpers::border::BorderRenderElement;
-use niri_config::CornerRadius;
+use niri_config::{Color, CornerRadius, GradientInterpolation};
 use smithay::backend::renderer::element::RenderElement;
 use smithay::backend::renderer::gles::GlesRenderer;
 use smithay::utils::{Logical, Physical, Rectangle, Size};
@@ -64,8 +64,9 @@ impl TestCase for GradientAngle {
         [BorderRenderElement::new(
             area.size,
             Rectangle::from_loc_and_size((0., 0.), area.size),
-            [1., 0., 0., 1.],
-            [0., 1., 0., 1.],
+            GradientInterpolation::default(),
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 1.),
             self.angle - FRAC_PI_2,
             Rectangle::from_loc_and_size((0., 0.), area.size),
             0.,
diff --git a/niri-visual-tests/src/cases/gradient_area.rs b/niri-visual-tests/src/cases/gradient_area.rs
index 13f50d4c..5463cfc4 100644
--- a/niri-visual-tests/src/cases/gradient_area.rs
+++ b/niri-visual-tests/src/cases/gradient_area.rs
@@ -5,7 +5,7 @@ use std::time::Duration;
 use niri::animation::ANIMATION_SLOWDOWN;
 use niri::layout::focus_ring::FocusRing;
 use niri::render_helpers::border::BorderRenderElement;
-use niri_config::{Color, CornerRadius, FloatOrInt};
+use niri_config::{Color, CornerRadius, FloatOrInt, GradientInterpolation};
 use smithay::backend::renderer::element::RenderElement;
 use smithay::backend::renderer::gles::GlesRenderer;
 use smithay::utils::{Logical, Physical, Point, Rectangle, Size};
@@ -23,7 +23,7 @@ impl GradientArea {
         let border = FocusRing::new(niri_config::FocusRing {
             off: false,
             width: FloatOrInt(1.),
-            active_color: Color::new(255, 255, 255, 128),
+            active_color: Color::from_rgba8_unpremul(255, 255, 255, 128),
             inactive_color: Color::default(),
             active_gradient: None,
             inactive_gradient: None,
@@ -104,8 +104,9 @@ impl TestCase for GradientArea {
             [BorderRenderElement::new(
                 area.size,
                 g_area,
-                [1., 0., 0., 1.],
-                [0., 1., 0., 1.],
+                GradientInterpolation::default(),
+                Color::new_unpremul(1., 0., 0., 1.),
+                Color::new_unpremul(0., 1., 0., 1.),
                 FRAC_PI_4,
                 Rectangle::from_loc_and_size((0, 0), rect_size).to_f64(),
                 0.,
diff --git a/niri-visual-tests/src/cases/gradient_oklab.rs b/niri-visual-tests/src/cases/gradient_oklab.rs
new file mode 100644
index 00000000..abebb213
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_oklab.rs
@@ -0,0 +1,53 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{
+    Color, CornerRadius, GradientColorSpace, GradientInterpolation, HueInterpolation,
+};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientOklab {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientOklab {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::Oklab,
+                hue_interpolation: HueInterpolation::Shorter,
+            },
+        }
+    }
+}
+
+impl TestCase for GradientOklab {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 1.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/gradient_oklab_alpha.rs b/niri-visual-tests/src/cases/gradient_oklab_alpha.rs
new file mode 100644
index 00000000..31ae59ef
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_oklab_alpha.rs
@@ -0,0 +1,51 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{Color, CornerRadius, GradientColorSpace, GradientInterpolation};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientOklabAlpha {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientOklabAlpha {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::Oklab,
+                hue_interpolation: Default::default(),
+            },
+        }
+    }
+}
+
+impl TestCase for GradientOklabAlpha {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 0.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/gradient_oklch_alpha.rs b/niri-visual-tests/src/cases/gradient_oklch_alpha.rs
new file mode 100644
index 00000000..022f59ec
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_oklch_alpha.rs
@@ -0,0 +1,53 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{
+    Color, CornerRadius, GradientColorSpace, GradientInterpolation, HueInterpolation,
+};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientOklchAlpha {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientOklchAlpha {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::Oklch,
+                hue_interpolation: HueInterpolation::Longer,
+            },
+        }
+    }
+}
+
+impl TestCase for GradientOklchAlpha {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 0.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/gradient_oklch_decreasing.rs b/niri-visual-tests/src/cases/gradient_oklch_decreasing.rs
new file mode 100644
index 00000000..7039f2c8
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_oklch_decreasing.rs
@@ -0,0 +1,53 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{
+    Color, CornerRadius, GradientColorSpace, GradientInterpolation, HueInterpolation,
+};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientOklchDecreasing {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientOklchDecreasing {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::Oklch,
+                hue_interpolation: HueInterpolation::Decreasing,
+            },
+        }
+    }
+}
+
+impl TestCase for GradientOklchDecreasing {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 1.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/gradient_oklch_increasing.rs b/niri-visual-tests/src/cases/gradient_oklch_increasing.rs
new file mode 100644
index 00000000..2a020923
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_oklch_increasing.rs
@@ -0,0 +1,53 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{
+    Color, CornerRadius, GradientColorSpace, GradientInterpolation, HueInterpolation,
+};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientOklchIncreasing {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientOklchIncreasing {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::Oklch,
+                hue_interpolation: HueInterpolation::Increasing,
+            },
+        }
+    }
+}
+
+impl TestCase for GradientOklchIncreasing {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 1.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/gradient_oklch_longer.rs b/niri-visual-tests/src/cases/gradient_oklch_longer.rs
new file mode 100644
index 00000000..d63259fd
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_oklch_longer.rs
@@ -0,0 +1,53 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{
+    Color, CornerRadius, GradientColorSpace, GradientInterpolation, HueInterpolation,
+};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientOklchLonger {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientOklchLonger {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::Oklch,
+                hue_interpolation: HueInterpolation::Longer,
+            },
+        }
+    }
+}
+
+impl TestCase for GradientOklchLonger {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 1.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/gradient_oklch_shorter.rs b/niri-visual-tests/src/cases/gradient_oklch_shorter.rs
new file mode 100644
index 00000000..7cd412ab
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_oklch_shorter.rs
@@ -0,0 +1,53 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{
+    Color, CornerRadius, GradientColorSpace, GradientInterpolation, HueInterpolation,
+};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientOklchShorter {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientOklchShorter {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::Oklch,
+                hue_interpolation: HueInterpolation::Shorter,
+            },
+        }
+    }
+}
+
+impl TestCase for GradientOklchShorter {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 1.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/gradient_srgb.rs b/niri-visual-tests/src/cases/gradient_srgb.rs
new file mode 100644
index 00000000..d0b847c0
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_srgb.rs
@@ -0,0 +1,53 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{
+    Color, CornerRadius, GradientColorSpace, GradientInterpolation, HueInterpolation,
+};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientSrgb {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientSrgb {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::Srgb,
+                hue_interpolation: HueInterpolation::Shorter,
+            },
+        }
+    }
+}
+
+impl TestCase for GradientSrgb {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 1.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/gradient_srgb_alpha.rs b/niri-visual-tests/src/cases/gradient_srgb_alpha.rs
new file mode 100644
index 00000000..c1c3c75c
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_srgb_alpha.rs
@@ -0,0 +1,51 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{Color, CornerRadius, GradientColorSpace, GradientInterpolation};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientSrgbAlpha {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientSrgbAlpha {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::Srgb,
+                hue_interpolation: Default::default(),
+            },
+        }
+    }
+}
+
+impl TestCase for GradientSrgbAlpha {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 0.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/gradient_srgblinear.rs b/niri-visual-tests/src/cases/gradient_srgblinear.rs
new file mode 100644
index 00000000..b8d0ebba
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_srgblinear.rs
@@ -0,0 +1,53 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{
+    Color, CornerRadius, GradientColorSpace, GradientInterpolation, HueInterpolation,
+};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientSrgbLinear {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientSrgbLinear {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::SrgbLinear,
+                hue_interpolation: HueInterpolation::Shorter,
+            },
+        }
+    }
+}
+
+impl TestCase for GradientSrgbLinear {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 1.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/gradient_srgblinear_alpha.rs b/niri-visual-tests/src/cases/gradient_srgblinear_alpha.rs
new file mode 100644
index 00000000..2a22388f
--- /dev/null
+++ b/niri-visual-tests/src/cases/gradient_srgblinear_alpha.rs
@@ -0,0 +1,51 @@
+use niri::render_helpers::border::BorderRenderElement;
+use niri_config::{Color, CornerRadius, GradientColorSpace, GradientInterpolation};
+use smithay::backend::renderer::element::RenderElement;
+use smithay::backend::renderer::gles::GlesRenderer;
+use smithay::utils::{Logical, Physical, Rectangle, Size};
+
+use super::TestCase;
+
+pub struct GradientSrgbLinearAlpha {
+    gradient_format: GradientInterpolation,
+}
+
+impl GradientSrgbLinearAlpha {
+    pub fn new(_size: Size<i32, Logical>) -> Self {
+        Self {
+            gradient_format: GradientInterpolation {
+                color_space: GradientColorSpace::SrgbLinear,
+                hue_interpolation: Default::default(),
+            },
+        }
+    }
+}
+
+impl TestCase for GradientSrgbLinearAlpha {
+    fn render(
+        &mut self,
+        _renderer: &mut GlesRenderer,
+        size: Size<i32, Physical>,
+    ) -> Vec<Box<dyn RenderElement<GlesRenderer>>> {
+        let (a, b) = (size.w / 6, size.h / 3);
+        let size = (size.w - a * 2, size.h - b * 2);
+        let area = Rectangle::from_loc_and_size((a, b), size).to_f64();
+
+        [BorderRenderElement::new(
+            area.size,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            self.gradient_format,
+            Color::new_unpremul(1., 0., 0., 1.),
+            Color::new_unpremul(0., 1., 0., 0.),
+            0.,
+            Rectangle::from_loc_and_size((0., 0.), area.size),
+            0.,
+            CornerRadius::default(),
+            1.,
+        )
+        .with_location(area.loc)]
+        .into_iter()
+        .map(|elem| Box::new(elem) as _)
+        .collect()
+    }
+}
diff --git a/niri-visual-tests/src/cases/layout.rs b/niri-visual-tests/src/cases/layout.rs
index 2e730dbe..c599ce8c 100644
--- a/niri-visual-tests/src/cases/layout.rs
+++ b/niri-visual-tests/src/cases/layout.rs
@@ -50,8 +50,8 @@ impl Layout {
             border: niri_config::Border {
                 off: false,
                 width: FloatOrInt(4.),
-                active_color: Color::new(255, 163, 72, 255),
-                inactive_color: Color::new(50, 50, 50, 255),
+                active_color: Color::from_rgba8_unpremul(255, 163, 72, 255),
+                inactive_color: Color::from_rgba8_unpremul(50, 50, 50, 255),
                 active_gradient: None,
                 inactive_gradient: None,
             },
diff --git a/niri-visual-tests/src/cases/mod.rs b/niri-visual-tests/src/cases/mod.rs
index 25aa1e30..07a41ba4 100644
--- a/niri-visual-tests/src/cases/mod.rs
+++ b/niri-visual-tests/src/cases/mod.rs
@@ -6,6 +6,17 @@ use smithay::utils::{Physical, Size};
 
 pub mod gradient_angle;
 pub mod gradient_area;
+pub mod gradient_oklab;
+pub mod gradient_oklab_alpha;
+pub mod gradient_oklch_alpha;
+pub mod gradient_oklch_decreasing;
+pub mod gradient_oklch_increasing;
+pub mod gradient_oklch_longer;
+pub mod gradient_oklch_shorter;
+pub mod gradient_srgb;
+pub mod gradient_srgb_alpha;
+pub mod gradient_srgblinear;
+pub mod gradient_srgblinear_alpha;
 pub mod layout;
 pub mod tile;
 pub mod window;
diff --git a/niri-visual-tests/src/cases/tile.rs b/niri-visual-tests/src/cases/tile.rs
index 95261877..7a14111e 100644
--- a/niri-visual-tests/src/cases/tile.rs
+++ b/niri-visual-tests/src/cases/tile.rs
@@ -72,7 +72,7 @@ impl Tile {
             border: niri_config::Border {
                 off: false,
                 width: FloatOrInt(32.),
-                active_color: Color::new(255, 163, 72, 255),
+                active_color: Color::from_rgba8_unpremul(255, 163, 72, 255),
                 ..Default::default()
             },
             ..Default::default()
diff --git a/niri-visual-tests/src/main.rs b/niri-visual-tests/src/main.rs
index 771c501c..2b46f4f5 100644
--- a/niri-visual-tests/src/main.rs
+++ b/niri-visual-tests/src/main.rs
@@ -5,8 +5,6 @@ use std::env;
 use std::sync::atomic::Ordering;
 
 use adw::prelude::{AdwApplicationWindowExt, NavigationPageExt};
-use cases::tile::Tile;
-use cases::window::Window;
 use gtk::prelude::{
     AdjustmentExt, ApplicationExt, ApplicationExtManual, BoxExt, GtkWindowExt, WidgetExt,
 };
@@ -18,7 +16,20 @@ use tracing_subscriber::EnvFilter;
 
 use crate::cases::gradient_angle::GradientAngle;
 use crate::cases::gradient_area::GradientArea;
+use crate::cases::gradient_oklab::GradientOklab;
+use crate::cases::gradient_oklab_alpha::GradientOklabAlpha;
+use crate::cases::gradient_oklch_alpha::GradientOklchAlpha;
+use crate::cases::gradient_oklch_decreasing::GradientOklchDecreasing;
+use crate::cases::gradient_oklch_increasing::GradientOklchIncreasing;
+use crate::cases::gradient_oklch_longer::GradientOklchLonger;
+use crate::cases::gradient_oklch_shorter::GradientOklchShorter;
+use crate::cases::gradient_srgb::GradientSrgb;
+use crate::cases::gradient_srgb_alpha::GradientSrgbAlpha;
+use crate::cases::gradient_srgblinear::GradientSrgbLinear;
+use crate::cases::gradient_srgblinear_alpha::GradientSrgbLinearAlpha;
 use crate::cases::layout::Layout;
+use crate::cases::tile::Tile;
+use crate::cases::window::Window;
 use crate::cases::TestCase;
 
 mod cases;
@@ -112,6 +123,17 @@ fn build_ui(app: &adw::Application) {
 
     s.add(GradientAngle::new, "Gradient - Angle");
     s.add(GradientArea::new, "Gradient - Area");
+    s.add(GradientSrgb::new, "Gradient - Srgb");
+    s.add(GradientSrgbLinear::new, "Gradient - SrgbLinear");
+    s.add(GradientOklab::new, "Gradient - Oklab");
+    s.add(GradientOklchShorter::new, "Gradient - Oklch Shorter");
+    s.add(GradientOklchLonger::new, "Gradient - Oklch Longer");
+    s.add(GradientOklchIncreasing::new, "Gradient - Oklch Increasing");
+    s.add(GradientOklchDecreasing::new, "Gradient - Oklch Decreasing");
+    s.add(GradientSrgbAlpha::new, "Gradient - Srgb Alpha");
+    s.add(GradientSrgbLinearAlpha::new, "Gradient - SrgbLinear Alpha");
+    s.add(GradientOklabAlpha::new, "Gradient - Oklab Alpha");
+    s.add(GradientOklchAlpha::new, "Gradient - Oklch Alpha");
 
     let content_headerbar = adw::HeaderBar::new();