1415134 - Removing and reinserting an HTML <tr> should restore the previous rendering (writing-mode: vertical-rl)

Status: NEW

(Core :: Layout: Tables, defect, P3)

Description

[Jonathan Watt [:jwatt]]

Load:

https://hg.mozilla.org/mozilla-central/raw-file/2535bad09d720e71a982f3f70dd6925f66ab8ec7/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-002.xht

and open the devtools console. Run the following:

  let el = document.getElementById("five");
  let parent = el.parentNode;
  let nextSibling = el.nextSibling;
  el.parentNode.removeChild(el);

The square should turn red. Now reinsert the <tr> by running:

  parent.insertBefore(el, nextSibling);

The rect changes back to being green, as it should, but it also shifts downwards which should not happen.

Comment 1

[Jonathan Watt [:jwatt]]

Another example is:

https://hg.mozilla.org/mozilla-central/raw-file/2535bad09d720e71a982f3f70dd6925f66ab8ec7/layout/reftests/w3c-css/received/css-writing-modes-3/border-conflict-element-vrl-006.xht

following the same steps as above but with:

  let el = document.getElementById("nine");

Comment 2

[Xidorn Quan [:xidorn] UTC+11]

After reinserting the <td> element, its previous sibling gets a 25px border which is not supposed to be there. I suspect this is an issue of border collapse handling, because 25px is just half of the 50px border which the next sibling has.