Merge branch 'heads/v2.1.2'

* heads/v2.1.2:
  setViewBox() does not work properly for papers, having size in percents
  getBBox() works incorrect for VML after settings View Box on canvas
  IE 11 parentElement fix
  fix the error/memleak in Firefox 3.0.x and 25.0.1 concerning the getBBox method
  Several Fixes
  Added couple of fixes, and unused jshintrc
  Fix SVG insertBefore/insertAfter when using <a> wrapper node.
  Use dev folder for 'npm install' in the Quickstart.
  By @badunk Setting aspect ratio to xMidYMid meet
  Merging TheCloudlessSky-prevent-multiple-svg-title
  IE8 / R2.0.1 - viewbox scaling
  Removing extra code in html
  href parameter for Paper.text does NOT behave like hyperlink in 2.1.2
  Change the version in bower.json to match the tag name.
  Final fix for #629
  Fix bug with arrow-end/start markers sharing properties. By @vkaravir
  AddEvent function incorrectly removes touch event listener. By @ThijsVanDerMeer
  IE8: getBBox returns orginal coordinates for a path after drag and setting new path. By @wyatte
  Issue #768 - Str(value).match(R._ISURL) returns null for valid url

Conflicts:
	dev/raphael.svg.js
	raphael-min.js

README.markdown

