abs-pos-non-replaced-icb-vrl-002.xht (3373B)
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: position absolute and 'vertical-rl' - 'left: auto', 'width: auto' and 'right: auto' with 'direction: ltr' in initial containing block</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="match" href="../reference/ref-filled-green-100px-square.xht" /> 12 13 <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely positioned box (with 'left: auto', 'width: auto' and 'right: auto') whose containing block is the initial containing block must set 'left' to the static position. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" /> 14 15 <style type="text/css"><![CDATA[ 16 html 17 { 18 direction: ltr; 19 } 20 21 div#green-overlapping-test 22 { 23 border-left: green solid 25px; 24 border-right: green solid 75px; 25 height: 100px; 26 left: auto; 27 position: absolute; 28 right: auto; 29 width: auto; 30 writing-mode: vertical-rl; 31 } 32 33 /* 34 " 35 If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below. 36 (...) 37 3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right' 38 " 39 10.3.7 Absolutely positioned, non-replaced elements 40 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width 41 42 So: 43 44 auto : left 45 + 46 0px : margin-left 47 + 48 25px : border-left-width 49 + 50 0px : padding-left 51 + 52 auto : width 53 + 54 0px : padding-right 55 + 56 75px : border-right-width 57 + 58 0px : margin-right 59 + 60 auto : right 61 ==================== 62 : width of containing block (width of Initial Containing Block) 63 64 becomes 65 66 8px : left 67 + 68 0px : margin-left 69 + 70 25px : border-left-width 71 + 72 0px : padding-left 73 + 74 0px : width (shrink-to-fit) 75 + 76 0px : padding-right 77 + 78 75px : border-right-width 79 + 80 0px : margin-right 81 + 82 solve : right 83 ==================== 84 : width of containing block (width of Initial Containing Block) 85 */ 86 87 div#red-overlapped-reference 88 { 89 background-color: red; 90 height: 100px; 91 width: 100px; 92 } 93 ]]></style> 94 </head> 95 96 <body> 97 98 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 99 100 <div id="green-overlapping-test"></div> 101 102 <div id="red-overlapped-reference"></div> 103 104 </body> 105 </html>