1228668 - Box model reports wrong margin, border, padding, content dimentions of an element with transform:scale() while reporting correct border-box dimentions

Status: RESOLVED DUPLICATE of bug 957148

(DevTools :: Inspector, defect)

Description

[arni2033]

Attachment: testcase 1 - transform-scale() Box model reports wrong dimentions.htm

>>>   My Info:   Win7_64, Nightly 45, 32bit, ID 20151127030231
STR:
1. Open attached "testcase 1"
2. Open Inspector, open "box model" tab in Inspector sidebar

Result:       
 It reports margin == 70px, border == 2px, padding == 4px, content == 78px x 78px

Expectations: 
 Either (A) or (B)
 A) It should report visible dimentions:
    margin == 350px, border == 10px, padding == 20px, content == 30px x 30px
 B) It should report dimentions calculated "before" applying transform:scale() :
    margin == 70px, border == 2px, padding == 4px, content == 6px x 6px

Comment 1

[arni2033]

Attachment: screenshot 1 - transform-scale() Box model reports wrong dimentions.png

Comment 2

[Patrick Brosset <:pbro>]

The problem comes from the fact that on one hand, the margin, padding, border values are retrieved using the computed-style of the node and, on the other hand, the width and height are retrieved using getBoundingClientRect() which returns the post-transform size.
https://dxr.mozilla.org/mozilla-central/source/devtools/server/actors/styles.js#860

We need to figure out whether we want the box-model view to give the actual physical dimensions of the element as seen on the page, or the computed css dimensions.

If we keep on using computed styles, then it's easier for the user to understand the link between the values shown in the box-model view and the ones shown in the rule-view. In fact, if you hover over a value in the box-model view, there's a tooltip that tells users where a value is defined in CSS.
So I'm tempted to keep our current implementation and fix this bug = go with option (B).

On the other hand, if we do this, then the box-model view isn't answering the question: why is this element so big in the page?
We could almost have 2 modes, with a toggle you'd flip in the view to switch between CSS computed values and actual physical box dimensions. We can get both anyway.

Comment 3

[Sebastian Zartner [:sebo]]

This was already reported ealier in bug 957148, so I'm marking this one as duplicate of the other one.

Sebastian