105 lines
3 KiB
HTML
105 lines
3 KiB
HTML
<!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>
|