New issue
Advanced search Search tips

Issue 595244 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Filter does not apply after -1 scale on X

Reported by mara...@gmail.com, Mar 16 2016

Issue description

Chrome Version       : 46.0.2490.71
OS Version:            Gentoo Linux
URLs (if applicable) : code included
Other browsers tested: Firefox 38 does not have this problem

What steps will reproduce the problem?
1. Load the SVG source code below onto Chromium, notice outline is missing on the right-pointing shape.


What is the expected result?
Outline should be present on both shapes.

What happens instead of that?
Outline not present on the right-pointing shape, which is just the left-pointing shape that has been scaled -1 on X.

UserAgentString: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36

This problem has been initially filed at: https://bugs.chromium.org/p/chromium/issues/detail?id=409602#c13

I was then advised to file a new bug.

Here I have an SVG that uses a filter to apply a black outline to a <g>.  It renders the group 2 times, once regularly, and the second time with a -1 transformation on the X axis.  The <g> rendered with the -1 transformation on X is missing the black outline that should have been applied by the filter.

The SVG code:

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

  <filter id='outline'>
    <feMorphology operator='dilate' in='SourceAlpha' radius='1'/>
    <feComposite in='SourceGraphic'/>
  </filter>

  <g id='arrow-left' filter='url(#outline)' transform='translate(50,0)'>
    <rect x='5' y='35' width='50' height='10' fill='red' rx='5' ry='5'
          transform='rotate(-45,10,40)' />
    <rect x='5' y='35' width='50' height='10' fill='red' rx='5' ry='5'
          transform='rotate(45,10,40)' />
  </g>

  <!-- Filter will not be applied here on Chromium 46.0.2490.71 -->
  <g id='arrow-right' filter='url(#outline)' transform='translate(50,0) scale(-1,1)'>
    <rect x='5' y='35' width='50' height='10' fill='red' rx='5' ry='5'
          transform='rotate(-45,10,40)' />
    <rect x='5' y='35' width='50' height='10' fill='red' rx='5' ry='5'
          transform='rotate(45,10,40)' />
  </g>

</svg>

 

Comment 1 by mara...@gmail.com, Mar 16 2016

Filter will apply for any positive number, but not any negative number.  Filter will not apply for a negative number on the Y axis either.

Comment 2 by f...@opera.com, Mar 16 2016

Components: Blink>SVG
Status: Available (was: Unconfirmed)
Fiddled version of TC: https://jsfiddle.net/kdo5k2L0/

Comment 3 by pdr@chromium.org, Mar 16 2016

Labels: -OS-Linux Needs-Bisect OS-All
Lets see if a bisect shows anything interesting.
Cc: fmalita@chromium.org
Labels: -Type-Bug -Needs-Bisect M-51 hasbisect Type-Bug-Regression
Owner: senorblanco@chromium.org
Status: Assigned (was: Available)
Able to reproduce the issue on Windows 7, Mac 10.10.5, Ubuntu 14.04 using 46.0.2490.71, latest stable 49.0.2623.87, canary 51.0.2681.0 with below steps:

1.Opened URL: https://jsfiddle.net/kdo5k2L0/ in chrome.
2.Observed that outline not present on the right-pointing shape.

This is regression issue broken in M-36.

Please find below bisect info:
Last good build:36.0.1969.0
First bad build:36.0.1970.0

CHANGELOG URL:
https://chromium.googlesource.com/chromium/src/+log/57b25299665ec2328b56515aeca7fc1033ba70c5..8984dd89276472744235b69c457c00a3656ac56f

BLINK CHANGELOG URL:
http://build.chromium.org/f/chromium/perf/dashboard/ui/changelog_blink.html?url=/trunk&range=173058%3A173057

Unable to find suspect from above CLs.

Hence, providing manual blink CL below:
https://chromium.googlesource.com/chromium/blink/+log/11503209e25606867bdcaef9b003158d908ae1ac..7e082f0b0899c5298055e4c4a394772c9e5cd5a7?pretty=fuller&n=10000

From above CL, suspecting below:
https://chromium.googlesource.com/chromium/blink/+/511491d3f491460ff84ccf35098df0c91d0a4040

senorblanco@Could you please look into this issue if it is related to your change, else feel free to assign it to an appropriate dev person.

ccing fmalita@ from reviewers list to look into this issue.

Reduced test case (just the morphology, no composite): https://jsfiddle.net/28s7rc5t/

Sign in to add a comment