fix: css transparent background being lost (#32648)

* fix: css transparent background being lost

* fix: also call SetContentBackgroundColor initially

* spec: add a test for correct behavior

* chore: address feedback from review

Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com>

shell/browser/api/electron_api_browser_window.cc

@@ -373,8 +373,11 @@ void BrowserWindow::SetBackgroundColor(const std::string& color_name) {
   SkColor color = ParseHexColor(color_name);
   web_contents()->SetPageBaseBackgroundColor(color);
   auto* rwhv = web_contents()->GetRenderWidgetHostView();
-  if (rwhv)
+  if (rwhv) {
     rwhv->SetBackgroundColor(color);
+    static_cast<content::RenderWidgetHostViewBase*>(rwhv)
+        ->SetContentBackgroundColor(color);
+  }
   // Also update the web preferences object otherwise the view will be reset on
   // the next load URL call
   if (api_web_contents_) {

shell/browser/api/electron_api_web_contents.cc

@@ -599,6 +599,12 @@ bool IsDevToolsFileSystemAdded(content::WebContents* web_contents,
   return file_system_paths.find(file_system_path) != file_system_paths.end();
 }
 
+void SetBackgroundColor(content::RenderWidgetHostView* rwhv, SkColor color) {
+  rwhv->SetBackgroundColor(color);
+  static_cast<content::RenderWidgetHostViewBase*>(rwhv)
+      ->SetContentBackgroundColor(color);
+}
+
 }  // namespace
 
 #if BUILDFLAG(ENABLE_ELECTRON_EXTENSIONS)
@@ -1457,7 +1463,7 @@ void WebContents::HandleNewRenderFrame(
     absl::optional<SkColor> color =
         guest ? SK_ColorTRANSPARENT : web_preferences->GetBackgroundColor();
     web_contents()->SetPageBaseBackgroundColor(color);
-    rwhv->SetBackgroundColor(color.value_or(SK_ColorWHITE));
+    SetBackgroundColor(rwhv, color.value_or(SK_ColorWHITE));
   }
 
   if (!background_throttling_)
@@ -1473,6 +1479,15 @@ void WebContents::HandleNewRenderFrame(
     web_frame->Connect();
 }
 
+void WebContents::OnBackgroundColorChanged() {
+  absl::optional<SkColor> color = web_contents()->GetBackgroundColor();
+  if (color.has_value()) {
+    auto* const view = web_contents()->GetRenderWidgetHostView();
+    static_cast<content::RenderWidgetHostViewBase*>(view)
+        ->SetContentBackgroundColor(color.value());
+  }
+}
+
 void WebContents::RenderFrameCreated(
     content::RenderFrameHost* render_frame_host) {
   HandleNewRenderFrame(render_frame_host);
@@ -4033,7 +4048,7 @@ gin::Handle<WebContents> WebContents::CreateFromWebPreferences(
       // only set rwhv background color if a color exists
       auto* rwhv = web_contents->web_contents()->GetRenderWidgetHostView();
       if (rwhv && color.has_value())
-        rwhv->SetBackgroundColor(color.value());
+        SetBackgroundColor(rwhv, color.value());
     }
   } else {
     // Create one if not.

shell/browser/api/electron_api_web_contents.h

@@ -574,6 +574,7 @@ class WebContents : public ExclusiveAccessContext,
   // content::WebContentsObserver:
   void BeforeUnloadFired(bool proceed,
                          const base::TimeTicks& proceed_time) override;
+  void OnBackgroundColorChanged() override;
   void RenderFrameCreated(content::RenderFrameHost* render_frame_host) override;
   void RenderFrameDeleted(content::RenderFrameHost* render_frame_host) override;
   void RenderFrameHostChanged(content::RenderFrameHost* old_host,

spec-main/api-browser-window-spec.ts

@@ -1648,7 +1648,15 @@ describe('BrowserWindow module', () => {
   });
 
   ifdescribe(process.platform === 'darwin')('BrowserWindow.setVibrancy(type)', () => {
-    afterEach(closeAllWindows);
+    let appProcess: childProcess.ChildProcessWithoutNullStreams | undefined;
+
+    afterEach(() => {
+      if (appProcess && !appProcess.killed) {
+        appProcess.kill();
+        appProcess = undefined;
+      }
+      closeAllWindows();
+    });
 
     it('allows setting, changing, and removing the vibrancy', () => {
       const w = new BrowserWindow({ show: false });
@@ -1667,6 +1675,15 @@ describe('BrowserWindow module', () => {
         w.setVibrancy('i-am-not-a-valid-vibrancy-type' as any);
       }).to.not.throw();
     });
+
+    it('Allows setting a transparent window via CSS', async () => {
+      const appPath = path.join(__dirname, 'fixtures', 'apps', 'background-color-transparent');
+
+      appProcess = childProcess.spawn(process.execPath, [appPath]);
+
+      const [code] = await emittedOnce(appProcess, 'exit');
+      expect(code).to.equal(0);
+    });
   });
 
   ifdescribe(process.platform === 'darwin')('trafficLightPosition', () => {

spec-main/fixtures/apps/background-color-transparent/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>test-color-window</title>
+    <style>
+      body {
+        background: green;
+      }
+      </style>
+  </head>
+  <body id="body">
+    <script src="./renderer.js"></script>
+  </body>
+</html>

spec-main/fixtures/apps/background-color-transparent/main.js

@@ -0,0 +1,59 @@
+const { app, BrowserWindow, desktopCapturer, ipcMain } = require('electron');
+const getColors = require('get-image-colors');
+
+const colors = {};
+
+// Fetch the test window.
+const getWindow = async () => {
+  const sources = await desktopCapturer.getSources({ types: ['window'] });
+  const filtered = sources.filter(s => s.name === 'test-color-window');
+
+  if (filtered.length === 0) {
+    throw new Error('Could not find test window');
+  }
+
+  return filtered[0];
+};
+
+async function createWindow () {
+  const mainWindow = new BrowserWindow({
+    frame: false,
+    transparent: true,
+    vibrancy: 'under-window',
+    webPreferences: {
+      contextIsolation: false,
+      nodeIntegration: true
+    }
+  });
+
+  await mainWindow.loadFile('index.html');
+
+  // Get initial green background color.
+  const window = await getWindow();
+  const buf = window.thumbnail.toPNG();
+  const result = await getColors(buf, { count: 1, type: 'image/png' });
+  colors.green = result[0].hex();
+}
+
+ipcMain.on('set-transparent', async () => {
+  // Get updated background color.
+  const window = await getWindow();
+  const buf = window.thumbnail.toPNG();
+  const result = await getColors(buf, { count: 1, type: 'image/png' });
+  colors.transparent = result[0].hex();
+
+  const { green, transparent } = colors;
+  process.exit(green === transparent ? 1 : 0);
+});
+
+app.whenReady().then(() => {
+  createWindow();
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});

spec-main/fixtures/apps/background-color-transparent/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "background-color-transparent",
+  "main": "main.js"
+}

spec-main/fixtures/apps/background-color-transparent/renderer.js

@@ -0,0 +1,9 @@
+const { ipcRenderer } = require('electron');
+
+window.setTimeout(async (_) => {
+  document.body.style.background = 'transparent';
+
+  window.setTimeout(async (_) => {
+    ipcRenderer.send('set-transparent');
+  }, 2000);
+}, 3000);

spec-main/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "chai-as-promised": "^7.1.1",
     "dirty-chai": "^2.0.1",
+    "get-image-colors": "^4.0.0",
     "pdfjs-dist": "^2.2.228"
   }
 }