improve structure setup tests, implement viewport is content functionality and fix body tabindex destroy

packages/overlayscrollbars/src/initialization.ts

@@ -101,8 +101,10 @@ export type InitializationTargetObject = PartialInitialization & {
 /** The initialization target. */
 export type InitializationTarget = InitializationTargetElement | InitializationTargetObject;
 
-const resolveInitialization = <T>(value: any, args: any): T =>
+export const resolveInitialization = <T extends StaticInitialization | DynamicInitialization>(
-  isFunction(value) ? value.apply(0, args) : value;
+  args: any,
+  value: any
+): T => (isFunction(value) ? value.apply(0, args) : value);
 
 export const staticInitializationElement = <Args extends any[]>(
   args: Args,
@@ -114,8 +116,8 @@ export const staticInitializationElement = <Args extends any[]>(
     ? defaultStaticInitializationElement
     : staticInitializationElementValue;
   const resolvedInitialization = resolveInitialization<StaticInitialization>(
-    staticInitialization,
+    args,
-    args
+    staticInitialization
   );
   return resolvedInitialization || fallbackStaticInitializationElement.apply(0, args);
 };
@@ -130,8 +132,8 @@ export const dynamicInitializationElement = <Args extends any[]>(
     ? defaultDynamicInitializationElement
     : dynamicInitializationElementValue;
   const resolvedInitialization = resolveInitialization<DynamicInitialization>(
-    dynamicInitialization,
+    args,
-    args
+    dynamicInitialization
   );
   return (
     !!resolvedInitialization &&

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts

@@ -36,6 +36,7 @@ import { getPlugins, scrollbarsHidingPluginName } from '~/plugins';
 import {
   staticInitializationElement as generalStaticInitializationElement,
   dynamicInitializationElement as generalDynamicInitializationElement,
+  resolveInitialization as generalResolveInitialization,
 } from '~/initialization';
 import type { ScrollbarsHidingPluginInstance } from '~/plugins/scrollbarsHidingPlugin';
 import type {
@@ -66,6 +67,7 @@ export interface StructureSetupElementsObj {
   _documentElm: Document;
   _targetIsElm: boolean;
   _viewportIsTarget: boolean;
+  _viewportIsContent: boolean;
   _viewportHasClass: (className: string, attributeClassName: string) => boolean;
   _viewportAddRemoveClass: (className: string, attributeClassName: string, add?: boolean) => void;
 }
@@ -91,8 +93,8 @@ export const createStructureSetupElements = (
   const { elements: defaultInitElements } = _getDefaultInitialization();
   const {
     host: defaultHostInitialization,
-    viewport: defaultViewportInitialization,
     padding: defaultPaddingInitialization,
+    viewport: defaultViewportInitialization,
     content: defaultContentInitialization,
   } = defaultInitElements;
   const targetIsElm = isHTMLElement(target);
@@ -113,13 +115,39 @@ export const createStructureSetupElements = (
   const wnd = ownerDocument.defaultView as Window;
   const staticInitializationElement = generalStaticInitializationElement.bind(0, [targetElement]);
   const dynamicInitializationElement = generalDynamicInitializationElement.bind(0, [targetElement]);
-  const viewportElement = staticInitializationElement(
+  const resolveInitialization = generalResolveInitialization.bind(0, [targetElement]);
+  const generateViewportElement = staticInitializationElement.bind(
+    0,
     createNewDiv,
-    defaultViewportInitialization,
+    defaultViewportInitialization
-    viewportInitialization
   );
-  const viewportIsTarget = viewportElement === targetElement;
+  const generateContentElement = dynamicInitializationElement.bind(
+    0,
+    createNewDiv,
+    defaultContentInitialization
+  );
+  const possibleViewportElement = generateViewportElement(viewportInitialization);
+  const viewportIsTarget = possibleViewportElement === targetElement;
   const viewportIsTargetBody = viewportIsTarget && isBody;
+  const possibleContentElement = !viewportIsTarget && generateContentElement(contentInitialization);
+  // edge case if passed viewportElement is contentElement:
+  // check the default contentElement
+  // if truthy (so the element would be present in the DOM) the passed element is the final content element and viewport is generated
+  // if falsy the passed element is the final viewport element and the content element is generated
+  const viewportIsContent =
+    !viewportIsTarget &&
+    isHTMLElement(possibleViewportElement) &&
+    possibleViewportElement === possibleContentElement;
+  const defaultContentElementPresent =
+    viewportIsContent && !!resolveInitialization(defaultContentInitialization);
+  const viewportIstContentViewport = defaultContentElementPresent
+    ? generateViewportElement()
+    : possibleViewportElement;
+  const viewportIsContentContent = defaultContentElementPresent
+    ? possibleContentElement
+    : generateContentElement();
+  const viewportElement = viewportIsContent ? viewportIstContentViewport : possibleViewportElement;
+  const contentElement = viewportIsContent ? viewportIsContentContent : possibleContentElement;
   const activeElm = ownerDocument.activeElement;
   const setViewportFocus = !viewportIsTarget && wnd.top === wnd && activeElm === targetElement;
   const evaluatedTargetObj: StructureSetupElementsObj = {
@@ -135,13 +163,7 @@ export const createStructureSetupElements = (
         defaultPaddingInitialization,
         paddingInitialization
       ),
-    _content:
+    _content: contentElement,
-      !viewportIsTarget &&
-      dynamicInitializationElement(
-        createNewDiv,
-        defaultContentInitialization,
-        contentInitialization
-      ),
     _viewportArrange:
       !viewportIsTarget &&
       !_nativeScrollbarsHiding &&
@@ -155,6 +177,7 @@ export const createStructureSetupElements = (
     _isBody: isBody,
     _targetIsElm: targetIsElm,
     _viewportIsTarget: viewportIsTarget,
+    _viewportIsContent: viewportIsContent,
     _viewportHasClass: (className: string, attributeClassName: string) =>
       viewportIsTarget
         ? hasAttrClass(viewportElement, dataAttributeHost, attributeClassName)
@@ -246,10 +269,14 @@ export const createStructureSetupElements = (
       attr(_viewport, tabIndexStr, '-1');
       _viewport.focus();
 
-      const off = on(ownerDocument, 'pointerdown keydown', () => {
+      const revertViewportTabIndex = () =>
         ogTabindex ? attr(_viewport, tabIndexStr, ogTabindex) : removeAttr(_viewport, tabIndexStr);
+      const off = on(ownerDocument, 'pointerdown keydown', () => {
+        revertViewportTabIndex();
         off();
       });
+
+      push(destroyFns, [revertViewportTabIndex, off]);
     } else if (activeElm && (activeElm as HTMLElement).focus) {
       (activeElm as HTMLElement).focus();
     }

packages/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts

@@ -1,4 +1,5 @@
-import { hasClass, is, isFunction, isHTMLElement } from '~/support';
+import { hasClass, is, isHTMLElement } from '~/support';
+import { resolveInitialization } from '~/initialization';
 import {
   dataAttributeHost,
   classNamePadding,
@@ -35,7 +36,8 @@ type StructureDynamicInitializationElement = Initialization['elements']['content
 const textareaId = 'textarea';
 const textareaHostId = 'host';
 const elementId = 'target';
-const dynamicContent = 'text<p>paragraph</p>';
+const dynamicContentId = 'dynamicContent';
+const dynamicContent = `text<p id="${dynamicContentId}">paragraph</p>`;
 const textareaContent = `<textarea id="${textareaId}">text</textarea>`;
 const getSnapshot = () => document.documentElement.outerHTML;
 const getTarget = (targetType: TargetType) => {
@@ -56,22 +58,30 @@ const fillBody = (
   customDOM?: (content: string, hostId: string) => string
 ) => {
   const textarea = targetType === 'textarea';
+  const hostId = textarea ? textareaHostId : elementId;
   const customDomResult =
-    customDOM &&
+    customDOM && customDOM(textarea ? textareaContent : dynamicContent, hostId);
-    customDOM(textarea ? textareaContent : dynamicContent, textarea ? textareaHostId : elementId);
   const normalDom = textarea ? textareaContent : `<div id="${elementId}">${dynamicContent}</div>`;
-  document.body.innerHTML =
+  document.body.innerHTML = `
-    targetType === 'body'
-      ? dynamicContent
-      : `
     <nav></nav>
     ${customDomResult || normalDom}
     <footer></footer>
   `;
+
+  // unwrap host if target is body
+  if (targetType === 'body') {
+    const target = document.querySelector(`#${hostId}`);
+    if (target) {
+      const { parentElement } = target;
+      parentElement!.append(...target.childNodes);
+      target.remove();
+    }
+  }
+
   return getSnapshot();
 };
 const clearBody = () => {
-  document.body.outerHTML = '';
+  document.body.innerHTML = '';
 };
 
 const getElements = (targetType: TargetType) => {
@@ -80,6 +90,10 @@ const getElements = (targetType: TargetType) => {
   const padding = document.querySelector(`.${classNamePadding}`)!;
   const viewport = document.querySelector(`.${classNameViewport}`)!;
   const content = document.querySelector(`.${classNameContent}`)!;
+  const children =
+    targetType === 'textarea'
+      ? document.querySelector(`#${textareaId}`)
+      : document.querySelector(`#${dynamicContentId}`);
 
   return {
     target,
@@ -87,13 +101,25 @@ const getElements = (targetType: TargetType) => {
     padding,
     viewport,
     content,
+    children,
   };
 };
 
-const assertCorrectDOMStructure = (targetType: TargetType, viewportIsTarget: boolean) => {
+const assertCorrectDOMStructure = (
-  const { target, host, padding, viewport, content } = getElements(targetType);
+  targetType: TargetType,
+  env: InternalEnvironment,
+  elements: StructureSetupElementsObj
+) => {
+  const { target, host, padding, viewport, content, children } = getElements(targetType);
+  const { _getDefaultInitialization } = env;
+  const { _viewportIsTarget, _viewportIsContent } = elements;
+
+  expect(children).toBeDefined();
+  expect(children!.closest(`[${dataAttributeHost}]`)).toBeTruthy();
+
+  if (_viewportIsTarget) {
+    expect(_viewportIsContent).toBe(false);
 
-  if (viewportIsTarget) {
     expect(target).toBe(host);
     expect(host).toBeTruthy();
     expect(padding).toBeFalsy();
@@ -123,7 +149,20 @@ const assertCorrectDOMStructure = (targetType: TargetType, viewportIsTarget: boo
       expect(contentElm.innerHTML).toBe(textareaContent);
     } else {
       expect(target).toBe(host);
-      expect(contentElm.innerHTML).toBe(dynamicContent);
+      expect(contentElm.innerHTML).toContain(dynamicContent);
+    }
+  }
+
+  if (_viewportIsContent) {
+    const { _target, _content, _viewport } = elements;
+    const { elements: defaultInitElements } = _getDefaultInitialization();
+    const { content: defaultContentInit } = defaultInitElements;
+    const resolvedDefaultContentInit = resolveInitialization([_target], defaultContentInit);
+
+    if (resolvedDefaultContentInit) {
+      expect(children!.parentElement).toBe(_content || _viewport);
+    } else {
+      expect(children!.parentElement).toBe(_viewport);
     }
   }
 };
@@ -160,6 +199,7 @@ const assertCorrectSetupElements = (
     _viewport,
     _content,
     _viewportIsTarget,
+    _viewportIsContent,
     _viewportHasClass,
     _viewportAddRemoveClass,
   } = elements;
@@ -215,52 +255,64 @@ const assertCorrectSetupElements = (
   const { _nativeScrollbarsHiding, _cssCustomProperties, _getDefaultInitialization } = environment;
   const { elements: defaultInitElements } = _getDefaultInitialization();
   const {
-    host: hostInitStrategy,
+    host: defaultHostInitStrategy,
-    viewport: viewportInitStrategy,
+    padding: defaultPaddingInitStrategy,
-    padding: paddingInitStrategy,
+    viewport: defaultViewportInitStrategy,
-    content: contentInitStrategy,
+    content: defaultContentInitStrategy,
   } = defaultInitElements;
   const inputIsElement = isHTMLElement(input);
   const inputAsObj = input as InitializationTargetObject;
   const styleElm = document.querySelector('style');
   const checkStrategyDependendElements = (
     elm: Element | null,
-    inputStrategy:
+    initialization:
       | StructureStaticInitializationElement
       | StructureDynamicInitializationElement
       | undefined,
-    isStaticStrategy: boolean,
+    isStaticInitialization: boolean,
-    strategy: StructureStaticInitializationElement | StructureDynamicInitializationElement,
+    defaultInitialization:
+      | StructureStaticInitializationElement
+      | StructureDynamicInitializationElement,
     kind: 'padding' | 'viewport' | 'content' | 'host'
   ) => {
-    const resolvedInputStrategy = isFunction(inputStrategy) ? inputStrategy(target) : inputStrategy;
+    const resolvedInitialization = resolveInitialization([target], initialization);
-    if (resolvedInputStrategy) {
+    const resolvedDefaultInitialization = resolveInitialization([target], defaultInitialization);
-      if (!_viewportIsTarget) {
+    if (resolvedInitialization) {
+      if (!_viewportIsTarget && !_viewportIsContent) {
         expect(elm).toBeTruthy();
       }
+      if (_viewportIsContent) {
+        if (kind === 'content') {
+          if (resolvedDefaultInitialization) {
+            expect(elm).toBeTruthy();
+          } else {
+            expect(elm).toBeFalsy();
+          }
+        } else {
+          expect(elm).toBeTruthy();
+        }
+      }
     } else {
-      if (resolvedInputStrategy === false) {
+      if (resolvedInitialization === false) {
         expect(elm).toBeFalsy();
       }
-      if (resolvedInputStrategy === undefined) {
+      if (resolvedInitialization === undefined) {
-        if (isStaticStrategy) {
+        if (isStaticInitialization) {
-          strategy = strategy as StructureStaticInitializationElement;
+          defaultInitialization = defaultInitialization as StructureStaticInitializationElement;
-          const resultingStrategy = typeof strategy === 'function' ? strategy(target) : strategy;
           if (_viewportIsTarget) {
             if (kind === 'host') {
               expect(elm).toBeTruthy();
             } else {
               expect(elm).toBeFalsy();
             }
-          } else if (resultingStrategy && !isTextarea) {
+          } else if (resolvedDefaultInitialization && !isTextarea) {
-            expect(resultingStrategy).toBe(elm);
+            expect(resolvedDefaultInitialization).toBe(elm);
           } else {
             expect(elm).toBeTruthy();
           }
         } else {
-          strategy = strategy as StructureDynamicInitializationElement;
+          defaultInitialization = defaultInitialization as StructureDynamicInitializationElement;
-          const resultingStrategy = typeof strategy === 'function' ? strategy(target) : strategy;
+          const resultIsBoolean = typeof resolvedDefaultInitialization === 'boolean';
-          const resultIsBoolean = typeof resultingStrategy === 'boolean';
           if (_viewportIsTarget) {
             if (kind === 'host') {
               expect(elm).toBeTruthy();
@@ -268,13 +320,13 @@ const assertCorrectSetupElements = (
               expect(elm).toBeFalsy();
             }
           } else if (resultIsBoolean) {
-            if (resultingStrategy) {
+            if (resolvedDefaultInitialization) {
               expect(elm).toBeTruthy();
             } else {
               expect(elm).toBeFalsy();
             }
-          } else if (resultingStrategy) {
+          } else if (resolvedDefaultInitialization) {
-            expect(elm).toBe(resultingStrategy);
+            expect(elm).toBe(resolvedDefaultInitialization);
           }
         }
       }
@@ -287,23 +339,70 @@ const assertCorrectSetupElements = (
     expect(styleElm).toBeTruthy();
   }
 
+  if (_viewportIsContent) {
+    const { content: defaultContentInit } = defaultInitElements;
+    const resolvedDefaultContentInit = resolveInitialization([_target], defaultContentInit);
+
+    if (resolvedDefaultContentInit) {
+      expect(_content).toBeTruthy();
+    } else {
+      expect(_content).toBeFalsy();
+    }
+  }
+
   if (inputIsElement) {
-    checkStrategyDependendElements(padding, undefined, false, paddingInitStrategy, 'padding');
+    checkStrategyDependendElements(
-    checkStrategyDependendElements(content, undefined, false, contentInitStrategy, 'content');
+      padding,
-    checkStrategyDependendElements(viewport, undefined, true, viewportInitStrategy, 'viewport');
+      undefined,
-    checkStrategyDependendElements(host, undefined, true, hostInitStrategy, 'host');
+      false,
+      defaultPaddingInitStrategy,
+      'padding'
+    );
+    checkStrategyDependendElements(
+      content,
+      undefined,
+      false,
+      defaultContentInitStrategy,
+      'content'
+    );
+    checkStrategyDependendElements(
+      viewport,
+      undefined,
+      true,
+      defaultViewportInitStrategy,
+      'viewport'
+    );
+    checkStrategyDependendElements(host, undefined, true, defaultHostInitStrategy, 'host');
   } else {
     const { elements: inputElements } = inputAsObj;
     const {
-      padding: inputPadding,
+      host: hostInitialization,
-      content: inputContent,
+      padding: paddingInitialization,
-      viewport: inputViewport,
+      viewport: viewportInitialization,
-      host: inputHost,
+      content: contentInitialization,
     } = inputElements || {};
-    checkStrategyDependendElements(padding, inputPadding, false, paddingInitStrategy, 'padding');
+    checkStrategyDependendElements(
-    checkStrategyDependendElements(content, inputContent, false, contentInitStrategy, 'content');
+      padding,
-    checkStrategyDependendElements(viewport, inputViewport, true, viewportInitStrategy, 'viewport');
+      paddingInitialization,
-    checkStrategyDependendElements(host, inputHost, true, hostInitStrategy, 'host');
+      false,
+      defaultPaddingInitStrategy,
+      'padding'
+    );
+    checkStrategyDependendElements(
+      content,
+      contentInitialization,
+      false,
+      defaultContentInitStrategy,
+      'content'
+    );
+    checkStrategyDependendElements(
+      viewport,
+      viewportInitialization,
+      true,
+      defaultViewportInitStrategy,
+      'viewport'
+    );
+    checkStrategyDependendElements(host, hostInitialization, true, defaultHostInitStrategy, 'host');
   }
 
   const className = 'clazz';
@@ -460,7 +559,7 @@ describe('structureSetup.elements', () => {
                 createStructureSetupElementsProxy(getTarget(targetType)),
                 currEnv
               );
-              assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+              assertCorrectDOMStructure(targetType, currEnv, elements);
               assertCorrectDestroy(snapshot, destroy);
             });
 
@@ -471,7 +570,7 @@ describe('structureSetup.elements', () => {
                 createStructureSetupElementsProxy({ target: getTarget(targetType) }),
                 currEnv
               );
-              assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+              assertCorrectDOMStructure(targetType, currEnv, elements);
               assertCorrectDestroy(snapshot, destroy);
             });
           });
@@ -495,7 +594,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -516,7 +615,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -537,7 +636,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -562,7 +661,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -584,7 +683,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -606,7 +705,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -628,7 +727,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -646,7 +745,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -662,7 +761,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -680,7 +779,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -696,7 +795,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -715,7 +814,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -734,7 +833,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -759,7 +858,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -782,7 +881,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -805,7 +904,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -828,7 +927,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -850,7 +949,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -872,7 +971,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -894,7 +993,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -916,7 +1015,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -939,7 +1038,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -962,7 +1061,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -984,7 +1083,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -1006,7 +1105,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -1028,7 +1127,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -1050,7 +1149,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -1073,7 +1172,7 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -1096,10 +1195,66 @@ describe('structureSetup.elements', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(targetType, elements._viewportIsTarget);
+                assertCorrectDOMStructure(targetType, currEnv, elements);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
+
+            describe('viewport is content', () => {
+              [
+                {
+                  testName: 'HTMLElements',
+                  getInitializationElements: () => ({
+                    host: () => document.querySelector<HTMLElement>('#host'),
+                    viewport: document.querySelector<HTMLElement>('#viewportOrContent'),
+                    content: document.querySelector<HTMLElement>('#viewportOrContent'),
+                  }),
+                },
+                {
+                  testName: 'functions',
+                  getInitializationElements: () => ({
+                    host: document.querySelector<HTMLElement>('#host'),
+                    viewport: () => document.querySelector<HTMLElement>('#viewportOrContent'),
+                    content: () => document.querySelector<HTMLElement>('#viewportOrContent'),
+                  }),
+                },
+                {
+                  testName: 'mixed',
+                  getInitializationElements: () => ({
+                    host: () => document.querySelector<HTMLElement>('#host'),
+                    viewport: document.querySelector<HTMLElement>('#viewportOrContent'),
+                    content: () => document.querySelector<HTMLElement>('#viewportOrContent'),
+                  }),
+                },
+              ].forEach(({ testName, getInitializationElements }) => {
+                test(testName, () => {
+                  const snapshot = fillBody(
+                    targetType,
+                    (content, hostId) =>
+                      `<div id="${hostId}"><div id="viewportOrContent">${content}</div></div>`
+                  );
+
+                  const [elements, destroy] = assertCorrectSetupElements(
+                    targetType,
+                    createStructureSetupElementsProxy({
+                      target: getTarget(targetType),
+                      elements: getInitializationElements(),
+                    }),
+                    currEnv
+                  );
+                  if (!elements._viewportIsTarget) {
+                    expect(elements._viewportIsContent).toBe(true);
+                  }
+                  if (elements._viewportIsContent) {
+                    expect(getElements(targetType).children!.parentElement).toBe(
+                      document.querySelector(`#viewportOrContent`)
+                    );
+                  }
+                  assertCorrectDOMStructure(targetType, currEnv, elements);
+                  assertCorrectDestroy(snapshot, destroy);
+                });
+              });
+            });
           });
         });
       });