empty-inline-003.xht (1509B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Test: Line height calculations - Empty inline elements influence</title> 8 9 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" /> 10 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 11 <link rel="author" title="Bruno Fassino" href="http://www.brunildo.org/" /> 12 <link rel="match" href="empty-inline-003-ref.xht" /> 13 14 <meta content="The line-height of an empty inline element influences the height of a line containing it with some other content" name="assert" /> 15 16 <style type="text/css"><![CDATA[ 17 div#rel-pos-wrapper {position: relative;} 18 19 div#test 20 { 21 background-color: green; 22 color: white; 23 line-height: 1; 24 } 25 26 span#empty-inline-element {line-height: 5;} 27 28 div#reference-overlapped-red 29 { 30 background-color: red; 31 left: 0; 32 line-height: 5; 33 position: absolute; 34 top: 0; 35 width: 100%; 36 z-index: -1; 37 } 38 ]]></style> 39 40 </head> 41 42 <body> 43 44 <p>Test passes if there is a wide filled green rectangle with one "X" in it and if there is <strong>no red</strong>.</p> 45 46 <div id="rel-pos-wrapper"> 47 48 <div id="test"><span id="empty-inline-element"></span>X</div> 49 50 <div id="reference-overlapped-red">X</div> 51 52 </div> 53 54 </body> 55 </html>