test(renderer): cover clamped alpha composition

Author: Fei-Away

macos/assets/renderer-inject.js

@@ -173,9 +173,9 @@
     if (!foreground) return background;
     const alpha = clamp(foreground.alpha ?? 1, 0, 1);
     return {
-      r: foreground.r * alpha + background.r * (1 - alpha),
-      g: foreground.g * alpha + background.g * (1 - alpha),
-      b: foreground.b * alpha + background.b * (1 - alpha),
+      r: clamp(foreground.r, 0, 255) * alpha + background.r * (1 - alpha),
+      g: clamp(foreground.g, 0, 255) * alpha + background.g * (1 - alpha),
+      b: clamp(foreground.b, 0, 255) * alpha + background.b * (1 - alpha),
     };
   };
 

runtime/renderer-inject.js

@@ -173,9 +173,9 @@
     if (!foreground) return background;
     const alpha = clamp(foreground.alpha ?? 1, 0, 1);
     return {
-      r: foreground.r * alpha + background.r * (1 - alpha),
-      g: foreground.g * alpha + background.g * (1 - alpha),
-      b: foreground.b * alpha + background.b * (1 - alpha),
+      r: clamp(foreground.r, 0, 255) * alpha + background.r * (1 - alpha),
+      g: clamp(foreground.g, 0, 255) * alpha + background.g * (1 - alpha),
+      b: clamp(foreground.b, 0, 255) * alpha + background.b * (1 - alpha),
     };
   };
 

tools/renderer-runtime.test.mjs

@@ -558,6 +558,7 @@ export async function runRendererRuntimeTest(assetRoot) {
     { accent: "#fff0", lightInk: "rgb(0 0 0)", darkInk: "rgb(255 255 255)" },
     { accent: "#00000000", lightInk: "rgb(0 0 0)", darkInk: "rgb(255 255 255)" },
     { accent: "rgba(255, 255, 255, 0.05)", lightInk: "rgb(0 0 0)", darkInk: "rgb(255 255 255)" },
+    { accent: "rgba(999, 999, 999, 0.1)", lightInk: "rgb(0 0 0)", darkInk: "rgb(255 255 255)" },
   ];
   for (const nativeAppearance of ["light", "dark"]) {
     for (const { accent, lightInk, darkInk } of contrastCases) {
@@ -577,6 +578,25 @@ export async function runRendererRuntimeTest(assetRoot) {
     }
   }
 
+  for (const nativeAppearance of ["light", "dark"]) {
+    const transparentSurfaces = makeFixture({ nativeAppearance });
+    vm.runInNewContext(transparentSurfaces.payloadFor({
+      appearance: "auto",
+      colorMode: "explicit",
+      explicitColorKeys: ["background", "panel", "accent"],
+      colors: {
+        background: "rgba(255, 255, 255, 0)",
+        panel: "#0000",
+        accent: "rgba(0, 0, 0, 0)",
+      },
+    }), transparentSurfaces.context);
+    assert.equal(
+      transparentSurfaces.rootStyle.values.get("--ds-on-accent"),
+      nativeAppearance === "light" ? "rgb(0 0 0)" : "rgb(255 255 255)",
+      `Transparent theme surfaces must fall back to the ${nativeAppearance} shell canvas`,
+    );
+  }
+
   const adaptiveAccent = makeFixture({ nativeAppearance: "dark" });
   vm.runInNewContext(adaptiveAccent.payloadFor({
     colorMode: "explicit",

windows/assets/renderer-inject.js

@@ -173,9 +173,9 @@
     if (!foreground) return background;
     const alpha = clamp(foreground.alpha ?? 1, 0, 1);
     return {
-      r: foreground.r * alpha + background.r * (1 - alpha),
-      g: foreground.g * alpha + background.g * (1 - alpha),
-      b: foreground.b * alpha + background.b * (1 - alpha),
+      r: clamp(foreground.r, 0, 255) * alpha + background.r * (1 - alpha),
+      g: clamp(foreground.g, 0, 255) * alpha + background.g * (1 - alpha),
+      b: clamp(foreground.b, 0, 255) * alpha + background.b * (1 - alpha),
     };
   };