Merge pull request danvk#303 from danvk/fix-hidpi

Fix HiDPI over-scrolling issue

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>

auto_tests/tests/hidpi.js

@@ -0,0 +1,39 @@
+/**
+ * @fileoverview Tests for window.devicePixelRatio > 1.
+ *
+ * @author [email protected] (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);
+};
+

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.

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.