src/third_party/trace-viewer/trace_viewer/tracing/tracks/rect_track_test.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2013 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/test_utils.html">
   9 <link rel="import" href="/tracing/trace_model/slice.html">
  10 <link rel="import" href="/tracing/timeline_track_view.html">
  11 <link rel="import" href="/tracing/draw_helpers.html">
  12 <link rel="import" href="/tvcm/ui/dom_helpers.html">
  13
  14 <script>
  15 'use strict';
  16
  17 tvcm.unittest.testSuite(function() {
  18   var Selection = tracing.Selection;
  19   var RectTrack = tracing.tracks.RectTrack;
  20   var Slice = tracing.trace_model.Slice;
  21   var Viewport = tracing.TimelineViewport;
  22
  23   var monkeyPatchTrack = function(track) {
  24     track.addRectToSelection = function(rect, selection) {
  25       selection.push(rect);
  26     };
  27     return track;
  28   };
  29
  30   test('instantiate_withRects', function() {
  31     var div = document.createElement('div');
  32     this.addHTMLOutput(div);
  33
  34     var viewport = new Viewport(div);
  35     var drawingContainer = new tracing.tracks.DrawingContainer(viewport);
  36     div.appendChild(drawingContainer);
  37
  38     var track = RectTrack(viewport);
  39     drawingContainer.appendChild(track);
  40     drawingContainer.invalidate();
  41
  42     track.heading = 'testBasicRects';
  43     track.rects = [
  44       new Slice('', 'a', 0, 1, {}, 1),
  45       new Slice('', 'b', 1, 2.1, {}, 4.8),
  46       new Slice('', 'b', 1, 7, {}, 0.5),
  47       new Slice('', 'c', 2, 7.6, {}, 0.4)
  48     ];
  49
  50     var dt = new tracing.TimelineDisplayTransform();
  51     dt.xSetWorldBounds(0, 8.8, track.clientWidth);
  52     track.viewport.setDisplayTransformImmediately(dt);
  53   });
  54
  55   test('instantiate_shrinkingRectSize', function() {
  56     var div = document.createElement('div');
  57     this.addHTMLOutput(div);
  58
  59     var viewport = new Viewport(div);
  60     var drawingContainer = new tracing.tracks.DrawingContainer(viewport);
  61     div.appendChild(drawingContainer);
  62
  63     var track = RectTrack(viewport);
  64     drawingContainer.appendChild(track);
  65     drawingContainer.invalidate();
  66
  67     track.heading = 'testShrinkingRectSizes';
  68     var x = 0;
  69     var widths = [10, 5, 4, 3, 2, 1, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05];
  70     var slices = [];
  71     for (var i = 0; i < widths.length; i++) {
  72       var s = new Slice('', 'a', 1, x, {}, widths[i]);
  73       x += s.duration + 0.5;
  74       slices.push(s);
  75     }
  76     track.rects = slices;
  77     var dt = new tracing.TimelineDisplayTransform();
  78     dt.xSetWorldBounds(0, 1.1 * x, track.clientWidth);
  79     track.viewport.setDisplayTransformImmediately(dt);
  80   });
  81
  82   test('instantiate_elide', function() {
  83     var optDicts = [{ trackName: 'elideOff', elide: false },
  84                     { trackName: 'elideOn', elide: true }];
  85
  86     var tooLongTitle = 'Unless eliding this SHOULD NOT BE DISPLAYED.  ';
  87     var bigTitle = 'Very big title name that goes on longer ' +
  88                    'than you may expect';
  89
  90     for (var dictIndex in optDicts) {
  91       var dict = optDicts[dictIndex];
  92
  93       var div = document.createElement('div');
  94       div.appendChild(document.createTextNode(dict.trackName));
  95       this.addHTMLOutput(div);
  96
  97       var viewport = new Viewport(div);
  98       var drawingContainer = new tracing.tracks.DrawingContainer(viewport);
  99       div.appendChild(drawingContainer);
 100
 101       var track = new RectTrack(viewport);
 102       drawingContainer.appendChild(track);
 103       drawingContainer.invalidate();
 104
 105       track.SHOULD_ELIDE_TEXT = dict.elide;
 106       track.heading = 'Visual: ' + dict.trackName;
 107       track.rects = [
 108         // title, colorId, start, args, opt_duration
 109         new Slice('', 'a ' + tooLongTitle + bigTitle, 0, 1, {}, 1),
 110         new Slice('', bigTitle, 1, 2.1, {}, 4.8),
 111         new Slice('', 'cccc cccc cccc', 1, 7, {}, 0.5),
 112         new Slice('', 'd', 2, 7.6, {}, 1.0)
 113       ];
 114       var dt = new tracing.TimelineDisplayTransform();
 115       dt.xSetWorldBounds(0, 9.5, track.clientWidth);
 116       track.viewport.setDisplayTransformImmediately(dt);
 117     }
 118   });
 119
 120   test('findAllObjectsMatchingInRectTrack', function() {
 121     var track = monkeyPatchTrack(RectTrack(new tracing.TimelineViewport()));
 122     track.rects = [
 123       new Slice('', 'a', 0, 1, {}, 1),
 124       new Slice('', 'b', 1, 2.1, {}, 4.8),
 125       new Slice('', 'b', 1, 7, {}, 0.5),
 126       new Slice('', 'c', 2, 7.6, {}, 0.4)
 127     ];
 128     var selection = new Selection();
 129     track.addAllObjectsMatchingFilterToSelection(
 130         new tracing.TitleFilter('b'), selection);
 131
 132     assertEquals(2, selection.length);
 133     assertEquals(track.rects[1], selection[0]);
 134     assertEquals(track.rects[2], selection[1]);
 135   });
 136
 137   test('selectionHitTesting', function() {
 138     var testEl = document.createElement('div');
 139     testEl.appendChild(tvcm.ui.createScopedStyle('heading { width: 100px; }'));
 140     testEl.style.width = '600px';
 141     this.addHTMLOutput(testEl);
 142
 143     var viewport = new Viewport(testEl);
 144     var drawingContainer = new tracing.tracks.DrawingContainer(viewport);
 145     testEl.appendChild(drawingContainer);
 146
 147     var track = monkeyPatchTrack(new RectTrack(viewport));
 148     drawingContainer.appendChild(track);
 149     drawingContainer.updateCanvasSizeIfNeeded_();
 150
 151     track.heading = 'testSelectionHitTesting';
 152     track.rects = [
 153       new Slice('', 'a', 0, 1, {}, 1),
 154       new Slice('', 'b', 1, 5, {}, 4.8)
 155     ];
 156     var y = track.getBoundingClientRect().top + 5;
 157     var pixelRatio = window.devicePixelRatio || 1;
 158     var wW = 10;
 159     var vW = drawingContainer.canvas.getBoundingClientRect().width;
 160
 161     var dt = new tracing.TimelineDisplayTransform();
 162     dt.xSetWorldBounds(0, wW, vW * pixelRatio);
 163     track.viewport.setDisplayTransformImmediately(dt);
 164
 165     var selection = new Selection();
 166     var x = (1.5 / wW) * vW;
 167     track.addIntersectingItemsInRangeToSelection(x, x + 1, y, y + 1, selection);
 168     assertEquals(track.rects[0], selection[0]);
 169
 170     var selection = new Selection();
 171     x = (2.1 / wW) * vW;
 172     track.addIntersectingItemsInRangeToSelection(x, x + 1, y, y + 1, selection);
 173     assertEquals(0, selection.length);
 174
 175     var selection = new Selection();
 176     x = (6.8 / wW) * vW;
 177     track.addIntersectingItemsInRangeToSelection(x, x + 1, y, y + 1, selection);
 178     assertEquals(track.rects[1], selection[0]);
 179
 180     var selection = new Selection();
 181     x = (9.9 / wW) * vW;
 182     track.addIntersectingItemsInRangeToSelection(x, x + 1, y, y + 1, selection);
 183     assertEquals(0, selection.length);
 184   });
 185
 186   test('elide', function() {
 187     var testEl = document.createElement('div');
 188     this.addHTMLOutput(testEl);
 189
 190     var viewport = new Viewport(testEl);
 191     var drawingContainer = new tracing.tracks.DrawingContainer(viewport);
 192     testEl.appendChild(drawingContainer);
 193
 194     var track = new RectTrack(viewport);
 195     drawingContainer.appendChild(track);
 196     drawingContainer.updateCanvasSizeIfNeeded_();
 197
 198     var bigtitle = 'Super duper long long title ' +
 199         'holy moly when did you get so verbose?';
 200     var smalltitle = 'small';
 201     track.heading = 'testElide';
 202     track.rects = [
 203       // title, colorId, start, args, opt_duration
 204       new Slice('', bigtitle, 0, 1, {}, 1),
 205       new Slice('', smalltitle, 1, 2, {}, 1)
 206     ];
 207     var dt = new tracing.TimelineDisplayTransform();
 208     dt.xSetWorldBounds(0, 3.3, track.clientWidth);
 209     track.viewport.setDisplayTransformImmediately(dt);
 210
 211     var stringWidthPair = undefined;
 212     var pixWidth = dt.xViewVectorToWorld(1);
 213
 214     // Small titles on big slices are not elided.
 215     stringWidthPair =
 216         tracing.elidedTitleCache_.get(
 217             track.context(),
 218             pixWidth,
 219             smalltitle,
 220             tracing.elidedTitleCache_.labelWidth(
 221                 track.context(),
 222                 smalltitle),
 223             1);
 224     assertEquals(smalltitle, stringWidthPair.string);
 225
 226     // Keep shrinking the slice until eliding starts.
 227     var elidedWhenSmallEnough = false;
 228     for (var sliceLength = 1; sliceLength >= 0.00001; sliceLength /= 2.0) {
 229       stringWidthPair =
 230           tracing.elidedTitleCache_.get(
 231               track.context(),
 232               pixWidth,
 233               smalltitle,
 234               tracing.elidedTitleCache_.labelWidth(
 235                   track.context(),
 236                   smalltitle),
 237               sliceLength);
 238       if (stringWidthPair.string.length < smalltitle.length) {
 239         elidedWhenSmallEnough = true;
 240         break;
 241       }
 242     }
 243     assertTrue(elidedWhenSmallEnough);
 244
 245     // Big titles are elided immediately.
 246     var superBigTitle = '';
 247     for (var x = 0; x < 10; x++) {
 248       superBigTitle += bigtitle;
 249     }
 250     stringWidthPair =
 251         tracing.elidedTitleCache_.get(
 252             track.context(),
 253             pixWidth,
 254             superBigTitle,
 255             tracing.elidedTitleCache_.labelWidth(
 256                 track.context(),
 257                 superBigTitle),
 258             1);
 259     assertTrue(stringWidthPair.string.length < superBigTitle.length);
 260
 261     // And elided text ends with ...
 262     var len = stringWidthPair.string.length;
 263     assertEquals('...', stringWidthPair.string.substring(len - 3, len));
 264   });
 265
 266   test('rectTrackAddItemNearToProvidedEvent', function() {
 267     var track = monkeyPatchTrack(new RectTrack(new tracing.TimelineViewport()));
 268     track.rects = [
 269       new Slice('', 'a', 0, 1, {}, 1),
 270       new Slice('', 'b', 1, 2.1, {}, 4.8),
 271       new Slice('', 'b', 1, 7, {}, 0.5),
 272       new Slice('', 'c', 2, 7.6, {}, 0.4)
 273     ];
 274     var sel = new Selection();
 275     track.addAllObjectsMatchingFilterToSelection(
 276         new tracing.TitleFilter('b'), sel);
 277     var ret;
 278
 279     // Select to the right of B.
 280     var selRight = new Selection();
 281     ret = track.addItemNearToProvidedEventToSelection(sel[0], 1, selRight);
 282     assertTrue(ret);
 283     assertEquals(track.rects[2], selRight[0]);
 284
 285     // Select to the right of the 2nd b.
 286     var selRight2 = new Selection();
 287     ret = track.addItemNearToProvidedEventToSelection(sel[0], 2, selRight2);
 288     assertTrue(ret);
 289     assertEquals(track.rects[3], selRight2[0]);
 290
 291     // Select to 2 to the right of the 2nd b.
 292     var selRightOfRight = new Selection();
 293     ret = track.addItemNearToProvidedEventToSelection(
 294         selRight[0], 1, selRightOfRight);
 295     assertTrue(ret);
 296     assertEquals(track.rects[3], selRightOfRight[0]);
 297
 298     // Select to the right of the rightmost slice.
 299     var selNone = new Selection();
 300     ret = track.addItemNearToProvidedEventToSelection(
 301         selRightOfRight[0], 1, selNone);
 302     assertFalse(ret);
 303     assertEquals(0, selNone.length);
 304
 305     // Select A and then select left.
 306     var sel = new Selection();
 307     track.addAllObjectsMatchingFilterToSelection(
 308         new tracing.TitleFilter('a'), sel);
 309     var ret;
 310
 311     selNone = new Selection();
 312     ret = track.addItemNearToProvidedEventToSelection(sel[0], -1, selNone);
 313     assertFalse(ret);
 314     assertEquals(0, selNone.length);
 315   });
 316
 317   test('rectTrackAddClosestEventToSelection', function() {
 318     var track = monkeyPatchTrack(new RectTrack(new tracing.TimelineViewport()));
 319     track.rects = [
 320       new Slice('', 'a', 0, 1, {}, 1),
 321       new Slice('', 'b', 1, 2.1, {}, 4.8),
 322       new Slice('', 'b', 1, 7, {}, 0.5),
 323       new Slice('', 'c', 2, 7.6, {}, 0.4)
 324     ];
 325
 326     // Before with not range.
 327     var sel = new Selection();
 328     track.addClosestEventToSelection(0, 0, 0, 0, sel);
 329     assertEquals(0, sel.length);
 330
 331     // Before with negative range.
 332     var sel = new Selection();
 333     track.addClosestEventToSelection(1.5, -10, 0, 0, sel);
 334     assertEquals(0, sel.length);
 335
 336     // Before first slice.
 337     var sel = new Selection();
 338     track.addClosestEventToSelection(0.5, 1, 0, 0, sel);
 339     assertEquals(1, sel.length);
 340     assertEquals(track.rects[0], sel[0]);
 341
 342     // Within first slice closer to start.
 343     var sel = new Selection();
 344     track.addClosestEventToSelection(1.3, 1, 0, 0, sel);
 345     assertEquals(track.rects[0], sel[0]);
 346
 347     // Between slices with good range.
 348     var sel = new Selection();
 349     track.addClosestEventToSelection(2.08, 3, 0, 0, sel);
 350     assertEquals(track.rects[1], sel[0]);
 351
 352     // Between slices with bad range.
 353     var sel = new Selection();
 354     track.addClosestEventToSelection(2.05, 0.03, 0, 0, sel);
 355     assertEquals(0, sel.length);
 356
 357     // Within slice closer to end.
 358     var sel = new Selection();
 359     track.addClosestEventToSelection(6, 100, 0, 0, sel);
 360     assertEquals(track.rects[1], sel[0]);
 361
 362     // Within slice with bad range.
 363     var sel = new Selection();
 364     track.addClosestEventToSelection(1.8, 0.1, 0, 0, sel);
 365     assertEquals(0, sel.length);
 366
 367     // After last slice with good range.
 368     var sel = new Selection();
 369     track.addClosestEventToSelection(8.5, 1, 0, 0, sel);
 370     assertEquals(track.rects[3], sel[0]);
 371
 372     // After last slice with bad range.
 373     var sel = new Selection();
 374     track.addClosestEventToSelection(10, 1, 0, 0, sel);
 375     assertEquals(0, sel.length);
 376   });
 377 });
 378 </script>