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