src/third_party/trace-viewer/trace_viewer/base/ui/overlay_test.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2014 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 <link rel="import" href="/base/ui/overlay.html">
   8 <link rel="import" href="/base/ui/dom_helpers.html">
   9 <script>
  10 'use strict';
  11
  12 tv.unittest.testSuite(function() {
  13   function addShowButtonForDialog(dlg) {
  14     var btn = document.createElement('button');
  15     btn.textContent = 'Launch Overlay';
  16     btn.addEventListener('click', function(e) {
  17       dlg.visible = true;
  18       e.stopPropagation();
  19     });
  20
  21     this.addHTMLOutput(btn);
  22   }
  23
  24   function makeButton(title) {
  25     var btn = document.createElement('button');
  26     btn.textContent = title;
  27     return btn;
  28   }
  29
  30   function makeCloseButton(dlg) {
  31     var btn = makeButton('close');
  32     btn.addEventListener('click', function(e) {
  33       dlg.onClose_(e);
  34     });
  35     return btn;
  36   }
  37
  38   test('instantiate', function() {
  39     var dlg = new tv.ui.Overlay();
  40     dlg.classList.add('example-overlay');
  41     dlg.title = 'ExampleOverlay';
  42     dlg.innerHTML = 'hello';
  43     dlg.buttons.appendChild(makeButton('i am a button'));
  44     dlg.buttons.appendChild(makeCloseButton(dlg));
  45     dlg.buttons.appendChild(tv.ui.createSpan(
  46         {textContent: 'i am a span'}));
  47     addShowButtonForDialog.call(this, dlg);
  48   });
  49
  50   test('instantiate_noButtons', function() {
  51     var dlg = new tv.ui.Overlay();
  52     dlg.classList.add('example-overlay');
  53     dlg.title = 'ExampleOverlay';
  54     dlg.innerHTML = 'hello';
  55     addShowButtonForDialog.call(this, dlg);
  56   });
  57
  58   test('instantiate_disableUserClose', function() {
  59     var dlg = new tv.ui.Overlay();
  60     dlg.classList.add('example-overlay');
  61     dlg.userCanClose = false;
  62     dlg.title = 'Unclosable';
  63     dlg.innerHTML = 'This has no close X button.';
  64     dlg.buttons.appendChild(makeCloseButton(dlg));
  65     addShowButtonForDialog.call(this, dlg);
  66   });
  67
  68   test('instantiateTall', function() {
  69     var dlg = new tv.ui.Overlay();
  70     dlg.title = 'TallContent';
  71     var contentEl = document.createElement('div');
  72     contentEl.style.overflowY = 'auto';
  73     dlg.appendChild(contentEl);
  74
  75     for (var i = 0; i < 1000; i++) {
  76       var el = document.createElement('div');
  77       el.textContent = 'line ' + i;
  78       contentEl.appendChild(el);
  79     }
  80
  81
  82     dlg.buttons.appendChild(makeButton('i am a button'));
  83     addShowButtonForDialog.call(this, dlg);
  84   });
  85
  86   test('instantiateTallWithManyDirectChildren', function() {
  87     var dlg = new tv.ui.Overlay();
  88     dlg.title = 'TallContent';
  89     for (var i = 0; i < 100; i++) {
  90       var el = document.createElement('div');
  91       el.style.webkitFlex = '1 0 auto';
  92       el.textContent = 'line ' + i;
  93       dlg.appendChild(el);
  94     }
  95
  96     dlg.buttons.appendChild(makeButton('i am a button'));
  97     addShowButtonForDialog.call(this, dlg);
  98   });
  99
 100   test('closeclickEvent', function() {
 101     var dlg = new tv.ui.Overlay();
 102     dlg.title = 'Test closeclick event';
 103     var closeBtn = makeCloseButton(dlg);
 104     dlg.buttons.appendChild(closeBtn);
 105
 106     var closeClicked = false;
 107     dlg.addEventListener('closeclick', function() {
 108       closeClicked = true;
 109     });
 110
 111     return new Promise(function(resolve, reject) {
 112       function pressClose() {
 113         closeBtn.click();
 114         if (closeClicked)
 115           resolve();
 116         else
 117           reject(new Error('closeclick event is not dispatched'));
 118       }
 119       dlg.visible = true;
 120       setTimeout(pressClose, 60);
 121     });
 122   });
 123 });
 124 </script>