change-text-node-data-center.html | Explore in Territory

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="change-text-node-data-expected.html">
<style>
div {
  display: inline-block;
  float: left;
  background: silver;
  width: 100px;
  height: 100px;
  margin: 20px;
  font-size: 25px;
  overflow: hidden;
  contain: layout size;
  line-height: 1;
  text-align: center;
}
.first-line::first-line {
  font-size: 30px;
}
</style>
<script>
  const originalValues = [
    "foo",
    "foofoo foofoo",
    "foofoofoo foofoofoo foofoofoo foofoofoo foofoofoo",
    "foo",
    "foo foo foo foo foo",
    "foo",
  ];
  const newValues = [
    "baar",
    "baarbaar baarbaar",
    "baarbaarbaar baarbaarbaar baarbaarbaar baarbaarbaar baarbaarbaar",
    "baar baar baar baar",
    "baar",
    "b \u55e8",
  ];

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

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

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

  function runTest() {
    setupTest();
    document.body.offsetLeft;
    changeTextNodeData();
  }
</script>
<body onload="runTest();">
</body>
chromium/third_party/blink/web_tests/fast/css/containment/change-text-node-data-center.html
