containing-block-013.xht (1497B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Containing Blocks - Inline-level elements position based on left-to-right direction and parent element is absolute</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" /> 7 8 <meta name="assert" content="If the ancestor is inline-level, positioned absolute, and direction is left-to-right, the top/left of the containing block determines the top/left padding edges of the first box generated by the ancestor." /> 9 <style type="text/css"> 10 div 11 { 12 border: solid black; 13 padding: 1in; 14 position: absolute; 15 width: 0; 16 } 17 #span1 18 { 19 direction: ltr; 20 } 21 span span 22 { 23 background: blue; 24 height: 1in; 25 position: absolute; 26 width: 1in; 27 } 28 </style> 29 </head> 30 <body> 31 <p>Test passes if the filled blue square is in the <strong>lower-right corner</strong> of the hollow black square.</p> 32 <div> 33 <span id="span1"> 34 <span></span> 35 </span> 36 </div> 37 </body> 38 </html>