-# Raphaël: Cross-browser vector graphics the easy way. 
+# Raphaël: Cross-browser vector graphics the easy way.
 
 Visit the library website for more information: [http://raphaeljs.com](http://raphaeljs.com/)
 
 ## Quickstart guide
 
 * `git clone https://github.com/DmitryBaranovskiy/raphael.git`
-* `git submodule init && git submodule update && npm install`
+* `git submodule init && git submodule update && cd dev && npm install`
 
 ## Dependencies
 * [eve](https://github.com/adobe-webplatform/eve)
@@ -24,32 +24,25 @@ define([ "path/to/raphael" ], function( Raphael ) {
 
 ## Development
 
-At the moment we have 4 milestones:
+Versions will be released as we gather and test new PRs. Each version should have a correspondent branch.
+As there are not automated tests, we will use the feedback from the users for the fixes.
 
-### v2.1.2
-Milestone for bug fixes from contributors pull requests.
-### v2.2.0
-Milestone for enhancements from contributors pull requests.
-### v2.2.1
-Milestone with bug fixes added from issues created by community.
-This fixes were not provided in the issues.
-### v2.3.0
-Milestone with enhancements suggested in issues but not provided by community at those issues.
-
-We are organizing the current issues between this milestones, setting the grounds for people to contribute and start pushing code soon.
+You can use the `raphaelTest.html` to try things, you need to start a server in the root dir to start testing things there.
+Something like running `python -m SimpleHTTPServer` in the `raphael` directory and hitting `http://localhost:8000/dev/raphaelTest.html` with the browser.
 
 ## Want to contribute?
 
-All changes in code must go to `raphael.core`, `raphael.svg` or `raphael.vml`. `raphael.js` is a generated file.
+All changes in code must go to `raphael.core`, `raphael.svg` or `raphael.vml`.
+`raphael.js` and `raphael-min.js` are generated files, generated after running `grunt` in the `dev` directory.
 
-After changing the core/vml/svg files, execute `grunt` in the dev folder to generate the minified version, commit and you are ready to make a pull request!
+After changing the core/vml/svg files, execute `grunt` in the dev folder to generate the minified version, make a commit and you are ready to make a pull request!
 Remember that if you want to add a functionality it must be present in the vml and svg versions, **no svg-only features will be accepted.**
 
 ## Found an issue?
 
 First search for similar issues to make sure you don't repeat an existing one.
 
-Then please create a fiddle ([boilerplate](http://jsfiddle.net/SSJJT/)) recreating the bug so we can find out what the problem is more easily (or be a hero and find it yourself and send a pull request!). You can also use the [raphael playground](http://raphaeljs.com/playground.html) to reproduce your issues.
+Then please create a fiddle ([jsfiddle](http://jsfiddle.net/SSJJT/)) recreating the bug so we can find out what the problem is more easily (or be a hero and find it yourself and send a pull request!). You can also use the [raphael playground](http://raphaeljs.com/playground.html) to reproduce your issues.
 
 Remember to add all the info that can be useful such as
 
@@ -78,8 +71,8 @@ Remember to add all the info that can be useful such as
 
 ## Copyright and license
 
-Copyright © 2008-2013 Dmitry Baranovskiy (http://raphaeljs.com) 
+Copyright © 2008-2013 Dmitry Baranovskiy (http://raphaeljs.com)
 
-Copyright © 2008-2013 Sencha Labs (http://sencha.com)  
+Copyright © 2008-2013 Sencha Labs (http://sencha.com)
 
-Licensed under the **MIT** (http://raphaeljs.com/license.html) license.
\ No newline at end of file
+Licensed under the **MIT** (http://raphaeljs.com/license.html) license.

bower.json

 {
   "name": "raphael",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "main": "raphael.js",
   "ignore": [
     "eve",

dev/.jshintrc

+{
+  "curly": true,
+  "eqnull": true,
+  "eqeqeq": true,
+  "undef": true,
+  "indent": 4,
+  "unused": true,
+  "globals": {
+    "eve": true
+  }
+}
\ No newline at end of file

dev/Gruntfile.js

@@ -10,6 +10,13 @@ module.exports = function(grunt) {
         pkg: pkg,
         banner: grunt.file.read("copy.js").replace(/@VERSION/, pkg.version),
         // Task configuration.
+        jshint: {
+            beforeconcat: ['raphael.core.js', 'raphael.svg.js', 'raphael.vml.js'],
+            afterconcat: ['dist/raphael.js'],
+            "options": {
+                jshintrc: '.jshintrc'
+            }
+        },
         uglify: {
             options: {
                 banner: "<%= banner %>"
@@ -38,8 +45,9 @@ module.exports = function(grunt) {
 
     // These plugins provide necessary tasks.
     grunt.loadNpmTasks("grunt-contrib-uglify");
+    grunt.loadNpmTasks('grunt-contrib-jshint');
 
-    // Special concat/build task to handle Raphael's build requirements
+  // Special concat/build task to handle Raphael's build requirements
     grunt.registerMultiTask(
         "build",
         "Concatenate source, remove individual closures, embed version",
@@ -87,5 +95,5 @@ module.exports = function(grunt) {
         });
 
     // Default task.
-    grunt.registerTask("default", ["build", "uglify"]);
+    grunt.registerTask("default", ["build", /*"jshint",*/ "uglify"]); //Removed jshint because of too many errors, improving little by little...
 };

dev/amdDev.js

 require(['../raphael'], function(Raphael){
     var paper = Raphael(0, 0, 640, 720, "container");
+    //paper.circle(100, 100, 100); //example
 
     // Work here
-
-});
\ No newline at end of file
+});

dev/package.json

 {
   "name": "raphael",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "JavaScript Vector Library",
   "main": "raphael.js",
   "scripts": {
@@ -16,6 +16,7 @@
   "gitHead": "52bff469f60988f1391e8b3d7cb5349163df8ba1",
   "devDependencies": {
     "grunt": "~0.4.1",
-    "grunt-contrib-uglify": "~0.2.0"
+    "grunt-contrib-uglify": "~0.2.0",
+    "grunt-contrib-jshint": "~0.7.1"
   }
 }

dev/raphael.core.js

@@ -167,7 +167,7 @@
         objectToString = Object.prototype.toString,
         paper = {},
         push = "push",
-        ISURL = R._ISURL = /^url\(['"]?([^\)]+?)['"]?\)$/i,
+        ISURL = R._ISURL = /^url\(['"]?(.+?)['"]?\)$/i,
         colourRegExp = /^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgba?\(\s*([\d\.]+%?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+%?)?)\s*\)|hsba?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?)%?\s*\)|hsla?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?)%?\s*\))\s*$/i,
         isnan = {"NaN": 1, "Infinity": 1, "-Infinity": 1},
         bezierrg = /^(?:cubic-)?bezier\(([^,]+),([^,]+),([^,]+),([^\)]+)\)/,
@@ -2043,6 +2043,8 @@
                         pp[i].shift();
                         var pi = pp[i];
                         while (pi.length) {
+                            pcoms1[i]="A"; // if created multiple C:s, their original seg is saved
+                            p2 && (pcoms2[i]="A"); // the same as above
                             pp.splice(i++, 0, ["C"][concat](pi.splice(0, 6)));
                         }
                         pp.splice(i, 1);
@@ -2058,12 +2060,40 @@
                         a1.y = path1[i][2];
                         ii = mmax(p.length, p2 && p2.length || 0);
                     }
-                };
+                },
+                pcoms1 = [], // path commands of original path p
+                pcoms2 = [], // path commands of original path p2
+                pfirst = "", // temporary holder for original path command
+                pcom = ""; // holder for previous path command of original path
             for (var i = 0, ii = mmax(p.length, p2 && p2.length || 0); i < ii; i++) {
-                p[i] = processPath(p[i], attrs);
-                fixArc(p, i);
-                p2 && (p2[i] = processPath(p2[i], attrs2));
-                p2 && fixArc(p2, i);
+                p[i] && (pfirst = p[i][0]); // save current path command
+
+                if (pfirst != "C") // C is not saved yet, because it may be result of conversion
+                {
+                    pcoms1[i] = pfirst; // Save current path command
+                    i && ( pcom = pcoms1[i-1]); // Get previous path command pcom
+                }
+                p[i] = processPath(p[i], attrs, pcom); // Previous path command is inputted to processPath
+
+                if (pcoms1[i] != "A" && pfirst == "C") pcoms1[i] = "C"; // A is the only command
+                // which may produce multiple C:s
+                // so we have to make sure that C is also C in original path
+
+                fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1
+
+                if (p2) { // the same procedures is done to p2
+                    p2[i] && (pfirst = p2[i][0]);
+                    if (pfirst != "C")
+                    {
+                        pcoms2[i] = pfirst;
+                        i && (pcom = pcoms2[i-1]);
+                    }
+                    p2[i] = processPath(p2[i], attrs2, pcom);
+
+                    if (pcoms2[i]!="A" && pfirst=="C") pcoms2[i]="C";
+
+                    fixArc(p2, i);
+                }
                 fixM(p, p2, attrs, attrs2, i);
                 fixM(p2, p, attrs2, attrs, i);
                 var seg = p[i],
@@ -2746,7 +2776,7 @@
                     obj.removeEventListener(type, f, false);
 
                     if (supportsTouch && touchMap[type])
-                        obj.removeEventListener(touchMap[type], f, false);
+                        obj.removeEventListener(touchMap[type], _f, false);
 
                     return true;
                 };
@@ -3470,6 +3500,21 @@
         return out;
     };
     /*\
+     * Paper.getSize
+     [ method ]
+     **
+     * Obtains current paper actual size.
+     **
+     = (object)
+     \*/
+    paperproto.getSize = function () {
+        var container = this.canvas.parentNode;
+        return {
+            width: container.offsetWidth,
+            height: container.offsetHeight
+                };
+        };
+    /*\
      * Paper.setSize
      [ method ]
      **
@@ -4603,7 +4648,21 @@
             p[attr] = params[attr];
         }
         if (!json) {
-            return new Animation(params, ms);
+            // if percent-like syntax is used and end-of-all animation callback used
+            if(callback){
+                // find the last one
+                var lastKey = 0;
+                for(var i in params){
+                    var percent = toInt(i);
+                    if(params[has](i) && percent > lastKey){
+                        lastKey = percent;
+                    }
+                }
+                lastKey += '%';
+                // if already defined callback in the last keyframe, skip
+                !params[lastKey].callback && (params[lastKey].callback = callback);
+            }
+          return new Animation(params, ms);
         } else {
             easing && (p.easing = easing);
             callback && (p.callback = callback);
@@ -5352,6 +5411,11 @@
      | paper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red();
     \*/
     R.st = setproto;
+
+    eve.on("raphael.DOMload", function () {
+        loaded = true;
+    });
+
     // Firefox <3.6 fix: http://webreflection.blogspot.com/2009/11/195-chars-to-help-lazy-loading.html
     (function (doc, loaded, f) {
         if (doc.readyState == null && doc.addEventListener){
@@ -5367,10 +5431,6 @@
         isLoaded();
     })(document, "DOMContentLoaded");
 
-    eve.on("raphael.DOMload", function () {
-        loaded = true;
-    });
-
     // EXPOSE
     // SVG and VML are appended just before the EXPOSE line
     // Even with AMD, Raphael should be defined globally

dev/raphael.svg.js

@@ -127,7 +127,7 @@ window.Raphael && window.Raphael.svg && function(R) {
             }
         }
         $(o, {
-            fill: "url(#" + id + ")",
+            fill: "url(" + document.location + "#" + id + ")",
             opacity: 1,
             "fill-opacity": 1
         });
@@ -204,7 +204,7 @@ window.Raphael && window.Raphael.svg && function(R) {
             }
             if (type != "none") {
                 var pathId = "raphael-marker-" + type,
-                    markerId = "raphael-marker-" + se + type + w + h + o.id;
+                    markerId = "raphael-marker-" + se + type + w + h + "-obj" + o.id;
                 if (!R._g.doc.getElementById(pathId)) {
                     p.defs.appendChild($($("path"), {
                         "stroke-linecap": "round",
@@ -461,9 +461,6 @@ window.Raphael && window.Raphael.svg && function(R) {
                         if (o._.sx != 1 || o._.sy != 1) {
                             value /= mmax(abs(o._.sx), abs(o._.sy)) || 1;
                         }
-                        if (o.paper._vbSize) {
-                            value *= o.paper._vbSize;
-                        }
                         node.setAttribute(att, value);
                         if (attrs["stroke-dasharray"]) {
                             addDashes(o, attrs["stroke-dasharray"], params);
@@ -604,6 +601,13 @@ window.Raphael && window.Raphael.svg && function(R) {
             dif = a.y - (bb.y + bb.height / 2);
         dif && R.is(dif, "finite") && $(tspans[0], {dy: dif});
     },
+    getRealNode = function (node) {
+        if (node.parentNode && node.parentNode.tagName.toLowerCase() === "a") {
+            return node.parentNode;
+        } else {
+            return node;
+        }
+    }
     Element = function (node, svg) {
         var X = 0,
             Y = 0;
@@ -881,7 +885,8 @@ window.Raphael && window.Raphael.svg && function(R) {
      * Removes element from the paper.
     \*/
     elproto.remove = function () {
-        if (this.removed || !this.node.parentNode) {
+        var node = getRealNode(this.node);
+        if (this.removed || !node.parentNode) {
             return;
         }
         var paper = this.paper;
@@ -891,11 +896,8 @@ window.Raphael && window.Raphael.svg && function(R) {
             paper.defs.removeChild(this.gradient);
         }
         R._tear(this, paper);
-        if (this.node.parentNode.tagName.toLowerCase() == "a") {
-            this.node.parentNode.parentNode.removeChild(this.node.parentNode);
-        } else {
-            this.node.parentNode.removeChild(this.node);
-        }
+
+        node.parentNode.removeChild(node);
 
         // Remove custom data for element
         this.removeData();
@@ -910,13 +912,35 @@ window.Raphael && window.Raphael.svg && function(R) {
             this.show();
             var hide = true;
         }
+        var canvasHidden = false,
+            containerStyle;
+        if (this.paper.canvas.parentElement) {
+          containerStyle = this.paper.canvas.parentElement.style;
+        } //IE10+ can't find parentElement
+        else if (this.paper.canvas.parentNode) {
+          containerStyle = this.paper.canvas.parentNode.style;
+        }
+
+        if(containerStyle && containerStyle.display == "none") {
+          canvasHidden = true;
+          containerStyle.display = "";
+        }
         var bbox = {};
         try {
             bbox = this.node.getBBox();
         } catch(e) {
-            // Firefox 3.0.x plays badly here
+            // Firefox 3.0.x, 25.0.1 (probably more versions affected) play badly here - possible fix
+            bbox = {
+                x: this.node.clientLeft,
+                y: this.node.clientTop,
+                width: this.node.clientWidth,
+                height: this.node.clientHeight
+            }
         } finally {
             bbox = bbox || {};
+            if(canvasHidden){
+              containerStyle.display = "none";
+            }
         }
         hide && this.hide();
         return bbox;
@@ -1073,11 +1097,8 @@ window.Raphael && window.Raphael.svg && function(R) {
         if (this.removed) {
             return this;
         }
-        if (this.node.parentNode.tagName.toLowerCase() == "a") {
-            this.node.parentNode.parentNode.appendChild(this.node.parentNode);
-        } else {
-            this.node.parentNode.appendChild(this.node);
-        }
+        var node = getRealNode(this.node);
+        node.parentNode.appendChild(node);
         var svg = this.paper;
         svg.top != this && R._tofront(this, svg);
         return this;
@@ -1093,12 +1114,9 @@ window.Raphael && window.Raphael.svg && function(R) {
         if (this.removed) {
             return this;
         }
-        var parent = this.node.parentNode;
-        if (parent.tagName.toLowerCase() == "a") {
-            parent.parentNode.insertBefore(this.node.parentNode, this.node.parentNode.parentNode.firstChild);
-        } else if (parent.firstChild != this.node) {
-            parent.insertBefore(this.node, this.node.parentNode.firstChild);
-        }
+        var node = getRealNode(this.node);
+        var parentNode = node.parentNode;
+        parentNode.insertBefore(node, parentNode.firstChild);
         R._toback(this, this.paper);
         var svg = this.paper;
         return this;
@@ -1111,14 +1129,16 @@ window.Raphael && window.Raphael.svg && function(R) {
      = (object) @Element
     \*/
     elproto.insertAfter = function (element) {
-        if (this.removed) {
+        if (this.removed || !element) {
             return this;
         }
-        var node = element.node || element[element.length - 1].node;
-        if (node.nextSibling) {
-            node.parentNode.insertBefore(this.node, node.nextSibling);
+
+        var node = getRealNode(this.node);
+        var afterNode = getRealNode(element.node || element[element.length - 1].node);
+        if (afterNode.nextSibling) {
+            afterNode.parentNode.insertBefore(node, afterNode.nextSibling);
         } else {
-            node.parentNode.appendChild(this.node);
+            afterNode.parentNode.appendChild(node);
         }
         R._insertafter(this, element, this.paper);
         return this;
@@ -1131,11 +1151,13 @@ window.Raphael && window.Raphael.svg && function(R) {
      = (object) @Element
     \*/
     elproto.insertBefore = function (element) {
-        if (this.removed) {
+        if (this.removed || !element) {
             return this;
         }
-        var node = element.node || element[0].node;
-        node.parentNode.insertBefore(this.node, node);
+
+        var node = getRealNode(this.node);
+        var beforeNode = getRealNode(element.node || element[0].node);
+        beforeNode.parentNode.insertBefore(node, beforeNode);
         R._insertbefore(this, element, this.paper);
         return this;
     };
@@ -1275,7 +1297,8 @@ window.Raphael && window.Raphael.svg && function(R) {
     };
     R._engine.setViewBox = function (x, y, w, h, fit) {
         eve("raphael.setViewBox", this, this._viewBox, [x, y, w, h, fit]);
-        var size = mmax(w / this.width, h / this.height),
+        var paperSize = this.getSize(),
+            size = mmax(w / paperSize.width, h / paperSize.height),
             top = this.top,
             aspectRatio = fit ? "xMidYMid meet" : "xMinYMin",
             vb,

dev/raphael.vml.js

@@ -27,7 +27,7 @@ window.Raphael && window.Raphael.vml && function(R) {
         bites = /([clmz]),?([^clmz]*)/gi,
         blurregexp = / progid:\S+Blur\([^\)]+\)/g,
         val = /-?[^,\s-]+/g,
-        cssDot = "position:absolute;left:0;top:0;width:1px;height:1px",
+        cssDot = "position:absolute;left:0;top:0;width:1px;height:1px;behavior:url(#default#VML)",
         zoom = 21600,
         pathTypes = {path: 1, rect: 1, image: 1},
         ovalTypes = {circle: 1, ellipse: 1},
@@ -171,6 +171,7 @@ window.Raphael && window.Raphael.vml && function(R) {
         "blur" in params && o.blur(params.blur);
         if (params.path && o.type == "path" || newpath) {
             node.path = path2vml(~Str(a.path).toLowerCase().indexOf("r") ? R._pathToAbsolute(a.path) : a.path);
+            o._.dirty = 1;
             if (o.type == "image") {
                 o._.fillpos = [a.x, a.y];
                 o._.fillsize = [a.width, a.height];
@@ -496,7 +497,10 @@ window.Raphael && window.Raphael.vml && function(R) {
             skew.matrix = Str(matrix);
             skew.offset = matrix.offset();
         }
-        oldt && (this._.transform = oldt);
+        if (oldt !== null) { // empty string value is true as well
+            this._.transform = oldt;
+            R._extractTransform(this, oldt);
+        }
         return this;
     };
     elproto.rotate = function (deg, cx, cy) {
@@ -572,6 +576,26 @@ window.Raphael && window.Raphael.vml && function(R) {
         !this.removed && (this.node.style.display = E);
         return this;
     };
+    // Needed to fix the vml setViewBox issues
+    elproto.auxGetBBox = R.el.getBBox;
+    elproto.getBBox = function(){
+      var b = this.auxGetBBox();
+      if (this.paper && this.paper._viewBoxShift)
+      {
+        var c = {};
+        var z = 1/this.paper._viewBoxShift.scale;
+        c.x = b.x - this.paper._viewBoxShift.dx;
+        c.x *= z;
+        c.y = b.y - this.paper._viewBoxShift.dy;
+        c.y *= z;
+        c.width  = b.width  * z;
+        c.height = b.height * z;
+        c.x2 = c.x + c.width;
+        c.y2 = c.y + c.height;
+        return c;
+      }
+      return b;
+    };
     elproto._getBBox = function () {
         if (this.removed) {
             return {};
@@ -861,9 +885,9 @@ window.Raphael && window.Raphael.vml && function(R) {
     };
     R._engine.setViewBox = function (x, y, w, h, fit) {
         R.eve("raphael.setViewBox", this, this._viewBox, [x, y, w, h, fit]);
-        var width = this.width,
-            height = this.height,
-            size = 1 / mmax(w / width, h / height),
+        var paperSize = this.getSize(),
+            width = paperSize.width,
+            height = paperSize.height,
             H, W;
         if (fit) {
             H = height / h;
@@ -889,7 +913,13 @@ window.Raphael && window.Raphael.vml && function(R) {
     var createNode;
     R._engine.initWin = function (win) {
             var doc = win.document;
-            doc.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
+            if (doc.styleSheets.length < 31) {
+                doc.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
+            } else {
+                // no more room, add to the existing one
+                // http://msdn.microsoft.com/en-us/library/ms531194%28VS.85%29.aspx
+                doc.styleSheets[0].addRule(".rvml", "behavior:url(#default#VML)");
+            }
             try {
                 !doc.namespaces.rvml && doc.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
                 createNode = function (tagName) {

dev/raphaelTest.html

@@ -14,15 +14,18 @@
     <!--<script type="text/javascript" src="../raphael-min.js"></script>-->
 
     <!-- To work with dev versions -->
+    <!-- Comment this 4 script tags if you are testing with AMD -->
     <script type="text/javascript" src="../eve/eve.js"></script>
     <script type="text/javascript" src="raphael.core.js"></script>
     <script type="text/javascript" src="raphael.svg.js"></script>
     <script type="text/javascript" src="raphael.vml.js"></script>
 
+    <!-- Comment this script tag if you are testing with AMD -->
     <script type="text/javascript">
         // Initialize container when document is loaded
         window.onload = function () {
             paper = Raphael(0, 0, 640, 720, "container");
+            //paper.circle(100, 100, 100); //example
         };
         //Work here, in a separate script file or via command line
     </script>
@@ -36,4 +39,4 @@
 <!-- Container for svg/vml root element -->
 <div id="container"></div>
 </body>
-</html>
\ No newline at end of file
+</html>