Bug 15268 – display:table-row always shows as the first row irrespective of where its defined.

• Component: Layout and Rendering
• Status: NEW

[Anantha Keesara]

Please see the attached testcase.

All three browsers(IE,FF,Safari) render different.

[Anantha Keesara]

Created attachment 16368 [details]
display:table-row always shows as the first row irrespective of where its defined.

[Robert Blaut]

In my opinion element with display:table-row shouldn't have influence on calculating parent element height like normal <tr> element so the case exposes bug in Webkit. Only Firefox displays it correctly. Opera also fails but differently.

[Dave Hyatt]

The table is before the first div.  This is clearly some kind of ordering bug.

In addition in quirks mode we allow a table with no cells to have height (either from the row or the table specifying a height).  However for CSS-anonymous tables we really should not support the quirk.

So I see two bugs here.

[Robert Blaut]

(In reply to comment #3)
> In addition in quirks mode we allow a table with no cells to have height
> (either from the row or the table specifying a height).  However for
> CSS-anonymous tables we really should not support the quirk.

Dave, in strict mode the test case looks identical as in quirks mode: http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cdiv%20%20style%3D%22border%3A2px%20solid%20black%3B%20%20width%3A%20100px%22%3E%0A%20%20%20%20%20%3Cdiv%20%20style%3D%22border%3A2px%20solid%20red%3Bheight%3A%2060px%3B%20width%3A%2080px%3B%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20style%3D%22border%3A2px%20solid%20green%3B%20display%3A%20table-row%3B%20width%3A%2080px%3B%20height%3A%2020px%3B%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E

[Ahmad Saleem]

Created attachment 461205 [details]
Safari 15.6 matches with Chrome but differs from Firefox

I am not sure on web-spec nor on expected result but as can be seen from attached screenshot - Safari matches with Chrome but differ from Firefox. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/97642125>

[Karl Dubost]

The original test case:

<div style="border:2px solid black;  width: 100px">

  <div style="
    border: 2px solid red; 
    height: 60px; 
    width: 80px; 
    background-color: gold;
    "></div>

  <div style="
    border: 2px solid green;  
    width: 80px;
    background-color: pink; 
    height: 20px;

    display: table-row;

    "></div>

</div>


* In Firefox, the second `div` has a computed width of 0 and a height of 16 px with a border of 2px (and still it is not visible at all)
* In Chrome and Safari, the dimensions are the same *BUT we see the height*


Interestingly if I do 

<table style="border:2px solid black;  width: 100px">
  <tr style="border: 2px solid red; height: 60px; width: 80px; background-color: gold;"></tr>
  <tr style="border: 2px solid green; width: 80px; height: 20px; background-color: pink;"></tr>
</table>

* In Firefox the second TR is 88x16px (but the space is not drawn) and even more bizarre the selector of devtools show the square below.
* In Safari/Chrome it is 92x16 px (but the space is drawn)

HTML spec
For TR elements:

    Zero or more td, th, and script-supporting elements.
    https://html.spec.whatwg.org/#the-tr-element

SO this is ok:
<table><tr></tr></table>



CSS 2 says:

   If a child C of a table-row box is not a table-cell, 
   then generate an anonymous table-cell box around C 
   and all consecutive siblings of C 
   that are not table-cell boxes.
    https://drafts.csswg.org/css2/#anonymous-boxes


CSS Table Module Level 3 (NOT READY for implementation)
https://drafts.csswg.org/css-tables-3/

  To summarize, an instance of the table model consists of:
    Its table-root containing:
       * Zero, one or more table rows, optionally in row groups,
       * Each of them containing one or more table cells. (<- NOT ZERO here)

AND

  * A table-row is misparented if its parent is neither a table-row-group nor a table-root box.

  Beside their display type, the anonymous boxes created for fixup purposes 
  do not receive any specific or default styling, 
  except where otherwise mentioned by this specification.


  https://drafts.csswg.org/css-tables-3/#fixup-algorithm

[Karl Dubost]

https://codepen.io/webcompat/pen/dPMjGVR