table-col-paint-vlr-rtl-ref.html (1216B)
1 <!DOCTYPE html> 2 <style> 3 body { 4 writing-mode: vertical-lr; 5 direction: rtl; 6 } 7 .multicol { 8 inline-size: 400px; 9 block-size: 100px; 10 columns: 4; 11 column-fill: auto; 12 gap: 0; 13 } 14 .pattern1 { 15 background: repeating-linear-gradient(to right, lime, lime 20px, blue 20px, blue 40px); 16 } 17 .pattern2 { 18 background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); 19 } 20 </style> 21 <div class="multicol"> 22 <div style="position: relative; inline-size: 100%; block-size: 400px;"> 23 <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> 24 <div class="pattern1" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(50% - 15px); block-size: 255px;"></div> 25 <div class="pattern2" style="position: absolute; inset-block-start: 60px; inset-inline-start: 55px; inline-size: calc(50% - 15px); block-size: 255px;"></div> 26 <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div> 27 <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> 28 </div> 29 </div>