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