Deflake svg/custom/pointer-events-image*.svg

third_party/WebKit/LayoutTests/svg/custom/pointer-events-image-css-transform.svg

 <?xml version="1.0"?>
-<!-- This a 1-1 copy of pointer-events-image.svg tests with the addition of -webkit-transform -->
+<!-- This a 1-1 copy of pointer-events-image.svg tests with the addition of 'transform' -->
 <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" onload="fillTestContent()">
   <script type="text/javascript">
   <![CDATA[
-    
     if (window.testRunner)
-        testRunner.waitUntilDone();
-  
+      testRunner.waitUntilDone();
+
     var visibleValues = [ 'visible', 'hidden' ];
     var fillValues = ['none', 'orange' ];
     var strokeValues = ['none', 'blue' ];
-  
+
     var pointerEventsValues = ['auto', 'visiblePainted', 'visibleFill', 'visibleStroke', 'visible', 'painted', 'fill', 'stroke', 'all', 'none'];
-  
+
+    var pendingClicks = [];
+    function queueClick(x, y) {
+      pendingClicks.push({ x: x, y: y });
+    }
+
+    function performClick(x, y) {
+      if (!window.eventSender)
+        return;
+      eventSender.mouseMoveTo(x, y);
+      eventSender.mouseDown();
+      eventSender.mouseUp();
+    }
+
+    var totalImages = visibleValues.length * fillValues.length * strokeValues.length * pointerEventsValues.length;
+    var imagesLoaded = 0;
+
+    function imageLoaded() {
+      // Wait for all images to load, then issue all pending clicks.
+      if (++imagesLoaded < totalImages)
+        return;
+      for (let point of pendingClicks)
+        performClick(point.x, point.y);
+      if (window.testRunner)
+        testRunner.notifyDone();
+    }
+
+    var svgNS = "http://www.w3.org/2000/svg";
+
+    function attachTestImage(container, xOffset, yOffset, attributes) {
+      var fillText = document.createElementNS(svgNS, 'text');
+      fillText.setAttribute('x', xOffset + 5);
+      fillText.setAttribute('y', yOffset + 20);
+      fillText.textContent = "miss";
+      fillText.setAttribute('pointer-events', 'none');
+
+      var img = document.createElementNS(svgNS, 'image');
+      img.setAttributeNS("http://www.w3.org/1999/xlink", 'href', 'resources/red-checker.png');
+      img.setAttribute('x', xOffset / 2);
+      img.setAttribute('y', yOffset / 2);
+      img.setAttribute('width', 25);
+      img.setAttribute('height', 25);
+      img.setAttribute('visibility', attributes.visibility);
+      img.setAttribute('fill', attributes.fill);
+      img.setAttribute('stroke', attributes.stroke);
+      img.setAttribute('pointer-events', attributes.pointerEvents);
+      img.setAttribute('style', "transform: scale(2)");
+      img.onload = imageLoaded;
+      img.onclick = function() { fillText.textContent = 'HIT'; };
+
+      container.appendChild(img);
+      container.appendChild(fillText);
+    }
+
     var leftEdge = 100;
     var topEdge = 30;
-    
+
     var rectSpacing = 57;
-  
-    var svgNS = "http://www.w3.org/2000/svg";
-    
-    function clickHit(event, identifierString) {
-      var fillText = document.getElementById('fill-text' + identifierString);
-      fillText.textContent = 'HIT';
-    }
-  
-    function fillTestContent() {    
+
+    function fillTestContent() {
       var xOffset = leftEdge;
       var yOffset = topEdge;
-    
+
       var testContent = document.getElementById("test-content");
-    
+
       for (var pi = 0; pi < pointerEventsValues.length; pi++) {
         var eventLabel = document.createElementNS(svgNS, 'text');
         eventLabel.setAttribute('x', 0);
         eventLabel.setAttribute('y', yOffset + 30);
         eventLabel.textContent = pointerEventsValues[pi];
         testContent.appendChild(eventLabel);
-      
+
         for (var vi = 0; vi < visibleValues.length; vi++) {
           for (var fi = 0; fi < fillValues.length; fi++) {
             for (var si = 0; si < strokeValues.length; si++) {
-            
-              var identString = "_" + pi + "_" + vi + "_" + fi + "_" + si;
-            
-              var img = document.createElementNS(svgNS, 'image');
-              img.setAttributeNS("http://www.w3.org/1999/xlink", 'href', 'resources/red-checker.png');
-              img.setAttribute('x', xOffset/2);
-              img.setAttribute('y', yOffset/2);
-              img.setAttribute('width', 25);
-              img.setAttribute('height', 25);
-              img.setAttribute('visibility', visibleValues[vi]);
-              img.setAttribute('fill', fillValues[fi]);
-              img.setAttribute('stroke', strokeValues[si]);
-              img.setAttribute('pointer-events', pointerEventsValues[pi]);
-              img.setAttribute('style', "transform: scale(2)");
-              img.setAttribute('onclick', 'clickHit(evt, "' + identString + '")');
-              
-              testContent.appendChild(img);
-            
-              var fillText = document.createElementNS(svgNS, 'text');
-              fillText.setAttribute('x', xOffset + 5);
-              fillText.setAttribute('y', yOffset + 20);
-              fillText.textContent = "miss";
-              fillText.setAttribute('id', 'fill-text' + identString);
-              fillText.setAttribute('pointer-events', 'none');
-              testContent.appendChild(fillText);
-            
-              if (window.eventSender) {
-                // Fill click
-                eventSender.mouseMoveTo(xOffset + 30, yOffset + 30);
-                eventSender.mouseDown();
-                eventSender.mouseUp();
-              }
+              attachTestImage(testContent, xOffset, yOffset, {
+                visibility: visibleValues[vi],
+                fill: fillValues[fi],
+                stroke: strokeValues[si],
+                pointerEvents: pointerEventsValues[pi]
+              });
+              queueClick(xOffset + 30, yOffset + 30);
               xOffset += rectSpacing;
             }
           }
         }
         xOffset = leftEdge;
         yOffset += rectSpacing;
       }
-      
-      if (window.testRunner)
-        testRunner.notifyDone();
     }
   ]]>
   </script>
   
   <text x="110" y="20">Visibility: visible</text>
   <text x="340" y="20">Visibility: hidden</text>
   <g id="test-content"/>
 </svg>