Firefox clears floats for an auto-width element with vertical writing-mode in a horizontal containing block (orthogonal flow)
Categories
(Core :: Layout: Floats, defect)
Tracking
()
People
(Reporter: dholbert, Unassigned)
References
(Blocks 1 open bug)
Details
STR:
- Load this data URI:
data:text/html,<div style="float:left">hhh</div><div style="display:flow-root;writing-mode:vertical-rl">vvv
ACTUAL RESULTS:
"vvv" gets pushed down below the floated "hhh" (clearing the float).
EXPECTED RESULTS:
"vvv" should probably be to the right of "hhh". It doesn't need to clear the float; it doesn't need very much horizontal space, since it's only ~1em wide and can easily fit alongside "hhh".
If I give the "vvv" div a specified width (within reason, i.e. small enough to fit in the viewport), then it moves up to be on the right side of hhh. It's only when it has an auto width that we push it down to its own line.
(We probably behave as we do because, for the vertical-WM element, an 'auto' width is unresolvable without actually fully laying out its contents, and we haven't done that yet at the point where we're deciding where it will go with respect to potentially-colliding floats. So, we might assume the worst and push it down, to avoid collisions.)
Current Chrome and Safari give EXPECTED RESULTS here. Firefox gives ACTUAL RESULTS.
|
Reporter | |
Comment 1•2 years ago
|
||
(In reply to Daniel Holbert [:dholbert] from comment #0)
If I give the "vvv" div a specified
width(within reason, i.e. small enough to fit in the viewport), then it moves up to be on the right side ofhhh. It's only when it has an autowidththat we push it down to its own line.
To illustrate this: here's a sort-of reference case where I'm specifying a width of 1.2em (not a perfect reference case since this isn't the exact line-height of vvv in comment 0, but it's in the ballpark):
data:text/html,<div style="float:left">hhh</div><div style="display:flow-root;writing-mode:vertical-rl; width: 1.2em">vvv
This version gives EXPECTED RESULTS -- "vvv" ends up to the right of "hhh".
I think I am experiencing the same bug with inline-flex elements.
data:text/html,<div style="display:inline-flex;border:2px solid"><div style="border:2px dotted;writing-mode:vertical-rl">Hello world</div></div>
In Chrome and Safari the inner div is contained in the outer div. In Firefox the outer div's width collapses to almost 0, and the inner div overflows.
|
|
Reporter | |
Comment 3•2 years ago
|
||
Comment 2 is actually more directly bug 1310551 - it's similar to attachment 8948727 [details] there.
I am having this same issue. Is there a workaround for this? If you inspect the "hello world" div and you un-check and re-check the "border: 2px dotted" property it works. My guess is because the width has been already calculated.
Description
•