Bug 24511

Summary: Computed style margins calculated incorrectly for sized elements.
Product: WebKit Reporter: Nigel White <nigelw>
Component: DOMAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: alex, ap, jameskay, jonathan, nigelw
Priority: P2    
Version: 420+   
Hardware: PC   
OS: Windows XP   
Attachments:
Description Flags
So simple. Just run it. It gets the computed margins WRONG! none

Description Nigel White 2009-03-11 04:54:47 PDT
This affects Safari 4 beta, and Chrome 0.4

When an element is explicitly sized within another sized element, so that there is empty space to its right, the *computed style* returned for the inner element's margin-right value is the width of that empty space.

This is not correct. That's just empty space.

To illustrate, I have included a very simple  test page.

It uses the ExtJs library just as a vehicle to get the computed style. It has an Element class which encapsulates a DOM element, and this offers a getMargins method which requests the *computed" style for the element.

To run this example, download the ExtJs SDK. Drop this page into examples/<any directory>

On Webkit based browsers, the red DIV reports its left+right margin total to be 300

On Firefox, it is correctly reported as zero.

<html>
<head>
<title>Margin bug</title>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
	var inner = Ext.get("inner");
	var m = inner.getMargins('lr');
	inner.update('My left+right margins are ' + m);
});
</script>
</head>
<body>
</body>
<div id="outer" style="height:300px;width:500px;border:1px solid black">
	<div id="inner" style="height:200px;width:200px;background-color:red">
	</div>
</div>
</html>
Comment 1 Nigel White 2009-03-11 08:00:19 PDT
Of course It affects Chrome 2.* too. I just updated Chrome from the latest build channel.
Comment 2 Nigel White 2009-05-22 07:46:28 PDT
Is this not an outrageously bad bug?!
Comment 3 Jonathan Monahan 2009-05-26 02:03:28 PDT
*** This bug has been confirmed by popular vote. ***
Comment 4 Nigel White 2009-09-14 07:04:03 PDT
Any progress on this one?
Comment 5 Nigel White 2009-10-06 03:11:05 PDT
Created attachment 40706 [details]
So simple. Just run it. It gets the computed margins WRONG!
Comment 6 Nigel White 2009-10-06 03:11:50 PDT
The simple test:

<html>
<head>
<title>Margin bug</title>
<script type="text/javascript">
runTest = function() {
    var inner = document.getElementById("inner");
    var lm = parseInt(document.defaultView.getComputedStyle(inner, null).marginLeft, 10);
    var rm = parseInt(document.defaultView.getComputedStyle(inner, null).marginRight, 10);
    var m = lm + rm;
    inner.innerHTML ='My left+right margins are ' + m;
};
</script>
</head>
<body onload="runTest();">
<div id="outer" style="height:300px;width:500px;border:1px solid black">
    <div id="inner" style="height:200px;width:200px;background-color:red"></div>
</div>
</body>
</html>
Comment 7 Nigel White 2009-12-01 03:02:32 PST
HEY!

Can we have some action on this?!

This is a BUG and a bad one!

It simply reports a completely erroneous margin value. SO we cannot work out how much space is taken up by an element including its margins!
Comment 8 James Kay 2009-12-02 00:31:41 PST
I'd like to add my "voice" to this: please would someone take a look?
Comment 9 Nigel White 2009-12-02 04:12:58 PST
This is a duplicate of https://bugs.webkit.org/show_bug.cgi?id=13343 which has
several people waiting on it.
Comment 10 Alexander Willner 2010-04-17 08:30:00 PDT
According Chromium bug report: http://code.google.com/p/chromium/issues/detail?id=23816
Comment 11 Alexey Proskuryakov 2010-04-17 11:54:32 PDT
(In reply to comment #9)
> This is a duplicate of https://bugs.webkit.org/show_bug.cgi?id=13343

Thanks, marking as such.

*** This bug has been marked as a duplicate of bug 13343 ***