tor-browser

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

grid-align-baseline-line-clamp-001.tentative.html (3931B)

      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: grid;
      6  grid-auto-flow: column;
      7  inline-size: 100px;
      8  position: relative;
      9  line-height: 0;
     10  padding: 10px;
     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-y="30"><span></span></div>
     43  <div class="line-clamp" data-offset-y="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-y="110"><span></span></div>
     50  <div class="line-clamp" data-offset-y="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-y="30"><span></span></div>
     58  <div class="line-clamp" data-offset-y="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-y="70"><span></span></div>
     65  <div class="line-clamp" data-offset-y="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-y="30"><span></span></div>
     73  <div class="line-clamp" data-offset-y="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-y="110"><span></span></div>
     80  <div class="line-clamp" data-offset-y="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-y="30"><span></span></div>
     89  <div class="line-clamp" data-offset-y="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-y="110"><span></span></div>
     96  <div class="line-clamp" data-offset-y="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-y="30"><span></span></div>
    104  <div class="line-clamp" data-offset-y="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-y="110"><span></span></div>
    111  <div class="line-clamp" data-offset-y="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-y="30"><span></span></div>
    119  <div class="line-clamp" data-offset-y="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-y="110"><span></span></div>
    126  <div class="line-clamp" data-offset-y="10">
    127    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
    128  </div>
    129 </div>