Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions dom/ranges/tentative/OpaqueRange-basic.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,29 @@
test(() => {
document.body.innerHTML = '<textarea>Hello</textarea>';
const textarea = document.body.firstElementChild;
const range = textarea.getValueRange(0, 5);
const range = textarea.createValueRange(0, 5);

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

test(() => {
document.body.innerHTML = '<textarea>Hello</textarea>';
const textarea = document.body.firstElementChild;
const range = textarea.getValueRange(1, 4);
const range = textarea.createValueRange(1, 4);

assert_equals(range.startContainer, null, "startContainer should be null.");
assert_equals(range.endContainer, null, "endContainer should be null.");
assert_equals(range.startOffset, 1);
assert_equals(range.endOffset, 4);
assert_false(range.collapsed);
}, "OpaqueRange handles getValueRange correctly.");
}, "OpaqueRange handles createValueRange correctly.");

test(() => {
document.body.innerHTML = '<input type="text" value="">';
const input = document.body.firstElementChild;
const range = input.getValueRange(0, 0);
const range = input.createValueRange(0, 0);

assert_equals(range.startOffset, 0);
assert_equals(range.endOffset, 0);
Expand Down
14 changes: 7 additions & 7 deletions dom/ranges/tentative/OpaqueRange-disconnect.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
test(() => {
document.body.innerHTML = '<textarea>Hello</textarea>';
const textarea = document.body.firstElementChild;
const range = textarea.getValueRange(1, 4);
const range = textarea.createValueRange(1, 4);

range.disconnect();

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

range.disconnect();
range.disconnect();
Expand All @@ -35,7 +35,7 @@
test(() => {
document.body.innerHTML = '<textarea>Hello</textarea>';
const textarea = document.body.firstElementChild;
const range = textarea.getValueRange(1, 4);
const range = textarea.createValueRange(1, 4);

range.disconnect();
textarea.value = "World!";
Expand All @@ -47,8 +47,8 @@
test(() => {
document.body.innerHTML = '<textarea>Hello</textarea>';
const textarea = document.body.firstElementChild;
const range1 = textarea.getValueRange(0, 3);
const range2 = textarea.getValueRange(2, 5);
const range1 = textarea.createValueRange(0, 3);
const range2 = textarea.createValueRange(2, 5);

range1.disconnect();

Expand All @@ -63,10 +63,10 @@
test(() => {
document.body.innerHTML = '<textarea>Hello</textarea>';
const textarea = document.body.firstElementChild;
const range = textarea.getValueRange(1, 4);
const range = textarea.createValueRange(1, 4);
range.disconnect();

const newRange = textarea.getValueRange(0, 5);
const newRange = textarea.createValueRange(0, 5);
assert_equals(newRange.startOffset, 0);
assert_equals(newRange.endOffset, 5);
assert_false(newRange.collapsed);
Expand Down
6 changes: 3 additions & 3 deletions dom/ranges/tentative/OpaqueRange-geometry-basic.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
return element;
}
function setupOpaqueRange(element, startOffset, endOffset){
return element.getValueRange(startOffset, endOffset);
return element.createValueRange(startOffset, endOffset);
}

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

test(() => {
// Backwards offsets are auto-collapsed by getValueRange; caret geometry applies.
// Backwards offsets are auto-collapsed by createValueRange; caret geometry applies.
document.body.innerHTML = controlType === 'input' ? '<input type="text" value="Test">'
: '<textarea>Test</textarea>';
const element = document.body.firstElementChild;
const range = element.getValueRange(3, 1);
const range = element.createValueRange(3, 1);
assert_true(range.collapsed, 'collapsed');
const caretRect = range.getBoundingClientRect();
assert_approx_equals(caretRect.width, 0, 0.05, 'caret width should be 0');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
test(() => {
const mixed = 'abc \u0645\u0631\u062D\u0628\u0627 def'; // abc مرحبا def.
const element = setupControl(controlType, mixed);
const range = element.getValueRange(0, mixed.length);
const range = element.createValueRange(0, mixed.length);
const boundingRect = rect(range, element, 'Bidirectional text full selection inside: ');
assert_greater_than(boundingRect.width, 0);
assert_greater_than(boundingRect.height, 0);
Expand All @@ -59,13 +59,13 @@
const value = '\ud83c\udf20A\ud83c\udf20'; // 🌠A🌠 in UTF-16.
const element = setupControl(controlType, value);

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

const fullWidth = fullRects[0].width;
const wHalf1 = Array.from(element.getValueRange(0, 1).getClientRects())[0]?.width ?? 0;
const wHalf2 = Array.from(element.getValueRange(1, 2).getClientRects())[0]?.width ?? 0;
const wPair = Array.from(element.getValueRange(0, 2).getClientRects())[0]?.width ?? 0;
const wHalf1 = Array.from(element.createValueRange(0, 1).getClientRects())[0]?.width ?? 0;
const wHalf2 = Array.from(element.createValueRange(1, 2).getClientRects())[0]?.width ?? 0;
const wPair = Array.from(element.createValueRange(0, 2).getClientRects())[0]?.width ?? 0;

assert_greater_than(wPair, 0, 'pair width greater than 0');
assert_greater_than_equal(wPair + 0.05, Math.max(wHalf1, wHalf2), 'full pair width greater than or equal to any single code-unit slice');
Expand All @@ -79,7 +79,7 @@
: '<textarea id="test" style="visibility:hidden">abc</textarea>';
const hidden = document.getElementById('test');
hidden.focus();
const range = hidden.getValueRange(2, 2);
const range = hidden.createValueRange(2, 2);
const caretRect = rect(range, hidden, 'hidden caret inside: ');
assert_greater_than(caretRect.height, 0, 'caret height greater than 0');
assert_approx_equals(caretRect.width, 0, 0.05, 'caret width should be 0');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
// Partial selection spanning a hard newline produces non-zero geometry and at least one client rect.
const textareaElement = setupControl('textarea', 'first line\nSECOND LINE\nthird');
const firstLine = 'first line';
const range = textareaElement.getValueRange(firstLine.length - 4, firstLine.length + 5);
const range = textareaElement.createValueRange(firstLine.length - 4, firstLine.length + 5);
const boundingRect = rect(range, textareaElement, 'Bounding box inside: ');
assert_greater_than(boundingRect.width, 0);
assert_greater_than(boundingRect.height, 0);
Expand All @@ -55,7 +55,7 @@
test(() => {
// Selection that spans a blank line should still produce non-zero geometry.
const textareaElement = setupControl('textarea', 'line1\n\nline3');
const range = textareaElement.getValueRange(0, textareaElement.value.length);
const range = textareaElement.createValueRange(0, textareaElement.value.length);
const boundingRect = rect(range, textareaElement, 'Bounding box inside: ');
assert_greater_than(boundingRect.height, 0);
assert_greater_than(boundingRect.width, 0);
Expand All @@ -66,7 +66,7 @@
const textareaElement = setupControl('textarea', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 abcdefghijklmnopqrstuvwxyz');
textareaElement.style.whiteSpace = 'pre-wrap';
textareaElement.style.width = '160px';
const range = textareaElement.getValueRange(0, textareaElement.value.length);
const range = textareaElement.createValueRange(0, textareaElement.value.length);
const boundingRect = rect(range, textareaElement, 'Bounding box inside: ');
assert_greater_than_equal(range.getClientRects().length, 2, 'soft wrap multiple rects');
}, 'Soft-wrapped long single line (textarea)');
Expand All @@ -75,8 +75,8 @@
// Caret before newline and start of next line have non-decreasing y and expected x ordering.
const value = '123456\n789012';
const textareaElement = setupControl('textarea', value);
const caretBeforeNewlineRect = rect(textareaElement.getValueRange(6, 6), textareaElement, 'caret before newline inside: ');
const caretNextLineRect = rect(textareaElement.getValueRange(7, 7), textareaElement, 'caret next line inside: ');
const caretBeforeNewlineRect = rect(textareaElement.createValueRange(6, 6), textareaElement, 'caret before newline inside: ');
const caretNextLineRect = rect(textareaElement.createValueRange(7, 7), textareaElement, 'caret next line inside: ');
// Allow caret before newline to be aligned or slightly (sub-pixel) to the right.
assert_greater_than_equal(caretBeforeNewlineRect.x + 0.5, caretNextLineRect.x, 'caret before newline at or to the right (epsilon) of next line start');
assert_less_than_equal(caretBeforeNewlineRect.y, caretNextLineRect.y, 'next line lower or equal y');
Expand All @@ -85,7 +85,7 @@
test(() => {
// Live insert/delete operations adjust selection left/width as expected (grow/shift/shrink).
const inputElement = setupControl('input', 'ABCDE');
const range = inputElement.getValueRange(1, 3);
const range = inputElement.createValueRange(1, 3);

const leftBeforeInsertion = rect(range, inputElement).left;
inputElement.setRangeText('ZZ', 0, 0);
Expand All @@ -111,7 +111,7 @@
test(() => {
// Interior deletion shrinks width; insertion before selection shifts selection right in textarea.
const textareaElement = setupControl('textarea', 'ABCDE');
const range = textareaElement.getValueRange(1, 4);
const range = textareaElement.createValueRange(1, 4);
const widthBeforeDeletion = rect(range, textareaElement).width;
textareaElement.setRangeText('', 2, 3);
assert_less_than(rect(range, textareaElement).width, widthBeforeDeletion, 'textarea interior deletion shrinks width');
Expand All @@ -124,7 +124,7 @@
test(() => {
// Inserting text inside selection increases its width.
const element = setupControl(controlType, 'ABCDE');
const range = element.getValueRange(1, 4);
const range = element.createValueRange(1, 4);
const widthBeforeInsertion = rect(range, element).width;
element.setRangeText('ZZ', 2, 2);
assert_greater_than(rect(range, element).width, widthBeforeInsertion, 'insertion inside expands width');
Expand All @@ -133,7 +133,7 @@
test(() => {
// Deleting full selection collapses to a caret.
const element = setupControl(controlType, 'ABCDE');
const range = element.getValueRange(1, 4);
const range = element.createValueRange(1, 4);
assert_greater_than(rect(range, element).width, 0, 'pre width greater than 0');
element.setRangeText('', 1, 4);
assert_true(range.collapsed, 'collapsed after deletion');
Expand All @@ -144,7 +144,7 @@
test(() => {
// Shrink near end clamps range end; subsequent insertion at end does not auto-extend.
const element = setupControl(controlType, 'HelloWorld');
const range = element.getValueRange(0, element.value.length);
const range = element.createValueRange(0, element.value.length);
element.setRangeText('', 7, 10);
const endAfterShrink = range.endOffset;
assert_equals(endAfterShrink, element.value.length, 'end clamped after shrink');
Expand All @@ -155,7 +155,7 @@
test(() => {
// Tail deletion clamps end offset while remaining selection geometry stays non-zero.
const element = setupControl(controlType, 'HelloWorld');
const range = element.getValueRange(0, element.value.length);
const range = element.createValueRange(0, element.value.length);
element.setRangeText('', 5, 10);
assert_equals(element.value, 'Hello', 'value shrunk to Hello');
assert_equals(range.endOffset, element.value.length, 'end offset clamped to new value length');
Expand All @@ -167,7 +167,7 @@
test(() => {
// Deleting selected text collapses to a caret with zero width.
const inputElement = setupControl('input', 'ABCDE');
const range = inputElement.getValueRange(1, 4);
const range = inputElement.createValueRange(1, 4);
inputElement.setRangeText('', 1, 4);
assert_true(range.collapsed, 'collapsed after deletion');
assert_approx_equals(rect(range, inputElement).width, 0, 0.05, 'width should be 0');
Expand Down
6 changes: 3 additions & 3 deletions dom/ranges/tentative/OpaqueRange-interactive-basic.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
].forEach(({ name, init, exp }) => {
promise_test(async t => {
const element = setup(control, init.value);
const range = element.getValueRange(init.s, init.e);
const range = element.createValueRange(init.s, init.e);
element.setSelectionRange(init.caret, init.caret);
await typeKeys(element, init.ins);
assert_equals(range.startOffset, exp.s, 'startOffset');
Expand All @@ -59,7 +59,7 @@
].forEach(({ name, init, exp }) => {
promise_test(async t => {
const element = setup(control, init.value);
const range = element.getValueRange(init.s, init.e);
const range = element.createValueRange(init.s, init.e);
element.setSelectionRange(init.a, init.b);
await typeKeys(element, init.text);
assert_equals(range.startOffset, exp.s);
Expand All @@ -83,7 +83,7 @@
].forEach(({ name, init, exp }) => {
promise_test(async t => {
const element = setup(control, init.value);
const range = element.getValueRange(init.s, init.e);
const range = element.createValueRange(init.s, init.e);
element.setSelectionRange(init.caret, init.caret);
await typeKeys(element, init.key);
assert_equals(element.value, exp.value);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
].forEach(tc => {
promise_test(async t => {
const element = setup(control, tc.init.value);
const range = element.getValueRange(tc.init.rangeStart, tc.init.rangeEnd);
const range = element.createValueRange(tc.init.rangeStart, tc.init.rangeEnd);
element.setSelectionRange(tc.init.selA, tc.init.selB);
if (tc.init.key) {
await typeKeys(element, tc.init.key);
Expand All @@ -59,7 +59,7 @@
].forEach(tc => {
promise_test(async t => {
const element = setup(control, tc.init.value);
const range = element.getValueRange(tc.init.rangeStart, tc.init.rangeEnd);
const range = element.createValueRange(tc.init.rangeStart, tc.init.rangeEnd);
element.setSelectionRange(tc.init.selA, tc.init.selB);
await typeKeys(element, tc.init.key);
assert_equals(element.value, tc.expect.value, 'post-delete value');
Expand All @@ -73,7 +73,7 @@

promise_test(async t => {
const element = setup(control, 'ABCDE');
const range = element.getValueRange(2, 4);
const range = element.createValueRange(2, 4);
element.setSelectionRange(1, 1);
await typeKeys(element, KEY_DELETE);
assert_equals(element.value, 'ACDE');
Expand Down
30 changes: 15 additions & 15 deletions dom/ranges/tentative/OpaqueRange-offset.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,32 +18,32 @@
const element = setupControl(control, "A");

[[0, 0, true], [0, 1, false], [1, 1, true]].forEach(([start, end, collapsed]) => {
const range = element.getValueRange(start, end);
const range = element.createValueRange(start, end);
assert_equals(range.startOffset, start, `[${start}, ${end}] startOffset`);
assert_equals(range.endOffset, end, `[${start}, ${end}] endOffset`);
assert_equals(range.collapsed, collapsed, `[${start}, ${end}] collapsed`);
});
}, `getValueRange with single character in ${control}.`);
}, `createValueRange with single character in ${control}.`);

test(() => {
const element = setupControl(control, "");
const range = element.getValueRange(0, 0);
const range = element.createValueRange(0, 0);

assert_equals(range.startOffset, 0);
assert_equals(range.endOffset, 0);
assert_true(range.collapsed);
}, `getValueRange with empty control in ${control}.`);
}, `createValueRange with empty control in ${control}.`);

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

[[0, 5, false], [5, 6, false], [6, 11, false], [11, 11, true]].forEach(([start, end, collapsed]) => {
const range = element.getValueRange(start, end);
const range = element.createValueRange(start, end);
assert_equals(range.startOffset, start, `[${start}, ${end}] startOffset`);
assert_equals(range.endOffset, end, `[${start}, ${end}] endOffset`);
assert_equals(range.collapsed, collapsed, `[${start}, ${end}] collapsed`);
});
}, `getValueRange boundary positions in ${control}.`);
}, `createValueRange boundary positions in ${control}.`);

test(() => {
const testCases = [
Expand All @@ -67,13 +67,13 @@
testCases.forEach(testCase => {
const element = setupControl(control, testCase.text);
testCase.ranges.forEach(([start, end, collapsed]) => {
const range = element.getValueRange(start, end);
const range = element.createValueRange(start, end);
assert_equals(range.startOffset, start, `[${start}, ${end}] startOffset`);
assert_equals(range.endOffset, end, `[${start}, ${end}] endOffset`);
assert_equals(range.collapsed, collapsed, `[${start}, ${end}] collapsed`);
});
});
}, `getValueRange with Unicode characters in ${control}.`);
}, `createValueRange with Unicode characters in ${control}.`);
});


Expand All @@ -83,11 +83,11 @@
const textarea = document.body.firstElementChild;

// Whitespace is preserved in textarea.value.
const range = textarea.getValueRange(0, textarea.value.length);
const range = textarea.createValueRange(0, textarea.value.length);
assert_equals(range.startOffset, 0);
assert_equals(range.endOffset, textarea.value.length);
assert_false(range.collapsed);
}, "getValueRange on textarea with whitespace in light DOM.");
}, "createValueRange on textarea with whitespace in light DOM.");

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

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

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

const range = input.getValueRange(0, input.value.length);
const range = input.createValueRange(0, input.value.length);

// Input.value is unaffected by child nodes.
assert_equals(range.startOffset, 0);
assert_equals(range.endOffset, 8); // "Original".length
assert_false(range.collapsed);
}, "getValueRange ignores malformed input child nodes.");
}, "createValueRange ignores malformed input child nodes.");
</script>
Loading