[Webkit-unassigned] [Bug 53088] New: SVG: "filter" race condition may prevent SVG elements from being re-drawn

Tue Jan 25 08:06:25 PST 2011

https://bugs.webkit.org/show_bug.cgi?id=53088

           Summary: SVG: "filter" race condition may prevent SVG elements
                    from being re-drawn
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
        OS/Version: Windows Vista
            Status: NEW
          Severity: Normal
          Priority: P1
         Component: SVG
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: skylined at chromium.org
                CC: eric at webkit.org, zimmermann at kde.org

Created an attachment (id=80066)
 --> (https://bugs.webkit.org/attachment.cgi?id=80066&action=review)
Repro

Chromium bug: http://code.google.com/p/chromium/issues/detail?id=70769

Applying a filter to an SVG element may cause Chrome to stop drawing updates to that SVG element. There appears to be some kind of race condition involved because updates made almost immediately after loading the SVG will be applied, but after a certain (unknown) period, not more changes are applied to the object.

Repro:
<?xml version="1.0" standalone="yes"?>
<svg onload="go()" xmlns="http://www.w3.org/2000/svg" id="svg">
  <defs>
    <filter id="Gaussian_Blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
  </defs>
  <foreignObject x="0" y="0" width="100%" height="50">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <button onclick="document.getElementById('svg').forceRedraw()">forceRedraw()</button>
      <button onclick="orange()">orange</button>
    </body>
  </foreignObject>
  <g style="filter:url(#Gaussian_Blur)">
    <ellipse cx="50" cy="50" rx="10" ry="10" style="fill:red; padding: 10px;" id="blurred">
    </ellipse>
  </g>
  <ellipse cx="100" cy="50" rx="10" ry="10" style="fill:red; padding: 10px;" id="normal">
  </ellipse>
  <script>
    function replaceSpanInForeignObject(oForeignObject, sColor) {
      oForeignObject.style.fill = sColor;
    }
    function go() {
      replaceSpanInForeignObject(document.getElementById('normal'), 'blue');
      replaceSpanInForeignObject(document.getElementById('blurred'), 'blue');
      setTimeout(function () {
        replaceSpanInForeignObject(document.getElementById('normal'), 'green');
        replaceSpanInForeignObject(document.getElementById('blurred'), 'green');
      }, 1);
    }
    function orange() {
      replaceSpanInForeignObject(document.getElementById('normal'), 'orange');
      replaceSpanInForeignObject(document.getElementById('blurred'), 'orange');
    }
  </script>
</svg>

The repro shows two red circles, which are immediately changed to green on loading the page and then changed again to blue using a very small timeout. Loading the page will result in either two green circles, or a blue blurred and a green normal circle, depending on timing. Safari does not seem to be fast enough for me to show this, but it happens about 50% of the time for me in Chrome. Pressing the "orange" button should change both circles to orange, but this only has effect on the non-blurred circle. Pressing the "forceRedraw()" button, calls that method of the SVG element, but this seems to have no effect.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.