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