caretRangeFromPoint.tentative.html (4818B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <title>document.caretRangeFromPoint()</title> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/pull/12362" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 div { 9 display: inline-block; 10 } 11 canvas { 12 display: block; 13 background: green; 14 }; 15 </style> 16 <div id="div">abc</div> 17 <div id="shadow"> 18 <template shadowrootmode="open"> 19 <div>def</div> 20 </template> 21 </div> 22 23 <canvas id="canvas" width="500" height="500"></canvas> 24 25 <script> 26 test(() => { 27 let range = document.caretRangeFromPoint(); 28 assert_true(range instanceof Range); 29 assert_equals(range.startOffset, 0); 30 assert_equals(range.endOffset, 0); 31 }, "document.caretRangeFromPoint() (no supplied coordinates) returns Range with 0 0 values"); 32 33 test(() => { 34 const doc = document.implementation.createHTMLDocument(""); 35 let range = doc.caretRangeFromPoint(0, 0); 36 assert_equals(range, null); 37 }, "document.caretRangeFromPoint() should return null for a document with no viewport"); 38 39 test(() => { 40 assert_equals(document.caretRangeFromPoint(-5, 5), null); 41 assert_equals(document.caretRangeFromPoint(5, -5), null); 42 assert_equals( 43 document.caretRangeFromPoint(document.documentElement.clientWidth * 2, 5), 44 null, 45 ); 46 assert_equals( 47 document.caretRangeFromPoint( 48 5, 49 document.documentElement.clientHeight * 2, 50 ), 51 null, 52 ); 53 }, "document.caretRangeFromPoint() should return null if given coordinates outside of the viewport"); 54 55 test(() => { 56 const rect = div.getBoundingClientRect(); 57 const characterWidth = rect.width / div.textContent.length; 58 const characterIndex = 2; 59 const x = rect.left + characterWidth * characterIndex; 60 const y = rect.top + rect.height / 2; 61 const range = document.caretRangeFromPoint(x, y); 62 assert_true(range instanceof Range); 63 assert_equals(range.startContainer, div.childNodes[0]); 64 assert_equals(range.endContainer, div.childNodes[0]); 65 assert_equals(range.startOffset, characterIndex); 66 assert_equals(range.endOffset, characterIndex); 67 assert_true(range.collapsed); 68 range.setEnd(div.childNodes[0], characterIndex + 1); 69 assert_false(range.collapsed); 70 assert_equals(range.toString(), "c"); 71 range.setStart(div.childNodes[0], characterIndex - 1); 72 assert_false(range.collapsed); 73 assert_equals(range.toString(), "bc"); 74 range.setStart(div.childNodes[0], 0); 75 assert_false(range.collapsed); 76 assert_equals(range.toString(), "abc"); 77 }, "document.caretRangeFromPoint() should return a Range at the specified location"); 78 79 test(() => { 80 const rect = div.getBoundingClientRect(); 81 const characterWidth = rect.width / div.textContent.length; 82 const characterIndex = 2; 83 const x = rect.left + characterWidth * characterIndex; 84 const y = rect.top + rect.height / 2; 85 const range = document.caretRangeFromPoint(x, y); 86 let rangeRect = range.getBoundingClientRect(); 87 assert_approx_equals(rangeRect.x, x, 1); 88 assert_approx_equals(rangeRect.y, rect.height / 2, 3); 89 assert_approx_equals(rangeRect.height, rect.height, 1); 90 assert_approx_equals(rangeRect.width, 0, 0.02, "Caret range should be collapsed"); 91 }, "document.caretRangeFromPoint() should return a client rect close to the given coords"); 92 93 test(() => { 94 const shadowDiv = shadow.shadowRoot.querySelector("div"); 95 const rect = shadow.getBoundingClientRect(); 96 const characterWidth = rect.width / shadow.textContent.length; 97 const characterIndex = 2; 98 const x = rect.left + characterWidth * characterIndex; 99 const y = rect.top + rect.height / 2; 100 const range = document.caretRangeFromPoint(x, y); 101 const point = document.caretPositionFromPoint(x, y); 102 assert_true(range instanceof Range); 103 assert_equals(range.startContainer, point.offsetNode); 104 assert_equals(range.endContainer, point.offsetNode); 105 assert_equals(range.startOffset, characterIndex); 106 assert_equals(range.endOffset, characterIndex); 107 assert_true(range.collapsed); 108 }, "document.caretRangeFromPoint() on a shadow should return a Range pointing at the same node as caretPositionFromPoint"); 109 110 test(() => { 111 const rect = canvas.getBoundingClientRect(); 112 const x = rect.left + rect.width / 2; 113 const y = rect.top + rect.height / 2; 114 const range = document.caretRangeFromPoint(x, y); 115 assert_true(range instanceof Range); 116 assert_equals(range.startContainer, canvas); 117 assert_equals(range.endContainer, canvas); 118 assert_equals(range.startOffset, 0); 119 assert_equals(range.endOffset, 0); 120 assert_true(range.collapsed); 121 }, "document.caretRangeFromPoint() on a textarea should return a Range pointing at canvas"); 122 </script>