Closed Bug 1742024 Opened 4 years ago Closed 2 years ago

New wpt failures in /css/css-break/flexbox/ [single-line-column-flex-fragmentation-009.html, single-line-column-flex-fragmentation-010.html]

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Type:
defect

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1744363

People

(Reporter: wpt-sync, Unassigned)

References

(Blocks 1 open bug)

Details

(Whiteboard: [wpt])

Syncing wpt PR 31669 found new untriaged test failures in CI

Tests Affected

Firefox-only failures

/css/css-break/flexbox/single-line-column-flex-fragmentation-009.html: FAIL
/css/css-break/flexbox/single-line-column-flex-fragmentation-010.html: FAIL

CI Results

Missing results from treeherder
GitHub PR Head

Notes

These updates will be on mozilla-central once bug 1741771 lands.

Note: this bug is for tracking fixing the issues and is not
owned by the wpt sync bot.

This bug is linked to the relevant tests by an annotation in
https://github.com/web-platform-tests/wpt-metadata. These annotations
can be edited using the wpt interop dashboard
https://jgraham.github.io/wptdash/

If this bug is split into multiple bugs, please also update the
annotations, otherwise we are unable to track which wpt issues are
already triaged. Resolving as duplicate or closing this issue should
be cause the bot to automatically update or remove the annotation.

cc flex developers.

Severity: -- → S3

This looks like a legitimate bug.

The -009 testcase has a 100px tall area, with 2 columns. Inside of that are some nested flex containers, and at the innermost level, there's some display:inline-block elements (each on its own line). The first inline-block is 50px tall and the second is 100px tall. They're not individually fragmentable since they're inline-block and hence participate in a line layout, and we don't fragment lines (at least, not in multicol). So, the second (taller) one will collide with the bottom of the first column, and so it'll need to be fully pushed to the second column (where it exactly fills the available space).

We do correctly figure out that the first line (50px tall) fits in the first column, and the second line (100px tall) does not fit and must get pushed to the second column.

However, we don't figure out that the ancestors (the flex containers and the display:block flex item) need a larger auto-height in order to accommodate for this. These ancestors all end up with 150px as their effective height (100px fragment + 50px fragment), which would only be tall enough if we didn't "waste" any space at the bottom of the first column.

The -010 testcase is basically the same as described above, except with the inline-blocks being 80px and 30px tall (and the 30px-tall one needing to get pushed, leaving 20px of necessarily "wasted" space at the bottom of the first column, which we don't account for when sizing the ancestors).

These two testcases are fixed by bug 1744363.

Status: NEW → RESOLVED
Closed: 2 years ago
Duplicate of bug: 1744363
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.