summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-tables/width-distribution/computing-column-measure-1.html
blob: eeae1c7a46f0120600aa8fde35854c6ea9b94b27 (plain)
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,
            51
        ],
        [
            "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>