LayoutTableRow's location() is in logical coordinates of the containing table section. We need to transpose the location before using the location in physical coordinates.
<body style='margin: 0'>
<div style='writing-mode: vertical-rl'>
<table style='border-collapse: collapse'>
<tr id='row1'>
<td id='cell1' style='width: 100px; height: 80px; background-color: green'></td>
</tr>
<tr id='row2'>
<td id='cell2' style='width: 300px; height: 80px; background-color: blue'></td>
</tr>
</table>
</div>
</body>
location topLeftLocation offsetTop offsetLeft visualRect [1]
row1 0,0 300,0 300 0 300,0 100x82
cell1 0,0 300,0 300 0 300,0 100x82
row2 0,100 100,100 100 100 100,100 300x82
cell2 100,0 0,0 0 0 0,0 300x82
[1] Suppose viewport is the of same size of the table.
The transposed location() of row2 causes incorrect result of its topLeftLocation(), offsetX, offsetY and visual rect.
This also causes incorrect highlight of row2 in DevTools.
Comment 1 by wangxianzhu@chromium.org
, Oct 3 2016