1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 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<head>
13  <meta charset="UTF-8">
14  <title>paper-material basic tests</title>
15  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
16
17  <script src="../../webcomponentsjs/webcomponents.js"></script>
18  <script src="../../web-component-tester/browser.js"></script>
19  <link href="../paper-material.html" rel="import">
20
21</head>
22<body>
23  <test-fixture id="TrivialCard">
24    <template>
25      <paper-material elevation="1"></paper-material>
26    </template>
27  </test-fixture>
28
29  <test-fixture id="ProgressiveElevations">
30    <template>
31      <paper-material elevation="1"></paper-material>
32      <paper-material elevation="2"></paper-material>
33      <paper-material elevation="3"></paper-material>
34      <paper-material elevation="4"></paper-material>
35      <paper-material elevation="5"></paper-material>
36    </template>
37  </test-fixture>
38
39  <script>
40    suite('<paper-material>', function() {
41      suite('with a non-zero elevation attribute', function() {
42        var style;
43        var card;
44
45        setup(function() {
46          card = fixture('TrivialCard');
47          style = window.getComputedStyle(card);
48        });
49
50        test('has a shadow', function() {
51          expect(style.boxShadow).to.be.ok;
52          expect(style.boxShadow).to.not.be.eql('none');
53        });
54
55        test('loses shadow with elevation value 0', function() {
56          card.elevation = 0;
57          expect(style.boxShadow).to.be.eql('none');
58        });
59      });
60
61      suite('progressively increasing values of elevation', function() {
62        var cards;
63
64        setup(function() {
65          cards = fixture('ProgressiveElevations');
66        });
67
68        test('yield progressively "deeper" cards', function() {
69          var lastStyle;
70          var style;
71
72          expect(cards.length).to.be.eql(5);
73
74          cards.forEach(function (card) {
75            style = window.getComputedStyle(card);
76
77            expect(style.boxShadow).to.be.ok;
78            expect(style.boxShadow).to.not.be.eql('none');
79            expect(style.boxShadow).to.not.be.eql(lastStyle && lastStyle.boxShadow);
80
81            lastStyle = style;
82          });
83        });
84      });
85    });
86  </script>
87</body>
88</html>
89