c08fe9414583b862240f9ced78dc556da5df0bba
[WebKit-https.git] / LayoutTests / svg / custom / resources / use-instanceRoot-event-bubbling.js
1 description("Tests wheter SVG event bubbling works accross shadow trees.");
2
3 if (window.testRunner)
4     testRunner.waitUntilDone();
5
6 var svgNS = "http://www.w3.org/2000/svg";
7 var xhtmlNS = "http://www.w3.org/1999/xhtml";
8 var expected = new Array(4);
9 var tests = 4;
10 var counter = 0;
11 var eventCounter = 0;
12
13 function log(message) {
14     var logDiv = document.getElementById("console");
15     var newDiv = document.createElementNS(xhtmlNS, "div");
16     newDiv.appendChild(document.createTextNode(message));
17     logDiv.appendChild(newDiv);
18 }
19
20 function eventHandler(evt, label) {
21     var targetId = evt.target.correspondingElement ? evt.target.correspondingElement.id : evt.target.id;
22     var curTargetId = evt.currentTarget.correspondingElement ? evt.currentTarget.correspondingElement.id : evt.currentTarget.id;
23
24     var phaseString = "";
25     switch (evt.eventPhase) {
26     case 1: phaseString = "CAPTURING"; break;
27     case 2: phaseString = "AT_TARGET"; break;
28     case 3: phaseString = "BUBBLING"; break;
29     }
30
31     msg = '[EventHandler ' + label + '] type: ' + evt.type + ' phase: ' + phaseString +
32           ' target: '         + evt.target        + ' (id: ' + targetId    + ')' +
33           ' currentTarget: '  + evt.currentTarget + ' (id: ' + curTargetId + ')';
34
35     shouldBeEqualToString("msg", expected[eventCounter]);
36     ++eventCounter;
37
38     if (label == counter)
39         setTimeout(label == tests ? finishTest : nextTest, 0);
40 }
41
42 function finishTest()
43 {
44     successfullyParsed = true;
45
46     document.getElementById("rectParent").setAttribute("fill", "green");
47     shouldBeTrue("successfullyParsed");
48     debug('<br /><span class="pass">TEST COMPLETE</span>');
49
50     if (window.testRunner)
51         testRunner.notifyDone();
52 }
53
54 function nextTest()
55 {
56     eventCounter = 0;
57     ++counter;
58
59     switch (counter) {
60     case 1:
61         rect.onclick = function(evt) { eventHandler(evt, 1); };
62         expected[0] = "[EventHandler 1] type: click phase: AT_TARGET target: [object SVGElementInstance] (id: rect) currentTarget: [object SVGElementInstance] (id: rect)";
63         testListeners();
64         break;
65     case 2:
66         rectContainer.addEventListener("click", function(evt) { eventHandler(evt, 2) }, false);
67         expected[1] = "[EventHandler 2] type: click phase: BUBBLING target: [object SVGElementInstance] (id: rect) currentTarget: [object SVGElementInstance] (id: rectParent)";    
68         testListeners();
69         break;
70     case 3:
71         use.setAttribute("onclick", "eventHandler(evt, 3)");
72         expected[2] = "[EventHandler 3] type: click phase: BUBBLING target: [object SVGElementInstance] (id: rect) currentTarget: [object SVGUseElement] (id: use)";
73         testListeners();
74         break;
75     case 4:
76         useContainer.onclick = function(evt) { eventHandler(evt, 4) };
77         expected[3] = "[EventHandler 4] type: click phase: BUBBLING target: [object SVGElementInstance] (id: rect) currentTarget: [object SVGGElement] (id: useParent)";
78         testListeners();
79         break;
80     }
81 }
82
83 function testListeners()
84 {
85     if (window.eventSender) {
86         eventSender.mouseMoveTo(50, 50);
87         eventSender.mouseDown();
88         eventSender.mouseUp();
89     }
90 }
91
92 // Create root element
93 var svg = document.createElementNS(svgNS, "svg");
94 svg.id = "rootSVG";
95 svg.setAttribute("width", 100);
96 svg.setAttribute("height", 100);
97 document.body.insertBefore(svg, document.body.firstChild);
98
99 // Create defs section
100 var defs = document.createElementNS(svgNS, "defs");
101 svg.appendChild(defs);
102
103 var rectContainer = document.createElementNS(svgNS, "g");
104 rectContainer.id = "rectParent";
105 defs.appendChild(rectContainer);
106
107 var rect = document.createElementNS(svgNS, "rect");
108 rect.id = "rect";
109 rect.style.fill = "red";
110 rect.width.baseVal.value = 100;
111 rect.height.baseVal.value = 100;
112 rectContainer.appendChild(rect);
113
114 // Create content section
115 var useContainer = document.createElementNS(svgNS, "g");
116 useContainer.id = "useParent";
117 svg.appendChild(useContainer);
118
119 var use = document.createElementNS(svgNS, "use");
120 use.id = "use";
121 use.href.baseVal = "#rectParent";
122 useContainer.appendChild(use);
123
124 function repaintTest() {
125     if (window.testRunner)
126         testRunner.waitUntilDone();
127     nextTest();
128 }