text-selection-with-delegatesFocus-text-control.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /shadow-dom/focus/text-selection-with-delegatesFocus-text-control.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-actions.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<body>

    <x-shadow id="xShadow"></x-shadow>

</body>

<script>

'use strict';

/**

 * command to select text in shadow-root

*/

function selectText(element, start, end) {

    getSelection().empty();

    const actions = new test_driver.Actions();

    actions.pointerMove(start, 0, {origin: element});

    actions.pointerDown();

    actions.pointerMove(end, 0, {origin: element});

    actions.pointerUp();

    return actions.send();

/**

 * command to type foo.

*/

 function typeFoo() {

    const actions = new test_driver.Actions();

    actions.keyDown("F");

    actions.keyUp("F");

    actions.keyDown("O");

    actions.keyUp("O");

    actions.keyDown("O");

    actions.keyUp("O");

    return actions.send();

promise_test(async () => {

    const xShadow = document.getElementById('xShadow');

    const root = xShadow.attachShadow({ mode: 'open', delegatesFocus: true });

    const span = document.createElement('span');

    span.textContent = 'Example Text to Select ';

    const br = document.createElement('br');

    const input = document.createElement('input');

    root.append(span, br, input);

    await selectText(xShadow, 0, 0);

    assert_equals(document.activeElement, xShadow);

    assert_equals(xShadow.shadowRoot.activeElement, input, "click on shadow host with delegatesFocus focuses the input element.");

    await typeFoo();

    assert_equals(input.value, 'FOO', "keyboard typing will update the input value.");

    await selectText(xShadow, 0, 50);

    const s = getSelection();

    assert_greater_than(s.toString().length, 0, "drag text will update selection.");

}, 'shadow root has selectable text when focus is delegated. Selection goes to text control if it is the delegated focusable area.');

</script>