multicol-nested-012.html (997B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model"> 4 <style> 5 .mc { 6 columns: 2; 7 column-gap: 0; 8 } 9 .outer { 10 position: relative; 11 column-fill: auto; 12 width: 64px; 13 height: 40px; 14 font: 16px/32px monospace; 15 text-align: right; 16 } 17 </style> 18 <p>The word "WIN" should be seen below.</p> 19 <div class="mc outer"> 20 <div data-offset-x="0" data-offset-y="0">W</div> 21 <div class="mc"> 22 <div data-offset-x="32" data-offset-y="0"> 23 <span data-offset-x="32" data-offset-y="0" style="display:inline-block; width:100%;">I</span> 24 </div> 25 <div data-offset-x="48" data-offset-y="0" style="break-before:column;">N</div> 26 </div> 27 </div> 28 <script src="/resources/testharness.js"></script> 29 <script src="/resources/testharnessreport.js"></script> 30 <script src="/resources/check-layout-th.js"></script> 31 <script> 32 checkLayout(".outer"); 33 </script>