multicol-rule-nested-balancing-004-ref.html (1128B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test Reference: Test the column rules' block-size with nested balancing multicol container</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 7 8 <style> 9 .outer { 10 column-count: 1; 11 column-rule: 6px solid black; 12 column-fill: auto; 13 background-color: rgba(0, 0, 255, 0.3); 14 width: 200px; 15 height: 300px; 16 } 17 .inner { 18 column-count: 1; 19 column-rule: 3px solid gray; 20 column-fill: auto; 21 background-color: rgba(255, 0, 255, 0.3); 22 } 23 .inner-block { 24 background-color: rgba(0, 255, 0, 0.3); 25 } 26 .space { 27 height: 100px; 28 } 29 </style> 30 31 <article class="outer"> 32 <article class="inner"> 33 <div class="inner-block" style="height: 300px;"></div> 34 </article> 35 <article class="inner" style="height: 200px;"> 36 <div class="inner-block" style="height: 200px;"></div> 37 <div class="inner-block" style="height: 100px;"></div> 38 <div class="space"></div> 39 </article> 40 </article> 41 </html>