test_copypaste_shadow_dom.html (3057B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 This test is copied from test_copypaste.html, and the main purpose of it is 5 to test copy pasting works when the selected contents have shadow trees involved. 6 --> 7 <head> 8 <title>Test for copy/paste</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="/tests/SimpleTest/EventUtils.js"></script> 11 <script type="text/javascript" src="copypaste_shadow_dom.js"></script> 12 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 13 </head> 14 <body> 15 <p id="display"></p> 16 <div id="content" style="display: none"> 17 </div> 18 <pre id="test"> 19 <script class="testbody" type="text/javascript"> 20 21 SimpleTest.waitForExplicitFinish(); 22 23 SimpleTest.registerCleanupFunction(function() { 24 // SpecialPowers would reset the pref after the 25 // test is done, and this might to lead some 26 // inconsistent behaviours if we keep the selection 27 // there. 28 window.getSelection().removeAllRanges(); 29 }); 30 31 addLoadEvent(() => { 32 add_task(async function test_copyhtml() { 33 await SpecialPowers.pushPrefEnv({ 34 set: [["dom.shadowdom.selection_across_boundary.enabled", true]], 35 }); 36 await testCopyPasteShadowDOM(); 37 }); 38 }); 39 40 </script> 41 </pre> 42 <div> 43 <textarea id="input" cols="40" rows="10"></textarea> 44 45 <div id="title" title="title to have a long HTML line">This is a <em>draggable</em> bit of text.</div> 46 <div id="host1"> 47 <template shadowrootmode="open"> 48 <span id="shadow-content">Shadow Content1</span> 49 </template> 50 </div> 51 52 <span id="light-content">Light Content</span> 53 54 <div id="host2"> 55 <template shadowrootmode="open"> 56 <span id="shadow-content">Shadow Content2</span> 57 <div id="nested-host"> 58 <template shadowrootmode="open"> 59 <span id="nested-shadow-content">Nested Shadow</span> 60 </template> 61 </div> 62 </template> 63 </div> 64 65 <span id="light-content2">Light Content</span> 66 <div id="host3"> 67 <template shadowrootmode="open"> 68 <slot name="slot1"></slot> 69 <span id="shadow-content">Shadow Content2</span> 70 <slot name="slot2"></slot> 71 </template> 72 <span slot="slot1" id="slotted1">slotted1</span> 73 <span slot="slot2" id="slotted2">slotted2</span> 74 </div> 75 76 <!--A more complex shadow tree--> 77 <div id="host4"> 78 <template shadowrootmode="open"> 79 <slot name="slot1"></slot> 80 <span id="shadow-content">Shadow Content2</span> 81 <div id="nestedHost"> 82 <template shadowrootmode="open"> 83 <slot></slot> 84 <span>ShadowNested</span> 85 </template> 86 <span>Nested Slotted</span> 87 </div> 88 <slot name="slot2"></slot> 89 </template> 90 <span slot="slot1" id="slotted3">slotted1</span> 91 <span slot="slot2" id="slotted4">slotted2</span> 92 </div> 93 94 <span id="light-content3">Light Content</span> 95 <!--A shadow host with <slot> that have a default value--> 96 <div id="host5"> 97 <template shadowrootmode="open"> 98 <slot>default value</slot> 99 <span>ShadowContent</span> 100 </template> 101 <span>Slotted</span> 102 </div> 103 </div> 104 </body> 105 </html>