| <!DOCTYPE html> |
| <link rel="author" title="Morten Stenshorne" href="mailto:[email protected]"> |
| <link rel="author" title="Andreu Botella" href="mailto:[email protected]"> |
| <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, 584, "offsetWidth"); |
| assert_equals(table.offsetHeight, 70, "offsetHeight"); |
| }, "table"); |
| test(() => { |
| assert_equals(colgroup.offsetTop, 18, "offsetTop"); |
| assert_equals(colgroup.offsetLeft, 18, "offsetLeft"); |
| assert_equals(colgroup.offsetWidth, 507, "offsetWidth"); |
| assert_equals(colgroup.offsetHeight, 70, "offsetHeight"); |
| }, "colgroup"); |
| test(() => { |
| assert_equals(col.offsetTop, 18, "offsetTop"); |
| assert_equals(col.offsetLeft, 18, "offsetLeft"); |
| assert_equals(col.offsetWidth, 450, "offsetWidth"); |
| assert_equals(col.offsetHeight, 70, "offsetHeight"); |
| }, "col"); |
| test(() => { |
| assert_equals(col2.offsetTop, 18, "offsetTop"); |
| assert_equals(col2.offsetLeft, 75, "offsetLeft"); |
| assert_equals(col2.offsetWidth, 450, "offsetWidth"); |
| assert_equals(col2.offsetHeight, 70, "offsetHeight"); |
| }, "col2"); |
| test(() => { |
| assert_equals(colgroup2.offsetTop, 18, "offsetTop"); |
| assert_equals(colgroup2.offsetLeft, 132, "offsetLeft"); |
| assert_equals(colgroup2.offsetWidth, 450, "offsetWidth"); |
| assert_equals(colgroup2.offsetHeight, 70, "offsetHeight"); |
| }, "colgroup2"); |
| test(() => { |
| assert_equals(col3.offsetTop, 18, "offsetTop"); |
| assert_equals(col3.offsetLeft, 132, "offsetLeft"); |
| assert_equals(col3.offsetWidth, 450, "offsetWidth"); |
| assert_equals(col3.offsetHeight, 70, "offsetHeight"); |
| }, "col3"); |
| test(() => { |
| assert_equals(rowgroup.offsetTop, 18, "offsetTop"); |
| assert_equals(rowgroup.offsetLeft, 18, "offsetLeft"); |
| assert_equals(rowgroup.offsetWidth, 564, "offsetWidth"); |
| assert_equals(rowgroup.offsetHeight, 70, "offsetHeight"); |
| }, "rowgroup"); |
| test(() => { |
| assert_equals(row.offsetTop, 18, "offsetTop"); |
| assert_equals(row.offsetLeft, 18, "offsetLeft"); |
| assert_equals(row.offsetWidth, 364, "offsetWidth"); |
| assert_equals(row.offsetHeight, 70, "offsetHeight"); |
| }, "row"); |
| test(() => { |
| assert_equals(cell.offsetTop, 18, "offsetTop"); |
| assert_equals(cell.offsetLeft, 18, "offsetLeft"); |
| assert_equals(cell.offsetWidth, 250, "offsetWidth"); |
| assert_equals(cell.offsetHeight, 70, "offsetHeight"); |
| }, "cell"); |
| test(() => { |
| assert_equals(content.offsetTop, 18, "offsetTop"); |
| assert_equals(content.offsetLeft, 18, "offsetLeft"); |
| assert_equals(content.offsetWidth, 250, "offsetWidth"); |
| assert_equals(content.offsetHeight, 70, "offsetHeight"); |
| }, "content"); |
| test(() => { |
| assert_equals(cell2.offsetTop, 18, "offsetTop"); |
| assert_equals(cell2.offsetLeft, 75, "offsetLeft"); |
| assert_equals(cell2.offsetWidth, 250, "offsetWidth"); |
| assert_equals(cell2.offsetHeight, 70, "offsetHeight"); |
| }, "cell2"); |
| test(() => { |
| assert_equals(content2.offsetTop, 18, "offsetTop"); |
| assert_equals(content2.offsetLeft, 75, "offsetLeft"); |
| assert_equals(content2.offsetWidth, 250, "offsetWidth"); |
| assert_equals(content2.offsetHeight, 70, "offsetHeight"); |
| }, "content2"); |
| test(() => { |
| assert_equals(cell3.offsetTop, 18, "offsetTop"); |
| assert_equals(cell3.offsetLeft, 132, "offsetLeft"); |
| assert_equals(cell3.offsetWidth, 250, "offsetWidth"); |
| assert_equals(cell3.offsetHeight, 70, "offsetHeight"); |
| }, "cell3"); |
| test(() => { |
| assert_equals(content3.offsetTop, 18, "offsetTop"); |
| assert_equals(content3.offsetLeft, 132, "offsetLeft"); |
| assert_equals(content3.offsetWidth, 250, "offsetWidth"); |
| assert_equals(content3.offsetHeight, 70, "offsetHeight"); |
| }, "content3"); |
| test(() => { |
| assert_equals(row2.offsetTop, 55, "offsetTop"); |
| assert_equals(row2.offsetLeft, 218, "offsetLeft"); |
| assert_equals(row2.offsetWidth, 364, "offsetWidth"); |
| assert_equals(row2.offsetHeight, 70, "offsetHeight"); |
| }, "row2"); |
| test(() => { |
| assert_equals(cell4.offsetTop, 55, "offsetTop"); |
| assert_equals(cell4.offsetLeft, 218, "offsetLeft"); |
| assert_equals(cell4.offsetWidth, 250, "offsetWidth"); |
| assert_equals(cell4.offsetHeight, 70, "offsetHeight"); |
| }, "cell4"); |
| test(() => { |
| assert_equals(content4.offsetTop, 55, "offsetTop"); |
| assert_equals(content4.offsetLeft, 218, "offsetLeft"); |
| assert_equals(content4.offsetWidth, 250, "offsetWidth"); |
| assert_equals(content4.offsetHeight, 70, "offsetHeight"); |
| }, "content4"); |
| </script> |
