Merge pull request #682 from SixLabors/js/image-blending-tests

Add image blending tests to match the SVG spec examples

tests/ImageSharp.Tests/Drawing/DrawImageTest.cs

@@ -5,14 +5,14 @@ using System;
 using System.Numerics;
 using SixLabors.ImageSharp.PixelFormats;
 using SixLabors.ImageSharp.Processing;
+using SixLabors.ImageSharp.Processing.Processors.Transforms;
+using SixLabors.ImageSharp.Tests.TestUtilities.ImageComparison;
 using SixLabors.Primitives;
 using Xunit;
 
 namespace SixLabors.ImageSharp.Tests
 {
-    using SixLabors.ImageSharp.Processing;
-    using SixLabors.ImageSharp.Processing.Processors.Transforms;
-
+    [GroupOutput("Drawing")]
     public class DrawImageTest : FileTestBase
     {
         private const PixelTypes PixelTypes = Tests.PixelTypes.Rgba32;
@@ -41,11 +41,32 @@ namespace SixLabors.ImageSharp.Tests
             using (var blend = Image.Load<TPixel>(TestFile.Create(TestImages.Bmp.Car).Bytes))
             {
                 blend.Mutate(x => x.Resize(image.Width / 2, image.Height / 2));
-                image.Mutate(x => x.DrawImage(blend, new Point(image.Width / 4, image.Height / 4), mode, .75f) );
+                image.Mutate(x => x.DrawImage(blend, new Point(image.Width / 4, image.Height / 4), mode, .75f));
                 image.DebugSave(provider, new { mode });
             }
         }
 
+        [Theory]
+        [WithFile(TestImages.Png.Rainbow, PixelTypes, PixelColorBlendingMode.Normal)]
+        [WithFile(TestImages.Png.Rainbow, PixelTypes, PixelColorBlendingMode.Multiply)]
+        [WithFile(TestImages.Png.Rainbow, PixelTypes, PixelColorBlendingMode.Add)]
+        [WithFile(TestImages.Png.Rainbow, PixelTypes, PixelColorBlendingMode.Subtract)]
+        [WithFile(TestImages.Png.Rainbow, PixelTypes, PixelColorBlendingMode.Screen)]
+        [WithFile(TestImages.Png.Rainbow, PixelTypes, PixelColorBlendingMode.Darken)]
+        [WithFile(TestImages.Png.Rainbow, PixelTypes, PixelColorBlendingMode.Lighten)]
+        [WithFile(TestImages.Png.Rainbow, PixelTypes, PixelColorBlendingMode.Overlay)]
+        [WithFile(TestImages.Png.Rainbow, PixelTypes, PixelColorBlendingMode.HardLight)]
+        public void ImageBlendingMatchesSvgSpecExamples<TPixel>(TestImageProvider<TPixel> provider, PixelColorBlendingMode mode)
+            where TPixel : struct, IPixel<TPixel>
+        {
+            using (Image<TPixel> background = provider.GetImage())
+            using (var source = Image.Load<TPixel>(TestFile.Create(TestImages.Png.Ducky).Bytes))
+            {
+                background.Mutate(x => x.DrawImage(source, mode, 1F));
+                VerifyImage(provider, mode, background);
+            }
+        }
+
         [Theory]
         [WithFileCollection(nameof(TestFiles), PixelTypes, PixelColorBlendingMode.Normal)]
         public void ImageShouldDrawTransformedImage<TPixel>(TestImageProvider<TPixel> provider, PixelColorBlendingMode mode)
@@ -84,7 +105,7 @@ namespace SixLabors.ImageSharp.Tests
             {
                 overlay.Mutate(x => x.Fill(Rgba32.Black));
 
-                int xy = -25;
+                const int xy = -25;
                 Rgba32 backgroundPixel = background[0, 0];
                 Rgba32 overlayPixel = overlay[Math.Abs(xy) + 1, Math.Abs(xy) + 1];
 
@@ -106,7 +127,7 @@ namespace SixLabors.ImageSharp.Tests
             {
                 overlay.Mutate(x => x.Fill(Rgba32.Black));
 
-                int xy = 25;
+                const int xy = 25;
                 Rgba32 backgroundPixel = background[xy - 1, xy - 1];
                 Rgba32 overlayPixel = overlay[0, 0];
 
@@ -118,5 +139,25 @@ namespace SixLabors.ImageSharp.Tests
                 background.DebugSave(provider, testOutputDetails: "Positive");
             }
         }
+
+        private static void VerifyImage<TPixel>(
+            TestImageProvider<TPixel> provider,
+            PixelColorBlendingMode mode,
+            Image<TPixel> img)
+            where TPixel : struct, IPixel<TPixel>
+        {
+            img.DebugSave(
+                provider,
+                new { mode },
+                appendPixelTypeToFileName: false,
+                appendSourceFileOrDescription: false);
+
+            var comparer = ImageComparer.TolerantPercentage(0.01F, 3);
+            img.CompareFirstFrameToReferenceOutput(comparer,
+                provider,
+                new { mode },
+                appendPixelTypeToFileName: false,
+                appendSourceFileOrDescription: false);
+        }
     }
 }

tests/ImageSharp.Tests/TestImages.cs

@@ -68,6 +68,9 @@ namespace SixLabors.ImageSharp.Tests
             public const string Ratio1x4 = "Png/ratio-1x4.png";
             public const string Ratio4x1 = "Png/ratio-4x1.png";
 
+            public const string Ducky = "Png/ducky.png";
+            public const string Rainbow = "Png/rainbow.png";
+
             public static class Bad
             {
                 // Odd chunk lengths

tests/Images/External

@@ -1 +1 @@
-Subproject commit 6a43d335f216d6325a6a9fd8d35942ade12b7c7b
+Subproject commit fcf311bf15bea061e552e4cc357cafe2d4f4bd70

tests/Images/Input/Png/ducky.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0c2ea23adc981b8efba267c636b71190e74f798576467f26ed5cb4334a7ae421
+size 40960

tests/Images/Input/Png/rainbow.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:18993090b64a08939b4f8901e2b603bb8a49b053af7a0f327b4ae1205e64b987
+size 1447