diff --git a/src/server/report/test-result.js b/src/server/report/test-result.js
deleted file mode 100644
index 8f085d0c..00000000
--- a/src/server/report/test-result.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { FULL_MODE, LAYOUTS } from './common.js';
-import data from './data.js';
-
-class TestResult extends LitElement {
-	static properties = {
-		browser: { type: String },
-		fullMode: { attribute: 'full-mode', type: String },
-		layout: { type: String },
-		file: { type: String },
-		showOverlay: { attribute: 'show-overlay', type: Boolean },
-		test: { type: String },
-	};
-	static styles = [css`
-		:host {
-			display: block;
-			padding: 20px;
-		}
-		.split {
-			flex-direction: row;
-			flex-wrap: nowrap;
-			display: flex;
-			gap: 10px;
-		}
-		.split > div {
-			flex: 0 1 auto;
-		}
-		img {
-			max-width: 100%;
-		}
-		.diff-container {
-			background: repeating-conic-gradient(#cdd5dc 0% 25%, #ffffff 0% 50%) 50% / 20px 20px;
-			background-position: 0 0;
-			border: 1px solid #cdd5dc;
-			display: inline-block;
-			line-height: 0;
-		}
-		.overlay-container {
-			position: relative;
-		}
-		.overlay {
-			background: hsla(0,0%,100%,.8);
-			position: absolute;
-			top: 0;
-			left: 0;
-		}
-		.no-changes {
-			border: 1px solid #cdd5dc;
-			padding: 20px;
-		}
-	`];
-	render() {
-
-		const resultData = this._fetchData();
-		if (!resultData) return nothing;
-
-		return html`
-			${this._renderBody(resultData)}
-		`;
-
-	}
-	_fetchData() {
-
-		const fileData = data.files.find(f => f.name === this.file);
-		if (!fileData) return {};
-
-		const testData = fileData.tests.find(t => t.name === this.test);
-		if (!testData) return {};
-
-		const resultData = testData.results.find(r => r.name === this.browser);
-		if (!resultData) return {};
-
-		const browserData = data.browsers.find(b => b.name === this.browser);
-		if (!browserData) return {};
-
-		return resultData;
-
-	}
-	_renderBody(resultData) {
-
-		if (!resultData.passed && resultData.info === undefined) {
-			return html`
-				<p>An error occurred that prevented a visual-diff snapshot from being taken:</p>
-				<pre>${resultData.error}</pre>
-			`;
-		}
-
-		const noChanges = html`<div class="no-changes">No changes</div>`;
-		const goldenImage = html`<img src="../${resultData.info.golden.path}" loading="lazy" alt="">`;
-		const newImage = html`<img src="../${resultData.info.new.path}" loading="lazy" alt="">`;
-
-		const overlay = (this.showOverlay && !resultData.passed) ?
-			html`<div class="overlay"><img src="../${resultData.info.diff}" loading="lazy" alt=""></div>` : nothing;
-
-		if (this.layout === LAYOUTS.SPLIT.value) {
-			const g = html`<div class="diff-container">${goldenImage}</div>`;
-			return html`
-				<div class="split">
-					${ resultData.passed ? noChanges : g }
-					<div class="diff-container overlay-container">${newImage}${overlay}</div>
-				</div>`;
-		} else if (this.layout === LAYOUTS.FULL.value) {
-			return html`
-				<div>
-					<div class="diff-container overlay-container">
-						${(this.fullMode === FULL_MODE.GOLDEN.value) ? goldenImage : newImage}
-						${overlay}
-					</div>
-				</div>`;
-		}
-
-	}
-}
-
-customElements.define('d2l-vdiff-report-test-result', TestResult);
diff --git a/src/server/report/test.js b/src/server/report/test.js
index 25cedd06..a479ef94 100644
--- a/src/server/report/test.js
+++ b/src/server/report/test.js
@@ -1,5 +1,4 @@
 import './button.js';
-import './test-result.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { FULL_MODE, getId, LAYOUTS } from './common.js';
 import { ICON_BROWSERS, ICON_HOME } from './icons.js';
@@ -185,6 +184,71 @@ class Test extends LitElement {
 		.warning {
 			color: #e87511;
 		}
+		.result {
+			padding: 20px;
+		}
+		.result-split {
+			flex-direction: row;
+			flex-wrap: nowrap;
+			display: flex;
+		}
+		.result-split > .result-part {
+			flex: 0 1 auto;
+		}
+		.result-split-divider {
+			border-right: 4px dashed #007bff;
+			flex: 0 0 auto;
+		}
+		.result-part {
+			display: inline-block;
+		}
+		.result-diff-container img {
+			max-width: 100%;
+		}
+		.result-diff-container {
+			background: repeating-conic-gradient(#cdd5dc 0% 25%, #ffffff 0% 50%) 50% / 20px 20px;
+			background-position: 0 0;
+			border: 2px dashed #90989d;
+			display: inline-block;
+			line-height: 0;
+			position: relative;
+		}
+		.result-split > .result-part:first-of-type > .result-diff-container {
+			border-right: none;
+		}
+		.result-split > .result-part:last-of-type > .result-diff-container {
+			border-left: none;
+		}
+		.result-overlay {
+			background: hsla(0,0%,100%,.8);
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+		.result-part-info {
+			align-items: center;
+			display: flex;
+			gap: 5px;
+		}
+		.result-part-info-spacer,
+		.result-part-info-size {
+			flex: 1 0 0%;
+			text-align: right;
+		}
+		.result-part-info-name {
+			flex: 0 0 auto;
+			font-weight: bold;
+			padding: 5px;
+		}
+		.result-part-info-size {
+			color: #90989d;
+			font-size: 0.8rem;
+			padding: 5px;
+		}
+		.result-no-changes {
+			border: 1px solid #cdd5dc;
+			padding: 20px;
+		}
 	`];
 	constructor() {
 		super();
@@ -223,7 +287,7 @@ class Test extends LitElement {
 				</div>
 				${tabButtons}
 			</div>
-			${this._renderTabPanels(browsers, selectedBrowser, fileData, testData)}
+			${this._renderTabPanels(browsers, selectedBrowser, testData)}
 			${this._renderFooter(selectedBrowser, selectedResult)}
 		`;
 
@@ -341,18 +405,12 @@ class Test extends LitElement {
 			</div>
 		`;
 	}
-	_renderTabPanels(browsers, selectedBrowser, fileData, testData) {
+	_renderTabPanels(browsers, selectedBrowser, testData) {
 
 		const renderTabPanel = (browser) => {
 			return html`
 				<div id="tabpanel-${browser}" role="tabpanel" aria-labelledby="tab-${browser}" ?hidden="${browser !== selectedBrowser.name}">
-					<d2l-vdiff-report-test-result
-						browser="${browser}"
-						file="${fileData.name}"
-						full-mode="${this.fullMode}"
-						layout="${this.layout}"
-						?show-overlay="${this.showOverlay}"
-						test="${testData.name}"></d2l-vdiff-report-test-result>
+					${this._renderTestResults(browser, testData)}
 				</div>
 			`;
 		};
@@ -360,6 +418,60 @@ class Test extends LitElement {
 		return html`<div class="tab-panels">${browsers.map(b => renderTabPanel(b.name))}</div>`;
 
 	}
+	_renderTestResult(resultData) {
+
+		if (!resultData.passed && resultData.info === undefined) {
+			return html`
+				<p>An error occurred that prevented a visual-diff snapshot from being taken:</p>
+				<pre>${resultData.error}</pre>
+			`;
+		}
+
+		const renderPart = (label, partInfo, noChanges, overlay) => {
+			const img = noChanges ? html`
+				<div class="result-no-changes">No changes</div>
+			` : html`<img src="../${partInfo.path}" loading="lazy" alt="">`;
+			return html`
+				<div class="result-part">
+					<div class="result-part-info">
+						<div class="result-part-info-spacer"></div>
+						<div class="result-part-info-name">${label}</div>
+						<div class="result-part-info-size">(${partInfo.width} x ${partInfo.height})</div>
+					</div>
+					<div class="result-diff-container">
+						${img}${overlay}
+					</div>
+				</div>
+			`;
+		};
+
+		const overlay = (this.showOverlay && !resultData.passed) ?
+			html`<div class="result-overlay"><img src="../${resultData.info.diff}" loading="lazy" alt=""></div>` : nothing;
+
+		if (this.layout === LAYOUTS.SPLIT.value) {
+			return html`
+				<div class="result-split">
+					${ renderPart('golden', resultData.info.golden, resultData.passed, undefined) }
+					<div class="result-split-divider"></div>
+					${ renderPart('new', resultData.info.new, false, overlay) }
+				</div>`;
+		} else if (this.layout === LAYOUTS.FULL.value) {
+			if (this.fullMode === FULL_MODE.GOLDEN.value) {
+				return renderPart('golden', resultData.info.golden, false, overlay);
+			} else {
+				return renderPart('new', resultData.info.new, false, overlay);
+			}
+		}
+
+	}
+	_renderTestResults(browser, testData) {
+		const result = testData.results.find(r => r.name === browser);
+		return html`
+			<div class="result">
+				${this._renderTestResult(result)}
+			</div>
+		`;
+	}
 	_triggerChange(name, value) {
 		this.dispatchEvent(new CustomEvent(
 			'setting-change', {