-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathtrailing-other-space-separators-004.html
47 lines (46 loc) · 2.53 KB
/
trailing-other-space-separators-004.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 3 Test: sequence of spaces and other space separators at the end of line, white-space:nowrap</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-other-space-separators-001-ref.html">
<meta name="assert" content="An sequence of regular spaces and other space separators at the end of the line must hang, with white-space:nowrap.">
<style>
div {
position: absolute;
width: max-content;
line-height: 1;
color: transparent;
white-space: nowrap;
}
.red { background: red; }
.green { background: green; }
#pre { white-space:pre; }
</style>
<p>Test passes if the shape below is green and if there is no red.
<div class=red id=pre>xx                   　</div>
<div class=red>xx<span class=green>                   　</span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green> </span><br>xx</div>
<div class=red>xx<span class=green>　</span><br>xx</div>
<div class=green>xx<br>xx</div>
<!-- the trailing sequence of spaces must not be removed,
so it should hide all of the first (red) div.
However, it should hang and therefore not extend the width of its parent div,
which would be visible as red on the second line if it were expanded.
The extra red divs with one character each are for ease of debugging:
if the first one is fine, they will all be fine,
but if it is not, they should help find which one is wrong.
-->