css3-text-line-break-baspglwj-006.html (1978B)
1 <!DOCTYPE html> 2 <html lang="en" > 3 <head> 4 <meta charset="utf-8"/> 5 <title>CSS3 Text, linebreaks: U+2005 FOUR-PER-EM SPACE</title> 6 <link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> 7 <link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <meta name='flags' content='should dom'> 11 <meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters."> 12 <style type='text/css'> 13 .test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; } 14 #breakable2 { white-space: pre-line; } 15 #breakable3 { white-space: pre-wrap; } 16 #breakable4 { white-space: break-spaces; } 17 </style> 18 </head> 19 <body> 20 21 22 <div class="test"> 23 <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> 24 <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> 25 <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> 26 <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> 27 </div> 28 29 30 <!--Notes: 31 32 Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script> 33 34 --> 35 <script> 36 test(function() { 37 assert_true(document.getElementById('breakable').offsetHeight > 35); 38 }, "white-space:normal"); 39 test(function() { 40 assert_true(document.getElementById('breakable2').offsetHeight > 35); 41 }, "white-space:pre-line"); 42 test(function() { 43 assert_true(document.getElementById('breakable3').offsetHeight > 35); 44 }, "white-space:pre-wrap"); 45 test(function() { 46 assert_true(document.getElementById('breakable4').offsetHeight > 35); 47 }, "white-space:break-spaces"); 48 </script> 49 50 <div id='log'></div> 51 52 </body> 53 </html>