diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-05-15 03:34:42 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-05-15 03:34:42 +0000 |
| commit | da4c7e7ed675c3bf405668739c3012d140856109 (patch) | |
| tree | cdd868dba063fecba609a1d819de271f0d51b23e /testing/web-platform/tests/css/css-overflow | |
| parent | Adding upstream version 125.0.3. (diff) | |
| download | firefox-da4c7e7ed675c3bf405668739c3012d140856109.tar.xz firefox-da4c7e7ed675c3bf405668739c3012d140856109.zip | |
Adding upstream version 126.0.upstream/126.0
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-overflow')
41 files changed, 1065 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-001.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-001.tentative.html new file mode 100644 index 0000000000..c8cfcb1066 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-001.tentative.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp basic test</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="line-clamp should clamp to the specified number of lines, without needing display: -webkit-box, -webkit-box-orient, or overflow: hidden."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-002.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-002.tentative.html new file mode 100644 index 0000000000..5f21b545fb --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-002.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with fewer lines than specified</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-001-ref.html"> +<meta name="assert" content="line-clamp should not have an effect on an element with fewer lines than specified."> +<style> +.clamp { + line-clamp: 6; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-003.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-003.tentative.html new file mode 100644 index 0000000000..fa3b7472e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-003.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with exactly as many lines as specified</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-001-ref.html"> +<meta name="assert" content="line-clamp should not have an effect on an element with exactly as many lines as specified."> +<style> +.clamp { + line-clamp: 5; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-004.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-004.tentative.html new file mode 100644 index 0000000000..c766d195b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-004.tentative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: sizing of line-clamp affected elements</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-006-ref.html"> +<meta name="assert" content="line-clamp should size the element to the clamped number of lines."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-005.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-005.tentative.html new file mode 100644 index 0000000000..143aa65d89 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-005.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with same-BFC block children</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-009-ref.html"> +<meta name="assert" content="line-clamp should count lines in same-BFC block children"> +<style> +.clamp { + line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="child">Line 3 +Line 4</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-006.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-006.tentative.html new file mode 100644 index 0000000000..f06d94161b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-006.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with same-BFC block children</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-010-ref.html"> +<meta name="assert" content="line-clamp should count lines in same-BFC block children"> +<style> +.clamp { + line-clamp: 5; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="child">Line 3 +Line 4</div>Line 5 +Line 6</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-007.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-007.tentative.html new file mode 100644 index 0000000000..c71068641b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-007.tentative.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with independent BFC children</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-011-ref.html"> +<meta name="assert" content="line-clamp should skip lines in children with independent BFCs"> +<style> +.clamp { + line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + overflow: auto; + font: 24px / 48px serif; + color: blue; + padding: 0 4px; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="child">Line 3 +Line 4</div>Line 5 +Line 6</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-008.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-008.tentative.html new file mode 100644 index 0000000000..0d91b3612d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-008.tentative.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp hides lines and in-flow boxes after the clamp point</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="line-clamp should hide lines and in-flow boxes after the clamp point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.pre { + white-space: pre; +} +.red { + background-color: red; +} +</style> +<div class="clamp"> +<div class="pre">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> + +<div class="red">Test</div> + +<table class="red"> + <tr> + <td>A</td> + <td>B</td> + </tr> + <tr> + <td>C</td> + <td>D</td> + </tr> +</table> + +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-009.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-009.tentative.html new file mode 100644 index 0000000000..4dfd3d6194 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-009.tentative.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: sizing of line-clamp affected elements with clamped block boxes</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-006-ref.html"> +<meta name="assert" content="line-clamp should size the element to the clamped number of lines, regardless of whether there are hidden block boxes after the clamp point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.pre { + white-space: pre; +} +.red { + background-color: red; +} +</style> +<div class="clamp"> +<div class="pre">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> + +<div class="red">Test</div> + +<table class="red"> + <tr> + <td>A</td> + <td>B</td> + </tr> + <tr> + <td>C</td> + <td>D</td> + </tr> +</table> + +</div> + +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-010.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-010.tentative.html new file mode 100644 index 0000000000..1386b147ce --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-010.tentative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: when clamping by lines, lines after clamp are hidden even when they don't overflow</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-010-ref.html"> +<meta name="assert" content="When line-clamp is used with a number of lines, it should hide all lines after clamp, regardless of whether the box's height is set so they don't overflow"> +<style> +.clamp { + line-clamp: 2; + font: 16px / 32px serif; + height: 4lh; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-011.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-011.tentative.html new file mode 100644 index 0000000000..953f0c4faa --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-011.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: when clamping by lines, lines before clamp are not hidden even when they overflow</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-011-ref.html"> +<meta name="assert" content="When line-clamp is used with a number of lines, it should not hide any lines before clamp, regardless of whether the box's height is set so they overflow"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + height: 3lh; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-012.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-012.tentative.html new file mode 100644 index 0000000000..be39074037 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-012.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: when clamping by lines, borders and padding are respected</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-012-ref.html"> +<meta name="assert" content="when line-clamp is used with a number of lines, the box and its clamped children should be sized respecting borders and padding"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 4px; + white-space: pre; + background-color: yellow; + border: 2px solid black; +} +.inner { + background-color: skyblue; + padding: 4px; + border: 2px solid purple; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="inner">Line 3 +Line 4 +Line 5 +Line 6</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-013.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-013.tentative.html new file mode 100644 index 0000000000..1bda501f02 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-013.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: when clamping by lines, clamped block descendent heights are respected</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-013-ref.html"> +<meta name="assert" content="when line-clamp is used with a number of lines, if the clamp happens inside a block descendent with a set height, that height will be respected"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 4px; + white-space: pre; + background-color: yellow; + border: 2px solid black; +} +.inner { + background-color: skyblue; + height: 3lh; + padding: 4px; + border: 2px solid purple; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="inner">Line 3 +Line 4 +Line 5 +Line 6</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-014.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-014.tentative.html new file mode 100644 index 0000000000..9ca7c89372 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-014.tentative.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp doesn't apply to inline boxes</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-001-ref.html"> +<meta name="assert" content="line-clamp only affects block containers, not inline boxes"> +<style> +.block { + font: 16px / 32px serif; + background-color: yellow; +} +.clamp { + line-clamp: 4; + white-space: pre; +} +</style> +<div class="block"><span class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</span></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-015.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-015.tentative.html new file mode 100644 index 0000000000..8203007322 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-015.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp applies to inline blocks</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-015-ref.html"> +<meta name="assert" content="line-clamp affects block containers, which includes inline blocks"> +<style> +.clamp { + display: inline-block; + line-clamp: 3; + font: 16px / 32px monospace; + white-space: pre; + padding: 0 4px; + width: 7.01ch; + background-color: yellow; +} +</style> +Before <div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> After</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-016.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-016.tentative.html new file mode 100644 index 0000000000..09714c499d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-016.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with -webkit-box and -webkit-box-orient</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="If display: -webkit-box and -webkit-box-orient: vertical are present on the same box as line-clamp, it becomes a block container, and so line-clamp applies to that box."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-017.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-017.tentative.html new file mode 100644 index 0000000000..11d6ceeb55 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-017.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with -webkit-box and -webkit-box-orient</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="If display: -webkit-box and -webkit-box-orient: vertical are present on the same box as line-clamp, it becomes a block container, and other flexbox properties don't apply."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + + /* These properties horizontally center the child, if this box is either a + * -webkit-box or a regular flexbox. */ + -webkit-box-align: center; + align-items: center; +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-018.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-018.tentative.html new file mode 100644 index 0000000000..af75f7dfb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-018.tentative.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with -webkit-box and -webkit-box-orient</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-001-ref.html"> +<meta name="assert" content="If display: -webkit-box and -webkit-box-orient: vertical are present on the same box as line-clamp, it becomes a block container, and other flexbox properties don't apply. This happens even if there is no clamping."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + line-clamp: 6; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + + /* These properties horizontally center the child, if this box is either a + * -webkit-box or a regular flexbox. */ + -webkit-box-align: center; + align-items: center; +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-019.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-019.tentative.html new file mode 100644 index 0000000000..b39376d395 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-019.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp takes priority over -webkit-line-clamp</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="If both line-clamp and -webkit-line-clamp are present, line-clamp takes priority"> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-020.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-020.tentative.html new file mode 100644 index 0000000000..9d8a2b4d06 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-020.tentative.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp: none has no effect</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-001-ref.html"> +<meta name="assert" content="line-clamp: none should have no effect."> +<style> +.clamp { + line-clamp: none; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-001.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-001.tentative.html new file mode 100644 index 0000000000..79667f23fb --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-001.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos at the start of a line-clamp</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-with-abspos-001-ref.html"> +<meta name="assert" content="Absolute positioned boxes in an inline formatting context inside a line-clamp container are not hidden if they are in the box tree before the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-002.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-002.tentative.html new file mode 100644 index 0000000000..cecb9d52bc --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-002.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos at the start of a line-clamp</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-with-abspos-001-ref.html"> +<meta name="assert" content="Absolute positioned boxes in a block formatting context inside a line-clamp container are not hidden if they are in the box tree before the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +.pre { + white-space: pre; +} +</style> +<div class="clamp"> +<div class="abspos"></div> +<div class="pre">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-003.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-003.tentative.html new file mode 100644 index 0000000000..e4bd1de222 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-003.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp after clamp point</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="Absolute positioned boxes in an inline formatting context inside a line-clamp container are always hidden if they are in the box tree after the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<div class="abspos"></div>Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-004.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-004.tentative.html new file mode 100644 index 0000000000..483e6d1da6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-004.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp after clamp point</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="Absolute positioned boxes in a block formatting context inside a line-clamp container are always hidden if they are in the box tree after the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +.pre { + white-space: pre; +} +</style> +<div class="clamp"> +<div class="pre">Line 1 +Line 2 +Line 3 +Line 4</div> +<div class="abspos"></div> +<div>Line 5</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-005.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-005.tentative.html new file mode 100644 index 0000000000..3dc77831a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-005.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp before clamp point which overflows</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-with-abspos-005-ref.html"> +<meta name="assert" content="Absolute positioned boxes in an inline formatting context inside a line-clamp container are not hidden if they are in the box tree before the clamp point, even if they visually extend beyond that point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4<div class="abspos"></div> +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-006.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-006.tentative.html new file mode 100644 index 0000000000..f18fed6c2d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-006.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp before clamp point which overflows</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-with-abspos-006-ref.html"> +<meta name="assert" content="Absolute positioned boxes in a block formatting context inside a line-clamp container are not hidden if they are in the box tree before the clamp point, even if they visually extend beyond that point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 75px; + margin: 4px; + background-color: skyblue; +} +.pre { + white-space: pre; +} +</style> +<div class="clamp"> +<div class="pre">Line 1 +Line 2 +Line 3</div> +<div class="abspos"></div> +<div class="pre">Line 4 +Line 5</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-007.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-007.tentative.html new file mode 100644 index 0000000000..f0a1f58c8d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-007.tentative.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp before clamp point positioned after it</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-with-abspos-007-ref.html"> +<meta name="assert" content="Absolute positioned boxes inside a line-clamp container are not hidden if they are in the box tree before the clamp point, even if they are positioned after that point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + top: 148px; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-008.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-008.tentative.html new file mode 100644 index 0000000000..9c62e44f38 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-008.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: bottom: 0 abspos in line-clamp before clamp point</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-with-abspos-008-ref.html"> +<meta name="assert" content="Absolute positioned boxes inside a line-clamp container are not hidden if they are in the box tree before the clamp point."> +<style> +.clamp { + line-clamp: 4; + position: relative; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-009.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-009.tentative.html new file mode 100644 index 0000000000..dce04d720c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-009.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: abspos in line-clamp after clamp point positioned before it</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="Absolute positioned boxes inside a line-clamp container are hidden if they are in the box tree after the clamp point, even if they are positioned before that point"> +<style> +.clamp { + line-clamp: 4; + position: relative; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + top: 0; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5<div class="abspos"></div></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-010.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-010.tentative.html new file mode 100644 index 0000000000..325278b3a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-010.tentative.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp doesn't propagate to 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/line-clamp-with-abspos-010-ref.html"> +<meta name="assert" content="Absolute positioned boxes create a new BFC, and line-clamp does not propagate into independent BFCs"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + margin: 4px; + white-space: pre; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4<div class="abspos">Line A +Line B +Line C +Line D +Line E</div> +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-010-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-010-ref.html new file mode 100644 index 0000000000..46ca731c54 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-010-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + white-space: pre; + height: 4lh; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-011-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-011-ref.html new file mode 100644 index 0000000000..04297fff2b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-011-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + white-space: pre; + height: 3lh; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-012-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-012-ref.html new file mode 100644 index 0000000000..f412e0110d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-012-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 4px; + white-space: pre; + background-color: yellow; + border: 2px solid black; +} +.inner { + background-color: skyblue; + padding: 4px; + border: 2px solid purple; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="inner">Line 3 +Line 4…</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-013-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-013-ref.html new file mode 100644 index 0000000000..b2eb05e884 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-013-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 4px; + white-space: pre; + background-color: yellow; + border: 2px solid black; +} +.inner { + background-color: skyblue; + height: 3lh; + padding: 4px; + border: 2px solid purple; +} +</style> +<div class="clamp">Line 1 +Line 2<div class="inner">Line 3 +Line 4…</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-015-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-015-ref.html new file mode 100644 index 0000000000..1af45c1225 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-015-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: inline-block; + font: 16px / 32px monospace; + white-space: pre; + padding: 0 4px; + width: 7.01ch; + background-color: yellow; +} +</style> +Before <div class="clamp">Line 1 +Line 2 +Line 3…</div> After</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-001-ref.html new file mode 100644 index 0000000000..d756162dde --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-005-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-005-ref.html new file mode 100644 index 0000000000..3b1f9218e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-005-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…<div class="abspos"></div></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-006-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-006-ref.html new file mode 100644 index 0000000000..4b55c37a03 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-006-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 75px; + margin: 4px; + background-color: skyblue; +} +.pre { + white-space: pre; +} +</style> +<div class="clamp"> +<div class="pre">Line 1 +Line 2 +Line 3</div> +<div class="abspos"></div> +<div class="pre">Line 4…</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-007-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-007-ref.html new file mode 100644 index 0000000000..e3dcc696e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-007-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + top: 148px; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-008-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-008-ref.html new file mode 100644 index 0000000000..373b2755c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-008-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + position: relative; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + bottom: 0; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="abspos"></div>Line 1 +Line 2 +Line 3 +Line 4…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-010-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-010-ref.html new file mode 100644 index 0000000000..ecc2fcee1b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-010-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + margin: 4px; + white-space: pre; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…<div class="abspos">Line A +Line B +Line C +Line D +Line E</div></div> |