| <!DOCTYPE html> |
| <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> |
