diff --git a/.vdiff.json b/.vdiff.json
new file mode 100644
index 00000000..adbe97c5
--- /dev/null
+++ b/.vdiff.json
@@ -0,0 +1,16 @@
+{
+ "browsers": [
+ {
+ "name": "Chromium",
+ "version": 115
+ },
+ {
+ "name": "Firefox",
+ "version": 115
+ },
+ {
+ "name": "Webkit",
+ "version": 17
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/server/report/app.js b/src/server/report/app.js
index cc43e9d7..8abb6896 100644
--- a/src/server/report/app.js
+++ b/src/server/report/app.js
@@ -157,7 +157,7 @@ class App extends LitElement {
return html`
@@ -222,12 +222,29 @@ class App extends LitElement {
${ data.browsers.map(b => renderBrowser(b))}
` : nothing;
+ const browserDiffs = data.browsers.reduce((acc, b) => {
+ const previousVersion = b.previousVersion || 'unknown';
+ if (previousVersion === b.version) {
+ return acc;
+ }
+ return acc.push(html`
+
${b.name}: ${previousVersion} to ${b.version}
+ `) && acc;
+ }, []);
+ const browserDiffInfo = browserDiffs.length > 0 ? html`
+
+
Browser Version Changes
+
+
+ ` : nothing;
+
return html`
${browserFilter}
+ ${browserDiffInfo}
`;
}
diff --git a/src/server/report/common.js b/src/server/report/common.js
index abf12ec9..23aeca93 100644
--- a/src/server/report/common.js
+++ b/src/server/report/common.js
@@ -15,6 +15,24 @@ export const COMMON_STYLE = css`
outline: 2px solid #007bff;
outline-offset: 1px;
}
+ .browser-diff {
+ background-color: #fff9d6;
+ border: 1px solid #ffba59;
+ border-radius: 4px;
+ color: #6e7477;
+ padding: 5px;
+ }
+ .result-browser > .browser-diff {
+ text-align: end;
+ }
+ .browser-diff-title {
+ color: #c47400;
+ font-weight: bold;
+ }
+ .browser-diff ul {
+ margin: 5px 0 0 0;
+ padding-inline-start: 15px;
+ }
.empty {
align-items: center;
display: flex;
diff --git a/src/server/report/index.html b/src/server/report/index.html
index 2389b10f..2c1c6361 100644
--- a/src/server/report/index.html
+++ b/src/server/report/index.html
@@ -3,7 +3,7 @@
- Visual Diff Report
+ Visual-Diff Report