flex-align-baseline-line-clamp-003.tentative.html (3934B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline"> 3 <style> 4 .target { 5 display: flex; 6 inline-size: 100px; 7 position: relative; 8 line-height: 0; 9 padding: 10px; 10 writing-mode: vertical-lr; 11 } 12 .target > div { 13 background: hotpink; 14 font-size: 30px; 15 } 16 .line-clamp { 17 display: -webkit-box; 18 -webkit-box-orient: vertical; 19 -webkit-line-clamp: 3; 20 border: solid 10px; 21 font-size: 40px !important; 22 overflow: hidden; 23 } 24 .line-clamp div { 25 background: orange; 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 <!-- Five lines --> 41 <div class="target" style="align-items: first baseline;"> 42 <div data-offset-x="25"><span></span></div> 43 <div class="line-clamp" data-offset-x="10"> 44 <span></span><br><span></span><br><span></span><br><span></span><br><span></span> 45 </div> 46 </div> 47 48 <div class="target" style="align-items: last baseline;"> 49 <div data-offset-x="105"><span></span></div> 50 <div class="line-clamp" data-offset-x="10"> 51 <span></span><br><span></span><br><span></span><br><span></span><br><span></span> 52 </div> 53 </div> 54 55 <!-- Two lines --> 56 <div class="target" style="align-items: first baseline;"> 57 <div data-offset-x="25"><span></span></div> 58 <div class="line-clamp" data-offset-x="10"> 59 <span></span><br><span></span> 60 </div> 61 </div> 62 63 <div class="target" style="align-items: last baseline;"> 64 <div data-offset-x="65"><span></span></div> 65 <div class="line-clamp" data-offset-x="10"> 66 <span></span><br><span></span> 67 </div> 68 </div> 69 70 <!-- Three lines --> 71 <div class="target" style="align-items: first baseline;"> 72 <div data-offset-x="25"><span></span></div> 73 <div class="line-clamp" data-offset-x="10"> 74 <span></span><br><span></span><br><span></span> 75 </div> 76 </div> 77 78 <div class="target" style="align-items: last baseline;"> 79 <div data-offset-x="105"><span></span></div> 80 <div class="line-clamp" data-offset-x="10"> 81 <span></span><br><span></span><br><span></span> 82 </div> 83 </div> 84 85 86 <!-- Wrapping div --> 87 <div class="target" style="align-items: first baseline;"> 88 <div data-offset-x="25"><span></span></div> 89 <div class="line-clamp" data-offset-x="10"> 90 <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> 91 </div> 92 </div> 93 94 <div class="target" style="align-items: last baseline;"> 95 <div data-offset-x="105"><span></span></div> 96 <div class="line-clamp" data-offset-x="10"> 97 <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div> 98 </div> 99 </div> 100 101 <!-- Nested div after first line --> 102 <div class="target" style="align-items: first baseline;"> 103 <div data-offset-x="25"><span></span></div> 104 <div class="line-clamp" data-offset-x="10"> 105 <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> 106 </div> 107 </div> 108 109 <div class="target" style="align-items: last baseline;"> 110 <div data-offset-x="105"><span></span></div> 111 <div class="line-clamp" data-offset-x="10"> 112 <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div> 113 </div> 114 </div> 115 116 <!-- Block within inline. --> 117 <div class="target" style="align-items: first baseline;"> 118 <div data-offset-x="25"><span></span></div> 119 <div class="line-clamp" data-offset-x="10"> 120 <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> 121 </div> 122 </div> 123 124 <div class="target" style="align-items: last baseline;"> 125 <div data-offset-x="105"><span></span></div> 126 <div class="line-clamp" data-offset-x="10"> 127 <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i> 128 </div> 129 </div>