tor-browser

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

flexbox-intrinsic-sizing-horiz-1-ref.xhtml (3177B)

      1 <?xml version="1.0" encoding="UTF-8"?>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <!--
      7     Reference case - see documentation in corresponding testcase.
      8     This reference uses blocks where the testcase uses flexboxes.
      9     They should be sized the same, since they're basically just text
     10     with no special flex sizing properties in play.
     11 -->
     12 <html xmlns="http://www.w3.org/1999/xhtml">
     13  <head>
     14    <link rel="stylesheet" type="text/css" href="ahem.css" />
     15    <style>
     16      table {
     17        width: 300px;
     18        font: 10px Ahem;
     19        margin-bottom: 2px;
     20        border: 1px dashed black;
     21      }
     22 
     23      div.a { background: lightgreen; }
     24      div.b { background: lightblue;  }
     25 
     26      <!-- helper-classes for assigning pref / min / auto-width to our divs -->
     27      div.prefWidth {
     28        width: max-content;
     29      }
     30      div.minWidth {
     31        width: min-content;
     32      }
     33      div.autoWidth {
     34        width: auto;
     35      }
     36  </style>
     37 </head>
     38 <body>
     39  <!-- both auto width -->
     40   <table cellpadding="0" cellspacing="0"><tr>
     41       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
     42       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
     43   </tr></table>
     44 
     45   <!-- MIXING MIN WIDTH & AUTO -->
     46   <!-- both min width -->
     47   <table cellpadding="0" cellspacing="0"><tr>
     48       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
     49       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
     50   </tr></table>
     51   <!-- min,auto -->
     52   <table cellpadding="0" cellspacing="0"><tr>
     53       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
     54       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
     55   </tr></table>
     56   <!-- auto,min -->
     57   <table cellpadding="0" cellspacing="0"><tr>
     58       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
     59       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
     60   </tr></table>
     61 
     62   <!-- MIXING PREF WIDTH & AUTO -->
     63   <!-- both prefWidth (NOTE: makes the table larger than it wants to be -->
     64   <table cellpadding="0" cellspacing="0"><tr>
     65       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
     66       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
     67   </tr></table>
     68   <!-- pref,auto -->
     69   <table cellpadding="0" cellspacing="0"><tr>
     70       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
     71       <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td>
     72   </tr></table>
     73   <!-- auto,pref -->
     74   <table cellpadding="0" cellspacing="0"><tr>
     75       <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td>
     76       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
     77   </tr></table>
     78 
     79   <!-- MIXING PREF WIDTH & MIN WIDTH -->
     80   <!-- min,pref -->
     81   <table cellpadding="0" cellspacing="0"><tr>
     82       <td><div class="a minWidth">aaaa aaaa aaaaa</div></td>
     83       <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td>
     84   </tr></table>
     85   <!-- pref,min -->
     86   <table cellpadding="0" cellspacing="0"><tr>
     87       <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td>
     88       <td><div class="b minWidth">bb bb b bb bb b bb b</div></td>
     89   </tr></table>
     90 </body>
     91 </html>