OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <!-- | |
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
9 --> | |
10 <html> | |
11 <head> | |
12 <title>core-overlay</title> | |
13 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0"> | |
14 <script src="../../../platform/platform.js"></script> | |
15 <script src="../../../polymer-test-tools/chai/chai.js"></script> | |
16 <script src="../../../polymer-test-tools/htmltest.js"></script> | |
17 <link rel="import" href="../../../core-transition/core-transition-css.html"> | |
18 <link rel="import" href="../../core-overlay.html"> | |
19 <style> | |
20 body { | |
21 margin: 0; | |
22 height: 100%; | |
23 } | |
24 | |
25 #basic { | |
26 height: 200px; | |
27 width: 300px; | |
28 border: 1px solid black; | |
29 padding: 10px; | |
30 } | |
31 </style> | |
32 </head> | |
33 <body fit unresolved> | |
34 | |
35 <core-overlay id="basic"> | |
36 Basic Overlay | |
37 </core-overlay> | |
38 | |
39 <div id="target">Targeted Overlay</div> | |
40 <core-overlay id="targeted"></core-overlay> | |
41 | |
42 <core-overlay layered id="layered"> | |
43 <style no-shim> | |
44 #layered { | |
45 height: 200px; | |
46 width: 300px; | |
47 border: 1px solid black; | |
48 padding: 10px; | |
49 } | |
50 </style> | |
51 Layered Overlay | |
52 </core-overlay> | |
53 | |
54 <core-overlay layered backdrop id="backdrop"> | |
55 <style no-shim> | |
56 #backdrop { | |
57 height: 200px; | |
58 width: 300px; | |
59 border: 1px solid black; | |
60 padding: 10px; | |
61 background-color: white; | |
62 } | |
63 </style> | |
64 Layered backdrop Overlay | |
65 </core-overlay> | |
66 | |
67 <script> | |
68 document.addEventListener('polymer-ready', function() { | |
69 // setup | |
70 // basic | |
71 var basic = document.querySelector('#basic'); | |
72 // targeted | |
73 var target = document.querySelector('#target'); | |
74 var targeted = document.querySelector('#targeted'); | |
75 targeted.target = target; | |
76 // | |
77 var layered = document.querySelector('#layered'); | |
78 var backdrop = document.querySelector('#backdrop'); | |
79 | |
80 function testOpenEvents(element, next) { | |
81 var openingEvents = 0; | |
82 element.addEventListener('core-overlay-open', function() { | |
83 openingEvents++; | |
84 }); | |
85 element.addEventListener('core-overlay-open-completed', function() { | |
86 openingEvents++; | |
87 element.async(function() { | |
88 this.opened = false; | |
89 }, 1); | |
90 }); | |
91 element.addEventListener('core-overlay-close-completed', function() { | |
92 openingEvents++; | |
93 chai.assert.equal(openingEvents, 4, 'open and open-completed events fire
d'); | |
94 next(); | |
95 }); | |
96 element.opened = true; | |
97 } | |
98 | |
99 asyncSeries([ | |
100 // basic overlay events | |
101 function(next) { | |
102 chai.assert.equal(basic.opened, false, 'overlay starts closed'); | |
103 chai.assert.equal(getComputedStyle(basic).display, 'none', 'overlay star
ts hidden'); | |
104 testOpenEvents(basic, next); | |
105 | |
106 }, | |
107 // targeted overlay events | |
108 function(next) { | |
109 chai.assert.equal(targeted.opened, false, 'targeted overlay starts close
d'); | |
110 chai.assert.equal(getComputedStyle(target).display, 'none', 'targeted ov
erlay target starts hidden'); | |
111 testOpenEvents(targeted, next); | |
112 }, | |
113 // layered overlay events | |
114 function(next) { | |
115 testOpenEvents(layered, next); | |
116 }, | |
117 // backdrop overlay events | |
118 function(next) { | |
119 testOpenEvents(backdrop, next); | |
120 } | |
121 ], done); | |
122 }); | |
123 | |
124 </script> | |
125 | |
126 </body> | |
127 </html> | |
OLD | NEW |