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

RESOLVED DUPLICATE of bug 957148

Status

()

Firefox
Developer Tools: Inspector
RESOLVED DUPLICATE of bug 957148
2 years ago
2 years ago

People

(Reporter: arni2033, Unassigned)

Tracking

(Blocks: 1 bug)

Trunk
Points:
---

Firefox Tracking Flags

(firefox45 affected)

Details

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
Created attachment 8693086 [details]
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
(Reporter)

Comment 1

2 years ago
Created attachment 8693087 [details]
screenshot 1 - transform-scale() Box model reports wrong dimentions.png
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.
Blocks: 1150496
This was already reported ealier in bug 957148, so I'm marking this one as duplicate of the other one.

Sebastian
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 957148
You need to log in before you can comment on or make changes to this bug.