white-space-pre-wrap-trailing-spaces-021.html (1894B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Text Test: Overflowing hanging spaces should be ink overflow</title> 6 7 <!-- 8 9 Issue 4297: [css-text-3] Hanging spaces can't be scrollable overflow 10 https://github.com/w3c/csswg-drafts/issues/4297 11 12 Resolution: 13 Hanging spaces are ink overflow by default. 14 UAs may make them scrollable overflow when 15 they think that would be useful. 16 17 --> 18 19 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 20 <link rel="help" href="https://www.w3.org/TR/css-text-3/#hanging"> 21 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink"> 22 <link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-021-ref.html"> 23 24 <meta content="should" name="flags"> 25 <meta content="This test checks that overflowing hanging spaces at end of line are treated as ink overflow. The overflowing hanging spaces at end of line should not extend the scrollable overflow area of the tested box. Therefore the no horizontal scrollbar condition of the test." name="assert"> 26 27 <style> 28 div 29 { 30 border: black solid 2px; 31 font-family: monospace; 32 font-size: 32px; 33 line-height: 1.25; /* computes to 40px */ 34 margin-bottom: 0.25em; 35 width: 16ch; 36 } 37 38 span 39 { 40 background-color: yellow; 41 } 42 43 div#test 44 { 45 overflow: auto; 46 white-space: pre-wrap; 47 } 48 49 div#reference 50 { 51 white-space: normal; 52 } 53 </style> 54 55 <p>Test passes if the characters inside each black-bordered rectangle are laid out identically and if each black-bordered rectangle does not generate a horizontal scrollbar. 56 57 <div id="test">Lorem ipsum.<span> </span>Dolor 58 sit amet. <br>consectetur</div> 59 60 <div id="reference">Lorem ipsum.<span> </span><br> 61 Dolor<br> 62 sit amet. <br> 63 consectetur</div>