text-overflow-ellipsis-003.html (1039B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1062733"> 4 <link rel="match" href="text-overflow-ellipsis-003-ref.html"> 5 <script src="/common/reftest-wait.js"></script> 6 <style> 7 .container { 8 display: flex; 9 } 10 11 .cell { 12 white-space: nowrap; 13 overflow: hidden; 14 border: 1px solid red; 15 text-overflow: ellipsis; 16 } 17 18 span { 19 display: inline-block; 20 background: green; 21 width: 30px; 22 height: 1em; 23 padding: 4px; 24 margin: 5px; 25 } 26 </style> 27 <div id="target" class="container" style="width: 200px;"> 28 <div class="cell"> 29 <span></span><span></span><span></span><span></span> 30 </div> 31 <div class="cell"> 32 <span></span><span></span><span></span><span></span> 33 </div> 34 </div> 35 <script> 36 async function runTest() { 37 await new Promise(requestAnimationFrame); 38 document.getElementById('target').style.width = '150px'; 39 40 await new Promise(requestAnimationFrame); 41 takeScreenshot(); 42 } 43 requestAnimationFrame(() => { requestAnimationFrame(() => runTest()) }); 44 </script>