Preserve backdrop blur during fade transitions

entry_types/scrolled/package/spec/frontend/appearance-spec.js

@@ -0,0 +1,139 @@
+import {renderHook} from '@testing-library/react-hooks';
+
+import {useAppearanceOverlayStyle} from 'frontend/appearance';
+
+describe('useAppearanceOverlayStyle', () => {
+  it('returns empty object for shadow appearance', () => {
+    const {result} = renderHook(() =>
+      useAppearanceOverlayStyle({appearance: 'shadow'})
+    );
+
+    expect(result.current).toEqual({});
+  });
+
+  it('returns empty object for transparent appearance', () => {
+    const {result} = renderHook(() =>
+      useAppearanceOverlayStyle({appearance: 'transparent'})
+    );
+
+    expect(result.current).toEqual({});
+  });
+
+  describe('cards appearance', () => {
+    it('returns backdropFilter for translucent cardSurfaceColor', () => {
+      const {result} = renderHook(() =>
+        useAppearanceOverlayStyle({
+          appearance: 'cards',
+          cardSurfaceColor: '#ff000080'
+        })
+      );
+
+      expect(result.current).toEqual({
+        backgroundColor: '#ff000080',
+        backdropFilter: 'blur(10px)'
+      });
+    });
+
+    it('does not return backdropFilter for opaque cardSurfaceColor', () => {
+      const {result} = renderHook(() =>
+        useAppearanceOverlayStyle({
+          appearance: 'cards',
+          cardSurfaceColor: '#ff0000'
+        })
+      );
+
+      expect(result.current).toEqual({
+        backgroundColor: '#ff0000'
+      });
+    });
+
+    it('does not return backdropFilter when no cardSurfaceColor is set', () => {
+      const {result} = renderHook(() =>
+        useAppearanceOverlayStyle({appearance: 'cards'})
+      );
+
+      expect(result.current).toEqual({});
+    });
+
+    it('scales overlayBackdropBlur to max 10px', () => {
+      const {result} = renderHook(() =>
+        useAppearanceOverlayStyle({
+          appearance: 'cards',
+          cardSurfaceColor: '#ff000080',
+          overlayBackdropBlur: 50
+        })
+      );
+
+      expect(result.current).toEqual({
+        backgroundColor: '#ff000080',
+        backdropFilter: 'blur(5px)'
+      });
+    });
+
+    it('does not return backdropFilter when overlayBackdropBlur is 0', () => {
+      const {result} = renderHook(() =>
+        useAppearanceOverlayStyle({
+          appearance: 'cards',
+          cardSurfaceColor: '#ff000080',
+          overlayBackdropBlur: 0
+        })
+      );
+
+      expect(result.current).toEqual({
+        backgroundColor: '#ff000080'
+      });
+    });
+  });
+
+  describe('split appearance', () => {
+    it('returns backdropFilter for translucent splitOverlayColor', () => {
+      const {result} = renderHook(() =>
+        useAppearanceOverlayStyle({
+          appearance: 'split',
+          splitOverlayColor: '#ff000080',
+          overlayBackdropBlur: 50
+        })
+      );
+
+      expect(result.current).toEqual({
+        backgroundColor: '#ff000080',
+        backdropFilter: 'blur(5px)'
+      });
+    });
+
+    it('returns default backdropFilter when no splitOverlayColor is set', () => {
+      const {result} = renderHook(() =>
+        useAppearanceOverlayStyle({appearance: 'split'})
+      );
+
+      expect(result.current).toEqual({backdropFilter: 'blur(10px)'});
+    });
+
+    it('does not return backdropFilter for opaque splitOverlayColor', () => {
+      const {result} = renderHook(() =>
+        useAppearanceOverlayStyle({
+          appearance: 'split',
+          splitOverlayColor: '#ff0000'
+        })
+      );
+
+      expect(result.current).toEqual({
+        backgroundColor: '#ff0000'
+      });
+    });
+
+    it('returns default backdropFilter for translucent splitOverlayColor', () => {
+      const {result} = renderHook(() =>
+        useAppearanceOverlayStyle({
+          appearance: 'split',
+          splitOverlayColor: '#ff000080'
+        })
+      );
+
+      expect(result.current).toEqual({
+        backgroundColor: '#ff000080',
+        backdropFilter: 'blur(10px)'
+      });
+    });
+  });
+});

