1528043 - Blink and Gecko differ on how wide to make the input in this floating test-case

Status: NEW

(Core :: Layout, defect, P3)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: test.html

In the attached test-case, the presence of the .icon div (among other potential things) seems to lead to Firefox and Chrome defaulting to different widths for the input element (which has width:100%).

Chrome renders it as widely as possible, while Firefox seems to ignore its 100% width.

Firefox will render it as widely as possible if I add width:100% to the form element, or remove the float:right.

Chrome makes the input element as wide as possible unless I remove the display-table-cell properties or the width:auto on the .icon div.

As such I'm not sure which layout component to file this under.

Whatever is causing this, Loblaws' mobile search bar is being crammed to the right edge of the viewport in Firefox because of it.

Comment 1

[Mats Palmgren (inactive)]

Attachment: Testcase #2

Simplified testcase.

Comment 2

[Mats Palmgren (inactive)]

Attachment: Testcase #2b

Same as #2, with 'display: table' added on the FORM.
In this case we render it the same as in Chrome.
I wonder if the difference is that Chrome skips the block box in both cases.

The difference in frame trees are:

Testcase #2:

FloatList <
  Block(form)
    TableWrapper(form)
      Table(form)

Testcase #2b:

FloatList <
  TableWrapper(form)
    Table(form)

Comment 3

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 4

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 5

[Thomas Wisniewski [:twisniewski]]

The two sites with known breakage have changed layouts and no longer have the issue. Dropping the webcompat priority until we find more breakage.