tor-browser

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

td-box-sizing-002.html (4340B)

      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 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
      6 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#computing-the-table-width" />
      7 <style>
      8  .t {
      9    display: table;
     10    border-top-width: 20px;
     11    border-bottom-width: 40px;
     12    border-left-width: 20px;
     13    border-right-width: 40px;
     14    border-style: solid;
     15    border-color: gray;
     16    padding: 10px;
     17    border-spacing: 0;
     18    width:100px;
     19    height: 100px;
     20  }
     21  .inline {
     22    display: inline-table;
     23  }
     24  .cell {
     25    display: table-cell;
     26    background: yellow;
     27  }
     28  main td {
     29    padding: 0;
     30    background: yellow;
     31  }
     32 </style>
     33 <main>
     34 <p>box-sizing: default; border-collapse: separate </p>
     35 <table class="t" style="border-collapse: separate" data-expected-width="100" data-expected-height="100">
     36  <tbody>
     37    <td></td>
     38  </tbody>
     39 </table>
     40 <p>box-sizing: border-box; border-collapse: separate</p>
     41 <table class="t" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100">
     42  <tbody>
     43    <td></td>
     44  </tbody>
     45 </table>
     46 <p>box-sizing: content-box; border-collapse: separate</p>
     47 <table class="t" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180">
     48  <tbody>
     49    <td></td>
     50  </tbody>
     51 </table>
     52 <p>box-sizing: default; border-collapse: collapse </p>
     53 <table class="t" style="border-collapse: collapse" data-expected-width="100" data-expected-height="100">
     54  <tbody>
     55    <td></td>
     56  </tbody>
     57 </table>
     58 <p>box-sizing: border-box; border-collapse: collapse</p>
     59 <table class="t" style="box-sizing:border-box;border-collapse: collapse" data-expected-width="100" data-expected-height="100">
     60  <tbody>
     61    <td></td>
     62  </tbody>
     63 </table>
     64 <p>box-sizing: content-box; border-collapse: collapse</p>
     65 <table class="t" style="box-sizing:content-box;border-collapse: collapse" data-expected-width="130" data-expected-height="130">
     66  <tbody>
     67    <td></td>
     68  </tbody>
     69 </table>
     70 <p>div with display:table; box-sizing: default; border-collapse: separate</p>
     71 <div class="t" style="border-collapse: separate" data-expected-width="180" data-expected-height="180">
     72    <div class="cell"></div>
     73 </div>
     74 <p>div with display:table; box-sizing: border-box; border-collapse: separate</p>
     75 <div class="t" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100">
     76    <div class="cell"></div>
     77 </div>
     78 <p>div with display:table;box-sizing: content-box; border-collapse: separate</p>
     79 <div class="t" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180">
     80    <div class="cell"></div>
     81 </div>
     82 
     83 <h2>Same tests, but tables are inline.</h2>
     84 <div>
     85 <table class="t inline" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100">
     86  <tbody>
     87    <td></td>
     88  </tbody>
     89 </table>box-sizing: border-box; border-collapse: separate
     90 
     91 <div>
     92 <table class="t inline" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180">
     93  <tbody>
     94    <td></td>
     95  </tbody>
     96 </table>box-sizing: content-box; border-collapse: separate</div>
     97 <div>
     98 <table class="t inline" style="box-sizing:border-box;border-collapse: collapse" data-expected-width="100" data-expected-height="100">
     99  <tbody>
    100    <td></td>
    101  </tbody>
    102 </table>box-sizing: border-box; border-collapse: collapse</div>
    103 <div>
    104 <table class="t inline" style="box-sizing:content-box;border-collapse: collapse" data-expected-width="130" data-expected-height="130">
    105  <tbody>
    106    <td></td>
    107  </tbody>
    108 </table>box-sizing: content-box; border-collapse: collapse</div>
    109 <div>
    110 <div class="t inline" style="box-sizing:border-box;border-collapse: separate" data-expected-width="100" data-expected-height="100">
    111    <div class="cell"></div>
    112 </div>
    113 div with display:inline-table; box-sizing: border-box;
    114 </div>
    115 <div>
    116 <div class="t inline" style="box-sizing:content-box;border-collapse: separate" data-expected-width="180" data-expected-height="180">
    117   <div class="cell"></div>
    118 </div>
    119 div with display:inline-table;box-sizing: content-box</div>
    120 </main>
    121 <script>
    122  checkLayout(".t");
    123 </script>