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

Nigel White
Reported 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>
Attachments
So simple. Just run it. It gets the computed margins WRONG! (644 bytes, text/html)
2009-10-06 03:11 PDT, Nigel White
no flags
Nigel White
Comment 1 2009-03-11 08:00:19 PDT
Of course It affects Chrome 2.* too. I just updated Chrome from the latest build channel.
Nigel White
Comment 2 2009-05-22 07:46:28 PDT
Is this not an outrageously bad bug?!
Jonathan Monahan
Comment 3 2009-05-26 02:03:28 PDT
*** This bug has been confirmed by popular vote. ***
Nigel White
Comment 4 2009-09-14 07:04:03 PDT
Any progress on this one?
Nigel White
Comment 5 2009-10-06 03:11:05 PDT
Created attachment 40706 [details] So simple. Just run it. It gets the computed margins WRONG!
Nigel White
Comment 6 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>
Nigel White
Comment 7 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!
James Kay
Comment 8 2009-12-02 00:31:41 PST
I'd like to add my "voice" to this: please would someone take a look?
Nigel White
Comment 9 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.
Alexander Willner
Comment 10 2010-04-17 08:30:00 PDT
Alexey Proskuryakov
Comment 11 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 ***
Note You need to log in before you can comment on or make changes to this bug.