closes #2464

riot · Nov 5, 2017 · e505714 · e505714
1 parent 2bd7d84
commit e505714
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/lib/browser/common/util/dom.js b/lib/browser/common/util/dom.js
@@ -38,12 +38,13 @@ export function createDOMPlaceholder() {
 }
 
 /**
- * Check if a DOM node is an svg tag
+ * Check if a DOM node is an svg tag or part of an svg
  * @param   { HTMLElement }  el - node we want to test
  * @returns {Boolean} true if it's an svg node
  */
 export function isSvg(el) {
-  return !!el.ownerSVGElement
+  const owner = el.ownerSVGElement
+  return !!owner || owner === null
 }
 
 /**

diff --git a/test/specs/browser/riot/each-no-keys.spec.js b/test/specs/browser/riot/each-no-keys.spec.js
@@ -85,8 +85,9 @@ describe('Riot each not keyed', function() {
 
     const tag = riot.mount('loop-svg-nodes')[0]
 
-    expect($$('svg circle', tag.root).length).to.be.equal(3)
+    expect($$('svg circle', tag.root).length).to.be.equal(5)
     expect($('svg circle',  tag.root) instanceof HTMLElement).to.be.equal(false)
+    expect($('svg .nested-circle',  tag.root) instanceof HTMLElement).to.be.equal(false)
     expect($('p',  tag.root) instanceof HTMLElement).to.be.equal(true)
 
     tag.unmount()

diff --git a/test/specs/server/index.js b/test/specs/server/index.js
@@ -109,7 +109,7 @@ describe('Node', function() {
   it('render tag: svg loops', function() {
     var svg = riot.render('loop-svg-nodes')
     var $ = cheerio.load(svg)
-    expect($('circle').length).to.be.equal(3)
+    expect($('circle').length).to.be.equal(5)
   })
 
   it('render tag: loops having conditional directives', function() {

diff --git a/test/tag/loop-svg-nodes.tag b/test/tag/loop-svg-nodes.tag
@@ -1,9 +1,22 @@
 <loop-svg-nodes>
   <svg>
     <circle each={ points } riot-cx="{ x * 10 + 5 }" riot-cy="{ y * 10 + 5 }" r="2" fill="black"></circle>
+    <loop-svg-nodes-custom-circle each={data in circles}></loop-svg-nodes-custom-circle>
   </svg>
   <p>Description</p>
 
   this.points = [{'x': 1,'y': 0}, {'x': 9, 'y': 6}, {'x': 4, 'y': 7}]
+  this.circles = [
+    {'x': 40, 'y': 20, 'fill': 'red'},
+    {'x': 60, 'y': 20, 'fill': 'yellow'},
+  ]
+</loop-svg-nodes>
 
-</loop-svg-nodes>
+<loop-svg-nodes-custom-circle>
+  <circle
+    class='nested-circle'
+    riot-cx={data.x}
+    riot-cy={data.y}
+    r="10"
+    fill={data.fill} />
+</loop-svg-nodes-custom-circle>