fix: use special img

sbb-design-systems · Jun 26, 2024 · f43db8d · f43db8d
1 parent 852087c
commit f43db8d
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git a/src/elements/core/testing/assets/placeholder-image.png b/src/elements/core/testing/assets/placeholder-image.png
diff --git a/src/elements/image/image.scss b/src/elements/image/image.scss
@@ -82,10 +82,10 @@
 .sbb-image__img {
   position: absolute;
   inset: 0;
-  opacity: 0;
+  opacity: 0.000001;
 
   :host([data-loaded]) & {
-    opacity: 1;
+    opacity: 0.999999;
   }
 }
 

diff --git a/src/elements/image/image.visual.spec.ts b/src/elements/image/image.visual.spec.ts
@@ -6,7 +6,7 @@ import { waitForImageReady } from '../core/testing.js';
 
 import './image.js';
 
-const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png');
+const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
 
 const aspectRatios = [
   '1-1',
@@ -44,7 +44,7 @@ describe(`sbb-image`, () => {
           html`<sbb-image
             image-src=${imageUrl}
             aspect-ratio="free"
-            style="width: 200px; height: 100px;"
+            style="--sbb-image-aspect-ratio: 10 / 1;"
           ></sbb-image>`,
         );
 

diff --git a/src/elements/lead-container/lead-container.visual.spec.ts b/src/elements/lead-container/lead-container.visual.spec.ts
@@ -15,8 +15,10 @@ import '../link/block-link/block-link.js';
 import '../title.js';
 import './lead-container.js';
 
-const leadImageUrl = import.meta.resolve('../core/testing/assets/lucerne.png');
-const leadImageBase64 = await loadAssetAsBase64(leadImageUrl);
+const leadImageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
+const leadImageBase64 = await loadAssetAsBase64(
+  import.meta.resolve('../core/testing/assets/lucerne.png'),
+);
 
 describe(`sbb-lead-container`, () => {
   const wrapperStyles = { backgroundColor: `var(--sbb-color-milk)`, padding: '0' };

diff --git a/src/elements/message/message.visual.spec.ts b/src/elements/message/message.visual.spec.ts
@@ -7,7 +7,7 @@ import './message.js';
 import '../image.js';
 import '../button/secondary-button.js';
 
-const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png');
+const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
 
 describe(`sbb-message`, () => {
   describeViewports({ viewports: ['zero', 'medium'] }, () => {