test portrait background

frontend/rabbi_gerzi/cypress/e2e/home.cy.ts

@@ -63,6 +63,32 @@ describe('homepage hero', () => {
       },
     )
   })
+
+  it('extends the circular background to the portrait base edges', () => {
+    cy.get<HTMLImageElement>('[data-cy="hero-portrait"]').then(
+      (portraitElements) => {
+        const portraitImage = portraitElements[0]
+        const frameElement = portraitImage.parentElement
+
+        if (frameElement === null) {
+          throw new Error('Portrait frame is missing')
+        }
+
+        const portraitBounds = portraitImage.getBoundingClientRect()
+        const frameBounds = frameElement.getBoundingClientRect()
+        const backgroundStyle = getComputedStyle(frameElement, '::before')
+        const backgroundWidth = Number.parseFloat(backgroundStyle.width)
+        const backgroundLeft =
+          frameBounds.left + (frameBounds.width - backgroundWidth) / 2
+        const backgroundRight = backgroundLeft + backgroundWidth
+
+        expect(backgroundStyle.content).to.not.equal('none')
+        expect(backgroundWidth).to.be.closeTo(portraitBounds.width, 1)
+        expect(backgroundLeft).to.be.closeTo(portraitBounds.left, 1)
+        expect(backgroundRight).to.be.closeTo(portraitBounds.right, 1)
+      },
+    )
+  })
 })
 
 describe('homepage discover path section', () => {