text-selection-with-delegatesFocus.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /shadow-dom/focus/text-selection-with-delegatesFocus.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="withoutFocus"></x-shadow>

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

</body>

<script>

'use strict';

/**

 * build shadow-root with delegates focus, a focusable element, and an (ideally) selectable text

*/

function buildShadowRootWithSelectableText( element, shouldDelegateFocus ) {

    element.attachShadow({ mode: 'open', delegatesFocus: shouldDelegateFocus });

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

    span.textContent = 'Example Text to Select ';

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

    button.textContent = 'Button';

    element.shadowRoot.append(span, button);

/**

 * 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();

promise_test(async () => {

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

    buildShadowRootWithSelectableText(xShadow, false);

    // starting selection from the center of the element, and going right.

    // The important part here is that we start the selection in the center

    //   (where mouse-down events may be delegated)

    await selectText(xShadow, 0, 50)

    const s = getSelection();

    // because browsers may handle rendering differently, we can get different amounts of

    //   text selected, even when using the same start-end values. We opt in this case to

    //   verify just if any text is selected, since all we care about is if some text is

    //   selected.

    assert_greater_than(s.toString().length, 0);

}, 'shadow root has selectable text when focus is not delegated');

promise_test(async () => {

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

    buildShadowRootWithSelectableText(xShadow, true);

    await selectText(xShadow, 0, 50)

    const s = getSelection();

    assert_greater_than(s.toString().length, 0);

}, 'shadow root has selectable text when focus is delegated');

</script>