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 // Verifies that a div resize gets picked up.
 109 /*
 110   this one isn't quite ready yet.
 111 CssTestCase.prototype.testDivResize = function() {
 112   var opts = {
 113   };
 114   var graph = document.getElementById("graph");
 115   graph.style.width = '640px';
 116   graph.style.height = '480px';
 117   var g = new Dygraph(graph, CssTestCase.data, opts);
 118
 119   assertEquals(640, graph.offsetWidth);
 120   assertEquals(480, graph.offsetHeight);
 121   assertEquals({width: 640, height: 480}, g.size());
 122
 123   graph.style.width = '650px';
 124   graph.style.height = '490px';
 125   assertEquals(650, graph.offsetWidth);
 126   assertEquals(490, graph.offsetHeight);
 127   assertEquals({width: 650, height: 490}, g.size());
 128 };
 129 */