white-space-intrinsic-size-016.html (2099B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Text Test: min-content sizing and 'white-space: pre'</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="match" href="../../reference/ref-filled-green-100px-square.xht"> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 12 13 <meta content="When 'white-space' is 'pre', preserved white spaces at the end of the line affect the intrinsic min-content size. Overflow-wrap makes no difference." name="assert"> 14 15 <style> 16 div 17 { 18 color: transparent; 19 /* 20 so that background-color can 21 shine through the A, G, M, Z glyphs 22 */ 23 font-family: Ahem; 24 font-size: 25px; 25 line-height: 1; 26 width: 0; 27 /* 28 This will trigger 29 min-content size 30 for div#min-sized-parent 31 */ 32 } 33 34 div#reference-overlapped-red 35 { 36 background-color: red; 37 position: absolute; 38 width: auto; 39 z-index: -1; 40 } 41 42 div.test-overlapping-green 43 { 44 background-color: green; 45 float: left; 46 white-space: pre; 47 width: auto; 48 } 49 50 div#last 51 { 52 overflow-wrap: break-word; 53 } 54 </style> 55 56 <p>Test passes if there is a filled green square and <strong>no red</strong>. 57 58 <div id="reference-overlapped-red">1234<br>567<br>89<br>0</div> 59 60 <div id="min-sized-parent"> 61 62 <div class="test-overlapping-green">A </div> 63 64 <div class="test-overlapping-green"> G </div> 65 66 <div class="test-overlapping-green"> M </div> 67 68 <div class="test-overlapping-green" id="last"> Z</div> 69 70 </div> 71 72 <!-- 73 74 The 3 white spaces following or preceding 75 the "A", "G", "M" and "Z" do not 76 get wrapped. That is by definition of 77 'white-space: pre'. 78 79 Since the div.test-overlapping-green 80 are floated and since their parent in 81 the flow is 0-width, then these floats 82 are min-content sized. 83 84 -->