This error got fixed when I changed the id of linearGradient tag for the second square.
Please see the attached file(index.js).

If it is expected that the id has to be different in order to differ the linearGradient, then there should be nothing wrong with the shadow dom.

Deleted: index.js 757 bytes

index.js 757 bytes View Download

The problem of this issue is that below 3 HashMap/HeapHashMap (which are wrapped into class SVGDocumentExtensions) are owned by document instead of treeScope.
(Member<SVGDocumentExtensions> m_svgExtensions)

HashMap<AtomicString, LayoutSVGResourceContainer*> m_resources;
HeapHashMap<AtomicString, Member<SVGPendingElements>> m_pendingResources;
HeapHashMap<AtomicString, Member<SVGPendingElements>> m_pendingResourcesForRemoval;

Thus when a new LayoutSVGResourcesContainer with same id is created, it is inserted into m_resources and overwrites the one with the same key(id).

Solution :
I separated these 3 HashMap/HeapHashMap from SVGDocumentExtensions and wrapped them into a new class(which I named it SVGTreeScopeResources), and let treeScope have them as member variable(Member<SVGTreeScopeResources> m_svgTreeScopedResources).
Also I moved corresponding methods using these 3 HashMap/HeapHashMap into the new class SVGTreeScopeResources.
This worked fine in my environment(mac os x version 10.11.2).

taijin@, thanks. If you can have a patch, I am happy to review your CL.

https://codereview.chromium.org/2107153002
I uploaded :)

Issue 657335 has been merged into this issue.

Referencing my merged issue (comment 8), and documenting it here rather than behind the extra click-through, this issue also affects using an SVG path via CSS' clip-path. See my codepen [1] for an example. My use-case is a custom element that clips it's child element(s) with an SVG Path via CSS. Both the SVG containing the path and the CSS applying the path to an HTML element are inside the shadow-dom.

[1] http://codepen.io/diddledan/pen/ZpqPzo

 Issue 681270  has been merged into this issue.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/8138e62d38b64d24e2220d50907b8aeb71efd32e

commit 8138e62d38b64d24e2220d50907b8aeb71efd32e
Author: fs <fs@opera.com>
Date: Mon Jan 23 15:23:12 2017

SVG objects with same idrefs conflict when under different shadow root

When SVG idrefs are the same, even though the
LayoutSVGResourcesContainers are created under different shadow roots,
they conflict and only the last one is available. The problem is that,
currently, the HashMap mapping id's to LayoutSVGResourcesContainers are
owned/scoped to the document instead of the treeScope.
This CL moves that hash map from document to treeScope, so that
LayoutSVGResourcesContainers with the same id in different shadow roots
won't conflict.

Currently the following 2 maps (which are wrapped into the
SVGDocumentExtensions class) are owned by document instead of treeScope:

  HashMap<AtomicString, LayoutSVGResourceContainer*> m_resources;
  HeapHashMap<AtomicString, Member<SVGPendingElements>> m_pendingResources;

Thus when a new LayoutSVGResourcesContainer with the same id is created,
it is inserted into m_resources and overwrites the one with the same
key (id).

This CL separates these 2 maps from SVGDocumentExtensions and wrap them
into a new class (named SVGTreeScopeResources), and lets TreeScope have
them as a member variable (m_svgTreeScopedResources).
This CL also moves the corresponding methods accessing these 2 maps into
the new class.

To make this work together with <use>, we need to make sure to use the
TreeScope of the "original" element. Move the helper from LayoutSVGTextPath
to SVGElement::treeScopeForIdResolution and then use that for this.

Based on https://codereview.chromium.org/2107153002 by Taijin Tei.

BUG= 597080 

Review-Url: https://codereview.chromium.org/2633143002
Cr-Commit-Position: refs/heads/master@{#445378}

[add] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/LayoutTests/svg/custom/shadow-dom-resource-reference-2-expected.html
[add] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/LayoutTests/svg/custom/shadow-dom-resource-reference-2.html
[add] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/LayoutTests/svg/custom/shadow-dom-resource-reference-expected.html
[add] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/LayoutTests/svg/custom/shadow-dom-resource-reference.html
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/dom/Element.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/dom/TreeScope.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/dom/TreeScope.h
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceContainer.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceContainer.h
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourcePattern.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/layout/svg/LayoutSVGTextPath.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/layout/svg/SVGResources.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/BUILD.gn
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/SVGDocumentExtensions.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/SVGDocumentExtensions.h
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/SVGElement.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/SVGElement.h
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/SVGFEImageElement.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/SVGMPathElement.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/SVGTextPathElement.cpp
[add] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/SVGTreeScopeResources.cpp
[add] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/SVGTreeScopeResources.h
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/SVGUseElement.cpp
[modify] https://crrev.com/8138e62d38b64d24e2220d50907b8aeb71efd32e/third_party/WebKit/Source/core/svg/animation/SVGSMILElement.cpp