Commit | Line | Data |
---|---|---|
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 | */ | |
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 | */ |