tor-browser

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

details-summary-display-inline-001-ref.html (2726B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Reference Case</title>
      4 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
      5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
      6 <link rel="stylesheet" href="/fonts/ahem.css">
      7 <style>
      8  :root { font: 20px/1 Ahem; }
      9 
     10  div.group {
     11    /* Logical groupings, floated left to stack horizontally, just to make the
     12       best use of our screen real-estate: */
     13    border: 1px solid black;
     14    float: left;
     15  }
     16 
     17  div.container {
     18    border: 3px solid gray;
     19    margin: 5px;
     20    width: max-content;
     21 
     22    /* This should be wide enough to fit 5 Ahem glyphs, but not 6.
     23       This lets us make sure that linewrapping works properly when
     24       details/summary have inline-flavored display values. */
     25    max-width: 5.5em;
     26  }
     27 
     28  div.details {
     29    /* Dodgerblue for Details */
     30    color: dodgerblue;
     31  }
     32  div.summary {
     33    /* Salmon for Summary */
     34    color: salmon;
     35  }
     36 
     37  .inline { display: inline; }
     38  .inline-block { display: inline-block; }
     39  .block { display: block; }
     40 </style>
     41 <!-- details is inline, summary is {inline, inline-block, block}: -->
     42 <div class="group">
     43  <div class="container">
     44    X
     45    <div class="details inline">
     46      <div class="summary inline">XX XX XX</div>
     47      XX XXXX
     48    </div>
     49  </div>
     50  <div class="container">
     51    X
     52    <div class="details inline">
     53      <div class="summary inline-block">XX XX XX</div>
     54      XX XXXX
     55    </div>
     56  </div>
     57  <div class="container">
     58    X
     59    <div class="details inline">
     60      <div class="summary block">XX XX XX</div>
     61      XX XXXX
     62    </div>
     63  </div>
     64 </div>
     65 
     66 <!-- details is inline-block, summary is {inline, inline-block, block}: -->
     67 <div class="group">
     68  <div class="container">
     69    X
     70    <div class="details inline-block">
     71      <div class="summary inline">XX XX XX</div>
     72      XX XXXX
     73    </div>
     74  </div>
     75  <div class="container">
     76    X
     77    <div class="details inline-block">
     78      <div class="summary inline-block">XX XX XX</div>
     79      XX XXXX
     80    </div>
     81  </div>
     82  <div class="container">
     83    X
     84    <div class="details inline-block">
     85      <div class="summary block">XX XX XX</div>
     86      XX XXXX
     87    </div>
     88  </div>
     89 </div>
     90 
     91 <!-- details is block, summary is {inline, inline-block, block}: -->
     92 <div class="group">
     93  <div class="container">
     94    X
     95    <div class="details block">
     96      <div class="summary inline">XX XX XX</div>
     97      XX XXXX
     98    </div>
     99  </div>
    100  <div class="container">
    101    X
    102    <div class="details block">
    103      <div class="summary inline-block">XX XX XX</div>
    104      XX XXXX
    105    </div>
    106  </div>
    107  <div class="container">
    108    X
    109    <div class="details block">
    110      <div class="summary block">XX XX XX</div>
    111      XX XXXX
    112    </div>
    113  </div>
    114 </div>