From 14a7b0c5e61967627495188984e17e2a961baf95 Mon Sep 17 00:00:00 2001
From: Dave Lockhart <dlockhart@users.noreply.github.com>
Date: Wed, 8 Jan 2025 16:16:09 -0500
Subject: [PATCH] improve demo/test for custom blur

---
 components/more-less/demo/more-less.html     | 8 +++++---
 components/more-less/test/more-less.vdiff.js | 6 +++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/more-less/demo/more-less.html b/components/more-less/demo/more-less.html
index feab7266d0e..900345be09f 100644
--- a/components/more-less/demo/more-less.html
+++ b/components/more-less/demo/more-less.html
@@ -49,9 +49,11 @@ <h2>More-less with custom blur color</h2>
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-more-less blur-color="#f00">
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="">Vestibulum</a> elementum venenatis arcu sit amet varius. Maecenas posuere magna arcu, quis maximus odio fringilla ac. Integer ligula lorem, faucibus sit amet cursus vel, pellentesque a justo. Aliquam urna metus, molestie at tempor eget, vestibulum a purus. Donec aliquet rutrum mi. Duis ornare congue tempor. Nullam sed massa fermentum, tincidunt leo eu, vestibulum orci. Sed ultrices est in lacus venenatis, posuere suscipit arcu scelerisque. In aliquam ipsum rhoncus, lobortis ligula ut, molestie orci. Proin scelerisque tempor posuere. Phasellus consequat, lorem quis hendrerit tempor, sem lectus sagittis nunc, in tristique dui arcu non arcu. Nunc aliquam nisi et sapien commodo lacinia. <a href="">Quisque</a> iaculis orci vel odio varius porta. Fusce tincidunt dolor enim, vitae sollicitudin purus suscipit eu.</p>
-					</d2l-more-less>
+					<div style="background-color: #ff0000; padding: 10px;">
+						<d2l-more-less blur-color="#ff0000">
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="">Vestibulum</a> elementum venenatis arcu sit amet varius. Maecenas posuere magna arcu, quis maximus odio fringilla ac. Integer ligula lorem, faucibus sit amet cursus vel, pellentesque a justo. Aliquam urna metus, molestie at tempor eget, vestibulum a purus. Donec aliquet rutrum mi. Duis ornare congue tempor. Nullam sed massa fermentum, tincidunt leo eu, vestibulum orci. Sed ultrices est in lacus venenatis, posuere suscipit arcu scelerisque. In aliquam ipsum rhoncus, lobortis ligula ut, molestie orci. Proin scelerisque tempor posuere. Phasellus consequat, lorem quis hendrerit tempor, sem lectus sagittis nunc, in tristique dui arcu non arcu. Nunc aliquam nisi et sapien commodo lacinia. <a href="">Quisque</a> iaculis orci vel odio varius porta. Fusce tincidunt dolor enim, vitae sollicitudin purus suscipit eu.</p>
+						</d2l-more-less>
+					</div>
 				</template>
 			</d2l-demo-snippet>
 
diff --git a/components/more-less/test/more-less.vdiff.js b/components/more-less/test/more-less.vdiff.js
index 7e87a3e028f..3c76d76f3d4 100644
--- a/components/more-less/test/more-less.vdiff.js
+++ b/components/more-less/test/more-less.vdiff.js
@@ -82,7 +82,11 @@ describe('more-less', () => {
 	});
 
 	it('with custom blur', async() => {
-		const elem = await fixture(html`<d2l-more-less blur-color="#f00">${content()}</d2l-more-less>`, { viewport });
+		const elem = await fixture(html`
+			<div style="background-color: #ff0000; padding: 10px;">
+				<d2l-more-less blur-color="#ff0000">${content()}</d2l-more-less>
+			</div>
+		`, { viewport });
 		await expect(elem).to.be.golden();
 	});
 });