text-wrap-balance-001.html (865B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 #container { 7 width: 20ch; 8 } 9 .balance { 10 text-wrap: balance; 11 } 12 </style> 13 <div id="container"></div> 14 <script> 15 const container = document.getElementById('container'); 16 for (const text of [ 17 'Balancing should', 18 'Balancing should not change', 19 'Balancing should not change the number of lines.', 20 ]) { 21 const normal = document.createElement('div'); 22 const balance = document.createElement('div'); 23 normal.textContent = text; 24 balance.textContent = text; 25 balance.classList.add('balance'); 26 container.appendChild(normal); 27 container.appendChild(balance); 28 test(() => { 29 assert_equals(normal.offsetHeight, balance.offsetHeight); 30 }); 31 } 32 </script>