third_party/WebKit/LayoutTests/svg/repaint/image-with-clip-path.svg

   1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="runRepaintAndPixelTest()">
   2     <script xlink:href="../../fast/repaint/resources/text-based-repaint.js" type="text/javascript"></script>
   3     <text y="-10">Bug 76559: All red should disappear</text>
   4     <g id="g" transform="translate(0, 0)">
   5         <defs>
   6             <clipPath id="p">
   7                 <rect id="r" x="-10" y="-10" width="20" height="20" />
   8             </clipPath>
   9         </defs>
  10         <image x="-30" y="-30" width="60" height="60" clip-path="url(#p)" xlink:href=""/>
  11     </g>
  12 <script>
  13     window.testIsAsync = true;
  14     var green = "data:image/gif;base64,R0lGODlhAQABAIAAAAD/AAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
  15     var red = "data:image/gif;base64,R0lGODlhAQABAIAAAP8AAAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
  16
  17     var r = document.querySelector('#r');
  18     var g = document.querySelector('#g');
  19     var i = document.querySelector('image');
  20     var update = function(offset, size, img) {
  21         r.setAttribute('x', -size / 2);
  22         r.setAttribute('y', -size / 2);
  23         r.setAttribute('width', size);
  24         r.setAttribute('height', size);
  25         g.setAttribute("transform","translate(" + offset + ",50)");
  26         i.setAttributeNS('http://www.w3.org/1999/xlink', 'href', img);
  27     };
  28
  29     function finishTest() {
  30         finishRepaintTest();
  31     }
  32
  33     function nextStep() {
  34         // FIXME: we need a better way of waiting for layout/repainting to happen
  35         i.onload = function() { setTimeout(finishTest, 1); };
  36         update(200, 50, green);
  37     }
  38
  39     function repaintTest() {
  40         // FIXME: we need a better way of waiting for layout/repainting to happen
  41         i.onload = function() { setTimeout(nextStep, 1); };
  42         update(50, 100, red);
  43     }
  44 </script>
  45 </svg>