Improve demo/test for custom blur (#5295)

* improve demo/test for custom blur * Updating vdiff goldens (#5296) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
BrightspaceUI · Jan 8, 2025 · 102e468 · 102e468
1 parent 37f7041
commit 102e468
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git 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/golden/more-less/chromium/with-custom-blur.png b/components/more-less/test/golden/more-less/chromium/with-custom-blur.png
diff --git 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();
 	});
 });