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 7 base.requireStylesheet('ui.value_bar'); 8 base.require('base.unittest'); 9 base.require('base.bbox2'); 10 base.require('ui.dom_helpers'); 11 base.require('ui.value_bar'); 12 base.require('ui.value_display'); 13 14 base.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
