From 1f6eabed66fe9ec1dfb1b99cf3da8b422a4f1e62 Mon Sep 17 00:00:00 2001 From: Vaivaswat Date: Mon, 17 Mar 2025 20:10:07 +0530 Subject: [PATCH 1/6] added docs for new visual tests --- contributor_docs/images/pixelmatch.png | Bin 0 -> 5563 bytes contributor_docs/images/pixelmatch2.png | Bin 0 -> 10858 bytes contributor_docs/unit_testing.md | 41 ++++++++++++++++++++++++ 3 files changed, 41 insertions(+) create mode 100644 contributor_docs/images/pixelmatch.png create mode 100644 contributor_docs/images/pixelmatch2.png diff --git a/contributor_docs/images/pixelmatch.png b/contributor_docs/images/pixelmatch.png new file mode 100644 index 0000000000000000000000000000000000000000..bba253dc9f1f499f2794a67c6a125b718477141a GIT binary patch literal 5563 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 ZI5zR};yQ6`g71OCNsB9p6^iKl{SPx|h2Q`H literal 0 HcmV?d00001 diff --git a/contributor_docs/unit_testing.md b/contributor_docs/unit_testing.md index 789ad7d035..37e4dca639 100644 --- a/contributor_docs/unit_testing.md +++ b/contributor_docs/unit_testing.md @@ -249,3 +249,44 @@ visualSuite('3D Model rendering', function() { }); ``` + +Different operating systems and browsers render graphics with subtle variations. These differences are normal and shouldn't cause tests to fail. +Common acceptable differences include: + +* Single-pixel shifts in line positions +* Slight variations in anti-aliasing +* Text rendering differences (especially font weight and kerning) +* Minor differences in curve smoothness + +For example, text rendered on macOS might appear slightly different from text rendered in a Linux CI environment. The same applies to thin lines, curves, and other graphical elements with anti-aliasing. +An example of this can be the below image which earlier caused tests to fail in CI because of different rendering environments. +![Example](./images/pixelmatch2.png) + +The p5.js visual testing system uses a sophisticated algorithm to distinguish between acceptable rendering variations and actual bugs: + +* Initial comparison - Compares pixels with a moderate threshold (0.5) to identify differences using [pixelmatch](https://github.com/mapbox/pixelmatch) library for pixel to pixel comparison. +* Cluster identification - Groups connected difference pixels using a Breadth-First Search (BFS) algorithm +* Pattern recognition - The algorithm specifically identifies: + + - "Line shift" clusters - differences that likely represent the same visual element shifted by 1px + - Isolated pixel differences (noise) + + +* Smart failure criteria - Applies different thresholds: + + - Ignores clusters smaller than 4 pixels + - Allows up to 40 total significant difference pixels + - Permits minor line shifts that are typical across platforms + +The below is the example of the tests that should fail: +![Example](./images/pixelmatch.png) + + + +This approach balances sensitivity to real bugs while tolerating platform-specific rendering variations. The algorithm uses these key parameters: +```js +const MIN_CLUSTER_SIZE = 4; // Minimum significant cluster size +const MAX_TOTAL_DIFF_PIXELS = 40; // Maximum allowed significant differences +``` +The algorithm identifies line shifts by analyzing the neighborhood of each difference pixel. If more than 80% of pixels in a cluster have ≤2 neighbors, it's classified as a line shift rather than a structural difference. +This intelligent comparison ensures tests don't fail due to minor rendering differences while still catching actual visual bugs. \ No newline at end of file From 1351993b0976ac9ed9d17febc50c30b000ac2f60 Mon Sep 17 00:00:00 2001 From: Vaivaswat Date: Mon, 17 Mar 2025 20:14:20 +0530 Subject: [PATCH 2/6] fixed spacing --- contributor_docs/unit_testing.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/contributor_docs/unit_testing.md b/contributor_docs/unit_testing.md index 37e4dca639..78e6b8c15e 100644 --- a/contributor_docs/unit_testing.md +++ b/contributor_docs/unit_testing.md @@ -260,6 +260,7 @@ Common acceptable differences include: For example, text rendered on macOS might appear slightly different from text rendered in a Linux CI environment. The same applies to thin lines, curves, and other graphical elements with anti-aliasing. An example of this can be the below image which earlier caused tests to fail in CI because of different rendering environments. + ![Example](./images/pixelmatch2.png) The p5.js visual testing system uses a sophisticated algorithm to distinguish between acceptable rendering variations and actual bugs: @@ -279,6 +280,7 @@ The p5.js visual testing system uses a sophisticated algorithm to distinguish be - Permits minor line shifts that are typical across platforms The below is the example of the tests that should fail: + ![Example](./images/pixelmatch.png) From 67d98c0ac829a0acc1ffb3d17279e6fbbba4cc4a Mon Sep 17 00:00:00 2001 From: Vaivaswat Date: Fri, 21 Mar 2025 01:54:39 +0530 Subject: [PATCH 3/6] some changes --- contributor_docs/unit_testing.md | 65 ++++++++++++-------------------- 1 file changed, 25 insertions(+), 40 deletions(-) diff --git a/contributor_docs/unit_testing.md b/contributor_docs/unit_testing.md index 78e6b8c15e..cbe670d2e3 100644 --- a/contributor_docs/unit_testing.md +++ b/contributor_docs/unit_testing.md @@ -249,46 +249,31 @@ visualSuite('3D Model rendering', function() { }); ``` +It's important to note that the improved algorithm described above allows tests with acceptable platform-specific variations to pass correctly. Tests that previously failed due to minor rendering differences (like anti-aliasing variations or subtle text rendering differences) will now pass as they should, while still detecting actual rendering bugs. +For example, a test showing text rendering that previously failed on CI (despite looking correct visually) will now pass with the improved algorithm, as it can distinguish between meaningful differences and acceptable platform-specific rendering variations. This makes the test suite more reliable and reduces false failures that require manual investigation. -Different operating systems and browsers render graphics with subtle variations. These differences are normal and shouldn't cause tests to fail. -Common acceptable differences include: +SOME BEST PRACTISES FOR WRITING VISUAL TESTS: -* Single-pixel shifts in line positions -* Slight variations in anti-aliasing -* Text rendering differences (especially font weight and kerning) -* Minor differences in curve smoothness +When creating visual tests for p5.js, following these practices will help ensure reliable and efficient tests: -For example, text rendered on macOS might appear slightly different from text rendered in a Linux CI environment. The same applies to thin lines, curves, and other graphical elements with anti-aliasing. -An example of this can be the below image which earlier caused tests to fail in CI because of different rendering environments. - -![Example](./images/pixelmatch2.png) - -The p5.js visual testing system uses a sophisticated algorithm to distinguish between acceptable rendering variations and actual bugs: - -* Initial comparison - Compares pixels with a moderate threshold (0.5) to identify differences using [pixelmatch](https://github.com/mapbox/pixelmatch) library for pixel to pixel comparison. -* Cluster identification - Groups connected difference pixels using a Breadth-First Search (BFS) algorithm -* Pattern recognition - The algorithm specifically identifies: - - - "Line shift" clusters - differences that likely represent the same visual element shifted by 1px - - Isolated pixel differences (noise) - - -* Smart failure criteria - Applies different thresholds: - - - Ignores clusters smaller than 4 pixels - - Allows up to 40 total significant difference pixels - - Permits minor line shifts that are typical across platforms - -The below is the example of the tests that should fail: - -![Example](./images/pixelmatch.png) - - - -This approach balances sensitivity to real bugs while tolerating platform-specific rendering variations. The algorithm uses these key parameters: -```js -const MIN_CLUSTER_SIZE = 4; // Minimum significant cluster size -const MAX_TOTAL_DIFF_PIXELS = 40; // Maximum allowed significant differences -``` -The algorithm identifies line shifts by analyzing the neighborhood of each difference pixel. If more than 80% of pixels in a cluster have ≤2 neighbors, it's classified as a line shift rather than a structural difference. -This intelligent comparison ensures tests don't fail due to minor rendering differences while still catching actual visual bugs. \ No newline at end of file +* Keep canvas sizes small - Use dimensions close to 50x50 pixels whenever possible. The test system resizes images for efficiency before comparison, and smaller canvases result in faster tests, especially on CI environments. +* Focus on visible details - At small canvas sizes, intricate details may be hard to distinguish. Design your test sketches to clearly demonstrate the feature being tested with elements that are visible at the reduced size. +* Use multiple screenshots per test - Instead of cramming many variants into a single screenshot, call screenshot() multiple times within a test: + ```js + visualTest('stroke weight variations', function(p5, screenshot) { + p5.createCanvas(50, 50); + + // Test thin stroke + p5.background(200); + p5.stroke(0); + p5.strokeWeight(1); + p5.line(10, 25, 40, 25); + screenshot('thin-line'); + + // Test thick stroke + p5.background(200); + p5.strokeWeight(5); + p5.line(10, 25, 40, 25); + screenshot('thick-line'); + }); + ``` From 167635781c0a5a49eb317c1576958a05971a8c24 Mon Sep 17 00:00:00 2001 From: Vaivaswat Date: Fri, 21 Mar 2025 01:56:40 +0530 Subject: [PATCH 4/6] Revert "some changes" This reverts commit 67d98c0ac829a0acc1ffb3d17279e6fbbba4cc4a. --- contributor_docs/unit_testing.md | 65 ++++++++++++++++++++------------ 1 file changed, 40 insertions(+), 25 deletions(-) diff --git a/contributor_docs/unit_testing.md b/contributor_docs/unit_testing.md index cbe670d2e3..78e6b8c15e 100644 --- a/contributor_docs/unit_testing.md +++ b/contributor_docs/unit_testing.md @@ -249,31 +249,46 @@ visualSuite('3D Model rendering', function() { }); ``` -It's important to note that the improved algorithm described above allows tests with acceptable platform-specific variations to pass correctly. Tests that previously failed due to minor rendering differences (like anti-aliasing variations or subtle text rendering differences) will now pass as they should, while still detecting actual rendering bugs. -For example, a test showing text rendering that previously failed on CI (despite looking correct visually) will now pass with the improved algorithm, as it can distinguish between meaningful differences and acceptable platform-specific rendering variations. This makes the test suite more reliable and reduces false failures that require manual investigation. -SOME BEST PRACTISES FOR WRITING VISUAL TESTS: +Different operating systems and browsers render graphics with subtle variations. These differences are normal and shouldn't cause tests to fail. +Common acceptable differences include: -When creating visual tests for p5.js, following these practices will help ensure reliable and efficient tests: +* Single-pixel shifts in line positions +* Slight variations in anti-aliasing +* Text rendering differences (especially font weight and kerning) +* Minor differences in curve smoothness -* Keep canvas sizes small - Use dimensions close to 50x50 pixels whenever possible. The test system resizes images for efficiency before comparison, and smaller canvases result in faster tests, especially on CI environments. -* Focus on visible details - At small canvas sizes, intricate details may be hard to distinguish. Design your test sketches to clearly demonstrate the feature being tested with elements that are visible at the reduced size. -* Use multiple screenshots per test - Instead of cramming many variants into a single screenshot, call screenshot() multiple times within a test: - ```js - visualTest('stroke weight variations', function(p5, screenshot) { - p5.createCanvas(50, 50); - - // Test thin stroke - p5.background(200); - p5.stroke(0); - p5.strokeWeight(1); - p5.line(10, 25, 40, 25); - screenshot('thin-line'); - - // Test thick stroke - p5.background(200); - p5.strokeWeight(5); - p5.line(10, 25, 40, 25); - screenshot('thick-line'); - }); - ``` +For example, text rendered on macOS might appear slightly different from text rendered in a Linux CI environment. The same applies to thin lines, curves, and other graphical elements with anti-aliasing. +An example of this can be the below image which earlier caused tests to fail in CI because of different rendering environments. + +![Example](./images/pixelmatch2.png) + +The p5.js visual testing system uses a sophisticated algorithm to distinguish between acceptable rendering variations and actual bugs: + +* Initial comparison - Compares pixels with a moderate threshold (0.5) to identify differences using [pixelmatch](https://github.com/mapbox/pixelmatch) library for pixel to pixel comparison. +* Cluster identification - Groups connected difference pixels using a Breadth-First Search (BFS) algorithm +* Pattern recognition - The algorithm specifically identifies: + + - "Line shift" clusters - differences that likely represent the same visual element shifted by 1px + - Isolated pixel differences (noise) + + +* Smart failure criteria - Applies different thresholds: + + - Ignores clusters smaller than 4 pixels + - Allows up to 40 total significant difference pixels + - Permits minor line shifts that are typical across platforms + +The below is the example of the tests that should fail: + +![Example](./images/pixelmatch.png) + + + +This approach balances sensitivity to real bugs while tolerating platform-specific rendering variations. The algorithm uses these key parameters: +```js +const MIN_CLUSTER_SIZE = 4; // Minimum significant cluster size +const MAX_TOTAL_DIFF_PIXELS = 40; // Maximum allowed significant differences +``` +The algorithm identifies line shifts by analyzing the neighborhood of each difference pixel. If more than 80% of pixels in a cluster have ≤2 neighbors, it's classified as a line shift rather than a structural difference. +This intelligent comparison ensures tests don't fail due to minor rendering differences while still catching actual visual bugs. \ No newline at end of file From 76f30b068c69448ffa8d2a3a23639d94d63dbb1f Mon Sep 17 00:00:00 2001 From: Vaivaswat Date: Fri, 21 Mar 2025 02:02:10 +0530 Subject: [PATCH 5/6] some changes returns --- contributor_docs/unit_testing.md | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/contributor_docs/unit_testing.md b/contributor_docs/unit_testing.md index 78e6b8c15e..a1b26df2e8 100644 --- a/contributor_docs/unit_testing.md +++ b/contributor_docs/unit_testing.md @@ -291,4 +291,33 @@ const MIN_CLUSTER_SIZE = 4; // Minimum significant cluster size const MAX_TOTAL_DIFF_PIXELS = 40; // Maximum allowed significant differences ``` The algorithm identifies line shifts by analyzing the neighborhood of each difference pixel. If more than 80% of pixels in a cluster have ≤2 neighbors, it's classified as a line shift rather than a structural difference. -This intelligent comparison ensures tests don't fail due to minor rendering differences while still catching actual visual bugs. \ No newline at end of file +This intelligent comparison ensures tests don't fail due to minor rendering differences while still catching actual visual bugs. + +It's important to note that the improved algorithm described above allows tests with acceptable platform-specific variations to pass correctly. Tests that previously failed due to minor rendering differences (like anti-aliasing variations or subtle text rendering differences) will now pass as they should, while still detecting actual rendering bugs. +For example, a test showing text rendering that previously failed on CI (despite looking correct visually) will now pass with the improved algorithm, as it can distinguish between meaningful differences and acceptable platform-specific rendering variations. This makes the test suite more reliable and reduces false failures that require manual investigation. + +SOME BEST PRACTISES FOR WRITING VISUAL TESTS: + +When creating visual tests for p5.js, following these practices will help ensure reliable and efficient tests: + +* Keep canvas sizes small - Use dimensions close to 50x50 pixels whenever possible. The test system resizes images for efficiency before comparison, and smaller canvases result in faster tests, especially on CI environments. +* Focus on visible details - At small canvas sizes, intricate details may be hard to distinguish. Design your test sketches to clearly demonstrate the feature being tested with elements that are visible at the reduced size. +* Use multiple screenshots per test - Instead of cramming many variants into a single screenshot, call screenshot() multiple times within a test: + ```js + visualTest('stroke weight variations', function(p5, screenshot) { + p5.createCanvas(50, 50); + + // Test thin stroke + p5.background(200); + p5.stroke(0); + p5.strokeWeight(1); + p5.line(10, 25, 40, 25); + screenshot('thin-line'); + + // Test thick stroke + p5.background(200); + p5.strokeWeight(5); + p5.line(10, 25, 40, 25); + screenshot('thick-line'); + }); + ``` \ No newline at end of file From ebb254e2ff65cf2941e6655e600b1caf36c5ba3b Mon Sep 17 00:00:00 2001 From: Vaivaswat Date: Fri, 28 Mar 2025 00:38:48 +0530 Subject: [PATCH 6/6] small changes --- contributor_docs/unit_testing.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/contributor_docs/unit_testing.md b/contributor_docs/unit_testing.md index a1b26df2e8..869c36daa4 100644 --- a/contributor_docs/unit_testing.md +++ b/contributor_docs/unit_testing.md @@ -296,7 +296,7 @@ This intelligent comparison ensures tests don't fail due to minor rendering diff It's important to note that the improved algorithm described above allows tests with acceptable platform-specific variations to pass correctly. Tests that previously failed due to minor rendering differences (like anti-aliasing variations or subtle text rendering differences) will now pass as they should, while still detecting actual rendering bugs. For example, a test showing text rendering that previously failed on CI (despite looking correct visually) will now pass with the improved algorithm, as it can distinguish between meaningful differences and acceptable platform-specific rendering variations. This makes the test suite more reliable and reduces false failures that require manual investigation. -SOME BEST PRACTISES FOR WRITING VISUAL TESTS: +### Some best practices for writing visual tests When creating visual tests for p5.js, following these practices will help ensure reliable and efficient tests: @@ -312,12 +312,12 @@ When creating visual tests for p5.js, following these practices will help ensure p5.stroke(0); p5.strokeWeight(1); p5.line(10, 25, 40, 25); - screenshot('thin-line'); + screenshot(); // Screenshot with thin lines // Test thick stroke p5.background(200); p5.strokeWeight(5); p5.line(10, 25, 40, 25); - screenshot('thick-line'); + screenshot(); // Screenshot with thick lines }); ``` \ No newline at end of file