mirror of
https://github.com/storytold/craft-libs.git
synced 2026-10-31 07:39:23 +00:00
395 lines
19 KiB
Rust
395 lines
19 KiB
Rust
//! Exact offscreen rendering comparisons against independent reference painters.
|
|
//!
|
|
//! These are paired same-renderer comparisons, not portable GPU golden files. The reference
|
|
//! paths deliberately do not call the shared components. Literal geometry and colors specify
|
|
//! the baseline; deliberate mutations prove color, spacing and stroke regressions are caught.
|
|
//! Set CRAFT_UI_VISUAL_DIR to retain bounded before/after/difference PNGs and comparison tables.
|
|
|
|
#[path = "visual/fixtures.rs"]
|
|
mod fixtures;
|
|
|
|
use std::path::PathBuf;
|
|
|
|
use egui::{Color32, Context, Event, FullOutput, Modifiers, PointerButton, Pos2, RawInput, Rect, Response, TextureId, Ui};
|
|
use egui_kittest::{TestRenderer, wgpu::WgpuTestRenderer};
|
|
use fixtures::{CANVAS, Case, Component, Mutation, State, Theme};
|
|
use image::{Rgba, RgbaImage};
|
|
|
|
#[derive(Debug, PartialEq)]
|
|
struct Mesh {
|
|
clip: Rect,
|
|
texture: TextureId,
|
|
indices: Vec<u32>,
|
|
vertices: Vec<(Pos2, Pos2, Color32)>,
|
|
}
|
|
|
|
struct Capture {
|
|
image: RgbaImage,
|
|
meshes: Option<Vec<Mesh>>,
|
|
}
|
|
|
|
fn context(theme: Theme, scale: f32) -> Context {
|
|
let ctx = Context::default();
|
|
ctx.set_theme(theme.egui());
|
|
ctx.set_pixels_per_point(scale);
|
|
ctx.set_fonts(egui::FontDefinitions::empty());
|
|
ctx.all_styles_mut(|style| {
|
|
style.animation_time = 0.0;
|
|
style.visuals.text_cursor.blink = false;
|
|
style.visuals.disabled_alpha = 0.4;
|
|
});
|
|
ctx
|
|
}
|
|
|
|
fn raw_input(frame: usize, events: Vec<Event>) -> RawInput {
|
|
RawInput {
|
|
screen_rect: Some(Rect::from_min_size(Pos2::ZERO, CANVAS)),
|
|
time: Some(frame as f64 / 60.0),
|
|
events,
|
|
max_texture_side: Some(2048),
|
|
..Default::default()
|
|
}
|
|
}
|
|
|
|
fn background(ui: &mut Ui, theme: Theme) {
|
|
let screen = Rect::from_min_size(Pos2::ZERO, CANVAS);
|
|
ui.set_clip_rect(screen);
|
|
ui.painter().rect_filled(screen, 0.0, theme.surface());
|
|
}
|
|
|
|
fn finish_capture(renderer: &mut WgpuTestRenderer, ctx: &Context, output: &FullOutput) -> Capture {
|
|
let meshes = ctx
|
|
.tessellate(output.shapes.clone(), output.pixels_per_point)
|
|
.into_iter()
|
|
.map(|clipped| {
|
|
let egui::epaint::Primitive::Mesh(mesh) = clipped.primitive else { panic!("visual fixtures must not contain paint callbacks") };
|
|
Mesh {
|
|
clip: clipped.clip_rect,
|
|
texture: mesh.texture_id,
|
|
indices: mesh.indices,
|
|
vertices: mesh.vertices.into_iter().map(|vertex| (vertex.pos, vertex.uv, vertex.color)).collect(),
|
|
}
|
|
})
|
|
.collect();
|
|
let image = renderer.render(ctx, output).expect("offscreen renderer is required for the visual suite");
|
|
assert!(image.width() > 0 && image.height() > 0 && image.width() <= 256 && image.height() <= 144);
|
|
Capture { image, meshes: Some(meshes) }
|
|
}
|
|
|
|
fn capture(renderer: &mut WgpuTestRenderer, case: Case, reference: bool, mutation: Mutation) -> Capture {
|
|
let ctx = context(case.theme, case.scale);
|
|
let mut output = FullOutput::default();
|
|
let mut responses: Vec<Response> = Vec::new();
|
|
for frame in 0..4 {
|
|
let mut events = Vec::new();
|
|
if !reference && frame == 2 {
|
|
if case.state == State::Focus {
|
|
ctx.memory_mut(|memory| memory.request_focus(responses[0].id));
|
|
}
|
|
if case.state.pointer() {
|
|
let center = case.control_rect().center();
|
|
events.push(Event::PointerMoved(center));
|
|
if case.state.pressed() {
|
|
events.push(Event::PointerButton { pos: center, button: PointerButton::Primary, pressed: true, modifiers: Modifiers::NONE });
|
|
}
|
|
}
|
|
}
|
|
output = ctx.run_ui(raw_input(frame, events), |ui| {
|
|
background(ui, case.theme);
|
|
if reference {
|
|
fixtures::reference(ui, case);
|
|
} else {
|
|
responses = fixtures::actual(ui, case, mutation);
|
|
}
|
|
});
|
|
renderer.handle_delta(&mut output.textures_delta);
|
|
}
|
|
assert_eq!(output.pixels_per_point, case.scale);
|
|
if !reference {
|
|
let response = &responses[0];
|
|
assert_eq!(response.enabled(), case.state.enabled(), "{case:?}");
|
|
if case.state == State::Hover {
|
|
assert!(response.hovered(), "hover was not exercised: {case:?}");
|
|
}
|
|
if case.state.pressed() {
|
|
assert!(response.is_pointer_button_down_on(), "press was not exercised: {case:?}");
|
|
if case.component.is_split() {
|
|
assert!(response.dragged(), "divider drag was not exercised: {case:?}");
|
|
}
|
|
}
|
|
if case.state == State::Focus {
|
|
assert!(response.has_focus(), "focus was not exercised: {case:?}");
|
|
}
|
|
if case.state == State::Disabled {
|
|
assert!(!response.hovered() && !response.has_focus(), "disabled pointer input must remain inert: {case:?}");
|
|
}
|
|
}
|
|
finish_capture(renderer, &ctx, &output)
|
|
}
|
|
|
|
fn static_capture(renderer: &mut WgpuTestRenderer, theme: Theme, scale: f32, mut paint: impl FnMut(&mut Ui)) -> Capture {
|
|
let ctx = context(theme, scale);
|
|
let mut output = FullOutput::default();
|
|
for frame in 0..2 {
|
|
output = ctx.run_ui(raw_input(frame, vec![]), |ui| {
|
|
background(ui, theme);
|
|
paint(ui);
|
|
});
|
|
renderer.handle_delta(&mut output.textures_delta);
|
|
}
|
|
assert_eq!(output.pixels_per_point, scale);
|
|
finish_capture(renderer, &ctx, &output)
|
|
}
|
|
|
|
struct Artifacts {
|
|
directory: Option<PathBuf>,
|
|
rows: String,
|
|
}
|
|
|
|
impl Artifacts {
|
|
fn new(suite: &str) -> Self {
|
|
let directory = std::env::var_os("CRAFT_UI_VISUAL_DIR").map(|root| PathBuf::from(root).join(suite));
|
|
if let Some(directory) = &directory {
|
|
std::fs::create_dir_all(directory).unwrap();
|
|
}
|
|
Self { directory, rows: "case\twidth\theight\tchanged_pixels\tmesh_equal\texpected_change\n".into() }
|
|
}
|
|
|
|
fn record(&mut self, name: &str, before: &Capture, after: &Capture, expected_change: bool) -> usize {
|
|
assert_eq!(before.image.dimensions(), after.image.dimensions(), "{name}");
|
|
let mut changed = 0;
|
|
let mut difference = RgbaImage::new(before.image.width(), before.image.height());
|
|
for ((before, after), pixel) in before.image.pixels().zip(after.image.pixels()).zip(difference.pixels_mut()) {
|
|
if before != after {
|
|
changed += 1;
|
|
*pixel = Rgba([255, 0, 128, 255]);
|
|
}
|
|
}
|
|
let mesh_equal = match (&before.meshes, &after.meshes) {
|
|
(Some(before), Some(after)) => (before == after).to_string(),
|
|
(None, None) => "not_applicable".into(),
|
|
_ => panic!("both captures must have the same comparison scope"),
|
|
};
|
|
self.rows.push_str(&format!("{name}\t{}\t{}\t{changed}\t{mesh_equal}\t{expected_change}\n", before.image.width(), before.image.height()));
|
|
if let Some(directory) = &self.directory {
|
|
before.image.save(directory.join(format!("{name}-before.png"))).unwrap();
|
|
after.image.save(directory.join(format!("{name}-after.png"))).unwrap();
|
|
difference.save(directory.join(format!("{name}-difference.png"))).unwrap();
|
|
// Preserve completed rows even if a later assertion fails.
|
|
std::fs::write(directory.join("comparison.tsv"), &self.rows).unwrap();
|
|
}
|
|
changed
|
|
}
|
|
}
|
|
|
|
#[test]
|
|
fn rendered_controls_match_independent_reference_pixels_and_meshes() {
|
|
let mut renderer = WgpuTestRenderer::new();
|
|
let mut artifacts = Artifacts::new("controls");
|
|
let mut count = 0;
|
|
for component in Component::ALL {
|
|
for state in State::ALL {
|
|
if component.is_split() && state.selected() {
|
|
continue; // A resize handle has no selected state in its public contract.
|
|
}
|
|
for theme in [Theme::Light, Theme::Dark] {
|
|
for scale in [1.0, 1.5, 2.0] {
|
|
for compact in [false, true] {
|
|
let case = Case { component, state, theme, scale, compact };
|
|
let before = capture(&mut renderer, case, true, Mutation::None);
|
|
let after = capture(&mut renderer, case, false, Mutation::None);
|
|
let changed = artifacts.record(&case.name(), &before, &after, false);
|
|
assert_eq!(before.meshes, after.meshes, "reference mesh mismatch: {case:?}");
|
|
assert_eq!(changed, 0, "reference pixels changed: {case:?}");
|
|
count += 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
assert_eq!(count, 372);
|
|
eprintln!("{count} control before/after pairs matched exact RGBA pixels and tessellated meshes");
|
|
}
|
|
|
|
#[test]
|
|
fn visual_comparisons_detect_color_spacing_and_stroke_mutations() {
|
|
let mut renderer = WgpuTestRenderer::new();
|
|
let mut artifacts = Artifacts::new("negative-controls");
|
|
let mut count = 0;
|
|
for theme in [Theme::Light, Theme::Dark] {
|
|
for scale in [1.0, 1.5, 2.0] {
|
|
for compact in [false, true] {
|
|
let case = Case { component: Component::Button, state: State::Normal, theme, scale, compact };
|
|
let before = capture(&mut renderer, case, true, Mutation::None);
|
|
for mutation in [Mutation::Color, Mutation::Spacing, Mutation::Stroke] {
|
|
let after = capture(&mut renderer, case, false, mutation);
|
|
let changed = artifacts.record(&format!("{}-{mutation:?}", case.name()), &before, &after, true);
|
|
assert_ne!(before.meshes, after.meshes, "mesh comparison missed {mutation:?}: {case:?}");
|
|
assert!(changed > 0, "pixel comparison missed {mutation:?}: {case:?}");
|
|
count += 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
assert_eq!(count, 36);
|
|
eprintln!("{count} deliberate color/spacing/stroke changes were detected in both pixels and meshes");
|
|
}
|
|
|
|
#[test]
|
|
fn toolbar_fitting_matches_literal_group_and_overflow_positions() {
|
|
use craft_ui::buttons::IconButton;
|
|
use craft_ui::layout::fit_toolbar;
|
|
use egui::{Align, Layout, Stroke, StrokeKind, UiBuilder, pos2, vec2};
|
|
|
|
let mut renderer = WgpuTestRenderer::new();
|
|
let mut artifacts = Artifacts::new("toolbar");
|
|
let mut count = 0;
|
|
// Independently specified rectangles: three natural groups, one group + More, More only.
|
|
for (available, expected) in
|
|
[(112.0, vec![(12.0, 24.0), (40.0, 28.0), (72.0, 36.0)]), (64.0, vec![(12.0, 24.0), (40.0, 20.0)]), (20.0, vec![(12.0, 20.0)])]
|
|
{
|
|
for theme in [Theme::Light, Theme::Dark] {
|
|
for scale in [1.0, 1.5, 2.0] {
|
|
let p = theme.palette();
|
|
let before = static_capture(&mut renderer, theme, scale, |ui| {
|
|
for &(x, width) in &expected {
|
|
let rect = Rect::from_min_size(pos2(x, 12.0), vec2(width, 24.0));
|
|
ui.painter().rect_filled(rect, 3.0, p.normal);
|
|
ui.painter().rect_stroke(rect, 3.0, Stroke::new(1.0, p.border), StrokeKind::Inside);
|
|
fixtures::icon(ui.painter(), rect, p.icon, true);
|
|
}
|
|
});
|
|
let after = static_capture(&mut renderer, theme, scale, |ui| {
|
|
let fit = fit_toolbar(&[24.0, 28.0, 36.0], available, 4.0, 20.0).unwrap();
|
|
let style = fixtures::button_style(theme);
|
|
ui.scope_builder(
|
|
UiBuilder::new()
|
|
.max_rect(Rect::from_min_size(pos2(12.0, 12.0), vec2(available, 24.0)))
|
|
.layout(Layout::left_to_right(Align::Min)),
|
|
|ui| {
|
|
ui.spacing_mut().item_spacing.x = 4.0;
|
|
for &(_, width) in &fit.shown {
|
|
IconButton::new("Group", vec2(width, 24.0), &style)
|
|
.show(ui, |ui, rect, tint| fixtures::icon(ui.painter(), rect, tint, true));
|
|
}
|
|
if !fit.overflow.is_empty() {
|
|
IconButton::new("More", vec2(fit.overflow_width, 24.0), &style)
|
|
.show(ui, |ui, rect, tint| fixtures::icon(ui.painter(), rect, tint, true));
|
|
}
|
|
},
|
|
);
|
|
});
|
|
let name = format!("toolbar-{available}-{}-{scale}x", theme.name());
|
|
let changed = artifacts.record(&name, &before, &after, false);
|
|
assert_eq!(before.meshes, after.meshes, "{name}");
|
|
assert_eq!(changed, 0, "{name}");
|
|
count += 1;
|
|
}
|
|
}
|
|
}
|
|
assert_eq!(count, 18);
|
|
}
|
|
|
|
#[test]
|
|
fn widget_palette_renders_all_five_states_with_existing_borders_and_expansion() {
|
|
use craft_ui::theme::WidgetPalette;
|
|
use egui::{CornerRadius, Stroke, StrokeKind, pos2, vec2};
|
|
|
|
let mut renderer = WgpuTestRenderer::new();
|
|
let mut artifacts = Artifacts::new("widget-palette");
|
|
for theme in [Theme::Light, Theme::Dark] {
|
|
for scale in [1.0, 1.5, 2.0] {
|
|
for compact in [false, true] {
|
|
let p = theme.palette();
|
|
let fills = [p.normal, p.hovered, p.pressed, p.selected, theme.surface()];
|
|
let rect = |index| {
|
|
Rect::from_min_size(
|
|
pos2(12.0 + (index % 3) as f32 * 34.0, 12.0 + (index / 3) as f32 * 26.0),
|
|
if compact { vec2(20.0, 12.0) } else { vec2(26.0, 18.0) },
|
|
)
|
|
};
|
|
let borders = [Color32::RED, Color32::GREEN, Color32::BLUE, p.border, p.focus];
|
|
let before = static_capture(&mut renderer, theme, scale, |ui| {
|
|
for index in 0..5 {
|
|
let rect = rect(index).expand(if index % 2 == 0 { 0.0 } else { 0.5 });
|
|
ui.painter().rect_filled(rect, 2.0, fills[index]);
|
|
// A separate inset uses the weak fill, so omission of either fill is visible.
|
|
ui.painter().rect_filled(rect.shrink(3.0), 0.0, fills[index]);
|
|
ui.painter().rect_stroke(rect, 2.0, Stroke::new(1.0, borders[index]), StrokeKind::Inside);
|
|
ui.painter()
|
|
.line_segment([rect.left_center() + vec2(4.0, 0.0), rect.right_center() - vec2(4.0, 0.0)], Stroke::new(1.5, p.icon));
|
|
}
|
|
});
|
|
let after = static_capture(&mut renderer, theme, scale, |ui| {
|
|
let mut widgets = ui.visuals().widgets.clone();
|
|
for (index, widget) in
|
|
[&mut widgets.noninteractive, &mut widgets.inactive, &mut widgets.hovered, &mut widgets.active, &mut widgets.open]
|
|
.into_iter()
|
|
.enumerate()
|
|
{
|
|
widget.bg_stroke = Stroke::new(1.0, borders[index]);
|
|
widget.expansion = if index % 2 == 0 { 0.0 } else { 0.5 };
|
|
}
|
|
WidgetPalette { noninteractive: p.normal, inactive: p.hovered, hovered: p.pressed, active: p.selected, open: theme.surface() }
|
|
.apply_to(&mut widgets, CornerRadius::same(2), Stroke::new(1.5, p.icon));
|
|
for (index, widget) in
|
|
[widgets.noninteractive, widgets.inactive, widgets.hovered, widgets.active, widgets.open].iter().enumerate()
|
|
{
|
|
let rect = rect(index).expand(widget.expansion);
|
|
ui.painter().rect_filled(rect, widget.corner_radius, widget.bg_fill);
|
|
ui.painter().rect_filled(rect.shrink(3.0), 0.0, widget.weak_bg_fill);
|
|
ui.painter().rect_stroke(rect, widget.corner_radius, widget.bg_stroke, StrokeKind::Inside);
|
|
ui.painter().line_segment([rect.left_center() + vec2(4.0, 0.0), rect.right_center() - vec2(4.0, 0.0)], widget.fg_stroke);
|
|
}
|
|
});
|
|
let name = format!("palette-{}-{scale}x-{}", theme.name(), if compact { "compact" } else { "normal" });
|
|
let changed = artifacts.record(&name, &before, &after, false);
|
|
assert_eq!(before.meshes, after.meshes, "{name}");
|
|
assert_eq!(changed, 0, "{name}");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#[test]
|
|
fn svg_preparation_matches_literal_raster_references_at_all_scales() {
|
|
use craft_ui::icons::{SvgIconSet, SvgStyle};
|
|
use egui::{
|
|
ImageSource,
|
|
load::{Bytes, ImagePoll, SizeHint},
|
|
};
|
|
|
|
const SOURCE: &[u8] = br#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16"/><path d="M4 4L20 20"/></svg>"#;
|
|
const LIGHT: &[u8] = br##"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#0f172a" stroke-width="1.75"><rect x="4" y="4" width="16" height="16"/><path d="M4 4L20 20"/></svg>"##;
|
|
const DARK: &[u8] = br##"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#e2e8f0" stroke-width="1.75"><rect x="4" y="4" width="16" height="16"/><path d="M4 4L20 20"/></svg>"##;
|
|
fn raster(ctx: &Context, uri: &str, size: u32) -> Capture {
|
|
let ImagePoll::Ready { image } = ctx.try_load_image(uri, SizeHint::Size { width: size, height: size, maintain_aspect_ratio: true }).unwrap()
|
|
else {
|
|
panic!("compiled-in SVG must rasterize synchronously")
|
|
};
|
|
assert_eq!(image.size, [size as usize; 2]);
|
|
let image = RgbaImage::from_raw(size, size, image.pixels.iter().flat_map(|pixel| pixel.to_srgba_unmultiplied()).collect()).unwrap();
|
|
assert!(image.pixels().any(|pixel| pixel[3] != 0), "blank SVG is not a valid matching baseline");
|
|
Capture { image, meshes: None }
|
|
}
|
|
let mut artifacts = Artifacts::new("svg");
|
|
for (theme, color, literal) in [(Theme::Light, "#0f172a", LIGHT), (Theme::Dark, "#e2e8f0", DARK)] {
|
|
for (scale, numerator) in [(1.0, 2), (1.5, 3), (2.0, 4)] {
|
|
for logical_size in [12, 24] {
|
|
let ctx = Context::default();
|
|
egui_extras::install_image_loaders(&ctx);
|
|
ctx.include_bytes("bytes://literal-reference.svg", Bytes::Static(literal));
|
|
let icons =
|
|
SvgIconSet::new(&[("box", SOURCE)], SvgStyle { current_color: color, stroke_width: Some("1.75") }, "bytes://actual/", "box");
|
|
let ImageSource::Bytes { uri, bytes } = icons.source("box") else { panic!("catalog must return embedded bytes") };
|
|
ctx.include_bytes(uri.clone(), bytes);
|
|
let size = logical_size * numerator / 2;
|
|
let before = raster(&ctx, "bytes://literal-reference.svg", size);
|
|
let after = raster(&ctx, &uri, size);
|
|
let name = format!("svg-{}-{scale}x-{logical_size}pt", theme.name());
|
|
assert_eq!(artifacts.record(&name, &before, &after, false), 0, "{name}");
|
|
}
|
|
}
|
|
}
|
|
}
|