fix: use local placeholder image in fast-ssr tests (#6856)

* use local placeholder image in fast-ssr tests

* Change files

change/@microsoft-fast-ssr-fcd8d776-ce14-4a57-a474-4e5fb4f1acc5.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "use local placeholder image in fast-ssr tests",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/web-components/fast-ssr/server/server.ts

@@ -1,7 +1,8 @@
-import { Readable } from "stream";
-import express, { Request, Response } from "express";
 import fs from "fs";
 import path from "path";
+import { Readable } from "stream";
+
+import express, { Request, Response } from "express";
 
 const __dirname = path.resolve(path.dirname(""));
 const PORT = 8080;
@@ -74,4 +75,7 @@ app.get("/fast-command-buffer.js", (req: Request, res: Response) =>
         res
     )
 );
+app.get("/placeholder.png", (req, res) =>
+    res.sendFile(path.resolve(__dirname, "./server/placeholder.png"))
+);
 app.listen(PORT);

packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html

@@ -141,7 +141,7 @@
                     border-radius: calc(var(--control-corner-radius) * 1px);
                     box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(0.11 * (2 - var(--background-luminance, 1)))), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(0.13 * (2 - var(--background-luminance, 1))));}"
                     ></fast-style>
-                    <img src="https://via.placeholder.com/300x200/414141" />
+                    <img src="/placeholder.png" />
                     <div
                         style="
                             padding: 0 10px 10px;
@@ -217,7 +217,7 @@
                 <template shadowroot="open">
                     <fast-command-buffer></fast-command-buffer>
                     <fast-style data-style-id="fast-card"></fast-style>
-                    <img src="https://via.placeholder.com/300x200/414141" />
+                    <img src="/placeholder.png" />
                     <div
                         style="
                             padding: 0 10px 10px;

packages/web-components/fast-ssr/src/styles/fast-style.fixture.html

@@ -138,7 +138,7 @@
                     border-radius: calc(var(--control-corner-radius) * 1px);
                     box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(0.11 * (2 - var(--background-luminance, 1)))), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(0.13 * (2 - var(--background-luminance, 1))));}"
                 ></fast-style>
-                <img src="https://via.placeholder.com/300x200/414141" />
+                <img src="/placeholder.png" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)">
                     <h2>Heading</h2>
                     <p>
@@ -199,7 +199,7 @@
         <fast-card style="width: 300px">
             <template shadowroot="open">
                 <fast-style style-id="fast-card"></fast-style>
-                <img src="https://via.placeholder.com/300x200/414141" />
+                <img src="/placeholder.png" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)">
                     <h2>Heading</h2>
                     <p>
@@ -223,7 +223,7 @@
         <fast-card style="width: 300px">
             <template shadowroot="open">
                 <fast-style style-id="fast-card"></fast-style>
-                <img src="https://via.placeholder.com/300x200/414141" />
+                <img src="/placeholder.png" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)">
                     <h2>Heading</h2>
                     <p>
@@ -247,7 +247,7 @@
         <fast-card style="width: 300px">
             <template shadowroot="open">
                 <fast-style style-id="fast-card"></fast-style>
-                <img src="https://via.placeholder.com/300x200/414141" />
+                <img src="/placeholder.png" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)">
                     <h2>Heading</h2>
                     <p>
@@ -271,7 +271,7 @@
         <fast-card style="width: 300px">
             <template shadowroot="open">
                 <fast-style style-id="fast-card"></fast-style>
-                <img src="https://via.placeholder.com/300x200/414141" />
+                <img src="/placeholder.png" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)">
                     <h2>Heading</h2>
                     <p>
@@ -295,7 +295,7 @@
         <fast-card style="width: 300px">
             <template shadowroot="open">
                 <fast-style style-id="fast-card"></fast-style>
-                <img src="https://via.placeholder.com/300x200/414141" />
+                <img src="/placeholder.png" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)">
                     <h2>Heading</h2>
                     <p>
@@ -319,7 +319,7 @@
         <fast-card style="width: 300px">
             <template shadowroot="open">
                 <fast-style style-id="fast-card"></fast-style>
-                <img src="https://via.placeholder.com/300x200/414141" />
+                <img src="/placeholder.png" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)">
                     <h2>Heading</h2>
                     <p>
@@ -343,7 +343,7 @@
         <fast-card style="width: 300px">
             <template shadowroot="open">
                 <fast-style style-id="fast-card"></fast-style>
-                <img src="https://via.placeholder.com/300x200/414141" />
+                <img src="/placeholder.png" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)">
                     <h2>Heading</h2>
                     <p>
@@ -367,7 +367,7 @@
         <fast-card style="width: 300px">
             <template shadowroot="open">
                 <fast-style style-id="fast-card"></fast-style>
-                <img src="https://via.placeholder.com/300x200/414141" />
+                <img src="/placeholder.png" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)">
                     <h2>Heading</h2>
                     <p>
@@ -391,7 +391,7 @@
         <fast-card style="width: 300px">
             <template shadowroot="open">
                 <fast-style style-id="fast-card"></fast-style>
-                <img src="https://via.placeholder.com/300x200/414141" />
+                <img src="/placeholder.png" />
                 <div style="padding: 0 10px 10px; color: var(--neutral-foreground-rest)">
                     <h2>Heading</h2>
                     <p>