Function applyStaticLayout

src/core/static-layout.js:100–202

(element)

 * @return {Layout_Enum}
 */
export function applyStaticLayout(element) {
  // Check if the layout has already been done by server-side rendering or
  // client-side rendering and the element was cloned. The document may be
  // visible to the user if the boilerplate was removed so please take care in
  // making changes here.
  const completedLayoutAttr = element.getAttribute('i-amphtml-layout');
  if (completedLayoutAttr) {
    const layout = parseLayout(completedLayoutAttr);
    devAssert(layout);

    if (
      (layout == Layout_Enum.RESPONSIVE || layout == Layout_Enum.INTRINSIC) &&
      element.firstElementChild
    ) {
      // Find sizer, but assume that it might not have been parsed yet.
      element.sizerElement =
        /** @type {?HTMLElement} */ (
          element.querySelector('i-amphtml-sizer')
        ) || undefined;
      element.sizerElement?.setAttribute('slot', 'i-amphtml-svc');
    } else if (layout == Layout_Enum.NODISPLAY) {
      toggle(element, false);
    }
    return layout;
  }

  // If the layout was already done by server-side rendering (SSR), then the
  // code below will not run. Any changes below will necessitate a change to SSR
  // and must be coordinated with caches that implement SSR. See bit.ly/amp-ssr.
  const {height, layout, width} = getEffectiveLayoutInternal(element);

  // Apply UI.
  element.classList.add(getLayoutClass(layout));
  if (isLayoutSizeDefined(layout)) {
    element.classList.add('i-amphtml-layout-size-defined');
  }
  if (layout == Layout_Enum.NODISPLAY) {
    // CSS defines layout=nodisplay automatically with `display:none`. Thus
    // no additional styling is needed.
    toggle(element, false);
  } else if (layout == Layout_Enum.FIXED) {
    setStyles(element, {
      width: devAssertString(width),
      height: devAssertString(height),
    });
  } else if (layout == Layout_Enum.FIXED_HEIGHT) {
    setStyle(element, 'height', devAssertString(height));
  } else if (layout == Layout_Enum.RESPONSIVE) {
    const sizer = element.ownerDocument.createElement('i-amphtml-sizer');
    sizer.setAttribute('slot', 'i-amphtml-svc');
    const heightNumeral = getLengthNumeral(height);
    const widthNumeral = getLengthNumeral(width);
    devAssertNumber(heightNumeral);
    devAssertNumber(widthNumeral);
    setStyles(sizer, {
      paddingTop: (heightNumeral / widthNumeral) * 100 + '%',
    });
    element.insertBefore(sizer, element.firstChild);