tor-browser

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

computing-row-measure-1.html (2849B)

      1 <!doctype html>
      2 <script src='/resources/testharness.js'></script>
      3 <script src='/resources/testharnessreport.js'></script>
      4 <link rel='stylesheet' href='../support/base.css' />
      5 
      6 <link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" />
      7 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-column-measures" />
      8 <main>
      9    <h1>Width Distribution</h1>
     10    <h4>"Computing column measures"</h4>
     11    <p>This is testing intermediate min-content width for span 2</p>
     12 
     13    <hr/>
     14    <table cellspacing="0" cellpadding="0">
     15        <colgroup style="width: auto;">
     16            <col style="width: 10px;"></col>
     17            <col style="width: 20px;"></col>
     18        </colgroup>
     19        <tr>
     20            <td id="one" style="width: 1px;"></td>
     21            <td style="width: 2px;"></td>
     22        </tr>
     23        <tr>
     24            <td colspan="2" style="width: 51px;"></td>
     25        </tr>
     26    </table>
     27 
     28    <table cellspacing="0" cellpadding="0">
     29        <colgroup style="width: auto;">
     30            <col style="width: 10px;"></col>
     31            <col style="width: auto;"></col>
     32        </colgroup>
     33        <tr>
     34            <td id="two" style="width: 1px;"></td>
     35            <td style="width: auto;"></td>
     36        </tr>
     37        <tr>
     38            <td colspan="2" style="width: 51px;"></td>
     39        </tr>
     40    </table>
     41 
     42    <table cellspacing="0" cellpadding="0">
     43        <colgroup style="width: 51px;">
     44            <col style="width: 10px;"></col>
     45            <col style="width: 20px;"></col>
     46        </colgroup>
     47        <tr>
     48            <td id="three" style="width: 1px;"></td>
     49            <td style="width: 2px;"></td>
     50        </tr>
     51    </table>
     52 
     53    <table cellspacing="0" cellpadding="0">
     54        <colgroup style="width: 51px;">
     55            <col style="width: 20px;"></col>
     56            <col style="width: auto;"></col>
     57        </colgroup>
     58        <tr>
     59            <td style="width: 10px;"></td>
     60            <td id="four" style="width: 20px;"></td>
     61        </tr>
     62    </table>
     63 </main>
     64 
     65 <style>
     66    table { margin-bottom: 10px; height: 50px; }
     67    td { outline: 1px solid red; outline-offset: -1px; }
     68 </style>
     69 <script>
     70    var i = 1;
     71    generate_tests(assert_equals, [
     72        [
     73            "Checking intermediate min-content width for span 2 (1)",
     74            document.getElementById('one').offsetWidth,
     75            17
     76        ],
     77        [
     78            "Checking intermediate min-content width for span 2 (2)",
     79            document.getElementById('two').offsetWidth,
     80            10
     81        ],
     82        [
     83            "Checking intermediate min-content width for span 2 (3)",
     84            document.getElementById('three').offsetWidth,
     85            10
     86        ],
     87        [
     88            "Checking intermediate min-content width for span 2 (4)",
     89            document.getElementById('four').offsetWidth,
     90            51
     91        ]
     92    ]);
     93 </script>
     94 </html>