diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:35:37 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:35:37 +0000 |
| commit | a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch) | |
| tree | 532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/css/css-overflow | |
| parent | Adding debian version 126.0.1-1. (diff) | |
| download | firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip | |
Merging upstream version 127.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-overflow')
22 files changed, 768 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-021.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-021.tentative.html new file mode 100644 index 0000000000..611cd6f890 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-021.tentative.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp hidden content is treated as ink 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-021-ref.html"> +<meta name="assert" content="Any overflowing content hidden from paint by line-clamp is treated as ink overflow and therefore doesn't cause the scrollable overflow rectangle to grow."> +<style> +#scrollContainer { + overflow: scroll; + font: 16px / 32px serif; + height: 3lh; + border: 1px solid black; +} +.clamp { + line-clamp: 4; + padding: 4px; + background-color: yellow; +} +.pre { + white-space: pre; +} +</style> + +<div id="scrollContainer"> + + <div class="clamp"> + <div class="pre">Line 1 +Line 2 +Line 3 +Line 4 +Line 5 +Line 6</div> + + <div>Another div</div> + + <table> + <tr> + <td>A</td> + <td>B</td> + </tr> + <tr> + <td>C</td> + <td>D</td> + </tr> + </table> + </div> + +</div> + +<script> + window.addEventListener("load", () => { + const scrollContainer = document.getElementById("scrollContainer"); + scrollContainer.scrollTop = scrollContainer.scrollHeight; + }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-011.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-011.tentative.html new file mode 100644 index 0000000000..ab5102a7cf --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-011.tentative.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp hidden abspos should count as ink 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-with-abspos-011-ref.html"> +<meta name="assert" content="Any overflowing content hidden from paint by line-clamp is treated as ink overflow, including absolute positioned boxes, and therefore doesn't cause the scrollable overflow rectangle to grow. Meanwhile, non-hidden abspos count as scrollable overflow."> +<style> +#scrollContainer { + overflow: scroll; + position: relative; + font: 16px / 32px serif; + height: 4lh; + border: 1px solid black; +} +.clamp { + line-clamp: 4; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +#abspos1 { + top: 4.5lh; +} +#abspos2 { + top: 6lh; +} +</style> + +<div id="scrollContainer"> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4<div class="abspos" id="abspos1"></div> +Line 5 +Line 6<div class="abspos" id="abspos2"></div></div> +</div> + +<script> + window.addEventListener("load", () => { + const scrollContainer = document.getElementById("scrollContainer"); + scrollContainer.scrollTop = scrollContainer.scrollHeight; + }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-001.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-001.tentative.html new file mode 100644 index 0000000000..98bbdcb904 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-001.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: float 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-floats-001-ref.html"> +<meta name="assert" content="Floats in an inline formatting context inside a line-clamp container are not hidden if they come before the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.float { + float: left; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="float"></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-floats-002.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-002.tentative.html new file mode 100644 index 0000000000..15379a3de3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-002.tentative.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: float 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-floats-001-ref.html"> +<meta name="assert" content="Floats in a block formatting context inside a line-clamp container are not hidden if they come before the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.float { + float: left; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +.pre { + white-space: pre; +} +</style> +<div class="clamp"> +<div class="float"></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-floats-003.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-003.tentative.html new file mode 100644 index 0000000000..c203758235 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-003.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: float 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="Floats in an inline formatting context inside a line-clamp container are always hidden if they come after the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.float { + float: left; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<div class="float"></div>Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-004.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-004.tentative.html new file mode 100644 index 0000000000..6213130174 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-004.tentative.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: float 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="Floats in a block formatting context inside a line-clamp container are always hidden if they come after the clamp point."> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.float { + float: left; + 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="float"></div> +<div>Line 5</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-005.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-005.tentative.html new file mode 100644 index 0000000000..9689a83fa7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-005.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: float in line-clamp before clamp point which extends past 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-floats-005-ref.html"> +<meta name="assert" content="Floats in an inline formatting context inside a line-clamp container are not hidden if they come before the clamp point, even if they extend beyond that point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.float { + float: left; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4<div class="float"></div> +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-006.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-006.tentative.html new file mode 100644 index 0000000000..0a709bff19 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-006.tentative.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: float in line-clamp before clamp point which extends past 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-floats-006-ref.html"> +<meta name="assert" content="Floats in a block formatting context inside a line-clamp container are not hidden if they come before the clamp point, even if they extend beyond that point"> +<style> +.clamp { + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.float { + float: left; + 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="float"></div> +<div class="pre">Line 4 +Line 5</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-007.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-007.tentative.html new file mode 100644 index 0000000000..7ee286fbf4 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-007.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp doesn't propagate to floats</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-floats-007-ref.html"> +<meta name="assert" content="Floats 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; +} +.float { + float: left; + margin: 4px; + white-space: pre; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4<div class="float">Line A +Line B +Line C +Line D +Line E</div> +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-008.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-008.tentative.html new file mode 100644 index 0000000000..c62ba5371a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-008.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp IFC with floats extending past 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/line-clamp-with-floats-008-ref.html"> +<meta name="assert" content="If the line-clamp container is an independent formatting context, it will clear contained floats before the clamp point, even if they extend beyond the last line. Lines past the clamp point will remain hidden."> +<style> +.clamp { + display: flow-root; + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.float { + float: left; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +<div class="float"></div>Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-009.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-009.tentative.html new file mode 100644 index 0000000000..f25ac381c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-009.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp IFC with floats 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="If the line-clamp container is an independent formatting context, it will not clear any floats after the clamp point."> +<style> +.clamp { + display: flow-root; + line-clamp: 4; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.float { + float: left; + 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="float"></div></div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-010.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-010.tentative.html new file mode 100644 index 0000000000..a00ff60171 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-010.tentative.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp hidden floats should count as ink 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-with-floats-010-ref.html"> +<meta name="assert" content="Any overflowing content hidden from paint by line-clamp is treated as ink overflow, including floats, and therefore doesn't cause the scrollable overflow rectangle to grow. Meanwhile, non-hidden floats count as scrollable overflow."> +<style> +#scrollContainer { + overflow: scroll; + font: 16px / 32px serif; + height: 4lh; + border: 1px solid black; +} +.clamp { + line-clamp: 4; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.float { + float: left; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> + +<div id="scrollContainer"> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4<div class="float"></div> +Line 5 +Line 6<div class="float"></div></div> +</div> + +<script> + window.addEventListener("load", () => { + const scrollContainer = document.getElementById("scrollContainer"); + scrollContainer.scrollTop = scrollContainer.scrollHeight; + }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-021-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-021-ref.html new file mode 100644 index 0000000000..d794c76e3c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-021-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +#scrollContainer { + overflow: scroll; + font: 16px / 32px serif; + height: 3lh; + border: 1px solid black; +} +.clamp { + padding: 4px; + background-color: yellow; +} +.pre { + white-space: pre; +} +</style> + +<div id="scrollContainer"> + + <div class="clamp"> + <div class="pre">Line 1 +Line 2 +Line 3 +Line 4…</div> + </div> + +</div> + +<script> + window.addEventListener("load", () => { + const scrollContainer = document.getElementById("scrollContainer"); + scrollContainer.scrollTop = scrollContainer.scrollHeight; + }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-011-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-011-ref.html new file mode 100644 index 0000000000..f08b0270e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-011-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +#scrollContainer { + overflow: scroll; + position: relative; + font: 16px / 32px serif; + height: 4lh; + border: 1px solid black; +} +.clamp { + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.abspos { + position: absolute; + top: 4.5lh; + right: 0; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> + +<div id="scrollContainer"> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…<div class="abspos"></div></div> + +<script> + window.addEventListener("load", () => { + const scrollContainer = document.getElementById("scrollContainer"); + scrollContainer.scrollTop = scrollContainer.scrollHeight; + }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-001-ref.html new file mode 100644 index 0000000000..bcd70aa930 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-001-ref.html @@ -0,0 +1,22 @@ +<!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; +} +.float { + float: left; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp"><div class="float"></div>Line 1 +Line 2 +Line 3 +Line 4…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-005-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-005-ref.html new file mode 100644 index 0000000000..d20d6c53dd --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-005-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: flow-root; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.float { + float: left; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…<div class="float"></div></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-006-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-006-ref.html new file mode 100644 index 0000000000..9288c4e36f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-006-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: flow-root; + font: 16px / 32px serif; + padding: 0 4px; + background-color: yellow; +} +.float { + float: left; + 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="float"></div> +<div class="pre">Line 4…</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-007-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-007-ref.html new file mode 100644 index 0000000000..6d5390246b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-007-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: flow-root; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.float { + float: left; + margin: 4px; + white-space: pre; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…<div class="float">Line A +Line B +Line C +Line D +Line E</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-008-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-008-ref.html new file mode 100644 index 0000000000..50b3d53900 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-008-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: flow-root; + font: 16px / 32px serif; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.float { + float: left; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +<div class="float"></div>Line 4…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-010-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-010-ref.html new file mode 100644 index 0000000000..12b8cdc441 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-010-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +#scrollContainer { + overflow: scroll; + font: 16px / 32px serif; + height: 4lh; + border: 1px solid black; +} +.clamp { + display: flow-root; + padding: 0 4px; + white-space: pre; + background-color: yellow; +} +.float { + float: left; + width: 50px; + height: 50px; + margin: 4px; + background-color: skyblue; +} +</style> + +<div id="scrollContainer"> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…<div class="float"></div></div> + +<script> + window.addEventListener("load", () => { + const scrollContainer = document.getElementById("scrollContainer"); + scrollContainer.scrollTop = scrollContainer.scrollHeight; + }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/scroll-with-ancestor-border-radius.html b/testing/web-platform/tests/css/css-overflow/scroll-with-ancestor-border-radius.html new file mode 100644 index 0000000000..9192c613e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scroll-with-ancestor-border-radius.html @@ -0,0 +1,59 @@ +<!doctype html> +<meta charset=utf-8> +<title>Should not scroll out of rounded corner</title> +<link rel="help" href="https://crbug.com/40277896"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/dom/events/scrolling/scroll_support.js"></script> +<style> + #container { + width: 300px; + height: 300px; + border-radius: 100px; + overflow: hidden; + border: 2px solid blue; + } + + #scroller { + overflow: auto; + width: 300px; + height: 300px; + will-change: scroll-position; + } + + .spacer { + height: 200vh; + } + +</style> + +<div id="container"> + <div id="scroller"> + <div class="spacer"></div> + </div> +</div> +<div class="spacer"></div> + +<script> + promise_test(async (t) => { + await waitForCompositorCommit(); + let scrolled = new Promise((resolve) => { + let scrollers = [window, document.getElementById("scroller")]; + let onscroll = (evt) => { + for (const scroller of scrollers) { + scroller.removeEventListener("scroll", onscroll); + } + resolve(evt.target.id || "root"); + } + for (const scroller of scrollers) { + scroller.addEventListener("scroll", onscroll); + } + }); + const actions = new test_driver.Actions().scroll(20, 20, 0, 50, { duration: 50 }); + actions.send(); + assert_equals(await scrolled, "root", "Incorrect element scrolled"); + }, "Wheel-scroll out of rounded corner skips that scroller"); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/scroll-with-border-radius.html b/testing/web-platform/tests/css/css-overflow/scroll-with-border-radius.html new file mode 100644 index 0000000000..88bb0f1fa8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scroll-with-border-radius.html @@ -0,0 +1,51 @@ +<!doctype html> +<meta charset=utf-8> +<title>Should not scroll out of rounded corner</title> +<link rel="help" href="https://crbug.com/40277896"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/dom/events/scrolling/scroll_support.js"></script> +<style> + #scroller { + border-radius: 100px; + overflow: auto; + width: 300px; + height: 300px; + border: 2px solid blue; + will-change: scroll-position; + } + + .spacer { + height: 200vh; + } + +</style> + +<div id="scroller"> + <div class="spacer"></div> +</div> +<div class="spacer"></div> + +<script> + promise_test(async (t) => { + await waitForCompositorCommit(); + let scrolled = new Promise((resolve) => { + let scrollers = [window, document.getElementById("scroller")]; + let onscroll = (evt) => { + for (const scroller of scrollers) { + scroller.removeEventListener("scroll", onscroll); + } + resolve(evt.target.id || "root"); + } + for (const scroller of scrollers) { + scroller.addEventListener("scroll", onscroll); + } + }); + const actions = new test_driver.Actions().scroll(20, 20, 0, 50, { duration: 50 }); + actions.send(); + assert_equals(await scrolled, "root", "Incorrect element scrolled"); + }, "Wheel-scroll out of rounded corner skips that scroller"); +</script> |