Layout rounding debug example

Cargo.toml

@@ -3100,6 +3100,17 @@ description = "An example for CSS Grid layout"
 category = "UI (User Interface)"
 wasm = true
 
+[[example]]
+name = "layout_rounding_debug"
+path = "examples/ui/layout_rounding_debug.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.layout_rounding_debug]
+name = "layout_rounding_debug"
+description = "An example for debugging layout rounding errors"
+category = "UI (User Interface)"
+wasm = true
+
 [[example]]
 name = "scroll"
 path = "examples/ui/scroll.rs"

examples/README.md

@@ -526,6 +526,7 @@ Example | Description
 [UI Z-Index](../examples/ui/z_index.rs) | Demonstrates how to control the relative depth (z-position) of UI elements
 [Viewport Debug](../examples/ui/viewport_debug.rs) | An example for debugging viewport coordinates
 [Window Fallthrough](../examples/ui/window_fallthrough.rs) | Illustrates how to access `winit::window::Window`'s `hittest` functionality.
+[layout_rounding_debug](../examples/ui/layout_rounding_debug.rs) | An example for debugging layout rounding errors
 
 ## Window
 

examples/ui/layout_rounding_debug.rs

@@ -0,0 +1,56 @@
+//! Spawns a simple grid layout with nodes laid out covering a white background useful for catching layout rounding errors.
+//! Any white lines seen are gaps in the layout are caused by coordinate rounding bugs.
+
+use bevy::{
+    color::palettes::css::{DARK_BLUE, MAROON},
+    prelude::*,
+    ui::UiScale,
+    winit::WinitSettings,
+};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .insert_resource(WinitSettings::desktop_app())
+        .insert_resource(UiScale(1.5))
+        .add_systems(Startup, setup)
+        .run();
+}
+
+fn setup(mut commands: Commands) {
+    commands.spawn((Camera2d, UiAntiAlias::Off));
+
+    commands
+        .spawn((
+            Node {
+                display: Display::Grid,
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                grid_template_rows: vec![RepeatedGridTrack::fr(10, 1.)],
+                ..Default::default()
+            },
+            BackgroundColor(Color::WHITE),
+        ))
+        .with_children(|commands| {
+            for i in 2..12 {
+                commands
+                    .spawn(Node {
+                        display: Display::Grid,
+                        grid_template_columns: vec![RepeatedGridTrack::fr(i, 1.)],
+                        ..Default::default()
+                    })
+                    .with_children(|commands| {
+                        for _ in 0..i {
+                            commands.spawn((
+                                Node {
+                                    border: UiRect::all(Val::Px(5.)),
+                                    ..Default::default()
+                                },
+                                BackgroundColor(MAROON.into()),
+                                BorderColor(DARK_BLUE.into()),
+                            ));
+                        }
+                    });
+            }
+        });
+}