| <!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; |
| } |
| .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> |
