Skip to content

Commit 1d99542

Browse files
Rename OpaqueRange getValueRange() to createValueRange()
The new name makes it explicitly clear that a new range is created each time, as suggested in HTML spec PR discussion: whatwg/html#11741 (comment) Updates the OpaqueRangeCreation mixin and IDL, all implementing classes (TextControlElement, HTMLInputElement), and test files. Low-Coverage-Reason: COVERAGE_UNDERREPORTED Bug: 421421332 Change-Id: Iec9572c470443e85d2a38ecd978bd7c78e8c5a86
1 parent 7a2bcbd commit 1d99542

14 files changed

Lines changed: 92 additions & 92 deletions

dom/ranges/tentative/OpaqueRange-basic.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,29 @@
66
test(() => {
77
document.body.innerHTML = '<textarea>Hello</textarea>';
88
const textarea = document.body.firstElementChild;
9-
const range = textarea.getValueRange(0, 5);
9+
const range = textarea.createValueRange(0, 5);
1010

1111
assert_true(range instanceof OpaqueRange, "|range| should be an instance of OpaqueRange.");
1212
assert_true(range instanceof AbstractRange, "|range| should also be an instance of AbstractRange.");
1313
assert_false(range instanceof Range, "|range| should not be an instance of Range.");
14-
}, "Tests getValueRange returns OpaqueRange that extends AbstractRange.");
14+
}, "Tests createValueRange returns OpaqueRange that extends AbstractRange.");
1515

1616
test(() => {
1717
document.body.innerHTML = '<textarea>Hello</textarea>';
1818
const textarea = document.body.firstElementChild;
19-
const range = textarea.getValueRange(1, 4);
19+
const range = textarea.createValueRange(1, 4);
2020

2121
assert_equals(range.startContainer, null, "startContainer should be null.");
2222
assert_equals(range.endContainer, null, "endContainer should be null.");
2323
assert_equals(range.startOffset, 1);
2424
assert_equals(range.endOffset, 4);
2525
assert_false(range.collapsed);
26-
}, "OpaqueRange handles getValueRange correctly.");
26+
}, "OpaqueRange handles createValueRange correctly.");
2727

