Closed Bug 1614447 Opened 4 years ago Closed 1 year ago

CSS-grid-backed emulation for XUL <stack> doesn't compute the right height from linewrapped descendants

Categories

(Core :: Layout: Grid, defect, P3)

defect

Tracking

()

RESOLVED WONTFIX

People

(Reporter: dholbert, Unassigned)

References

Details

Attachments

(5 files)

[Spinning this off from bug 1610597 to cover the underlying bug in our emulation code.]

STR:

  1. Set the preference dom.allow_XUL_XBL_for_file to true per [1]
  2. View a locally-saved copy of the attached testcase

EXPECTED RESULTS: The bordered boxes should shrinkwrap the full height of the paragraph.
ACTUAL RESULTS: The bordered boxes are only as tall as a single line of text.

Firefox versions with "true" <stack> support give EXPECTED RESULTS.
Firefox versions with css grid emulation give ACTUAL RESULTS.

[1] https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/Using_Remote_XUL

Attachment #9125625 - Attachment description: testcase 1 → testcase 1: stack in vbox

Here's a demo patch that makes us treat grids more like blocks, in the context of XUL reflow, in that we'll now treat an unconstrained height as meaning "shrinkwrap the content size" rather than "accept whatever height the parent passed in".

This makes the attached testcases work (i.e. it makes the grid correctly shrinkwrap the content height of the <description> inside it) -- but it's not actually that helpful, because I've had to include a guard to make it content-process-specific (which means it doesn't fix the associated bugs in our frontend). If I remove that guard, then this patch breaks a bunch of css-grid-backed-<stack> elements, like tab-titles and the container for a page content-area -- these elements end up shrinkwrapping their content-heights instead of stretching to fill their containers, which makes them quite small and kinda unusable.

In order to get this working correctly, I suspect it would require some additional hackery around how XUL-reflow and modern-reflow interact (and perhaps some more grid-specific special cases, like the special case that I'm modifying/extending in this patch). I'm not super eager to mess with our XUL layout internals at this point, so I'm hesitant to proceed further here. I suspect we should hit "pause" on the grid-backed stack-emulation project for now, and we should use <legacy-stack> in cases where the grid-backed stack is causing trouble.

Assignee: nobody → dholbert

One other option that we might try as a frontend hackaround as-needed in some cases: wrap the (css-grid-backed) <stack> element in a <div style="display:block"> container.

If I modify the attached testcases with that adjustment, it seems to give me the same shrinkwrap-the-content-height-of-the-linewrapped-paragraph behavior that we get if we take the WIP patch here; and this is a workaround that we can apply in a targeted way, rather than shaking up the situation for every <stack> usage.

(caveat: I haven't tried this solution/workaround in the actual frontend scenarios yet, e.g. bug 1610597 and bug 1606617. I've only tried it on the attached testcases.)

Assignee: dholbert → nobody
Blocks: 1596184
No longer blocks: 1596184
Severity: normal → S3
Component: Layout → Layout: Grid
Status: NEW → RESOLVED
Closed: 1 year ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: