| <!DOCTYPE html> |
| <!-- |
| Copyright 2015 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/tracing/base/raf.html"> |
| <link rel="import" href="/tracing/base/range.html"> |
| <link rel="import" href="/tracing/base/time_display_modes.html"> |
| <link rel="import" href="/tracing/base/unit.html"> |
| <link rel="import" href="/tracing/base/unit_scale.html"> |
| <link rel="import" href="/tracing/value/histogram.html"> |
| <link rel="import" href="/tracing/value/ui/scalar_context_controller.html"> |
| <link rel="import" href="/tracing/value/ui/scalar_span.html"> |
| |
| <script> |
| 'use strict'; |
| |
| tr.b.unittest.testSuite(function() { |
| var ScalarNumeric = tr.v.ScalarNumeric; |
| var Unit = tr.b.Unit; |
| var THIS_DOC = document.currentScript.ownerDocument; |
| |
| function checkScalarSpan(test, value, unit, expectedContent, opt_options) { |
| var options = opt_options || {}; |
| var span = tr.v.ui.createScalarSpan(new tr.v.ScalarNumeric(unit, value), |
| {significance: options.significance}); |
| |
| test.addHTMLOutput(span); |
| assert.strictEqual( |
| Polymer.dom(span.$.content).textContent, expectedContent); |
| assert.strictEqual(window.getComputedStyle(span.$.content).color, |
| options.expectedColor || 'rgb(0, 0, 0)'); |
| |
| if (options.expectedTitle) |
| assert.strictEqual(span.$.content.title, options.expectedTitle); |
| |
| if (options.significance !== undefined) { |
| assert.strictEqual(Polymer.dom(span.$.significance).textContent, |
| options.expectedEmoji); |
| assert.strictEqual(window.getComputedStyle(span.$.significance).color, |
| options.expectedEmojiColor || 'rgb(0, 0, 0)'); |
| if (options.expectedTitle) |
| assert.strictEqual(span.$.significance.title, options.expectedTitle); |
| } |
| } |
| |
| test('instantiate_significance', function() { |
| var countD = Unit.byName.count.correspondingDeltaUnit; |
| var countSIBD = Unit.byName.count_smallerIsBetter.correspondingDeltaUnit; |
| var countBIBD = Unit.byName.count_biggerIsBetter.correspondingDeltaUnit; |
| |
| var zero = String.fromCharCode(177) + '0'; |
| |
| checkScalarSpan(this, 0, countSIBD, zero, { |
| significance: tr.v.Significance.DONT_CARE, |
| expectedTitle: 'no change', |
| expectedEmoji: '' |
| }); |
| |
| checkScalarSpan(this, 0, countSIBD, zero, { |
| significance: tr.v.Significance.INSIGNIFICANT, |
| expectedEmoji: tr.v.ui.Emoji.NEUTRAL_FACE, |
| expectedEmojiColor: 'rgb(0, 0, 0)', |
| expectedTitle: 'no change' |
| }); |
| |
| assert.throws(() => checkScalarSpan(this, 0, countSIBD, zero, |
| {significance: tr.v.Significance.SIGNIFICANT})); |
| |
| checkScalarSpan(this, 0, countBIBD, zero, { |
| significance: tr.v.Significance.DONT_CARE, |
| expectedTitle: 'no change', |
| expectedEmoji: '' |
| }); |
| |
| checkScalarSpan(this, 0, countBIBD, zero, { |
| significance: tr.v.Significance.INSIGNIFICANT, |
| expectedEmoji: tr.v.ui.Emoji.NEUTRAL_FACE, |
| expectedEmojiColor: 'rgb(0, 0, 0)', |
| expectedTitle: 'no change' |
| }); |
| |
| assert.throws(() => checkScalarSpan(this, 0, countSIBD, zero, |
| {significance: tr.v.Significance.SIGNIFICANT})); |
| |
| checkScalarSpan(this, 1, countSIBD, '+1', { |
| significance: tr.v.Significance.DONT_CARE, |
| expectedColor: 'rgb(255, 0, 0)', |
| expectedTitle: 'regression', |
| expectedEmoji: '' |
| }); |
| |
| checkScalarSpan(this, 1, countSIBD, '+1', { |
| significance: tr.v.Significance.INSIGNIFICANT, |
| expectedColor: 'rgb(255, 0, 0)', |
| expectedEmoji: tr.v.ui.Emoji.NEUTRAL_FACE, |
| expectedEmojiColor: 'rgb(0, 0, 0)', |
| expectedTitle: 'insignificant regression' |
| }); |
| |
| checkScalarSpan(this, 1, countSIBD, '+1', { |
| significance: tr.v.Significance.SIGNIFICANT, |
| expectedColor: 'rgb(255, 0, 0)', |
| expectedEmoji: tr.v.ui.Emoji.CONFOUNDED_FACE, |
| expectedEmojiColor: 'rgb(255, 0, 0)', |
| expectedTitle: 'significant regression' |
| }); |
| |
| checkScalarSpan(this, 1, countBIBD, '+1', { |
| significance: tr.v.Significance.DONT_CARE, |
| expectedColor: 'rgb(0, 128, 0)', |
| expectedTitle: 'improvement', |
| expectedEmoji: '' |
| }); |
| |
| checkScalarSpan(this, 1, countBIBD, '+1', { |
| significance: tr.v.Significance.INSIGNIFICANT, |
| expectedColor: 'rgb(0, 128, 0)', |
| expectedEmoji: tr.v.ui.Emoji.NEUTRAL_FACE, |
| expectedEmojiColor: 'rgb(0, 0, 0)', |
| expectedTitle: 'insignificant improvement' |
| }); |
| |
| checkScalarSpan(this, 1, countBIBD, '+1', { |
| significance: tr.v.Significance.SIGNIFICANT, |
| expectedColor: 'rgb(0, 128, 0)', |
| expectedEmoji: tr.v.ui.Emoji.GRINNING_FACE, |
| expectedEmojiColor: 'rgb(0, 128, 0)', |
| expectedTitle: 'significant improvement' |
| }); |
| |
| checkScalarSpan(this, -1, countSIBD, '-1', { |
| significance: tr.v.Significance.DONT_CARE, |
| expectedColor: 'rgb(0, 128, 0)', |
| expectedEmoji: '', |
| expectedEmojiColor: '', |
| expectedTitle: 'improvement' |
| }); |
| |
| checkScalarSpan(this, -1, countSIBD, '-1', { |
| expectedColor: 'rgb(0, 128, 0)', |
| significance: tr.v.Significance.INSIGNIFICANT, |
| expectedEmoji: tr.v.ui.Emoji.NEUTRAL_FACE, |
| expectedEmojiColor: 'rgb(0, 0, 0)', |
| expectedTitle: 'insignificant improvement' |
| }); |
| |
| checkScalarSpan(this, -1, countSIBD, '-1', { |
| expectedColor: 'rgb(0, 128, 0)', |
| significance: tr.v.Significance.SIGNIFICANT, |
| expectedEmoji: tr.v.ui.Emoji.GRINNING_FACE, |
| expectedEmojiColor: 'rgb(0, 128, 0)', |
| expectedTitle: 'significant improvement' |
| }); |
| |
| checkScalarSpan(this, -1, countBIBD, '-1', { |
| expectedColor: 'rgb(255, 0, 0)', |
| significance: tr.v.Significance.DONT_CARE, |
| expectedEmoji: '' |
| }); |
| |
| checkScalarSpan(this, -1, countBIBD, '-1', { |
| expectedColor: 'rgb(255, 0, 0)', |
| significance: tr.v.Significance.INSIGNIFICANT, |
| expectedEmoji: tr.v.ui.Emoji.NEUTRAL_FACE, |
| expectedEmojiColor: 'rgb(0, 0, 0)', |
| expectedTitle: 'insignificant regression' |
| }); |
| |
| checkScalarSpan(this, -1, countBIBD, '-1', { |
| expectedColor: 'rgb(255, 0, 0)', |
| significance: tr.v.Significance.SIGNIFICANT, |
| expectedEmoji: tr.v.ui.Emoji.CONFOUNDED_FACE, |
| expectedEmojiColor: 'rgb(255, 0, 0)', |
| expectedTitle: 'significant regression' |
| }); |
| |
| checkScalarSpan(this, 1, countD, '+1', { |
| expectedColor: 'rgb(0, 0, 0)', |
| significance: tr.v.Significance.DONT_CARE, |
| expectedEmoji: '' |
| }); |
| |
| checkScalarSpan(this, 1, countD, '+1', { |
| expectedColor: 'rgb(0, 0, 0)', |
| significance: tr.v.Significance.INSIGNIFICANT, |
| expectedEmoji: '' |
| }); |
| |
| checkScalarSpan(this, 1, countD, '+1', { |
| expectedColor: 'rgb(0, 0, 0)', |
| significance: tr.v.Significance.SIGNIFICANT, |
| expectedEmoji: '' |
| }); |
| |
| checkScalarSpan(this, -1, countD, '-1', { |
| expectedColor: 'rgb(0, 0, 0)', |
| significance: tr.v.Significance.DONT_CARE, |
| expectedEmoji: '' |
| }); |
| |
| checkScalarSpan(this, -1, countD, '-1', { |
| expectedColor: 'rgb(0, 0, 0)', |
| significance: tr.v.Significance.INSIGNIFICANT, |
| expectedEmoji: '' |
| }); |
| |
| checkScalarSpan(this, -1, countD, '-1', { |
| expectedColor: 'rgb(0, 0, 0)', |
| significance: tr.v.Significance.SIGNIFICANT, |
| expectedEmoji: '' |
| }); |
| }); |
| |
| test('instantiate', function() { |
| checkScalarSpan(this, 123.456789, Unit.byName.timeDurationInMs, |
| '123.457 ms'); |
| checkScalarSpan(this, 0, Unit.byName.normalizedPercentage, '0.000%'); |
| checkScalarSpan(this, 1, Unit.byName.normalizedPercentage, '100.000%'); |
| checkScalarSpan(this, -2560, Unit.byName.sizeInBytes, '-2.5 KiB'); |
| }); |
| |
| test('instantiate_smallerIsBetter', function() { |
| checkScalarSpan(this, 45097156608, Unit.byName.sizeInBytes_smallerIsBetter, |
| '42.0 GiB'); |
| checkScalarSpan(this, 0, Unit.byName.energyInJoules_smallerIsBetter, |
| '0.000 J'); |
| checkScalarSpan(this, -0.25, Unit.byName.unitlessNumber_smallerIsBetter, |
| '-0.250'); |
| }); |
| |
| test('instantiate_biggerIsBetter', function() { |
| checkScalarSpan(this, 0.07, Unit.byName.powerInWatts_smallerIsBetter, |
| '0.070 W'); |
| checkScalarSpan(this, 0, Unit.byName.timeStampInMs_biggerIsBetter, |
| '0.000 ms'); |
| checkScalarSpan(this, -0.00003, |
| Unit.byName.normalizedPercentage_biggerIsBetter, '-0.003%'); |
| }); |
| |
| test('instantiate_delta', function() { |
| checkScalarSpan(this, 123.456789, Unit.byName.timeDurationInMsDelta, |
| '+123.457 ms'); |
| checkScalarSpan(this, 0, Unit.byName.normalizedPercentageDelta, |
| '\u00B10.000%'); |
| checkScalarSpan(this, -2560, Unit.byName.sizeInBytesDelta, |
| '-2.5 KiB'); |
| }); |
| |
| test('instantiate_delta_smallerIsBetter', function() { |
| checkScalarSpan(this, 45097156608, |
| Unit.byName.sizeInBytesDelta_smallerIsBetter, '+42.0 GiB', |
| {expectedColor: 'rgb(255, 0, 0)'}); |
| checkScalarSpan(this, 0, Unit.byName.energyInJoulesDelta_smallerIsBetter, |
| '\u00B10.000 J'); |
| checkScalarSpan(this, -0.25, |
| Unit.byName.unitlessNumberDelta_smallerIsBetter, '-0.250', |
| {expectedColor: 'rgb(0, 128, 0)'}); |
| }); |
| |
| test('instantiate_delta_biggerIsBetter', function() { |
| checkScalarSpan(this, 0.07, Unit.byName.powerInWattsDelta_biggerIsBetter, |
| '+0.070 W', {expectedColor: 'rgb(0, 128, 0)'}); |
| checkScalarSpan(this, 0, Unit.byName.timeStampInMsDelta_biggerIsBetter, |
| '\u00B10.000 ms'); |
| checkScalarSpan(this, -0.00003, |
| Unit.byName.normalizedPercentageDelta_biggerIsBetter, '-0.003%', |
| {expectedColor: 'rgb(255, 0, 0)'}); |
| }); |
| |
| test('createScalarSpan', function() { |
| // No config. |
| var span = tr.v.ui.createScalarSpan( |
| new ScalarNumeric(Unit.byName.powerInWatts, 3.14)); |
| assert.strictEqual(Polymer.dom(span.$.content).textContent, '3.140 W'); |
| assert.strictEqual(span.ownerDocument, document); |
| assert.strictEqual(span.tagName, 'TR-V-UI-SCALAR-SPAN'); |
| assert.strictEqual(span.value, 3.14); |
| assert.strictEqual(span.unit, Unit.byName.powerInWatts); |
| assert.isUndefined(span.context); |
| assert.isUndefined(span.customContextRange); |
| assert.isUndefined(span.warning); |
| assert.isFalse(span.rightAlign); |
| this.addHTMLOutput(span); |
| |
| // Custom owner document and right align. |
| var span = tr.v.ui.createScalarSpan( |
| new ScalarNumeric(Unit.byName.energyInJoules, 2.72), |
| { ownerDocument: THIS_DOC, rightAlign: true }); |
| assert.strictEqual(Polymer.dom(span.$.content).textContent, '2.720 J'); |
| assert.strictEqual(span.ownerDocument, THIS_DOC); |
| assert.strictEqual(span.tagName, 'TR-V-UI-SCALAR-SPAN'); |
| assert.strictEqual(span.value, 2.72); |
| assert.strictEqual(span.unit, Unit.byName.energyInJoules); |
| assert.isUndefined(span.context); |
| assert.isUndefined(span.customContextRange); |
| assert.isUndefined(span.warning); |
| assert.isTrue(span.rightAlign); |
| this.addHTMLOutput(span); |
| |
| // Unit and sparkline set via config. |
| var span = tr.v.ui.createScalarSpan(1.62, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: tr.b.Range.fromExplicitRange(0, 3.24) |
| }); |
| assert.strictEqual(Polymer.dom(span.$.content).textContent, '1.620 ms'); |
| assert.strictEqual(span.ownerDocument, document); |
| assert.strictEqual(span.tagName, 'TR-V-UI-SCALAR-SPAN'); |
| assert.strictEqual(span.value, 1.62); |
| assert.strictEqual(span.unit, Unit.byName.timeStampInMs); |
| assert.isUndefined(span.context); |
| assert.isTrue(tr.b.Range.fromExplicitRange(0, 3.24).equals( |
| span.customContextRange)); |
| assert.isUndefined(span.warning); |
| assert.isFalse(span.rightAlign); |
| this.addHTMLOutput(span); |
| |
| // Custom context. |
| var span = tr.v.ui.createScalarSpan( |
| new ScalarNumeric(Unit.byName.sizeInBytesDelta_smallerIsBetter, |
| 256 * 1024 * 1024), { context: { |
| unitPrefix: tr.b.UnitScale.Binary.KIBI, |
| minimumFractionDigits: 2 |
| } }); |
| assert.strictEqual( |
| Polymer.dom(span.$.content).textContent, '+262,144.00 KiB'); |
| assert.strictEqual(span.ownerDocument, document); |
| assert.strictEqual(span.tagName, 'TR-V-UI-SCALAR-SPAN'); |
| assert.strictEqual(span.value, 256 * 1024 * 1024); |
| assert.strictEqual(span.unit, Unit.byName.sizeInBytesDelta_smallerIsBetter); |
| assert.deepEqual(span.context, |
| { unitPrefix: tr.b.UnitScale.Binary.KIBI, minimumFractionDigits: 2 }); |
| assert.isUndefined(span.customContextRange); |
| assert.isUndefined(span.warning); |
| assert.isFalse(span.rightAlign); |
| this.addHTMLOutput(span); |
| }); |
| |
| test('instantiate_withWarning', function() { |
| var span = document.createElement('tr-v-ui-scalar-span'); |
| span.value = 400000000; |
| span.unit = Unit.byName.sizeInBytes; |
| span.warning = 'There is a problem with this size'; |
| this.addHTMLOutput(span); |
| }); |
| |
| test('instantiate_withCustomContextRange', function() { |
| var span = document.createElement('tr-v-ui-scalar-span'); |
| span.value = new ScalarNumeric(Unit.byName.unitlessNumber, 0.99); |
| span.customContextRange = tr.b.Range.fromExplicitRange(0, 3); |
| this.addHTMLOutput(span); |
| }); |
| |
| test('instantiate_withRightAlign', function() { |
| var span = document.createElement('tr-v-ui-scalar-span'); |
| span.value = new ScalarNumeric(Unit.byName.timeStampInMs, 5.777); |
| span.rightAlign = true; |
| this.addHTMLOutput(span); |
| }); |
| |
| test('instantiate_withContext', function() { |
| var span = document.createElement('tr-v-ui-scalar-span'); |
| span.value = new ScalarNumeric( |
| Unit.byName.unitlessNumberDelta_smallerIsBetter, 42); |
| span.context = { maximumFractionDigits: 2 }; |
| assert.strictEqual(Polymer.dom(span.$.content).textContent, '+42.00'); |
| this.addHTMLOutput(span); |
| }); |
| |
| test('warningAndNonWarningHaveSimilarHeights', function() { |
| var spanA = document.createElement('tr-v-ui-scalar-span'); |
| spanA.setValueAndUnit(400, Unit.byName.timeDurationInMs); |
| |
| var spanB = document.createElement('tr-v-ui-scalar-span'); |
| spanB.setValueAndUnit(400, Unit.byName.timeDurationInMs); |
| spanB.warning = 'There is a problem with this time'; |
| |
| var overall = document.createElement('div'); |
| overall.style.display = 'flex'; |
| Polymer.dom(overall).appendChild(spanA); |
| spanB.style.marginLeft = '4px'; |
| Polymer.dom(overall).appendChild(spanB); |
| this.addHTMLOutput(overall); |
| }); |
| |
| test('respectCurrentDisplayUnit', function() { |
| try { |
| Unit.currentTimeDisplayMode = tr.b.TimeDisplayModes.ns; |
| |
| var span = document.createElement('tr-v-ui-scalar-span'); |
| span.setValueAndUnit(73, Unit.byName.timeStampInMs); |
| this.addHTMLOutput(span); |
| |
| assert.isTrue(Polymer.dom(span.$.content).textContent.indexOf('ns') > 0); |
| Unit.currentTimeDisplayMode = tr.b.TimeDisplayModes.ms; |
| assert.isTrue(Polymer.dom(span.$.content).textContent.indexOf('ms') > 0); |
| } finally { |
| Unit.reset(); |
| } |
| }); |
| |
| function checkSparkline(span, expectation) { |
| tr.b.forceAllPendingTasksToRunForTest(); |
| var sparklineEl = span.$.sparkline; |
| var computedStyle = getComputedStyle(sparklineEl); |
| |
| var expectedDisplay = expectation.display || 'block'; |
| assert.strictEqual(computedStyle.display, expectedDisplay); |
| if (expectedDisplay === 'none') { |
| // Test expectation sanity check. |
| assert.notProperty(expectation, 'left'); |
| assert.notProperty(expectation, 'width'); |
| assert.notProperty(expectation, 'classList'); |
| return; |
| } |
| |
| assert.closeTo(parseFloat(computedStyle.left), expectation.left, 0.1); |
| assert.closeTo(parseFloat(computedStyle.width), expectation.width, 0.1); |
| assert.sameMembers(tr.b.asArray(sparklineEl.classList), |
| expectation.classList || []); |
| } |
| |
| test('customContextRange', function() { |
| var div = document.createElement('div'); |
| div.style.width = '101px'; // One extra pixel for sparkline border. |
| this.addHTMLOutput(div); |
| |
| // No custom context range. |
| var span1 = tr.v.ui.createScalarSpan(0, { |
| unit: Unit.byName.timeStampInMs |
| }); |
| Polymer.dom(div).appendChild(span1); |
| checkSparkline(span1, {display: 'none'}); |
| var span2 = tr.v.ui.createScalarSpan(0, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: undefined |
| }); |
| Polymer.dom(div).appendChild(span2); |
| checkSparkline(span2, {display: 'none'}); |
| var span3 = tr.v.ui.createScalarSpan(0, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: new tr.b.Range() // Empty range. |
| }); |
| Polymer.dom(div).appendChild(span3); |
| checkSparkline(span3, {display: 'none'}); |
| |
| var range = tr.b.Range.fromExplicitRange(-15, 15); |
| |
| // Values inside custom context range. |
| var span4 = tr.v.ui.createScalarSpan(-15, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: range |
| }); |
| Polymer.dom(div).appendChild(span4); |
| checkSparkline(span4, {left: 0, width: 51}); |
| var span5 = tr.v.ui.createScalarSpan(-14, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: range |
| }); |
| Polymer.dom(div).appendChild(span5); |
| checkSparkline(span5, {left: 3.33, width: 47.67}); |
| var span6 = tr.v.ui.createScalarSpan(-10, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: range |
| }); |
| Polymer.dom(div).appendChild(span6); |
| checkSparkline(span6, {left: 16.67, width: 34.33}); |
| var span7 = tr.v.ui.createScalarSpan(0, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: range |
| }); |
| Polymer.dom(div).appendChild(span7); |
| checkSparkline(span7, {left: 50, width: 1}); |
| var span8 = tr.v.ui.createScalarSpan(10, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: range |
| }); |
| Polymer.dom(div).appendChild(span8); |
| checkSparkline(span8, {left: 50, width: 34.33, classList: ['positive']}); |
| var span9 = tr.v.ui.createScalarSpan(14, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: range |
| }); |
| Polymer.dom(div).appendChild(span9); |
| checkSparkline(span9, {left: 50, width: 47.67, classList: ['positive']}); |
| var span10 = tr.v.ui.createScalarSpan(15, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: range |
| }); |
| Polymer.dom(div).appendChild(span10); |
| checkSparkline(span10, {left: 50, width: 51, classList: ['positive']}); |
| |
| // Values outside custom context range. |
| var span11 = tr.v.ui.createScalarSpan(-20, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: range |
| }); |
| Polymer.dom(div).appendChild(span11); |
| checkSparkline(span11, {left: 0, width: 51}); |
| var span12 = tr.v.ui.createScalarSpan(20, { |
| unit: Unit.byName.timeStampInMs, |
| customContextRange: range |
| }); |
| Polymer.dom(div).appendChild(span12); |
| checkSparkline(span12, {left: 50, width: 51, classList: ['positive']}); |
| }); |
| |
| test('emptyNumeric', function() { |
| assert.strictEqual(tr.v.ui.createScalarSpan(), ''); |
| }); |
| |
| test('contextControllerChanges', function() { |
| var div = document.createElement('div'); |
| div.style.width = '101px'; // One extra pixel for sparkline border. |
| this.addHTMLOutput(div); |
| |
| div.appendChild( |
| document.createElement('tr-v-ui-scalar-context-controller')); |
| |
| var s1 = tr.v.ui.createScalarSpan(10, { |
| unit: Unit.byName.powerInWatts |
| }); |
| Polymer.dom(div).appendChild(s1); |
| checkSparkline(s1, {display: 'none'}); |
| |
| var s2 = tr.v.ui.createScalarSpan(20, { |
| unit: Unit.byName.powerInWatts, |
| contextGroup: 'A' |
| }); |
| Polymer.dom(div).appendChild(s2); |
| checkSparkline(s1, {display: 'none'}); |
| checkSparkline(s2, {left: 0, width: 101, classList: ['positive']}); |
| |
| var s3 = tr.v.ui.createScalarSpan(30, { |
| unit: Unit.byName.powerInWatts, |
| contextGroup: 'A' |
| }); |
| Polymer.dom(div).appendChild(s3); |
| checkSparkline(s1, {display: 'none'}); |
| checkSparkline(s2, {left: 0, width: 67.67, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 101, classList: ['positive']}); |
| |
| var s4 = tr.v.ui.createScalarSpan(40, { |
| unit: Unit.byName.powerInWatts, |
| contextGroup: 'B' |
| }); |
| Polymer.dom(div).appendChild(s4); |
| checkSparkline(s1, {display: 'none'}); |
| checkSparkline(s2, {left: 0, width: 67.67, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s4, {left: 0, width: 101, classList: ['positive']}); |
| |
| s3.contextGroup = 'B'; |
| checkSparkline(s1, {display: 'none'}); |
| checkSparkline(s2, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 76, classList: ['positive']}); |
| checkSparkline(s4, {left: 0, width: 101, classList: ['positive']}); |
| |
| s1.setAttribute('context-group', 'A'); |
| checkSparkline(s1, {left: 0, width: 51, classList: ['positive']}); |
| checkSparkline(s2, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 76, classList: ['positive']}); |
| checkSparkline(s4, {left: 0, width: 101, classList: ['positive']}); |
| |
| s1.value = 50; |
| checkSparkline(s1, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s2, {left: 0, width: 41, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 76, classList: ['positive']}); |
| checkSparkline(s4, {left: 0, width: 101, classList: ['positive']}); |
| |
| s1.customContextRange = tr.b.Range.fromExplicitRange(0, 150); |
| checkSparkline(s1, {left: 0, width: 34.33, classList: ['positive']}); |
| checkSparkline(s2, {left: 0, width: 41, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 76, classList: ['positive']}); |
| checkSparkline(s4, {left: 0, width: 101, classList: ['positive']}); |
| |
| s4.contextGroup = null; |
| checkSparkline(s1, {left: 0, width: 34.33, classList: ['positive']}); |
| checkSparkline(s2, {left: 0, width: 41, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s4, {display: 'none'}); |
| |
| s1.customContextRange = undefined; |
| checkSparkline(s1, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s2, {left: 0, width: 41, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s4, {display: 'none'}); |
| |
| s4.value = 0; |
| checkSparkline(s1, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s2, {left: 0, width: 41, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s4, {display: 'none'}); |
| |
| div.removeChild(s1); |
| checkSparkline(s2, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s4, {display: 'none'}); |
| |
| s1.contextGroup = 'B'; |
| checkSparkline(s2, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s4, {display: 'none'}); |
| |
| div.appendChild(s1); |
| checkSparkline(s2, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 61, classList: ['positive']}); |
| checkSparkline(s4, {display: 'none'}); |
| checkSparkline(s1, {left: 0, width: 101, classList: ['positive']}); |
| |
| s1.removeAttribute('context-group'); |
| checkSparkline(s2, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s4, {display: 'none'}); |
| checkSparkline(s1, {display: 'none'}); |
| |
| s1.customContextRange = tr.b.Range.fromExplicitRange(0, 100); |
| checkSparkline(s2, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s3, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s4, {display: 'none'}); |
| checkSparkline(s1, {left: 0, width: 51, classList: ['positive']}); |
| |
| s3.value = 0; |
| checkSparkline(s2, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(s3, {display: 'none'}); |
| checkSparkline(s4, {display: 'none'}); |
| checkSparkline(s1, {left: 0, width: 51, classList: ['positive']}); |
| }); |
| |
| test('deltaSparkline_noImprovementDirection', function() { |
| var div = document.createElement('div'); |
| div.style.width = '101px'; // One extra pixel for sparkline border. |
| this.addHTMLOutput(div); |
| div.appendChild( |
| document.createElement('tr-v-ui-scalar-context-controller')); |
| |
| var span1 = tr.v.ui.createScalarSpan(20971520, { |
| unit: Unit.byName.sizeInBytesDelta, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span1); |
| var span2 = tr.v.ui.createScalarSpan(15728640, { |
| unit: Unit.byName.sizeInBytesDelta, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span2); |
| var span3 = tr.v.ui.createScalarSpan(12582912, { |
| unit: Unit.byName.sizeInBytesDelta, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span3); |
| var span4 = tr.v.ui.createScalarSpan(11534336, { |
| unit: Unit.byName.sizeInBytesDelta, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span4); |
| var span5 = tr.v.ui.createScalarSpan(10485760, { |
| unit: Unit.byName.sizeInBytesDelta, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span5); |
| var span6 = tr.v.ui.createScalarSpan(9437184, { |
| unit: Unit.byName.sizeInBytesDelta, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span6); |
| var span7 = tr.v.ui.createScalarSpan(8388608, { |
| unit: Unit.byName.sizeInBytesDelta, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span7); |
| var span8 = tr.v.ui.createScalarSpan(5242880, { |
| unit: Unit.byName.sizeInBytesDelta, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span8); |
| |
| // We must check the sparklines *after* all spans are appended because new |
| // values can change the context range. |
| checkSparkline(span1, {left: 0, width: 101, classList: ['positive']}); |
| checkSparkline(span2, {left: 0, width: 76, classList: ['positive']}); |
| checkSparkline(span3, {left: 0, width: 61, classList: ['positive']}); |
| checkSparkline(span4, {left: 0, width: 56, classList: ['positive']}); |
| checkSparkline(span5, {left: 0, width: 51, classList: ['positive']}); |
| checkSparkline(span6, {left: 0, width: 46, classList: ['positive']}); |
| checkSparkline(span7, {left: 0, width: 41, classList: ['positive']}); |
| checkSparkline(span8, {left: 0, width: 26, classList: ['positive']}); |
| }); |
| |
| test('deltaSparkline_smallerIsBetter', function() { |
| var div = document.createElement('div'); |
| div.style.width = '101px'; // One extra pixel for sparkline border. |
| this.addHTMLOutput(div); |
| div.appendChild( |
| document.createElement('tr-v-ui-scalar-context-controller')); |
| |
| var span1 = tr.v.ui.createScalarSpan(5242880, { |
| unit: Unit.byName.sizeInBytesDelta_smallerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span1); |
| var span2 = tr.v.ui.createScalarSpan(0, { |
| unit: Unit.byName.sizeInBytesDelta_smallerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span2); |
| var span3 = tr.v.ui.createScalarSpan(-3145728, { |
| unit: Unit.byName.sizeInBytesDelta_smallerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span3); |
| var span4 = tr.v.ui.createScalarSpan(-4194304, { |
| unit: Unit.byName.sizeInBytesDelta_smallerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span4); |
| var span5 = tr.v.ui.createScalarSpan(-5242880, { |
| unit: Unit.byName.sizeInBytesDelta_smallerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span5); |
| var span6 = tr.v.ui.createScalarSpan(-6291456, { |
| unit: Unit.byName.sizeInBytesDelta_smallerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span6); |
| var span7 = tr.v.ui.createScalarSpan(-7340032, { |
| unit: Unit.byName.sizeInBytesDelta_smallerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span7); |
| var span8 = tr.v.ui.createScalarSpan(-15728640, { |
| unit: Unit.byName.sizeInBytesDelta_smallerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span8); |
| |
| // We must check the sparklines *after* all spans are appended because new |
| // values can change the context range. |
| checkSparkline(span1, |
| {left: 75, width: 26, classList: ['positive', 'worse']}); |
| checkSparkline(span2, {left: 75, width: 1, classList: ['same']}); |
| checkSparkline(span3, {left: 60, width: 16, classList: ['better']}); |
| checkSparkline(span4, {left: 55, width: 21, classList: ['better']}); |
| checkSparkline(span5, {left: 50, width: 26, classList: ['better']}); |
| checkSparkline(span6, {left: 45, width: 31, classList: ['better']}); |
| checkSparkline(span7, {left: 40, width: 36, classList: ['better']}); |
| checkSparkline(span8, {left: 0, width: 76, classList: ['better']}); |
| }); |
| |
| test('deltaSparkline_biggerIsBetter', function() { |
| var div = document.createElement('div'); |
| div.style.width = '101px'; // One extra pixel for sparkline border. |
| this.addHTMLOutput(div); |
| div.appendChild( |
| document.createElement('tr-v-ui-scalar-context-controller')); |
| |
| var span1 = tr.v.ui.createScalarSpan(0, { |
| unit: Unit.byName.sizeInBytesDelta_biggerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span1); |
| var span2 = tr.v.ui.createScalarSpan(-5242880, { |
| unit: Unit.byName.sizeInBytesDelta_biggerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span2); |
| var span3 = tr.v.ui.createScalarSpan(-8388608, { |
| unit: Unit.byName.sizeInBytesDelta_biggerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span3); |
| var span4 = tr.v.ui.createScalarSpan(-9437184, { |
| unit: Unit.byName.sizeInBytesDelta_biggerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span4); |
| var span5 = tr.v.ui.createScalarSpan(-10485760, { |
| unit: Unit.byName.sizeInBytesDelta_biggerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span5); |
| var span6 = tr.v.ui.createScalarSpan(-11534336, { |
| unit: Unit.byName.sizeInBytesDelta_biggerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span6); |
| var span7 = tr.v.ui.createScalarSpan(-12582912, { |
| unit: Unit.byName.sizeInBytesDelta_biggerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span7); |
| var span8 = tr.v.ui.createScalarSpan(-20971520, { |
| unit: Unit.byName.sizeInBytesDelta_biggerIsBetter, |
| contextGroup: 'test' |
| }); |
| Polymer.dom(div).appendChild(span8); |
| |
| // We must check the sparklines *after* all spans are appended because new |
| // values can change the context range. |
| checkSparkline(span1, {left: 100, width: 1, classList: ['same']}); |
| checkSparkline(span2, {left: 75, width: 26, classList: ['worse']}); |
| checkSparkline(span3, {left: 60, width: 41, classList: ['worse']}); |
| checkSparkline(span4, {left: 55, width: 46, classList: ['worse']}); |
| checkSparkline(span5, {left: 50, width: 51, classList: ['worse']}); |
| checkSparkline(span6, {left: 45, width: 56, classList: ['worse']}); |
| checkSparkline(span7, {left: 40, width: 61, classList: ['worse']}); |
| checkSparkline(span8, {left: 0, width: 101, classList: ['worse']}); |
| }); |
| |
| test('classListChanges', function() { |
| var div = document.createElement('div'); |
| div.style.width = '200px'; |
| this.addHTMLOutput(div); |
| |
| var span = tr.v.ui.createScalarSpan(10, { |
| unit: Unit.byName.energyInJoulesDelta_smallerIsBetter, |
| significance: tr.v.Significance.SIGNIFICANT, |
| customContextRange: tr.b.Range.fromExplicitRange(-20, 20) |
| }); |
| Polymer.dom(div).appendChild(span); |
| |
| assert.sameMembers(tr.b.asArray(span.$.sparkline.classList), |
| ['positive', 'worse']); |
| assert.sameMembers(tr.b.asArray(span.$.significance.classList), |
| ['worse']); |
| assert.sameMembers(tr.b.asArray(span.$.content.classList), ['worse']); |
| |
| span.significance = tr.v.Significance.DONT_CARE; |
| assert.sameMembers(tr.b.asArray(span.$.sparkline.classList), |
| ['positive', 'worse']); |
| assert.sameMembers(tr.b.asArray(span.$.significance.classList), ['same']); |
| assert.sameMembers(tr.b.asArray(span.$.content.classList), ['worse']); |
| |
| span.value = -5; |
| assert.sameMembers(tr.b.asArray(span.$.sparkline.classList), ['better']); |
| assert.sameMembers(tr.b.asArray(span.$.significance.classList), ['same']); |
| assert.sameMembers(tr.b.asArray(span.$.content.classList), ['better']); |
| |
| span.unit = Unit.byName.energyInJoules; |
| assert.sameMembers(tr.b.asArray(span.$.sparkline.classList), []); |
| assert.sameMembers(tr.b.asArray(span.$.significance.classList), []); |
| assert.sameMembers(tr.b.asArray(span.$.content.classList), []); |
| |
| span.value = 20; |
| assert.sameMembers(tr.b.asArray(span.$.sparkline.classList), ['positive']); |
| assert.sameMembers(tr.b.asArray(span.$.significance.classList), []); |
| assert.sameMembers(tr.b.asArray(span.$.content.classList), []); |
| |
| span.unit = Unit.byName.energyInJoulesDelta_biggerIsBetter; |
| assert.sameMembers(tr.b.asArray(span.$.sparkline.classList), |
| ['positive', 'better']); |
| assert.sameMembers(tr.b.asArray(span.$.significance.classList), ['same']); |
| assert.sameMembers(tr.b.asArray(span.$.content.classList), ['better']); |
| |
| span.significance = tr.v.Significance.INSIGNIFICANT; |
| assert.sameMembers(tr.b.asArray(span.$.sparkline.classList), |
| ['positive', 'better']); |
| assert.sameMembers(tr.b.asArray(span.$.significance.classList), ['same']); |
| assert.sameMembers(tr.b.asArray(span.$.content.classList), ['better']); |
| |
| span.unit = Unit.byName.energyInJoulesDelta_smallerIsBetter; |
| assert.sameMembers(tr.b.asArray(span.$.sparkline.classList), |
| ['positive', 'worse']); |
| assert.sameMembers(tr.b.asArray(span.$.significance.classList), ['same']); |
| assert.sameMembers(tr.b.asArray(span.$.content.classList), ['worse']); |
| |
| span.unit = Unit.byName.energyInJoulesDelta; |
| assert.sameMembers(tr.b.asArray(span.$.sparkline.classList), ['positive']); |
| assert.sameMembers(tr.b.asArray(span.$.significance.classList), []); |
| assert.sameMembers(tr.b.asArray(span.$.content.classList), []); |
| |
| span.value = 0; |
| assert.sameMembers(tr.b.asArray(span.$.sparkline.classList), []); |
| assert.sameMembers(tr.b.asArray(span.$.significance.classList), []); |
| assert.sameMembers(tr.b.asArray(span.$.content.classList), []); |
| }); |
| |
| test('sparkline_uncentered', function() { |
| var div = document.createElement('div'); |
| this.addHTMLOutput(div); |
| div.appendChild( |
| document.createElement('tr-v-ui-scalar-context-controller')); |
| |
| Polymer.dom(div).appendChild(tr.v.ui.createScalarSpan(-1, { |
| unit: Unit.byName.powerInWattsDelta, |
| contextGroup: 'test' |
| })); |
| Polymer.dom(div).appendChild(tr.v.ui.createScalarSpan(100, { |
| unit: Unit.byName.powerInWattsDelta, |
| contextGroup: 'test' |
| })); |
| Polymer.dom(div).appendChild(tr.v.ui.createScalarSpan(80, { |
| unit: Unit.byName.powerInWattsDelta, |
| contextGroup: 'test' |
| })); |
| Polymer.dom(div).appendChild(tr.v.ui.createScalarSpan(60, { |
| unit: Unit.byName.powerInWattsDelta, |
| contextGroup: 'test' |
| })); |
| }); |
| |
| test('sparkline_centered', function() { |
| var div = document.createElement('div'); |
| this.addHTMLOutput(div); |
| div.appendChild( |
| document.createElement('tr-v-ui-scalar-context-controller')); |
| |
| Polymer.dom(div).appendChild(tr.v.ui.createScalarSpan(-1, { |
| unit: Unit.byName.powerInWattsDelta, |
| customContextRange: tr.b.Range.fromExplicitRange(-100, 100) |
| })); |
| Polymer.dom(div).appendChild(tr.v.ui.createScalarSpan(100, { |
| unit: Unit.byName.powerInWattsDelta, |
| customContextRange: tr.b.Range.fromExplicitRange(-100, 100) |
| })); |
| Polymer.dom(div).appendChild(tr.v.ui.createScalarSpan(80, { |
| unit: Unit.byName.powerInWattsDelta, |
| customContextRange: tr.b.Range.fromExplicitRange(-100, 100) |
| })); |
| Polymer.dom(div).appendChild(tr.v.ui.createScalarSpan(60, { |
| unit: Unit.byName.powerInWattsDelta, |
| customContextRange: tr.b.Range.fromExplicitRange(-100, 100) |
| })); |
| }); |
| }); |
| </script> |
