normal-flow-overconstrained-vrl-004.xht (5118B)
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: non-replaced block in normal flow with 'direction: rtl' in vertical-rl (overconstrained)</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/#logical-direction-layout" title="7.4 Flow-Relative Mappings" /> 11 <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" /> 12 13 <meta name="flags" content="ahem image" /> 14 <meta name="assert" content="This test checks that when an inline dimension of a non-replaced block in normal flow is over-constrained, the inline-end margin is dropped and recalculated so that the equation involving inline-size is balanced; such equation takes under account the inline's direction (ltr or rtl). In this test, the inline-end margin (physical margin-top) is recalculated." /> 15 16 <!-- 17 " 18 the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block. 19 " 20 7.4 Flow-Relative Mappings 21 http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout 22 23 " 24 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block 25 26 If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead. 27 " 28 CSS 2.1, section 10.3.3 Block-level, non-replaced elements in normal flow 29 http://www.w3.org/TR/CSS21/visudet.html#blockwidth 30 --> 31 32 <meta name="DC.date.created" content="2015-10-16T09:54:03+11:00" scheme="W3CDTF" /> 33 <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" /> 34 35 <style type="text/css"><![CDATA[ 36 html 37 { 38 writing-mode: vertical-rl; 39 background-image: url("support/bg-red-3col-2row-320x320.png"); 40 background-position: -152px 8px; 41 /* first value represents the horizontal position and the second represents the vertical position */ 42 43 /* 44 8px (body's margin-left) 45 - 46 80px (4th column width) 47 - 48 80px (3rd column width) 49 ======== 50 -152px 51 */ 52 background-repeat: no-repeat; 53 } 54 #containing-block 55 { 56 direction: rtl; 57 height: 320px; 58 } 59 60 p 61 { 62 direction: ltr; 63 margin-left: 16px; 64 margin-right: 16px; 65 } 66 67 #test 68 { 69 background-color: green; 70 margin-top: 160px; 71 border-top: green solid 20px; 72 padding-top: 20px; 73 height: 0px; 74 padding-bottom: 20px; 75 border-bottom: green solid 20px; 76 margin-bottom: 160px; 77 78 margin-right: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */ 79 width: 80px; 80 } 81 82 /* 83 " 84 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. 85 " 86 7.1 Principles of Layout in Vertical Writing Modes 87 http://www.w3.org/TR/css-writing-modes-3/#vertical-layout 88 89 So here, *-top and *-bottom properties are input into the §10.3.3 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules. 90 91 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block 92 93 So: 94 95 160px : margin-top 96 + 97 20px : border-top-width 98 + 99 20px : padding-top 100 + 101 0px : height 102 + 103 20px : padding-bottom 104 + 105 20px : border-bottom-width 106 + 107 160px : margin-bottom 108 ======================== 109 400px : while the height of containing block of div is 320px 110 111 So, here, the specified value of 'margin-top' is ignored and the value is calculated so as to make the equality true 112 113 (solve) : margin-top 114 + 115 20px : border-top-width 116 + 117 20px : padding-top 118 + 119 0px : height 120 + 121 20px : padding-bottom 122 + 123 20px : border-bottom-width 124 + 125 160px : margin-bottom 126 ======================== 127 320px : height of containing block 128 129 And so computed margin-top value must be 80px . 130 */ 131 132 ]]></style> 133 134 </head> 135 136 <body> 137 <div id="containing-block"> 138 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p> 139 <!-- 140 The image says: 141 Test passes if there is a filled 142 green square and <strong>no red</strong>. 143 --> 144 145 <div id="test"></div> 146 </div> 147 </body> 148 </html>