abs-pos-border-offset-001.html (5468B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"> 6 <meta name="assert" 7 content="This test checks that absolutely positioned elements are offset correctly in a bordered containing block, in different combinations of writing modes and directions." /> 8 <link rel="match" href="abs-pos-border-offset-001-ref.html"> 9 <style> 10 body { margin: 0; } 11 .cb { 12 position: relative; 13 inline-size: 45px; 14 block-size: 40px; 15 background: lightblue; 16 border: solid gray; 17 border-width: 1px 2px 3px 4px; 18 float: left; 19 margin-right: 5px; 20 } 21 .parent { 22 inline-size: 35px; 23 block-size: 30px; 24 background: orange; 25 } 26 .abspos { 27 position: absolute; 28 inline-size: 20px; 29 block-size: 15px; 30 background: pink; 31 } 32 33 .vrl { 34 writing-mode: vertical-rl; 35 } 36 .vlr { 37 writing-mode: vertical-lr; 38 } 39 .htb { 40 writing-mode: horizontal-tb; 41 } 42 43 .ltr { 44 direction: ltr; 45 } 46 .rtl { 47 direction: rtl; 48 } 49 50 .sep { 51 clear: both; 52 display: block; 53 height: 5px; 54 } 55 </style> 56 <body> 57 <div class="cb htb ltr"> 58 <div class="parent htb ltr"> 59 <div class="abspos"></div> 60 </div> 61 </div> 62 <div class="cb htb ltr"> 63 <div class="parent htb rtl"> 64 <div class="abspos"></div> 65 </div> 66 </div> 67 <div class="cb htb ltr"> 68 <div class="parent vlr ltr"> 69 <div class="abspos"></div> 70 </div> 71 </div> 72 <div class="cb htb ltr"> 73 <div class="parent vlr rtl"> 74 <div class="abspos"></div> 75 </div> 76 </div> 77 <div class="cb htb ltr"> 78 <div class="parent vrl ltr"> 79 <div class="abspos"></div> 80 </div> 81 </div> 82 <div class="cb htb ltr"> 83 <div class="parent vrl rtl"> 84 <div class="abspos"></div> 85 </div> 86 </div> 87 <div class="sep"></div> 88 89 <div class="cb htb rtl"> 90 <div class="parent htb ltr"> 91 <div class="abspos"></div> 92 </div> 93 </div> 94 <div class="cb htb rtl"> 95 <div class="parent htb rtl"> 96 <div class="abspos"></div> 97 </div> 98 </div> 99 <div class="cb htb rtl"> 100 <div class="parent vlr ltr"> 101 <div class="abspos"></div> 102 </div> 103 </div> 104 <div class="cb htb rtl"> 105 <div class="parent vlr rtl"> 106 <div class="abspos"></div> 107 </div> 108 </div> 109 <div class="cb htb rtl"> 110 <div class="parent vrl ltr"> 111 <div class="abspos"></div> 112 </div> 113 </div> 114 <div class="cb htb rtl"> 115 <div class="parent vrl rtl"> 116 <div class="abspos"></div> 117 </div> 118 </div> 119 <div class="sep"></div> 120 121 <div class="cb vlr ltr"> 122 <div class="parent htb ltr"> 123 <div class="abspos"></div> 124 </div> 125 </div> 126 <div class="cb vlr ltr"> 127 <div class="parent htb rtl"> 128 <div class="abspos"></div> 129 </div> 130 </div> 131 <div class="cb vlr ltr"> 132 <div class="parent vlr ltr"> 133 <div class="abspos"></div> 134 </div> 135 </div> 136 <div class="cb vlr ltr"> 137 <div class="parent vlr rtl"> 138 <div class="abspos"></div> 139 </div> 140 </div> 141 <div class="cb vlr ltr"> 142 <div class="parent vrl ltr"> 143 <div class="abspos"></div> 144 </div> 145 </div> 146 <div class="cb vlr ltr"> 147 <div class="parent vrl rtl"> 148 <div class="abspos"></div> 149 </div> 150 </div> 151 <div class="sep"></div> 152 153 <div class="cb vlr rtl"> 154 <div class="parent htb ltr"> 155 <div class="abspos"></div> 156 </div> 157 </div> 158 <div class="cb vlr rtl"> 159 <div class="parent htb rtl"> 160 <div class="abspos"></div> 161 </div> 162 </div> 163 <div class="cb vlr rtl"> 164 <div class="parent vlr ltr"> 165 <div class="abspos"></div> 166 </div> 167 </div> 168 <div class="cb vlr rtl"> 169 <div class="parent vlr rtl"> 170 <div class="abspos"></div> 171 </div> 172 </div> 173 <div class="cb vlr rtl"> 174 <div class="parent vrl ltr"> 175 <div class="abspos"></div> 176 </div> 177 </div> 178 <div class="cb vlr rtl"> 179 <div class="parent vrl rtl"> 180 <div class="abspos"></div> 181 </div> 182 </div> 183 <div class="sep"></div> 184 185 <div class="cb vrl ltr"> 186 <div class="parent htb ltr"> 187 <div class="abspos"></div> 188 </div> 189 </div> 190 <div class="cb vrl ltr"> 191 <div class="parent htb rtl"> 192 <div class="abspos"></div> 193 </div> 194 </div> 195 <div class="cb vrl ltr"> 196 <div class="parent vlr ltr"> 197 <div class="abspos"></div> 198 </div> 199 </div> 200 <div class="cb vrl ltr"> 201 <div class="parent vlr rtl"> 202 <div class="abspos"></div> 203 </div> 204 </div> 205 <div class="cb vrl ltr"> 206 <div class="parent vrl ltr"> 207 <div class="abspos"></div> 208 </div> 209 </div> 210 <div class="cb vrl ltr"> 211 <div class="parent vrl rtl"> 212 <div class="abspos"></div> 213 </div> 214 </div> 215 <div class="sep"></div> 216 217 <div class="cb vrl rtl"> 218 <div class="parent htb ltr"> 219 <div class="abspos"></div> 220 </div> 221 </div> 222 <div class="cb vrl rtl"> 223 <div class="parent htb rtl"> 224 <div class="abspos"></div> 225 </div> 226 </div> 227 <div class="cb vrl rtl"> 228 <div class="parent vlr ltr"> 229 <div class="abspos"></div> 230 </div> 231 </div> 232 <div class="cb vrl rtl"> 233 <div class="parent vlr rtl"> 234 <div class="abspos"></div> 235 </div> 236 </div> 237 <div class="cb vrl rtl"> 238 <div class="parent vrl ltr"> 239 <div class="abspos"></div> 240 </div> 241 </div> 242 <div class="cb vrl rtl"> 243 <div class="parent vrl rtl"> 244 <div class="abspos"></div> 245 </div> 246 </div> 247 <div class="sep"></div> 248 </body>