tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

flex-align-baseline-line-clamp-001.tentative.html (3905B)

      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 }
     11 .target > div {
     12  background: hotpink;
     13  font-size: 30px;
     14 }
     15 .line-clamp {
     16  display: -webkit-box;
     17  -webkit-box-orient: vertical;
     18  -webkit-line-clamp: 3;
     19  border: solid 10px;
     20  font-size: 40px !important;
     21  overflow: hidden;
     22 }
     23 .line-clamp div {
     24  background: orange;
     25 }
     26 span {
     27  display: inline-block;
     28  width: 1em;
     29  height: 1em;
     30  outline: solid cyan 3px;
     31  outline-offset: -3px;
     32 }
     33 </style>
     34 <script src="/resources/testharness.js"></script>
     35 <script src="/resources/testharnessreport.js"></script>
     36 <script src="/resources/check-layout-th.js"></script>
     37 <body onload="checkLayout('.target > *')">
     38 
     39 <!-- Five lines -->
     40 <div class="target" style="align-items: first baseline;">
     41  <div data-offset-y="30"><span></span></div>
     42  <div class="line-clamp" data-offset-y="10">
     43    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
     44  </div>
     45 </div>
     46 
     47 <div class="target" style="align-items: last baseline;">
     48  <div data-offset-y="110"><span></span></div>
     49  <div class="line-clamp" data-offset-y="10">
     50    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
     51  </div>
     52 </div>
     53 
     54 <!-- Two lines -->
     55 <div class="target" style="align-items: first baseline;">
     56  <div data-offset-y="30"><span></span></div>
     57  <div class="line-clamp" data-offset-y="10">
     58    <span></span><br><span></span>
     59  </div>
     60 </div>
     61 
     62 <div class="target" style="align-items: last baseline;">
     63  <div data-offset-y="70"><span></span></div>
     64  <div class="line-clamp" data-offset-y="10">
     65    <span></span><br><span></span>
     66  </div>
     67 </div>
     68 
     69 <!-- Three lines -->
     70 <div class="target" style="align-items: first baseline;">
     71  <div data-offset-y="30"><span></span></div>
     72  <div class="line-clamp" data-offset-y="10">
     73    <span></span><br><span></span><br><span></span>
     74  </div>
     75 </div>
     76 
     77 <div class="target" style="align-items: last baseline;">
     78  <div data-offset-y="110"><span></span></div>
     79  <div class="line-clamp" data-offset-y="10">
     80    <span></span><br><span></span><br><span></span>
     81  </div>
     82 </div>
     83 
     84 
     85 <!-- Wrapping div -->
     86 <div class="target" style="align-items: first baseline;">
     87  <div data-offset-y="30"><span></span></div>
     88  <div class="line-clamp" data-offset-y="10">
     89    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
     90  </div>
     91 </div>
     92 
     93 <div class="target" style="align-items: last baseline;">
     94  <div data-offset-y="110"><span></span></div>
     95  <div class="line-clamp" data-offset-y="10">
     96    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
     97  </div>
     98 </div>
     99 
    100 <!-- Nested div after first line -->
    101 <div class="target" style="align-items: first baseline;">
    102  <div data-offset-y="30"><span></span></div>
    103  <div class="line-clamp" data-offset-y="10">
    104    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
    105  </div>
    106 </div>
    107 
    108 <div class="target" style="align-items: last baseline;">
    109  <div data-offset-y="110"><span></span></div>
    110  <div class="line-clamp" data-offset-y="10">
    111    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
    112  </div>
    113 </div>
    114 
    115 <!-- Block within inline. -->
    116 <div class="target" style="align-items: first baseline;">
    117  <div data-offset-y="30"><span></span></div>
    118  <div class="line-clamp" data-offset-y="10">
    119    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
    120  </div>
    121 </div>
    122 
    123 <div class="target" style="align-items: last baseline;">
    124  <div data-offset-y="110"><span></span></div>
    125  <div class="line-clamp" data-offset-y="10">
    126    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
    127  </div>
    128 </div>