change-text-node-data-nowrap-align.html

<!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;
  white-space: nowrap;
  text-align: right;
}
</style>
<script>
  const originalValues = [
    "f",
    "foo",
    "foo foo foo foo foo",
    "foofoofoo foofoofoo foofoofoo foofoofoo foofoofoo"
  ];
  const newValues = [
    "Hello world! Hello world!",
    "Hheelloo-wwoorrlldd!! Hheelloo-wwoorrlldd!! Hheelloo-wwoorrlldd!!",
    "Hello",
    "Hi"
  ];

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

  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-nowrap-align.html
