fix(browser): mask unused PNG transparency key bits (morluto#9890)

Author: morluto

src/browser/PngVisualDiff.test.ts

@@ -127,16 +127,16 @@ describe("PNG visual diff", () => {
     });
   });
 
-  it("keeps 8-bit samples opaque when a 16-bit transparency key exceeds 255", () => {
+  it("masks unused transparency-key bits before comparing 8-bit samples", () => {
     const key = Buffer.alloc(6);
     key.writeUInt16BE(266, 0);
-    key.writeUInt16BE(20, 2);
-    key.writeUInt16BE(30, 4);
+    key.writeUInt16BE(0xfe14, 2);
+    key.writeUInt16BE(0xff1e, 4);
     const rgb = transparencyArtifact(2, key, [10, 20, 30]);
     const result = comparePngScreenshots(
       compareWebScreenshotsInputSchema.parse({
         before: rgb,
-        after: artifact(1, 1, [10, 20, 30, 255]),
+        after: artifact(1, 1, [10, 20, 30, 0]),
       }),
     );
     expect(result).toMatchObject({ status: "identical", changed_pixels: 0 });

src/browser/PngVisualDiff.ts

@@ -162,11 +162,12 @@ const parsePng = (
         throw new TypeError("Invalid PNG transparency order");
       sawTransparency = true;
       if (header.colorType === 2 && data.length === 6) {
+        const sampleMask = (1 << header.bitDepth) - 1;
         transparentColor = [
           data.readUInt16BE(0),
           data.readUInt16BE(2),
           data.readUInt16BE(4),
-        ];
+        ].map((value) => value & sampleMask);
       } else if (
         (header.colorType === 0 && data.length === 2) ||
         (header.colorType === 3 &&
@@ -459,7 +460,6 @@ const expandRgba = (
     rgba[target] = decoded[source] ?? 0;
     rgba[target + 1] = decoded[source + 1] ?? 0;
     rgba[target + 2] = decoded[source + 2] ?? 0;
-    // PNG tRNS keys are 16-bit values; values above 255 cannot match 8-bit samples.
     rgba[target + 3] =
       transparentColor !== undefined &&
       transparentColor.every(