test_event_retarget.html (6708B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=887541 5 --> 6 <head> 7 <title>Test for event retargeting in web components</title> 8 <script type="text/javascript" src="head.js"></script> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 </head> 12 <body> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=887541">Bug 887541</a> 14 <script> 15 16 SimpleTest.waitForExplicitFinish(); 17 createIframe() 18 .then((aDocument) => { 19 /* 20 * Creates an event listener with an expected event target. 21 */ 22 function createEventListener(expectedTarget, msg) { 23 return function(e) { 24 is(e.target, expectedTarget, msg); 25 }; 26 } 27 28 /* 29 * Test of event retargeting through a basic ShadowRoot with a content insertion point. 30 * 31 * <div elemThree> ---- <shadow-root shadowOne> 32 * | | 33 * <div elemOne> <content elemTwo> 34 * 35 * Dispatch event on elemOne 36 */ 37 38 var elemOne = aDocument.createElement("div"); 39 var elemTwo = aDocument.createElement("content"); 40 var elemThree = aDocument.createElement("div"); 41 var shadowOne = elemThree.attachShadow({mode: "open"}); 42 43 elemThree.appendChild(elemOne); 44 shadowOne.appendChild(elemTwo); 45 46 elemOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemOne.")); 47 elemTwo.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemTwo.")); 48 elemThree.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemThree.")); 49 shadowOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of shadowOne.")); 50 51 var customEvent = new CustomEvent("custom", { "bubbles" : true }); 52 elemOne.dispatchEvent(customEvent); 53 54 /* 55 * Test of event retargeting through a basic ShadowRoot with a content insertion point. 56 * 57 * <div elemThree> ---- <shadow-root shadowOne> 58 * | | 59 * <div elemOne> <content elemTwo> 60 * 61 * Dispatch event on elemTwo 62 */ 63 64 elemOne = aDocument.createElement("div"); 65 elemTwo = aDocument.createElement("content"); 66 elemThree = aDocument.createElement("div"); 67 shadowOne = elemThree.attachShadow({mode: "open"}); 68 69 elemThree.appendChild(elemOne); 70 shadowOne.appendChild(elemTwo); 71 72 elemTwo.addEventListener("custom", createEventListener(elemTwo, "elemTwo is in common ancestor tree of elemTwo.")); 73 elemThree.addEventListener("custom", createEventListener(elemThree, "elemThree is in common ancestor tree of elemThree.")); 74 shadowOne.addEventListener("custom", createEventListener(elemTwo, "elemTwo is in common ancestor tree of shadowOne.")); 75 76 customEvent = new CustomEvent("custom", { "bubbles" : true }); 77 elemTwo.dispatchEvent(customEvent); 78 79 /* 80 * Test of event retargeting through a nested ShadowRoots with content insertion points. 81 * 82 * <div elemFive> --- <shadow-root shadowTwo> 83 * | | 84 * <div elemOne> <div elemFour> ----- <shadow-root shadowOne> 85 * | | 86 * <content elemTwo> <content elemThree> 87 * 88 * Dispatch custom event on elemOne. 89 */ 90 91 elemOne = aDocument.createElement("div"); 92 elemTwo = aDocument.createElement("content"); 93 elemThree = aDocument.createElement("content"); 94 var elemFour = aDocument.createElement("div"); 95 var elemFive = aDocument.createElement("div"); 96 var shadowTwo = elemFive.attachShadow({mode: "open"}); 97 shadowOne = elemFour.attachShadow({mode: "open"}); 98 99 elemFive.appendChild(elemOne); 100 shadowTwo.appendChild(elemFour); 101 elemFour.appendChild(elemTwo); 102 shadowOne.appendChild(elemThree); 103 104 elemOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemOne.")); 105 elemTwo.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemTwo.")); 106 elemThree.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemThree.")); 107 elemFour.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemFour.")); 108 elemFive.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of elemFive.")); 109 shadowOne.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of shadowOne.")); 110 shadowTwo.addEventListener("custom", createEventListener(elemOne, "elemOne is in common ancestor tree of shadowTwo.")); 111 112 customEvent = new CustomEvent("custom", { "bubbles" : true }); 113 elemOne.dispatchEvent(customEvent); 114 115 /* 116 * Test of event retargeting through a nested ShadowRoots with content insertion points. 117 * 118 * <div elemFive> --- <shadow-root shadowTwo> 119 * | | 120 * <div elemOne> <div elemFour> ----- <shadow-root shadowOne> 121 * | | 122 * <content elemTwo> <content elemThree> 123 * 124 * Dispatch custom event on elemThree. 125 */ 126 127 elemOne = aDocument.createElement("div"); 128 elemTwo = aDocument.createElement("content"); 129 elemThree = aDocument.createElement("content"); 130 elemFour = aDocument.createElement("div"); 131 elemFive = aDocument.createElement("div"); 132 shadowTwo = elemFive.attachShadow({mode: "open"}); 133 shadowOne = elemFour.attachShadow({mode: "open"}); 134 135 elemFive.appendChild(elemOne); 136 shadowTwo.appendChild(elemFour); 137 elemFour.appendChild(elemTwo); 138 shadowOne.appendChild(elemThree); 139 140 elemThree.addEventListener("custom", createEventListener(elemThree, "elemThree is in common ancestor tree of elemThree.")); 141 elemFour.addEventListener("custom", createEventListener(elemFour, "elemFour is in common ancestor tree of elemFour.")); 142 elemFive.addEventListener("custom", createEventListener(elemFive, "elemFive is in common ancestor tree of elemFive.")); 143 shadowOne.addEventListener("custom", createEventListener(elemThree, "elemThree is in common ancestor tree of shadowOne.")); 144 shadowTwo.addEventListener("custom", createEventListener(elemFour, "elemFour is in common ancestor tree of shadowTwo.")); 145 146 customEvent = new CustomEvent("custom", { "bubbles" : true }); 147 elemThree.dispatchEvent(customEvent); 148 149 SimpleTest.finish(); 150 }); 151 </script> 152 </body> 153 </html>