add a few tests for how dygraphs are sized, plus a small behavior tweak

diff --git a/auto_tests/misc/local.html b/auto_tests/misc/local.html
index 881c10f..3480130 100644 (file)
--- a/auto_tests/misc/local.html
+++ b/auto_tests/misc/local.html
@@ -25,6 +25,7 @@
   <script type="text/javascript" src="../tests/interaction_model.js"></script>
   <script type="text/javascript" src="../tests/scrolling_div.js"></script>
   <script type="text/javascript" src="../tests/custom_bars.js"></script>
+  <script type="text/javascript" src="../tests/css.js"></script>
   <script type="text/javascript">
   var tc = null;
   function processVariables() {

diff --git a/auto_tests/tests/css.js b/auto_tests/tests/css.js
new file mode 100644 (file)
index 0000000..19cadca
--- /dev/null
+++ b/auto_tests/tests/css.js
@@ -0,0 +1,126 @@
+// Copyright 2011 Google Inc. All Rights Reserved.
+
+/**
+ * @fileoverview Regression test based on some strange customBars data.
+ * @author danvk@google.com (Dan Vanderkam)
+ */
+var CssTestCase = TestCase("css");
+
+CssTestCase.data = "X,Y,Z\n1,2,3\n4,5,6\n";
+
+CssTestCase.prototype.setUp = function() {
+  document.body.innerHTML = "<div id='graph'></div>";
+  this.styleSheet = document.createElement("style");
+  this.styleSheet.type = "text/css";
+  document.getElementsByTagName("head")[0].appendChild(this.styleSheet);
+};
+
+CssTestCase.prototype.tearDown = function() {
+};
+
+// Verifies that an unstyled, unsized dygraph gets a default size.
+CssTestCase.prototype.testDefaultSize = function() {
+  var opts = {
+  };
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, CssTestCase.data, opts);
+
+  assertEquals(480, graph.offsetWidth);
+  assertEquals(320, graph.offsetHeight);
+  assertEquals({width: 480, height: 320}, g.size());
+};
+
+// Verifies that the width/height parameters work.
+CssTestCase.prototype.testExplicitParamSize = function() {
+  var opts = {
+    width: 640,
+    height: 480
+  };
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, CssTestCase.data, opts);
+
+  assertEquals(640, graph.offsetWidth);
+  assertEquals(480, graph.offsetHeight);
+  assertEquals({width: 640, height: 480}, g.size());
+};
+
+// Verifies that setting a style on the div works.
+CssTestCase.prototype.testExplicitStyleSize = function() {
+  var opts = {
+  };
+  var graph = document.getElementById("graph");
+  graph.style.width = '600px';
+  graph.style.height = '400px';
+
+  var g = new Dygraph(graph, CssTestCase.data, opts);
+  assertEquals(600, graph.offsetWidth);
+  assertEquals(400, graph.offsetHeight);
+  assertEquals({width: 600, height: 400}, g.size());
+};
+
+// Verifies that CSS pixel styles on the div trump explicit parameters.
+CssTestCase.prototype.testPixelStyleWins = function() {
+  var opts = {
+    width: 987,
+    height: 654
+  };
+  var graph = document.getElementById("graph");
+  graph.style.width = '600px';
+  graph.style.height = '400px';
+
+  var g = new Dygraph(graph, CssTestCase.data, opts);
+  assertEquals(600, graph.offsetWidth);
+  assertEquals(400, graph.offsetHeight);
+  assertEquals({width: 600, height: 400}, g.size());
+};
+
+// Verifies that a CSS percentage size works.
+CssTestCase.prototype.testPercentageSize = function() {
+  document.body.innerHTML =
+      '<div style="width: 600px; height: 400px;">' +
+      '<div id="graph"></div></div>';
+  var opts = {
+  };
+  var graph = document.getElementById("graph");
+  graph.style.width = '50%';
+  graph.style.height = '50%';
+
+  var g = new Dygraph(graph, CssTestCase.data, opts);
+  assertEquals(300, graph.offsetWidth);
+  assertEquals(200, graph.offsetHeight);
+  assertEquals({width: 300, height: 200}, g.size());
+};
+
+// Verifies that a CSS class size works.
+CssTestCase.prototype.testClassPixelSize = function() {
+  this.styleSheet.innerHTML = '.chart { width: 456px; height: 345px; }';
+
+  var opts = {
+  };
+  var graph = document.getElementById("graph");
+  graph.className = "chart";
+  var g = new Dygraph(graph, CssTestCase.data, opts);
+  assertEquals(456, graph.offsetWidth);
+  assertEquals(345, graph.offsetHeight);
+  assertEquals({width: 456, height: 345}, g.size());
+};
+
+// Verifies that a div resize gets picked up.
+CssTestCase.prototype.testDivResize = function() {
+  var opts = {
+  };
+  var graph = document.getElementById("graph");
+  graph.style.width = '640px';
+  graph.style.height = '480px';
+  var g = new Dygraph(graph, CssTestCase.data, opts);
+
+  assertEquals(640, graph.offsetWidth);
+  assertEquals(480, graph.offsetHeight);
+  assertEquals({width: 640, height: 480}, g.size());
+
+  graph.style.width = '650px';
+  graph.style.height = '490px';
+  assertEquals(650, graph.offsetWidth);
+  assertEquals(490, graph.offsetHeight);
+  assertEquals({width: 650, height: 490}, g.size());
+};

