Bug 287279
| Summary: | Safari does not respect `break-*: column` if it would cause the generated box to be "empty". | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | deanvelopermn |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | bfulgham, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 18 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
deanvelopermn
Minimum reproducible example:
```
<div style="column-count: 2">
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div style="break-before: column"></div>
</div>
```
Expected behavior: All ten divs should appear in the first column, second column should contain the <div style="break-before: column">
Actual behavior: The 10 divs get split into left/right columns, 5 on each side.
# Other examples
```
<div style="column-count: 2">
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div style="break-before: column"></div>
<div></div>
</div>
```
Expected: 3 "some text"s in first column, empty div in second column.
Actual: 2 "some text" in first column, 1 "some text", and the two empty divs in second column.
```
<div id="app" style="column-count: 3">
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div style="break-before: column"></div>
<div>some text</div>
<div style="break-before: column"></div>
</div>
```
Expected: 5 "some text" in first column, 1 "some text" in second column, <div style="break-before: column"> in the 3rd column.
Actual: 3 in first column, 2 in second column, 1 in third column.
```
<div id="app" style="column-count: 3">
<div style="break-after: column"></div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div style="break-before: column"></div>
</div>
```
Expected: Empty first column, 6 "some text" in 2nd column, <div style="break-before: column"> in the 3rd column
Actual: 3 in first column, 3 in second column, i assume <div style="break-before: column"> in the third column, but Safari DevTools make this difficult to analyze since it doesn't seem to show the placement of zero-area elements.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/144879722>