polymer_0.5.0/bower_components/paper-ripple/test/position.html - Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

Side by Side Diff: polymer_0.5.0/bower_components/paper-ripple/test/position.html

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

Patch Set: Created 5 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
1 <!doctype 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.g ithub.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/CONTRI BUTORS.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/PATEN TS.txt

	9 -->

2 <html>	10 <html>

3 <head>	11 <head>

4 <title>paper-ripple</title>	12

5	13 <meta charset="UTF-8">

	14 <title>paper-ripple position tests</title>

6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0">	15 <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	16

14 <script src="../../../polymer-test-tools/chai/chai.js"></script>	17 <script src="../../webcomponentsjs/webcomponents.js"></script>

15 <script src="../../../polymer-test-tools/htmltest.js"></script>	18 <script src="../../web-component-tester/browser.js"></script>

16 <script src="../../../polymer-gestures/test/js/fake.js"></script>	19 <script src="../../polymer-gestures/test/js/fake.js"></script>

	20

	21 <link href="../paper-ripple.html" rel="import">

17	22

18 <style>	23 <style>

19 .ripple-container {	24 .ripple-container {

20 border: 1px solid black;	25 border: 1px solid black;

21 position: relative;	26 position: relative;

22 margin: 16px;	27 margin: 16px;

23 }	28 }

24	29

25 .ripple-container > span {	30 .ripple-container > span {

26 pointer-events: none;	31 pointer-events: none;

(...skipping 19 matching lines...) Expand all Loading...
46	51

47 .ripple-3 {	52 .ripple-3 {

48 width: 320px;	53 width: 320px;

49 height: 320px;	54 height: 320px;

50 }	55 }

51 </style>	56 </style>

52	57

53 </head>	58 </head>

54 <body unresolved>	59 <body unresolved>

55	60

56 <p>ripple originates from the tap position 1:</p>

57 <div class="ripple-container ripple-1" layout vertical center>	61 <div class="ripple-container ripple-1" layout vertical center>

58 <paper-ripple fit></paper-ripple>	62 <paper-ripple fit></paper-ripple>

59 <span class="ripple-1-tap">tap here</span>	63 <span class="ripple-1-tap">tap here</span>

60 </div>	64 </div>

61	65

62 <p>ripple originates from the tap position 2:</p>

63 <div class="ripple-container ripple-2" layout horizontal center>	66 <div class="ripple-container ripple-2" layout horizontal center>

64 <paper-ripple fit></paper-ripple>	67 <paper-ripple fit></paper-ripple>

65 <span class="ripple-2-tap">tap here</span>	68 <span class="ripple-2-tap">tap here</span>

66 </div>	69 </div>

67	70

68 <script>	71 <script>

69 var fake = new Fake();	72 var fake = new Fake();

70	73

71 function centerOf(node) {	74 function centerOf(node) {

72 var rect = node.getBoundingClientRect();	75 var rect = node.getBoundingClientRect();

73 return {x: rect.left + rect.width / 2, y: rect.top + rect.height / 2};	76 return {x: rect.left + rect.width / 2, y: rect.top + rect.height / 2};

74 }	77 }

75	78

76 function approxEqual(p1, p2) {	79 function approxEqual(p1, p2) {

77 return Math.floor(p1.x) == Math.floor(p2.x) && Math.floor(p1.y) == Math.fl oor(p2.y);	80 return Math.floor(p1.x) == Math.floor(p2.x) && Math.floor(p1.y) == Math.fl oor(p2.y);

78 }	81 }

79	82

80 function test1() {	83 test('tall container', function(done) {

81 var ripple1 = document.querySelector('.ripple-1-tap');	84 var ripple1 = document.querySelector('.ripple-1-tap');

82 fake.downOnNode(ripple1, function() {	85 fake.downOnNode(ripple1, function() {

83

84 requestAnimationFrame(function() {	86 requestAnimationFrame(function() {

85 var wave = document.querySelector('.ripple-1 /deep/ .wave');	87 var wave = document.querySelector('.ripple-1 /deep/ .wave');

86 chai.assert(approxEqual(centerOf(ripple1), centerOf(wave)), 'ripple po sition is incorrect in tall container');	88 assert.ok(approxEqual(centerOf(ripple1), centerOf(wave)));

	89 done();

	90 });

	91 });

	92 });

87	93

88 test2();	94 test('wide container', function(done) {

89 });	95 var ripple2 = document.querySelector('.ripple-2-tap');

90	96 fake.downOnNode(ripple2, function() {

91 });

92 }

93

94 function test2() {

95 var ripple1 = document.querySelector('.ripple-2-tap');

96 fake.downOnNode(ripple1, function() {

97

98 requestAnimationFrame(function() {	97 requestAnimationFrame(function() {

99 var wave = document.querySelector('.ripple-2 /deep/ .wave');	98 var wave = document.querySelector('.ripple-2 /deep/ .wave');

100 chai.assert(approxEqual(centerOf(ripple1), centerOf(wave)), 'ripple po sition is incorrect in wide container');	99 assert.ok(approxEqual(centerOf(ripple2), centerOf(wave)));

101

102 done();	100 done();

103 });	101 });

104	102

105 });	103 });

106 }	104 });

107	105

108 document.addEventListener('polymer-ready', test1);

109 </script>	106 </script>

110	107

111 </body>	108 </body>

112 </html>	109 </html>

OLD	NEW