entry_types/scrolled/package/spec/frontend/features/perElementFade-spec.js

@@ -0,0 +1,37 @@
+import {renderEntry, usePageObjects} from 'support/pageObjects';
+
+describe('fade transitions with backdrop blur', () => {
+  usePageObjects();
+
+  it('uses per-element fade to preserve backdrop blur', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [
+          {id: 1, permaId: 9, configuration: {fullHeight: true, transition: 'scroll'}},
+          {id: 2, permaId: 10,
+           configuration: {appearance: 'cards', cardSurfaceColor: '#ff000080',
+                           fullHeight: true, transition: 'fade'}}
+        ],
+        contentElements: [{sectionId: 2}]
+      }
+    });
+
+    expect(getSectionByPermaId(10).usesPerElementFadeTransition()).toBe(true);
+  });
+
+  it('uses regular fade when there is no backdrop blur', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [
+          {id: 1, permaId: 9, configuration: {fullHeight: true, transition: 'scroll'}},
+          {id: 2, permaId: 10,
+           configuration: {appearance: 'cards', cardSurfaceColor: '#ff0000',
+                           fullHeight: true, transition: 'fade'}}
+        ],
+        contentElements: [{sectionId: 2}]
+      }
+    });
+
+    expect(getSectionByPermaId(10).usesPerElementFadeTransition()).toBe(false);
+  });
+});

entry_types/scrolled/package/spec/frontend/foregroundBoxes/CardBoxWrapper-spec.js

@@ -7,11 +7,14 @@ import CardBoxWrapper from 'frontend/foregroundBoxes/CardBoxWrapper';
 import cardBoxStyles from 'frontend/foregroundBoxes/CardBoxWrapper.module.css';
 import boundaryMarginStyles from 'frontend/foregroundBoxes/BoxBoundaryMargin.module.css';
 
