absolute-non-replaced-width-004.xht (3068B)
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: Absolutely positioned non-replaced elements when both 'margin-left' and 'margin-right' are set to 'auto' and direction is left-to-right</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width" /> 8 <link rel="match" href="absolute-non-replaced-width-002-ref.xht" /> 9 10 <meta name="flags" content="ahem" /> 11 <meta name="assert" content="When direction is 'ltr' and 'left', 'width' and 'right' are not 'auto', solve for 'margin-right' and 'margin-left' to equal values. If this would make 'margin-left' and 'margin-right' negative, then set 'margin-left' to zero and solve for 'margin-right'." /> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style type="text/css"> 14 #div1 15 { 16 border: solid black; 17 direction: ltr; 18 height: 200px; 19 position: relative; 20 width: 200px; 21 } 22 div div 23 { 24 background: red; 25 color: blue; 26 font: 100px/1em Ahem; 27 left: 100px; 28 margin-left: auto; 29 margin-right: auto; 30 position: absolute; 31 right: 100px; 32 width: 100px; 33 } 34 /* 35 left : 100px 36 + margin-left : solve (auto) 37 + border-left-width : 0 38 + padding-left : 0 39 + width : 100px 40 + padding-right : 0 41 + border-right-width : 0 42 + margin-right : solve (auto) 43 + right : 100px 44 ==================================== 45 width of containing block : 200px 46 47 So, margin-left and margin-right would be each -50px at this point. 48 49 "...unless this would make them (the two margins) negative 50 in which case when direction of the containing block is 51 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and 52 solve for 'margin-right' ('margin-left')." 53 54 So, under such extra constraint, 'margin-left' must become 0 55 and 'margin-right' must become -100px. 56 */ 57 </style> 58 </head> 59 <body> 60 <p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square and if there is <strong>no red</strong>.</p> 61 <div id="div1"> 62 <div>X</div> 63 </div> 64 </body> 65 </html>