content-visibility-071.html (5582B)
1 <!doctype HTML> 2 <html> 3 <meta charset="utf8"> 4 <title>Content Visibility: off-screen selection</title> 5 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have selection."> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 12 <style> 13 body, html { 14 padding: 0; 15 margin: 0; 16 } 17 18 .spacer { 19 height: 3000px; 20 } 21 .container { 22 width: 10px; 23 contain-intrinsic-size: 10px 20px; 24 content-visibility: auto; 25 } 26 .child { 27 width: 10px; 28 height: 10px; 29 } 30 </style> 31 32 <div class=spacer></div> 33 <div id=container_1 class=container><div id=child_1 class=child>hello</div></div> 34 <div id=container_2 class=container><div id=child_2 class=child>hello</div></div> 35 <div id=container_3 class=container><div id=child_3 class=child>hello</div></div> 36 <div id=container_4 class=container><div id=child_4 class=child>hello</div></div> 37 <div id=container_5 class=container><div id=child_5 class=child>hello</div></div> 38 39 <script> 40 function isLocked(container) { 41 const height = container.getBoundingClientRect().height; 42 assert_true(height == 20 || height == 10); 43 return container.getBoundingClientRect().height == 20; 44 } 45 46 const selection = window.getSelection(); 47 function resetSelection() { 48 selection.removeAllRanges(); 49 assert_true(isLocked(container_1)); 50 assert_true(isLocked(container_2)); 51 assert_true(isLocked(container_3)); 52 assert_true(isLocked(container_4)); 53 assert_true(isLocked(container_5)); 54 } 55 56 test(() => { 57 resetSelection(); 58 const range = document.createRange(); 59 range.selectNodeContents(child_2); 60 selection.addRange(range); 61 62 assert_true(isLocked(container_1), "1"); 63 assert_false(isLocked(container_2), "2"); 64 assert_true(isLocked(container_3), "3"); 65 assert_true(isLocked(container_4), "4"); 66 assert_true(isLocked(container_5), "5"); 67 }, "One elements selected: "); 68 69 test(() => { 70 resetSelection(); 71 const range = document.createRange(); 72 range.selectNodeContents(child_2); 73 selection.addRange(range); 74 75 assert_true(isLocked(container_1), "1"); 76 assert_false(isLocked(container_2), "2"); 77 assert_true(isLocked(container_3), "3"); 78 assert_true(isLocked(container_4), "4"); 79 assert_true(isLocked(container_5), "5"); 80 81 selection.extend(child_4, 0); 82 83 assert_true(isLocked(container_1), "1"); 84 assert_false(isLocked(container_2), "2"); 85 assert_false(isLocked(container_3), "3"); 86 assert_false(isLocked(container_4), "4"); 87 assert_true(isLocked(container_5), "5"); 88 }, "Range extended to cover more elements: "); 89 90 test(() => { 91 resetSelection(); 92 const range = document.createRange(); 93 range.setStart(child_2, 0); 94 range.setEnd(child_4, 0); 95 selection.addRange(range); 96 97 assert_true(isLocked(container_1), "1"); 98 assert_false(isLocked(container_2), "2"); 99 assert_false(isLocked(container_3), "3"); 100 assert_false(isLocked(container_4), "4"); 101 assert_true(isLocked(container_5), "5"); 102 103 selection.extend(child_2, 1); 104 105 assert_true(isLocked(container_1), "1"); 106 assert_false(isLocked(container_2), "2"); 107 assert_true(isLocked(container_3), "3"); 108 assert_true(isLocked(container_4), "4"); 109 assert_true(isLocked(container_5), "5"); 110 }, "Range shrunk to cover fewer elements: "); 111 112 test(() => { 113 resetSelection(); 114 const range = document.createRange(); 115 range.setStart(child_3, 0); 116 range.setEnd(child_3, 0); 117 selection.addRange(range); 118 selection.extend(child_2, 0); 119 120 assert_true(isLocked(container_1), "1"); 121 assert_false(isLocked(container_2), "2"); 122 assert_false(isLocked(container_3), "3"); 123 assert_true(isLocked(container_4), "4"); 124 assert_true(isLocked(container_5), "5"); 125 126 selection.extend(child_4, 0); 127 128 assert_true(isLocked(container_1), "1"); 129 assert_true(isLocked(container_2), "2"); 130 assert_false(isLocked(container_3), "3"); 131 assert_false(isLocked(container_4), "4"); 132 assert_true(isLocked(container_5), "5"); 133 }, "Range flipped from back to front: "); 134 135 test(() => { 136 resetSelection(); 137 const range = document.createRange(); 138 range.setStart(child_3, 0); 139 range.setEnd(child_4, 0); 140 selection.addRange(range); 141 142 assert_true(isLocked(container_1), "1"); 143 assert_true(isLocked(container_2), "2"); 144 assert_false(isLocked(container_3), "3"); 145 assert_false(isLocked(container_4), "4"); 146 assert_true(isLocked(container_5), "5"); 147 148 selection.extend(child_2, 0); 149 150 assert_true(isLocked(container_1), "1"); 151 assert_false(isLocked(container_2), "2"); 152 assert_false(isLocked(container_3), "3"); 153 assert_true(isLocked(container_4), "4"); 154 assert_true(isLocked(container_5), "5"); 155 }, "Range flipped from front to back: "); 156 157 test(() => { 158 resetSelection(); 159 const range = document.createRange(); 160 range.setStart(child_1, 0); 161 range.setEnd(child_1, 0); 162 selection.addRange(range); 163 164 let state = 0; 165 const states = [2, 4, 3, 5, 1]; 166 for (let i = 0; i < 10; ++i) { 167 const id = states[state]; 168 selection.extend(document.getElementById(`child_${id}`), 1); 169 170 for (let check_id = 1; check_id <= 5; ++check_id) { 171 if (check_id <= id) { 172 assert_false( 173 isLocked(document.getElementById(`container_${check_id}`)), 174 `test_${i}, container_${check_id}`); 175 } else { 176 assert_true( 177 isLocked(document.getElementById(`container_${check_id}`)), 178 `test_${i}, container_${check_id}`); 179 } 180 } 181 state = (state + 1) % states.length; 182 } 183 }, "Range goes back and forth: "); 184 </script> 185 </html>