<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Heavy source page</title>
  <style>
    body {
      margin: 0;
      font: 14px/1.5 system-ui, sans-serif;
      color: #222;
    }
    header {
      padding: 12px 16px;
      background: linear-gradient(90deg, #667eea, #764ba2);
      color: #fff;
    }
    header h1 { margin: 0; font-size: 20px; }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 12px 16px;
    }
    .card {
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 8px;
      background: #fafaff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    }
    .card b { color: #764ba2; }
    .swatch {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 6px;
      vertical-align: -1px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Heavy DOM — the page is far taller than the iframe</h1>
  </header>
  <div class="grid" id="grid"></div>
  <script>
    // ~900 nodes, page ends up several thousand px tall
    const grid = document.getElementById('grid')
    let html = ''
    for (let i = 1; i <= 300; i++) {
      const hue = (i * 7) % 360
      html += `<div class="card">
        <span class="swatch" style="background:hsl(${hue} 70% 55%)"></span>
        <b>Item ${i}</b><br>lorem ipsum dolor sit amet, consectetur
      </div>`
    }
    grid.innerHTML = html
    document.title = 'scrollHeight: ' + document.documentElement.scrollHeight
  </script>
</body>
</html>