vrl-rtl-ltr-in-multicols.tentative.html (2863B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> 3 <link rel="match" href="vrl-in-multicols-ref.html"> 4 <meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." /> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 body { writing-mode: vertical-rl; } 8 .container { 9 position: relative; 10 background: green; 11 font: 20px/1 Ahem; 12 inline-size: 80px; 13 block-size: 120px; 14 color: green; 15 } 16 .multicol { 17 column-count: 2; 18 column-fill: auto; 19 column-gap: 0; 20 block-size: 60px; 21 inline-size: 160px; 22 } 23 .red { color: red; } 24 .cb { position: relative; } 25 .rtl { direction: rtl; } 26 .ltr { direction: ltr; } 27 .inline { display: inline; } 28 .abs { position: absolute; } 29 .inset-start { inset-block-start: 0; inset-inline-start: 0; } 30 .inset-end { inset-block-end: 0; inset-inline-end: 0; } 31 </style> 32 33 There should be no red. 34 <div class="multicol"> 35 <div class="container rtl"> 36 <span class="red">XX</span><span class="ltr">XX 37 <div class="abs inline inset-end">XX</div> 38 XXXX XXXX XXXX XXXX XX<span class="red">XX</span> 39 <div class="abs inline inset-start">XX</div> 40 </span> 41 </div> 42 </div> 43 44 <div class="multicol"> 45 <div class="container rtl"> 46 <span class="red">XX</span><span class="ltr">XX 47 <div class="abs block inset-end">XX</div> 48 XXXX XXXX XXXX XXXX 49 <div class="abs block inset-start">XX</div> 50 <br>XX<span class="red">XX</span> 51 </span> 52 </div> 53 </div> 54 55 <div class="multicol"> 56 <div class="container rtl"> 57 <span class="red">XX</span><span class="ltr cb">XX 58 <div class="abs inline inset-end">XX</div> 59 XXXX XXXX XXXX XXXX 60 <div class="abs inline inset-start">XX</div> 61 XX<span class="red">XX</span> 62 </span> 63 </div> 64 </div> 65 66 <div class="multicol"> 67 <div class="container rtl"> 68 X<span class="ltr cb"><span class="red">XX</span> 69 <div class="abs block inset-end">XX</div> 70 XXXX XXXX XXXX XX 71 <div class="abs block inset-start">XX</div> 72 <br><span class="red">XX</span> 73 </span> 74 </div> 75 </div> 76 77 <div class="multicol"> 78 <div class="container rtl"> 79 <span class="cb"><span class="red">XX</span><span class="ltr">X 80 <div class="abs inline inset-end">XX</div> 81 XXXX XXXX XXXX XX 82 <div class="abs inline inset-start">XX</div> 83 X<span class="red">XX</span> 84 </span></span> 85 </div> 86 </div> 87 88 <div class="multicol"> 89 <div class="container rtl"> 90 <span class="cb"><span class="red">XX</span><span class="ltr">X 91 <div class="abs block inset-end">XX</div> 92 XXXX XXXX XXXX XX 93 <div class="abs block inset-start">XX</div> 94 <br>X<span class="red">XX</span> 95 </span></span> 96 </div> 97 </div>