Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-text/white-space/hanging-whitespace-003.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Level 3: unconditional hanging spaces don't hang before non-overflowing conditionals</title>
<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<meta name="assert" content="Hanging can only happen at the end of a line, so unconditionally hanging spaces can only hang before conditionally hanging spaces if the latter would fully overflow">
<style>
div {
font: 25px/1 Ahem;
width: 4ch;
height: 4ch;
background:
linear-gradient(green, green) 0 1ch / 1ch 1ch no-repeat,
linear-gradient(green, green) 0 2ch / 2ch 1ch no-repeat,
linear-gradient(green, green) 1ch 3ch / 3ch 1ch no-repeat,
red;
text-align: right;
white-space: normal;
color: green;
}
.pre-wrap {
white-space: pre-wrap;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>XXXX　　<span class="pre-wrap"> </span><br>
XXX　　<span class="pre-wrap"> </span><br>
XX　　<span class="pre-wrap"> </span><br>
X　　<span class="pre-wrap"> </span></div>
<!--
With white-space: normal, an ideographic space (U+3000) hangs unconditionally,
as long as every glyph after it until the end of the line also hangs.
With white-space: pre-wrap, a sequence of spaces that is followed by a forced
line break (where the end of the block counts as a forced line break) hangs
conditionally, meaning that the part of it that doesn't fit in the line's
available width is the only one that hangs. (This is independent to whether it
would overflow the block's content area.)
Therefore, unconditional hanging glyphs before such a sequence of conditional
hanging glyphs can only hang if the conditional sequence overflows the line's
available width.
-->