test: fix for canvas border on safari

thenick775 · Jan 16, 2025 · 7fdc5e3 · 7fdc5e3
1 parent a999e92
commit 7fdc5e3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 16 deletions.
diff --git a/gbajs3/src/components/screen/__snapshots__/screen.spec.tsx.snap b/gbajs3/src/components/screen/__snapshots__/screen.spec.tsx.snap
@@ -23,6 +23,19 @@ exports[`<Screen /> > renders with default desktop position and size 1`] = `
   height: calc(100dvw * 2 / 3);
 }
 
+.c0::after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  margin: 2px;
+  pointer-events: none;
+  border: 2px dashed #1c76fd;
+  visibility: hidden;
+}
+
 @media only screen and (min-width: 600px) {
   .c0 {
     width: min(       calc(100dvw - 285px),       calc(85dvh * 3 / 2)     );
@@ -75,6 +88,19 @@ exports[`<Screen /> > renders with default mobile position and size 1`] = `
   height: calc(100dvw * 2 / 3);
 }
 
+.c0::after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  margin: 2px;
+  pointer-events: none;
+  border: 2px dashed #1c76fd;
+  visibility: hidden;
+}
+
 @media only screen and (min-width: 600px) {
   .c0 {
     width: min(       calc(100dvw - 285px),       calc(85dvh * 3 / 2)     );

diff --git a/gbajs3/src/components/screen/screen.tsx b/gbajs3/src/components/screen/screen.tsx
@@ -13,14 +13,10 @@ import {
 import { NavigationMenuWidth } from '../navigation-menu/consts.tsx';
 import { GripperHandle } from '../shared/gripper-handle.tsx';
 
-type RenderCanvasProps = {
-  $areItemsDraggable: boolean;
-};
-
 const defaultGBACanvasWidth = 240;
 const defaultGBACanvasHeight = 160;
 
-const RenderCanvas = styled.canvas<RenderCanvasProps>`
+const RenderCanvas = styled.canvas`
   background-color: ${({ theme }) => theme.pureBlack};
   image-rendering: -webkit-optimize-contrast;
   image-rendering: -moz-crisp-edges;
@@ -33,18 +29,9 @@ const RenderCanvas = styled.canvas<RenderCanvasProps>`
   max-width: 100%;
   object-fit: contain;
   image-rendering: pixelated;
-
-  ${({ $areItemsDraggable = false, theme }) =>
-    $areItemsDraggable &&
-    `
-    outline-color: ${theme.gbaThemeBlue};
-    outline-style: dashed;
-    outline-width: 2px;
-    outline-offset: -2px;
-  `}
 `;
 
-const ScreenWrapper = styled(Rnd)<RndProps>`
+const ScreenWrapper = styled(Rnd)<RndProps & { $areItemsDraggable: boolean }>`
   background-color: ${({ theme }) => theme.pureBlack};
   overflow: visible;
   width: 100dvw;
@@ -62,6 +49,20 @@ const ScreenWrapper = styled(Rnd)<RndProps>`
     width: calc(100dvh * (3 / 2));
     height: 100dvh;
   }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    margin: 2px;
+    pointer-events: none;
+    border: 2px dashed ${({ theme }) => theme.gbaThemeBlue};
+    visibility: ${({ $areItemsDraggable }) =>
+      $areItemsDraggable ? 'visible' : 'hidden'};
+  }
 `;
 
 // overrides rnd styles to fallback to css
@@ -163,13 +164,13 @@ export const Screen = () => {
           position: { ...position }
         });
       }}
+      $areItemsDraggable={areItemsDraggable}
     >
       <RenderCanvas
         data-testid="screen-wrapper:render-canvas"
         ref={refSetCanvas}
         width={defaultGBACanvasWidth}
         height={defaultGBACanvasHeight}
-        $areItemsDraggable={areItemsDraggable}
       />
     </ScreenWrapper>
   );