line-break-ch-unit.html (1544B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: Lines of the ch unit can fit the specified number of characters</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-3/#font-relative-lengths"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 div { 8 font-family: monospace; 9 font-size: 10px; 10 line-height: 1; 11 } 12 </style> 13 <body> 14 <div id=log></div> 15 <script> 16 (function() { 17 // Test that lines do not wrap for elements of the width of 18 // 'ch' unit that have the specified number of characters. 19 let container = document.body; 20 let should_fit = []; 21 for (let i = 3; i < 100; i++) { 22 let element = document.createElement('div'); 23 element.style.width = `${i}ch`; 24 element.textContent = `0 ${'0'.repeat(i - 2)}`; 25 container.appendChild(element); 26 should_fit.push(element); 27 } 28 29 // When the number of characters is +1, it should wrap. 30 let should_wrap = []; 31 for (let i = 3; i < 100; i++) { 32 let element = document.createElement('div'); 33 element.style.width = `${i}ch`; 34 element.textContent = `0 ${'0'.repeat(i - 1)}`; 35 container.appendChild(element); 36 should_wrap.push(element); 37 } 38 39 for (let element of should_fit) { 40 test(() => { 41 assert_approx_equals(element.offsetHeight, 10, 1); 42 }, `${element.style.width} should fit`); 43 } 44 45 for (let element of should_wrap) { 46 test(() => { 47 assert_approx_equals(element.offsetHeight, 20, 1); 48 }, `${element.style.width} should wrap`); 49 } 50 })(); 51 </script> 52 </body>