Improve line-clamp behavior with padding / nested blocks.

This matches Blink with border / padding in nested blocks, and seems worth doing even if we paint the nested lines. Follow-up patch will prevent painting the nested lines. Differential Revision: https://phabricator.services.mozilla.com/D157572 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1791226 gecko-commit: 1c543fc925a7d0e1dc8b8f57dad98e170c233bed gecko-reviewers: layout-reviewers, dshin
web-platform-tests · Oct 18, 2024 · 1718790 · 1718790
1 parent 2ab788d
commit 1718790
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/css/css-overflow/line-clamp/reference/webkit-line-clamp-050-ref.html b/css/css-overflow/line-clamp/reference/webkit-line-clamp-050-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+  .clamp {
+    display: block;
+    padding: 10px;
+    border: solid 3px;
+    width: 100px;
+  }
+  .clamp div {
+    border: medium solid green;
+    padding: 15px;
+  }
+</style>
+<div class="clamp">
+  Line1
+  <div>Line2…</div>
+</div>
diff --git a/css/css-overflow/line-clamp/webkit-line-clamp-050.html b/css/css-overflow/line-clamp/webkit-line-clamp-050.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#propdef--webkit-line-clamp">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/10816">
+<link rel="match" href="reference/webkit-line-clamp-050-ref.html">
+<style>
+  .clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    padding: 10px;
+    border: solid 3px;
+    width: 100px;
+  }
+  .clamp div {
+    border: medium solid green;
+    padding: 15px;
+  }
+  span {
+    /* TODO: Remove once we don't paint clamped lines */
+    color: transparent;
+  }
+</style>
+<div class="clamp">
+  Line1
+  <div>Line2<br><span>Line3</span></div>
+  <span>Line4</span>
+  <div>Line5<br>Line6</div>
+  Line7
+</div>