textarea-selection.html | Explore in Territory

<!DOCTYPE html>
<html>
  <head>
    <script src="../resources/js-test.js"></script>
  </head>
  <body>

    <textarea id="textarea" rows="3" cols="40">
Line 1
Line 2
Line 3
    </textarea>

    <textarea id="textarea-empty" rows="5" cols="40"></textarea>

    <script>
        description("This tests that text selection is reported correctly for textarea elements.");

        if (window.accessibilityController) {

            const textarea = document.getElementById('textarea');
            textarea.focus();
            window.textareaAccessible =
                accessibilityController.accessibleElementById('textarea');
            window.emptyTextareaAccessible =
                accessibilityController.accessibleElementById('textarea-empty');

            // Select the entire contents.
            textarea.select();
            shouldBe("textareaAccessible", "textareaAccessible.selectionAnchorObject");
            shouldBeZero("textareaAccessible.selectionAnchorOffset");
            shouldBe("textareaAccessible", "textareaAccessible.selectionFocusObject");
            shouldBeEqualToNumber("textareaAccessible.selectionFocusOffset",
                textarea.textLength);
            
            // Select entire lines.
            for (let lineNumber = 0; lineNumber < 3; ++lineNumber) {
                for (let directionIndex = 0; directionIndex < 2;
                    ++directionIndex) {
                    let selectionAnchorOffset = lineNumber * 7;
                    let selectionFocusOffset = (lineNumber + 1) * 7;
                    let direction = 'forward';
                    if (directionIndex)
                        direction = 'backward';

                    textarea.setSelectionRange(selectionAnchorOffset, selectionFocusOffset,
                                               direction);
                    shouldBe("textareaAccessible", "textareaAccessible.selectionAnchorObject");
                    shouldBeEqualToNumber("textareaAccessible.selectionAnchorOffset",
                        directionIndex ? selectionFocusOffset : selectionAnchorOffset);
                    shouldBe("textareaAccessible", "textareaAccessible.selectionFocusObject");
                    shouldBeEqualToNumber("textareaAccessible.selectionFocusOffset",
                        directionIndex ? selectionAnchorOffset : selectionFocusOffset);
                }
            }

            const emptyTextarea = document.getElementById('textarea-empty');
            emptyTextarea.focus();            
            // Each textarea remembers its own independent selection but
            // textareas that are not focused don't expose their selection
            // visually.
            shouldBe("emptyTextareaAccessible", "textareaAccessible.selectionAnchorObject");
            shouldBeEqualToNumber("textareaAccessible.selectionAnchorOffset", 0);
            shouldBe("emptyTextareaAccessible", "textareaAccessible.selectionFocusObject");
            shouldBeEqualToNumber("textareaAccessible.selectionFocusOffset", 0);

            textarea.focus();
            shouldBe("textareaAccessible", "textareaAccessible.selectionAnchorObject");
            shouldBeEqualToNumber("textareaAccessible.selectionAnchorOffset", 21);
            shouldBe("textareaAccessible", "textareaAccessible.selectionFocusObject");
            shouldBeEqualToNumber("textareaAccessible.selectionFocusOffset", 14);

            emptyTextarea.focus();
            shouldBe("emptyTextareaAccessible", "emptyTextareaAccessible.selectionAnchorObject");
            shouldBeZero("emptyTextareaAccessible.selectionAnchorOffset");
            shouldBe("emptyTextareaAccessible", "emptyTextareaAccessible.selectionFocusObject");
            shouldBeZero("emptyTextareaAccessible.selectionFocusOffset");
            
            // Setting an invalid selection should not be visible.
            emptyTextarea.setSelectionRange(1, 1);
            shouldBeZero("emptyTextareaAccessible.selectionAnchorOffset");
            shouldBeZero("emptyTextareaAccessible.selectionFocusOffset");

        }
    </script>

  </body>
</html>
chromium/third_party/blink/web_tests/accessibility/textarea-selection.html
