• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// Copyright (c) 2013 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5'use strict';
6
7base.requireStylesheet('ui.value_bar');
8base.require('base.unittest');
9base.require('base.bbox2');
10base.require('ui.dom_helpers');
11base.require('ui.value_bar');
12base.require('ui.value_display');
13
14base.unittest.testSuite('ui.value_bar', function() {
15
16  function synClick(element) {
17    var event = new MouseEvent('click', {});
18    element.dispatchEvent(event);
19  }
20
21  function createValueBar(testFramework) {
22    var container = ui.createDiv();
23    container.style.position = 'relative';
24    container.style.height = '200px';
25
26    var valueBar = new ui.ValueBar();
27    valueBar.style['-webkit-flex-direction'] = 'column';
28
29    testFramework.addHTMLOutput(container);
30    container.appendChild(valueBar);
31
32    return valueBar;
33  }
34
35  test('vertical', function() {
36    var valueBar = createValueBar(this);
37
38    // Test public change event api
39    var changeEventsTested = 0;
40    valueBar.addEventListener('lowestValueChange', function(event) {
41      assertEquals(event.newValue, valueBar.lowestValue);
42      changeEventsTested++;
43    });
44
45    valueBar.addEventListener('highestValueChange', function(event) {
46      assertEquals(event.newValue, valueBar.highestValue);
47      changeEventsTested++;
48    });
49
50    valueBar.addEventListener('valueChange', function(event) {
51      assertEquals(event.newValue, valueBar.value);
52      changeEventsTested++;
53    });
54
55    valueBar.addEventListener('previewValueChange', function(event) {
56      assertEquals(event.newValue, valueBar.previewValue);
57      changeEventsTested++;
58    });
59
60    valueBar.lowestValue = 0.2;
61    assertEquals(valueBar.lowestValue, 0.2);
62
63    valueBar.highestValue = 3.0;
64    assertEquals(valueBar.highestValue, 3.0);
65
66    valueBar.value = 1.0;
67    assertEquals(valueBar.value, 1.0);
68
69    valueBar.previewValue = 0.5;
70    assertEquals(valueBar.previewValue, 0.5);
71
72    // Verify that all change events fired.
73    assertEquals(changeEventsTested, 4);
74  });
75
76  test('rangeControl', function() {
77    var valueBar = createValueBar(this);
78
79    var controlRange = valueBar.rangeControlPixelRange;
80    assertEquals(valueBar.fractionalValue_(0), 0);
81    assertEquals(valueBar.fractionalValue_(controlRange), 1);
82
83    assertEquals(valueBar.pixelByValue_(0), 0);
84    assertEquals(valueBar.pixelByValue_(1), controlRange);
85
86    var lowestValueButton = valueBar.querySelector('.lowest-value-control');
87    synClick(lowestValueButton);
88    assertEquals(valueBar.value, valueBar.lowestValue);
89
90    var highestValueButton = valueBar.querySelector('.highest-value-control');
91    synClick(highestValueButton);
92    assertEquals(valueBar.value, valueBar.highestValue);
93  });
94
95  test('valueDisplay', function() {
96    var valueBar = createValueBar(this);
97    var valueDisplay = new ui.ValueDisplay();
98    valueDisplay.style.position = 'absolute';
99    valueDisplay.style.left = '60px';
100    valueDisplay.style.width = '200px';
101    valueDisplay.style.display = '-webkit-flex';
102    valueDisplay['-webkit-flex-direction'] = 'column';
103    valueDisplay.valueBar = valueBar;
104    valueBar.parentElement.appendChild(valueDisplay);
105
106    valueBar.lowestValue = 0.2;
107    var lowestValueButton = valueBar.querySelector('.lowest-value-control');
108    synClick(lowestValueButton);
109    assertEquals('0.20 (\u2192 0.20)', valueDisplay.textContent);
110
111    valueBar.highestValue = 3.0;
112    var highestValueButton = valueBar.querySelector('.highest-value-control');
113    synClick(highestValueButton);
114    assertEquals('3.00 (\u2192 3.00)', valueDisplay.textContent);
115  });
116
117  test('horizontal', function() {
118    var container = ui.createDiv();
119    container.style.position = 'relative';
120    container.style.height = '200px';
121
122    var valueBar = new ui.ValueBar();
123    valueBar.style['-webkit-flex-direction'] = 'row';
124
125    this.addHTMLOutput(container);
126    container.appendChild(valueBar);
127    valueBar.vertical = false;
128
129    valueBar.lowestValue = -70;
130    assertEquals(valueBar.lowestValue, -70);
131
132    valueBar.highestValue = 70;
133    assertEquals(valueBar.highestValue, 70);
134
135    valueBar.value = 0.0;
136    assertEquals(valueBar.value, 0.0);
137
138    valueBar.previewValue = 0.5;
139    assertEquals(valueBar.previewValue, 0.5);
140
141    var controlRange = valueBar.rangeControlPixelRange;
142    assertEquals(valueBar.fractionalValue_(0), 0);
143    assertEquals(valueBar.fractionalValue_(controlRange), 1);
144
145    assertEquals(valueBar.pixelByValue_(0), 0);
146    assertEquals(valueBar.pixelByValue_(1), controlRange);
147  });
148
149  test('overrideContent', function() {
150    var container = ui.createDiv();
151    container.style.position = 'relative';
152    container.style.height = '200px';
153
154    var ABBar = ui.define('ab-bar');
155    ABBar.prototype = {
156      __proto__: ui.ValueBar.prototype,
157      updateLowestValueElement: function(element) {
158        element.style.fontSize = '25px';
159        element.textContent = 'A';
160      },
161      updateHighestValueElement: function(element) {
162        element.style.fontSize = '25px';
163        element.textContent = 'B';
164      }
165    };
166    var aBBar = new ABBar();
167    assertEquals('AB', aBBar.textContent);
168  });
169});
170