diff --git a/dygraph.js b/dygraph.js
index 4404a97..f3d3cdf 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -225,24 +225,24 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   // div, then only one will be drawn.
   div.innerHTML = "";
 
-  // If the div isn't already sized then inherit from our attrs or
-  // give it a default size.
-  if (div.style.width == '') {
-    div.style.width = (attrs.width || Dygraph.DEFAULT_WIDTH) + "px";
+  // For historical reasons, the 'width' and 'height' options trump all CSS
+  // rules _except_ for an explicit 'width' or 'height' on the div.
+  // As an added convenience, if the div has zero height (like <div></div> does
+  // without any styles), then we use a default height/width.
+  if (div.style.width == '' && attrs.width) {
+    div.style.width = attrs.width + "px";
   }
-  if (div.style.height == '') {
-    div.style.height = (attrs.height || Dygraph.DEFAULT_HEIGHT) + "px";
+  if (div.style.height == '' && attrs.height) {
+    div.style.height = attrs.height + "px";
   }
-  this.width_ = parseInt(div.style.width, 10);
-  this.height_ = parseInt(div.style.height, 10);
-  // The div might have been specified as percent of the current window size,
-  // convert that to an appropriate number of pixels.
-  if (div.style.width.indexOf("%") == div.style.width.length - 1) {
-    this.width_ = div.offsetWidth;
-  }
-  if (div.style.height.indexOf("%") == div.style.height.length - 1) {
-    this.height_ = div.offsetHeight;
+  if (div.offsetHeight == 0) {
+    div.style.height = Dygraph.DEFAULT_HEIGHT + "px";
+    if (div.style.width == '') {
+      div.style.width = Dygraph.DEFAULT_WIDTH + "px";
+    }
   }
+  this.width_ = div.offsetWidth;
+  this.height_ = div.offsetHeight;
 
   if (this.width_ == 0) {
     this.error("dygraph has zero width. Please specify a width in pixels.");
@@ -650,6 +650,9 @@ Dygraph.prototype.createInterface_ = function() {
   Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) {
     dygraph.mouseOut_(e);
   });
+  Dygraph.addEvent(this.maindiv_, 'resize', function(e) {
+    console.log("resize!");
+  });
 
   // Create the grapher
   this.layout_ = new DygraphLayout(this);
@@ -3038,6 +3041,16 @@ Dygraph.prototype.setVisibility = function(num, value) {
 };
 
 /**
+ * How large of an area will the dygraph render itself in?
+ * This is used for testing.
+ * @return A {width: w, height: h} object.
+ * @private
+ */
+Dygraph.prototype.size = function() {
+  return { width: this.width_, height: this.height_ };
+};
+
+/**
  * Update the list of annotations and redraw the chart.
  */
 Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {