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 describe("css", function() {
   8
   9 var data = "X,Y,Z\n1,2,3\n4,5,6\n";
  10
  11 var styleSheet;
  12
  13 beforeEach(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 afterEach(function() {
  21 });
  22
  23 // Verifies that an unstyled, unsized dygraph gets a default size.
  24 it('testDefaultSize', function() {
  25   var opts = {
  26   };
  27   var graph = document.getElementById("graph");
  28   var g = new Dygraph(graph, data, opts);
  29
  30   assert.equal(480, graph.offsetWidth);
  31   assert.equal(320, graph.offsetHeight);
  32   assert.deepEqual({width: 480, height: 320}, g.size());
  33 });
  34
  35 // Verifies that the width/height parameters work.
  36 it('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   assert.equal(640, graph.offsetWidth);
  45   assert.equal(480, graph.offsetHeight);
  46   assert.deepEqual({width: 640, height: 480}, g.size());
  47 });
  48
  49 // Verifies that setting a style on the div works.
  50 it('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   assert.equal(600, graph.offsetWidth);
  59   assert.equal(400, graph.offsetHeight);
  60   assert.deepEqual({width: 600, height: 400}, g.size());
  61 });
  62
  63 // Verifies that CSS pixel styles on the div trump explicit parameters.
  64 it('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   assert.equal(600, graph.offsetWidth);
  75   assert.equal(400, graph.offsetHeight);
  76   assert.deepEqual({width: 600, height: 400}, g.size());
  77 });
  78
  79 // Verifies that a CSS percentage size works.
  80 it('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   assert.equal(300, graph.offsetWidth);
  92   assert.equal(200, graph.offsetHeight);
  93   assert.deepEqual({width: 300, height: 200}, g.size());
  94 });
  95
  96 // Verifies that a CSS class size works.
  97 it('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   assert.equal(456, graph.offsetWidth);
 106   assert.equal(345, graph.offsetHeight);
 107   assert.deepEqual({width: 456, height: 345}, g.size());
 108 });
 109
 110 // An invisible chart div shouldn't produce an error.
 111 it('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   new Dygraph(graph, data, {});
 118 });
 119
 120 // An invisible chart div shouldn't produce an error.
 121 it('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   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 it('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   var 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   assert.equal(640, graph.offsetWidth);
 164   assert.equal(480, graph.offsetHeight);
 165   assert.deepEqual({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 it('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   assert.equal(640, graph.offsetWidth);
 180   assert.equal(480, graph.offsetHeight);
 181   assert.deepEqual({width: 640, height: 480}, g.size());
 182
 183   graph.style.width = '650px';
 184   graph.style.height = '490px';
 185   assert.equal(650, graph.offsetWidth);
 186   assert.equal(490, graph.offsetHeight);
 187   assert.deepEqual({width: 650, height: 490}, g.size());
 188 });
 189 */
 190
 191 });