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
7base.require('ui.drag_handle');
8
9base.unittest.testSuite('ui.drag_handle', 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 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});
92