tor-browser

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

summary-display-inline-flex.html (2910B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Test: summary with 'display: inline-flex'</title>
      4 <link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com">
      5 <link rel="match" href="summary-display-inline-flex-ref.html">
      6 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">
      7 <meta name="assert" content="Checks that styling a <summary> with 'display: inline-flex' makes it a flex container.">
      8 <style>
      9 .flex-container {
     10  background: #333;
     11  border: 0px;
     12  display: inline-flex;
     13  margin: 0px;
     14  padding: 0px;
     15 }
     16 
     17 .flex-container.flex-direction-row {
     18  flex-direction : row;
     19 }
     20 
     21 .flex-container.flex-direction-row-reverse {
     22  flex-direction : row-reverse;
     23 }
     24 
     25 .flex-container.flex-direction-column {
     26  flex-direction : column;
     27 }
     28 
     29 .flex-container.flex-direction-column-reverse {
     30  flex-direction : column-reverse;
     31 }
     32 
     33 .flex-container.flex-direction-column-reverse {
     34  flex-direction : column-reverse;
     35 }
     36 
     37 .flex-container.justify-content-center {
     38  justify-content: center;
     39 }
     40 
     41 .flex-container.justify-content-space-around {
     42  justify-content: space-around;
     43 }
     44 
     45 .flex-container.justify-content-space-between {
     46  justify-content: space-between;
     47 }
     48 
     49 .flex-item {
     50  width:50px;
     51  height:50px;
     52  margin:20px;
     53  background: #eee;
     54  line-height: 50px;
     55  text-align: center;
     56 }
     57 </style>
     58 
     59 <summary style="display: inline-flex;">
     60  <div>these fields</div>
     61  <div>shouldn't be</div>
     62  <div>stacked vertically</div>
     63 </summary>
     64 
     65 <h1>flex-direction: row</h1>
     66 <summary class="flex-container flex-direction-row">
     67  <div class="flex-item">1</div>
     68  <div class="flex-item">2</div>
     69  <div class="flex-item">3</div>
     70 </summary>
     71 
     72 <h1>flex-direction: row-reverse</h1>
     73 <summary class="flex-container flex-direction-row-reverse">
     74  <div class="flex-item">1</div>
     75  <div class="flex-item">2</div>
     76  <div class="flex-item">3</div>
     77 </summary>
     78 
     79 <h1>flex-direction: column</h1>
     80 <summary class="flex-container flex-direction-column">
     81  <div class="flex-item">1</div>
     82  <div class="flex-item">2</div>
     83  <div class="flex-item">3</div>
     84 </summary>
     85 
     86 <h1>flex-direction: column-reverse</h1>
     87 <summary class="flex-container flex-direction-column-reverse">
     88  <div class="flex-item">1</div>
     89  <div class="flex-item">2</div>
     90  <div class="flex-item">3</div>
     91 </summary>
     92 
     93 <h1>justify-content: center</h1>
     94 <summary class="flex-container justify-content-center">
     95  <div class="flex-item">1</div>
     96  <div class="flex-item">2</div>
     97  <div class="flex-item">3</div>
     98 </summary>
     99 
    100 <h1>justify-content: space-around</h1>
    101 <summary class="flex-container justify-content-space-around">
    102  <div class="flex-item">1</div>
    103  <div class="flex-item">2</div>
    104  <div class="flex-item">3</div>
    105 </summary>
    106 
    107 <h1>justify-content: space-between</h1>
    108 <summary class="flex-container justify-content-space-between">
    109  <div class="flex-item">1</div>
    110  <div class="flex-item">2</div>
    111  <div class="flex-item">3</div>
    112 </summary>