2828
test(() => {
2929
document.body.innerHTML = '<input type="text" value="">';
3030
const input = document.body.firstElementChild;
31-
const range = input.getValueRange(0, 0);
31+
const range = input.createValueRange(0, 0);
3232

3333
assert_equals(range.startOffset, 0);
3434
assert_equals(range.endOffset, 0);

dom/ranges/tentative/OpaqueRange-disconnect.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
test(() => {
77
document.body.innerHTML = '<textarea>Hello</textarea>';
88
const textarea = document.body.firstElementChild;
9-
const range = textarea.getValueRange(1, 4);
9+
const range = textarea.createValueRange(1, 4);
1010

1111
range.disconnect();
1212

@@ -23,7 +23,7 @@
2323
test(() => {
2424
document.body.innerHTML = '<textarea>Hello</textarea>';
2525
const textarea = document.body.firstElementChild;
26-
const range = textarea.getValueRange(1, 4);
26+
const range = textarea.createValueRange(1, 4);
2727

2828
range.disconnect();
2929
range.disconnect();
@@ -35,7 +35,7 @@
3535
test(() => {
3636
document.body.innerHTML = '<textarea>Hello</textarea>';
3737
const textarea = document.body.firstElementChild;
38-
const range = textarea.getValueRange(1, 4);
38+
const range = textarea.createValueRange(1, 4);
3939

4040
range.disconnect();
4141
textarea.value = "World!";
@@ -47,8 +47,8 @@
4747
test(() => {
4848
document.body.innerHTML = '<textarea>Hello</textarea>';
4949
const textarea = document.body.firstElementChild;
50-
const range1 = textarea.getValueRange(0, 3);
51-
const range2 = textarea.getValueRange(2, 5);
50+
const range1 = textarea.createValueRange(0, 3);
51+
const range2 = textarea.createValueRange(2, 5);
5252

5353
range1.disconnect();
5454

@@ -63,10 +63,10 @@
6363
test(() => {
6464
document.body.innerHTML = '<textarea>Hello</textarea>';
6565
const textarea = document.body.firstElementChild;
66-
const range = textarea.getValueRange(1, 4);
66+
const range = textarea.createValueRange(1, 4);
6767
range.disconnect();
6868

69-
const newRange = textarea.getValueRange(0, 5);
69+
const newRange = textarea.createValueRange(0, 5);
7070
assert_equals(newRange.startOffset, 0);
7171
assert_equals(newRange.endOffset, 5);
7272
assert_false(newRange.collapsed);

dom/ranges/tentative/OpaqueRange-geometry-basic.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
return element;
2929
}
3030
function setupOpaqueRange(element, startOffset, endOffset){
31-
return element.getValueRange(startOffset, endOffset);
31+
return element.createValueRange(startOffset, endOffset);
3232
}
3333

3434
function assert_rect_inside(inner, outer, msg = '') {
@@ -101,11 +101,11 @@
101101
}, `Full selection bounding box inside element (${controlType})`);
102102

103103
test(() => {
104-
// Backwards offsets are auto-collapsed by getValueRange; caret geometry applies.
104+
// Backwards offsets are auto-collapsed by createValueRange; caret geometry applies.
105105
document.body.innerHTML = controlType === 'input' ? '<input type="text" value="Test">'
106106
: '<textarea>Test</textarea>';
107107
const element = document.body.firstElementChild;
108-
const range = element.getValueRange(3, 1);
108+
const range = element.createValueRange(3, 1);
109109
assert_true(range.collapsed, 'collapsed');
110110
const caretRect = range.getBoundingClientRect();
111111
assert_approx_equals(caretRect.width, 0, 0.05, 'caret width should be 0');

dom/ranges/tentative/OpaqueRange-geometry-complexity-and-visibility.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
test(() => {
4747
const mixed = 'abc \u0645\u0631\u062D\u0628\u0627 def'; // abc مرحبا def.
4848
const element = setupControl(controlType, mixed);
49-
const range = element.getValueRange(0, mixed.length);
49+
const range = element.createValueRange(0, mixed.length);
5050
const boundingRect = rect(range, element, 'Bidirectional text full selection inside: ');
5151
assert_greater_than(boundingRect.width, 0);
5252
assert_greater_than(boundingRect.height, 0);
@@ -59,13 +59,13 @@
5959
const value = '\ud83c\udf20A\ud83c\udf20'; // 🌠A🌠 in UTF-16.
6060
const element = setupControl(controlType, value);
6161

62-
const fullRects = Array.from(element.getValueRange(0, value.length).getClientRects());
62+
const fullRects = Array.from(element.createValueRange(0, value.length).getClientRects());
6363
assert_greater_than_equal(fullRects.length, 1, 'full selection has rects');
6464

6565
const fullWidth = fullRects[0].width;
66-
const wHalf1 = Array.from(element.getValueRange(0, 1).getClientRects())[0]?.width ?? 0;
67-
const wHalf2 = Array.from(element.getValueRange(1, 2).getClientRects())[0]?.width ?? 0;
68-
const wPair = Array.from(element.getValueRange(0, 2).getClientRects())[0]?.width ?? 0;
66+
const wHalf1 = Array.from(element.createValueRange(0, 1).getClientRects())[0]?.width ?? 0;
67+
const wHalf2 = Array.from(element.createValueRange(1, 2).getClientRects())[0]?.width ?? 0;
68+
const wPair = Array.from(element.createValueRange(0, 2).getClientRects())[0]?.width ?? 0;
6969

7070
assert_greater_than(wPair, 0, 'pair width greater than 0');
7171
assert_greater_than_equal(wPair + 0.05, Math.max(wHalf1, wHalf2), 'full pair width greater than or equal to any single code-unit slice');
@@ -79,7 +79,7 @@
7979
: '<textarea id="test" style="visibility:hidden">abc</textarea>';
8080
const hidden = document.getElementById('test');
8181
hidden.focus();
82-
const range = hidden.getValueRange(2, 2);
82+
const range = hidden.createValueRange(2, 2);
8383
const caretRect = rect(range, hidden, 'hidden caret inside: ');
8484
assert_greater_than(caretRect.height, 0, 'caret height greater than 0');
8585
assert_approx_equals(caretRect.width, 0, 0.05, 'caret width should be 0');

dom/ranges/tentative/OpaqueRange-geometry-multiline-and-mutations.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
// Partial selection spanning a hard newline produces non-zero geometry and at least one client rect.
4646
const textareaElement = setupControl('textarea', 'first line\nSECOND LINE\nthird');
4747
const firstLine = 'first line';
48-
const range = textareaElement.getValueRange(firstLine.length - 4, firstLine.length + 5);
48+
const range = textareaElement.createValueRange(firstLine.length - 4, firstLine.length + 5);
4949
const boundingRect = rect(range, textareaElement, 'Bounding box inside: ');
5050
assert_greater_than(boundingRect.width, 0);
5151
assert_greater_than(boundingRect.height, 0);
@@ -55,7 +55,7 @@
5555
test(() => {
5656
// Selection that spans a blank line should still produce non-zero geometry.
5757
const textareaElement = setupControl('textarea', 'line1\n\nline3');
58-
const range = textareaElement.getValueRange(0, textareaElement.value.length);
58+
const range = textareaElement.createValueRange(0, textareaElement.value.length);
5959
const boundingRect = rect(range, textareaElement, 'Bounding box inside: ');
6060
assert_greater_than(boundingRect.height, 0);
6161
assert_greater_than(boundingRect.width, 0);
@@ -66,7 +66,7 @@
6666
const textareaElement = setupControl('textarea', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 abcdefghijklmnopqrstuvwxyz');
6767
textareaElement.style.whiteSpace = 'pre-wrap';
6868
textareaElement.style.width = '160px';
69-
const range = textareaElement.getValueRange(0, textareaElement.value.length);
69+
const range = textareaElement.createValueRange(0, textareaElement.value.length);
7070
const boundingRect = rect(range, textareaElement, 'Bounding box inside: ');
7171
assert_greater_than_equal(range.getClientRects().length, 2, 'soft wrap multiple rects');
7272
}, 'Soft-wrapped long single line (textarea)');
@@ -75,8 +75,8 @@
7575
// Caret before newline and start of next line have non-decreasing y and expected x ordering.
7676
const value = '123456\n789012';
7777
const textareaElement = setupControl('textarea', value);
78-
const caretBeforeNewlineRect = rect(textareaElement.getValueRange(6, 6), textareaElement, 'caret before newline inside: ');
79-
const caretNextLineRect = rect(textareaElement.getValueRange(7, 7), textareaElement, 'caret next line inside: ');
78+
const caretBeforeNewlineRect = rect(textareaElement.createValueRange(6, 6), textareaElement, 'caret before newline inside: ');
79+
const caretNextLineRect = rect(textareaElement.createValueRange(7, 7), textareaElement, 'caret next line inside: ');
8080
// Allow caret before newline to be aligned or slightly (sub-pixel) to the right.
8181
assert_greater_than_equal(caretBeforeNewlineRect.x + 0.5, caretNextLineRect.x, 'caret before newline at or to the right (epsilon) of next line start');
8282
assert_less_than_equal(caretBeforeNewlineRect.y, caretNextLineRect.y, 'next line lower or equal y');
@@ -85,7 +85,7 @@
8585
test(() => {
8686
// Live insert/delete operations adjust selection left/width as expected (grow/shift/shrink).
8787
const inputElement = setupControl('input', 'ABCDE');
88-
const range = inputElement.getValueRange(1, 3);
88+
const range = inputElement.createValueRange(1, 3);
8989

9090
const leftBeforeInsertion = rect(range, inputElement).left;
9191
inputElement.setRangeText('ZZ', 0, 0);
@@ -111,7 +111,7 @@
111111
test(() => {
112112
// Interior deletion shrinks width; insertion before selection shifts selection right in textarea.
113113
const textareaElement = setupControl('textarea', 'ABCDE');
114-
const range = textareaElement.getValueRange(1, 4);
114+
const range = textareaElement.createValueRange(1, 4);
115115
const widthBeforeDeletion = rect(range, textareaElement).width;
116116
textareaElement.setRangeText('', 2, 3);
117117
assert_less_than(rect(range, textareaElement).width, widthBeforeDeletion, 'textarea interior deletion shrinks width');
@@ -124,7 +124,7 @@
124124
test(() => {
125125
// Inserting text inside selection increases its width.
126126
const element = setupControl(controlType, 'ABCDE');
127-
const range = element.getValueRange(1, 4);
127+
const range = element.createValueRange(1, 4);
128128
const widthBeforeInsertion = rect(range, element).width;
129129
element.setRangeText('ZZ', 2, 2);
130130
assert_greater_than(rect(range, element).width, widthBeforeInsertion, 'insertion inside expands width');
@@ -133,7 +133,7 @@
133133
test(() => {
134134
// Deleting full selection collapses to a caret.
135135
const element = setupControl(controlType, 'ABCDE');
136-
const range = element.getValueRange(1, 4);
136+
const range = element.createValueRange(1, 4);
137137
assert_greater_than(rect(range, element).width, 0, 'pre width greater than 0');
138138
element.setRangeText('', 1, 4);
139139
assert_true(range.collapsed, 'collapsed after deletion');
@@ -144,7 +144,7 @@
144144
test(() => {
145145
// Shrink near end clamps range end; subsequent insertion at end does not auto-extend.
146146
const element = setupControl(controlType, 'HelloWorld');
147-
const range = element.getValueRange(0, element.value.length);
147+
const range = element.createValueRange(0, element.value.length);
148148
element.setRangeText('', 7, 10);
149149
const endAfterShrink = range.endOffset;
150150
assert_equals(endAfterShrink, element.value.length, 'end clamped after shrink');
@@ -155,7 +155,7 @@
155155
test(() => {
156156
// Tail deletion clamps end offset while remaining selection geometry stays non-zero.
157157
const element = setupControl(controlType, 'HelloWorld');
158-
const range = element.getValueRange(0, element.value.length);
158+
const range = element.createValueRange(0, element.value.length);
159159
element.setRangeText('', 5, 10);
160160
assert_equals(element.value, 'Hello', 'value shrunk to Hello');
161161
assert_equals(range.endOffset, element.value.length, 'end offset clamped to new value length');
@@ -167,7 +167,7 @@
167167
test(() => {
168168
// Deleting selected text collapses to a caret with zero width.
169169
const inputElement = setupControl('input', 'ABCDE');
170-
const range = inputElement.getValueRange(1, 4);
170+
const range = inputElement.createValueRange(1, 4);
171171
inputElement.setRangeText('', 1, 4);
172172
assert_true(range.collapsed, 'collapsed after deletion');
173173
assert_approx_equals(rect(range, inputElement).width, 0, 0.05, 'width should be 0');

dom/ranges/tentative/OpaqueRange-interactive-basic.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
].forEach(({ name, init, exp }) => {
4444
promise_test(async t => {
4545
const element = setup(control, init.value);
46-
const range = element.getValueRange(init.s, init.e);
46+
const range = element.createValueRange(init.s, init.e);
4747
element.setSelectionRange(init.caret, init.caret);
4848
await typeKeys(element, init.ins);
4949
assert_equals(range.startOffset, exp.s, 'startOffset');
@@ -59,7 +59,7 @@
5959
].forEach(({ name, init, exp }) => {
6060
promise_test(async t => {
6161
const element = setup(control, init.value);
62-
const range = element.getValueRange(init.s, init.e);
62+
const range = element.createValueRange(init.s, init.e);
6363
element.setSelectionRange(init.a, init.b);
6464
await typeKeys(element, init.text);
6565
assert_equals(range.startOffset, exp.s);
@@ -83,7 +83,7 @@
8383
].forEach(({ name, init, exp }) => {
8484
promise_test(async t => {
8585
const element = setup(control, init.value);
86-
const range = element.getValueRange(init.s, init.e);
86+
const range = element.createValueRange(init.s, init.e);
8787
element.setSelectionRange(init.caret, init.caret);
8888
await typeKeys(element, init.key);
8989
assert_equals(element.value, exp.value);

dom/ranges/tentative/OpaqueRange-interactive-overlap-and-selection.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
].forEach(tc => {
3737
promise_test(async t => {
3838
const element = setup(control, tc.init.value);
39-
const range = element.getValueRange(tc.init.rangeStart, tc.init.rangeEnd);
39+
const range = element.createValueRange(tc.init.rangeStart, tc.init.rangeEnd);
4040
element.setSelectionRange(tc.init.selA, tc.init.selB);
4141
if (tc.init.key) {
4242
await typeKeys(element, tc.init.key);
@@ -59,7 +59,7 @@
5959
].forEach(tc => {
6060
promise_test(async t => {
6161
const element = setup(control, tc.init.value);
62-
const range = element.getValueRange(tc.init.rangeStart, tc.init.rangeEnd);
62+
const range = element.createValueRange(tc.init.rangeStart, tc.init.rangeEnd);
6363
element.setSelectionRange(tc.init.selA, tc.init.selB);
6464
await typeKeys(element, tc.init.key);
6565
assert_equals(element.value, tc.expect.value, 'post-delete value');
@@ -73,7 +73,7 @@
7373

7474
promise_test(async t => {
7575
const element = setup(control, 'ABCDE');
76-
const range = element.getValueRange(2, 4);
76+
const range = element.createValueRange(2, 4);
7777
element.setSelectionRange(1, 1);
7878
await typeKeys(element, KEY_DELETE);
7979
assert_equals(element.value, 'ACDE');

dom/ranges/tentative/OpaqueRange-offset.html

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,32 +18,32 @@
1818
const element = setupControl(control, "A");
1919

2020
[[0, 0, true], [0, 1, false], [1, 1, true]].forEach(([start, end, collapsed]) => {
21-
const range = element.getValueRange(start, end);
21+
const range = element.createValueRange(start, end);
2222
assert_equals(range.startOffset, start, `[${start}, ${end}] startOffset`);
2323
assert_equals(range.endOffset, end, `[${start}, ${end}] endOffset`);
2424
assert_equals(range.collapsed, collapsed, `[${start}, ${end}] collapsed`);
2525
});
26-
}, `getValueRange with single character in ${control}.`);
26+
}, `createValueRange with single character in ${control}.`);
2727

2828
test(() => {
2929
const element = setupControl(control, "");
30-
const range = element.getValueRange(0, 0);
30+
const range = element.createValueRange(0, 0);
3131

3232
assert_equals(range.startOffset, 0);
3333
assert_equals(range.endOffset, 0);
3434
assert_true(range.collapsed);
35-
}, `getValueRange with empty control in ${control}.`);
35+
}, `createValueRange with empty control in ${control}.`);
3636

3737
test(() => {
3838
const element = setupControl(control, "Hello World");
3939

4040
[[0, 5, false], [5, 6, false], [6, 11, false], [11, 11, true]].forEach(([start, end, collapsed]) => {
41-
const range = element.getValueRange(start, end);
41+
const range = element.createValueRange(start, end);
4242
assert_equals(range.startOffset, start, `[${start}, ${end}] startOffset`);
4343
assert_equals(range.endOffset, end, `[${start}, ${end}] endOffset`);
4444
assert_equals(range.collapsed, collapsed, `[${start}, ${end}] collapsed`);
4545
});
46-
}, `getValueRange boundary positions in ${control}.`);
46+
}, `createValueRange boundary positions in ${control}.`);
4747

4848
test(() => {
4949
const testCases = [
@@ -67,13 +67,13 @@
6767
testCases.forEach(testCase => {
6868
const element = setupControl(control, testCase.text);
6969
testCase.ranges.forEach(([start, end, collapsed]) => {
70-
const range = element.getValueRange(start, end);
70+
const range = element.createValueRange(start, end);
7171
assert_equals(range.startOffset, start, `[${start}, ${end}] startOffset`);
7272
assert_equals(range.endOffset, end, `[${start}, ${end}] endOffset`);
7373
assert_equals(range.collapsed, collapsed, `[${start}, ${end}] collapsed`);
7474
});
7575
});
76-
}, `getValueRange with Unicode characters in ${control}.`);
76+
}, `createValueRange with Unicode characters in ${control}.`);
7777
});
7878

7979

@@ -83,11 +83,11 @@
8383
const textarea = document.body.firstElementChild;
8484

8585
// Whitespace is preserved in textarea.value.
86-
const range = textarea.getValueRange(0, textarea.value.length);
86+
const range = textarea.createValueRange(0, textarea.value.length);
8787
assert_equals(range.startOffset, 0);
8888
assert_equals(range.endOffset, textarea.value.length);
8989
assert_false(range.collapsed);
90-
}, "getValueRange on textarea with whitespace in light DOM.");
90+
}, "createValueRange on textarea with whitespace in light DOM.");
9191

9292
test(() => {
9393
document.body.innerHTML = '<textarea>Hello World</textarea>';
@@ -105,12 +105,12 @@
105105
textarea.append(document.createTextNode("Some rendered content"));
106106
textarea.append(document.createTextNode("Some more rendered content"));
107107

108-
// getValueRange uses element.value, which includes text nodes but ignores element children.
109-
const range = textarea.getValueRange(0, textarea.value.length);
108+
// createValueRange uses element.value, which includes text nodes but ignores element children.
109+
const range = textarea.createValueRange(0, textarea.value.length);
110110
assert_equals(range.startOffset, 0);
111111
assert_equals(range.endOffset, textarea.value.length);
112112
assert_false(range.collapsed);
113-
}, "getValueRange works correctly with weirdly formed light DOM structure.");
113+
}, "createValueRange works correctly with weirdly formed light DOM structure.");
114114

115115
test(() => {
116116
// Test input with child nodes (which shouldn't exist but might)
@@ -121,11 +121,11 @@
121121
input.appendChild(document.createTextNode("Ignored"));
122122
input.appendChild(document.createElement("span")).textContent = "AlsoIgnored";
123123

124-
const range = input.getValueRange(0, input.value.length);
124+
const range = input.createValueRange(0, input.value.length);
125125

126126
// Input.value is unaffected by child nodes.
127127
assert_equals(range.startOffset, 0);
128128
assert_equals(range.endOffset, 8); // "Original".length
129129
assert_false(range.collapsed);
130-
}, "getValueRange ignores malformed input child nodes.");
130+
}, "createValueRange ignores malformed input child nodes.");
131131
</script>

0 commit comments

Comments
 (0)