content-visibility-070.html (3123B)
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 background: lightblue; 21 } 22 #container { 23 background: lightgreen; 24 contain-intrinsic-size: 50px 100px; 25 content-visibility: auto; 26 } 27 #selectable { 28 width: 10px; 29 height: 10px; 30 } 31 </style> 32 33 <div class=spacer></div> 34 <div id=container> 35 <div id=selectable>hello</div> 36 </div> 37 <div class=spacer></div> 38 39 <script> 40 async_test((t) => { 41 const selection = window.getSelection(); 42 const range = document.createRange(); 43 range.selectNodeContents(selectable); 44 45 // Initially container should be 3000px offscreen with contained height 100px. 46 function step1() { 47 const r = container.getBoundingClientRect(); 48 t.step(() => { 49 assert_equals(r.y, 3000, "step1 offset"); 50 assert_equals(r.height, 100, "step1 height"); 51 }); 52 53 selection.removeAllRanges(); 54 selection.addRange(range); 55 56 requestAnimationFrame(step2); 57 } 58 // The container has a selection so it should be smaller now, height 10px. 59 function step2() { 60 const r = container.getBoundingClientRect(); 61 t.step(() => { 62 assert_equals(r.y, 3000, "step2 offset"); 63 assert_equals(r.height, 10, "step2 height"); 64 }); 65 document.scrollingElement.scrollTop = 3000; 66 requestAnimationFrame(step3); 67 } 68 // After scrolling the container should be closer and still height 10px. 69 function step3() { 70 const r = container.getBoundingClientRect(); 71 t.step(() => { 72 assert_less_than(r.y, 3000, "step3 offset"); 73 assert_equals(r.height, 10, "step3 height"); 74 }); 75 document.scrollingElement.scrollTop = 0; 76 requestAnimationFrame(step4); 77 } 78 // Scrolling back to the top we should remain at height 10px. 79 function step4() { 80 const r = container.getBoundingClientRect(); 81 t.step(() => { 82 assert_equals(r.y, 3000, "step4 offset"); 83 assert_equals(r.height, 10, "step4 height"); 84 }); 85 requestAnimationFrame(step5); 86 } 87 // Repeat step4 to ensure we're in a stable situation. 88 function step5() { 89 const r = container.getBoundingClientRect(); 90 t.step(() => { 91 assert_equals(r.y, 3000, "step5 offset"); 92 assert_equals(r.height, 10, "step5 height"); 93 }); 94 95 selection.removeAllRanges(); 96 97 requestAnimationFrame(step6); 98 } 99 // After removing the selection, we keep the last rendered size, see 100 // https://github.com/w3c/csswg-drafts/issues/8407. 101 function step6() { 102 const r = container.getBoundingClientRect(); 103 t.step(() => { 104 assert_equals(r.y, 3000, "step6 offset"); 105 assert_equals(r.height, 10, "step6 height"); 106 }); 107 t.done(); 108 } 109 step1(); 110 }); 111 </script> 112 </html>