consolidating scripts
[dygraphs.git] / auto_tests / tests / css.js
CommitLineData
0cb9bd91
DV
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 */
e8c70e4e
DV
7
8import Dygraph from '../../src/dygraph';
9
89fdcedb 10describe("css", function() {
0cb9bd91 11
e8c70e4e
DV
12cleanupAfterEach();
13
319d0361
DV
14var data = "X,Y,Z\n1,2,3\n4,5,6\n";
15
16var styleSheet;
0cb9bd91 17
89fdcedb 18beforeEach(function() {
319d0361
DV
19 styleSheet = document.createElement("style");
20 styleSheet.type = "text/css";
21 document.getElementsByTagName("head")[0].appendChild(styleSheet);
89fdcedb 22});
0cb9bd91 23
89fdcedb 24afterEach(function() {
e8c70e4e 25 styleSheet.innerHTML = '';
89fdcedb 26});
0cb9bd91
DV
27
28// Verifies that an unstyled, unsized dygraph gets a default size.
89fdcedb 29it('testDefaultSize', function() {
0cb9bd91
DV
30 var opts = {
31 };
32 var graph = document.getElementById("graph");
319d0361 33 var g = new Dygraph(graph, data, opts);
0cb9bd91 34
89fdcedb
DV
35 assert.equal(480, graph.offsetWidth);
36 assert.equal(320, graph.offsetHeight);
37 assert.deepEqual({width: 480, height: 320}, g.size());
38});
0cb9bd91
DV
39
40// Verifies that the width/height parameters work.
89fdcedb 41it('testExplicitParamSize', function() {
0cb9bd91
DV
42 var opts = {
43 width: 640,
44 height: 480
45 };
46 var graph = document.getElementById("graph");
319d0361 47 var g = new Dygraph(graph, data, opts);
0cb9bd91 48
89fdcedb
DV
49 assert.equal(640, graph.offsetWidth);
50 assert.equal(480, graph.offsetHeight);
51 assert.deepEqual({width: 640, height: 480}, g.size());
52});
0cb9bd91
DV
53
54// Verifies that setting a style on the div works.
89fdcedb 55it('testExplicitStyleSize', function() {
0cb9bd91
DV
56 var opts = {
57 };
58 var graph = document.getElementById("graph");
59 graph.style.width = '600px';
60 graph.style.height = '400px';
61
319d0361 62 var g = new Dygraph(graph, data, opts);
89fdcedb
DV
63 assert.equal(600, graph.offsetWidth);
64 assert.equal(400, graph.offsetHeight);
65 assert.deepEqual({width: 600, height: 400}, g.size());
66});
0cb9bd91
DV
67
68// Verifies that CSS pixel styles on the div trump explicit parameters.
89fdcedb 69it('testPixelStyleWins', function() {
0cb9bd91
DV
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
319d0361 78 var g = new Dygraph(graph, data, opts);
89fdcedb
DV
79 assert.equal(600, graph.offsetWidth);
80 assert.equal(400, graph.offsetHeight);
81 assert.deepEqual({width: 600, height: 400}, g.size());
82});
0cb9bd91
DV
83
84// Verifies that a CSS percentage size works.
89fdcedb 85it('testPercentageSize', function() {
e8c70e4e
DV
86 var testdiv = document.getElementById("graph");
87 testdiv.innerHTML =
0cb9bd91 88 '<div style="width: 600px; height: 400px;">' +
e8c70e4e 89 '<div id="inner-graph"></div></div>';
0cb9bd91
DV
90 var opts = {
91 };
e8c70e4e 92 var graph = document.getElementById("inner-graph");
0cb9bd91
DV
93 graph.style.width = '50%';
94 graph.style.height = '50%';
95
319d0361 96 var g = new Dygraph(graph, data, opts);
89fdcedb
DV
97 assert.equal(300, graph.offsetWidth);
98 assert.equal(200, graph.offsetHeight);
99 assert.deepEqual({width: 300, height: 200}, g.size());
100});
0cb9bd91
DV
101
102// Verifies that a CSS class size works.
89fdcedb 103it('testClassPixelSize', function() {
319d0361 104 styleSheet.innerHTML = '.chart { width: 456px; height: 345px; }';
0cb9bd91
DV
105
106 var opts = {
107 };
108 var graph = document.getElementById("graph");
109 graph.className = "chart";
319d0361 110 var g = new Dygraph(graph, data, opts);
89fdcedb
DV
111 assert.equal(456, graph.offsetWidth);
112 assert.equal(345, graph.offsetHeight);
113 assert.deepEqual({width: 456, height: 345}, g.size());
114});
0cb9bd91 115
fffad740 116// An invisible chart div shouldn't produce an error.
89fdcedb 117it('testInvisibleChart', function() {
e8c70e4e 118 graph.innerHTML =
fffad740 119 '<div style="display:none;">' +
e8c70e4e 120 '<div id="inner-graph" style="width: 640px; height: 480px;"></div>' +
fffad740 121 '</div>';
e8c70e4e 122 new Dygraph('inner-graph', data, {});
89fdcedb 123});
fffad740
DV
124
125// An invisible chart div shouldn't produce an error.
89fdcedb 126it('testInvisibleChartDate', function() {
e8c70e4e 127 graph.innerHTML =
fffad740 128 '<div style="display:none;">' +
e8c70e4e 129 '<div id="inner-graph" style="width: 640px; height: 480px;"></div>' +
fffad740 130 '</div>';
e8c70e4e 131 new Dygraph('inner-graph',
fffad740
DV
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" +
89fdcedb
DV
138 "2010/06/01,100\n",
139 {});
140});
fffad740
DV
141
142// An invisible chart div that becomes visible.
89fdcedb 143it('testInvisibleThenVisibleChart', function() {
e8c70e4e
DV
144 var testdiv = document.getElementById("graph");
145 testdiv.innerHTML =
fffad740 146 '<div id="x" style="display:none;">' +
e8c70e4e 147 '<div id="inner-graph" style="width: 640px; height: 480px;"></div>' +
fffad740 148 '</div>';
e8c70e4e 149 var graph = document.getElementById("inner-graph");
89fdcedb 150 var g = new Dygraph(graph,
fffad740
DV
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
89fdcedb
DV
168 assert.equal(640, graph.offsetWidth);
169 assert.equal(480, graph.offsetHeight);
170 assert.deepEqual({width: 640, height: 480}, g.size());
171});
fffad740 172
0cb9bd91
DV
173// Verifies that a div resize gets picked up.
174/*
175 this one isn't quite ready yet.
89fdcedb 176it('testDivResize', function() {
0cb9bd91
DV
177 var opts = {
178 };
179 var graph = document.getElementById("graph");
180 graph.style.width = '640px';
181 graph.style.height = '480px';
319d0361 182 var g = new Dygraph(graph, data, opts);
0cb9bd91 183
89fdcedb
DV
184 assert.equal(640, graph.offsetWidth);
185 assert.equal(480, graph.offsetHeight);
186 assert.deepEqual({width: 640, height: 480}, g.size());
0cb9bd91
DV
187
188 graph.style.width = '650px';
189 graph.style.height = '490px';
89fdcedb
DV
190 assert.equal(650, graph.offsetWidth);
191 assert.equal(490, graph.offsetHeight);
192 assert.deepEqual({width: 650, height: 490}, g.size());
193});
0cb9bd91 194*/
89fdcedb
DV
195
196});