<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="change-text-node-data-tab-expected.html">
<style>
pre {
  display: inline-block;
  float: left;
  background: silver;
  width: 100px;
  height: 100px;
  margin: 20px;
  font-family: monospace;
  font-size: 10px;
  overflow: hidden;
  white-space: pre-wrap;
  contain: layout size;
  line-height: 1;
}
.first-line::first-line {
  font-size: 15px;
}
</style>
<script>
  const originalValues = [
    "foo",
    "foo",
  ];
  const newValues = [
    "bar bar bar",
    "bar\tbar\tbar",
  ];

  function setupTest() {
    originalValues.forEach((text) => {
      let pre = document.createElement("pre");
      pre.appendChild(document.createTextNode(text));
      document.body.appendChild(pre);
    });

    originalValues.forEach((text) => {
      let firstLinePre = document.createElement("pre");
      firstLinePre.className = "first-line";
      firstLinePre.appendChild(document.createTextNode(text));
      document.body.appendChild(firstLinePre);
    });
  }

  function changeTextNodeData() {
    let pres = document.getElementsByTagName("pre");
    for (let i = 0; i < pres.length; i++) {
      pres[i].childNodes[0].data = newValues[i % newValues.length];
    }
  }

  function runTest() {
    setupTest();
    document.body.offsetLeft;
    changeTextNodeData();
  }
</script>
<body onload="runTest();">
</body>