auto_tests/tests/css.js

   1 // Copyright 2011 Google Inc. All Rights Reserved.
   2
   3 /**
   4  * @fileoverview Regression test based on some strange customBars data.
   5  * @author danvk@google.com (Dan Vanderkam)
   6  */
   7 var CssTestCase = TestCase("css");
   8
   9 CssTestCase.data = "X,Y,Z\n1,2,3\n4,5,6\n";
  10
  11 CssTestCase.prototype.setUp = function() {
  12   document.body.innerHTML = "<div id='graph'></div>";
  13   this.styleSheet = document.createElement("style");
  14   this.styleSheet.type = "text/css";
  15   document.getElementsByTagName("head")[0].appendChild(this.styleSheet);
  16 };
  17
  18 CssTestCase.prototype.tearDown = function() {
  19 };
  20
  21 // Verifies that an unstyled, unsized dygraph gets a default size.
  22 CssTestCase.prototype.testDefaultSize = function() {
  23   var opts = {
  24   };
  25   var graph = document.getElementById("graph");
  26   var g = new Dygraph(graph, CssTestCase.data, opts);
  27
  28   assertEquals(480, graph.offsetWidth);
  29   assertEquals(320, graph.offsetHeight);
  30   assertEquals({width: 480, height: 320}, g.size());
  31 };
  32
  33 // Verifies that the width/height parameters work.
  34 CssTestCase.prototype.testExplicitParamSize = function() {
  35   var opts = {
  36     width: 640,
  37     height: 480
  38   };
  39   var graph = document.getElementById("graph");
  40   var g = new Dygraph(graph, CssTestCase.data, opts);
  41
  42   assertEquals(640, graph.offsetWidth);
  43   assertEquals(480, graph.offsetHeight);
  44   assertEquals({width: 640, height: 480}, g.size());
  45 };
  46
  47 // Verifies that setting a style on the div works.
  48 CssTestCase.prototype.testExplicitStyleSize = function() {
  49   var opts = {
  50   };
  51   var graph = document.getElementById("graph");
  52   graph.style.width = '600px';
  53   graph.style.height = '400px';
  54
  55   var g = new Dygraph(graph, CssTestCase.data, opts);
  56   assertEquals(600, graph.offsetWidth);
  57   assertEquals(400, graph.offsetHeight);
  58   assertEquals({width: 600, height: 400}, g.size());
  59 };
  60
  61 // Verifies that CSS pixel styles on the div trump explicit parameters.
  62 CssTestCase.prototype.testPixelStyleWins = function() {
  63   var opts = {
  64     width: 987,
  65     height: 654
  66   };
  67   var graph = document.getElementById("graph");
  68   graph.style.width = '600px';
  69   graph.style.height = '400px';
  70
  71   var g = new Dygraph(graph, CssTestCase.data, opts);
  72   assertEquals(600, graph.offsetWidth);
  73   assertEquals(400, graph.offsetHeight);
  74   assertEquals({width: 600, height: 400}, g.size());
  75 };
  76
  77 // Verifies that a CSS percentage size works.
  78 CssTestCase.prototype.testPercentageSize = function() {
  79   document.body.innerHTML =
  80       '<div style="width: 600px; height: 400px;">' +
  81       '<div id="graph"></div></div>';
  82   var opts = {
  83   };
  84   var graph = document.getElementById("graph");
  85   graph.style.width = '50%';
  86   graph.style.height = '50%';
  87
  88   var g = new Dygraph(graph, CssTestCase.data, opts);
  89   assertEquals(300, graph.offsetWidth);
  90   assertEquals(200, graph.offsetHeight);
  91   assertEquals({width: 300, height: 200}, g.size());
  92 };
  93
  94 // Verifies that a CSS class size works.
  95 CssTestCase.prototype.testClassPixelSize = function() {
  96   this.styleSheet.innerHTML = '.chart { width: 456px; height: 345px; }';
  97
  98   var opts = {
  99   };
 100   var graph = document.getElementById("graph");
 101   graph.className = "chart";
 102   var g = new Dygraph(graph, CssTestCase.data, opts);
 103   assertEquals(456, graph.offsetWidth);
 104   assertEquals(345, graph.offsetHeight);
 105   assertEquals({width: 456, height: 345}, g.size());
 106 };
 107
 108 // An invisible chart div shouldn't produce an error.
 109 CssTestCase.prototype.testInvisibleChart = function() {
 110   document.body.innerHTML =
 111       '<div style="display:none;">' +
 112       '<div id="graph" style="width: 640px; height: 480px;"></div>' +
 113       '</div>';
 114   var graph = document.getElementById("graph");
 115   g = new Dygraph(graph, CssTestCase.data, {});
 116 };
 117
 118 // An invisible chart div shouldn't produce an error.
 119 CssTestCase.prototype.testInvisibleChartDate = function() {
 120   document.body.innerHTML =
 121       '<div style="display:none;">' +
 122       '<div id="graph" style="width: 640px; height: 480px;"></div>' +
 123       '</div>';
 124   var graph = document.getElementById("graph");
 125   g = new Dygraph(graph,
 126                   "Date,Y\n" +
 127                   "2010/01/01,100\n" +
 128                   "2010/02/01,200\n" +
 129                   "2010/03/01,300\n" +
 130                   "2010/04/01,400\n" +
 131                   "2010/05/01,300\n" +
 132                   "2010/06/01,100\n"
 133                   , {});
 134 };
 135
 136 // An invisible chart div that becomes visible.
 137 CssTestCase.prototype.testInvisibleThenVisibleChart = function() {
 138   document.body.innerHTML =
 139       '<div id="x" style="display:none;">' +
 140       '<div id="graph" style="width: 640px; height: 480px;"></div>' +
 141       '</div>';
 142   var graph = document.getElementById("graph");
 143   g = new Dygraph(graph,
 144                   "Date,Y\n" +
 145                   "2010/01/01,100\n" +
 146                   "2010/02/01,200\n" +
 147                   "2010/03/01,300\n" +
 148                   "2010/04/01,400\n" +
 149                   "2010/05/01,300\n" +
 150                   "2010/06/01,100\n"
 151                   , {});
 152
 153   // g.size() is undefined here (probably 0x0)
 154   document.getElementById("x").style.display = "";
 155
 156   // This resize() call is annoying but essential.
 157   // There are no DOM events to inform the dygraph that its div has changed size
 158   // or visibility so we need to let it know ourselves.
 159   g.resize();
 160
 161   assertEquals(640, graph.offsetWidth);
 162   assertEquals(480, graph.offsetHeight);
 163   assertEquals({width: 640, height: 480}, g.size());
 164 };
 165
 166 // Verifies that a div resize gets picked up.
 167 /*
 168   this one isn't quite ready yet.
 169 CssTestCase.prototype.testDivResize = function() {
 170   var opts = {
 171   };
 172   var graph = document.getElementById("graph");
 173   graph.style.width = '640px';
 174   graph.style.height = '480px';
 175   var g = new Dygraph(graph, CssTestCase.data, opts);
 176
 177   assertEquals(640, graph.offsetWidth);
 178   assertEquals(480, graph.offsetHeight);
 179   assertEquals({width: 640, height: 480}, g.size());
 180
 181   graph.style.width = '650px';
 182   graph.style.height = '490px';
 183   assertEquals(650, graph.offsetWidth);
 184   assertEquals(490, graph.offsetHeight);
 185   assertEquals({width: 650, height: 490}, g.size());
 186 };
 187 */