baseline-source-last-001.html (4084B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-source"> 3 <style> 4 .target { 5 inline-size: 200px; 6 padding: 10px; 7 border: solid 3px; 8 position: relative; 9 line-height: 0; 10 font-size: 20px; 11 } 12 13 .inner { 14 border: solid 5px; 15 padding: 10px; 16 baseline-source: last; 17 font-size: 30px; 18 } 19 20 table { border-spacing: 0; } 21 tr { vertical-align: baseline; } 22 td { padding: 0; } 23 caption { 24 margin: 10px; 25 background: lime; 26 block-size: 20px; 27 } 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 <div class="target"> 43 <span data-offset-y="65"></span> 44 <div class="inner" style="display: inline-block;" data-offset-y="10"> 45 <div><span></span></div> 46 <div><span></span></div> 47 </div> 48 </div> 49 50 <div class="target"> 51 <span data-offset-y="65"></span> 52 <div class="inner" style="overflow: hidden; display: inline-block;" data-offset-y="10"> 53 <div><span></span></div> 54 <div><span></span></div> 55 </div> 56 </div> 57 58 <div class="target"> 59 <span data-offset-y="65"></span> 60 <div class="inner" style="display: inline-block;" data-offset-y="10"> 61 <div style="overflow: hidden;"> 62 <div><span></span></div> 63 <div><span></span></div> 64 </div> 65 </div> 66 </div> 67 68 <div class="target"> 69 <span data-offset-y="65"></span> 70 <div class="inner" style="display: inline-block; columns: 2;" data-offset-y="10"> 71 <div style="font-size: 20px;"><span></span></div> 72 <div style="font-size: 20px;"><span></span></div> 73 <div><span></span></div> 74 <div><span></span></div> 75 </div> 76 </div> 77 78 <div class="target"> 79 <span data-offset-y="95"></span> 80 <div class="inner" style="overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;" data-offset-y="10"> 81 <span></span><br> 82 <span></span><br> 83 <span></span><br> 84 <span></span><br> 85 </div> 86 </div> 87 88 <div class="target"> 89 <span data-offset-y="65"></span> 90 <div class="inner" style="display: inline-flex; flex-direction: column;" data-offset-y="10"> 91 <div><span></span></div> 92 <div><span></span></div> 93 </div> 94 </div> 95 96 <div class="target"> 97 <span data-offset-y="65"></span> 98 <div class="inner" style="display: inline-grid; grid-auto-flow: columns;" data-offset-y="10"> 99 <div><span></span></div> 100 <div><span></span></div> 101 </div> 102 </div> 103 104 <div class="target"> 105 <span data-offset-y="90"></span> 106 <fieldset class="inner" style="display: inline-block;" data-offset-y="10"> 107 <span></span><br><span></span> 108 <legend><span></span></legend> 109 </fieldset> 110 </div> 111 112 <div class="target"> 113 <span data-offset-y="90"></span> 114 <fieldset class="inner" style="display: inline-flex; flex-direction: column;" data-offset-y="10"> 115 <span></span><br><span></span> 116 <legend><span></span></legend> 117 </fieldset> 118 </div> 119 120 <div class="target"> 121 <span data-offset-y="135"></span> 122 <table class="inner" style="display: inline-table;" data-offset-y="10"> 123 <caption></caption> 124 <tr> 125 <td style="font-size: 10px;"><span></span><br><span></span></td> 126 <td><span></span><br><span></span></td> 127 </tr> 128 <tr> 129 <td><span></span><br><span></span></td> 130 <td style="font-size: 10px;"><span></span><br><span></span></td> 131 </tr> 132 <caption style="caption-side: bottom;"></caption> 133 </table> 134 </div> 135 136 <div class="target"> 137 <span data-offset-y="135"></span> 138 <div class="inner" style="display: inline-block;" data-offset-y="10"> 139 <table> 140 <caption></caption> 141 <tr> 142 <td style="font-size: 10px;"><span></span><br><span></span></td> 143 <td><span></span><br><span></span></td> 144 </tr> 145 <tr> 146 <td><span></span><br><span></span></td> 147 <td style="font-size: 10px;"><span></span><br><span></span></td> 148 </tr> 149 <caption style="caption-side: bottom;"></caption> 150 </table> 151 </div> 152 </div>