[line-clamp] Don't hide block-level abspos at the line-clamp: auto …

…boundary With `line-clamp: auto`, the clamp point should be chosen such that it is the furthermost possible clamp point where the box doesn't overflow. Since block-level abspos boxes can have a clamp point after them (unlike inline-level ones), and they do not increase the intrinsic size of the container, a block-level abspos box whose static position is exactly at the boundary should be visible. This was not what our implementation did, however. The reason for that is that `BlockLineClampData::ShouldHideForPaint` (and `BlockLineClampData::IsPastClampPoint`) were always returning true for `line-clamp: auto` when a previous box had been found that ended exactly at the boundary. This was meant to hide lines and floats that started exactly at the boundary, since at the time that we're dealing with them in the block layout algorithm, we don't know the height of the line; as well as to handle cases where a previous box might have clamped, but the current BFC offset might still be before the clamp boundary. However, this reasoning does not work for block-level abspos, because they do not take up container space, and because there is a possible clamp point after them. Therefore, this patch adds an optional argument for block-level abspos to provide their static BFC offset instead. Bug: 40336192 Change-Id: Ia2799a2510c3e2d6d1532198ef72443fac120056 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5675924 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Andreu Botella <abotella@igalia.com> Cr-Commit-Position: refs/heads/main@{#1326556}
web-platform-tests · Jul 12, 2024 · 094a08a · 094a08a
1 parent 56eea69
commit 094a08a
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 0 deletions.
diff --git a/css/css-overflow/line-clamp/line-clamp-auto-025.tentative.html b/css/css-overflow/line-clamp/line-clamp-auto-025.tentative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: abspos exactly at the clamp point is visible</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-auto-025-ref.html">
+<meta name="assert" content="The chosen clamp point with line-clamp: auto is the last one where the box size doesn't overflow. Since non-inline abspos have a clamp point after them, and they don't take up any space in the container, an abspos right at the boundary should be visible.">
+<style>
+.clamp {
+  line-clamp: auto;
+  max-height: 4lh;
+  font: 16px / 32px serif;
+  background-color: yellow;
+}
+.inner {
+  white-space: pre-wrap;
+}
+.abspos {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: skyblue;
+}
+</style>
+
+<div class="clamp">
+<div class="inner">Line 1
+Line 2
+Line 3
+Line 4
+</div>
+<div class="abspos"></div>
+<div class="inner">Line 5
+Line 6</div>
+</div>
diff --git a/css/css-overflow/line-clamp/line-clamp-auto-026.tentative.html b/css/css-overflow/line-clamp/line-clamp-auto-026.tentative.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: abspos exactly at the clamp point is visible</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-auto-026-ref.html">
+<meta name="assert" content="The chosen clamp point with line-clamp: auto is the last one where the box size doesn't overflow. Since non-inline abspos have a clamp point after them, and they don't take up any space in the container, an abspos right at the boundary should be visible. If there's bottom padding in a container box, that counts as effectively shrinking the boundary.">
+<style>
+.clamp {
+  line-clamp: auto;
+  max-height: calc(4lh + 2 * 2px);
+  font: 16px / 32px serif;
+  background-color: yellow;
+}
+.padding {
+  padding: 2px;
+}
+.inner {
+  white-space: pre-wrap;
+}
+.abspos {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: skyblue;
+}
+</style>
+
+<div class="clamp">
+<div class="padding">
+<div class="inner">Line 1
+Line 2
+Line 3
+Line 4
+</div>
+<div class="abspos"></div>
+<div class="inner">Line 5
+Line 6</div>
+</div>
+</div>
diff --git a/css/css-overflow/line-clamp/line-clamp-with-abspos-012.tentative.html b/css/css-overflow/line-clamp/line-clamp-with-abspos-012.tentative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: line-clamp: auto hidden block-level abspos</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
+<meta name="assert" content="Block-level abspos should still be hidden if it is after the clamp point with line-clamp: auto">
+<style>
+.clamp {
+  line-clamp: auto;
+  max-height: 4lh;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  background-color: yellow;
+}
+.inner {
+  white-space: pre;
+}
+.abspos {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: skyblue;
+}
+</style>
+
+<div class="clamp">
+<div class="inner">Line 1
+Line 2
+Line 3
+Line 4
+Line 5</div>
+<div class="inner">Line 6</div>
+<div class="abspos"></div>
+</div>
diff --git a/css/css-overflow/line-clamp/line-clamp-with-abspos-013.tentative.html b/css/css-overflow/line-clamp/line-clamp-with-abspos-013.tentative.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: line-clamp: auto hidden block-level abspos</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
+<meta name="assert" content="Block-level abspos should still be hidden if it is after the clamp point with line-clamp: auto, even if it lies on the boundary because the automatic size of previous boxes was adjusted.">
+<style>
+.clamp {
+  line-clamp: auto;
+  max-height: 4lh;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  background-color: yellow;
+}
+.inner {
+  white-space: pre;
+}
+.abspos {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: skyblue;
+}
+</style>
+
+<div class="clamp">
+<div class="inner">Line 1
+Line 2
+Line 3
+Line 4
+Line 5
+Line 6
+</div>
+<div class="abspos"></div>
+</div>
diff --git a/css/css-overflow/line-clamp/reference/line-clamp-auto-025-ref.html b/css/css-overflow/line-clamp/reference/line-clamp-auto-025-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+.clamp {
+  font: 16px / 32px serif;
+  background-color: yellow;
+}
+.inner {
+  white-space: pre-wrap;
+}
+.abspos {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: skyblue;
+}
+</style>
+
+<div class="clamp">
+<div class="inner">Line 1
+Line 2
+Line 3
+Line 4…
+</div>
+<div class="abspos"></div>
+</div>
diff --git a/css/css-overflow/line-clamp/reference/line-clamp-auto-026-ref.html b/css/css-overflow/line-clamp/reference/line-clamp-auto-026-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+.clamp {
+  font: 16px / 32px serif;
+  background-color: yellow;
+}
+.padding {
+  padding: 2px;
+}
+.inner {
+  white-space: pre-wrap;
+}
+.abspos {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: skyblue;
+}
+</style>
+
+<div class="clamp">
+<div class="padding">
+<div class="inner">Line 1
+Line 2
+Line 3
+Line 4…
+</div>
+<div class="abspos"></div>
+</div>
+</div>