baseline-source-last-002.html (4113B)
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 writing-mode: vertical-rl; 12 } 13 14 .inner { 15 border: solid 5px; 16 padding: 10px; 17 baseline-source: last; 18 font-size: 30px; 19 } 20 21 table { border-spacing: 0; } 22 tr { vertical-align: baseline; } 23 td { padding: 0; } 24 caption { 25 margin: 10px; 26 background: lime; 27 block-size: 20px; 28 } 29 30 span { 31 display: inline-block; 32 width: 1em; 33 height: 1em; 34 outline: solid cyan 3px; 35 outline-offset: -3px; 36 } 37 </style> 38 <script src="/resources/testharness.js"></script> 39 <script src="/resources/testharnessreport.js"></script> 40 <script src="/resources/check-layout-th.js"></script> 41 <body onload="checkLayout('.target > *')"> 42 43 <div class="target"> 44 <span data-offset-x="30"></span> 45 <div class="inner" style="display: inline-block;" data-offset-x="10"> 46 <div><span></span></div> 47 <div><span></span></div> 48 </div> 49 </div> 50 51 <div class="target"> 52 <span data-offset-x="30"></span> 53 <div class="inner" style="overflow: hidden; display: inline-block;" data-offset-x="10"> 54 <div><span></span></div> 55 <div><span></span></div> 56 </div> 57 </div> 58 59 <div class="target"> 60 <span data-offset-x="30"></span> 61 <div class="inner" style="display: inline-block;" data-offset-x="10"> 62 <div style="overflow: hidden;"> 63 <div><span></span></div> 64 <div><span></span></div> 65 </div> 66 </div> 67 </div> 68 69 <div class="target"> 70 <span data-offset-x="30"></span> 71 <div class="inner" style="display: inline-block; columns: 2;" data-offset-x="10"> 72 <div style="font-size: 20px;"><span></span></div> 73 <div style="font-size: 20px;"><span></span></div> 74 <div><span></span></div> 75 <div><span></span></div> 76 </div> 77 </div> 78 79 <div class="target"> 80 <span data-offset-x="30"></span> 81 <div class="inner" style="overflow: hidden; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;" data-offset-x="10"> 82 <span></span><br> 83 <span></span><br> 84 <span></span><br> 85 <span></span><br> 86 </div> 87 </div> 88 89 <div class="target"> 90 <span data-offset-x="30"></span> 91 <div class="inner" style="display: inline-flex; flex-direction: column;" data-offset-x="10"> 92 <div><span></span></div> 93 <div><span></span></div> 94 </div> 95 </div> 96 97 <div class="target"> 98 <span data-offset-x="30"></span> 99 <div class="inner" style="display: inline-grid; grid-auto-flow: columns;" data-offset-x="10"> 100 <div><span></span></div> 101 <div><span></span></div> 102 </div> 103 </div> 104 105 <div class="target"> 106 <span data-offset-x="30"></span> 107 <fieldset class="inner" style="display: inline-block;" data-offset-x="10"> 108 <span></span><br><span></span> 109 <legend><span></span></legend> 110 </fieldset> 111 </div> 112 113 <div class="target"> 114 <span data-offset-x="30"></span> 115 <fieldset class="inner" style="display: inline-flex; flex-direction: column;" data-offset-x="10"> 116 <span></span><br><span></span> 117 <legend><span></span></legend> 118 </fieldset> 119 </div> 120 121 <div class="target"> 122 <span data-offset-x="100"></span> 123 <table class="inner" style="display: inline-table;" data-offset-x="10"> 124 <caption></caption> 125 <tr> 126 <td style="font-size: 10px;"><span></span><br><span></span></td> 127 <td><span></span><br><span></span></td> 128 </tr> 129 <tr> 130 <td><span></span><br><span></span></td> 131 <td style="font-size: 10px;"><span></span><br><span></span></td> 132 </tr> 133 <caption style="caption-side: bottom;"></caption> 134 </table> 135 </div> 136 137 <div class="target"> 138 <span data-offset-x="100"></span> 139 <div class="inner" style="display: inline-block;" data-offset-x="10"> 140 <table> 141 <caption></caption> 142 <tr> 143 <td style="font-size: 10px;"><span></span><br><span></span></td> 144 <td><span></span><br><span></span></td> 145 </tr> 146 <tr> 147 <td><span></span><br><span></span></td> 148 <td style="font-size: 10px;"><span></span><br><span></span></td> 149 </tr> 150 <caption style="caption-side: bottom;"></caption> 151 </table> 152 </div> 153 </div>