white-space-intrinsic-size-018.html (2738B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Text Test: max-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="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> 9 <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property"> 10 <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2"> 11 <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#auto-box-sizes"> 12 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 13 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 14 15 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400"> 16 <meta content="When 'white-space' is 'pre', preserved white spaces at the beginning and at the end of the line affect the intrinsic max-content size." name="assert"> 17 18 <style> 19 div#wrapper 20 { 21 color: transparent; 22 /* 23 so that background colors can 24 shine through the A, G, M, Z glyphs 25 */ 26 font-family: Ahem; 27 font-size: 25px; 28 line-height: 1; 29 width: 7em; 30 /* 31 'width: 7em' gives more inline-size 32 than needed or required by each 33 overlapping-test-green <div>s. 34 If an implementation goes wrong 35 and makes one of 36 overlapping-test-green <div>s 37 wider than 4em, then we will see 38 red. 39 */ 40 } 41 42 div#overlapped-reference-red 43 { 44 background-color: red; 45 height: 4em; 46 position: absolute; 47 width: 4em; 48 z-index: -1; 49 } 50 51 div.overlapping-test-green 52 { 53 background: linear-gradient(to right, green 4em, red 3em); 54 /* 55 If one of the overlapping-test-green <div>s become wider 56 than 4em, then we will see the part beyond 4em of this 57 linear-gradient background which is red. 58 https://www.w3.org/TR/css-images-3/#linear-gradients 59 */ 60 float: left; 61 /* 62 [ 63 max-content inline size: 64 The box's "ideal" size in the inline axis. Usually 65 the narrowest inline size it could take while fitting 66 around its contents if none of the soft wrap 67 opportunities within the box were taken. 68 ] 69 https://www.w3.org/TR/css-sizing-3/#max-content-inline-size 70 */ 71 white-space: pre; 72 } 73 </style> 74 75 <p>Test passes if there is a filled green square and <strong>no red</strong>. 76 77 <div id="wrapper"> 78 79 <div id="overlapped-reference-red"></div> 80 81 <div class="overlapping-test-green">A </div> 82 83 <div class="overlapping-test-green"> G </div> 84 85 <div class="overlapping-test-green"> M </div> 86 87 <div class="overlapping-test-green"> Z</div> 88 89 </div>