24511 2009-03-11 04:54:47 -0700 Computed style margins calculated incorrectly for sized elements. 2010-04-17 11:54:43 -0700 1 1 1 Unclassified WebKit DOM 420+ PC Windows XP RESOLVED DUPLICATE 13343 P2 Normal --- 1 nigelw webkit-unassigned alex ap jameskay jonathan nigelw oldest_to_newest 113162 0 nigelw 2009-03-11 04:54:47 -0700 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> 113184 1 nigelw 2009-03-11 08:00:19 -0700 Of course It affects Chrome 2.* too. I just updated Chrome from the latest build channel. 122663 2 nigelw 2009-05-22 07:46:28 -0700 Is this not an outrageously bad bug?! 123109 3 jonathan 2009-05-26 02:03:28 -0700 *** This bug has been confirmed by popular vote. *** 147045 4 nigelw 2009-09-14 07:04:03 -0700 Any progress on this one? 152635 5 40706 nigelw 2009-10-06 03:11:05 -0700 Created attachment 40706 So simple. Just run it. It gets the computed margins WRONG! 152636 6 nigelw 2009-10-06 03:11:50 -0700 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> 167552 7 nigelw 2009-12-01 03:02:32 -0800 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! 167906 8 jameskay 2009-12-02 00:31:41 -0800 I'd like to add my "voice" to this: please would someone take a look? 167955 9 nigelw 2009-12-02 04:12:58 -0800 This is a duplicate of https://bugs.webkit.org/show_bug.cgi?id=13343 which has several people waiting on it. 213604 10 alex 2010-04-17 08:30:00 -0700 According Chromium bug report: http://code.google.com/p/chromium/issues/detail?id=23816 213640 11 ap 2010-04-17 11:54:32 -0700 (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 *** 40706 2009-10-06 03:11:05 -0700 2009-10-06 03:11:05 -0700 So simple. Just run it. It gets the computed margins WRONG! margin-bug.html text/html 644 nigelw PGh0bWw+DQo8aGVhZD4NCjx0aXRsZT5NYXJnaW4gYnVnPC90aXRsZT4NCjxzY3JpcHQgdHlwZT0i dGV4dC9qYXZhc2NyaXB0Ij4NCnJ1blRlc3QgPSBmdW5jdGlvbigpIHsNCiAgICB2YXIgaW5uZXIg PSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiaW5uZXIiKTsNCiAgICB2YXIgbG0gPSBwYXJzZUlu dChkb2N1bWVudC5kZWZhdWx0Vmlldy5nZXRDb21wdXRlZFN0eWxlKGlubmVyLCBudWxsKS5tYXJn aW5MZWZ0LCAxMCk7DQogICAgdmFyIHJtID0gcGFyc2VJbnQoZG9jdW1lbnQuZGVmYXVsdFZpZXcu Z2V0Q29tcHV0ZWRTdHlsZShpbm5lciwgbnVsbCkubWFyZ2luUmlnaHQsIDEwKTsNCiAgICB2YXIg bSA9IGxtICsgcm07DQogICAgaW5uZXIuaW5uZXJIVE1MID0nTXkgbGVmdCtyaWdodCBtYXJnaW5z IGFyZSAnICsgbTsNCn07DQo8L3NjcmlwdD4NCjwvaGVhZD4NCjxib2R5IG9ubG9hZD0icnVuVGVz dCgpOyI+DQo8ZGl2IGlkPSJvdXRlciIgc3R5bGU9ImhlaWdodDozMDBweDt3aWR0aDo1MDBweDti b3JkZXI6MXB4IHNvbGlkIGJsYWNrIj4NCiAgICA8ZGl2IGlkPSJpbm5lciIgc3R5bGU9ImhlaWdo dDoyMDBweDt3aWR0aDoyMDBweDtiYWNrZ3JvdW5kLWNvbG9yOnJlZCI+PC9kaXY+DQo8L2Rpdj4N CjwvYm9keT4NCjwvaHRtbD4=