1<!doctype html>
2<!--
3Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.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="../../../webcomponentsjs/webcomponents.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    .sized {
26      height: 200px;
27      width: 300px;
28      border: 1px solid black;
29      padding: 10px;
30    }
31
32    .positioned {
33      top: 0;
34      left: 0;
35    }
36  </style>
37</head>
38<body unresolved>
39
40<core-overlay class="sized" id="basic">
41  Sized Overlay
42</core-overlay>
43
44<core-overlay class="sized positioned" id="overlay">
45  Positioned Overlay
46</core-overlay>
47
48<template>
49  <div>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
50</template>
51
52<script>
53  document.addEventListener('polymer-ready', function() {
54    // setup
55    var basic = document.querySelector('#basic');
56    var overlay = document.querySelector('#overlay');
57    var template = document.querySelector('template');
58
59    function testWhenOpen(element, test, next) {
60      var l1 = function() {
61        test();
62        element.async(function() {
63          element.opened = false;
64        }, 1);
65      };
66      var l2 = function() {
67        element.removeEventListener('core-overlay-open-completed', l1);
68        element.removeEventListener('core-overlay-close-completed', l2);
69        next();
70      };
71      element.addEventListener('core-overlay-open-completed', l1);
72      element.addEventListener('core-overlay-close-completed', l2);
73      element.opened = true;
74    }
75
76    asyncSeries([
77      // centered overlay
78      function(next) {
79        testWhenOpen(basic, function() {
80          var rect = basic.getBoundingClientRect();
81          chai.assert.ok(Math.abs(rect.left - (window.innerWidth - rect.right)) < 5, 'overlay centered horizontally');
82          chai.assert.ok(Math.abs(rect.top - (window.innerHeight - rect.bottom)) < 5, 'overlay centered vertically');
83        }, next);
84      },
85      // does not retain positioning when centered and re-opened
86      function(next) {
87        var listener = function(e) {
88          var dimensions = e.target.dimensions;
89          chai.assert.equal(dimensions.position.h, undefined);
90          chai.assert.equal(dimensions.position.v, undefined);
91        };
92        basic.addEventListener('core-overlay-open-completed', listener, false);
93        testWhenOpen(basic, function() {
94          var rect = basic.getBoundingClientRect();
95          chai.assert.ok(Math.abs(rect.left - (window.innerWidth - rect.right)) < 5, 'overlay centered horizontally');
96          chai.assert.ok(Math.abs(rect.top - (window.innerHeight - rect.bottom)) < 5, 'overlay centered vertically');
97          basic.removeEventListener('core-overlay-open-completed', listener, false);
98        }, next);
99      },
100      // css positioned overlay
101      function(next) {
102        testWhenOpen(overlay, function() {
103          var rect = overlay.getBoundingClientRect();
104          chai.assert.equal(rect.left, 0, 'positions via css');
105          chai.assert.equal(rect.top, 0, 'positions via css');
106        }, next);
107      },
108      // manual positioned overlay
109      function(next) {
110        overlay.style.left = overlay.style.top = 'auto';
111        overlay.style.right = '0px';
112        testWhenOpen(overlay, function() {
113          var rect = overlay.getBoundingClientRect();
114          chai.assert.equal(rect.right, window.innerWidth, 'positioned manually');
115          chai.assert.ok(Math.abs(rect.top - (window.innerHeight - rect.bottom)) < 5, 'overlay centered vertically');
116        }, next);
117      },
118      // overflow, position top, left
119      function(next) {
120        overlay.style.left = overlay.style.top = '0px';
121        overlay.style.right = 'auto';
122        overlay.style.width = overlay.style.height = 'auto';
123        for (var i=0; i<20; i++) {
124          overlay.appendChild(template.content.cloneNode(true));
125        }
126        testWhenOpen(overlay, function() {
127          var rect = overlay.getBoundingClientRect();
128          chai.assert.ok(window.innerWidth >= rect.right, 'overlay constrained to window size');
129          chai.assert.ok(window.innerHeight >= rect.bottom, 'overlay constrained to window size');
130        }, next);
131      },
132      // overflow, position, bottom, right
133      function(next) {
134        overlay.style.right = overlay.style.bottom = '0px';
135        overlay.style.left = overlay.style.top = 'auto';
136        testWhenOpen(overlay, function() {
137          var rect = overlay.getBoundingClientRect();
138          chai.assert.ok(window.innerWidth >= rect.right, 'overlay constrained to window size');
139          chai.assert.ok(window.innerHeight >= rect.bottom, 'overlay constrained to window size');
140        }, next);
141      },
142      // overflow, unpositioned
143      function(next) {
144        overlay.style.right = overlay.style.bottom = 'auto';
145        overlay.style.left = overlay.style.top = 'auto';
146        testWhenOpen(overlay, function() {
147          var rect = overlay.getBoundingClientRect();
148          chai.assert.ok(window.innerWidth >= rect.right, 'overlay constrained to window size');
149          chai.assert.ok(window.innerHeight >= rect.bottom, 'overlay constrained to window size');
150        }, next);
151      },
152      // overflow, unpositioned, layered
153      function(next) {
154        overlay.layered = true;
155        testWhenOpen(overlay, function() {
156          var rect = overlay.getBoundingClientRect();
157          chai.assert.ok(window.innerWidth >= rect.right, 'overlay constrained to window size');
158          chai.assert.ok(window.innerHeight >= rect.bottom, 'overlay constrained to window size');
159        }, next);
160      },
161    ], done);
162  });
163
164</script>
165
166</body>
167</html>
168