contenteditable-near-cursor.tentative.html (1586B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 7 body { height: 10000px; } 8 .content { height: 1000px; background: green; } 9 10 </style> 11 12 13 <div id="editable" contenteditable> 14 <div id=one class=content>test</div> 15 <div id=two class=content>test</div> 16 <div id=three class=content>test</div> 17 <div id=four class=content>test</div> 18 <div id=five class=content>test</div> 19 <div id=six class=content>test</div> 20 </div> 21 22 <script> 23 24 async_test((t) => { 25 editable.focus(); 26 27 let range = document.createRange(); 28 range.setStart(three, 0); 29 range.setEnd(three, 1); 30 getSelection().removeAllRanges(); 31 getSelection().addRange(range); 32 33 document.scrollingElement.scrollBy(0, 2200); 34 35 t.step(() => assert_equals(document.scrollingElement.scrollTop, 2200, "document prior to content added")); 36 37 requestAnimationFrame(() => { 38 let beforeContent = document.createElement("div"); 39 beforeContent.classList.add("content"); 40 41 editable.insertBefore(beforeContent, one); 42 43 t.step(() => assert_equals(document.scrollingElement.scrollTop, 3200, "document content added before")); 44 45 let afterContent = document.createElement("div"); 46 afterContent.classList.add("content"); 47 48 editable.appendChild(afterContent); 49 50 t.step(() => assert_equals(document.scrollingElement.scrollTop, 3200, "document content added after")); 51 t.done(); 52 }); 53 }, "Ensure scroll is adjusted to keep element next to the cursor stable"); 54 55 </script>