Chrome Version       : 54.0.2840.59
OS Version: Ubuntu 16.10
URLs (if applicable) : http://codepen.io/diddledan/pen/ZpqPzo?editors=1000#0
Other browsers tested:
  Add OK or FAIL after other browsers where you have tested this issue:
     Unable to test other browsers due to webcomponents v1 polyfill currently broken upstream (ref: https://github.com/webcomponents/webcomponentsjs/issues/621)

What steps will reproduce the problem?
1. create a webcomponent with svg+clipPath inside the shadow-root
2. apply clipPath from svg to child element of webcomponent via css clip-path property referencing the ID of the clipPath inside the svg
3. load in browser and note that the clip-path hasn't been applied.
4. move the svg outside all shadow-roots (place into the main document) and retry
5. note the clip-path now works as expected.

What is the expected result?

The css clip-path should correctly use the svg clipPath via ID reference to the element inside the shadow root.

What happens instead of that?

The css clip-path is not applied at all.

Please provide any additional information below. Attach a screenshot if
possible.

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



 

Deleted: Screenshot from 2016-10-19 11-55-21.png 34.1 KB

	Screenshot from 2016-10-19 11-55-21.png 34.1 KB View Download