Merge pull request #303 from danvk/fix-hidpi

Fix HiDPI over-scrolling issue

diff --git a/auto_tests/misc/local.html b/auto_tests/misc/local.html
index 455b6cb..e04bd62 100644 (file)
--- a/auto_tests/misc/local.html
+++ b/auto_tests/misc/local.html
@@ -62,6 +62,7 @@
   <script type="text/javascript" src="../tests/resize.js"></script>
   <script type="text/javascript" src="../tests/plugins_legend.js"></script>
   <script type="text/javascript" src="../tests/two_digit_years.js"></script>
+  <script type="text/javascript" src="../tests/hidpi.js"></script>
   <script type="text/javascript" src="../tests/update_options.js"></script>
   <script type="text/javascript" src="../tests/update_while_panning.js"></script>
   <script type="text/javascript" src="../tests/utils_test.js"></script>

diff --git a/auto_tests/tests/hidpi.js b/auto_tests/tests/hidpi.js
new file mode 100644 (file)
index 0000000..17a75a0
--- /dev/null
+++ b/auto_tests/tests/hidpi.js
@@ -0,0 +1,39 @@
+/**
+ * @fileoverview Tests for window.devicePixelRatio > 1.
+ *
+ * @author danvdk@gmail.com (Dan Vanderkam)
+ */
+var hidpiTestCase = TestCase("hidpi");
+
+var savePixelRatio;
+hidpiTestCase.prototype.setUp = function() {
+  savePixelRatio = window.devicePixelRatio;
+  window.devicePixelRatio = 2;
+
+  document.body.innerHTML = "<div id='graph'></div>";
+};
+
+hidpiTestCase.prototype.tearDown = function() {
+  window.devicePixelRatio = savePixelRatio;
+};
+
+hidpiTestCase.prototype.testNameGoesHere = function() {
+  var graph = document.getElementById("graph");
+  graph.style.width = "70%";  // more than half.
+  graph.style.height = "200px";
+
+  var opts = {};
+  var data = "X,Y\n" +
+      "0,-1\n" +
+      "1,0\n" +
+      "2,1\n" +
+      "3,0\n"
+  ;
+
+  var g = new Dygraph(graph, data, opts);
+
+  // See http://stackoverflow.com/a/2146905/388951
+  var hasHorizontalScrollbar = (document.body.scrollWidth > document.body.clientWidth);
+  assertEquals(false, hasHorizontalScrollbar);
+};
+

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index 5bfbfbf..17908e3 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -52,7 +52,6 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
   this.layout = layout;
   this.element = element;
   this.elementContext = elementContext;
-  this.container = this.element.parentNode;
 
   this.height = this.element.height;
   this.width = this.element.width;
@@ -64,8 +63,6 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
 
   // internal state
   this.area = layout.getPlotArea();
-  this.container.style.position = "relative";
-  this.container.style.width = this.width + "px";
 
   // Set up a clipping area for the canvas (and the interaction canvas).
   // This ensures that we don't overdraw.

diff --git a/dygraph.js b/dygraph.js
index 9570d3c..8a1d65d 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -1104,6 +1104,7 @@ Dygraph.prototype.createInterface_ = function() {
 
   // TODO(danvk): any other styles that are useful to set here?
   this.graphDiv.style.textAlign = 'left';  // This is a CSS "reset"
+  this.graphDiv.style.position = 'relative';
   enclosing.appendChild(this.graphDiv);
 
   // Create the canvas for interactive parts of the chart.