slint/tests/screenshots/cases/software/basic/radial-gradients.slint
Tasuku Suzuki 2fdcca868e
swrenderer: Add radial gradient support (#8980)
Previously, the software renderer only supported linear gradients, with
radial gradients falling back to solid colors. This commit adds full
radial gradient rendering support.

Rename gradient-related types for clarity:
- GradientCommand → LinearGradientCommand
- gradients → linear_gradients
- draw_gradient_line → draw_linear_gradient
- process_gradient → process_linear_gradient

* tests: Add comprehensive screenshot tests for radial gradients

Add test cases for radial gradients including:
- Basic radial gradient with transparency overlay
- Multiple color stops with specific percentages
- Gradient stops beyond 100% range
- Overlapping transparent gradients with alpha blending
- Multiple stops at same position for sharp color transitions
- Edge case with invisible stop at 0%

ROTATION_THRESHOLD set to 600 due to imprecision in gradient calculations
during rotation transformations.
2025-07-28 13:44:36 +02:00

43 lines
No EOL
1.6 KiB
Text

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
// ROTATION_THRESHOLD=600 - because gradients are very imprecise in rotation
export component TestCase inherits Window {
width: 64px;
height: 64px;
background: black;
GridLayout {
Row {
Rectangle {
background: @radial-gradient(circle, red, blue);
with_opacity := Rectangle {
background: @radial-gradient(circle, limegreen 10%, transparent 50%);
}
}
Rectangle { background: @radial-gradient(circle, white 10%, #239 35%, red 85%); }
// Stops beyond 100%
Rectangle { background: @radial-gradient(circle, red 0%, white 50%, blue 100%, green 150%); }
}
Row {
Rectangle {
// Overlapping transparent gradients
background: @radial-gradient(circle, lightblue, red);
Rectangle { background: @radial-gradient(circle, green, transparent, rgba(255, 0, 128, 0.5)); }
}
// Multiple stops at same position
Rectangle { background: @radial-gradient(circle, blue 0%, blue 30%, yellow 30%, yellow 60%, red 60%, red 100%); }
// Edge case: invisible stop at 0%
Rectangle { background: @radial-gradient(circle, transparent 0%, red 1%, white 50%, transparent 100%); }
}
}
init => {
// This is a test for the binding part of #3068
if (with_opacity.opacity == 1) {
with_opacity.opacity = 0.5;
}
}
}