| <!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> |
