tor-browser

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

flexbox-table-flex-items-1.html (2351B)


      1 <!DOCTYPE HTML>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html><head>
      7  <meta charset="utf-8">
      8  <title>CSS Flexbox Test: caption size test for table flex items</title>
      9  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403">
     10  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
     11  <link rel="match" href="flexbox-table-flex-items-1-ref.html">
     12  <style type="text/css">
     13 * { vertical-align: top; }
     14 .flex {
     15  display: inline-flex;
     16  border: 3px solid grey;
     17  height: 73px;
     18  width: 110px;
     19  align-items: start;
     20 }
     21 
     22 table {
     23  border: 1px solid;
     24  padding: 0;
     25  margin: 0;
     26  background: lightgrey;
     27  flex: auto;
     28  min-width: 0;
     29  min-height: 0;
     30 }
     31 
     32 caption { border: 1px dashed blue;}
     33 x { display:block; width:16px; height:16px; }
     34 t { display:block; width:30px; height:20px; }
     35 i:nth-of-type(1) { width:10px; height:20px; }
     36 i:nth-of-type(2) { width:20px; height:10px; }
     37 
     38 .hma10 { margin: 7px 3px 1px auto; }
     39 .hmaa  { margin: 7px auto 1px auto; }
     40 .vma10 { margin: auto 7px 3px 1px; }
     41 .vmaa  { margin: auto 7px auto 1px; }
     42 
     43 .vr { writing-mode: vertical-rl; }
     44  </style>
     45 </head>
     46 <body>
     47 
     48 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption><x></x></caption><td><t></t></td></table></div>
     49 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div>
     50 
     51 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption><x></x></caption><td><t></t></td></table><i></i></div>
     52 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div>
     53 
     54 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"><x></x></caption><td><t></t></td></table><i></i></div>
     55 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"><x></x></caption><td><t></t></td></table><i></i></div>
     56 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"><x></x></caption><td><t></t></td></table><i></i></div>
     57 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"><x></x></caption><td><t></t></td></table><i></i></div>
     58 
     59 </body>
     60 </html>