flex-align-baseline-multicol-003.html (4130B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639"> 3 <style> 4 .target { 5 display: flex; 6 inline-size: 200px; 7 position: relative; 8 line-height: 0; 9 margin: 40px; 10 padding: 10px; 11 writing-mode: vertical-lr; 12 } 13 .target > div { 14 background: hotpink; 15 font-size: 20px; 16 } 17 .multicol { 18 columns: 3; 19 column-fill: auto; 20 padding: 10px; 21 border: solid 10px; 22 } 23 .multicol > div { 24 break-inside: avoid; 25 break-before: column; 26 break-after: column; 27 } 28 span { 29 display: inline-block; 30 width: 1em; 31 height: 1em; 32 outline: solid cyan 3px; 33 outline-offset: -3px; 34 } 35 </style> 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 <script src="/resources/check-layout-th.js"></script> 39 <body onload="checkLayout('.target > *')"> 40 41 <!-- Three columns, largest in the middle. --> 42 <div class="target" style="align-items: first baseline;"> 43 <div data-offset-x="25"><span></span></div> 44 <div class="multicol" data-offset-x="10"> 45 <div style="font-size: 10px;"> 46 <span></span><br><span></span><br><span></span> 47 </div> 48 <div style="font-size: 30px;"> 49 <span></span><br><span></span><br><span></span> 50 </div> 51 <div style="font-size: 20px;"> 52 <span></span><br><span></span><br><span></span> 53 </div> 54 </div> 55 </div> 56 57 <div class="target" style="align-items: last baseline;"> 58 <div data-offset-x="95"><span></span></div> 59 <div class="multicol" data-offset-x="10"> 60 <div style="font-size: 10px;"> 61 <span></span><br><span></span><br><span></span> 62 </div> 63 <div style="font-size: 30px;"> 64 <span></span><br><span></span><br><span></span> 65 </div> 66 <div style="font-size: 20px;"> 67 <span></span><br><span></span><br><span></span> 68 </div> 69 </div> 70 </div> 71 72 <!-- Start spanning element. --> 73 <div class="target" style="align-items: first baseline;"> 74 <div data-offset-x="30"><span></span></div> 75 <div class="multicol" data-offset-x="10"> 76 <div style="column-span: all; background: orange;"> 77 <span></span><br><span></span> 78 </div> 79 <div style="font-size: 10px;"> 80 <span></span><br><span></span><br><span></span> 81 </div> 82 <div style="font-size: 30px;"> 83 <span></span><br><span></span><br><span></span> 84 </div> 85 <div style="font-size: 20px;"> 86 <span></span><br><span></span><br><span></span> 87 </div> 88 </div> 89 </div> 90 91 <div class="target" style="align-items: last baseline;"> 92 <div data-offset-x="135"><span></span></div> 93 <div class="multicol" data-offset-x="10"> 94 <div style="column-span: all; background: orange;"> 95 <span></span><br><span></span> 96 </div> 97 <div style="font-size: 10px;"> 98 <span></span><br><span></span><br><span></span> 99 </div> 100 <div style="font-size: 30px;"> 101 <span></span><br><span></span><br><span></span> 102 </div> 103 <div style="font-size: 20px;"> 104 <span></span><br><span></span><br><span></span> 105 </div> 106 </div> 107 </div> 108 109 <!-- End spanning element. --> 110 <div class="target" style="align-items: first baseline;"> 111 <div data-offset-x="25"><span></span></div> 112 <div class="multicol" data-offset-x="10"> 113 <div style="font-size: 10px;"> 114 <span></span><br><span></span><br><span></span> 115 </div> 116 <div style="font-size: 30px;"> 117 <span></span><br><span></span><br><span></span> 118 </div> 119 <div style="font-size: 20px;"> 120 <span></span><br><span></span><br><span></span> 121 </div> 122 <div style="column-span: all; background: orange;"> 123 <span></span><br><span></span> 124 </div> 125 </div> 126 </div> 127 128 <div class="target" style="align-items: last baseline;"> 129 <div data-offset-x="140"><span></span></div> 130 <div class="multicol" data-offset-x="10"> 131 <div style="font-size: 10px;"> 132 <span></span><br><span></span><br><span></span> 133 </div> 134 <div style="font-size: 30px;"> 135 <span></span><br><span></span><br><span></span> 136 </div> 137 <div style="font-size: 20px;"> 138 <span></span><br><span></span><br><span></span> 139 </div> 140 <div style="column-span: all; background: orange;"> 141 <span></span><br><span></span> 142 </div> 143 </div> 144 </div>