vertical-wm-002.html (1559B)
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>Testcase: splitting vertical writing-mode blocks</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1328095"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration"> 11 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/"> 12 <link rel="match" href="vertical-wm-002-ref.html"> 13 <style type="text/css"> 14 body,html { padding:30px; margin:0; } 15 .col { 16 columns: 2; 17 column-gap: 0; 18 column-fill: auto; 19 20 block-size: 90px; 21 inline-size: 140px; 22 border:1px solid; 23 } 24 .vl { writing-mode: vertical-rl; } 25 26 .inner { 27 border-block-start: 25px solid blue; 28 border-block-end: 17px solid grey; 29 inline-size: 70px; 30 } 31 32 x { 33 display:block; 34 break-inside:avoid; 35 page-break-inside:avoid; 36 vertical-align: top; 37 inline-size: 20px; 38 block-size: 20px; 39 background:silver; 40 } 41 x:nth-of-type(2n) {background:purple;} 42 </style> 43 </head> 44 <body> 45 46 <div class="col vl"> 47 <div class="inner" style="margin-block-start:40px"> 48 <x></x><x></x> 49 </div> 50 </div> 51 52 <div class="col"> 53 <div class="inner" style="margin-block-start:40px"> 54 <x></x><x></x> 55 </div> 56 </div> 57 58 <div class="col vl"> 59 <div class="inner" style="margin-block-start:40px; block-size:90px"> 60 <x></x><x></x> 61 </div> 62 </div> 63 64 <div class="col vl"> 65 <div class="inner" style="margin-block-start:40px; block-size:100px"> 66 <x></x><x></x> 67 </div> 68 </div> 69 70 </body> 71 </html>