blob: e7d5f7793b026ea4363e0ab10fce8b8411f2ecd8 [file] [log] [blame]
<!DOCTYPE html>
<html>
<body>
<p id="description">This tests copying and pasting content across shadow boundaries.<br>
To test manually, copy text blow starting from "WebKit" ending with "rocks", and paste into the green box below. All the text shoul be copied & pasted.</p>
<style> .box { border: solid 1px; padding: 0.2rem; margin-bottom: 1rem; } </style>
<div id="source" class="box" style="border-color: blue"><span id="host">world WebKit</span> rocks</div>
<div id="destination" class="box" style="border-color: blue" contenteditable></div>
<pre id="htmlResult"></pre>
<pre id="textResult"></pre>
<script src="../../resources/dump-as-markup.js"></script>
<script>
Markup.description(description.textContent);
Markup.waitUntilDone();
const shadowRoot = host.attachShadow({mode: 'open'});
shadowRoot.innerHTML = 'hello <slot></slot>';
destination.addEventListener('paste', (event) => {
htmlResult.textContent = event.clipboardData.getData('text/html');
textResult.textContent = event.clipboardData.getData('text/plain');
setTimeout(() => {
Markup.dump(destination, 'pasted html');
Markup.dump(textResult, 'text/plain');
Markup.notifyDone();
}, 0);
});
if (window.testRunner) {
internals.setSelectionWithoutValidation(host.firstChild, 0, source.lastChild, source.lastChild.data.length);
document.execCommand('copy');
destination.focus();
document.execCommand('paste');
}
</script>
</body>
</html>