abs-pos-non-replaced-icb-vrl-004.xht (3611B)
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: 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: auto', 'width: auto' and 'right: auto') whose containing block is the initial containing block must set 'right' to the static position. 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 border-left: green solid 25px; 30 border-right: green solid 75px; 31 height: 100px; 32 left: auto; 33 position: absolute; 34 right: auto; 35 width: auto; 36 writing-mode: vertical-rl; 37 } 38 39 /* 40 " 41 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. 42 (...) 43 1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left' 44 " 45 10.3.7 Absolutely positioned, non-replaced elements 46 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width 47 48 So: 49 50 auto : left 51 + 52 0px : margin-left 53 + 54 25px : border-left-width 55 + 56 0px : padding-left 57 + 58 auto : width 59 + 60 0px : padding-right 61 + 62 75px : border-right-width 63 + 64 0px : margin-right 65 + 66 auto : right 67 ==================== 68 : width of containing block (width of Initial Containing Block) 69 70 becomes 71 72 solve : left 73 + 74 0px : margin-left 75 + 76 25px : border-left-width 77 + 78 0px : padding-left 79 + 80 0px : width (shrink-to-fit) 81 + 82 0px : padding-right 83 + 84 75px : border-right-width 85 + 86 0px : margin-right 87 + 88 8px : right 89 ==================== 90 : width of containing block (width of Initial Containing Block) 91 */ 92 93 div#red-overlapped-reference 94 { 95 background-color: red; 96 height: 100px; 97 width: 100px; 98 } 99 ]]></style> 100 </head> 101 102 <body> 103 104 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p> 105 106 <!-- 107 The image says: 108 Test passes if there is a filled green square and <strong>no red</strong>. 109 --> 110 111 <div id="green-overlapping-test"></div> 112 113 <div id="red-overlapped-reference"></div> 114 115 </body> 116 </html>