normal-flow-overconstrained-vlr-003.xht (5157B)
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: ltr' in vertical-lr (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-vlr-007-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-bottom) 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-lr; 39 } 40 41 body#containing-block 42 { 43 background-image: url("support/bg-red-3col-3row-320x320.png"); 44 background-position: 198px 8px; 45 /* first value represents the horizontal position and the second represents the vertical position */ 46 47 /* 48 16px (p's margin-left) 49 + 50 246px (img's width) 51 + 52 16px (p's margin-right) 53 ======== 54 278px 55 - 56 80px (1 column of 80px) 57 ======== 58 198px 59 */ 60 background-repeat: no-repeat; 61 direction: ltr; 62 height: 320px; 63 margin: 8px; 64 } 65 66 p 67 { 68 margin-left: 16px; 69 margin-right: 16px; 70 } 71 72 div 73 { 74 background-color: green; 75 margin-top: 160px; 76 border-top: green solid 20px; 77 padding-top: 20px; 78 height: 0px; 79 padding-bottom: 20px; 80 border-bottom: green solid 20px; 81 margin-bottom: -160px; 82 83 margin-left: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */ 84 width: 80px; 85 } 86 87 /* 88 " 89 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. 90 " 91 7.1 Principles of Layout in Vertical Writing Modes 92 http://www.w3.org/TR/css-writing-modes-3/#vertical-layout 93 94 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. 95 96 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block 97 98 So: 99 100 160px : margin-top 101 + 102 20px : border-top-width 103 + 104 20px : padding-top 105 + 106 0px : height 107 + 108 20px : padding-bottom 109 + 110 20px : border-bottom-width 111 + 112 -160px : margin-bottom 113 ======================== 114 80px : while the height of containing block of div is 320px 115 116 So, here, the specified value of 'margin-bottom' is ignored and the value is calculated so as to make the equality true 117 118 160px : margin-top 119 + 120 20px : border-top-width 121 + 122 20px : padding-top 123 + 124 0px : height 125 + 126 20px : padding-bottom 127 + 128 20px : border-bottom-width 129 + 130 (solve) : margin-bottom 131 ======================== 132 320px : height of containing block 133 134 And so computed margin-bottom value must be 80px . 135 */ 136 137 ]]></style> 138 139 </head> 140 141 <body id="containing-block"> 142 143 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p> 144 <!-- 145 The image says: 146 Test passes if there is a filled 147 green square and <strong>no red</strong>. 148 --> 149 150 <div></div> 151 152 </body> 153 </html>