+const transitionStyles = {foregroundOpacity: 'foregroundOpacity'};
+
 describe('CardBoxWrapper', () => {
   describe('at section boundaries', () => {
     it('does not have noTopMargin class when not at section start', () => {
       const {container} = render(
-        <CardBoxWrapper openStart={false} openEnd={true} atSectionStart={false}>
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        openStart={false} openEnd={true} atSectionStart={false}>
           Content
         </CardBoxWrapper>
       );
@@ -21,7 +24,8 @@ describe('CardBoxWrapper', () => {
 
     it('has noTopMargin class when at section start', () => {
       const {container} = render(
-        <CardBoxWrapper openStart={false} openEnd={true} atSectionStart={true}>
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        openStart={false} openEnd={true} atSectionStart={true}>
           Content
         </CardBoxWrapper>
       );
@@ -31,7 +35,8 @@ describe('CardBoxWrapper', () => {
 
     it('does not have noBottomMargin class when not at section end', () => {
       const {container} = render(
-        <CardBoxWrapper openStart={true} openEnd={false} atSectionEnd={false}>
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        openStart={true} openEnd={false} atSectionEnd={false}>
           Content
         </CardBoxWrapper>
       );
@@ -41,7 +46,8 @@ describe('CardBoxWrapper', () => {
 
     it('has noBottomMargin class when at section end', () => {
       const {container} = render(
-        <CardBoxWrapper openStart={true} openEnd={false} atSectionEnd={true}>
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        openStart={true} openEnd={false} atSectionEnd={true}>
           Content
         </CardBoxWrapper>
       );
@@ -50,88 +56,82 @@ describe('CardBoxWrapper', () => {
     });
   });
 
-  describe('backdrop blur', () => {
-    it('applies blur class when overlayBackdropBlur is set and color is translucent', () => {
-      const {container} = render(
-        <CardBoxWrapper cardSurfaceColor="#ff000080"
-                        overlayBackdropBlur={50}>
-          Content
-        </CardBoxWrapper>
-      );
-
-      expect(container.firstChild).toHaveClass(cardBoxStyles.blur);
-    });
-
-    it('does not apply blur class when color is opaque', () => {
-      const {container} = render(
-        <CardBoxWrapper cardSurfaceColor="#ff0000"
-                        overlayBackdropBlur={50}>
-          Content
-        </CardBoxWrapper>
-      );
-
-      expect(container.firstChild).not.toHaveClass(cardBoxStyles.blur);
-    });
-
-    it('does not apply blur when everything is default', () => {
+  describe('background element', () => {
+    it('applies foregroundOpacity class to background element', () => {
       const {container} = render(
-        <CardBoxWrapper>
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        openStart={false} openEnd={false}>
           Content
         </CardBoxWrapper>
       );
 
-      expect(container.firstChild).not.toHaveClass(cardBoxStyles.blur);
+      expect(container.querySelector(`.${cardBoxStyles.cardBg}`))
+        .toHaveClass('foregroundOpacity');
     });
+  });
 
-    it('applies blur class by default for translucent color', () => {
+  describe('content wrapper', () => {
+    it('applies foregroundOpacity class to content wrapper', () => {
       const {container} = render(
-        <CardBoxWrapper cardSurfaceColor="#ff000080">
-          Content
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        openStart={false} openEnd={false}>
+          <span>Content</span>
         </CardBoxWrapper>
       );
 
-      expect(container.firstChild).toHaveClass(cardBoxStyles.blur);
+      const contentWrapper = container.querySelector(`.foregroundOpacity:not(.${cardBoxStyles.cardBg})`);
+      expect(contentWrapper).not.toBeNull();
+      expect(contentWrapper).toHaveTextContent('Content');
     });
+  });
 
-    it('sets backdrop blur CSS variable by default for translucent color', () => {
+  describe('outside box', () => {
+    it('wraps outsideBox children in foregroundOpacity', () => {
       const {container} = render(
-        <CardBoxWrapper cardSurfaceColor="#ff000080">
-          Content
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        position="sticky">
+          <span>Content</span>
         </CardBoxWrapper>
       );
 
-      expect(container.firstChild.style.getPropertyValue('--card-backdrop-blur'))
-        .toBe('blur(10px)');
+      expect(container.querySelector('.foregroundOpacity'))
+        .toHaveTextContent('Content');
     });
+  });
 
-    it('does not apply blur class when overlayBackdropBlur is 0', () => {
+  describe('overlay style', () => {
+    it('applies overlay style to background element', () => {
       const {container} = render(
-        <CardBoxWrapper cardSurfaceColor="#ff000080"
-                        overlayBackdropBlur={0}>
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        overlayStyle={{backgroundColor: '#ff000080', backdropFilter: 'blur(5px)'}}>
           Content
         </CardBoxWrapper>
       );
 
-      expect(container.firstChild).not.toHaveClass(cardBoxStyles.blur);
+      const bg = container.querySelector(`.${cardBoxStyles.cardBg}`);
+      expect(bg).toHaveStyle({backgroundColor: '#ff000080'});
+      expect(bg.style.backdropFilter).toBe('blur(5px)');
     });
 
-    it('sets backdrop blur CSS variable when color is translucent', () => {
+    it('does not set inline styles when overlayStyle is empty', () => {
       const {container} = render(
-        <CardBoxWrapper cardSurfaceColor="#ff000080"
-                        overlayBackdropBlur={50}>
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        overlayStyle={{}}>
           Content
         </CardBoxWrapper>
       );
 
-      expect(container.firstChild.style.getPropertyValue('--card-backdrop-blur'))
-        .toBe('blur(5px)');
+      const bg = container.querySelector(`.${cardBoxStyles.cardBg}`);
+      expect(bg.style.backdropFilter).toBeFalsy();
+      expect(bg.style.backgroundColor).toBeFalsy();
     });
   });
 
   describe('cardEnd padding', () => {
     it('does not have cardEndPadding class when lastMarginBottom is set', () => {
       const {container} = render(
-        <CardBoxWrapper openStart={true} openEnd={false} lastMarginBottom="lg">
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        openStart={true} openEnd={false} lastMarginBottom="lg">
           Content
         </CardBoxWrapper>
       );
@@ -142,7 +142,8 @@ describe('CardBoxWrapper', () => {
 
     it('has cardEndPadding class when lastMarginBottom is not set', () => {
       const {container} = render(
-        <CardBoxWrapper openStart={true} openEnd={false}>
+        <CardBoxWrapper transitionStyles={transitionStyles}
+                        openStart={true} openEnd={false}>
           Content
         </CardBoxWrapper>
       );