Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1355)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: lib/src/paper-badge/test/basic.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 1 month 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
« no previous file with comments | « lib/src/paper-badge/paper-badge.html ('k') | lib/src/paper-behaviors/paper-button-behavior.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 @license 3 @license
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
8 Code distributed by Google as part of the polymer project is also 8 Code distributed by Google as part of the polymer project is also
9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
10 --> 10 -->
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
47 47
48 <test-fixture id="dynamic"> 48 <test-fixture id="dynamic">
49 <template> 49 <template>
50 <div> 50 <div>
51 <div id="target"></div> 51 <div id="target"></div>
52 <paper-badge label="1"></paper-badge> 52 <paper-badge label="1"></paper-badge>
53 </div> 53 </div>
54 </template> 54 </template>
55 </test-fixture> 55 </test-fixture>
56 56
57 <test-fixture id="nested">
58 <template>
59 <div>
60 <div id="target">
61 <paper-badge label="1"></paper-badge>
62 </div>
63 </div>
64 </template>
65 </test-fixture>
66
57 <test-fixture id="custom"> 67 <test-fixture id="custom">
58 <template> 68 <template>
59 <test-button></test-button> 69 <test-button></test-button>
60 </template> 70 </template>
61 </test-fixture> 71 </test-fixture>
62 72
63 <script> 73 <script>
64 suite('basic', function() { 74 suite('basic', function() {
65 test('badge is positioned correctly', function(done) { 75 test('badge is positioned correctly', function(done) {
66 var f = fixture('basic'); 76 var f = fixture('basic');
67 var badge = f.querySelector('paper-badge'); 77 var badge = f.querySelector('paper-badge');
68 var actualbadge = Polymer.dom(badge.root).querySelector('#badge'); 78 var actualbadge = Polymer.dom(badge.root).querySelector('#badge');
69 assert.equal(actualbadge.textContent, "1"); 79 assert.equal(actualbadge.textContent, "1");
70 80
81 expect(badge.target.getAttribute('id')).to.be.equal('target');
82
71 badge.updatePosition(); 83 badge.updatePosition();
72 84
73 Polymer.Base.async(function() { 85 Polymer.Base.async(function() {
74 var divRect = f.querySelector('#target').getBoundingClientRect(); 86 var divRect = f.querySelector('#target').getBoundingClientRect();
75 expect(divRect.width).to.be.equal(100); 87 expect(divRect.width).to.be.equal(100);
76 expect(divRect.height).to.be.equal(20); 88 expect(divRect.height).to.be.equal(20);
77 89
78 var contentRect = badge.getBoundingClientRect(); 90 var contentRect = badge.getBoundingClientRect();
79 expect(contentRect.width).to.be.equal(22); 91 expect(contentRect.width).to.be.equal(22);
80 expect(contentRect.height).to.be.equal(22); 92 expect(contentRect.height).to.be.equal(22);
81 93
82 // The target div is 100 x 20, and the badge is centered on the 94 // The target div is 100 x 20, and the badge is centered on the
83 // top right corner. 95 // top right corner.
84 expect(contentRect.left).to.be.equal(100 - 11); 96 expect(contentRect.left).to.be.equal(100 - 11);
85 expect(contentRect.top).to.be.equal(0 - 11); 97 expect(contentRect.top).to.be.equal(0 - 11);
86 98
87 // Also check the math, just in case. 99 // Also check the math, just in case.
88 expect(contentRect.left).to.be.equal(divRect.width - 11); 100 expect(contentRect.left).to.be.equal(divRect.width - 11);
89 expect(contentRect.top).to.be.equal(divRect.top - 11); 101 expect(contentRect.top).to.be.equal(divRect.top - 11);
90 102
91 done(); 103 done();
92 }); 104 });
93 }); 105 });
94 106
95 test('badge is positioned correctly after being dynamically set', function (done) { 107 test('badge is positioned correctly after being dynamically set', function (done) {
96 var f = fixture('dynamic'); 108 var f = fixture('dynamic');
97 var badge = f.querySelector('paper-badge'); 109 var badge = f.querySelector('paper-badge');
98 badge.updatePosition(); 110 badge.updatePosition();
99 111
112 expect(badge.target.getAttribute('id')).to.not.be.equal('target');
113
100 Polymer.Base.async(function() { 114 Polymer.Base.async(function() {
101 var contentRect = badge.getBoundingClientRect(); 115 var contentRect = badge.getBoundingClientRect();
102 expect(contentRect.left).to.not.be.equal(100 - 11); 116 expect(contentRect.left).to.not.be.equal(100 - 11);
103 117
104 badge.for = 'target'; 118 badge.for = 'target';
119 expect(badge.target.getAttribute('id')).to.be.equal('target');
120
105 badge.updatePosition(); 121 badge.updatePosition();
106 122
107 Polymer.Base.async(function() { 123 Polymer.Base.async(function() {
108 var divRect = f.querySelector('#target').getBoundingClientRect(); 124 var divRect = f.querySelector('#target').getBoundingClientRect();
109 expect(divRect.width).to.be.equal(100); 125 expect(divRect.width).to.be.equal(100);
110 expect(divRect.height).to.be.equal(20); 126 expect(divRect.height).to.be.equal(20);
111 127
112 var contentRect = badge.getBoundingClientRect(); 128 var contentRect = badge.getBoundingClientRect();
113 expect(contentRect.width).to.be.equal(22); 129 expect(contentRect.width).to.be.equal(22);
114 expect(contentRect.height).to.be.equal(22); 130 expect(contentRect.height).to.be.equal(22);
115 131
116 // The target div is 100 x 20, and the badge is centered on the 132 // The target div is 100 x 20, and the badge is centered on the
117 // top right corner. 133 // top right corner.
118 expect(contentRect.left).to.be.equal(100 - 11); 134 expect(contentRect.left).to.be.equal(100 - 11);
119 expect(contentRect.top).to.be.equal(0 - 11); 135 expect(contentRect.top).to.be.equal(0 - 11);
120 136
121 // Also check the math, just in case. 137 // Also check the math, just in case.
122 expect(contentRect.left).to.be.equal(divRect.width - 11); 138 expect(contentRect.left).to.be.equal(divRect.width - 11);
123 expect(contentRect.top).to.be.equal(divRect.top - 11); 139 expect(contentRect.top).to.be.equal(divRect.top - 11);
124 140
125 done(); 141 done();
126 }); 142 });
127 }); 143 });
128 }); 144 });
129 145
146 test('badge is positioned correctly when nested in a target element', functi on(done) {
147 var f = fixture('nested');
148 var badge = f.querySelector('paper-badge');
149
150 expect(badge.target.getAttribute('id')).to.be.equal('target');
151
152 badge.updatePosition();
153
154 Polymer.Base.async(function() {
155 var divRect = f.querySelector('#target').getBoundingClientRect();
156 expect(divRect.width).to.be.equal(100);
157 expect(divRect.height).to.be.equal(20);
158
159 var contentRect = badge.getBoundingClientRect();
160 expect(contentRect.width).to.be.equal(22);
161 expect(contentRect.height).to.be.equal(22);
162
163 // The target div is 100 x 20, and the badge is centered on the
164 // top right corner.
165 expect(contentRect.left).to.be.equal(100 - 11);
166 expect(contentRect.top).to.be.equal(0 - 11);
167
168 // Also check the math, just in case.
169 expect(contentRect.left).to.be.equal(divRect.width - 11);
170 expect(contentRect.top).to.be.equal(divRect.top - 11);
171
172 done();
173 });
174 });
175
130 suite('badge is inside a custom element', function() { 176 suite('badge is inside a custom element', function() {
131 test('badge is positioned correctly', function(done) { 177 test('badge is positioned correctly', function(done) {
132 var f = fixture('custom'); 178 var f = fixture('custom');
133 var badge = f.$.badge; 179 var badge = f.$.badge;
134 var actualbadge = Polymer.dom(badge.root).querySelector('#badge'); 180 var actualbadge = Polymer.dom(badge.root).querySelector('#badge');
135 assert.equal(actualbadge.textContent, "1"); 181 assert.equal(actualbadge.textContent, "1");
136 182
137 badge.updatePosition(); 183 badge.updatePosition();
138 184
139 Polymer.Base.async(function() { 185 Polymer.Base.async(function() {
(...skipping 15 matching lines...) Expand all
155 expect(contentRect.top).to.be.equal(divRect.top - 11); 201 expect(contentRect.top).to.be.equal(divRect.top - 11);
156 202
157 done(); 203 done();
158 }); 204 });
159 }); 205 });
160 }); 206 });
161 }); 207 });
162 </script> 208 </script>
163 </body> 209 </body>
164 </html> 210 </html>
OLDNEW
« no previous file with comments | « lib/src/paper-badge/paper-badge.html ('k') | lib/src/paper-behaviors/paper-button-behavior.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698