Skip to content

Commit

Permalink
LibWeb: Implement input/textarea selection APIs
Browse files Browse the repository at this point in the history
For both types of elements, `.selectionStart`, `.selectionEnd`,
`.selectionDirection`, `.setSelectionRange()`, `.select()` and the
`select` event are now implemented.
  • Loading branch information
gmta committed Aug 26, 2024
1 parent 41d4251 commit d321bda
Show file tree
Hide file tree
Showing 12 changed files with 430 additions and 139 deletions.
24 changes: 24 additions & 0 deletions Tests/LibWeb/Text/expected/DOM/FormAssociatedElement-selection.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
Well hello friends some
text text-input selectionStart: 0
text-input selectionEnd: 0
text-input selectionDirection: none
date-input selectionStart: null
date-input selectionEnd: null
date-input selectionDirection: none
textarea selectionStart: 0
textarea selectionEnd: 0
textarea selectionDirection: none
text-input selectionStart: 18
text-input selectionEnd: 18
text-input selectionDirection: none
date input setting selectionStart error: InvalidStateError: setSelectionStart does not apply to this input type
text-input selectionStart: 0
text-input selectionEnd: 18
text-input selectionDirection: none
text-input selectionStart: 2
text-input selectionEnd: 4
text-input selectionDirection: forward
textarea selectionStart: 0
textarea selectionEnd: 9
textarea selectionDirection: none
select event fired: 2 4

This file was deleted.

40 changes: 40 additions & 0 deletions Tests/LibWeb/Text/input/DOM/FormAssociatedElement-selection.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<input type="text" id="text-input">
<input type="date" id="date-input">
<textarea id="textarea">some
text</textarea>
<script src="../include.js"></script>
<script>
test(() => {
let textInput = document.getElementById('text-input');
let dateInput = document.getElementById('date-input');
let textarea = document.getElementById('textarea');

const dumpSelection = (element) => {
println(`${element.id} selectionStart: ${element.selectionStart}`);
println(`${element.id} selectionEnd: ${element.selectionEnd}`);
println(`${element.id} selectionDirection: ${element.selectionDirection}`);
};

dumpSelection(textInput);
dumpSelection(dateInput);
dumpSelection(textarea);

textInput.value = 'Well hello friends';
dumpSelection(textInput);

try {
dateInput.selectionStart = 0;
} catch (e) {
println(`date input setting selectionStart error: ${e}`);
}

textInput.addEventListener('select', e => println(`select event fired: ${e.target.selectionStart} ${e.target.selectionEnd}`))
textInput.select();
dumpSelection(textInput);
textInput.setSelectionRange(2, 4, 'forward');
dumpSelection(textInput);

textarea.select();
dumpSelection(textarea);
});
</script>
24 changes: 0 additions & 24 deletions Tests/LibWeb/Text/input/input-selection-start-selection-end.html

This file was deleted.

Loading

0 comments on commit d321bda

Please sign in to comment.