inline-replaced-height-009.xht (1538B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Test: CSS Test: height of inline replaced element with no intrinsic height and no intrinsic ratio</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" /> 11 <link rel="match" href="../positioning/absolute-replaced-width-003b-ref.xht" /> 12 13 <meta name="flags" content="nonHTML svg" /> 14 <meta name="assert" content="If an inline replaced element (like the svg element in this test) has no intrinsic height and no intrinsic ratio, then the used value of 'height' becomes 150px." /> 15 16 <style type="text/css"><![CDATA[ 17 div 18 { 19 height: 300px; 20 width: 300px; 21 } 22 23 svg#overlapped-red 24 { 25 display: inline; 26 vertical-align: top; 27 } 28 29 div#overlapping-green 30 { 31 background-color: green; 32 bottom: 150px; 33 height: 150px; 34 position: relative; 35 width: 150px; 36 } 37 ]]></style> 38 39 </head> 40 41 <body> 42 43 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 44 45 <div> 46 <svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full" id="overlapped-red" width="150"> 47 <svg:rect x="0" y="0" width="600" height="300" fill="red" /> 48 </svg:svg> 49 50 <div id="overlapping-green"></div> 51 </div> 52 53 </body> 54 </html>