<!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 name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400">
<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>
Codebase Browser
chromium