[csswg-drafts] [css-overflow] What counts as "immediately preceding" for `block-ellipsis`? (#10868)

andreubotella has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow] What counts as "immediately preceding" for `block-ellipsis`? ==
`block-ellipsis`, which is one of the properties that `line-clamp` is a shorthand for, creates an ellipsis on the last line before clamp, if that line box "immediately precedes" the region break. Since `max-lines` creates a region break after a line box, when that property is used, the immediately preceding line box is clear. But when clamping by height, the interpretation of that isn't always clear.

My expectation is that a line box would get ellipsized if there is no content between it and the clamp point in the box tree, except that ancestor boxes of the line box can end in between:

```css
.clamp {
  line-clamp: auto;
  max-height: calc(5lh + 2 * 5px);  /* account for .inner's border */
  background-color: yellow;
  border: 5px solid black;
  padding: 5px;
}
.inner {
  background-color: orange;
  border: 5px solid brown;
}
```
```html
<div class="clamp">
  Line 1 <br>
  Line 2 <br>
  Line 3
  <div class="inner">
    Line 4 <br>
    Line 5
  </div>
  Line 6
</div>
```

![image](https://github.com/user-attachments/assets/46efe1dd-9b8e-4915-82a3-4111bca8a866)

But there wouldn't be an ellipsis if an entire box sits in between:

```css
.clamp {
  line-clamp: auto;
  max-height: 4lh;
  /* ... */
}
.h {
  height: 1lh;
  background-color: orange;
}
```
```html
<div class="clamp">
  Line 1 <br>
  Line 2 <br>
  Line 3 <br>
  <div class="h"></div>
  Line 4
</div>
```

![image](https://github.com/user-attachments/assets/0bc379d1-0d7d-4b1d-b732-63fd8190ec45)

My expectation is also that a line box would be ellipsized even it is contained inside a box with a non-overflowing `height` property. (This does not currently work in my in-progress implementation of `continue: collapse` in Chromium, though, and it would need some heavy refactoring before it would be possible.)

```css
.clamp {
  line-clamp: auto;
  max-height: calc(6lh + 2 * 5px);
  /* ... */
}
.inner {
  height: 3lh;
  /* ... */
}
```

![image](https://github.com/user-attachments/assets/10994917-d020-4d44-aa52-86feec3fe80c)

One interesting question is what to do when there are out-of-flow block-level elements, between the last line box and the clamp point. By the above definition, the line box shouldn't be ellipsized in that case. However, especially for an abspos box which is positioned elsewhere, it's possible that this would not be intuitive to authors.

```css
.clamp {
  position: relative;
  line-clamp: auto;
  max-height: 4lh;
  /* ... */
}
.abspos {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: orange;
}
```
```html
<div class="clamp">
  Line 1 <br>
  Line 2 <br>
  Line 3 <br>
  Line 4
  <div class="abspos"></div>
  Line 5
</div>
```

![image](https://github.com/user-attachments/assets/804ab213-475a-467f-8965-8214853c05bc)

cc @frivoal @bfgeek @emilio 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10868 using your GitHub account


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

Received on Wednesday, 11 September 2024 14:45:43 UTC