| <!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 "hello" ending with "WebKit", 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"><div style="font-style: italic" id="host1"><b>hello</b></div><div id="host2">rocks</div></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 shadowRoot1 = host1.attachShadow({mode: 'open'}); |
| shadowRoot1.innerHTML = '<slot style="color: blue;"></slot> world'; |
| |
| const shadowRoot2 = host2.attachShadow({mode: 'open'}); |
| shadowRoot2.innerHTML = '<u>WebKit <slot></slot></u>'; |
| |
| 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(source, 0, shadowRoot2.querySelector('u'), 1); |
| document.execCommand('copy'); |
| destination.focus(); |
| document.execCommand('paste'); |
| } |
| |
| </script> |
| </body> |
| </html> |
