tor-browser

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

grid-align-baseline-line-clamp-003.tentative.html (3960B)

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