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 autowidth
that 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
•