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