abs-pos-non-replaced-icb-vrl-010.xht (3228B)
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' and 'right' are 'auto', 'width' is not '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' and 'right' are 'auto', 'width' is not 'auto') whose containing block is the initial containing block and whose direction is 'ltr' must set left to static position and then solve for 'right'. 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 background-color: green; 24 border-left: green solid 35px; 25 border-right: green solid 15px; 26 height: 100px; 27 left: auto; 28 position: absolute; 29 right: auto; 30 width: 50px; 31 writing-mode: vertical-rl; 32 } 33 34 /* 35 " 36 2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position (...) Then solve for (...) 'right' (if 'direction' is 'ltr'). 37 " 38 10.3.7 Absolutely positioned, non-replaced elements 39 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width 40 41 So: 42 43 auto : left 44 + 45 0px : margin-left 46 + 47 35px : border-left-width 48 + 49 0px : padding-left 50 + 51 50px : width 52 + 53 0px : padding-right 54 + 55 15px : border-right-width 56 + 57 0px : margin-right 58 + 59 auto : right 60 ==================== 61 : width of containing block (width of Initial Containing Block) 62 63 becomes 64 65 8px : left (set to static position) 66 + 67 0px : margin-left 68 + 69 35px : border-left-width 70 + 71 0px : padding-left 72 + 73 50px : width 74 + 75 0px : padding-right 76 + 77 15px : border-right-width 78 + 79 0px : margin-right 80 + 81 solve : right 82 ==================== 83 : width of containing block (width of Initial Containing Block) 84 */ 85 86 div#red-overlapped-reference 87 { 88 background-color: red; 89 height: 100px; 90 width: 100px; 91 } 92 ]]></style> 93 </head> 94 95 <body> 96 97 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 98 99 <div id="green-overlapping-test"></div> 100 101 <div id="red-overlapped-reference"></div> 102 103 </body> 104 </html>