diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-071.html | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-071.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-071.html | 185 |
1 files changed, 185 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-071.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-071.html new file mode 100644 index 0000000000..6f267b27c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-071.html @@ -0,0 +1,185 @@ +<!doctype HTML> +<html> +<meta charset="utf8"> +<title>Content Visibility: off-screen selection</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> +<meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have selection."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +body, html { + padding: 0; + margin: 0; +} + +.spacer { + height: 3000px; +} +.container { + width: 10px; + contain-intrinsic-size: 10px 20px; + content-visibility: auto; +} +.child { + width: 10px; + height: 10px; +} +</style> + +<div class=spacer></div> +<div id=container_1 class=container><div id=child_1 class=child>hello</div></div> +<div id=container_2 class=container><div id=child_2 class=child>hello</div></div> +<div id=container_3 class=container><div id=child_3 class=child>hello</div></div> +<div id=container_4 class=container><div id=child_4 class=child>hello</div></div> +<div id=container_5 class=container><div id=child_5 class=child>hello</div></div> + +<script> +function isLocked(container) { + const height = container.getBoundingClientRect().height; + assert_true(height == 20 || height == 10); + return container.getBoundingClientRect().height == 20; +} + +const selection = window.getSelection(); +function resetSelection() { + selection.removeAllRanges(); + assert_true(isLocked(container_1)); + assert_true(isLocked(container_2)); + assert_true(isLocked(container_3)); + assert_true(isLocked(container_4)); + assert_true(isLocked(container_5)); +} + +test(() => { + resetSelection(); + const range = document.createRange(); + range.selectNodeContents(child_2); + selection.addRange(range); + + assert_true(isLocked(container_1), "1"); + assert_false(isLocked(container_2), "2"); + assert_true(isLocked(container_3), "3"); + assert_true(isLocked(container_4), "4"); + assert_true(isLocked(container_5), "5"); +}, "One elements selected: "); + +test(() => { + resetSelection(); + const range = document.createRange(); + range.selectNodeContents(child_2); + selection.addRange(range); + + assert_true(isLocked(container_1), "1"); + assert_false(isLocked(container_2), "2"); + assert_true(isLocked(container_3), "3"); + assert_true(isLocked(container_4), "4"); + assert_true(isLocked(container_5), "5"); + + selection.extend(child_4, 0); + + assert_true(isLocked(container_1), "1"); + assert_false(isLocked(container_2), "2"); + assert_false(isLocked(container_3), "3"); + assert_false(isLocked(container_4), "4"); + assert_true(isLocked(container_5), "5"); +}, "Range extended to cover more elements: "); + +test(() => { + resetSelection(); + const range = document.createRange(); + range.setStart(child_2, 0); + range.setEnd(child_4, 0); + selection.addRange(range); + + assert_true(isLocked(container_1), "1"); + assert_false(isLocked(container_2), "2"); + assert_false(isLocked(container_3), "3"); + assert_false(isLocked(container_4), "4"); + assert_true(isLocked(container_5), "5"); + + selection.extend(child_2, 1); + + assert_true(isLocked(container_1), "1"); + assert_false(isLocked(container_2), "2"); + assert_true(isLocked(container_3), "3"); + assert_true(isLocked(container_4), "4"); + assert_true(isLocked(container_5), "5"); +}, "Range shrunk to cover fewer elements: "); + +test(() => { + resetSelection(); + const range = document.createRange(); + range.setStart(child_3, 0); + range.setEnd(child_3, 0); + selection.addRange(range); + selection.extend(child_2, 0); + + assert_true(isLocked(container_1), "1"); + assert_false(isLocked(container_2), "2"); + assert_false(isLocked(container_3), "3"); + assert_true(isLocked(container_4), "4"); + assert_true(isLocked(container_5), "5"); + + selection.extend(child_4, 0); + + assert_true(isLocked(container_1), "1"); + assert_true(isLocked(container_2), "2"); + assert_false(isLocked(container_3), "3"); + assert_false(isLocked(container_4), "4"); + assert_true(isLocked(container_5), "5"); +}, "Range flipped from back to front: "); + +test(() => { + resetSelection(); + const range = document.createRange(); + range.setStart(child_3, 0); + range.setEnd(child_4, 0); + selection.addRange(range); + + assert_true(isLocked(container_1), "1"); + assert_true(isLocked(container_2), "2"); + assert_false(isLocked(container_3), "3"); + assert_false(isLocked(container_4), "4"); + assert_true(isLocked(container_5), "5"); + + selection.extend(child_2, 0); + + assert_true(isLocked(container_1), "1"); + assert_false(isLocked(container_2), "2"); + assert_false(isLocked(container_3), "3"); + assert_true(isLocked(container_4), "4"); + assert_true(isLocked(container_5), "5"); +}, "Range flipped from front to back: "); + +test(() => { + resetSelection(); + const range = document.createRange(); + range.setStart(child_1, 0); + range.setEnd(child_1, 0); + selection.addRange(range); + + let state = 0; + const states = [2, 4, 3, 5, 1]; + for (let i = 0; i < 10; ++i) { + const id = states[state]; + selection.extend(document.getElementById(`child_${id}`), 1); + + for (let check_id = 1; check_id <= 5; ++check_id) { + if (check_id <= id) { + assert_false( + isLocked(document.getElementById(`container_${check_id}`)), + `test_${i}, container_${check_id}`); + } else { + assert_true( + isLocked(document.getElementById(`container_${check_id}`)), + `test_${i}, container_${check_id}`); + } + } + state = (state + 1) % states.length; + } +}, "Range goes back and forth: "); +</script> +</html> |