multicol-span-all-rule-002.html (1167B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span"> 3 <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules"> 4 <link rel="match" href="multicol-span-all-rule-002-ref.html"> 5 <meta name="assert" content="This test verifies that the column-rule is not painted over a column-span in vertical wirting-modes."> 6 7 <style> 8 section { 9 display: inline-block; 10 width: 100px; 11 height: 400px; 12 border: 2px solid purple; 13 columns: 2; 14 column-gap: 10px; 15 column-rule: 10px solid orange; 16 } 17 18 .span { 19 column-span: all; 20 block-size: 20px; 21 } 22 23 .p { 24 block-size: 80px; 25 background-color: lightgreen; 26 } 27 </style> 28 29 <section style="writing-mode:vertical-lr"> 30 <div class="p"></div> 31 <div class="span"></div> 32 <div class="p"></div> 33 </section> 34 35 <section style="writing-mode:vertical-rl"> 36 <div class="p"></div> 37 <div class="span"></div> 38 <div class="p"></div> 39 </section> 40 41 <section style="writing-mode:sideways-lr"> 42 <div class="p"></div> 43 <div class="span"></div> 44 <div class="p"></div> 45 </section> 46 47 <section style="writing-mode:sideways-rl"> 48 <div class="p"></div> 49 <div class="span"></div> 50 <div class="p"></div> 51 </section>