Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: os == 'android' OR headless
- Manifest: dom/serializers/tests/mochitest/mochitest.toml
<!DOCTYPE HTML>
<html>
<!--
This test is copied from test_copypaste.html, and the main purpose of it is
to test copy pasting works when the selected contents have shadow trees involved.
-->
<head>
<title>Test for copy/paste</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script type="text/javascript" src="copypaste_shadow_dom.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
SimpleTest.waitForExplicitFinish();
SimpleTest.registerCleanupFunction(function() {
// SpecialPowers would reset the pref after the
// test is done, and this might to lead some
// inconsistent behaviours if we keep the selection
// there.
window.getSelection().removeAllRanges();
});
addLoadEvent(() => {
add_task(async function test_copyhtml() {
await SpecialPowers.pushPrefEnv({
set: [["dom.shadowdom.selection_across_boundary.enabled", true]],
});
await testCopyPasteShadowDOM();
});
});
</script>
</pre>
<div>
<textarea id="input" cols="40" rows="10"></textarea>
<div id="title" title="title to have a long HTML line">This is a <em>draggable</em> bit of text.</div>
<div id="host1">
<template shadowrootmode="open">
<span id="shadow-content">Shadow Content1</span>
</template>
</div>
<span id="light-content">Light Content</span>
<div id="host2">
<template shadowrootmode="open">
<span id="shadow-content">Shadow Content2</span>
<div id="nested-host">
<template shadowrootmode="open">
<span id="nested-shadow-content">Nested Shadow</span>
</template>
</div>
</template>
</div>
<span id="light-content2">Light Content</span>
<div id="host3">
<template shadowrootmode="open">
<slot name="slot1"></slot>
<span id="shadow-content">Shadow Content2</span>
<slot name="slot2"></slot>
</template>
<span slot="slot1" id="slotted1">slotted1</span>
<span slot="slot2" id="slotted2">slotted2</span>
</div>
<!--A more complex shadow tree-->
<div id="host4">
<template shadowrootmode="open">
<slot name="slot1"></slot>
<span id="shadow-content">Shadow Content2</span>
<div id="nestedHost">
<template shadowrootmode="open">
<slot></slot>
<span>ShadowNested</span>
</template>
<span>Nested Slotted</span>
</div>
<slot name="slot2"></slot>
</template>
<span slot="slot1" id="slotted3">slotted1</span>
<span slot="slot2" id="slotted4">slotted2</span>
</div>
<span id="light-content3">Light Content</span>
<!--A shadow host with <slot> that have a default value-->
<div id="host5">
<template shadowrootmode="open">
<slot>default value</slot>
<span>ShadowContent</span>
</template>
<span>Slotted</span>
</div>
</div>
</body>
</html>