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