Regression:'Enter Email Address' text box appears misaligned in "www.homedepot.com"
Reported by
adha...@etouch.net,
Oct 18 2016
|
|||||||||
Issue descriptionChrome Version: 55.0.2883.18 fef9e129659e95716a20748335f5921e324bab8a-refs/branch-heads/2883@{#164} (64 bit) OS: Windows (7,8,8.1,10),Linux (14.04 LTS),Mac OS X(10.10.5, 10.11.4) TEST URL:http://www.homedepot.com/ What steps will reproduce the steps? (1)Launch chrome and navigate to the above url. (2)Scroll to the bottom of the page. (3)Observe the 'Enter Email Address' text box on R.H.S. Actual:'Enter Email Address' text box appears misaligned. Expected:'Enter Email Address' text box should be seen properly. This is a Regression issue broken in M-55,will soon update other info. Good build:55.0.2845.0 Bad build:55.0.2846.0 Kindly find the attached screenshots for review.
,
Oct 18 2016
Using flexbox and width: 70%. Is this a know issue or an intentional change Christian?
,
Oct 18 2016
Unexpected -- the <fieldset> is not using display: flex. I'm not really sure why this happens but it is not supposed to happen! Assigning to Gleb for now since this is his regression but I can take a look if you like.
,
Oct 19 2016
layout tree in question below. maybe we are mishandling the floating <p>?
LayoutFieldset {FIELDSET} at (0,0) size 220x94
LayoutBlockFlow (anonymous) at (0,0) size 139.28x94
LayoutBlockFlow {LEGEND} at (0,0) size 139.28x84
LayoutText {#text} at (0,1) size 134x82
text run at (0,1) width 134: "Get $5 off when you"
text run at (0,22) width 121: "sign up for emails"
text run at (0,43) width 113: "with savings and"
text run at (0,64) width 29: "tips."
LayoutBlockFlow (anonymous) at (139.28,0) size 80.72x94
LayoutText {#text} at (0,0) size 0x0
LayoutText {#text} at (0,0) size 0x0
LayoutFlexibleBox (floating) {P} at (0,0) size 82.72x42 [border: (1px solid #CCCCCC)]
LayoutTextControl {INPUT} at (1,1) size 20x40 [color=#000000] [bgcolor=#FFFFFF]
LayoutButton {BUTTON} at (21,1) size 67x37 [color=#FFFFFF]
LayoutBlockFlow (anonymous) at (0,0) size 67x37
LayoutFlexibleBox {SPAN} at (0,0) size 67x37 [bgcolor=#F96302]
LayoutBlockFlow (anonymous) at (20,9.50) size 27x18
LayoutText {#text} at (0,-4) size 27x25
text run at (0,-4) width 27: "GO"
,
Oct 21 2016
,
Oct 22 2016
this happens because <legend> for that form is marked as "display: inline-block" and because of the change that was introduced here http://crbug.com/481983 we try to place inline <legend> and float <p> elements inline. Supporting display:inline-block <legend> is a violation of the HTML spec https://html.spec.whatwg.org/multipage/rendering.html#rendered-legend quote: "A fieldset element's rendered legend, if any, is expected to be rendered over the block-start border edge of the fieldset element as a block box (overriding any explicit 'display' value)" I think the right fix for this bug would be to revert the change from http://crbug.com/481983 , i.e. <legend> should always be displayed as a block box, overriding any explicit 'display' value. In this case we will be consistent with Firefox behavior https://bugzilla.mozilla.org/show_bug.cgi?id=653870.
,
Oct 25 2016
,
Oct 27 2016
Verified this issue on Windows-10, Ubuntu 14.04 and Mac OS 10.12 using chrome latest Dev M56-56.0.2902.0 by following steps mentioned in the original comment. Observed 'Enter Email Address' text box is rendered properly as expected. Hence adding TE-Verified label. glebl@ - Thanks for the fix! Could you please merge the same to latest M55 build, Since M55 is already in Beta and it will hit stable soon. Thanks!
,
Nov 2 2016
glebl@ Gentle Ping! can we get any latest update regarding M55 merge?
,
Nov 2 2016
added Merge-Request-55 label.
,
Nov 3 2016
Your change meets the bar and is auto-approved for M55 (branch: 2883)
,
Nov 3 2016
,
Nov 3 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/5c2342bffcaaa4fe813ce95aa2546e54260211be commit 5c2342bffcaaa4fe813ce95aa2546e54260211be Author: Emil A Eklund <eae@chromium.org> Date: Thu Nov 03 16:35:01 2016 Revert "Allow to set display "inline" on legend element" This reverts commit 2383abb8b227d12ae53f2b163b57e02ff63dbf0b. Reason: it violates the spec that says that fieldset's legend should be displayed as a block box (overriding any explicit 'display' value). Also it introduces an interop issue with Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=653870. BUG= 656894 Review-Url: https://codereview.chromium.org/2447843002 Cr-Commit-Position: refs/heads/master@{#427364} (cherry picked from commit 07a1644e65e23598796babe8056dba9a986f3c33) Review URL: https://codereview.chromium.org/2475003002 . Cr-Commit-Position: refs/branch-heads/2883@{#434} Cr-Branched-From: 614d31daee2f61b0180df403a8ad43f20b9f6dd7-refs/heads/master@{#423768} [add] https://crrev.com/5c2342bffcaaa4fe813ce95aa2546e54260211be/third_party/WebKit/LayoutTests/fast/forms/fieldset/inline-ignored-on-legend-expected.txt [rename] https://crrev.com/5c2342bffcaaa4fe813ce95aa2546e54260211be/third_party/WebKit/LayoutTests/fast/forms/fieldset/inline-ignored-on-legend.html [delete] https://crrev.com/679d6fbb849b2239be8deaf6dff100150b19c71e/third_party/WebKit/LayoutTests/fast/forms/fieldset/inline-legend-expected.txt [modify] https://crrev.com/5c2342bffcaaa4fe813ce95aa2546e54260211be/third_party/WebKit/Source/core/css/resolver/StyleAdjuster.cpp [modify] https://crrev.com/5c2342bffcaaa4fe813ce95aa2546e54260211be/third_party/WebKit/Source/core/layout/LayoutFieldset.cpp
,
Nov 9 2016
Verified the issue on Windows-10, Ubuntu 14.04 and Mac 10.11.16 using chrome beta build #55.0.2883.44 by following steps as per comment #0. Observed 'Enter Email Address' text box is rendered properly as expected. Attaching screen cast for reference The fix is working as expected for M-55. Hence, adding the verified labels. Thanks...!! |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by nyerramilli@chromium.org
, Oct 18 2016Owner: glebl@chromium.org
Status: Assigned (was: Unconfirmed)