| OLD | NEW |
|---|
| (Empty) |
| 1 <!doctype html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <title>paper-ripple</title> | |
| 5 | |
| 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0"> | |
| 7 <meta name="mobile-web-app-capable" content="yes"> | |
| 8 <meta name="apple-mobile-web-app-capable" content="yes"> | |
| 9 | |
| 10 <script src="../../../platform/platform.js"></script> | |
| 11 | |
| 12 <link href="../../paper-ripple.html" rel="import"> | |
| 13 | |
| 14 <script src="../../../polymer-test-tools/chai/chai.js"></script> | |
| 15 <script src="../../../polymer-test-tools/htmltest.js"></script> | |
| 16 <script src="../../../polymer-gestures/test/js/fake.js"></script> | |
| 17 | |
| 18 <style> | |
| 19 .ripple-container { | |
| 20 border: 1px solid black; | |
| 21 position: relative; | |
| 22 margin: 16px; | |
| 23 } | |
| 24 | |
| 25 .ripple-container > span { | |
| 26 pointer-events: none; | |
| 27 } | |
| 28 | |
| 29 .ripple-1 { | |
| 30 width: 320px; | |
| 31 height: 480px; | |
| 32 } | |
| 33 | |
| 34 .ripple-1-tap { | |
| 35 top: 10px; | |
| 36 } | |
| 37 | |
| 38 .ripple-2 { | |
| 39 width: 480px; | |
| 40 height: 320px; | |
| 41 } | |
| 42 | |
| 43 .ripple-2-tap { | |
| 44 pointer-events: none; | |
| 45 } | |
| 46 | |
| 47 .ripple-3 { | |
| 48 width: 320px; | |
| 49 height: 320px; | |
| 50 } | |
| 51 </style> | |
| 52 | |
| 53 </head> | |
| 54 <body unresolved> | |
| 55 | |
| 56 <p>ripple originates from the tap position 1:</p> | |
| 57 <div class="ripple-container ripple-1" layout vertical center> | |
| 58 <paper-ripple fit></paper-ripple> | |
| 59 <span class="ripple-1-tap">tap here</span> | |
| 60 </div> | |
| 61 | |
| 62 <p>ripple originates from the tap position 2:</p> | |
| 63 <div class="ripple-container ripple-2" layout horizontal center> | |
| 64 <paper-ripple fit></paper-ripple> | |
| 65 <span class="ripple-2-tap">tap here</span> | |
| 66 </div> | |
| 67 | |
| 68 <script> | |
| 69 var fake = new Fake(); | |
| 70 | |
| 71 function centerOf(node) { | |
| 72 var rect = node.getBoundingClientRect(); | |
| 73 return {x: rect.left + rect.width / 2, y: rect.top + rect.height / 2}; | |
| 74 } | |
| 75 | |
| 76 function approxEqual(p1, p2) { | |
| 77 return Math.floor(p1.x) == Math.floor(p2.x) && Math.floor(p1.y) == Math.fl
oor(p2.y); | |
| 78 } | |
| 79 | |
| 80 function test1() { | |
| 81 var ripple1 = document.querySelector('.ripple-1-tap'); | |
| 82 fake.downOnNode(ripple1, function() { | |
| 83 | |
| 84 requestAnimationFrame(function() { | |
| 85 var wave = document.querySelector('.ripple-1 /deep/ .wave'); | |
| 86 chai.assert(approxEqual(centerOf(ripple1), centerOf(wave)), 'ripple po
sition is incorrect in tall container'); | |
| 87 | |
| 88 test2(); | |
| 89 }); | |
| 90 | |
| 91 }); | |
| 92 } | |
| 93 | |
| 94 function test2() { | |
| 95 var ripple1 = document.querySelector('.ripple-2-tap'); | |
| 96 fake.downOnNode(ripple1, function() { | |
| 97 | |
| 98 requestAnimationFrame(function() { | |
| 99 var wave = document.querySelector('.ripple-2 /deep/ .wave'); | |
| 100 chai.assert(approxEqual(centerOf(ripple1), centerOf(wave)), 'ripple po
sition is incorrect in wide container'); | |
| 101 | |
| 102 done(); | |
| 103 }); | |
| 104 | |
| 105 }); | |
| 106 } | |
| 107 | |
| 108 document.addEventListener('polymer-ready', test1); | |
| 109 </script> | |
| 110 | |
| 111 </body> | |
| 112 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master