summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-break/table/table-parts-offsets.tentative.html
blob: 265d761ffb30fd3e99214927a34ee33e3811f977 (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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting">
<link rel="help" href="https://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface">
<div style="column-width:200px; column-gap: 0; column-fill:auto; height:70px; width:600px; background:yellow;">
  <div id="table" style="display:table; border-spacing:7px; border:2px solid; padding:1px;">
    <div id="colgroup" style="display:table-column-group;">
      <div id="col" style="display:table-column;"></div>
      <div id="col2" style="display:table-column;"></div>
    </div>
    <div id="colgroup2" style="display:table-column-group;">
      <div id="col3" style="display:table-column;"></div>
    </div>
    <div id="rowgroup" style="display:table-row-group;">
      <div id="row" style="display:table-row;">
        <div id="cell" style="display:table-cell;">
          <div id="content" style="width:50px; height:100px; background:blue;"></div>
        </div>
        <div id="cell2" style="display:table-cell;">
          <div id="content2" style="width:50px; height:100px; background:blue;"></div>
        </div>
        <div id="cell3" style="display:table-cell;">
          <div id="content3" style="width:50px; height:100px; background:blue;"></div>
        </div>
      </div>
      <div id="row2" style="display:table-row;">
        <div id="cell4" style="display:table-cell;">
          <div id="content4" style="width:50px; height: 50px; background: blue;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
  test(() => {
    assert_equals(table.offsetTop, 8, "offsetTop");
    assert_equals(table.offsetLeft, 8, "offsetLeft");
    assert_equals(table.offsetWidth, 184, "offsetWidth");
    assert_equals(table.offsetHeight, 177, "offsetHeight");
  }, "table");
  test(() => {
    assert_equals(colgroup.offsetTop, 18, "offsetTop");
    assert_equals(colgroup.offsetLeft, 18, "offsetLeft");
    assert_equals(colgroup.offsetWidth, 107, "offsetWidth");
    assert_equals(colgroup.offsetHeight, 157, "offsetHeight");
  }, "colgroup");
  test(() => {
    assert_equals(col.offsetTop, 18, "offsetTop");
    assert_equals(col.offsetLeft, 18, "offsetLeft");
    assert_equals(col.offsetWidth, 50, "offsetWidth");
    assert_equals(col.offsetHeight, 157, "offsetHeight");
  }, "col");
  test(() => {
    assert_equals(col2.offsetTop, 18, "offsetTop");
    assert_equals(col2.offsetLeft, 75, "offsetLeft");
    assert_equals(col2.offsetWidth, 50, "offsetWidth");
    assert_equals(col2.offsetHeight, 157, "offsetHeight");
  }, "col2");
  test(() => {
    assert_equals(colgroup2.offsetTop, 18, "offsetTop");
    assert_equals(colgroup2.offsetLeft, 132, "offsetLeft");
    assert_equals(colgroup2.offsetWidth, 50, "offsetWidth");
    assert_equals(colgroup2.offsetHeight, 157, "offsetHeight");
  }, "colgroup2");
  test(() => {
    assert_equals(col3.offsetTop, 18, "offsetTop");
    assert_equals(col3.offsetLeft, 132, "offsetLeft");
    assert_equals(col3.offsetWidth, 50, "offsetWidth");
    assert_equals(col3.offsetHeight, 157, "offsetHeight");
  }, "col3");
  test(() => {
    assert_equals(rowgroup.offsetTop, 18, "offsetTop");
    assert_equals(rowgroup.offsetLeft, 18, "offsetLeft");
    assert_equals(rowgroup.offsetWidth, 164, "offsetWidth");
    assert_equals(rowgroup.offsetHeight, 157, "offsetHeight");
  }, "rowgroup");
  test(() => {
    assert_equals(row.offsetTop, 18, "offsetTop");
    assert_equals(row.offsetLeft, 18, "offsetLeft");
    assert_equals(row.offsetWidth, 164, "offsetWidth");
    assert_equals(row.offsetHeight, 100, "offsetHeight");
  }, "row");
  test(() => {
    assert_equals(cell.offsetTop, 18, "offsetTop");
    assert_equals(cell.offsetLeft, 18, "offsetLeft");
    assert_equals(cell.offsetWidth, 50, "offsetWidth");
    assert_equals(cell.offsetHeight, 100, "offsetHeight");
  }, "cell");
  test(() => {
    assert_equals(content.offsetTop, 18, "offsetTop");
    assert_equals(content.offsetLeft, 18, "offsetLeft");
    assert_equals(content.offsetWidth, 50, "offsetWidth");
    assert_equals(content.offsetHeight, 100, "offsetHeight");
  }, "content");
  test(() => {
    assert_equals(cell2.offsetTop, 18, "offsetTop");
    assert_equals(cell2.offsetLeft, 75, "offsetLeft");
    assert_equals(cell2.offsetWidth, 50, "offsetWidth");
    assert_equals(cell2.offsetHeight, 100, "offsetHeight");
  }, "cell2");
  test(() => {
    assert_equals(content2.offsetTop, 18, "offsetTop");
    assert_equals(content2.offsetLeft, 75, "offsetLeft");
    assert_equals(content2.offsetWidth, 50, "offsetWidth");
    assert_equals(content2.offsetHeight, 100, "offsetHeight");
  }, "content2");
  test(() => {
    assert_equals(cell3.offsetTop, 18, "offsetTop");
    assert_equals(cell3.offsetLeft, 132, "offsetLeft");
    assert_equals(cell3.offsetWidth, 50, "offsetWidth");
    assert_equals(cell3.offsetHeight, 100, "offsetHeight");
  }, "cell3");
  test(() => {
    assert_equals(content3.offsetTop, 18, "offsetTop");
    assert_equals(content3.offsetLeft, 132, "offsetLeft");
    assert_equals(content3.offsetWidth, 50, "offsetWidth");
    assert_equals(content3.offsetHeight, 100, "offsetHeight");
  }, "content3");
  test(() => {
    assert_equals(row2.offsetTop, 55, "offsetTop");
    assert_equals(row2.offsetLeft, 218, "offsetLeft");
    assert_equals(row2.offsetWidth, 164, "offsetWidth");
    assert_equals(row2.offsetHeight, 50, "offsetHeight");
  }, "row2");
  test(() => {
    assert_equals(cell4.offsetTop, 55, "offsetTop");
    assert_equals(cell4.offsetLeft, 218, "offsetLeft");
    assert_equals(cell4.offsetWidth, 50, "offsetWidth");
    assert_equals(cell4.offsetHeight, 50, "offsetHeight");
  }, "cell4");
  test(() => {
    assert_equals(content4.offsetTop, 55, "offsetTop");
    assert_equals(content4.offsetLeft, 218, "offsetLeft");
    assert_equals(content4.offsetWidth, 50, "offsetWidth");
    assert_equals(content4.offsetHeight, 50, "offsetHeight");
  }, "content4");
</script>