tor-browser

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

grid-align-baseline-line-clamp-002.tentative.html (4028B)

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