tor-browser

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

col-collapse-table-size.html (2160B)

      1 <!doctype html>
      2 <script src='/resources/testharness.js'></script>
      3 <script src='/resources/testharnessreport.js'></script>
      4 <script src="/resources/check-layout-th.js"></script>
      5 <title>col visibility:collapse and minmax sizes</title>
      6 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
      7 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#visibility-collapse-track-rendering"/>
      8 
      9 <style>
     10 
     11  main table {
     12    right: 0;
     13    display:inline-table;
     14    border: 1px solid black;
     15  }
     16  main col {
     17    visibility:collapse;
     18  }
     19  main td {
     20    width: 200px;
     21    height: 20px;
     22  }
     23  main caption {
     24    background: yellow;
     25  }
     26  main td:nth-child(1) {
     27    background: rgba(255,0,0,0.2);
     28  }
     29  main td:nth-child(2) {
     30    background: rgba(200,200,200,1.0);
     31  }
     32  main table:hover col {
     33    visibility: visible;
     34  }
     35 </style>
     36 
     37 <h1>Interactions between &lt;COL&gt; visiblity:collapse, and table inline size</h1>
     38 <p>What happens to the table size when column collapses? Should the space taken up by the table
     39  remain the same, but the table iteslf should shrink?</p>
     40 <p>Hovering over tables will turn off column collapsing</p>
     41 <main>
     42 
     43 <p style="position:absolute;top:200px;left:0;width: 300px">
     44 Tables to the right are absolutely positioned</p>
     45 <table id="abs" style="position:absolute;top:200px;right:0">
     46  <col>
     47  <td style="width:100px"></td>
     48  <td>absolute, right:0</td>
     49 </table>
     50 
     51 <table id="abscaption" style="position:absolute; top:260px;right:0" >
     52  <col>
     53  <caption style="width:250px">caption</caption>
     54  <td></td>
     55  <td>absolute, right:0</td>
     56 </table>
     57 
     58 <p style="margin-top:200px">Inline tables</p>
     59 <table id="caption">
     60  <col>
     61  <caption style="width:500px">caption</caption>
     62  <td></td>
     63  <td></td>
     64 </table><span style="font-size:50px">after</span>
     65 <p>
     66 
     67 <table id="plain">
     68  <col>
     69  <td style="width:100px">td</td>
     70  <td></td>
     71 </table><span style="font-size:50px">after</span>
     72 
     73 <p>Table as a flex item</p>
     74 
     75 <div style="display:flex;width:700px">
     76 
     77 <table id="plain">
     78  <col>
     79  <td style="width:100px">td</td>
     80  <td></td>
     81 </table>
     82 <div style="flex-grow:1;background-color:yellow">
     83 </div>
     84 </main>
     85 
     86 <script>
     87  checkLayout("main table");
     88 </script>