abs-pos-non-replaced-icb-vlr-013.xht (3478B)
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-lr' - 'left' and 'right' are 'auto', 'width' is not 'auto' with 'direction: rtl' 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="abs-pos-non-replaced-icb-vrl-004-ref.xht" /> 12 13 <meta content="image" name="flags" /> 14 <meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', 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 'rtl' must set right to static position and then solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" /> 15 16 <style type="text/css"><![CDATA[ 17 html 18 { 19 direction: rtl; 20 } 21 22 img 23 { 24 vertical-align: top; 25 } 26 27 div#green-overlapping-test 28 { 29 background-color: green; 30 border-left: green solid 35px; 31 border-right: green solid 15px; 32 height: 100px; 33 left: auto; 34 position: absolute; 35 right: auto; 36 width: 50px; 37 writing-mode: vertical-lr; 38 } 39 40 /* 41 " 42 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 'rtl' set 'right' to the static position (...) Then solve for 'left' (if 'direction is 'rtl'). 43 " 44 10.3.7 Absolutely positioned, non-replaced elements 45 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width 46 47 So: 48 49 auto : left 50 + 51 0px : margin-left 52 + 53 35px : border-left-width 54 + 55 0px : padding-left 56 + 57 50px : width 58 + 59 0px : padding-right 60 + 61 15px : border-right-width 62 + 63 0px : margin-right 64 + 65 auto : right (set to static position) 66 ==================== 67 : width of containing block (width of Initial Containing Block) 68 69 becomes 70 71 solve : left 72 + 73 0px : margin-left 74 + 75 35px : border-left-width 76 + 77 0px : padding-left 78 + 79 50px : width 80 + 81 0px : padding-right 82 + 83 15px : border-right-width 84 + 85 0px : margin-right 86 + 87 8px : right (static position) 88 ==================== 89 : width of containing block (width of Initial Containing Block) 90 */ 91 92 div#red-overlapped-reference 93 { 94 background-color: red; 95 height: 100px; 96 width: 100px; 97 } 98 ]]></style> 99 </head> 100 101 <body> 102 103 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p> 104 105 <!-- 106 The image says: 107 Test passes if there is a filled green square and <strong>no red</strong>. 108 --> 109 110 <div id="green-overlapping-test"></div> 111 112 <div id="red-overlapped-reference"></div> 113 114 </body> 115 </html>