| <!doctype html> |
| <!-- |
| Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| <html> |
| <head> |
| <title>core-overlay</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> |
| <script src="../../../webcomponentsjs/webcomponents.js"></script> |
| <script src="../../../polymer-test-tools/chai/chai.js"></script> |
| <script src="../../../polymer-test-tools/htmltest.js"></script> |
| <link rel="import" href="../../../core-transition/core-transition-css.html"> |
| <link rel="import" href="../../core-overlay.html"> |
| <style> |
| body { |
| margin: 0; |
| height: 100%; |
| } |
| |
| #basic { |
| height: 200px; |
| width: 300px; |
| border: 1px solid black; |
| padding: 10px; |
| } |
| </style> |
| </head> |
| <body fit unresolved> |
| |
| <core-overlay id="basic"> |
| Basic Overlay |
| </core-overlay> |
| |
| <div id="target">Targeted Overlay</div> |
| <core-overlay id="targeted"></core-overlay> |
| |
| <core-overlay layered id="layered"> |
| <style no-shim> |
| #layered { |
| height: 200px; |
| width: 300px; |
| border: 1px solid black; |
| padding: 10px; |
| } |
| </style> |
| Layered Overlay |
| </core-overlay> |
| |
| <core-overlay layered backdrop id="backdrop"> |
| <style no-shim> |
| #backdrop { |
| height: 200px; |
| width: 300px; |
| border: 1px solid black; |
| padding: 10px; |
| background-color: white; |
| } |
| </style> |
| Layered backdrop Overlay |
| </core-overlay> |
| |
| <script> |
| document.addEventListener('polymer-ready', function() { |
| // setup |
| // basic |
| var basic = document.querySelector('#basic'); |
| // targeted |
| var target = document.querySelector('#target'); |
| var targeted = document.querySelector('#targeted'); |
| targeted.target = target; |
| // |
| var layered = document.querySelector('#layered'); |
| var backdrop = document.querySelector('#backdrop'); |
| |
| function testOpenEvents(element, next) { |
| var openingEvents = 0; |
| element.addEventListener('core-overlay-open', function() { |
| openingEvents++; |
| }); |
| element.addEventListener('core-overlay-open-completed', function() { |
| openingEvents++; |
| element.async(function() { |
| this.opened = false; |
| }, 1); |
| }); |
| element.addEventListener('core-overlay-close-completed', function() { |
| openingEvents++; |
| chai.assert.equal(openingEvents, 4, 'open and open-completed events fired'); |
| next(); |
| }); |
| element.opened = true; |
| } |
| |
| asyncSeries([ |
| // basic overlay events |
| function(next) { |
| chai.assert.equal(basic.opened, false, 'overlay starts closed'); |
| chai.assert.equal(getComputedStyle(basic).display, 'none', 'overlay starts hidden'); |
| testOpenEvents(basic, next); |
| |
| }, |
| // targeted overlay events |
| function(next) { |
| chai.assert.equal(targeted.opened, false, 'targeted overlay starts closed'); |
| chai.assert.equal(getComputedStyle(target).display, 'none', 'targeted overlay target starts hidden'); |
| testOpenEvents(targeted, next); |
| }, |
| // layered overlay events |
| function(next) { |
| testOpenEvents(layered, next); |
| }, |
| // backdrop overlay events |
| function(next) { |
| testOpenEvents(backdrop, next); |
| } |
| ], done); |
| }); |
| |
| </script> |
| |
| </body> |
| </html> |
