From d4134c85979cfbb88a01d331f8d946eb67251de5 Mon Sep 17 00:00:00 2001
From: Okan Sahin <39759830+mokimo@users.noreply.github.com>
Date: Tue, 17 Sep 2024 11:15:35 +0200
Subject: [PATCH 1/5] MWPW-156749: Fix video CLS  (#2849)

* MWPW-155412: Fix video CLS netting +10 lighthouse points (#2724)

* fix cls by adding the videoEl without a source

* adapt the video hover and in view port play

* Remove no-lazy and return earlier

* Fix linting issue

* Consolidate duplicated logic

* Move functions into the init function

* Move root margin and use optional chaining

* Only query for the videoEl once

* Add default hash at in the right spot

* Fix the figure/video interaction

* Remove unused export statement

* Keep the previous defaults

* Re-add adding autoplay

* Retain decorateBlockBg logic

* Move autoplay logic to the right location

* Fix linting issues

* Adapt figure tests

* PR Feedback

* Safeguard decorateAnchorVideo

* Remove anchor if neccessary

* Add video test
---
 libs/blocks/adobetv/adobetv.js      | 34 ++++-----------
 libs/blocks/figure/figure.js        | 36 ++++++++--------
 libs/blocks/video/video.js          | 43 ++++++-------------
 libs/utils/decorate.js              | 29 ++++++++++---
 test/blocks/adobetv/adobetv.test.js | 11 -----
 test/blocks/adobetv/mocks/body.html |  2 +-
 test/blocks/figure/figure.test.js   |  5 ++-
 test/blocks/figure/mocks/body.html  | 16 +-------
 test/blocks/marquee/marquee.test.js | 21 ++++++++--
 test/blocks/video/mocks/body.html   |  2 +-
 test/blocks/video/video.test.js     | 64 +++++++++++++----------------
 11 files changed, 113 insertions(+), 150 deletions(-)

diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js
index 31cfc7a368..85928d1c03 100644
--- a/libs/blocks/adobetv/adobetv.js
+++ b/libs/blocks/adobetv/adobetv.js
@@ -1,22 +1,15 @@
-import { createIntersectionObserver } from '../../utils/utils.js';
-import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
+import { decorateAnchorVideo } from '../../utils/decorate.js';
 
-const ROOT_MARGIN = 1000;
-
-const loadAdobeTv = (a) => {
+export default function init(a) {
+  a.classList.add('hide-video');
   const bgBlocks = ['aside', 'marquee', 'hero-marquee'];
   if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) {
     a.classList.add('hide');
-    const { href, hash, dataset } = a;
-    const attrs = getVideoAttrs(hash || 'autoplay', dataset);
-    const video = `<video ${attrs}>
-          <source src="${href}" type="video/mp4" />
-        </video>`;
     if (!a.parentNode) return;
-    a.insertAdjacentHTML('afterend', video);
-    const videoElem = document.body.querySelector(`source[src="${href}"]`)?.parentElement;
-    applyHoverPlay(videoElem);
-    a.remove();
+    decorateAnchorVideo({
+      src: a.href,
+      anchorTag: a,
+    });
   } else {
     const embed = `<div class="milo-video">
       <iframe src="${a.href}" class="adobetv" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no" allow="encrypted-media" title="Adobe Video Publishing Cloud Player" loading="lazy">
@@ -25,17 +18,4 @@ const loadAdobeTv = (a) => {
     a.insertAdjacentHTML('afterend', embed);
     a.remove();
   }
-};
-
-export default function init(a) {
-  a.classList.add('hide-video');
-  if (a.textContent.includes('no-lazy')) {
-    loadAdobeTv(a);
-  } else {
-    createIntersectionObserver({
-      el: a,
-      options: { rootMargin: `${ROOT_MARGIN}px` },
-      callback: loadAdobeTv,
-    });
-  }
 }
diff --git a/libs/blocks/figure/figure.js b/libs/blocks/figure/figure.js
index 8275b18e93..cd0d80cd88 100644
--- a/libs/blocks/figure/figure.js
+++ b/libs/blocks/figure/figure.js
@@ -1,4 +1,5 @@
-import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
+import { applyHoverPlay, decorateAnchorVideo } from '../../utils/decorate.js';
+import { createTag } from '../../utils/utils.js';
 
 function buildCaption(pEl) {
   const figCaptionEl = document.createElement('figcaption');
@@ -15,23 +16,22 @@ function htmlToElement(html) {
 }
 
 function decorateVideo(clone, figEl) {
-  let video = clone.querySelector('video');
-  const videoLink = clone.querySelector('a[href*=".mp4"]');
-  if (videoLink) {
-    const { href, hash, dataset } = videoLink;
-    const attrs = getVideoAttrs(hash, dataset);
-    const videoElem = `<video ${attrs}>
-      <source src="${href}" type="video/mp4" />
-    </video>`;
-
-    videoLink.insertAdjacentHTML('afterend', videoElem);
-    videoLink.remove();
-    video = clone.querySelector('video');
-  }
-  if (video) {
-    video.removeAttribute('data-mouseevent');
-    applyHoverPlay(video);
-    figEl.prepend(video);
+  const videoTag = clone.querySelector('video');
+  const anchorTag = clone.querySelector('a[href*=".mp4"]');
+  if (anchorTag && !anchorTag.hash) anchorTag.hash = '#autoplay';
+  if (anchorTag) decorateAnchorVideo({ src: anchorTag.href, anchorTag });
+  if (videoTag) {
+    videoTag.removeAttribute('data-mouseevent');
+    if (videoTag.dataset?.videoSource) {
+      videoTag.appendChild(
+        createTag('source', {
+          src: videoTag.dataset?.videoSource,
+          type: 'video/mp4',
+        }),
+      );
+    }
+    applyHoverPlay(videoTag);
+    figEl.prepend(videoTag);
   }
 }
 
diff --git a/libs/blocks/video/video.js b/libs/blocks/video/video.js
index 43deb1b19d..3decc59e15 100644
--- a/libs/blocks/video/video.js
+++ b/libs/blocks/video/video.js
@@ -1,10 +1,13 @@
-import { createIntersectionObserver, getConfig } from '../../utils/utils.js';
-import { applyHoverPlay, getVideoAttrs, applyInViewPortPlay } from '../../utils/decorate.js';
+import { getConfig } from '../../utils/utils.js';
+import { decorateAnchorVideo } from '../../utils/decorate.js';
 
-const ROOT_MARGIN = 1000;
-
-const loadVideo = (a) => {
-  const { pathname, hash, dataset } = a;
+export default function init(a) {
+  a.classList.add('hide-video');
+  if (!a.parentNode) {
+    a.remove();
+    return;
+  }
+  const { pathname } = a;
   let videoPath = `.${pathname}`;
   if (pathname.match('media_.*.mp4')) {
     const { codeRoot } = getConfig();
@@ -14,28 +17,8 @@ const loadVideo = (a) => {
     const mediaFilename = pathname.split('/').pop();
     videoPath = `${root}${mediaFilename}`;
   }
-
-  const attrs = getVideoAttrs(hash, dataset);
-  const video = `<video ${attrs}>
-        <source src="${videoPath}" type="video/mp4" />
-      </video>`;
-  if (!a.parentNode) return;
-  a.insertAdjacentHTML('afterend', video);
-  const videoElem = document.body.querySelector(`source[src="${videoPath}"]`)?.parentElement;
-  applyHoverPlay(videoElem);
-  applyInViewPortPlay(videoElem);
-  a.remove();
-};
-
-export default function init(a) {
-  a.classList.add('hide-video');
-  if (a.textContent.includes('no-lazy')) {
-    loadVideo(a);
-  } else {
-    createIntersectionObserver({
-      el: a,
-      options: { rootMargin: `${ROOT_MARGIN}px` },
-      callback: loadVideo,
-    });
-  }
+  decorateAnchorVideo({
+    src: videoPath,
+    anchorTag: a,
+  });
 }
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
index 556670c79f..12be0a663f 100644
--- a/libs/utils/decorate.js
+++ b/libs/utils/decorate.js
@@ -1,4 +1,4 @@
-import { createTag } from './utils.js';
+import { createTag, createIntersectionObserver } from './utils.js';
 
 export function decorateButtons(el, size) {
   const buttons = el.querySelectorAll('em a, strong a, p > a strong');
@@ -113,8 +113,6 @@ export async function decorateBlockBg(block, node, { useHandleFocalpoint = false
     const allVP = [['mobile-only'], ['tablet-only'], ['desktop-only']];
     const viewports = childCount === 2 ? binaryVP : allVP;
     [...node.children].forEach((child, i) => {
-      const videoLink = child.querySelector('a[href*=".mp4"]');
-      if (videoLink && !videoLink.hash) videoLink.hash = 'autoplay';
       if (childCount > 1) child.classList.add(...viewports[i]);
       const pic = child.querySelector('picture');
       if (useHandleFocalpoint && pic
@@ -200,7 +198,7 @@ export function getImgSrc(pic) {
   return source?.srcset ? `poster='${source.srcset}'` : '';
 }
 
-export function getVideoAttrs(hash, dataset) {
+function getVideoAttrs(hash, dataset) {
   const isAutoplay = hash?.includes('autoplay');
   const isAutoplayOnce = hash?.includes('autoplay1');
   const playOnHover = hash?.includes('hoverplay');
@@ -258,7 +256,7 @@ export function handleObjectFit(bgRow) {
   });
 }
 
-export function getVideoIntersectionObserver() {
+function getVideoIntersectionObserver() {
   if (!window?.videoIntersectionObs) {
     window.videoIntersectionObs = new window.IntersectionObserver((entries) => {
       entries.forEach((entry) => {
@@ -279,7 +277,7 @@ export function getVideoIntersectionObserver() {
   return window.videoIntersectionObs;
 }
 
-export function applyInViewPortPlay(video) {
+function applyInViewPortPlay(video) {
   if (!video) return;
   if (video.hasAttribute('data-play-viewport')) {
     const observer = getVideoIntersectionObserver();
@@ -309,3 +307,22 @@ export function decorateMultiViewport(el) {
   }
   return foreground;
 }
+
+export function decorateAnchorVideo({ src, anchorTag }) {
+  if (!src.length || !(anchorTag instanceof HTMLElement)) return;
+  if (anchorTag.closest('.marquee, .aside, .hero-marquee') && !anchorTag.hash) anchorTag.hash = '#autoplay';
+  const { dataset, parentElement } = anchorTag;
+  const video = `<video ${getVideoAttrs(anchorTag.hash, dataset)} data-video-source=${src}></video>`;
+  anchorTag.insertAdjacentHTML('afterend', video);
+  const videoEl = parentElement.querySelector('video');
+  createIntersectionObserver({
+    el: parentElement,
+    options: { rootMargin: '1000px' },
+    callback: () => {
+      videoEl?.appendChild(createTag('source', { src, type: 'video/mp4' }));
+    },
+  });
+  applyHoverPlay(videoEl);
+  applyInViewPortPlay(videoEl);
+  anchorTag.remove();
+}
diff --git a/test/blocks/adobetv/adobetv.test.js b/test/blocks/adobetv/adobetv.test.js
index c7678e427e..a54528e496 100644
--- a/test/blocks/adobetv/adobetv.test.js
+++ b/test/blocks/adobetv/adobetv.test.js
@@ -6,17 +6,6 @@ document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { default: init } = await import('../../../libs/blocks/adobetv/adobetv.js');
 
 describe('adobetv autoblock', () => {
-  it('decorates no-lazy video', async () => {
-    const block = document.querySelector('.video.no-lazy');
-    const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
-    block.append(a);
-
-    init(a);
-    const video = await waitForElement('.video.no-lazy iframe');
-    expect(video).to.exist;
-  });
-
   it('creates video block', async () => {
     const wrapper = document.body.querySelector('.adobe-tv');
     const a = wrapper.querySelector(':scope > a');
diff --git a/test/blocks/adobetv/mocks/body.html b/test/blocks/adobetv/mocks/body.html
index 2110a02b0a..b633aecd5c 100644
--- a/test/blocks/adobetv/mocks/body.html
+++ b/test/blocks/adobetv/mocks/body.html
@@ -1,5 +1,5 @@
 <main>
-  <div class="video no-lazy">
+  <div class="video">
     <a href="https://video.tv.adobe.com/v/3410934t1">
       https://video.tv.adobe.com/v/3410934t1
     </a>
diff --git a/test/blocks/figure/figure.test.js b/test/blocks/figure/figure.test.js
index fb6d9b23fc..61ee37b909 100644
--- a/test/blocks/figure/figure.test.js
+++ b/test/blocks/figure/figure.test.js
@@ -42,8 +42,9 @@ describe('init', () => {
     init(blockEl);
 
     const figures = blockEl.querySelectorAll('.figure');
-    expect(figures[0].querySelector('a > picture')).to.be.exist;
-    expect(figures[1].querySelector('a > video')).to.be.exist;
+    expect(figures[0].querySelector('a > picture')).to.exist;
+    expect(figures[1].querySelector('a > video')).to.exist;
+    expect(figures[1].querySelector('a > video > source')).to.exist;
   });
 
   it('should not add any classes to the block element when no pictures are present', () => {
diff --git a/test/blocks/figure/mocks/body.html b/test/blocks/figure/mocks/body.html
index b79ea96e1f..5a07ebf098 100644
--- a/test/blocks/figure/mocks/body.html
+++ b/test/blocks/figure/mocks/body.html
@@ -51,17 +51,7 @@
         <div>
           <p>
             <video>
-              <source type="image/webp"
-                srcset=""
-                media="(min-width: 400px)">
-              <source type="image/webp"
-                srcset="">
-              <source type="image/jpeg"
-                srcset=""
-                media="(min-width: 400px)">
-              <img loading="lazy" alt="" type="image/jpeg"
-                src=""
-                width="2000" height="876">
+
             </video>
           </p>
           <p><em>caption</em></p>
@@ -114,9 +104,7 @@
       <div>
         <div>
           <p>
-            <video width="320" height="240" controls>
-              <source src="movie.mp4" type="video/mp4">
-              <source src="movie.ogg" type="video/ogg">
+            <video width="320" height="240" controls data-video-source="movie.mp4">
             </video>
           </p>
           <p><a href="https://blog.adobe.com/en/publish/2022/12/07/kah-milah-ledgester-breathes-life-into-award-winning-art-with-adobe-creative-cloud">https://blog.adobe.com/en/publish/2022/12/07/kah-milah-ledgester-breathes-life-into-award-winning-art-with-adobe-creative-cloud</a></p>
diff --git a/test/blocks/marquee/marquee.test.js b/test/blocks/marquee/marquee.test.js
index 5874bd6bd5..0ab42a2cdd 100644
--- a/test/blocks/marquee/marquee.test.js
+++ b/test/blocks/marquee/marquee.test.js
@@ -1,8 +1,8 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { waitForElement } from '../../helpers/waitfor.js';
-import { setConfig } from '../../../libs/utils/utils.js';
+import { waitFor, waitForElement } from '../../helpers/waitfor.js';
+import { setConfig, loadStyle } from '../../../libs/utils/utils.js';
 import { loadMnemonicList } from '../../../libs/blocks/marquee/marquee.js';
 
 const locales = { '': { ietf: 'en-US', tk: 'hah7vzn.css' } };
@@ -16,6 +16,15 @@ const video = await readFile({ path: './mocks/video.html' });
 const multipleIcons = await readFile({ path: './mocks/multiple-icons.html' });
 
 describe('marquee', () => {
+  before(async () => {
+    await new Promise((resolve) => {
+      loadStyle('../../../../libs/styles/styles.css', resolve);
+    });
+    await new Promise((resolve) => {
+      loadStyle('../../../../libs/blocks/marquee/marquee.css', resolve);
+    });
+  });
+
   const marquees = document.querySelectorAll('.marquee');
   marquees.forEach((marquee) => {
     init(marquee);
@@ -69,7 +78,9 @@ describe('marquee', () => {
       init(marquee);
       videoBLock(document.querySelector('#single-background a[href*=".mp4"]'));
       const videoEl = await waitForElement('#single-background .background video');
-      expect(videoEl).to.exist;
+      const intersectionObserverAddsSource = () => videoEl.querySelector('source');
+      await waitFor(intersectionObserverAddsSource);
+      expect(videoEl.querySelector('source')).to.exist;
       document.getElementById('single-background').remove();
     });
 
@@ -78,7 +89,9 @@ describe('marquee', () => {
       init(marquee);
       document.querySelectorAll('#multiple-background a[href*=".mp4"]').forEach((videoLink) => videoBLock(videoLink));
       await waitForElement('#multiple-background .background video');
-      expect(marquee.querySelectorAll('.background video').length).to.equal(1);
+      const intersectionObserverAddsSource = () => document.querySelector('.background video source');
+      await waitFor(intersectionObserverAddsSource);
+      expect(marquee.querySelectorAll('.background video source').length).to.equal(1);
       document.getElementById('multiple-background').remove();
     });
 
diff --git a/test/blocks/video/mocks/body.html b/test/blocks/video/mocks/body.html
index bafb0a0338..b3f1963c85 100644
--- a/test/blocks/video/mocks/body.html
+++ b/test/blocks/video/mocks/body.html
@@ -4,7 +4,7 @@
   }
 </style>
 <main>
-  <div class="video no-lazy">
+  <div class="video">
     <a href="https://main--blog--adobecom.hlx.page/media_17927691d22fe4e1bd058e94762a224fdc57ebb7b.mp4">
       https://main--blog--adobecom.hlx.page/media_17927691d22fe4e1bd058e94762a224fdc57ebb7b.mp4
     </a>
diff --git a/test/blocks/video/video.test.js b/test/blocks/video/video.test.js
index e80298c650..3a4ac9b1e9 100644
--- a/test/blocks/video/video.test.js
+++ b/test/blocks/video/video.test.js
@@ -1,25 +1,26 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect, assert } from '@esm-bundle/chai';
-
 import sinon from 'sinon';
+import { waitFor, waitForElement } from '../../helpers/waitfor.js';
 
-import { waitForElement } from '../../helpers/waitfor.js';
-import { setConfig } from '../../../libs/utils/utils.js';
+import { setConfig, createTag } from '../../../libs/utils/utils.js';
 
 setConfig({});
 const { default: init } = await import('../../../libs/blocks/video/video.js');
-document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 
 describe('video uploaded using franklin bot', () => {
-  it('decorates no-lazy video', async () => {
-    const block = document.querySelector('.video.no-lazy');
-    const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
-    block.append(a);
+  beforeEach(async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+  });
 
-    init(a);
-    const video = await waitForElement('.video.no-lazy video');
-    expect(video).to.exist;
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('decorates video', (done) => {
+    const anchor = createTag('a');
+    anchor.remove = () => done();
+    init(anchor);
   });
 
   it('decorates video', async () => {
@@ -74,7 +75,6 @@ describe('video uploaded using franklin bot', () => {
   it('no hoverplay attribute added when with autoplay on loop', async () => {
     const block = document.querySelector('.video.autoplay.playonhover');
     const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -86,7 +86,6 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with hoverplay when only hoverplay is added to url', async () => {
     const block = document.querySelector('.video.hoveronly');
     const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -97,7 +96,6 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with viewportplay only with autoplay', async () => {
     const block = document.querySelector('.video.autoplay.viewportplay');
     const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -108,7 +106,6 @@ describe('video uploaded using franklin bot', () => {
   it('play video when element reached 80% viewport', async () => {
     const block = document.querySelector('.video.autoplay.viewportplay.scrolled-80');
     const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
     block.append(a);
     const nextFrame = () => new Promise((resolve) => {
       requestAnimationFrame(resolve);
@@ -116,13 +113,10 @@ describe('video uploaded using franklin bot', () => {
 
     init(a);
     const video = block.querySelector('video');
-    const source = video.querySelector('source');
-    source.setAttribute('src', 'https://www.adobe.com/creativecloud/media_1167374e3354ef57f126fa78a55cbc1708ac4babd.mp4');
-    source.setAttribute('type', 'video/mp4');
-
     const playSpy = sinon.spy(video, 'play');
     const pauseSpy = sinon.spy(video, 'pause');
-
+    const intersectionObserverAddsSource = () => video.querySelector('source');
+    await waitFor(intersectionObserverAddsSource);
     video.scrollIntoView();
     await nextFrame();
     await new Promise((resolve) => {
@@ -130,20 +124,22 @@ describe('video uploaded using franklin bot', () => {
     });
     assert.isTrue(playSpy.calledOnce);
 
-    document.body.scrollIntoView();
+    // push the video out of the viewport
+    const div = document.createElement('div');
+    div.style.height = '2000px';
+    video.parentNode.insertBefore(div, video);
+
     await nextFrame();
     await new Promise((resolve) => {
       setTimeout(resolve, 100);
     });
     assert.isTrue(pauseSpy.calledOnce);
-
     expect(video.hasAttribute('data-play-viewport')).to.be.true;
   });
 
   it('Don\'t play the video once it end when autoplay1 enabled', async () => {
     const block = document.querySelector('.video.autoplay1.viewportplay.ended');
     const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
     block.append(a);
     const nextFrame = () => new Promise((resolve) => {
       requestAnimationFrame(resolve);
@@ -151,15 +147,13 @@ describe('video uploaded using franklin bot', () => {
 
     init(a);
     const video = block.querySelector('video');
-    const source = video.querySelector('source');
-    source.setAttribute('src', 'https://www.adobe.com/creativecloud/media_1167374e3354ef57f126fa78a55cbc1708ac4babd.mp4');
-    source.setAttribute('type', 'video/mp4');
-
     const playSpy = sinon.spy(video, 'play');
     const pauseSpy = sinon.spy(video, 'pause');
     const endedSpy = sinon.spy();
-    video.addEventListener('ended', endedSpy);
+    const intersectionObserverAddsSource = () => video.querySelector('source');
+    await waitFor(intersectionObserverAddsSource);
 
+    video.addEventListener('ended', endedSpy);
     video.scrollIntoView();
     await nextFrame();
     await new Promise((resolve) => {
@@ -167,13 +161,16 @@ describe('video uploaded using franklin bot', () => {
     });
     assert.isTrue(playSpy.calledOnce);
 
-    document.body.scrollIntoView();
+    // push the video out of the viewport
+    const div = document.createElement('div');
+    div.style.height = '2000px';
+    video.parentNode.insertBefore(div, video);
+
     await nextFrame();
     await new Promise((resolve) => {
       setTimeout(resolve, 100);
     });
     assert.isTrue(pauseSpy.calledOnce);
-
     video.dispatchEvent(new Event('ended'));
     await nextFrame();
     await new Promise((resolve) => {
@@ -193,7 +190,6 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with viewportplay only with autoplay1', async () => {
     const block = document.querySelector('.video.autoplay1.viewportplay');
     const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -204,7 +200,6 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with no viewportplay with autoplay1 hoverplay', async () => {
     const block = document.querySelector('.video.autoplay1.hoverplay.no-viewportplay');
     const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -215,7 +210,6 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with no viewportplay with hoverplay', async () => {
     const block = document.querySelector('.video.hoverplay.no-viewportplay');
     const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -226,7 +220,6 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with no viewportplay no autoplay', async () => {
     const block = document.querySelector('.video.no-autoplay.no-viewportplay');
     const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -237,7 +230,6 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with no viewportplay no autoplay1', async () => {
     const block = document.querySelector('.video.no-autoplay1.no-viewportplay');
     const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);

From eb788ce7f1cb5288665e9af3843f2f8c48a74ef9 Mon Sep 17 00:00:00 2001
From: Ryan Parrish <churchofslidin@gmail.com>
Date: Tue, 17 Sep 2024 03:15:42 -0600
Subject: [PATCH 2/5] MWPW-157888 - Hero marquee w/ `no-min-height` and no l/r
 padding when using a `full-width` variant (#2861)

* stub no-min-height

* fixed hero has-bg logic
---
 libs/blocks/hero-marquee/hero-marquee.css |  1 +
 libs/blocks/hero-marquee/hero-marquee.js  | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/libs/blocks/hero-marquee/hero-marquee.css b/libs/blocks/hero-marquee/hero-marquee.css
index 34c9175a3f..94422024ed 100644
--- a/libs/blocks/hero-marquee/hero-marquee.css
+++ b/libs/blocks/hero-marquee/hero-marquee.css
@@ -17,6 +17,7 @@
   align-items: center;
 }
 
+.hero-marquee.no-min-height { min-height: unset; }
 .hero-marquee.s-min-height { min-height: var(--s-min-height); }
 .hero-marquee.l-min-height { min-height: var(--l-min-height); }
 
diff --git a/libs/blocks/hero-marquee/hero-marquee.js b/libs/blocks/hero-marquee/hero-marquee.js
index 91a0499e68..04a8b57a21 100644
--- a/libs/blocks/hero-marquee/hero-marquee.js
+++ b/libs/blocks/hero-marquee/hero-marquee.js
@@ -164,14 +164,16 @@ function loadBreakpointThemes() {
 export default async function init(el) {
   el.classList.add('con-block');
   let rows = el.querySelectorAll(':scope > div');
-  if (rows.length > 1 && rows[0].textContent !== '') {
+  if (rows.length <= 1) return;
+  const [head, ...tail] = rows;
+  rows = tail;
+  if (head.textContent.trim() === '') {
+    head.remove();
+  } else {
     el.classList.add('has-bg');
-    const [head, ...tail] = rows;
     handleObjectFit(head);
     decorateBlockBg(el, head, { useHandleFocalpoint: true });
-    rows = tail;
   }
-
   // get first row that's not a keyword key/value row
   const mainRowIndex = rows.findIndex((row) => {
     const firstColText = row.children[0].textContent.toLowerCase().trim();

From d51b989313db0d7f3b018b2aad20f9cd07374be0 Mon Sep 17 00:00:00 2001
From: nishantka <126539566+nishantka@users.noreply.github.com>
Date: Tue, 17 Sep 2024 14:45:49 +0530
Subject: [PATCH 3/5] MWPW-157965: Upgrade Universal Nav to Version 1.3 (#2867)

* Upgrade UNav to 1.3

* using await instead of then
---
 libs/blocks/global-navigation/global-navigation.js    |  9 +++------
 .../global-navigation/global-navigation.test.js       | 11 ++++++-----
 test/blocks/global-navigation/gnav-brand.test.js      |  3 ++-
 .../blocks/global-navigation/gnav-cross-cloud.test.js |  3 ++-
 .../global-navigation/gnav-main-nav-popup.test.js     |  3 ++-
 test/blocks/global-navigation/gnav-main-nav.test.js   |  3 ++-
 test/blocks/global-navigation/gnav-profile.test.js    |  3 ++-
 test/blocks/global-navigation/gnav-promo.test.js      |  4 ++--
 test/blocks/global-navigation/gnav-search.test.js     |  3 ++-
 test/blocks/global-navigation/test-utilities.js       |  2 ++
 10 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
index 5722a778c9..bd21c226ae 100644
--- a/libs/blocks/global-navigation/global-navigation.js
+++ b/libs/blocks/global-navigation/global-navigation.js
@@ -521,7 +521,7 @@ class Gnav {
       return 'linux';
     };
 
-    const unavVersion = new URLSearchParams(window.location.search).get('unavVersion') || '1.1';
+    const unavVersion = new URLSearchParams(window.location.search).get('unavVersion') || '1.3';
     await Promise.all([
       loadScript(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js`),
       loadStyles(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.css`),
@@ -608,9 +608,6 @@ class Gnav {
       locale,
       imsClientId: window.adobeid?.client_id,
       theme: isDarkMode() ? 'dark' : 'light',
-      onReady: () => {
-        this.decorateAppPrompt({ getAnchorState: () => window.UniversalNav.getComponent?.('app-switcher') });
-      },
       analyticsContext: {
         consumer: {
           name: 'adobecom',
@@ -627,8 +624,8 @@ class Gnav {
 
     // Exposing UNAV config for consumers
     CONFIG.universalNav.universalNavConfig = getConfiguration();
-    window.UniversalNav(CONFIG.universalNav.universalNavConfig);
-
+    await window.UniversalNav(CONFIG.universalNav.universalNavConfig);
+    this.decorateAppPrompt({ getAnchorState: () => window.UniversalNav.getComponent?.('app-switcher') });
     isDesktop.addEventListener('change', () => {
       window.UniversalNav.reload(CONFIG.universalNav.universalNavConfig);
     });
diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js
index 945328606d..b260ee3f21 100644
--- a/test/blocks/global-navigation/global-navigation.test.js
+++ b/test/blocks/global-navigation/global-navigation.test.js
@@ -10,6 +10,7 @@ import {
   viewports,
   unavLocalesTestData,
   analyticsTestData,
+  unavVersion,
 } from './test-utilities.js';
 import { setConfig, getLocale } from '../../../libs/utils/utils.js';
 import initGnav, { getUniversalNavLocale, osMap } from '../../../libs/blocks/global-navigation/global-navigation.js';
@@ -27,7 +28,7 @@ describe('global navigation', () => {
   before(() => {
     document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
     <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
-    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
     `;
   });
 
@@ -366,8 +367,8 @@ describe('global navigation', () => {
         toFake: ['setTimeout'],
         shouldAdvanceTime: true,
       });
-      window.UniversalNav = sinon.spy();
-      window.UniversalNav.reload = sinon.spy();
+      window.UniversalNav = sinon.spy(() => Promise.resolve());
+      window.UniversalNav.reload = sinon.spy(() => Promise.resolve());
       // eslint-disable-next-line no-underscore-dangle
       window._satellite = { track: sinon.spy() };
       window.alloy = () => new Promise((resolve) => {
@@ -578,7 +579,7 @@ describe('global navigation', () => {
       document.head.innerHTML = `<meta name="app-prompt" content="off" />
       <link rel="icon" href="/libs/img/favicons/favicon.ico" size="any" />
       <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
-      <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+      <script src="https://stage.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
       `;
       const gnav = await createFullGlobalNavigation({});
       gnav.decorateAppPrompt();
@@ -592,7 +593,7 @@ describe('global navigation', () => {
       <meta name="app-prompt-path" content="https://dismiss-pep--milo--adobecom.hlx.page/drafts/raghavs/pep-prompt-content"/>
       <link rel="icon" href="/libs/img/favicons/favicon.ico" size="any" />
       <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
-      <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+      <script src="https://stage.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
       `;
       const gnav = await createFullGlobalNavigation({});
       window.adobeIMS = { isSignedInUser: () => true };
diff --git a/test/blocks/global-navigation/gnav-brand.test.js b/test/blocks/global-navigation/gnav-brand.test.js
index 3150a0fa7f..9b0917fbed 100644
--- a/test/blocks/global-navigation/gnav-brand.test.js
+++ b/test/blocks/global-navigation/gnav-brand.test.js
@@ -4,6 +4,7 @@ import {
   createFullGlobalNavigation,
   selectors,
   isElementVisible,
+  unavVersion,
 } from './test-utilities.js';
 import logoOnlyNav from './mocks/global-navigation-only-logo.plain.js';
 import brandOnlyNav from './mocks/global-navigation-only-brand.plain.js';
@@ -15,7 +16,7 @@ describe('brand', () => {
   before(() => {
     document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
     <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
-    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
     `;
   });
 
diff --git a/test/blocks/global-navigation/gnav-cross-cloud.test.js b/test/blocks/global-navigation/gnav-cross-cloud.test.js
index 9bd2986ddd..000fc0372b 100644
--- a/test/blocks/global-navigation/gnav-cross-cloud.test.js
+++ b/test/blocks/global-navigation/gnav-cross-cloud.test.js
@@ -4,6 +4,7 @@ import {
   createFullGlobalNavigation,
   selectors,
   isElementVisible,
+  unavVersion,
 } from './test-utilities.js';
 import globalNavigationCrossCloud from './mocks/global-navigation-cross-cloud.plain.js';
 
@@ -11,7 +12,7 @@ describe('Cross Cloud Menu', () => {
   before(() => {
     document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
     <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
-    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
     `;
   });
 
diff --git a/test/blocks/global-navigation/gnav-main-nav-popup.test.js b/test/blocks/global-navigation/gnav-main-nav-popup.test.js
index 25e80c908b..3799a07514 100644
--- a/test/blocks/global-navigation/gnav-main-nav-popup.test.js
+++ b/test/blocks/global-navigation/gnav-main-nav-popup.test.js
@@ -5,6 +5,7 @@ import {
   createFullGlobalNavigation,
   selectors,
   isElementVisible,
+  unavVersion,
 } from './test-utilities.js';
 import { toFragment } from '../../../libs/blocks/global-navigation/utilities/utilities.js';
 import globalNavigationMock from './mocks/global-navigation.plain.js';
@@ -14,7 +15,7 @@ describe('main nav popups', () => {
   before(() => {
     document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
     <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
-    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
     `;
   });
 
diff --git a/test/blocks/global-navigation/gnav-main-nav.test.js b/test/blocks/global-navigation/gnav-main-nav.test.js
index ef984078f2..5a09cb5518 100644
--- a/test/blocks/global-navigation/gnav-main-nav.test.js
+++ b/test/blocks/global-navigation/gnav-main-nav.test.js
@@ -7,6 +7,7 @@ import {
   selectors,
   isElementVisible,
   viewports,
+  unavVersion,
 } from './test-utilities.js';
 import { isDesktop, setActiveLink, toFragment } from '../../../libs/blocks/global-navigation/utilities/utilities.js';
 import globalNavigationActiveMock from './mocks/global-navigation-active.plain.js';
@@ -15,7 +16,7 @@ describe('main nav', () => {
   before(() => {
     document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
     <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
-    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
     `;
   });
 
diff --git a/test/blocks/global-navigation/gnav-profile.test.js b/test/blocks/global-navigation/gnav-profile.test.js
index bc1210e4cd..0594568243 100644
--- a/test/blocks/global-navigation/gnav-profile.test.js
+++ b/test/blocks/global-navigation/gnav-profile.test.js
@@ -5,6 +5,7 @@ import {
   createFullGlobalNavigation,
   selectors,
   isElementVisible,
+  unavVersion,
 } from './test-utilities.js';
 import globalNavigationMock from './mocks/global-navigation.plain.js';
 
@@ -12,7 +13,7 @@ describe('profile', () => {
   before(() => {
     document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
     <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
-    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
     `;
   });
 
diff --git a/test/blocks/global-navigation/gnav-promo.test.js b/test/blocks/global-navigation/gnav-promo.test.js
index 972dd297db..eede5833c5 100644
--- a/test/blocks/global-navigation/gnav-promo.test.js
+++ b/test/blocks/global-navigation/gnav-promo.test.js
@@ -1,13 +1,13 @@
 /* eslint-disable no-restricted-syntax */
 import { expect } from '@esm-bundle/chai';
-import { createFullGlobalNavigation } from './test-utilities.js';
+import { createFullGlobalNavigation, unavVersion } from './test-utilities.js';
 import { toFragment } from '../../../libs/blocks/global-navigation/utilities/utilities.js';
 
 describe('Promo', () => {
   before(() => {
     document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
     <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
-    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
     `;
   });
 
diff --git a/test/blocks/global-navigation/gnav-search.test.js b/test/blocks/global-navigation/gnav-search.test.js
index c25ef8b9f0..17f24b286c 100644
--- a/test/blocks/global-navigation/gnav-search.test.js
+++ b/test/blocks/global-navigation/gnav-search.test.js
@@ -7,6 +7,7 @@ import {
   selectors,
   isElementVisible,
   mockRes,
+  unavVersion,
 } from './test-utilities.js';
 
 const ogFetch = window.fetch;
@@ -19,7 +20,7 @@ describe('search', () => {
   before(() => {
     document.head.innerHTML = `<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any">
     <script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
-    <script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
+    <script src="https://stage.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
     `;
   });
 
diff --git a/test/blocks/global-navigation/test-utilities.js b/test/blocks/global-navigation/test-utilities.js
index 70be91e0ca..9e38a606b8 100644
--- a/test/blocks/global-navigation/test-utilities.js
+++ b/test/blocks/global-navigation/test-utilities.js
@@ -77,6 +77,8 @@ export const analyticsTestData = {
   'unc|click|markUnread': 'Mark Notification as unread',
 };
 
+export const unavVersion = '1.3';
+
 export const unavLocalesTestData = Object.entries(LANGMAP).reduce((acc, curr) => {
   const result = [];
   const [locale, prefixes] = curr;

From 8da3683bbadc69cf645030c421f1f82841289285 Mon Sep 17 00:00:00 2001
From: Vivian A Goodrich <101133187+vgoodric@users.noreply.github.com>
Date: Tue, 17 Sep 2024 03:15:56 -0600
Subject: [PATCH 4/5] MWPW-158462 [MEP] any-marquee-section simplified selector
 (#2884)

* MWPW-158462 [MEP] any-marquee-section simplified selector

* unit test update

* MWPW-158475 [MEP] classes that end in a number are modified when they should not be (#2886)

* unit test update

* MWPW-158475 [MEP] classes that end in a number are modified when they should not be

* unit test repair

* unit test repair

* MWPW-157686 [MEP] Cannot spoof an experience that exists in manifest but not in Target (#2887)

* working so far

* lint update

* update something merging stage did not
---
 .../personalization/personalization.js        | 40 +++++++++----------
 .../mocks/manifestSectionBlock.json           |  2 +-
 .../modifyNonFragmentSelector.test.js         | 10 ++++-
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/libs/features/personalization/personalization.js b/libs/features/personalization/personalization.js
index b51101f720..dc0ae2c1fb 100644
--- a/libs/features/personalization/personalization.js
+++ b/libs/features/personalization/personalization.js
@@ -1,9 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-console */
 
-import {
-  createTag, getConfig, loadLink, loadScript, localizeLink, updateConfig,
-} from '../../utils/utils.js';
+import { createTag, getConfig, loadLink, loadScript, localizeLink } from '../../utils/utils.js';
 import { getEntitlementMap } from './entitlements.js';
 
 /* c8 ignore start */
@@ -359,6 +357,7 @@ function modifySelectorTerm(termParam) {
     'primary-cta': 'strong a',
     'secondary-cta': 'em a',
     'action-area': '*:has(> em a, > strong a)',
+    'any-marquee-section': 'main > div:has([class*="marquee"])',
     'any-marquee': '[class*="marquee"]',
     'any-header': ':is(h1, h2, h3, h4, h5, h6)',
   };
@@ -372,7 +371,7 @@ function modifySelectorTerm(termParam) {
   const startText = startTextMatch ? startTextMatch[0].toLowerCase() : '';
   const startTextPart1 = startText.split(/\.|:/)[0];
   const endNumberMatch = term.match(/[0-9]*$/);
-  const endNumber = endNumberMatch ? endNumberMatch[0] : '';
+  const endNumber = endNumberMatch && startText.match(/^[a-zA-Z]/) ? endNumberMatch[0] : '';
   if (!startText || htmlEls.includes(startText)) return term;
   if (otherSelectors.includes(startText)) {
     term = term.replace(startText, '> div');
@@ -791,28 +790,13 @@ export async function getManifestConfig(info, variantOverride = false) {
   }
 
   manifestConfig.manifestPath = normalizePath(manifestPath);
-  const selectedVariantName = await getPersonalizationVariant(
+  manifestConfig.selectedVariantName = await getPersonalizationVariant(
     manifestConfig.manifestPath,
     manifestConfig.variantNames,
     variantLabel,
   );
 
-  if (selectedVariantName && manifestConfig.variantNames.includes(selectedVariantName)) {
-    manifestConfig.run = true;
-    manifestConfig.selectedVariantName = selectedVariantName;
-    manifestConfig.selectedVariant = manifestConfig.variants[selectedVariantName];
-  } else {
-    /* c8 ignore next 2 */
-    manifestConfig.selectedVariantName = 'default';
-    manifestConfig.selectedVariant = 'default';
-  }
-  const placeholders = manifestPlaceholders || data?.placeholders?.data;
-  if (placeholders) {
-    updateConfig(
-      parsePlaceholders(placeholders, getConfig(), manifestConfig.selectedVariantName),
-    );
-  }
-
+  manifestConfig.placeholderData = manifestPlaceholders || data?.placeholders?.data;
   manifestConfig.name = name;
   manifestConfig.manifest = manifestPath;
   manifestConfig.manifestUrl = manifestUrl;
@@ -900,6 +884,20 @@ export function cleanAndSortManifestList(manifests) {
       } else {
         manifestObj[manifest.manifestPath] = manifest;
       }
+
+      const manifestConfig = manifestObj[manifest.manifestPath];
+      const { selectedVariantName, variantNames, placeholderData } = manifestConfig;
+      if (selectedVariantName && variantNames.includes(selectedVariantName)) {
+        manifestConfig.run = true;
+        manifestConfig.selectedVariantName = selectedVariantName;
+        manifestConfig.selectedVariant = manifestConfig.variants[selectedVariantName];
+      } else {
+        /* c8 ignore next 2 */
+        manifestConfig.selectedVariantName = 'default';
+        manifestConfig.selectedVariant = 'default';
+      }
+
+      parsePlaceholders(placeholderData, getConfig(), manifestConfig.selectedVariantName);
     } catch (e) {
       console.warn(e);
       window.lana?.log(`MEP Error parsing manifests: ${e.toString()}`);
diff --git a/test/features/personalization/mocks/manifestSectionBlock.json b/test/features/personalization/mocks/manifestSectionBlock.json
index 1a5809b040..08be67a8f6 100644
--- a/test/features/personalization/mocks/manifestSectionBlock.json
+++ b/test/features/personalization/mocks/manifestSectionBlock.json
@@ -5,7 +5,7 @@
   "data": [
     {
       "action": "removeContent",
-      "selector": ".custom-block1",
+      "selector": ".custom-block-1",
       "page filter (optional)": "",
       "param-newoffer=123": "",
       "all": "on"
diff --git a/test/features/personalization/modifyNonFragmentSelector.test.js b/test/features/personalization/modifyNonFragmentSelector.test.js
index fd3cdbf893..58b6813b4b 100644
--- a/test/features/personalization/modifyNonFragmentSelector.test.js
+++ b/test/features/personalization/modifyNonFragmentSelector.test.js
@@ -117,7 +117,7 @@ const values = [
   },
   {
     b: 'section1 .random-block2',
-    a: 'main > div:nth-child(1) .random-block:nth-child(2 of .random-block)',
+    a: 'main > div:nth-child(1) .random-block2',
   },
   {
     b: 'main > section30',
@@ -143,6 +143,14 @@ const values = [
     b: 'any-marquee ul li:nth-child(2)',
     a: '[class*="marquee"] ul li:nth-child(2)',
   },
+  {
+    b: 'any-marquee-section',
+    a: 'main > div:has([class*="marquee"])',
+  },
+  {
+    b: '.aside03',
+    a: '.aside03',
+  },
 ];
 describe('test different values', () => {
   values.forEach((value) => {

From 9323f287a1aad93e7b41d56c637c4b48737d4393 Mon Sep 17 00:00:00 2001
From: cmiqueo <64917520+cmiqueo@users.noreply.github.com>
Date: Tue, 17 Sep 2024 13:10:55 -0700
Subject: [PATCH 5/5] MWPW-158353: Updates configurator label to Carousel
 Animation Style (#2888)

Co-authored-by: milo-pr-merge[bot] <169241390+milo-pr-merge[bot]@users.noreply.github.com>
---
 libs/blocks/caas-config/caas-config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/blocks/caas-config/caas-config.js b/libs/blocks/caas-config/caas-config.js
index db1859b792..48fc34b052 100644
--- a/libs/blocks/caas-config/caas-config.js
+++ b/libs/blocks/caas-config/caas-config.js
@@ -660,7 +660,7 @@ const PaginationPanel = () => {
       options=${defaultOptions.paginationType}
     />
     <${Select}
-      label="Animation Style"
+      label="Carousel Animation Style"
       prop="paginationAnimationStyle"
       options=${defaultOptions.paginationAnimationStyle}
     />