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 id='scroller' style='overflow: scroll; height: 450px; width: 800px;'>" +
  21       "<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       "</div>";
  25
  26   var data = [
  27       [ 10, 1 ],
  28       [ 20, 3 ],
  29       [ 30, 2 ],
  30       [ 40, 4 ],
  31       [ 50, 3 ],
  32       [ 60, 5 ],
  33       [ 70, 4 ],
  34       [ 80, 6 ] ];
  35
  36   var graph = document.getElementById("graph");
  37
  38   this.point = null;
  39   var self = this;
  40   this.g = new Dygraph(graph, data,
  41           {
  42             labels : ['a', 'b'],
  43             drawPoints : true,
  44             highlightCircleSize : 6,
  45             pointClickCallback : function(evt, point) {
  46               self.point = point;
  47             }
  48           }
  49       );
  50
  51 };
  52
  53 // This is usually something like 15, but for OS X Lion and its auto-hiding
  54 // scrollbars, it's 0. This is a large enough difference that we need to
  55 // consider it when synthesizing clicks.
  56 // Adapted from http://davidwalsh.name/detect-scrollbar-width
  57 ScrollingDivTestCase.prototype.detectScrollbarWidth = function() {
  58   // Create the measurement node
  59   var scrollDiv = document.createElement("div");
  60   scrollDiv.style.width = "100px";
  61   scrollDiv.style.height = "100px";
  62   scrollDiv.style.overflow = "scroll";
  63   scrollDiv.style.position = "absolute";
  64   scrollDiv.style.top = "-9999px";
  65   document.body.appendChild(scrollDiv);
  66
  67   // Get the scrollbar width
  68   var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  69
  70   // Delete the DIV
  71   document.body.removeChild(scrollDiv);
  72
  73   return scrollbarWidth;
  74 };
  75
  76 ScrollingDivTestCase.prototype.tearDown = function() {
  77 };
  78
  79 /**
  80  * This tests that when the nested div is unscrolled, things work normally.
  81  */
  82 ScrollingDivTestCase.prototype.testUnscrolledDiv = function() {
  83
  84   document.getElementById('scroller').scrollTop = 0;
  85
  86   var clickOn4_40 = {
  87     clientX: 244,
  88     clientY: 131,
  89     screenX: 416,
  90     screenY: 320
  91   };
  92
  93   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
  94   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
  95   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
  96
  97   assertEquals(40, this.point.xval);
  98   assertEquals(4, this.point.yval);
  99 };
 100
 101 /**
 102  * This tests that when the nested div is scrolled, things work normally.
 103  */
 104 ScrollingDivTestCase.prototype.testScrolledDiv = function() {
 105   document.getElementById('scroller').scrollTop = 117;
 106
 107   var clickOn4_40 = {
 108     clientX: 244,
 109     clientY: 30 - this.detectScrollbarWidth(),
 110     screenX: 416,
 111     screenY: 160
 112   };
 113
 114   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
 115   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
 116   DygraphOps.dispatchCanvasEvent(this.g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
 117
 118   assertEquals(40, this.point.xval);
 119   assertEquals(4, this.point.yval);
 120 };