1804854 - {inc} percent padding on orthogonal writing mode child expands when toggling details element

Status: NEW

(Core :: Layout, defect)

Description

[cefqrn]

Attachment: A video showing the expansion of the details element's padding

The height of the summary element in the following div is added to the padding of the details element every time the details element is toggled.

<div style="min-height:5rem;writing-mode:vertical-rl;background:orange;">
  <details style="padding-bottom:100%;writing-mode:horizontal-tb;width:500px;">
    <summary style="position:relative;height:5rem;cursor:pointer;background:gray;"></summary>
  </details>
</div>

Data URL: data:text/html,<div style="min-height:5rem;writing-mode:vertical-rl;background:orange;"><details style="padding-bottom:100%;writing-mode:horizontal-tb;width:500px;"><summary style="position:relative;height:5rem;cursor:pointer;background:gray;"></summary></details></div>

The problem can be reproduced using a new Firefox profile and is present in Firefox Nightly 109.0a1 (Build ID 20221208153054).

Comment 1

[Emilio Cobos Álvarez [:emilio]]

This should be reproducible without <details> as well fwiw.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (from comment 0)

For convenience: here's a live version of the testcase that the reporter provided.

Comment 4

[Daniel Holbert [:dholbert]]

(Note: there are some other bugs on file where we've got some unfortunate statefulness with orthogonal flow layout, where one reflow depends on the results of the previous layout [or collapses due to the lack-of-a-previous-layout]; though in most other bugs e.g. bug 1310551, it's scenarios where we get incorrect zero-size measurements on the first layout, rather than dynamically-growing sizes on subsequent relayouts.)

Comment 5

[Christopher Kirk-Nielsen]

Hello, I have run into a similar problem and was about to file a bug but I think it's all one and the same bug. The difference in my case is that the padding is defined in em, not %, but it seems to be the same underlying problem, as disabling the writing-mode property prevents the "growth" problem.

Should it be useful, I have created a test case here, where you can trigger the issue by repeatedly toggling off and on the line-height property of the .label styles: https://codepen.io/chriskirknielsen/pen/JjVBRbM