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