auto_tests/tests/scrolling_div.js

   1 /**
   2  * @fileoverview Test cases for a graph contained in a scrolling div
   3  *
   4  * @author konigsberg@google.com (Robert Konigsbrg)
   5  */
   6 var ScrollingDivTestCase = TestCase("scrolling-div");
   7
   8 ScrollingDivTestCase.prototype.setUp = function() {
   9
  10 var LOREM_IPSUM =
  11     "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n" +
  12     "tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n" +
  13     "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n" +
  14     "consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n" +
  15     "cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n" +
  16     "non proident, sunt in culpa qui officia deserunt mollit anim id est\n" +
  17     "laborum.</p>";
  18
  19   document.body.innerHTML =
  20       "<div style='overflow: scroll; height: 450px; width: 800px;'>" +
  21       "<a name='TOP'></a><div id='graph'></div>" +
  22       "<div style='height:100px; background-color:green;'>" + LOREM_IPSUM + " </div>" +
  23       "<div style='height:100px; background-color:red;'>" + LOREM_IPSUM + "</div>" +
  24       "<a name='BOTTOM'></a>" +
  25       "</div>";
  26
  27   var data = [
  28       [ 10, 1 ],
  29       [ 20, 3 ],
  30       [ 30, 2 ],
  31       [ 40, 4 ],
  32       [ 50, 3 ],
  33       [ 60, 5 ],
  34       [ 70, 4 ],
  35       [ 80, 6 ] ];
  36
  37   var graph = document.getElementById("graph");
  38
  39   this.point = null;
  40   var self = this;
  41   this.g = new Dygraph(graph, data,
  42           {
  43             labels : ['a', 'b'],
  44             drawPoints : true,
  45             highlightCircleSize : 6,
  46             pointClickCallback : function(evt, point) {
  47               self.point = point;
  48             }
  49           }
  50       );
  51
  52 };
  53
  54 ScrollingDivTestCase.prototype.tearDown = function() {
  55 };
  56
  57 /**
  58  * This tests that when the nested div is unscrolled, things work normally.
  59  */
  60 ScrollingDivTestCase.prototype.testUnscrolledDiv = function() {
  61
  62   window.location.href="#TOP";
  63
  64   var clickOn4_40 = {
  65     clientX: 244,
  66     clientY: 131,
  67     screenX: 416,
  68     screenY: 320
  69   };
  70
  71   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
  72   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
  73   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
  74
  75   assertEquals(40, this.point.xval);
  76   assertEquals(4, this.point.yval);
  77 };
  78
  79 /**
  80  * This tests that when the nested div is scrolled, things work normally.
  81  */
  82 ScrollingDivTestCase.prototype.testScrolledDiv = function() {
  83   window.location.href="#BOTTOM";
  84
  85   var clickOn4_40 = {
  86     clientX: 244,
  87     clientY: 20,
  88     screenX: 416,
  89     screenY: 160
  90   };
  91
  92   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
  93   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
  94   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
  95
  96   assertEquals(40, this.point.xval);
  97   assertEquals(4, this.point.yval);
  98 };