table-parts-offsets-vertical-rl.tentative.html (6238B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> 4 <link rel="help" href="https://www.w3.org/TR/css-break-3/#box-splitting"> 5 <link rel="help" href="https://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface"> 6 <div 7 style="column-width:200px; column-gap: 0; column-fill:auto; width:70px; height:600px; background:yellow; writing-mode: vertical-rl;"> 8 <div id="table" style="display:table; border-spacing:7px; border:2px solid; padding:1px;"> 9 <div id="colgroup" style="display:table-column-group;"> 10 <div id="col" style="display:table-column;"></div> 11 <div id="col2" style="display:table-column;"></div> 12 </div> 13 <div id="colgroup2" style="display:table-column-group;"> 14 <div id="col3" style="display:table-column;"></div> 15 </div> 16 <div id="rowgroup" style="display:table-row-group;"> 17 <div id="row" style="display:table-row;"> 18 <div id="cell" style="display:table-cell;"> 19 <div id="content" style="width:100px; height:50px; background:blue;"></div> 20 </div> 21 <div id="cell2" style="display:table-cell;"> 22 <div id="content2" style="width:100px; height:50px; background:blue;"></div> 23 </div> 24 <div id="cell3" style="display:table-cell;"> 25 <div id="content3" style="width:100px; height:50px; background:blue;"></div> 26 </div> 27 </div> 28 <div id="row2" style="display:table-row;"> 29 <div id="cell4" style="display:table-cell;"> 30 <div id="content4" style="width:50px; height: 50px; background: blue;"></div> 31 </div> 32 </div> 33 </div> 34 </div> 35 </div> 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 <script> 39 test(() => { 40 assert_equals(table.offsetTop, 8, "offsetTop"); 41 assert_equals(table.offsetLeft, 8, "offsetLeft"); 42 assert_equals(table.offsetWidth, 70, "offsetWidth"); 43 assert_equals(table.offsetHeight, 584, "offsetHeight"); 44 }, "table"); 45 test(() => { 46 assert_equals(colgroup.offsetTop, 18, "offsetTop"); 47 assert_equals(colgroup.offsetLeft, 8, "offsetLeft"); 48 assert_equals(colgroup.offsetWidth, 70, "offsetWidth"); 49 assert_equals(colgroup.offsetHeight, 507, "offsetHeight"); 50 }, "colgroup"); 51 test(() => { 52 assert_equals(col.offsetTop, 18, "offsetTop"); 53 assert_equals(col.offsetLeft, 8, "offsetLeft"); 54 assert_equals(col.offsetWidth, 70, "offsetWidth"); 55 assert_equals(col.offsetHeight, 450, "offsetHeight"); 56 }, "col"); 57 test(() => { 58 assert_equals(col2.offsetTop, 75, "offsetTop"); 59 assert_equals(col2.offsetLeft, 8, "offsetLeft"); 60 assert_equals(col2.offsetWidth, 70, "offsetWidth"); 61 assert_equals(col2.offsetHeight, 450, "offsetHeight"); 62 }, "col2"); 63 test(() => { 64 assert_equals(colgroup2.offsetTop, 132, "offsetTop"); 65 assert_equals(colgroup2.offsetLeft, 8, "offsetLeft"); 66 assert_equals(colgroup2.offsetWidth, 70, "offsetWidth"); 67 assert_equals(colgroup2.offsetHeight, 450, "offsetHeight"); 68 }, "colgroup2"); 69 test(() => { 70 assert_equals(col3.offsetTop, 132, "offsetTop"); 71 assert_equals(col3.offsetLeft, 8, "offsetLeft"); 72 assert_equals(col3.offsetWidth, 70, "offsetWidth"); 73 assert_equals(col3.offsetHeight, 450, "offsetHeight"); 74 }, "col3"); 75 test(() => { 76 assert_equals(rowgroup.offsetTop, 18, "offsetTop"); 77 assert_equals(rowgroup.offsetLeft, 8, "offsetLeft"); 78 assert_equals(rowgroup.offsetWidth, 70, "offsetWidth"); 79 assert_equals(rowgroup.offsetHeight, 564, "offsetHeight"); 80 }, "rowgroup"); 81 test(() => { 82 assert_equals(row.offsetTop, 18, "offsetTop"); 83 assert_equals(row.offsetLeft, 8, "offsetLeft"); 84 assert_equals(row.offsetWidth, 70, "offsetWidth"); 85 assert_equals(row.offsetHeight, 364, "offsetHeight"); 86 }, "row"); 87 test(() => { 88 assert_equals(cell.offsetTop, 18, "offsetTop"); 89 assert_equals(cell.offsetLeft, 8, "offsetLeft"); 90 assert_equals(cell.offsetWidth, 70, "offsetWidth"); 91 assert_equals(cell.offsetHeight, 250, "offsetHeight"); 92 }, "cell"); 93 test(() => { 94 assert_equals(content.offsetTop, 18, "offsetTop"); 95 assert_equals(content.offsetLeft, 8, "offsetLeft"); 96 assert_equals(content.offsetWidth, 70, "offsetWidth"); 97 assert_equals(content.offsetHeight, 250, "offsetHeight"); 98 }, "content"); 99 test(() => { 100 assert_equals(cell2.offsetTop, 75, "offsetTop"); 101 assert_equals(cell2.offsetLeft, 8, "offsetLeft"); 102 assert_equals(cell2.offsetWidth, 70, "offsetWidth"); 103 assert_equals(cell2.offsetHeight, 250, "offsetHeight"); 104 }, "cell2"); 105 test(() => { 106 assert_equals(content2.offsetTop, 75, "offsetTop"); 107 assert_equals(content2.offsetLeft, 8, "offsetLeft"); 108 assert_equals(content2.offsetWidth, 70, "offsetWidth"); 109 assert_equals(content2.offsetHeight, 250, "offsetHeight"); 110 }, "content2"); 111 test(() => { 112 assert_equals(cell3.offsetTop, 132, "offsetTop"); 113 assert_equals(cell3.offsetLeft, 8, "offsetLeft"); 114 assert_equals(cell3.offsetWidth, 70, "offsetWidth"); 115 assert_equals(cell3.offsetHeight, 250, "offsetHeight"); 116 }, "cell3"); 117 test(() => { 118 assert_equals(content3.offsetTop, 132, "offsetTop"); 119 assert_equals(content3.offsetLeft, 8, "offsetLeft"); 120 assert_equals(content3.offsetWidth, 70, "offsetWidth"); 121 assert_equals(content3.offsetHeight, 250, "offsetHeight"); 122 }, "content3"); 123 test(() => { 124 assert_equals(row2.offsetTop, 218, "offsetTop"); 125 assert_equals(row2.offsetLeft, 8, "offsetLeft"); 126 assert_equals(row2.offsetWidth, 70, "offsetWidth"); 127 assert_equals(row2.offsetHeight, 364, "offsetHeight"); 128 }, "row2"); 129 test(() => { 130 assert_equals(cell4.offsetTop, 218, "offsetTop"); 131 assert_equals(cell4.offsetLeft, 8, "offsetLeft"); 132 assert_equals(cell4.offsetWidth, 70, "offsetWidth"); 133 assert_equals(cell4.offsetHeight, 250, "offsetHeight"); 134 }, "cell4"); 135 test(() => { 136 assert_equals(content4.offsetTop, 218, "offsetTop"); 137 assert_equals(content4.offsetLeft, 8, "offsetLeft"); 138 assert_equals(content4.offsetWidth, 70, "offsetWidth"); 139 assert_equals(content4.offsetHeight, 250, "offsetHeight"); 140 }, "content4"); 141 </script>