async function renderPng() {
  const elem = document.getElementById("content");
  const dataUrl = await htmlToImage.toPng(elem);
  const img = new Image();
  img.src = dataUrl;
  img.style.border = "dashed red 1px";
  document.body.append(img);
}

async function renderPngFixed() {
  const elem = document.getElementById("content");
  const changes = [];
  const undoChanges = [];

  // Detect if the Chrome 99,100,101 grid bug is present
  async function testHasGridBug() {
    let isCorrect = true;
    const tempEl = document.createElement("div");
    tempEl.attachShadow({ mode: "open" });
    tempEl.shadowRoot.innerHTML = `
      <div style="display: grid; grid-template: 'a b' 1fr 'c d' 1fr / 1fr 1fr; width: 2px; height: 2px">
        <div style="grid-area: a; background: #f00;"></div>
        <div style="grid-area: c; background: #0f0;"></div>
        <div style="grid-area: d; background: #00f;"></div>
        <div style="grid-area: b; background: #000;"></div>
      </div>
    `;
    try {
      document.body.append(tempEl);
      const pixels = await htmlToImage.toPixelData(tempEl.shadowRoot.firstElementChild);
      const expecting = [255,0,0,255,0,0,0,255,0,255,0,255,0,0,255,255];
      isCorrect = JSON.stringify(expecting) === JSON.stringify(Array.from(pixels));
    } catch {
      isCorrect = false;
    } finally {
      tempEl.remove();
    }
    return !isCorrect;
  }
  const hasGridBug = await testHasGridBug();

  // Update changes and undoChanges arrays with callbacks to perform to make a
  // particular css change. We postpone making any change until all changes are fully
  // planned out.
  function changeCSS(node, cssProp, value, priority = "") {
    const startValue = node.style.getPropertyValue(cssProp);
    const startPriority = node.style.getPropertyPriority(cssProp);
    if (value === undefined) {
      // Delete
      changes.push(() => node.style.removeProperty(cssProp));
    } else {
      // Set
      changes.push(() => node.style.setProperty(cssProp, value, priority));
      undoChanges.push(() => node.style.removeProperty(cssProp));
    }
    if (startValue !== "") {
      undoChanges.push(() =>
        node.style.setProperty(cssProp, startValue, startPriority)
      );
    }
  }

  // Recursively modify CSS to workaround issues with rendering. Currently this
  // addresses two issues (Chrome grid bug & problems with rendering placeholders)
  function fixCSS(node, immediateGridChild = false) {
    // If grid bug is present and node has css style: "display: grid"
    // Change display to block and recurse on children, using fixed positioning for
    // all immediate child elements. (Keep track of changes so we can undo after)
    const needsGridFix =
      hasGridBug &&
      node.computedStyleMap &&
      node.computedStyleMap().get("display").toString() === "grid";
    if (needsGridFix) {
      const rect = node.getBoundingClientRect();
      changeCSS(node, "display", "block");
      changeCSS(node, "position", "relative");
      changeCSS(node, "height", `${rect.height}px`);
      changeCSS(node, "width", `${rect.width}px`);
      // Delete these
      changeCSS(node, "grid", undefined);
      changeCSS(node, "grid-template", undefined);
      changeCSS(node, "grid-template-columns", undefined);
      changeCSS(node, "grid-template-rows", undefined);
      changeCSS(node, "grid-template-areas", undefined);
      changeCSS(node, "grid-auto-rows", undefined);
      changeCSS(node, "grid-auto-columns", undefined);
      changeCSS(node, "grid-auto-flow", undefined);
    }
    // Use fixed positioning for immediate children of "display: grid" element
    if (immediateGridChild) {
      const parentRect = node.parentElement.getBoundingClientRect();
      const rect = node.getBoundingClientRect();
      changeCSS(node, "top", `${rect.top - parentRect.top}px`);
      changeCSS(node, "left", `${rect.left - parentRect.left}px`);
      changeCSS(node, "height", `${rect.height}px`);
      changeCSS(node, "width", `${rect.width}px`);
      changeCSS(node, "position", "absolute");
      // Delete these
      changeCSS(node, "grid-area", undefined);
      changeCSS(node, "grid-column", undefined);
      changeCSS(node, "grid-row", undefined);
      changeCSS(node, "grid-row-start", undefined);
      changeCSS(node, "grid-row-end", undefined);
      changeCSS(node, "grid-column-start", undefined);
      changeCSS(node, "grid-column-end", undefined);
    }
    // Fix issue with placeholder text not getting styled
    // I'm not sure how to pull the current pseudo element color so this is hardcoded
    if (["INPUT", "TEXTAREA"].includes(node.tagName) && node.value === "") {
      changeCSS(node, "color", "purple");
    }

    // Recurse on children
    Array.from(node.children).forEach((child) => fixCSS(child, needsGridFix));
    if (node.shadowRoot) fixCSS(node.shadowRoot);
  }
  try {
    fixCSS(elem);
    changes.forEach((f) => f());
    await renderPng();
  } finally {
    undoChanges.forEach((f) => f());
  }
}