css/css-text/white-space/trailing-ideographic-space-004.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 3 Test: preserved sequences of spaces and ideographic spaces at the end of line must hang</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="match" href="reference/trailing-ideographic-space-004-ref.html">
<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must hang if white-space preserves spaces.">
<style>
div {
  width: 2.5em;
  white-space: pre-wrap;
}
span { background: blue; } /* If the spaces are removed instead of hanging, there will be no blue box*/
</style>

<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
<div>ああ<span>&#x3000;&#x3000; &#x3000; &#x3000;</span>ああ</div>

<!--
We're using a 2.5em width and two references, instead of 2em and just the first one,
because in addition to requiring the spaces to hang,
the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
In browsers that don't do that, the whole space will be visible, and the first ref will be matched.
In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
-->