tor-browser

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

text-wrap-balance-line-clamp-005.html (2012B)

      1 <!DOCTYPE html>
      2 <html lang="en" >
      3 <meta charset="utf-8">
      4 <title>CSS test: balancing and line-clamp</title>
      5 <link rel='author' title='Andreu Botella' href='mailto:abotella@igalia.com'>
      6 <link rel='help' href='https://drafts.csswg.org/css-overflow-4/#line-clamp'>
      7 <link rel='help' href='https://drafts.csswg.org/css-text-4/#text-wrap-style'>
      8 <meta name="assert" content="If the element is affected by line-clamp, the clamping effect is applied first, then the remaining lines are balanced. This also happens if the balanced paragraph is within the line-clamp container, not the line-clamp container itself.">
      9 <link rel="match" href="reference/text-wrap-balance-line-clamp-005-ref.html">
     10 <style>
     11 body > div {
     12    border: solid;
     13    font-family: monospace;
     14    margin: 1ch;
     15    width: 11.1ch;  /* .1ch to work around browser bugs */
     16 }
     17 .test {
     18    border-color: blue;
     19 
     20    line-clamp: 3;
     21    /* This code is unnecessary in any browser that supports the unprefixed version of line-clamp,
     22       but neither does it have any detrimental effect,
     23       and it broadens the test to browsers that only support the prefixed version */
     24 
     25    -webkit-line-clamp: 3;
     26    display: -webkit-box;
     27    -webkit-box-orient: vertical;
     28    overflow: hidden;
     29 }
     30 .balanced {
     31    text-wrap-style: balance;
     32 }
     33 .ref {
     34    border-color: orange;
     35    white-space: nowrap;
     36 }
     37 </style>
     38 
     39 <p>Test passes if the box with a blue frame is identical to the orange one.
     40 
     41 <div class=test>
     42    abc def
     43    <div class="balanced">
     44        AB CD EF GH
     45        IJ KL MN O
     46        PQ RST
     47    </div>
     48    uvwxyz
     49 </div>
     50 
     51 <div class=ref>abc def<br>AB CD EF GH<br>IJ KL MN O…</div>
     52 
     53 <!--
     54 unbalanced layout without clamping:
     55    |-----------|
     56    |abc def    |
     57    |AB CD EF GH|
     58    |IJ KL MN O |
     59    |PQ RST     |
     60    |uvwxyz     |
     61    |-----------|
     62 
     63 unbalanced layout after clamping:
     64    |-----------|
     65    |abc def    |
     66    |AB CD EF GH|
     67    |IJ KL MN O…|
     68    |-----------|
     69 
     70 There is no way to balance the uppercase lines without changing the number of
     71 lines.
     72 -->