src/third_party/trace-viewer/third_party/tvcm/src/tvcm/ui/drag_handle_test.js

   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 tvcm.require('tvcm.ui.drag_handle');
   8
   9 tvcm.unittest.testSuite('tvcm.ui.drag_handle_test', function() {
  10   var createDragHandle = function() {
  11     var el = document.createElement('div');
  12     el.style.border = '1px solid black';
  13     el.style.width = '200px';
  14     el.style.height = '200px';
  15     el.style.display = '-webkit-flex';
  16     el.style.webkitFlexDirection = 'column';
  17
  18     var upperEl = document.createElement('div');
  19     upperEl.style.webkitFlex = '1 1 auto';
  20
  21     var lowerEl = document.createElement('div');
  22     lowerEl.style.height = '100px';
  23
  24     var dragHandle = new tvcm.ui.DragHandle();
  25     dragHandle.target = lowerEl;
  26
  27     el.appendChild(upperEl);
  28     el.appendChild(dragHandle);
  29     el.appendChild(lowerEl);
  30     el.upperEl = upperEl;
  31     el.dragHandle = dragHandle;
  32     el.lowerEl = lowerEl;
  33
  34     el.getLowerElHeight = function() {
  35       return parseInt(getComputedStyle(this.lowerEl).height);
  36     };
  37     return el;
  38   };
  39
  40   test('instantiate', function() {
  41     this.addHTMLOutput(createDragHandle());
  42   });
  43
  44   test('applyDelta', function() {
  45     var el = createDragHandle();
  46     document.body.appendChild(el);
  47
  48     var dragHandle = el.dragHandle;
  49     var oldHeight = el.getLowerElHeight();
  50     dragHandle.applyDelta_(10);
  51     assertEquals(oldHeight + 10, el.getLowerElHeight());
  52
  53     document.body.removeChild(el);
  54   });
  55
  56   test('classNameMutation', function() {
  57     var el = createDragHandle();
  58
  59     var styleEl = document.createElement('style');
  60     styleEl.textContent =
  61         '.mode-a { height: 100px; } .mode-b { height: 50px; }';
  62     document.head.appendChild(styleEl);
  63
  64     document.body.appendChild(el);
  65
  66     var dragHandle = el.dragHandle;
  67     el.lowerEl.className = 'mode-a';
  68     assertEquals(100, el.getLowerElHeight());
  69
  70     dragHandle.applyDelta_(10);
  71     assertEquals(110, el.getLowerElHeight());
  72
  73     // Change the class, which should restore the layout
  74     // to the default sizing for mode-b
  75     el.lowerEl.className = 'mode-b';
  76     dragHandle.forceMutationObserverFlush_();
  77     assertEquals(50, el.getLowerElHeight());
  78
  79     dragHandle.applyDelta_(10);
  80     assertEquals(60, el.getLowerElHeight());
  81
  82     // Restore the class-a, which should restore the layout
  83     // to sizing when we were changed.
  84     el.lowerEl.className = 'mode-a';
  85     dragHandle.forceMutationObserverFlush_();
  86     assertEquals(110, el.getLowerElHeight());
  87
  88     document.head.removeChild(styleEl);
  89     document.body.removeChild(el);
  90   });
  91 });