Closed Bug 1348839 Opened 8 years ago Closed 5 years ago

Column-fill: auto doesn't fill as expected, content ends up in one column

Categories

(Core :: Layout: Columns, defect)

Product:
Core
Component:
Layout: Columns
Version:
54 Branch
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla69
Tracking Flags:
Tracking Status
firefox69 --- fixed

People

(Reporter: bz, Assigned: TYLin)

References

Details

Attachments

(4 files)

SCreenshot of a webkit browser and how it renders the same page (with prefixed properties)
62.13 KB, image/png
Details
Firefox 54.0a2 (2017-03-20) rendering the same structure
69.59 KB, image/png
Details
reporter's testcase
658 bytes, text/html
Details
Bug 1348839 - Add a web platform test which tests max-height imposes constraint on column boxes' height. r=dbaron
47 bytes, text/x-phabricator-request
Details | Review
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:54.0) Gecko/20100101 Firefox/54.0 Build ID: 20170319084208 Steps to reproduce: http://codepen.io/anon/pen/GWQWGO Actual results: All content ended up in one column. Expected results: "auto Is a keyword indicating that columns are filled sequentially." Columns should've been filled sequentially.
Component: Untriaged → Layout
Product: Firefox → Core
I may have misinterpreted what this property does, and it may be that the WebKit screenshot is incorrect. After re-reading the spec, it seems that the first column is filled as much as possible in "auto" mode - and if you include a few more blocks of lorem ipsum (to get past the 500px height limit), Firefox begins to start using the second column. I don't understand why then, Chrome uses the second column in auto mode if there is still height left. Am I still misunderstanding?
I've faced this issue too. Try this - https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-fill column-fill: auto leads to the first newspaper1 article to be rendered in one single column instead of being split into multiple columns as it happens in Chrome & Safari & Firefox v51.
According to the specification found at https://www.w3.org/TR/css3-multicol/ the standard behavior for column-fill is "balanced" which splits up the content to fill all available columns equally. "auto" makes column-fill to put content into all the available columns sequentially which means it only starts filling the next column if the first one has been completely filled. Also note that this property will only be consulted if the length of columns has been constrained. lol768s picture 2 shows the intended behavior and Kannans testcase also does. If you want you can file a bug with Webkit and Chrome but please be aware that Multi Column Layouts is still a candidate recommendation and can be subject to changes. Have a nice day, Jan
David, as you reviewed the code about the implementation of column-fill, could you give your thoughts here, please.
Flags: needinfo?(dbaron)
So the issue here is really what the *height* of the element should be. If you give it, say, "height: 6.5em" (and maybe also a background), you'll see content flowing into the second column (although with more content in the first column than the second). I'm not sure what the spec says about how 'auto' height should behave on elements with 'column-fill: auto'. Should they get the height that fits all the content into one column, or the height that allows the content to balance? (Relevant specs are probably both css-multicol and css-sizing.) (In reply to Jan Sonntag from comment #5) > If you want you can file a bug with Webkit and Chrome but please be aware > that Multi Column Layouts is still a candidate recommendation and can be > subject to changes. I think this comment is inappropriately dismissive of the reporter's real concern. Web features should be interoperable, and the "Candidate Recommendation" status of the specification is not relevant to that concern. I also don't think anybody has properly substantiated which behavior is correct according to current specifications. I might have time to look at the spec more closely later, although if somebody else does it first, that would be great.
Two more thoughts: 1. Making 'auto' height of a multicol do balancing is probably the more expected behavior from a layout perspective 2. However, another set of expectations of 'column-fill: auto' is related to performance. 'column-fill: auto' avoids balancing, which is one of the things (probably the main thing) that can be really slow about multicolumn layout. So making 'height: auto; column-fill: auto' do balancing when determining the height violates the *speed* expectation of 'column-fill: auto'.
As far as specs go, I don't think they say. https://drafts.csswg.org/css-multicol/ has *examples* (in the section on 'column-fill') that suggest that 'height: auto' calculations with 'column-fill: auto' should do balancing to determine the auto height. But it doesn't have any normative text. https://drafts.csswg.org/css-sizing-3/ doesn't appear to cover the subject. Nor does https://drafts.csswg.org/css-sizing/ (early draft), which only seems to cover the inline-size (width, for English) of multicolumn elements and not the block-size (height, for English). So I think a spec issue should be filed.
Recent updates of Editor draft (july 2018) and Working draft (may 2018) now clearly suggest that Firefox handles 'column-fill: auto; height: auto;' correctly: Example 27: https://drafts.csswg.org/css-multicol/#example-d151413b Example 27: https://www.w3.org/TR/css-multicol-1/#example-d151413b - - - - - http://www.gtalbot.org/BugzillaSection/Bug1348839-column-fill-auto-content-1column.html

(In reply to David Baron :dbaron: 🏴󠁵󠁳󠁣󠁡󠁿 ⌚UTC-7 (if account gets disabled due to email bounces, ask a bugzilla admin to reenable it) from comment #9)

  1. Making 'auto' height of a multicol do balancing is probably the more
    expected behavior from a layout perspective

CSS Working Group decided to update the spec that column-fill: auto balances an unconstrained container. https://github.com/w3c/csswg-drafts/issues/3224#issuecomment-468089503

However, for the reporter's test case in comment 0, there's max-height: 500px;. So it's still considered as a "constrained" container. Firefox still behaves as expected.

Component: Layout → Layout: Columns
See Also: → 1538347

with 'max-height: 200px':
http://www.gtalbot.org/BugzillaSection/Bug1348839-column-fill-auto-content-1column.html

In this test, the line box height should be exactly 20px. So, content should fill 10 lines in the first column before starting to fill the 2nd column... assuming there is enough content (text) to fill 10 lines. Reducing width of viewport can do that.

with 'max-height: 100px':
http://www.gtalbot.org/BugzillaSection/Bug1348839-column-fill-auto-content-1column-002.html

In this 002 test, the line box height should also be exactly 20px. So, content should fill 5 lines in the first column before starting to fill the 2nd column.

I think Firefox 60.6.0 ESR renders those tests correctly, precisely and as expected.

Not so in my opinion with Chromium 72.0.3626.122, Chromium 75.0.3738.0 and Epiphany 3.31.90-8061c1929 (WebKitGTK 2.24.0).

I tried those 2 tests with a 2 days old nightly build of Firefox and the rendering was incorrect. There is a problem with today's nightly build, so I could not check.

I tried those 2 tests with a 2 days old nightly build of Firefox and
the rendering was incorrect. There is a problem with today's nightly build,
so I could not check.

I had a corrupted profile.

I just tried those 2 tests with Firefox 68.0a1 buildID=20190322164604 and I think Firefox 68.0a1 buildID=20190322164604 renders those 2 tests correctly, precisely and as expected.

A reminder to myself to look at the test cases because they are not rendered as expected if layout.css.column-span.enabled=true.

Blocks: column-span
Flags: needinfo?(aethanyc)

I have been developing and working on tests referencing this bug report:

http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/columnfill-auto-max-height-001.html
(Ahem font required; available from http://www.w3.org/Style/CSS/Test/Fonts/Ahem/ )

http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/columnfill-auto-max-height-002.html
(Ahem font required; available from http://www.w3.org/Style/CSS/Test/Fonts/Ahem/ )

Reference file:
http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/reference/ref-filled-green-100px-square.xht

and other tests that I am developing.

Next month, in April 2019 (because I am too busy these days), I expect
a) to use those tests to file a bug report over at chromium
project ( bugs.chromium.org/p/chromium/issues/ ) and then
b) to github-submit them to web-platform-tests repository.

Gérard, if you have a chance to add the two tests in comment 17 to web-platfrom-tests and Firefox is having any issue rendering them at that time, please file a new bug. Thanks! (Firefox Nightly 2019-05-17 renders the two tests correctly with or without layout.css.column-span.enabled)

Also, when I wrote comment 16, the reporter's test case (from comment 7) rendered incorrectly with layout.css.column-span.enabled=true. Luckily, bug 1411422 fixed it. I'm going to add a reftest to ensure we won't regress it.

Assignee: nobody → aethanyc
No longer blocks: column-span
Status: UNCONFIRMED → ASSIGNED
Depends on: 1411422
Ever confirmed: true
Flags: needinfo?(dbaron)
Flags: needinfo?(aethanyc)

Gérard, if you have a chance to add the two tests
in comment 17 to web-platfrom-tests

I forgot about this and about a) and b) in comment 17. I have been busy or very busy in the last 2 months. But this time, I wrote down comment 17 in my to-do-list. I will eventually get to it.

The correspondent bug report (with almost identical test) over at chromium project was:

Issue 223072: CSS Multi column: Max-height is ignored
https://bugs.chromium.org/p/chromium/issues/detail?id=223072

and it was resolved 3½ years ago. I will eventually file another bug report over there.

Attachment #9065820 - Attachment description: Bug 1348839 - Add a reftest which tests max-height imposes constraint on column boxes' height. r=dbaron → Bug 1348839 - Add a web platform test which tests max-height imposes constraint on column boxes' height. r=dbaron
Pushed by aethanyc@gmail.com: https://hg.mozilla.org/integration/autoland/rev/156a12d60812 Add a web platform test which tests max-height imposes constraint on column boxes' height. r=dbaron
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/16928 for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

https://hg.mozilla.org/mozilla-central/rev/156a12d60812

Status: ASSIGNED → RESOLVED
Closed: 5 years ago
status-firefox69: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla69

Both tests have been approved.

a) to use those tests to file a bug report over at chromium
project ( bugs.chromium.org/p/chromium/issues/ )

Done:
Issue 967329: Non-auto max-height doesn't prevent forcing of column balancing
https://bugs.chromium.org/p/chromium/issues/detail?id=967329

Gérard, thank you for adding these tests.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: