editable-scroll-anchor.html (2428B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Scroll anchoring is suppressed during editing in editable elements</title> 4 <link rel="author" href="mailto:zhoupeng.1996@bytedance.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring-1/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/dom/events/scrolling/scroll_support.js"></script> 9 <script src="/css/css-scroll-snap/support/common.js"></script> 10 <style> 11 textarea, 12 div { 13 font-size: 14px; 14 width: 685px; 15 height: 716px; 16 } 17 </style> 18 <body> 19 <script> 20 const baseText = 'Scroll Anchor Test of the editable element.'; 21 const text = Array(500).fill(baseText).join(' '); 22 const caretOffset = 426; 23 const targetScrollTop = 30; 24 25 // Perform an editing operation while scroll anchoring is suppressed. 26 async function insertLineBreak(element) { 27 let scrollEndPromise = waitForScrollEndOrTimeout(element, 1000); 28 element.scrollTop = targetScrollTop; 29 await scrollEndPromise; 30 assert_equals(element.scrollTop, targetScrollTop); 31 scrollEndPromise = waitForScrollEndOrTimeout(element, 1000); 32 document.execCommand('insertLineBreak'); 33 await scrollEndPromise; 34 assert_equals(element.scrollTop, targetScrollTop); 35 } 36 37 promise_test(async t => { 38 const textarea = document.createElement('textarea'); 39 textarea.value = text; 40 document.body.appendChild(textarea); 41 42 textarea.focus(); 43 textarea.setSelectionRange(caretOffset, caretOffset); 44 assert_equals(textarea.selectionStart, caretOffset); 45 assert_equals(textarea.selectionEnd, caretOffset); 46 47 await insertLineBreak(textarea); 48 textarea.remove(); 49 }, 'Scroll anchoring is suppressed during editing in a textarea'); 50 51 promise_test(async t => { 52 const selection = window.getSelection(); 53 const editable = document.createElement('div'); 54 editable.contentEditable = true; 55 editable.innerText = text; 56 document.body.appendChild(editable); 57 58 editable.focus(); 59 const range = document.createRange(); 60 const textNode = editable.firstChild; 61 assert_equals(textNode.nodeType, Node.TEXT_NODE); 62 range.setStart(textNode, caretOffset); 63 range.collapse(true); 64 selection.removeAllRanges(); 65 selection.addRange(range); 66 assert_equals(selection.anchorOffset, caretOffset); 67 68 await insertLineBreak(document.documentElement); 69 editable.remove(); 70 }, 'Scroll anchoring is suppressed during editing in a contenteditable element'); 71 </script> 72 </body>