<!DOCTYPE html>
<html>
<head>
<meta name='author' title='weizman' href='https://www.weizmangal.com'>
<meta name='assert' content='Shadow DOM should not leak via Selection API'>
<link rel='help' href='https://w3c.github.io/webcomponents/spec/shadow/'>
<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>
</head>
<body>
<div id='log'></div>
<div id='container'></div>
</body>
<script>
'use strict';
const container = document.getElementById('container');
function reset(text) {
const host = container.appendChild(document.createElement('div'));
const shadow = host.attachShadow({mode: 'closed'});
const child = shadow.appendChild(document.createElement('span'));
child.textContent = text;
return host;
}
async function select(t, target) {
const event_watcher = new EventWatcher(t, target, ["mouseup"]);
const actions_promise = new test_driver.Actions()
.pointerMove(0, 0, {origin: target})
.pointerDown()
.pointerMove(100, 0, {origin: target})
.pointerUp()
.send();
t.add_cleanup(() => actions_promise);
const event = await event_watcher.wait_for(["mouseup"]);
assert_equals(event.type, "mouseup");
assert_equals(event.target, target);
}
promise_test(async (t) => {
const text = 'text_inside_shadow';
const host = reset(text);
await select(t, host);
const node = getSelection().anchorNode;
assert_equals(node, container, 'getSelection().anchorNode should return the host of the shadow');
assert_not_equals(node.textContent, text, 'getSelection().anchorNode textContent should not be the text contents of an element inside the shadow root');
}, 'selection API should not leak nodes in Shadow DOM.');
</script>
</html>
Codebase Browser
chromium