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