getBoundingClientRect-newline.html (1331B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-range-getboundingclientrect"> 3 <link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com"> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 div[contenteditable] { 9 white-space: pre; 10 font: 10px/1 Ahem; 11 width: 10ch; 12 } 13 </style> 14 <body> 15 <div contenteditable></div> 16 <script> 17 function getBoundingClientRect(node, offset) { 18 const range = document.createRange(); 19 range.setStart(node, offset); 20 range.setEnd(node, offset); 21 const rect = range.getBoundingClientRect(); 22 return rect; 23 } 24 25 test(function() { 26 const editable = document.querySelector('div[contenteditable]'); 27 editable.innerHTML = '123456\n789012'; 28 const rect0 = getBoundingClientRect(editable.firstChild, 0); 29 const rect6 = getBoundingClientRect(editable.firstChild, 6); 30 const rect7 = getBoundingClientRect(editable.firstChild, 7); 31 assert_equals(rect0.x, rect7.x); 32 assert_greater_than(rect6.x, rect7.x); 33 assert_equals(rect0.y, rect6.y); 34 assert_less_than(rect6.y, rect7.y); 35 }, 'Range.getBoundingClientRect() should return the first position of the next line when the collapsed range is a newline character'); 36 </script> 37 </body>