From 30090d5f8dac90a85cba3e496d047c3402be0862 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Sat, 3 Sep 2022 17:46:43 +0900
Subject: [PATCH 1/2] fix: prevent error overlay style being overridden

---
 packages/vite/src/client/overlay.ts | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index f9a22b7db2c6b3..b5958d011f6978 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -2,7 +2,7 @@ import type { ErrorPayload } from 'types/hmrPayload'
 
 const template = /*html*/ `
 <style>
-:host {
+.backdrop {
   position: fixed;
   z-index: 99999;
   top: 0;
@@ -99,15 +99,17 @@ code {
   cursor: pointer;
 }
 </style>
-<div class="window">
-  <pre class="message"><span class="plugin"></span><span class="message-body"></span></pre>
-  <pre class="file"></pre>
-  <pre class="frame"></pre>
-  <pre class="stack"></pre>
-  <div class="tip">
-    Click outside or fix the code to dismiss.<br>
-    You can also disable this overlay by setting
-    <code>server.hmr.overlay</code> to <code>false</code> in <code>vite.config.js.</code>
+<div class="backdrop">
+  <div class="window">
+    <pre class="message"><span class="plugin"></span><span class="message-body"></span></pre>
+    <pre class="file"></pre>
+    <pre class="frame"></pre>
+    <pre class="stack"></pre>
+    <div class="tip">
+      Click outside or fix the code to dismiss.<br>
+      You can also disable this overlay by setting
+      <code>server.hmr.overlay</code> to <code>false</code> in <code>vite.config.js.</code>
+    </div>
   </div>
 </div>
 `

From 1d9619d51329d405fcea525bb5c0776142b3fba9 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Sat, 3 Sep 2022 18:09:12 +0900
Subject: [PATCH 2/2] test: fix playwright visible detection

---
 packages/vite/src/client/overlay.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index b5958d011f6978..e094f5664a5bb6 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -1,7 +1,16 @@
 import type { ErrorPayload } from 'types/hmrPayload'
 
+// set :host styles to make playwright detect the element as visible
 const template = /*html*/ `
 <style>
+:host {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .backdrop {
   position: fixed;
   z-index: 99999;