68 lines
2.4 KiB
HTML
68 lines
2.4 KiB
HTML
<!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>
|