• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<html>
12
13<head>
14
15    <title>iron-overlay-backdrop tests</title>
16
17    <meta charset="utf-8">
18    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
19    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
20
21    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
22
23    <script src="../../web-component-tester/browser.js"></script>
24    <link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
25    <link rel="import" href="test-overlay.html">
26
27    <style>
28        html,
29        body {
30            margin: 0;
31            width: 100%;
32            height: 100%;
33            min-width: 0;
34        }
35        .sizer {
36            width: 4000px;
37            height: 5000px;
38        }
39    </style>
40
41</head>
42
43<body>
44
45<div class="sizer"></div>
46
47<test-fixture id="backdrop">
48    <template>
49        <test-overlay with-backdrop>
50            Overlay with backdrop
51        </test-overlay>
52    </template>
53</test-fixture>
54
55<script>
56    function runAfterOpen(overlay, callback) {
57        overlay.addEventListener('iron-overlay-opened', callback);
58        overlay.open();
59    }
60
61    suite('overlay with backdrop', function() {
62        var overlay;
63
64        setup(function() {
65            overlay = fixture('backdrop');
66        });
67
68        test('backdrop size matches parent size', function(done) {
69            runAfterOpen(overlay, function() {
70                // Flush so we are sure backdrop is added in the DOM.
71                Polymer.dom.flush();
72                var backdrop = overlay.backdropElement;
73                var parent = backdrop.parentElement;
74                assert.strictEqual(backdrop.offsetWidth, parent.clientWidth, 'backdrop width matches parent width');
75                assert.strictEqual(backdrop.offsetHeight, parent.clientHeight, 'backdrop height matches parent height');
76                done();
77            });
78        });
79
80    });
81</script>
82
83</body>
84
85</html>
86