Re: [csswg-drafts] [css-break] Fragmented out-of-flow contained by box with cloned borders (#10553)

Another related topic, which might help answer the question, is how the containing block size (for OOF descendants) is calculated if the container has cloned decorations. The containing block size for OOF descendants is normally the padding box. What if padding is cloned?

Example:

```html
<div style="columns:4; column-fill:auto; height:100px; background:yellow;">
  <div id="container" style="position:relative; box-decoration-break:clone; height:200px; border:10px solid; padding:10px;">
    <div id="oof" style="position:absolute; top:0; left:0; width:50%; height:100%; background:cyan;"></div>
    <div id="filler" style="width:75%; height:100%; background:hotpink;"></div>
  </div>
</div>
```

Screenshot *without* `#oof`:

<img width="508" height="104" alt="Image" src="https://github.com/user-attachments/assets/106fcfd7-815e-4cbe-9ff3-f0b7c2ee648a" />

The content-box height of `#container` is 200px. Top and bottom border widths are 10px. Also 10px each for top and bottom padding. Column height is 100px, leaving 60px for content in each fragmentainer. This means that 3 columns will fit 3*60px = 180px of content, leaving the remainder of 20px for a fourth column.

Stitched content box height is 200px.
Stitched border box height is 200px + (10px + 10px + 10px + 10px) * 4 = 360px?
Stitched padding box height is 200px + (10px + 10px) * 4 = 280px?

Is the containing block height established for OOF descendants 280px then?

Let's make `#oof` visible, and check with Gecko:

<img width="507" height="104" alt="Image" src="https://github.com/user-attachments/assets/85eedf68-9c1a-431c-a585-da049531155d" />

The stitched height of `#oof` is 220px (90px + 100px + 30px). Probably stitched content-box height plus top and bottom border, ignoring any cloned borders.

Chromium:

<img width="504" height="106" alt="Image" src="https://github.com/user-attachments/assets/8f2dd52a-644c-4b87-929a-a36b50abaad3" />

The stitched height of `#oof` is 340px (90px + 100px + 100px + 50px). That's the stitched border-box height, minus top and bottom border.

If the OOFs are indeed supposed to overlap with cloned borders, Chromium's behavior makes sense, but that's NOT the padding box size in my book.

If OOFs are not supposed to overlap cloned borders, and we're to use the actual stitched padding box size, it would look like this, which nobody implements currently:

<img width="505" height="104" alt="Image" src="https://github.com/user-attachments/assets/622382ce-924d-41c2-b0a6-2118be7a1cfe" />

-- 
GitHub Notification of comment by mstensho
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10553#issuecomment-4126282616 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 25 March 2026 12:40:11 UTC