text-overflow-010.html (1419B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface Test: ellipsis hides atomic inlines and chars at end of line</title> 4 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> 5 <link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <meta name="flags" content="ahem"> 8 <meta name="assert" content="Implementations must hide atomic inlines and characters at the end of the line to make room for the ellipsis"> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 10 <style> 11 .green { 12 position: absolute; 13 z-index: -1; 14 background: green; 15 width: 100px; 16 height: 100px; 17 } 18 .test { 19 white-space: pre; 20 font-family: Ahem; 21 text-overflow: ellipsis; 22 overflow: hidden; 23 width: 5.2em; /* making this 5.2em rather than 5em, to ensure that the atomic inline gets entirely hidden even if it is only partially obstructing */ 24 color: green; 25 } 26 span { 27 color: red; 28 } 29 .ib { 30 display: inline-block; 31 background: red; /* in case the text gets disapeared but the box is still there. */ 32 } 33 </style> 34 35 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 36 <div class=green></div> 37 <div class=test> <span class=ib>X</span> </div> 38 <div class=test> <span>X</span> </div> 39 <div class=test> <img src="support/1x1-red.png" width=10 height=10> </div>