2018-10-03 09:45:18 +00:00
|
|
|
<!DOCTYPE html>
|
2018-10-03 06:28:07 +00:00
|
|
|
<html>
|
|
|
|
|
<body>
|
|
|
|
|
<p id="description">This tests copying and pasting content with a shadow tree.<br>
|
|
|
|
|
To test manually, copy paste the content in the blue box to 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">hello <span id="host">world</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 = '<slot></slot> WebKit';
|
|
|
|
|
getSelection().selectAllChildren(source);
|
|
|
|
|
|
|
|
|
|
destination.addEventListener('paste', (event) => {
|
|
|
|
|
htmlResult.textContent = event.clipboardData.getData('text/html');
|
|
|
|
|
textResult.textContent = event.clipboardData.getData('text/plain');
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
Markup.dump(destination, 'pasted');
|
|
|
|
|
Markup.dump(destination, 'text/html');
|
|
|
|
|
Markup.dump(textResult, 'text/plain');
|
|
|
|
|
Markup.notifyDone();
|
|
|
|
|
}, 0);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (window.testRunner) {
|
|
|
|
|
document.execCommand('copy');
|
|
|
|
|
destination.focus();
|
|
|
|
|
document.execCommand('paste');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
