<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers">
<style>
  body {
    margin: 0;
  }
  .table {
    display: table;
    width: 100%;
  }
  .header {
    display: table-header-group;
    break-inside: avoid;
  }
  .filler {
    display: table-row;
    break-inside: avoid;
    height: 2600px;
  }
  .header > * {
    /* Don't make stuff too tall. We want everything (in the header) to be
       within the viewport. */
    height: 10px;
  }
</style>
<div style="columns:3; column-fill:auto; width:600px; height:5000px;">
  <div class="table">
    <div class="header">
      <input type="text" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
      <input type="submit" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
      <input type="radio">
      <input type="checkbox">
      <input type="date">
      <input type="range">
      <input type="number">
      <input type="color">
      <input type="password">
      <canvas id="canvas" style="width:40px; height:40px;"></canvas>
      <iframe src="data:text/html,<div style='position:absolute; height:200px;'>x</div>" style="width:100px; height:40px;"></iframe>
      <div style="overflow:scroll; width:100px; height:30px;">
        <div style="height:200px;"></div>
      </div>
      <select size="0"><option>xxx</option></select>
      <select size="5"><option>xxx</option></select>
      <svg style="width:100px; height:30px;">
        <circle cx="20" cy="15" r="7" fill="hotpink"/>
      </svg>
      <textarea style="width:50px; height:30px;">
        xxxxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxx
      </textarea>
      <video style="width:100px; height:50px;" controls></video>
      <video style="width:100px; height:50px;"></video>
      <meter></meter>
      <button>xxxxxx</button>
      <fieldset><legend>epic</legend></fieldset>
      <!-- The image src is a 1x1 green pixel. -->
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGhg+A8AAoQBgNXA8F0AAAAASUVORK5CYII=">
    </div>
    <div class="filler"></div>
    <div class="filler"></div>
    <div class="filler"></div>
  </div>
</div>
<script>
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = "hotpink";
  ctx.fillRect(0, 0, 50, 50);

  function paintDone() {
    return new Promise(function(resolve) {
      requestAnimationFrame(()=> {
        requestAnimationFrame(()=> {
          resolve();
        });
      });
    });
  }
  async function toggleStyles(elements) {
    for (const display of ['block', 'inline-block', 'inline']) {
      for (const position of ['static', 'relative']) {
        for (const cssfloat of ['none', 'left']) {
          for (var elm of elements) {
            elm.style.display = display;
            elm.style.position = position;
            elm.style.cssFloat = cssfloat;
          }
          await paintDone();
          for (var elm of elements) {
            var rect = elm.getClientRects()[0];
            var x = rect.left;
            var y = rect.top;
            x += 2;
            y += 2;
            document.elementFromPoint(x, y);
            document.elementFromPoint(x + 200, y);
            document.elementFromPoint(x + 400, y);
          }
        }
      }
    }
  }

  toggleStyles(document.querySelectorAll(".header > *"));
</script>
