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 base.require('ui.drag_handle'); 8 9 base.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
