New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 656894 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Last visit > 30 days ago
Closed: Oct 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 1
Type: Bug-Regression



Sign in to add a comment

Regression:'Enter Email Address' text box appears misaligned in "www.homedepot.com"

Reported by adha...@etouch.net, Oct 18 2016

Issue description

Chrome 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.
 
Actual result.mp4
587 KB View Download
Actual result.png
551 KB View Download
expected result.png
210 KB View Download
Labels: hasbisect-per-revision
Owner: glebl@chromium.org
Status: Assigned (was: Unconfirmed)
Good build:55.0.2845.0
Bad build:55.0.2846.0

Per-revision Bisect result:
------------------------------
You are probably looking for a change made after 415557 (known good), but no later than 415592 (first known bad).
CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/3166b5e20f02c73995a1b4de28a4817678b1482d..29649b991045c05394dc42641068934b9d494e80

suspecting, https://chromium.googlesource.com/chromium/src/+/94405829a3ffa94bff257bb14650170f7422bad0
@ glebl, could you please check the issue.

Able to reproduce the issue on Canary #54.0.2894.0

Comment 2 by e...@chromium.org, Oct 18 2016

Components: -Blink>Layout Blink>Layout>Flexbox
Owner: cbiesin...@chromium.org
Using flexbox and width: 70%. Is this a know issue or an intentional change Christian?
Cc: cbiesin...@chromium.org glebl@chromium.org
Owner: glebl@chromium.org
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.
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"

Cc: ajha@chromium.org
 Issue 658166  has been merged into this issue.

Comment 6 by glebl@chromium.org, 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.

Comment 7 by glebl@chromium.org, Oct 25 2016

Status: Fixed (was: Assigned)
fixed by reverting the patch from  http://crbug.com/481983 .
Cc: brajkumar@chromium.org
Labels: TE-Verified-56.0.2902.0 TE-Verified-M56
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!

Screen Shot 2016-10-27 at 6.07.58 PM.png
213 KB View Download
glebl@ Gentle Ping! can we get any latest update regarding M55 merge?
Labels: Merge-Request-55
added Merge-Request-55 label.

Comment 11 by dimu@chromium.org, Nov 3 2016

Labels: -Merge-Request-55 Merge-Approved-55 Hotlist-Merge-Approved
Your change meets the bar and is auto-approved for M55 (branch: 2883)

Comment 12 by e...@chromium.org, Nov 3 2016

Labels: -Merge-Approved-55 Merge-Merged-55
Project Member

Comment 13 by bugdroid1@chromium.org, Nov 3 2016

Labels: merge-merged-2883
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

Labels: TE-Verified-55.0.2883.44 TE-Verified-M55
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...!!

656894.ogv
9.1 MB View Download

Sign in to add a comment