Rename "Color test" to "Rendering test", and restructure it slightly (#4298)

Put the pixel-alignment test first, and hide the color test under a
collapsing header.

<img width="743" alt="Screenshot 2024-04-01 at 13 01 43"
src="https://github.com/emilk/egui/assets/1148717/8e7108ab-63c8-470f-9c21-83181287969b">

crates/egui_demo_app/src/wrap_app.rs

@@ -79,15 +79,22 @@ impl eframe::App for ColorTestApp {
 #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
 enum Anchor {
     Demo,
+
     EasyMarkEditor,
+
     #[cfg(feature = "http")]
     Http,
+
     #[cfg(feature = "image_viewer")]
     ImageViewer,
+
     Clock,
+
     #[cfg(any(feature = "glow", feature = "wgpu"))]
     Custom3d,
-    Colors,
+
+    /// Rendering test
+    Rendering,
 }
 
 impl Anchor {
@@ -101,7 +108,7 @@ impl Anchor {
             Self::Clock,
             #[cfg(any(feature = "glow", feature = "wgpu"))]
             Self::Custom3d,
-            Self::Colors,
+            Self::Rendering,
         ]
     }
 }
@@ -147,7 +154,7 @@ pub struct State {
     #[cfg(feature = "image_viewer")]
     image_viewer: crate::apps::ImageViewer,
     clock: FractalClockApp,
-    color_test: ColorTestApp,
+    rendering_test: ColorTestApp,
 
     selected_anchor: Anchor,
     backend_panel: super::backend_panel::BackendPanel,
@@ -229,9 +236,9 @@ impl WrapApp {
         }
 
         vec.push((
-            "🎨 Color test",
+            "🎨 Rendering test",
-            Anchor::Colors,
+            Anchor::Rendering,
-            &mut self.state.color_test as &mut dyn eframe::App,
+            &mut self.state.rendering_test as &mut dyn eframe::App,
         ));
 
         vec.into_iter()

crates/egui_demo_lib/src/lib.rs

@@ -13,12 +13,12 @@
 #![cfg_attr(feature = "puffin", deny(unsafe_code))]
 #![cfg_attr(not(feature = "puffin"), forbid(unsafe_code))]
 
-mod color_test;
 mod demo;
 pub mod easy_mark;
+mod rendering_test;
 
-pub use color_test::ColorTest;
 pub use demo::{DemoWindows, WidgetGallery};
+pub use rendering_test::ColorTest;
 
 /// View some Rust code with syntax highlighting and selection.
 pub(crate) fn rust_view_ui(ui: &mut egui::Ui, code: &str) {

crates/egui_demo_lib/src/rendering_test.rs

@@ -31,17 +31,43 @@ impl Default for ColorTest {
 
 impl ColorTest {
     pub fn ui(&mut self, ui: &mut Ui) {
-        ui.set_max_width(680.0);
-
         ui.vertical_centered(|ui| {
             ui.add(crate::egui_github_link_file!());
         });
 
         ui.horizontal_wrapped(|ui|{
-            ui.label("This is made to test that the egui painter backend is set up correctly.");
+            ui.label("This is made to test that the egui rendering backend is set up correctly.");
             ui.add(egui::Label::new("❓").sense(egui::Sense::click()))
                 .on_hover_text("The texture sampling should be sRGB-aware, and every other color operation should be done in gamma-space (sRGB). All colors should use pre-multiplied alpha");
         });
+
+        ui.separator();
+
+        pixel_test(ui);
+
+        ui.separator();
+
+        ui.collapsing("Color test", |ui| {
+            self.color_test(ui);
+        });
+
+        ui.separator();
+
+        ui.heading("Text rendering");
+
+        text_on_bg(ui, Color32::from_gray(200), Color32::from_gray(230)); // gray on gray
+        text_on_bg(ui, Color32::from_gray(140), Color32::from_gray(28)); // dark mode normal text
+
+        // Matches Mac Font book (useful for testing):
+        text_on_bg(ui, Color32::from_gray(39), Color32::from_gray(255));
+        text_on_bg(ui, Color32::from_gray(220), Color32::from_gray(30));
+
+        ui.separator();
+
+        blending_and_feathering_test(ui);
+    }
+
+    fn color_test(&mut self, ui: &mut Ui) {
         ui.label("If the rendering is done right, all groups of gradients will look uniform.");
 
         ui.horizontal(|ui| {
@@ -134,24 +160,6 @@ impl ColorTest {
 
         ui.label("Linear interpolation (texture sampling):");
         self.show_gradients(ui, WHITE, (RED, GREEN), Interpolation::Linear);
-
-        ui.separator();
-
-        pixel_test(ui);
-
-        ui.separator();
-        ui.label("Testing text rendering:");
-
-        text_on_bg(ui, Color32::from_gray(200), Color32::from_gray(230)); // gray on gray
-        text_on_bg(ui, Color32::from_gray(140), Color32::from_gray(28)); // dark mode normal text
-
-        // Matches Mac Font book (useful for testing):
-        text_on_bg(ui, Color32::from_gray(39), Color32::from_gray(255));
-        text_on_bg(ui, Color32::from_gray(220), Color32::from_gray(30));
-
-        ui.separator();
-
-        blending_and_feathering_test(ui);
     }
 
     fn show_gradients(
@@ -385,8 +393,17 @@ impl TextureManager {
     }
 }
 
-fn pixel_test(ui: &mut Ui) {
+/// A visual test that the rendering is correctly aligned on the physical pixel grid.
-    ui.label("Each subsequent square should be one physical pixel larger than the previous. They should be exactly one physical pixel apart. They should be perfectly aligned to the pixel grid.");
+///
+/// Requires eyes and a magnifying glass to verify.
+pub fn pixel_test(ui: &mut Ui) {
+    ui.heading("Pixel alignment test");
+    ui.label("The first square should be exactly one physical pixel big.");
+    ui.label("They should be exactly one physical pixel apart.");
+    ui.label("Each subsequent square should be one physical pixel larger than the previous.");
+    ui.label("They should be perfectly aligned to the physical pixel grid.");
+    ui.label("If these squares are blurry, everything will be blurry, including text.");
+    ui.label("You might need a magnifying glass to check this test.");
 
     let color = if ui.style().visuals.dark_mode {
         egui::Color32::WHITE
@@ -395,7 +412,7 @@ fn pixel_test(ui: &mut Ui) {
     };
 
     let pixels_per_point = ui.ctx().pixels_per_point();
-    let num_squares: u32 = 8;
+    let num_squares = (pixels_per_point * 10.0).round().max(10.0) as u32;
     let size_pixels = vec2(
         ((num_squares + 1) * (num_squares + 2) / 2) as f32,
         num_squares as f32,
@@ -422,6 +439,10 @@ fn pixel_test(ui: &mut Ui) {
 }
 
 fn blending_and_feathering_test(ui: &mut Ui) {
+    ui.label("The left side shows how lines of different widths look.");
+    ui.label("The right side tests text rendering at different opacities and sizes.");
+    ui.label("The top and bottom images should look symmetrical in their intensities.");
+
     let size = vec2(512.0, 512.0);
     let (response, painter) = ui.allocate_painter(size, Sense::hover());
     let rect = response.rect;