<div class="demo-container">
  <div class="demo-controls">
    <label>
      <input type="checkbox" id="toggle-visibility">
      Enable content-visibility: auto
    </label>
  </div>
  <div class="demo-list" id="demo-list">
    <!-- Items will be generated by JavaScript -->
  </div>
</div>

<script>

</script>

.demo-container {
  margin: 2rem 0;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

.demo-controls {
  margin-bottom: 1rem;
}

.demo-list {
  overflow-x: hidden;
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 1rem;
}

.demo-item {
  overflow: hidden;
  height: 30px;
  margin: 0.5rem 0;
  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.1),
    rgba(0, 255, 0, 0.1),
    rgba(0, 0, 255, 0.1)
  );
  background-size: 200% 200%;
  animation: gradient 3s ease infinite, hueRotate 4s ease infinite,
    shadow 1s linear infinite;
  border-radius: 40px;
  text-shadow: 1px 1px 5px red, 2px 2px 10px blue, 3px 3px 15px green;
  transition-behavior: allow-discrete;
  transition: content-visibility 1s linear;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes shadow {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: none;
  }
}

@keyframes blur {
  0% {
    filter: blur(0);
  }
  50% {
    filter: blur(2px);
  }
  100% {
    filter: blur(0px);
  }
}

.demo-list.optimized .demo-item {
  content-visibility: auto;
  contain-intrinsic-size: 0 30px;
}

document.addEventListener("DOMContentLoaded", () => {
  const list = document.getElementById("demo-list");
  const toggle = document.getElementById("toggle-visibility");

  const crazyNesting = [...Array(50)].reduce(
    (acc, _, index) => {
      const innerSpan = document.createElement("span");
      innerSpan.innerText = "👨🏽‍🚀‍👨🏿‍🚀‍👩🏽‍🚀‍🤝🏿‍🤝🏽‍🤝🏻‍👨‍👩‍👦‍👦‍🇺🇳🔟";

      if (index === 0) {
        // First iteration: append first span to the div
        acc[0].appendChild(innerSpan);
      } else {
        // For subsequent iterations, append the new span to the previous span
        acc[1].appendChild(innerSpan);
      }

      // Return the div and the newly created span
      return [acc[0], innerSpan];
    },
    [document.createElement("div"), null]
  )[0];

  // Generate 4000 items
  for (let i = 0; i < 4000; i++) {
    const item = crazyNesting.cloneNode(true);
    item.className = `demo-item index-${i}`;
    list.appendChild(item);
  }

  toggle.addEventListener("change", (e) => {
    list.classList.toggle("optimized", e.target.checked);
  });
});