Tests for when the graph is embedded in a scrolling div.

diff --git a/auto_tests/tests/scrolling_div.js b/auto_tests/tests/scrolling_div.js
new file mode 100644 (file)
index 0000000..93a6fc6
--- /dev/null
+++ b/auto_tests/tests/scrolling_div.js
@@ -0,0 +1,184 @@
+/** 
+ * @fileoverview Test cases for a graph contained in a scrolling div
+ *
+ * @author konigsberg@google.com (Robert Konigsbrg)
+ */
+var ScrollingDivTestCase = TestCase("scrolling-div");
+
+ScrollingDivTestCase.prototype.setUp = function() {
+
+var LOREM_IPSUM =
+    "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n" +
+    "tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n" +
+    "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n" +
+    "consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n" +
+    "cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n" +
+    "non proident, sunt in culpa qui officia deserunt mollit anim id est\n" +
+    "laborum.</p>";
+
+  document.body.innerHTML = 
+      "<div style='overflow: scroll; height: 450px; width: 800px;'>" +
+      "<a name='TOP'></a><div id='graph'></div>" +
+      "<div style='height:100px; background-color:green;'>" + LOREM_IPSUM + " </div>" +
+      "<div style='height:100px; background-color:red;'>" + LOREM_IPSUM + "</div>" +
+      "<a name='BOTTOM'></a>" +
+      "</div>";
+
+  var data = [
+      [ 10, 1 ],
+      [ 20, 3 ],
+      [ 30, 2 ],
+      [ 40, 4 ],
+      [ 50, 3 ],
+      [ 60, 5 ],
+      [ 70, 4 ],
+      [ 80, 6 ] ];
+
+  var graph = document.getElementById("graph");
+
+  this.point = null;
+  var self = this;
+  this.g = new Dygraph(graph, data,
+          {
+            labels : ['a', 'b'],
+            drawPoints : true,
+            highlightCircleSize : 6,
+            pointClickCallback : function(evt, point) {
+              self.point = point;
+            }
+          }
+      );
+  
+};
+
+ScrollingDivTestCase.prototype.tearDown = function() {
+};
+
+/**
+ * This tests that when the nested div is unscrolled, things work normally.
+ */
+ScrollingDivTestCase.prototype.testUnscrolledDiv = function() {
+
+  window.location.href="#TOP";
+
+  var clickOn4_40 = {
+    clientX: 244,
+    clientY: 131,
+    screenX: 416,
+    screenY: 320
+  };
+
+  DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
+  DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
+  DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
+
+  assertEquals(40, this.point.xval);
+  assertEquals(4, this.point.yval);
+};
+
+/**
+ * This tests that when the nested div is scrolled, things work normally.
+ */
+ScrollingDivTestCase.prototype.testScrolledDiv = function() {
+  window.location.href="#BOTTOM";
+
+  var clickOn4_40 = {
+    clientX: 244,
+    clientY: 20,
+    screenX: 416,
+    screenY: 160
+  };
+
+  DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
+  DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
+  DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
+
+  assertEquals(40, this.point.xval);
+  assertEquals(4, this.point.yval);
+};
+
+/*
+NORMAL
+
+mousedown 
+MouseEvent
+
+defaultPrevented?
+detail?
+returnValue?
+
+srcElement
+target
+toElement
+
+type: "mousedown"
+
+pageX: 244
+pageY: 131
+layerX: 233
+layerY: 281
+offsetX: 236
+offsetY: 235
+which: 1
+x: 244
+y: 131
+
+mouseup 
+MouseEvent
+
+clientX: 244
+clientY: 131
+screenX: 416
+screenY: 320
+type: "mouseup"
+
+pageX: 244
+pageY: 131
+layerX: 233
+layerY: 281
+offsetX: 236
+offsetY: 235
+which: 1
+x: 244
+y: 131
+
+
+SCROLLED
+
+mousedown 
+MouseEvent
+
+clientX: 244
+clientY: 20
+pageX: 244
+pageY: 20
+screenX: 417
+screenY: 160
+type: "mousedown"
+
+layerX: 233
+layerY: 170
+offsetX: 236
+offsetY: 124
+which: 1
+x: 244
+y: 20
+
+mouseup 
+MouseEvent
+
+clientX: 244
+clientY: 20
+layerX: 233
+layerY: 170
+offsetX: 236
+offsetY: 124
+pageX: 244
+pageY: 20
+screenX: 417
+screenY: 160
+type: "mouseup"
+which: 1
+x: 244
+y: 20
+*/
\ No newline at end of file