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