vertical-wm-001-ref.html (1513B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: splitting vertical writing-mode blocks</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1328095"> 10 <style type="text/css"> 11 body,html { padding:30px; margin:0; } 12 .col { 13 columns: 2; 14 column-gap: 0; 15 column-fill: auto; 16 17 block-size: 90px; 18 inline-size: 140px; 19 border:1px solid; 20 } 21 .vl { writing-mode: vertical-lr; } 22 23 x { 24 display:block; 25 break-inside:avoid; 26 page-break-inside:avoid; 27 vertical-align: top; 28 inline-size: 20px; 29 block-size: 20px; 30 background:silver; 31 } 32 x:nth-of-type(2n) {background:purple;} 33 34 blue { display:block; inline-size: 70px; border-block-start: 25px solid blue; } 35 grey { display:block; inline-size: 70px; border-block-start: 17px solid grey; } 36 </style> 37 </head> 38 <body> 39 40 <div class="col vl"> 41 <div class="inner" style="margin-left:40px"></div> 42 <blue></blue> 43 <x></x><x></x> 44 <grey></grey> 45 </div> 46 47 <div class="col"> 48 <div class="inner" style="margin-top:40px"></div> 49 <blue></blue> 50 <x></x><x></x> 51 <grey></grey> 52 </div> 53 54 <div class="col vl"> 55 <div class="inner" style="margin-left:40px"></div> 56 <blue></blue> 57 <x></x><x></x> 58 <div style="width:45px"></div> 59 <grey></grey> 60 </div> 61 62 <div class="col vl"> 63 <div class="inner" style="margin-left:40px"></div> 64 <blue></blue> 65 <x></x><x></x> 66 <div style="width:60px"></div> 67 <grey></grey> 68 </div> 69 70 </body> 71 </html>