abs-pos-non-replaced-vrl-204.xht (3109B)
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 Writing Modes Test: absolutely positioned non-replaced element - 'direction: ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto'</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/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" /> 11 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements" /> 12 <link rel="match" href="abs-pos-non-replaced-vrl-002-ref.xht" /> 13 14 <meta name="flags" content="ahem image" /> 15 <meta name="assert" content="When 'direction' is 'ltr' and 'left' is 'auto' and 'right' and 'width' are not 'auto' and 'writing-mode' is 'vertical-rl', then solve for 'left'." /> 16 17 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 18 <style type="text/css"><![CDATA[ 19 div#containing-block 20 { 21 background: red url("support/bg-red-3col-3row-320x320.png"); 22 color: transparent; 23 direction: ltr; 24 font: 80px/1 Ahem; 25 height: 320px; 26 position: relative; 27 width: 320px; 28 writing-mode: vertical-rl; 29 } 30 31 div#containing-block > span 32 { 33 background-color: red; 34 color: green; 35 height: 1em; 36 left: auto; 37 position: absolute; 38 right: 1em; 39 width: 1em; 40 writing-mode: horizontal-tb; 41 } 42 43 /* 44 " 45 Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes. 46 " 47 7.1 Principles of Layout in Vertical Writing Modes 48 http://www.w3.org/TR/css-writing-modes-3/#vertical-layout 49 50 So here, *right and *left properties are input into the §10.6.4 algorithms where *right properties refer to *top properties in the layout rules and where *left properties refer to *bottom properties in the layout rules. 51 52 " 53 6. 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom' 54 " 55 56 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block 57 58 So: 59 60 80px : right 61 + 62 0px : margin-right 63 + 64 0px : border-right-width 65 + 66 0px : padding-right 67 + 68 80px : width 69 + 70 0px : padding-left 71 + 72 0px : border-left-width 73 + 74 0px : margin-left 75 + 76 (solve) : left: auto 77 ===================== 78 320px : width of containing block 79 80 And so computed left value must be 160px . 81 */ 82 83 ]]></style> 84 85 </head> 86 87 <body> 88 89 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p> 90 91 <div id="containing-block">1 2 34<span>X</span></div> 92 93 </body> 94 </html>