1817514 - DevTools displays wrong content-size for elements in multi-column layout

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: A simple multi-column testcase

What were you doing?

1. Load the attached testcase.
2. Open DevTools, and inspect the element under the multi-column container.

What happened?

See "Layout" panel -> "Box Model". The element's content-size is 140x190, which seems to be the bounding box of the element across all columns.

What should have happened?

The element's content-size should be 40x590, where its width 40px is 50px column width minus border-left 5px and border-right 5px. Google Chrome's DevTools displays the correct size.

Comment 1

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Firefox devtools.png

Comment 2

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Chrome devtools.png

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

It looks like we compute this information using getBoundingClientRect while Chrome are using clientWidth.

Comment 4

[Julian Descottes [:jdescottes]]

Discussed with the team, since the 140px includes borders (and potentially margins...), the representation from Chrome seems more accurate but that's still not a very helpful representation of such an element. Will file a followup to investigate improvements.