| <!DOCTYPE html> | |
| <meta charset="UTF-8"> | |
| <title>CSS Text Test: max-content sizing and 'white-space: pre-wrap'</title> | |
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | |
| <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> | |
| <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property"> | |
| <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2"> | |
| <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#auto-box-sizes"> | |
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> | |
| <meta content="" name="flags"> | |
| <meta content="When 'white-space' is 'pre-wrap', preserved white spaces at the beginning and at the end of the line affect the intrinsic max-content size." name="assert"> | |
| <style> | |
| div#wrapper | |
| { | |
| color: transparent; | |
| /* | |
| so that background colors can | |
| shine through the A, G, M, Z glyphs | |
| */ | |
| font-family: Ahem; | |
| font-size: 25px; | |
| line-height: 1; | |
| width: 7em; | |
| /* | |
| 'width: 7em' gives more inline-size | |
| than needed or required by each | |
| overlapping-test-green <div>s. | |
| If an implementation goes wrong | |
| and makes one of | |
| overlapping-test-green <div>s | |
| wider than 4em, then we will see | |
| red. | |
| */ | |
| } | |
| div#overlapped-reference-red | |
| { | |
| background-color: red; | |
| height: 4em; | |
| position: absolute; | |
| width: 4em; | |
| z-index: -1; | |
| } | |
| div.overlapping-test-green | |
| { | |
| background: linear-gradient(to right, green 4em, red 3em); | |
| /* | |
| If one of the overlapping-test-green <div>s become wider | |
| than 4em, then we will see the part beyond 4em of this | |
| linear-gradient background which is red. | |
| https://www.w3.org/TR/css-images-3/#linear-gradients | |
| */ | |
| float: left; | |
| /* | |
| [ | |
| max-content inline size: | |
| The box's "ideal" size in the inline axis. Usually | |
| the narrowest inline size it could take while fitting | |
| around its contents if none of the soft wrap | |
| opportunities within the box were taken. | |
| ] | |
| https://www.w3.org/TR/css-sizing-3/#max-content-inline-size | |
| */ | |
| white-space: pre-wrap; | |
| } | |
| </style> | |
| <p>Test passes if there is a filled green square and <strong>no red</strong>. | |
| <div id="wrapper"> | |
| <div id="overlapped-reference-red"></div> | |
| <div class="overlapping-test-green">A </div> | |
| <div class="overlapping-test-green"> G </div> | |
| <div class="overlapping-test-green"> M </div> | |
| <div class="overlapping-test-green"> Z</div> | |
| </div> |