block-in-inline-relpos-001.xht (1852B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 2 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>CSS Test: Relative-positioning Inline Containing Block</title> 6 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> 7 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 --> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" /> 9 <link rel="match" href="block-in-inline-relpos-001-ref.xht" /> 10 11 <meta name="flags" content="ahem" /> 12 <meta name="assert" content="When such an inline box is affected by relative positioning, the relative positioning also affects the block-level box contained in the inline box." /> 13 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 14 <style type="text/css"><![CDATA[ 15 .container { 16 margin: 1em; 17 font: 20px/1 Ahem; 18 border: solid silver; 19 width: 4em; 20 color: aqua; 21 background: fuchsia; 22 } 23 .relpos { 24 position: relative; 25 color: yellow; 26 left: 2em; 27 display: inline; 28 } 29 .block, .controlC { 30 color: orange; 31 background: orange; 32 width: 2em; 33 margin-left: -2em; 34 border-left: 2em solid blue 35 } 36 37 .controlB { 38 color: yellow; 39 } 40 .controlC { 41 margin-left: 0; 42 } 43 ]]></style> 44 </head> 45 <body> 46 <p>The patterns in the 2 silver boxes must be <strong>identical</strong>.</p> 47 <div class="container"> 48 A<div class="relpos">B 49 <div class="block">C</div> 50 B</div>A 51 </div> 52 <div class="container"> 53 A <span class="controlB">B</span> 54 <div class="controlC">C</div> 55 A<span class="controlB">B</span> 56 </div> 57 </body> 58 </html>