16abbd78e7
Add scripts/import_wpt_reftests.py to sparse-clone the upstream WPT repo and bulk-import qualifying CSS reftests (no JS, no external resources) as known_fail entries. 23 tests already pass and are promoted. The import script is idempotent and exposed via `just import-wpt`. CI now prints the WPT summary (pass=36 known_fail=2877 skip=1) on every run. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
74 lines
2.5 KiB
HTML
74 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS test: balancing and line-clamp</title>
|
|
<meta charset="utf-8">
|
|
<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='help' href='https://drafts.csswg.org/css-text-4/#text-wrap-style'>
|
|
<meta name="assert" content="If the element is affected by line-clamp, the clamping effect is applied first, then the remaining lines are balanced. If the clamp point wass at the end of the line-clamp container, no ellipsis would be shown, and so the width it would otherwise have would not affect the balancing. However, if the clamp point is at the end of the paragraph but before the end of the line-clamp container, there is an ellipsis, and the balancing is affected.">
|
|
<link rel='match' href="reference/text-wrap-balance-line-clamp-002-ref.html">
|
|
<style>
|
|
div {
|
|
border: solid;
|
|
font-family: monospace;
|
|
font-size: 4rem;
|
|
line-height: 1rem;
|
|
margin: 1ch;
|
|
width: calc(15.1ch / 4); /* fits 15.1 characters at the span's font-size */
|
|
}
|
|
div span {
|
|
font-size: 1rem;
|
|
}
|
|
.test {
|
|
border-color: blue;
|
|
|
|
text-wrap-style: balance;
|
|
line-clamp: 2;
|
|
/* This code is unnecessary in any browser that supports the unprefixed version of line-clamp,
|
|
but neither does it have any detrimental effect,
|
|
and it broadens the test to browsers that only support the prefixed version */
|
|
|
|
-webkit-line-clamp: 2;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.test p {
|
|
margin: 0;
|
|
}
|
|
.ref {
|
|
border-color: orange;
|
|
}
|
|
</style>
|
|
|
|
<p>Test passes if the box with a blue frame is identical to the orange one.
|
|
|
|
<div class="test">
|
|
<p><span>1 2 3 4 5 6 7 8 9 0 1 2</span></p>
|
|
<p>Hidden</p>
|
|
</div>
|
|
|
|
<div class="ref">
|
|
<span>1 2 3 4 5 6 7 <br> 8 9 0 1 2</span>…
|
|
</div>
|
|
|
|
<!--
|
|
The optimal balancing with the ellipsis, considering that its 4 times the width
|
|
of the characters inside the <span>, is:
|
|
|---------------|
|
|
|1 2 3 4 5 6 7 |
|
|
|8 9 0 1 2.... |
|
|
|---------------|
|
|
|
|
The optimal balancing without the ellipsis would be:
|
|
|---------------|
|
|
|1 2 3 4 5 6 |
|
|
|7 8 9 0 1 2 |
|
|
|---------------|
|
|
|
|
If the line-clamp only had the first <p>, the clamp point would be at the end of
|
|
the line-clamp container, so the ellipsis shouldn't show, and the balancing
|
|
shouldn't take its width into account. However, here the clamp point is at the
|
|
end of a paragraph but not at the end of the container, so the ellipsis should
|
|
be shown and taken into account.
|
|
-->
|