third_party/polymer/components-chromium/paper-shadow/test/basic.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <html>
  11 <head>
  12   <meta charset="UTF-8">
  13   <title>paper-shadow basic tests</title>
  14   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  15
  16   <script src="../../webcomponentsjs/webcomponents.js"></script>
  17   <script src="../../web-component-tester/browser.js"></script>
  18   <script src="../../polymer-gestures/test/js/fake.js"></script>
  19
  20   <link href="../paper-shadow.html" rel="import">
  21
  22   <style>
  23     .card {
  24       width: 100px;
  25       height: 100px;
  26     }
  27   </style>
  28
  29 </head>
  30 <body>
  31
  32   <paper-shadow id="s1" class="card"></paper-shadow>
  33
  34   <paper-shadow id="s2" class="card">
  35     <div id="foo">hi!</div>
  36   </paper-shadow>
  37
  38   <script>
  39
  40     var s1 = document.getElementById('s1');
  41
  42     var fake = new Fake();
  43
  44     test('default', function() {
  45       assert.notEqual(getComputedStyle(s1.$['shadow-top'])['box-shadow'], 'none');
  46     });
  47
  48     test('shadows are pointer-events: none', function(done) {
  49       var foo = document.getElementById('foo');
  50       PolymerGestures.addEventListener(document, 'tap', function(e) {
  51         assert.strictEqual(e.target, foo);
  52         done();
  53       });
  54       fake.downOnNode(foo, function() {
  55         fake.upOnNode(foo);
  56       });
  57     });
  58
  59   </script>
  60
  61 </body>
  62 </html>