anchor-inside-textarea.tentative.html (2791B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <style> 10 11 #container { 12 height: 300px; 13 width: 300px; 14 overflow-y: scroll; 15 scrollbar-width: none; 16 } 17 18 textarea { 19 /* twice the height of the container so that the container is scrollable */ 20 height: 600px; 21 width: 300px; 22 padding: 0px; 23 border: none; 24 /* This textarea has visible 10 lines in the scroll container */ 25 font-size: 30px; 26 line-height: 30px; 27 } 28 29 </style> 30 31 <div id="container"> 32 <textarea rows="20"></textarea> 33 </div> 34 <script> 35 36 setup(() => { 37 let lines = []; 38 for (let i = 1; i <= 20; i++) { 39 lines.push(`Paragraph ${i}`); 40 } 41 const textarea = document.querySelector("textarea"); 42 textarea.value += lines.join("\n"); 43 }); 44 45 promise_test(async t => { 46 const textarea = document.querySelector("textarea"); 47 textarea.focus(); 48 49 // Scroll down to the bottom. 50 let scrollPromise = new Promise(resolve => { 51 container.addEventListener("scroll", () => resolve(), { once: true }); 52 }); 53 container.scrollTo(0, 300); 54 await scrollPromise; 55 56 assert_approx_equals(container.scrollTop, 300, 1); 57 const lastScrollPosition = container.scrollTop; 58 59 // Wait two frames to settle the scroll anchor position. 60 await new Promise(resolve => requestAnimationFrame(resolve)); 61 await new Promise(resolve => requestAnimationFrame(resolve)); 62 63 // Now the "Paragraph 11" should be positioned at the top of the scroll 64 // container (since the half of the textarea has been scrolled out), 65 // it will be an anchor. 66 67 // Insert a new 10px height element before the textarea so that 68 // the text area moves 10px down. 69 const beforeContent = document.createElement("div"); 70 beforeContent.style.height = "10px"; 71 container.insertBefore(beforeContent, textarea); 72 await new Promise(resolve => requestAnimationFrame(resolve)); 73 assert_equals(container.scrollTop, lastScrollPosition + 10, 74 "The scroll position should be adjusted"); 75 76 // Append a new 10px height element at the bottom textarea so that 77 // the text area moves 10px up. 78 const afterContent = document.createElement("div"); 79 afterContent.style.height = "10px"; 80 container.insertBefore(afterContent, textarea); 81 container.appendChild(afterContent); 82 await new Promise(resolve => requestAnimationFrame(resolve)); 83 84 assert_equals(container.scrollTop, lastScrollPosition + 10, 85 "The scroll position should be unchanged"); 86 }, "Scroll anchoring works on textarea"); 87 88 </script>