white-space-intrinsic-size-013.html (2482B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Text Test: min-content sizing and 'white-space: pre-wrap'</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property"> 9 <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2"> 10 <link rel="help" href="https://www.w3.org/TR/css-text-3/#hanging"> 11 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 13 14 <meta content="When 'white-space' is 'pre-wrap', white spaces at the end of the line are preserved. In this test, the overflowing end-of-line white spaces following the 'A', the 'GH', the 'MNO' and the 'WXYZ' conditionally 'hang' while they do not affect the intrinsic min-content size." name="assert"> 15 16 <style> 17 div 18 { 19 color: transparent; 20 /* 21 so that background-color can 22 shine through the "A", the "GH", 23 the "MNO" and the "WXYZ" glyphs 24 */ 25 font-family: Ahem; 26 font-size: 25px; 27 line-height: 1; 28 width: 0; 29 /* 30 'width: 0' will trigger 31 min-content size 32 for div#min-sized-parent 33 */ 34 } 35 36 div#test-overlapped-red 37 { 38 background-color: red; 39 float: left; 40 white-space: pre-wrap; 41 width: auto; 42 } 43 44 div#reference-overlapping-green 45 { 46 background-color: green; 47 position: absolute; 48 width: auto; 49 } 50 </style> 51 52 <p>Test passes if there is a filled green square and <strong>no red</strong>. 53 54 <div id="min-sized-parent"> 55 56 <div id="test-overlapped-red">A 
GH 
MNO 
WXYZ </div> 57 58 </div> 59 60 <!-- 61 62 The sequences of white spaces following 63 the "A", the "GH", the "MNO" and the 64 "WXYZ" do not get collapsed. That is by 65 definition of 'white-space: pre-wrap'. 66 They 'hang': they behave like 'ink 67 overflow' while not contributing to 68 min-content sizing. 69 70 The line feeds (
) wrap 71 content to the next line box. 72 73 Since div#test-overlapped-red 74 is floated and since its parent in 75 the flow is 0-width, then the float 76 is min-content sized. 77 Since the widest line box 78 is created by the 4th line box 79 (due to "WXYZ" content), then 80 div#test-overlapped-red 81 must not be wider than 100px. 82 83 --> 84 85 <div id="reference-overlapping-green">1234<br>5678<br>90AB<br>CDEF</div>