-webkit-line-clamp doesn't support inline-block children

alanbaradlay · alanbaradlay · commit feedd6408047 · 2025-12-27T06:00:42.000-08:00
https://bugs.webkit.org/show_bug.cgi?id=301944 <rdar://problem/164488778> Reviewed by Antti Koivisto. Let's not propagate legacy line-clamp to inline-block containers. While propagation should happen across block level containers, inline blocks are quite different as they already participate in the parent inline layout (they themselves sit on lines) and the lines they produce are visually detached from the line-clamp flow. e.g. <div line-clamp: 2> text before <div style="display: inline-block>first<br>second<br>thrid</div> text after </div> first second text before third text after (should not clamp after "second") This also aligns with Chrome's behavior. Test: fast/flexbox/legacy-line-clamp-on-display-block.html * LayoutTests/fast/flexbox/legacy-line-clamp-on-display-block-expected.html: Added. * LayoutTests/fast/flexbox/legacy-line-clamp-on-display-block.html: Added. * LayoutTests/fast/overflow/line-clamp-on-last-formatted-line-expected.html: * LayoutTests/fast/overflow/line-clamp-on-last-formatted-line.html: * Source/WebCore/rendering/LineClampUpdater.h: (WebCore::LineClampUpdater::LineClampUpdater): Canonical link: https://commits.webkit.org/304956@main
diff --git a/LayoutTests/fast/flexbox/legacy-line-clamp-on-display-block-expected.html b/LayoutTests/fast/flexbox/legacy-line-clamp-on-display-block-expected.html
@@ -0,0 +1,15 @@
+<style>
+.container {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.inline_block {
+  display: inline-block;
+  background-color: green;
+}
+</style>
+<div class=container>
+  <div class=inline_block>PASS<br>if<br>line-clamp<br>is<br>not<br>applied<br>here</div>
+  <div>but<br>only here&hellip;
+</div>
diff --git a/LayoutTests/fast/flexbox/legacy-line-clamp-on-display-block.html b/LayoutTests/fast/flexbox/legacy-line-clamp-on-display-block.html
@@ -0,0 +1,18 @@
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0" />
+<style>
+.container {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.inline_block {
+  display: inline-block;
+  background-color: green;
+}
+</style>
+<div class=container>
+  <div class=inline_block>PASS<br>if<br>line-clamp<br>is<br>not<br>applied<br>here</div>
+  <div>but<br>only here<br>and some clipped content here.
+</div>
diff --git a/LayoutTests/fast/overflow/line-clamp-on-last-formatted-line-expected.html b/LayoutTests/fast/overflow/line-clamp-on-last-formatted-line-expected.html
@@ -8,7 +8,7 @@
 <div>PASS if trailing ellipsis does NOT show</div>
 <div>PASS if trailing ellipsis shows&#x2026;</div>
 <div>PASS if trailing ellipsis shows&#x2026;</div>
-<div>PASS if trailing ellipsis shows&#x2026;</div>
+<div>PASS if trailing ellipsis shows (but it's scrolled off)</div>
 <div>PASS if trailing ellipsis shows&#x2026;</div>
 <div>PASS if trailing ellipsis shows&#x2026;</div>
 <div>PASS if trailing ellipsis shows&#x2026;</div>
diff --git a/LayoutTests/fast/overflow/line-clamp-on-last-formatted-line.html b/LayoutTests/fast/overflow/line-clamp-on-last-formatted-line.html
@@ -24,7 +24,7 @@
 </div>
 
 <div class="clamp">
-  <div><div><div style="display: inline-block; width: 1000px;">PASS if trailing ellipsis shows</div></div></div>
+  <div><div><div style="display: inline-block; width: 10000px;">PASS if trailing ellipsis shows (but it's scrolled off)</div></div></div>
   <div>second line</div>
 </div>
 
diff --git a/Source/WebCore/rendering/LineClampUpdater.h b/Source/WebCore/rendering/LineClampUpdater.h
@@ -50,7 +50,7 @@ inline LineClampUpdater::LineClampUpdater(const RenderBlockFlow& blockContainer)
         return;
 
     m_previousLineClamp = layoutState->lineClamp();
-    if (blockContainer.isFieldset()) {
+    if (blockContainer.isFieldset() || blockContainer.style().display() == DisplayType::InlineBlock) {
         layoutState->setLineClamp({ });
 
         m_skippedLegacyLineClampToRestore = layoutState->legacyLineClamp();
