fixing markup in a template
[fnpeditor.git] / modules / documentCanvas / tests / canvas.test.js
index d336192..5dc017b 100644 (file)
-define([\r
-'libs/jquery-1.9.1.min',\r
-'libs/chai', \r
-'./utils.js',\r
-'modules/documentCanvas/canvas',\r
-'modules/documentCanvas/canvasNode'\r
-], function($, chai, utils, canvas, canvasNode) {\r
-\r
-    'use strict';\r
-\r
-    var assert = chai.assert;\r
-    var assertDomEqual = utils.assertDomEqual;\r
-    \r
-    \r
-    suite('Quering nodes', function() {\r
-        test('getting preceding node', function() {\r
-            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="p">a</div><div wlxml-tag="p">b</div></div>');\r
-            var secondP = c.findNodes({tag: 'p'})[1];\r
-            var firstP = c.getPrecedingNode({node: secondP});\r
-            assert.equal(firstP.getContent(), 'a');\r
-        });\r
-        \r
-       test('pervious node of node without "previous siblings" is its parent', function() {\r
-            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="p">a</div></div>');\r
-            var paragraph = c.findNodes({tag: 'p'})[0];\r
-            assert.equal(c.getPrecedingNode({node: paragraph}).getTag(), 'section');\r
-        });\r
-    \r
-    });\r
-    \r
-    \r
-    suite('Inserting nodes', function() {\r
-        test('append node to root', function() {\r
-            var c = canvas.create();\r
-            var node = canvasNode.create({tag: 'header', klass: 'some-class'});\r
-            c.nodeAppend({node: node, to: 'root'});\r
-            assertDomEqual(c.getContent(), '<div wlxml-tag="header" wlxml-class="some-class">');\r
-        }); \r
-        \r
-        test('append node to another node', function() {\r
-            var c = canvas.create('<div wlxml-tag="section"></div>');\r
-            var node = canvasNode.create({tag: 'header', klass: 'some-class'});\r
-            var to = c.findNodes('div')[0];\r
-            c.nodeAppend({node: node, to: to});\r
-            assertDomEqual(c.getContent(), '<div wlxml-tag="section"><div wlxml-tag="header" wlxml-class="some-class"></div></div>');\r
-        });\r
-        \r
-        test('insert node after another node', function() {\r
-            var c = canvas.create('<div wlxml-tag="section"></div>');\r
-            var node = canvasNode.create({tag: 'header', klass: 'some-class'});\r
-            var after = c.findNodes('div')[0];\r
-            c.nodeInsertAfter({node: node, after: after});\r
-            assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div><div wlxml-tag="header" wlxml-class="some-class"></div>');        \r
-        });\r
-        \r
-        test('wrap text in node', function() {\r
-            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');\r
-            var header = c.findNodes({tag: 'header'})[0];\r
-            var wrapper = canvasNode.create({tag: 'aside'});\r
-            c.nodeWrap({inside: header, _with: wrapper, offsetStart: 1, offsetEnd: 6})\r
-            assertDomEqual(c.getContent(), '<div wlxml-tag="section"><div wlxml-tag="header">H<span wlxml-tag="aside">eader</span> 1</div></div>');\r
-        });\r
-        \r
-        test('split node', function() {\r
-            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');\r
-            var header = c.findNodes({tag: 'header'})[0];\r
-            var newNode = c.nodeSplit({node: header, offset: 4});\r
-            assertDomEqual(c.getContent(), utils.cleanUp('\\r
-                <div wlxml-tag="section">\\r
-                    <div wlxml-tag="header">Head</div>\\r
-                    <div wlxml-tag="header">er 1</div>\\r
-                </div>'));\r
-            assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));\r
-        });\r
-        \r
-        test('split root node', function() {\r
-            var c = canvas.create('<div wlxml-tag="header">cat</div>');\r
-            var header = c.findNodes({tag: 'header'})[0];\r
-            var newNode = c.nodeSplit({node: header, offset: 1});\r
-            assertDomEqual(c.getContent(), utils.cleanUp('\\r
-                    <div wlxml-tag="header">c</div>\\r
-                    <div wlxml-tag="header">at</div>'));\r
-            assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));\r
-        });\r
-        \r
-        test('split node with subnodes', function() {\r
-            var c = canvas.create(utils.cleanUp('\\r
-                <div wlxml-tag="section">\\r
-                    <div wlxml-tag="header">Fancy and nice<span wlxml-tag="aside">header</span> 1</div>\\r
-                 </div>'));\r
-            var header = c.findNodes({tag: 'header'})[0];\r
-            var newNode = c.nodeSplit({node: header, offset: 5});\r
-            assertDomEqual(c.getContent(), utils.cleanUp('\\r
-                <div wlxml-tag="section">\\r
-                    <div wlxml-tag="header">Fancy</div>\\r
-                    <div wlxml-tag="header">and nice<span wlxml-tag="aside">header</span> 1</div>\\r
-                </div>'));\r
-        });\r
-        \r
-        test('remove node', function() {\r
-            var c = canvas.create('<div wlxml-tag="section"><span wlxml-tag="span">some text</span></div>');\r
-            var span = c.findNodes({tag: 'span'})[0];\r
-            c.nodeRemove({node: span});\r
-            assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div>');\r
-        });\r
-    });\r
-    \r
-    \r
-    suite('Lists', function() {\r
-        test('create from existing nodes', function() {\r
-            var c = canvas.create(utils.cleanUp('\\r
-                <div wlxml-tag="section">\\r
-                    <div wlxml-tag="div">alice</div>\\r
-                    has\\r
-                    <div wlxml-tag="div">a</div>\\r
-                    <div wlxml-tag="div">cat</div>\\r
-                    <div wlxml-tag="div">or not</div>\\r
-                </div>'\r
-            ));\r
-            \r
-            var div_alice = c.findNodes({tag: 'div'})[0];\r
-            var div_cat = c.findNodes({tag:'div'})[2];\r
-            \r
-            c.listCreate({start: div_alice, end: div_cat});\r
-            \r
-            assertDomEqual(c.getContent(), utils.cleanUp('\\r
-                <div wlxml-tag="section">\\r
-                    <div wlxml-tag="div" wlxml-class="list-items">\\r
-                        <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">has</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">a</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
-                    </div>\\r
-                    <div wlxml-tag="div">or not</div>\\r
-                </div>'));\r
-        });\r
-        \r
-        test('create from existing nodes - start/end order doesn\'t matter', function() {\r
-            var html = utils.cleanUp('\\r
-                    <div wlxml-tag="div">alice</div>\\r
-                    <div wlxml-tag="div">cat</div>');\r
-            var expected = utils.cleanUp('\\r
-                    <div wlxml-tag="div" wlxml-class="list-items">\\r
-                        <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
-                    </div>');\r
-                    \r
-            var c = canvas.create(html);\r
-            var div_alice = c.findNodes({tag: 'div'})[0];\r
-            var div_cat = c.findNodes({tag:'div'})[1];\r
-            c.listCreate({start: div_cat, end: div_alice});\r
-            assertDomEqual(c.getContent(), expected);\r
-            \r
-            c = canvas.create(html);\r
-            div_alice = c.findNodes({tag: 'div'})[0];\r
-            div_cat = c.findNodes({tag:'div'})[1];\r
-            c.listCreate({start: div_alice, end: div_cat});\r
-            assertDomEqual(c.getContent(), expected);\r
-        });\r
-        \r
-        test('remove', function() {\r
-            var c = canvas.create(utils.cleanUp('\\r
-                <div wlxml-tag="section">\\r
-                    <div wlxml-tag="div" wlxml-class="list-items">\\r
-                        <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
-                    </div>\\r
-                </div>'));\r
-            var item = c.findNodes({klass: 'item'})[1];\r
-            c.listRemove({pointer: item});\r
-            assertDomEqual(c.getContent(), utils.cleanUp('\\r
-                <div wlxml-tag="section">\\r
-                    <div wlxml-tag="div">alice</div>\\r
-                    <div wlxml-tag="div">cat</div>\\r
-                </div>'));\r
-        });\r
-        \r
-        test('checking if node is inside a list', function() {\r
-            var c = canvas.create(utils.cleanUp('\\r
-                <div wlxml-tag="section">\\r
-                    <div wlxml-tag="div" wlxml-class="list-items-enum">\\r
-                        <div wlxml-tag="div" wlxml-class="item">alice <span wlxml-tag="span"></span</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
-                    </div>\\r
-                </div>'));\r
-            assert.ok(c.nodeInsideList({node: c.findNodes({klass: 'item'})[1]}), 'item is inside a list');\r
-            assert.ok(c.nodeInsideList({node: c.findNodes({tag: 'span'})[0]}), 'things nested in item are inside a list');\r
-        });\r
-        \r
-        test('moving items to nested list', function() {\r
-            var listHTML = utils.cleanUp('\\r
-                    <div wlxml-tag="div" wlxml-class="list-items">\\r
-                        <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
-                    </div>');\r
-            var c = canvas.create(listHTML);\r
-            var items = c.findNodes({klass: 'item'});\r
-            var cat_item = items[1];\r
-            var dog_item = items[2];\r
-            \r
-            c.listCreate({start: cat_item, end: dog_item});\r
-            \r
-            assertDomEqual(c.getContent(), utils.cleanUp('\\r
-                    <div wlxml-tag="div" wlxml-class="list-items">\\r
-                        <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item" class="canvas-silent-item">\\r
-                            <div wlxml-tag="div" wlxml-class="list-items">\\r
-                                <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
-                                <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
-                            </div>\\r
-                        </div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
-                    </div>'\r
-            ));\r
-        });\r
-        \r
-        test('removing nested list', function() {\r
-            var nestedList = utils.cleanUp('\\r
-                    <div wlxml-tag="div" wlxml-class="list-items">\\r
-                        <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">\\r
-                            <div wlxml-tag="div" wlxml-class="list-items">\\r
-                                <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
-                                <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
-                            </div>\\r
-                        </div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
-                    </div>');\r
-                    \r
-            var c = canvas.create(nestedList);\r
-            var dog_item = c.findNodes('[wlxml-class=list-items] [wlxml-class=list-items] > div')[1];\r
-            assert.equal(dog_item.getContent(), 'dog');\r
-            \r
-            c.listRemove({pointer: dog_item});\r
-            \r
-            assertDomEqual(c.getContent(), utils.cleanUp('\\r
-                    <div wlxml-tag="div" wlxml-class="list-items">\\r
-                        <div wlxml-tag="div" wlxml-class="item">alice</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">cat</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">dog</div>\\r
-                        <div wlxml-tag="div" wlxml-class="item">bee</div>\\r
-                    </div>'));\r
-            \r
-            \r
-        });\r
-    });\r
+define([
+'libs/jquery-1.9.1.min',
+'libs/chai', 
+'./utils.js',
+'modules/documentCanvas/canvas',
+'modules/documentCanvas/canvasNode'
+], function($, chai, utils, canvas, canvasNode) {
+
+    'use strict';
+
+    var assert = chai.assert;
+    var assertDomEqual = utils.assertDomEqual;
+    
+    
+    suite('Quering nodes', function() {
+        test('getting preceding node', function() {
+            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="p">a</div><div wlxml-tag="p">b</div></div>');
+            var secondP = c.findNodes({tag: 'p'})[1];
+            var firstP = c.getPrecedingNode({node: secondP});
+            assert.equal(firstP.getContent(), 'a');
+        });
+        
+       test('pervious node of node without "previous siblings" is its parent', function() {
+            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="p">a</div></div>');
+            var paragraph = c.findNodes({tag: 'p'})[0];
+            assert.equal(c.getPrecedingNode({node: paragraph}).getTag(), 'section');
+        });
+    
+    });
+    
+    
+    suite('Inserting nodes', function() {
+        test('append node to root', function() {
+            var c = canvas.create();
+            var node = canvasNode.create({tag: 'header', klass: 'some-class'});
+            c.nodeAppend({node: node, to: 'root'});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="header" wlxml-class="some-class">');
+        }); 
+        
+        test('append node to another node', function() {
+            var c = canvas.create('<div wlxml-tag="section"></div>');
+            var node = canvasNode.create({tag: 'header', klass: 'some-class'});
+            var to = c.findNodes('div')[0];
+            c.nodeAppend({node: node, to: to});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="section"><div wlxml-tag="header" wlxml-class="some-class"></div></div>');
+        });
+        
+        test('insert node after another node', function() {
+            var c = canvas.create('<div wlxml-tag="section"></div>');
+            var node = canvasNode.create({tag: 'header', klass: 'some-class'});
+            var after = c.findNodes('div')[0];
+            c.nodeInsertAfter({node: node, after: after});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div><div wlxml-tag="header" wlxml-class="some-class"></div>');        
+        });
+        
+        test('wrap text in node', function() {
+            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');
+            var header = c.findNodes({tag: 'header'})[0];
+            var wrapper = canvasNode.create({tag: 'aside'});
+            c.nodeWrap({inside: header, _with: wrapper, offsetStart: 1, offsetEnd: 6});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="section"><div wlxml-tag="header">H<span wlxml-tag="aside">eader</span> 1</div></div>');
+        });
+        
+        test('wrap text in node - text not a first node', function() {
+            var c = canvas.create('<div wlxml-tag="header">Alice <span wlxml-tag="span">has a</span> cat</div>');
+            var header = c.findNodes({tag: 'header'})[0];
+            var wrapper = canvasNode.create({tag: 'aside'});
+            c.nodeWrap({inside: header, _with: wrapper, offsetStart: 1, offsetEnd: 4, textNodeIdx: 2});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="header">Alice <span wlxml-tag="span">has a</span> <span wlxml-tag="aside">cat</span></div>');
+        });
+        
+        test('wrap text with nodes inside', function() {
+            var c = canvas.create('<div wlxml-tag="header">Alice has a <span wlxml-tag="span">small</span> cat</div>');
+            var header = c.findNodes({tag: 'header'})[0];
+            var wrapper = canvasNode.create({tag: 'aside'});
+            c.nodeWrap({inside: header, _with: wrapper, offsetStart: 6, offsetEnd: 4, textNodeIdx: [0,2]});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="header">Alice <span wlxml-tag="aside">has a <span wlxml-tag="span">small</span> cat</span></div>');            
+        });
+
+        test('unwrap text', function() {
+            var c = canvas.create('<div wlxml-tag="div">Alice <span wlxml-tag="span">has</span> a cat</div>');
+            var span = c.findNodes({tag:'span'})[0];
+            c.nodeUnwrap({node: span});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="div">Alice has a cat</div>');
+        });
+
+        test('unwrap text - first text node', function() {
+            var c = canvas.create('<div wlxml-tag="div"><span wlxml-tag="span">Alice</span> has a cat</div>');
+            var span = c.findNodes({tag:'span'})[0];
+            c.nodeUnwrap({node: span});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="div">Alice has a cat</div>'); 
+        });
+
+        test('unwrap text - only text node', function() {
+            var c = canvas.create('<div wlxml-tag="div"><span wlxml-tag="span">Alice</span></div>');
+            var span = c.findNodes({tag:'span'})[0];
+            c.nodeUnwrap({node: span});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="div">Alice</div>'); 
+        });
+
+
+        test('unwrap text - non text neighbours', function() {
+            var c = canvas.create('<div wlxml-tag="div"><div wlxml-tag"div">a</div><span wlxml-tag="span">Alice</span><div wlxml-tag"div">b</div></div>');
+            var span = c.findNodes({tag:'span'})[0];
+            c.nodeUnwrap({node: span});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="div"><div wlxml-tag"div">a</div>Alice<div wlxml-tag"div">b</div></div>'); 
+        });
+        
+        test('split node', function() {
+            var c = canvas.create('<div wlxml-tag="section"><div wlxml-tag="header">Header 1</div></div>');
+            var header = c.findNodes({tag: 'header'})[0];
+            var newNode = c.nodeSplit({node: header, offset: 4});
+            assertDomEqual(c.getContent(), utils.cleanUp('\
+                <div wlxml-tag="section">\
+                    <div wlxml-tag="header">Head</div>\
+                    <div wlxml-tag="header">er 1</div>\
+                </div>'));
+            assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));
+        });
+        
+        test('split root node', function() {
+            var c = canvas.create('<div wlxml-tag="header">cat</div>');
+            var header = c.findNodes({tag: 'header'})[0];
+            var newNode = c.nodeSplit({node: header, offset: 1});
+            assertDomEqual(c.getContent(), utils.cleanUp('\
+                    <div wlxml-tag="header">c</div>\
+                    <div wlxml-tag="header">at</div>'));
+            assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1]));
+        });
+        
+        test('split node with subnodes', function() {
+            var c = canvas.create(utils.cleanUp('\
+                <div wlxml-tag="section">\
+                    <div wlxml-tag="header">Fancy and nice<span wlxml-tag="aside">header</span> 1</div>\
+                 </div>'));
+            var header = c.findNodes({tag: 'header'})[0];
+            var newNode = c.nodeSplit({node: header, offset: 5});
+            assertDomEqual(c.getContent(), utils.cleanUp('\
+                <div wlxml-tag="section">\
+                    <div wlxml-tag="header">Fancy</div>\
+                    <div wlxml-tag="header">and nice<span wlxml-tag="aside">header</span> 1</div>\
+                </div>'));
+        });
+        
+        test('remove node', function() {
+            var c = canvas.create('<div wlxml-tag="section"><span wlxml-tag="span">some text</span></div>');
+            var span = c.findNodes({tag: 'span'})[0];
+            c.nodeRemove({node: span});
+            assertDomEqual(c.getContent(), '<div wlxml-tag="section"></div>');
+        });
+    });
+    
+    
+    suite('Lists', function() {
+        test('create from existing nodes', function() {
+            var c = canvas.create(utils.cleanUp('\
+                <div wlxml-tag="section">\
+                    <div wlxml-tag="div">alice</div>\
+                    has\
+                    <div wlxml-tag="div">a</div>\
+                    <div wlxml-tag="div">cat</div>\
+                    <div wlxml-tag="div">or not</div>\
+                </div>'
+            ));
+            
+            var div_alice = c.findNodes({tag: 'div'})[0];
+            var div_cat = c.findNodes({tag:'div'})[2];
+            
+            c.listCreate({start: div_alice, end: div_cat});
+            
+            assertDomEqual(c.getContent(), utils.cleanUp('\
+                <div wlxml-tag="section">\
+                    <div wlxml-tag="div" wlxml-class="list-items">\
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\
+                        <div wlxml-tag="div" wlxml-class="item">has</div>\
+                        <div wlxml-tag="div" wlxml-class="item">a</div>\
+                        <div wlxml-tag="div" wlxml-class="item">cat</div>\
+                    </div>\
+                    <div wlxml-tag="div">or not</div>\
+                </div>'));
+        });
+        
+        test('create from existing nodes - start/end order doesn\'t matter', function() {
+            var html = utils.cleanUp('\
+                    <div wlxml-tag="div">alice</div>\
+                    <div wlxml-tag="div">cat</div>');
+            var expected = utils.cleanUp('\
+                    <div wlxml-tag="div" wlxml-class="list-items">\
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\
+                        <div wlxml-tag="div" wlxml-class="item">cat</div>\
+                    </div>');
+                    
+            var c = canvas.create(html);
+            var div_alice = c.findNodes({tag: 'div'})[0];
+            var div_cat = c.findNodes({tag:'div'})[1];
+            c.listCreate({start: div_cat, end: div_alice});
+            assertDomEqual(c.getContent(), expected);
+            
+            c = canvas.create(html);
+            div_alice = c.findNodes({tag: 'div'})[0];
+            div_cat = c.findNodes({tag:'div'})[1];
+            c.listCreate({start: div_alice, end: div_cat});
+            assertDomEqual(c.getContent(), expected);
+        });
+        
+        test('remove', function() {
+            var c = canvas.create(utils.cleanUp('\
+                <div wlxml-tag="section">\
+                    <div wlxml-tag="div" wlxml-class="list-items">\
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\
+                        <div wlxml-tag="div" wlxml-class="item">cat</div>\
+                    </div>\
+                </div>'));
+            var item = c.findNodes({klass: 'item'})[1];
+            c.listRemove({pointer: item});
+            assertDomEqual(c.getContent(), utils.cleanUp('\
+                <div wlxml-tag="section">\
+                    <div wlxml-tag="div">alice</div>\
+                    <div wlxml-tag="div">cat</div>\
+                </div>'));
+        });
+        
+        test('checking if node is inside a list', function() {
+            var c = canvas.create(utils.cleanUp('\
+                <div wlxml-tag="section">\
+                    <div wlxml-tag="div" wlxml-class="list-items-enum">\
+                        <div wlxml-tag="div" wlxml-class="item">alice <span wlxml-tag="span"></span</div>\
+                        <div wlxml-tag="div" wlxml-class="item">cat</div>\
+                    </div>\
+                </div>'));
+            assert.ok(c.nodeInsideList({node: c.findNodes({klass: 'item'})[1]}), 'item is inside a list');
+            assert.ok(c.nodeInsideList({node: c.findNodes({tag: 'span'})[0]}), 'things nested in item are inside a list');
+        });
+        
+        test('moving items to nested list', function() {
+            var listHTML = utils.cleanUp('\
+                    <div wlxml-tag="div" wlxml-class="list-items">\
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\
+                        <div wlxml-tag="div" wlxml-class="item">cat</div>\
+                        <div wlxml-tag="div" wlxml-class="item">dog</div>\
+                        <div wlxml-tag="div" wlxml-class="item">bee</div>\
+                    </div>');
+            var c = canvas.create(listHTML);
+            var items = c.findNodes({klass: 'item'});
+            var cat_item = items[1];
+            var dog_item = items[2];
+            
+            c.listCreate({start: cat_item, end: dog_item});
+            
+            assertDomEqual(c.getContent(), utils.cleanUp('\
+                    <div wlxml-tag="div" wlxml-class="list-items">\
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\
+                        <div wlxml-tag="div" wlxml-class="item" class="canvas-silent-item">\
+                            <div wlxml-tag="div" wlxml-class="list-items">\
+                                <div wlxml-tag="div" wlxml-class="item">cat</div>\
+                                <div wlxml-tag="div" wlxml-class="item">dog</div>\
+                            </div>\
+                        </div>\
+                        <div wlxml-tag="div" wlxml-class="item">bee</div>\
+                    </div>'
+            ));
+        });
+        
+        test('removing nested list', function() {
+            var nestedList = utils.cleanUp('\
+                    <div wlxml-tag="div" wlxml-class="list-items">\
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\
+                        <div wlxml-tag="div" wlxml-class="item">\
+                            <div wlxml-tag="div" wlxml-class="list-items">\
+                                <div wlxml-tag="div" wlxml-class="item">cat</div>\
+                                <div wlxml-tag="div" wlxml-class="item">dog</div>\
+                            </div>\
+                        </div>\
+                        <div wlxml-tag="div" wlxml-class="item">bee</div>\
+                    </div>');
+                    
+            var c = canvas.create(nestedList);
+            var dog_item = c.findNodes('[wlxml-class=list-items] [wlxml-class=list-items] > div')[1];
+            assert.equal(dog_item.getContent(), 'dog');
+            
+            c.listRemove({pointer: dog_item});
+            
+            assertDomEqual(c.getContent(), utils.cleanUp('\
+                    <div wlxml-tag="div" wlxml-class="list-items">\
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\
+                        <div wlxml-tag="div" wlxml-class="item">cat</div>\
+                        <div wlxml-tag="div" wlxml-class="item">dog</div>\
+                        <div wlxml-tag="div" wlxml-class="item">bee</div>\
+                    </div>'));
+            
+            
+        });
+
+        test('removing list containing nested list', function() {
+            var nestedList = utils.cleanUp('\
+                <div wlxml-tag="section">\
+                    <div wlxml-tag="div" wlxml-class="list-items">\
+                        <div wlxml-tag="div" wlxml-class="item">alice</div>\
+                        <div wlxml-tag="div" wlxml-class="item">\
+                            <div wlxml-tag="div" wlxml-class="list-items">\
+                                <div wlxml-tag="div" wlxml-class="item">cat</div>\
+                                <div wlxml-tag="div" wlxml-class="item">dog</div>\
+                            </div>\
+                        </div>\
+                        <div wlxml-tag="div" wlxml-class="item">bee</div>\
+                    </div>\
+                </div>');
+                    
+            var c = canvas.create(nestedList);
+            var alice_item = c.findNodes('[wlxml-class=list-items] > div')[0];
+            assert.equal(alice_item.getContent(), 'alice');
+            
+            c.listRemove({pointer: alice_item});
+            
+            assertDomEqual(c.getContent(), utils.cleanUp('\
+                    <div wlxml-tag="section">\
+                        <div wlxml-tag="div">alice</div>\
+                        <div wlxml-tag="div">cat</div>\
+                        <div wlxml-tag="div">dog</div>\
+                        <div wlxml-tag="div">bee</div>\
+                    </div>'));
+            
+            
+        });
+    });
 });
\ No newline at end of file
 });
\ No newline at end of file