commit f2084d864d7c615b0512cb2645321d1127066f6c parent 4a8bb1cb91c81a8f1b1b0f55173e51eccb8dfea4 Author: Florian Rivoal <git@florian.rivoal.net> Date: Thu, 9 Oct 2025 20:32:00 +0000 Bug 1992127 [wpt PR 55156] - Add tests for the interaction of line clamp with balance, a=testonly Automatic update from web-platform-tests Add tests for the interaction of line clamp with balance See https://github.com/w3c/csswg-drafts/issues/10827 -- Remove stray metadata from reference -- Add tests for when balance is applied to a nested IFC line clamp still doesn't cut in the middle of the IFC, but the balancing should be done properly, and the size after balancing should be taken into account when picking the clamp point. -- fix typo Co-authored-by: Andreu Botella <andreu@andreubotella.com> -- wpt-commits: e20adfa332bf5adb90a6e0e15deb78dc50da99a4, 59cd00bf8adbbee4fd9ab2a954203c71c5706eb3, 5ba463d93919e46b4106da9da7c3695b9ae4ae36, ed2e8d002f3d7081d669b82ae23fe79bb19b0afa wpt-pr: 55156 Diffstat:
21 files changed, 573 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-001.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-001-ref.html"> +<meta name="assert" content="Checks that balancing happens after clamping, not before."> +<style> +.clamp { + line-clamp: 2; + font-family: monospace; + width: 8.1ch; /* the extra .1 is just in case the … character isn't perfectly monospaced. */ + text-wrap: balance; +} +</style> +<p>Test passes if you see numbers up to 8 (and no further) below. + +<div class="clamp"> +1 2 3 4 5 6 7 8 9 +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-002.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, nested</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-002-ref.html"> +<meta name="assert" content="Checks that balancing happens after clamping, not before, including in nested blocks."> +<style> +.clamp { + line-clamp: 3; + font-family: monospace; + width: 8.1ch; /* the extra .1 is just in case the … character isn't perfectly monospaced. */ +} +.balance { + text-wrap: balance; +} +</style> +<p>Test passes if you see numbers up to 8 (and no further) below. + +<div class="clamp"> + 0 + <div class=balance> + 1 2 3 4 5 6 7 8 9 + </div> + 10 +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-003.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-003-ref.html"> +<meta name="assert" content="Checks that balancing does not happens before claming, when working with height based clamping."> +<style> +.clamp { + line-clamp: auto; + font-family: monospace; + width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ + line-height: 1; + max-height: 3lh; + text-wrap: balance; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 8 (and no further) below. + +<div class="clamp"> +1 2 <span>3</span> <span>4</span> 5 6 7 8 <span>9</span> +</div> + +<!-- + If balancing happens after clamping, the large "3" and "4" are both on the first line, + and the second line only has small numbers, + so we can fit both lines (up to number 8) within 3 lh. + + If the 3 lines are balanced before clamping, (which would be wrong) + 3 ends up on the first line and 4 on the second, (and 9 on the 3rd). + As 4 is large, it makes the second line taller, + and then we can only fit 1 line before the clamp point, + up to number 3. +--> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-004.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-004.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based, reclamp</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-004-ref.html"> +<meta name="assert" content="Checks that balancing after claming can cause re-clamping when working with height based clamping."> +<style> +.clamp { + line-clamp: auto; + font-family: monospace; + width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ + line-height: 1; + max-height: 3lh; + text-wrap: balance; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 3 (and no further) below. + +<div class="clamp"> +1 2 <span>3</span> <span>4</span> 5 6 <span>999</span> +</div> + +<!-- + Initially, we clamp 3lh worth of content, + which means two lines: + the first one with some big numbers, and the second one with only small ones. + Then, when balancing, we move "4" to the second line, + which makes it no longer fit, + so that line gets clamped away too. +--> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-005.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-005.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based, clamp caused by balance</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-004-ref.html"> +<meta name="assert" content="Checks that balancing after claming can cause clamping when working with height based clamping, even if there was no clamp point prior to balancing."> +<style> +.clamp { + line-clamp: auto; + font-family: monospace; + width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ + line-height: 1; + max-height: 3lh; + text-wrap: balance; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 3 (and no further) below. + +<div class="clamp"> +1 2 <span>3</span> <span>4</span> 5 6 +</div> + +<!-- + Initially, we are limited to 3lh worth of content, + which means we can fit all the content: + first one line with some big numbers, and a second one with only small ones. + Then, when balancing, we move "4" to the second line, + which makes it no longer fit, + so that line gets clamped away. +--> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-006.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-006.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-006-ref.html"> +<meta name="assert" content="Checks that balancing does not happens before claming, when working with height based clamping, including with nested blocks."> +<style> +.clamp { + line-clamp: auto; + font-family: monospace; + width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ + line-height: 1; + max-height: 4lh; +} +.balance { + text-wrap: balance; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 8 (and no further) below. + +<div class="clamp"> + 0 + <div class=balance> +1 2 <span>3</span> <span>4</span> 5 6 7 8 <span>9</span> + </div> +</div> + +<!-- + In the nested block, after 1lh worth of content in the parent block. + + If balancing happens after clamping, the large "3" and "4" are both on the first line, + and the second line only has small numbers, + so we can fit both lines (up to number 8) within 3 lh. + + If the 3 lines are balanced before clamping, (which would be wrong) + 3 ends up on the first line and 4 on the second, (and 9 on the 3rd). + As 4 is large, it makes the second line taller, + and then we can only fit 1 line before the clamp point, + up to number 3. +--> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-007.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-007.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based, reclamp</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-007-ref.html"> +<meta name="assert" content="Checks that balancing after claming can cause re-clamping when working with height based clamping."> +<style> +.clamp { + line-clamp: auto; + font-family: monospace; + width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ + line-height: 1; + max-height: 4lh; +} +.balance { + text-wrap: balance; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 3 (and no further) below. + +<div class="clamp"> +0 +<div class=balance> +1 2 <span>3</span> <span>4</span> 5 6 <span>999</span> +</div> +</div> + +<!-- + Initially, we clamp 3lh worth of content, + which means 1 line of parent block, then two lines of the nested one: + the first one with some big numbers, and the second one with only small ones. + Then, when balancing, we move "4" to the second line, + which makes it no longer fit, + so that line gets clamped away too. +--> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-008.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-008.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based, clamp caused by balance</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-007-ref.html"> +<meta name="assert" content="Checks that balancing after claming can cause clamping when working with height based clamping, even if there was no clamp point prior to balancing."> +<style> +.clamp { + line-clamp: auto; + font-family: monospace; + width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ + line-height: 1; + max-height: 4lh; + text-wrap: balance; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 3 (and no further) below. + +<div class="clamp"> +0 +<div class=balance> +1 2 <span>3</span> <span>4</span> 5 6 +</div> +</div> + +<!-- + Initially, we are limited to 4lh worth of content, + which means we can fit all the content: + first, 1lh in the parent div, + then one line with some big numbers in the nested div, and a second one with only small ones. + Then, when balancing, we move "4" to the second line, + which makes it no longer fit, + so that line gets clamped away. +--> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-009.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-009.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based, never overflow</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-009-ref.html"> +<meta name="assert" content="Checks that when the browser clamps then balances, it clamps again. And if it balances again, it clamps yet another time."> +<style> +.clamp { + font-size: 10px; + line-clamp: "abcdefghi"; + font-family: monospace; + width: 49.1ch; + line-height: 1; + max-height: 120px; + text-wrap: balance; + color: red; + background: red; + +} +b { + font-weight: normal; + font-size: 3em; +} +aside { + position: absolute; + width: 600px; + height: 120px; + background: white; +} +</style> +<p>Test passes if there is no red below. + +<aside></aside> +<div class="clamp"> + <b><b>1 2 3</b></b> <b>4</b> 5 6666666666666666666666666666666666666 777777777777777777777777777777777777777777777777 888888888888888888888888888888 99999999999999999 +</div> + +<!-- + if unbalanced, the first line fits numbers up to 4, + the second one to 6, + the third to 7, + and the fourth to 9. + The whole thing fits into 120px; + + If you apply balance, + 4 (which is quite large) wraps the the second line, which still ends in 6 + the first 2 lines just fit into 120px, + so the last two are discarded. + + the second line s now the last line, + so the ellipsis gets inserted. + + Because the ellipsis is a little long, + we need to remove the 6s for it to fit. + If the browser stops there, + the first 2 lines fit within 120px. + + But after having removed the 6s, the first two lines are unbalanced, + so the browser might chose to rebalance them. + If it does that, it moves the 3 from the first to the second line, + which grows again. + it would now take 180px to fit the first two lines, + so we need to clamp again. + If we don't, + some content (or background) will stick out and show red. +--> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-010.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-010.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-010-ref.html"> +<meta name="assert" content="Checks that balancing in nested IFC happens properly, and is taken into account when finding clamp points."> +<style> +.clamp { + line-clamp: auto; + font-family: monospace; + line-height: 1; + max-height: 6lh; +} +.balance { + display: flow-root; + width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ + text-wrap: balance; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see no numbers beyond 0 + +<div class="clamp"> + 0 + <div class=balance> +1 2 <span>3</span> <span>4</span> 5 6 7 8 <span>9</span> + </div> + 10 +</div> + diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-011.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-011.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-010-ref.html"> +<meta name="assert" content="Checks that balancing in nested IFC happens properly, and is taken into account when finding clamp points."> +<style> +.clamp { + line-clamp: auto; + font-family: monospace; + line-height: 1; + max-height: 6lh; +} +.balance { + display: flow-root; + width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ + text-wrap: balance; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see no numbers beyond 0 + +<div class="clamp"> + 0 + <div class=balance> +1 2 <span>3</span> <span>4</span> 5 6 7 8 <span>9</span> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-012.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-balance-012.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-balance-012-ref.html"> +<meta name="assert" content="Checks that balancing in nested IFC happens properly, and is taken into account when finding clamp points."> +<style> +.clamp { + line-clamp: auto; + font-family: monospace; + line-height: 1; + max-height: 8lh; + width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ +} +.balance { + display: flow-root; + text-wrap: balance; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 12 and not beyond. + +<div class="clamp"> + 0 + <div class=balance> +1 2 <span>3</span> <span>4</span> 5 6 7 8 <span>9</span> + </div> + 10 11 12 13 14 +</div> + diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-001-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: test reference</title> +<style> +.clamp { + font-family: monospace; +} +</style> +<p>Test passes if you see numbers up to 8 (and no further) below. + +<div class="clamp"> +1 2 3 4<br> +5 6 7 8… +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-002-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-002-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: test reference</title> +<style> +.clamp { + font-family: monospace; +} +</style> +<p>Test passes if you see numbers up to 8 (and no further) below. + +<div class="clamp"> + 0<br> + 1 2 3 4<br> + 5 6 7 8… +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-003-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-003-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: test reference</title> +<style> +.clamp { + font-family: monospace; + line-height: 1; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 8 (and no further) below. + +<div class="clamp"> +1 2 <span>3</span> <span>4</span><br> +5 6 7 8… +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-004-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-004-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: test reference</title> +<style> +.clamp { + font-family: monospace; + line-height: 1; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 3 (and no further) below. + +<div class="clamp"> +1 2 <span>3</span>… +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-006-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-006-ref.html @@ -0,0 +1,19 @@ + +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: test reference</title> +<style> +.clamp { + font-family: monospace; + line-height: 1; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 8 (and no further) below. + +<div class="clamp"> +0<br> +1 2 <span>3</span> <span>4</span><br> +5 6 7 8… +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-007-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-007-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: test reference</title> +<style> +.clamp { + font-family: monospace; + line-height: 1; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 3 (and no further) below. + +<div class="clamp"> +0<br> +1 2 <span>3</span>… +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-009-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-009-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: test reference</title> +<p>Test passes if there is no red below. diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-010-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-010-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: test reference</title> +<style> +.clamp { + font-family: monospace; + line-height: 1; +} +</style> +<p>Test passes if you see no numbers beyond 0 + +<div class="clamp"> + 0… +</div> + diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-012-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/line-clamp-balance-012-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Overflow: test reference</title> +<style> +.clamp { + font-family: monospace; + line-height: 1; +} +span { font-size: 2em; } +</style> +<p>Test passes if you see numbers up to 12 and not beyond. + +<div class="clamp"> + 0<br> + 1 2 <span>3</span><br> + <span>4</span> 5 6<br> + 7 8 <span>9</span><br> + 10 11 12… +</div> +