1 <!DOCTYPE html> 2 <!-- 3 Copyright 2015 The Chromium Authors. All rights reserved. 4 Use of this source code is governed by a BSD-style license that can be 5 found in the LICENSE file. 6 --> 7 8 <link rel="import" href="/tracing/value/numeric.html"> 9 <link rel="import" href="/tracing/value/time_display_mode.html"> 10 <link rel="import" href="/tracing/value/ui/scalar_span.html"> 11 <link rel="import" href="/tracing/value/unit.html"> 12 13 <script> 14 'use strict'; 15 16 tr.b.unittest.testSuite(function() { 17 var ScalarNumeric = tr.v.ScalarNumeric; 18 var Unit = tr.v.Unit; 19 var THIS_DOC = document._currentScript.ownerDocument; 20 21 function checkScalarSpan( 22 test, value, unit, expectedTextContent, opt_expectedColor) { 23 var span = tr.v.ui.createScalarSpan(new tr.v.ScalarNumeric(unit, value)); 24 assert.strictEqual(span.$.content.textContent, expectedTextContent); 25 assert.strictEqual(span.$.content.style.color, opt_expectedColor || ''); 26 test.addHTMLOutput(span); 27 } 28 29 test('instantiate', function() { 30 checkScalarSpan(this, 123.456789, Unit.byName.timeDurationInMs, 31 '123.457 ms'); 32 checkScalarSpan(this, 0, Unit.byName.normalizedPercentage, '0.000%'); 33 checkScalarSpan(this, -2560, Unit.byName.sizeInBytes, '-2.5 KiB'); 34 }); 35 36 test('instantiate_smallerIsBetter', function() { 37 checkScalarSpan(this, 45097156608, Unit.byName.sizeInBytes_smallerIsBetter, 38 '42.0 GiB'); 39 checkScalarSpan(this, 0, Unit.byName.energyInJoules_smallerIsBetter, 40 '0.000 J'); 41 checkScalarSpan(this, -0.25, Unit.byName.unitlessNumber_smallerIsBetter, 42 '-0.250'); 43 }); 44 45 test('instantiate_biggerIsBetter', function() { 46 checkScalarSpan(this, 0.07, Unit.byName.powerInWatts_smallerIsBetter, 47 '0.070 W'); 48 checkScalarSpan(this, 0, Unit.byName.timeStampInMs_biggerIsBetter, 49 '0.000 ms'); 50 checkScalarSpan(this, -0.00003, 51 Unit.byName.normalizedPercentage_biggerIsBetter, '-0.003%'); 52 }); 53 54 test('instantiate_delta', function() { 55 checkScalarSpan(this, 123.456789, Unit.byName.timeDurationInMsDelta, 56 '+123.457 ms'); 57 checkScalarSpan(this, 0, Unit.byName.normalizedPercentageDelta, 58 '\u00B10.000%'); 59 checkScalarSpan(this, -2560, Unit.byName.sizeInBytesDelta, 60 '-2.5 KiB'); 61 }); 62 63 test('instantiate_delta_smallerIsBetter', function() { 64 checkScalarSpan(this, 45097156608, 65 Unit.byName.sizeInBytesDelta_smallerIsBetter, '+42.0 GiB', 'red'); 66 checkScalarSpan(this, 0, Unit.byName.energyInJoulesDelta_smallerIsBetter, 67 '\u00B10.000 J'); 68 checkScalarSpan(this, -0.25, 69 Unit.byName.unitlessNumberDelta_smallerIsBetter, '-0.250', 'green'); 70 }); 71 72 test('instantiate_delta_biggerIsBetter', function() { 73 checkScalarSpan(this, 0.07, Unit.byName.powerInWattsDelta_biggerIsBetter, 74 '+0.070 W', 'green'); 75 checkScalarSpan(this, 0, Unit.byName.timeStampInMsDelta_biggerIsBetter, 76 '\u00B10.000 ms'); 77 checkScalarSpan(this, -0.00003, 78 Unit.byName.normalizedPercentageDelta_biggerIsBetter, '-0.003%', 'red'); 79 }); 80 81 test('createScalarSpan', function() { 82 // No config. 83 var span = tr.v.ui.createScalarSpan( 84 new ScalarNumeric(Unit.byName.powerInWatts, 3.14)); 85 assert.strictEqual(span.ownerDocument, document); 86 assert.strictEqual(span.tagName, 'TR-V-UI-SCALAR-SPAN'); 87 assert.strictEqual(span.value, 3.14); 88 assert.strictEqual(span.unit, Unit.byName.powerInWatts); 89 assert.isUndefined(span.percentage); 90 assert.isUndefined(span.warning); 91 assert.isFalse(span.rightAlign); 92 this.addHTMLOutput(span); 93 94 // Custom owner document and right align. 95 var span = tr.v.ui.createScalarSpan( 96 new ScalarNumeric(Unit.byName.energyInJoules, 2.72), 97 { ownerDocument: THIS_DOC, rightAlign: true }); 98 assert.strictEqual(span.ownerDocument, THIS_DOC); 99 assert.strictEqual(span.tagName, 'TR-V-UI-SCALAR-SPAN'); 100 assert.strictEqual(span.value, 2.72); 101 assert.strictEqual(span.unit, Unit.byName.energyInJoules); 102 assert.isUndefined(span.percentage); 103 assert.isUndefined(span.warning); 104 assert.isTrue(span.rightAlign); 105 this.addHTMLOutput(span); 106 107 // Unit and sparkline set via config. 108 var span = tr.v.ui.createScalarSpan(1.62, 109 { unit: Unit.byName.timeStampInMs, total: 3.24 }); 110 assert.strictEqual(span.ownerDocument, document); 111 assert.strictEqual(span.tagName, 'TR-V-UI-SCALAR-SPAN'); 112 assert.strictEqual(span.value, 1.62); 113 assert.strictEqual(span.unit, Unit.byName.timeStampInMs); 114 assert.strictEqual(span.percentage, 0.5); 115 assert.isUndefined(span.warning); 116 assert.isFalse(span.rightAlign); 117 this.addHTMLOutput(span); 118 }); 119 120 test('instantiate_withWarning', function() { 121 var span = document.createElement('tr-v-ui-scalar-span'); 122 span.value = 400000000; 123 span.unit = Unit.byName.sizeInBytes; 124 span.warning = 'There is a problem with this size'; 125 this.addHTMLOutput(span); 126 }); 127 128 test('instantiate_withPercentage', function() { 129 var span = document.createElement('tr-v-ui-scalar-span'); 130 span.value = new ScalarNumeric(Unit.byName.unitlessNumber, 99); 131 span.percentage = 0.66; 132 this.addHTMLOutput(span); 133 }); 134 135 test('instantiate_withRightAlign', function() { 136 var span = document.createElement('tr-v-ui-scalar-span'); 137 span.value = new ScalarNumeric(Unit.byName.timeStampInMs, 5.777); 138 span.rightAlign = true; 139 this.addHTMLOutput(span); 140 }); 141 142 test('warningAndNonWarningHaveSimilarHeights', function() { 143 var spanA = document.createElement('tr-v-ui-scalar-span'); 144 spanA.setValueAndUnit(400, Unit.byName.timeDurationInMs); 145 146 var spanB = document.createElement('tr-v-ui-scalar-span'); 147 spanB.setValueAndUnit(400, Unit.byName.timeDurationInMs); 148 spanB.warning = 'There is a problem with this time'; 149 150 var overall = document.createElement('div'); 151 overall.style.display = 'flex'; 152 overall.appendChild(spanA); 153 spanB.style.marginLeft = '4px'; 154 overall.appendChild(spanB); 155 this.addHTMLOutput(overall); 156 }); 157 158 test('respectCurrentDisplayUnit', function() { 159 try { 160 Unit.currentTimeDisplayMode = tr.v.TimeDisplayModes.ns; 161 162 var span = document.createElement('tr-v-ui-scalar-span'); 163 span.setValueAndUnit(73, Unit.byName.timeStampInMs); 164 this.addHTMLOutput(span); 165 166 assert.isTrue(span.$.content.textContent.indexOf('ns') > 0); 167 Unit.currentTimeDisplayMode = tr.v.TimeDisplayModes.ms; 168 assert.isTrue(span.$.content.textContent.indexOf('ms') > 0); 169 } finally { 170 Unit.reset(); 171 } 172 }); 173 174 test('displaySparkline', function() { 175 var div = document.createElement('div'); 176 div.style.width = '100px'; 177 this.addHTMLOutput(div); 178 179 function addAndCheckScalarSpan(percentage, expectedDisplay, expectedWidth) { 180 var span = tr.v.ui.createScalarSpan(new ScalarNumeric( 181 Unit.byName.timeDurationInMs, 10 * div.children.length)); 182 if (percentage !== null) 183 span.percentage = percentage; 184 185 div.appendChild(span); 186 187 var computedStyle = getComputedStyle(span.$.sparkline); 188 assert.equal(computedStyle.display, expectedDisplay); 189 assert.equal(parseInt(computedStyle.width), expectedWidth); 190 } 191 192 addAndCheckScalarSpan(null /* no percentage set */, 'none', 0); 193 addAndCheckScalarSpan(undefined, 'none', 0); 194 addAndCheckScalarSpan(0, 'block', 1); 195 addAndCheckScalarSpan(0.05, 'block', 5); 196 addAndCheckScalarSpan(0.5, 'block', 50); 197 addAndCheckScalarSpan(0.95, 'block', 95); 198 addAndCheckScalarSpan(1, 'block', 100); 199 }); 200 }); 201 </script> 202
