fix(textureatlas): Apply internal padding between images

chore(textureatlas): Refactor unit tests for visual output

packages/engine/Specs/Renderer/TextureAtlasSpec.js

@@ -1337,6 +1337,108 @@ describe("Scene/TextureAtlas", function () {
         ).contextToRender([0, 255, 0, 255]);
       });
 
+      it("adds custom padding with borderWidthInPixels", async function () {
+        atlas = new TextureAtlas({ borderWidthInPixels: 0 });
+        let indices = await addImages();
+
+        expect(drawAtlas(atlas, indices)).toBe(
+          `
+................
+................
+................
+................
+................
+................
+2222222222......
+2222222222......
+2222222222......
+2222222222......
+2222222222......
+2222222222......
+22222222220.....
+22222222220.....
+22222222220.....
+222222222201....
+          `.trim(),
+        );
+
+        atlas = new TextureAtlas({ borderWidthInPixels: 2 });
+        indices = await addImages();
+
+        expect(drawAtlas(atlas, indices)).toBe(
+          `
+................................
+................................
+................................
+................................
+..2222222222....................
+..2222222222....................
+..2222222222....................
+..2222222222..1.................
+..2222222222....................
+..2222222222....................
+..2222222222..0.................
+..2222222222..0.................
+..2222222222..0.................
+..2222222222..0.................
+................................
+................................
+          `.trim(),
+        );
+
+        atlas = new TextureAtlas({ borderWidthInPixels: 5 });
+        indices = await addImages();
+
+        expect(drawAtlas(atlas, indices)).toBe(
+          `
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+.....2222222222.................
+.....2222222222.................
+.....2222222222.................
+.....2222222222.................
+.....2222222222.................
+.....2222222222.................
+.....2222222222.....0...........
+.....2222222222.....0...........
+.....2222222222.....0...........
+.....2222222222.....0.....1.....
+................................
+................................
+................................
+................................
+................................
+          `.trim(),
+        );
+
+        async function addImages() {
+          const promise = Promise.all([
+            atlas.addImage(tallGreenGuid, tallGreenImage),
+            atlas.addImage(blueGuid, blueImage),
+            atlas.addImage(bigBlueGuid, bigBlueImage),
+          ]);
+
+          return pollWhilePromise(promise, () => {
+            atlas.update(scene.frameState.context);
+          });
+        }
+      });
+
       it("GUID changes when atlas texure is modified", async function () {
         atlas = new TextureAtlas();