From 4e28a55d0e5924d7c8e33ac9ebeea48d3a7d8366 Mon Sep 17 00:00:00 2001
From: Greg Schechter <gregthebusker@gmail.com>
Date: Thu, 29 May 2014 11:18:46 -0700
Subject: [PATCH] Added VML version of ClippingRectangle

---
 modes/vml.js                   |  2 +-
 modes/vml/clippingrectangle.js | 41 ++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 modes/vml/clippingrectangle.js

diff --git a/modes/vml.js b/modes/vml.js
index 9ba09f9..d2eacae 100644
--- a/modes/vml.js
+++ b/modes/vml.js
@@ -2,7 +2,7 @@ exports.Surface = require('./vml/surface');
 exports.Path = require('./vml/path');
 exports.Shape = require('./vml/shape');
 exports.Group = require('./vml/group');
-exports.ClippingRectangle = require('./vml/group');
+exports.ClippingRectangle = require('./vml/clippingrectangle');
 exports.Text = require('./vml/text');
 
 var DOM = require('./vml/dom');
diff --git a/modes/vml/clippingrectangle.js b/modes/vml/clippingrectangle.js
new file mode 100644
index 0000000..64293c0
--- /dev/null
+++ b/modes/vml/clippingrectangle.js
@@ -0,0 +1,41 @@
+var Class = require('../../core/class');
+var Transform = require('../../core/transform');
+var Container = require('../../dom/container');
+var Node = require('./node');
+
+module.exports = Class(Node, Container, {
+
+  element_initialize: Node.prototype.initialize,
+
+  initialize: function(width, height){
+    this.element_initialize('clippingrectangle');
+    this.width = width;
+    this.height = height;
+  },
+
+  _transform: function(){
+    var element = this.element;
+    element.clip = true;
+    element.coordorigin = -this.x + ',' + (-1 * this.y);
+    element.coordsize = this.width + ',' + this.height;
+    // IE8 doesn't like clipBottom.  Don't ask me why.
+    // element.style.clipBottom = this.height + this.y;
+    element.style.clipLeft = this.x;
+    element.style.clipRight = this.width + this.x;
+    element.style.clipTop = this.y;
+    element.style.left = -this.x;
+    element.style.top = -this.y;
+    element.style.width = this.width + this.x;
+    element.style.height = this.height + this.y;
+    element.style.rotation = 0;
+
+    var container = this.parentNode;
+    this._activeTransform = container ? new Transform(container._activeTransform).transform(this) : this;
+    var node = this.firstChild;
+    while (node){
+      node._transform();
+      node = node.nextSibling;
+    }
+  }
+
+});