line-breaking-031.html (1161B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Text — line breaking at element boundary with atomic inlines</title> 5 <meta name=assert content="For soft wrap opportunities defined by the boundary between two characters or atomic inlines, the white-space property on the nearest common ancestor of the two characters controls breaking"> 6 <link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details"> 7 <link rel=match href="reference/line-breaking-030-ref.html"> 8 <link rel=author title="Florian Rivoal" href="https://florian.rivoal.net"> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 10 <style> 11 div { 12 color:green; 13 width: 1em; 14 line-height: 1em; 15 font-family: Ahem; 16 white-space: normal; 17 font-size: 60px; 18 } 19 span{ 20 white-space: pre; 21 } 22 img{ 23 vertical-align: bottom; 24 } 25 .container { 26 position: relative; 27 } 28 .fail { 29 color: red; 30 position: absolute; 31 left: 0; 32 top: 1em; 33 z-index: -1; 34 } 35 </style> 36 37 <p>Test passes is there is a green rectangle and no red. 38 39 <div class=container> 40 <span>X</span><span><img src="../../support/60x60-green.png"></span> 41 <div class=fail>X</div> 42 </div>