185 lines
5.5 KiB
HTML
185 lines
5.5 KiB
HTML
<!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>
|