content-visibility-071.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-contain/content-visibility/content-visibility-071.html - WPT Dashboard Interop Dashboard

<!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>