36084 2010-03-12 21:09:38 -0800 baseline of inline-block is not bottom margin edge for overflow other than visible 2016-06-08 11:44:12 -0700 1 1 1 Unclassified WebKit New Bugs 528+ (Nightly build) PC OS X 10.5 RESOLVED DUPLICATE 157293 https://bugs.webkit.org/attachment.cgi?id=50653 BlinkMergeCandidate P2 Normal --- 1 mackyle webkit-unassigned cbiesinger hyatt mackyle mmaxfield phiw2 oldest_to_newest 199297 0 mackyle 2010-03-12 21:09:38 -0800 CSS2.1 Section 10.8.1 http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align # The baseline of an 'inline-block' is the baseline of its last line box in # the normal flow, unless it has either no in-flow line boxes or if its # 'overflow' property has a computed value other than 'visible', in which # case the baseline is the bottom margin edge. 1. Nest two inline-block elements with borders in different colors (i.e. border: 5px solid red and border: 5px solid blue). 2. The outside one should have padding:0 3. The inside one should have margin:0 and overflow:hidden (and use the default vertical-align setting of baseline) 4. Just click on the sample URL for a test case Actual: The inner border touches the outer border on all four sides. Expected: The inner border should touch the outer border everywhere except along the bottom side. Because the inner inline-block should have had its bottom margin placed on the text baseline of the outer inline-block leaving the space between the text baseline and the bottom border of the outer block empty producing a gap between the inner border and the outer border along the bottom side only. Firefox and Opera render this correctly with the gap -- view it with one of these browsers to see the gap. The problem seems to be that WebKit does not implement the quoted part of the specification above which says, "if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." 199298 1 50652 mackyle 2010-03-12 21:11:28 -0800 Created attachment 50652 Simple HTML demonstrating bug View in Firefox to see the correct rendering. 199319 2 50653 mackyle 2010-03-13 00:07:34 -0800 Created attachment 50653 Better example. Shows bug and correct and incorrect samples. This example shows the test displayed by the current browser along with browser independent examples of correct and incorrect rendering. A 'passed' or 'failed' indication should also be shown indicating whether or not the test was correctly rendered. 303730 3 hyatt 2010-11-02 15:41:30 -0700 Not sure what to do with this bug, since it will be a compatibility issue if we try to fix it. inline-block is used heavily on OS X with text-overflow/overflow-hidden text, and losing the ability to baseline-align those blocks seems like a flaw in the spec to me. 913765 4 cbiesinger 2013-08-01 09:42:40 -0700 https://codereview.chromium.org/21414002/ 1200519 5 mmaxfield 2016-06-08 11:44:12 -0700 I wrote an exhaustive description of what is going on here in https://bugs.webkit.org/show_bug.cgi?id=157293#c4 *** This bug has been marked as a duplicate of bug 157293 *** 50652 2010-03-12 21:11:28 -0800 2010-03-13 00:07:34 -0800 Simple HTML demonstrating bug simplebug.html text/html 233 mackyle PCFET0NUWVBFIGh0bWw+PGh0bWw+PGJvZHk+CjxkaXYgc3R5bGU9ImRpc3BsYXk6aW5saW5lLWJs b2NrOyBib3JkZXI6IDVweCBzb2xpZCByZWQ7IHBhZGRpbmc6IDAiPgo8ZGl2IHN0eWxlPSJkaXNw bGF5OmlubGluZS1ibG9jazsgYm9yZGVyOiA1cHggc29saWQgYmx1ZTsgb3ZlcmZsb3c6IGhpZGRl bjsgbWFyZ2luOiAwIj4KSSBuZWVkIGEgcGlnIGhlcmUhCjwvZGl2PjwvZGl2Pgo8L2JvZHk+PC9o dG1sPgo= 50653 2010-03-13 00:07:34 -0800 2010-03-13 00:07:34 -0800 Better example. Shows bug and correct and incorrect samples. simplebug.html text/html 2791 mackyle PCFET0NUWVBFIGh0bWw+PGh0bWw+PGhlYWQ+PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQi PgpmdW5jdGlvbiBzZXRfYWdlbnRfcmVzdWx0KCkKewogIHZhciBzcCA9IGRvY3VtZW50LmdldEVs ZW1lbnRCeUlkKCd1YScpOwogIHNwLmlubmVySFRNTCA9ICdVc2VyLUFnZW50OiAnICsgbmF2aWdh dG9yLnVzZXJBZ2VudDsKICB2YXIgcnMgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncmVzdWx0 JykuZmlyc3RDaGlsZDsKICB2YXIgdGVzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0ZXN0 Jykuc2Nyb2xsSGVpZ2h0OwogIHZhciBmYWlsdXJlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQo J2ZhaWx1cmUnKS5zY3JvbGxIZWlnaHQ7CiAgdmFyIHN1Y2Nlc3MgPSBkb2N1bWVudC5nZXRFbGVt ZW50QnlJZCgnc3VjY2VzcycpLnNjcm9sbEhlaWdodDsKICBpZiAodGVzdCAmJiBmYWlsdXJlICYm IHRlc3QgPT0gZmFpbHVyZSkgewogICAgcnMuaW5uZXJIVE1MID0gJ2ZhaWxlZCc7CiAgfQogIGVs c2UgaWYgKHRlc3QgJiYgc3VjY2VzcyAmJiB0ZXN0ID09IHN1Y2Nlc3MpIHsKICAgIHJzLmlubmVy SFRNTCA9ICdwYXNzZWQnOwogIH0KfQo8L3NjcmlwdD48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgpi b2R5IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTsKICBjb2xvcjogYmxhY2s7CiAgZm9udC1m YW1pbHk6IHNhbnMtc2VyaWY7Cn0KI3VhLCAjdWFwIHsKICBmb250LXNpemU6IHNtYWxsZXI7CiAg Y29sb3I6ICMwOTk7Cn0KI3Jlc3VsdCB7CiAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogIG1hcmdp bi1sZWZ0OiA1ZXg7CiAgdmVydGljYWwtYWxpZ246IHRvcDsKICBib3JkZXI6IDVweCBzb2xpZCB3 aGl0ZTsKfQojcmVzdWx0ID4gOmZpcnN0LWNoaWxkIHsKICBkaXNwbGF5OiB0YWJsZTsKICBmb250 LXNpemU6IGxhcmdlcjsKICBmb250LXdlaWdodDogYm9sZDsKICB0ZXh0LXRyYW5zZm9ybTogdXBw ZXJjYXNlOwogIGJvcmRlcjogNXB4IHNvbGlkIHdoaXRlOwp9CiNxIHsKICBtYXJnaW46IDFlbSA1 ZXg7CiAgZm9udC1zaXplOiBzbWFsbGVyOwogIGZvbnQtZmFtaWx5OiBzZXJpZjsKICBwYWRkaW5n OiAwIDFlbTsKICBib3JkZXItbGVmdDogdGhpbiBzb2xpZDsKICBib3JkZXItcmlnaHQ6IHRoaW4g c29saWQ7CiAgbWF4LXdpZHRoOiA4MGV4Owp9Cjwvc3R5bGU+PC9oZWFkPjxib2R5IG9ubG9hZD0n c2V0X2FnZW50X3Jlc3VsdCgpJz4KPGRpdj4KPHA+PHNwYW4gaWQ9InVhIj48L3NwYW4+PGJyIC8+ ClRoZSBjdXJyZW50IHVzZXIgYWdlbnQgZGlzcGxheWluZyB0aGUgdGVzdDo8L3A+CjxkaXYgaWQ9 J3Rlc3QnIHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jazsgYm9yZGVyOiA1cHggc29saWQgcmVk OyBwYWRkaW5nOiAwIj4KPGRpdiBzdHlsZT0iZGlzcGxheTppbmxpbmUtYmxvY2s7IGJvcmRlcjog NXB4IHNvbGlkIGJsdWU7IG92ZXJmbG93OiBoaWRkZW47IG1hcmdpbjogMDsgdmVydGljYWwtYWxp Z246IGJhc2VsaW5lIj4KSSBuZWVkIGEgcGlnIGhlcmUhCjwvZGl2PjwvZGl2PjxzcGFuIGlkPSdy ZXN1bHQnPjxzcGFuPjwvc3Bhbj48L3NwYW4+CjwvZGl2PgoKPGhyIHN0eWxlPSJtYXJnaW46IDFl bSAwIiAvPgoKPGRpdj4KPHA+PHNwYW4gc3R5bGU9ImNvbG9yOiNiMDAiPklOQ09SUkVDVCBkaXNw bGF5PC9zcGFuPiBvZiB0aGUgdGVzdCBsb29rcyBsaWtlOjwvcD4KPGRpdiBpZD0nZmFpbHVyZScg c3R5bGU9ImRpc3BsYXk6aW5saW5lLWJsb2NrOyBib3JkZXI6IDVweCBzb2xpZCByZWQ7IHBhZGRp bmc6IDAiPgo8ZGl2IHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jazsgYm9yZGVyOiA1cHggc29s aWQgYmx1ZTsgb3ZlcmZsb3c6IGhpZGRlbjsgbWFyZ2luOiAwOyB2ZXJ0aWNhbC1hbGlnbjogdG9w Ij4KSSBuZWVkIGEgcGlnIGhlcmUhCjwvZGl2PjwvZGl2Pgo8L2Rpdj4KCjxociBzdHlsZT0ibWFy Z2luOiAxZW0gMCIgLz4KCjxkaXY+CjxwPjxzcGFuIHN0eWxlPSJjb2xvcjojMGEwIj5jb3JyZWN0 IGRpc3BsYXk8L3NwYW4+IG9mIHRoZSB0ZXN0IGxvb2tzIGxpa2U6PC9wPgo8ZGl2IGlkID0gJ3N1 Y2Nlc3MnIHN0eWxlPSJkaXNwbGF5OmlubGluZS1ibG9jazsgYm9yZGVyOiA1cHggc29saWQgcmVk OyBwYWRkaW5nOiAwIj4KPGRpdiBzdHlsZT0iZGlzcGxheTppbmxpbmUtYmxvY2s7IGJvcmRlcjog NXB4IHNvbGlkIGJsdWU7IG92ZXJmbG93OiBoaWRkZW47IG1hcmdpbjogMDsgdmVydGljYWwtYWxp Z246IGJhc2VsaW5lIj4KPHNwYW4gc3R5bGU9ImRpc3BsYXk6dGFibGUiPkkgbmVlZCBhIHBpZyBo ZXJlITwvc3Bhbj4KPC9kaXY+PC9kaXY+CjwvZGl2PgoKPGhyIHN0eWxlPSJtYXJnaW46IDFlbSAw IiAvPgoKU2VlIDxhIGhyZWY9Imh0dHA6Ly93d3cudzMub3JnL1RSL0NTUzIxL3Zpc3VkZXQuaHRt bCNwcm9wZGVmLXZlcnRpY2FsLWFsaWduIgo+Q1NTIDIuMSBTZWN0aW9uIDEwLjguMTwvYT4gZm9y IGRldGFpbGVkIGluZm9ybWF0aW9uOjxiciAvPgo8YmxvY2txdW90ZSBpZD0ncSc+ClRoZSBiYXNl bGluZSBvZiBhbiAnaW5saW5lLWJsb2NrJyBpcyB0aGUgYmFzZWxpbmUgb2YgaXRzIGxhc3QgbGlu ZSBib3ggaW4gdGhlCm5vcm1hbCBmbG93LCB1bmxlc3MgaXQgaGFzIGVpdGhlciBubyBpbi1mbG93 IGxpbmUgYm94ZXMgb3IgaWYgaXRzICdvdmVyZmxvdycKcHJvcGVydHkgaGFzIGEgY29tcHV0ZWQg dmFsdWUgb3RoZXIgdGhhbiAndmlzaWJsZScsIGluIHdoaWNoIGNhc2UgdGhlIGJhc2VsaW5lCmlz IHRoZSBib3R0b20gbWFyZ2luIGVkZ2UuCjwvYmxvY2txdW90ZT4KCjwvYm9keT48L2h0bWw+Cg==