hanging-whitespace-004.html (1575B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text Level 3: Collapsible spaces at the end of the line don't prevent previous whitespace from hanging</title> 4 <link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging"> 6 <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> 7 <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <meta name="assert" content="Phase II of the white space processing rules first removes collapsible spaces at the end of a line (step 3), and then a remaining sequence of white space can hang (step 4). Therefore, collapsible spaces at the end of the line shouldn't block previous whitespaces from hanging."> 10 11 <style> 12 #square { 13 font: 25px/1 Ahem; 14 width: 4ch; 15 height: 4ch; 16 background: 17 linear-gradient(green, green) 1ch 0 / 1ch 1ch no-repeat, 18 linear-gradient(green, green) 3ch 0 / 1ch 1ch no-repeat, 19 linear-gradient(green, green) 0 2ch / 1ch 1ch no-repeat, 20 linear-gradient(green, green) 2ch 2ch / 1ch 1ch no-repeat, 21 red; 22 23 white-space: normal; 24 color: green; 25 } 26 .right { 27 text-align: right; 28 } 29 .pre-wrap { 30 white-space: pre-wrap; 31 } 32 </style> 33 34 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 35 36 <div id="square"> 37 <div>X X<span class="pre-wrap"> </span> XXXX</div> 38 <div class="right">X X<span class="pre-wrap"> </span> XXXX</div> 39 </div>