table-row-paint-vlr-rtl-ref.html (1138B)
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 .pattern { 15 background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px); 16 } 17 </style> 18 <div class="multicol"> 19 <div style="position: relative; inline-size: 100%; block-size: 400px;"> 20 <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div> 21 <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 110px;"></div> 22 <div class="pattern" style="position: absolute; inset-block-start: 180px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 135px;"></div> 23 <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div> 24 <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div> 25 </div> 26 </div>