| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <!-- |
| 3 @license |
| 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 |
| 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 |
| 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 |
| 10 --> |
| 11 <html> |
| 12 <head> |
| 13 |
| 14 <title>iron-fit-behavior tests</title> |
| 15 |
| 16 <meta charset="utf-8"> |
| 17 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 18 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initia
l-scale=1, user-scalable=yes"> |
| 19 |
| 20 <script src="../../webcomponentsjs/webcomponents.js"></script> |
| 21 |
| 22 <script src="../../web-component-tester/browser.js"></script> |
| 23 <script src="../../test-fixture/test-fixture-mocha.js"></script> |
| 24 |
| 25 <link rel="import" href="../../test-fixture/test-fixture.html"> |
| 26 <link rel="import" href="test-fit.html"> |
| 27 |
| 28 <style> |
| 29 body { |
| 30 margin: 0; |
| 31 padding: 0; |
| 32 } |
| 33 |
| 34 .absolute { |
| 35 position: absolute; |
| 36 top: 0; |
| 37 left: 0; |
| 38 } |
| 39 |
| 40 .scrolling { |
| 41 overflow: auto; |
| 42 } |
| 43 |
| 44 .sized-x { |
| 45 width: 200px; |
| 46 } |
| 47 |
| 48 .sized-y { |
| 49 height: 200px; |
| 50 } |
| 51 |
| 52 .positioned-left { |
| 53 position: absolute; |
| 54 left: 100px; |
| 55 } |
| 56 |
| 57 .positioned-right { |
| 58 position: absolute; |
| 59 right: 100px; |
| 60 } |
| 61 |
| 62 .positioned-top { |
| 63 position: absolute; |
| 64 top: 100px; |
| 65 } |
| 66 |
| 67 .positioned-bottom { |
| 68 position: absolute; |
| 69 bottom: 100px; |
| 70 } |
| 71 |
| 72 .with-max-width { |
| 73 max-width: 500px; |
| 74 } |
| 75 |
| 76 .with-max-height { |
| 77 max-height: 500px; |
| 78 } |
| 79 |
| 80 .with-margin { |
| 81 margin: 20px; |
| 82 } |
| 83 |
| 84 </style> |
| 85 |
| 86 </head> |
| 87 <body> |
| 88 |
| 89 <test-fixture id="absolute"> |
| 90 <template> |
| 91 <test-fit auto-fit-on-attach class="absolute"> |
| 92 Absolutely positioned |
| 93 </test-fit> |
| 94 </template> |
| 95 </test-fixture> |
| 96 |
| 97 <test-fixture id="sized-xy"> |
| 98 <template> |
| 99 <test-fit auto-fit-on-attach class="sized-x sized-y"> |
| 100 Sized (x/y), auto center/center |
| 101 </test-fit> |
| 102 </template> |
| 103 </test-fixture> |
| 104 |
| 105 <test-fixture id="sized-x"> |
| 106 <template> |
| 107 <test-fit auto-fit-on-attach class="sized-x"> |
| 108 Sized (x), auto center/center |
| 109 </test-fit> |
| 110 </template> |
| 111 </test-fixture> |
| 112 |
| 113 <test-fixture id="positioned-xy"> |
| 114 <template> |
| 115 <test-fit auto-fit-on-attach class="sized-x positioned-left positioned-t
op"> |
| 116 Sized (x/y), positioned/positioned |
| 117 </test-fit> |
| 118 </template> |
| 119 </test-fixture> |
| 120 |
| 121 <test-fixture id="inline-positioned-xy"> |
| 122 <template> |
| 123 <test-fit auto-fit-on-attach class="sized-x sized-y" style="position:abs
olute;left:100px;top:100px;"> |
| 124 Sized (x/y), positioned/positioned |
| 125 </test-fit> |
| 126 </template> |
| 127 </test-fixture> |
| 128 |
| 129 <test-fixture id="sectioned"> |
| 130 <template> |
| 131 <test-fit auto-fit-on-attach class="sized-x"> |
| 132 <div> |
| 133 Sized (x), auto center/center with scrolling section |
| 134 </div> |
| 135 <div class="internal"></div> |
| 136 </test-fit> |
| 137 </template> |
| 138 </test-fixture> |
| 139 |
| 140 <test-fixture id="constrain-target"> |
| 141 <template> |
| 142 <div class="constrain" style="position: fixed; top: 0; left: 0; width: 5
0vw; height: 50vh; border: 1px solid black;"> |
| 143 <test-fit auto-fit-on-attach class="el"> |
| 144 <div> |
| 145 Auto center/center to parent element |
| 146 </div> |
| 147 </test-fit> |
| 148 </div> |
| 149 </template> |
| 150 </test-fixture> |
| 151 |
| 152 <template id="ipsum"> |
| 153 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu
is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p> |
| 154 </template> |
| 155 |
| 156 <script> |
| 157 |
| 158 function makeScrolling(el) { |
| 159 el.classList.add('scrolling'); |
| 160 var template = document.getElementById('ipsum'); |
| 161 for (var i = 0; i < 20; i++) { |
| 162 el.appendChild(template.content.cloneNode(true)); |
| 163 } |
| 164 } |
| 165 |
| 166 suite('manual positioning', function() { |
| 167 |
| 168 test('css positioned element is not re-positioned', function() { |
| 169 var el = fixture('positioned-xy'); |
| 170 var rect = el.getBoundingClientRect(); |
| 171 assert.equal(rect.top, 100, 'top is unset'); |
| 172 assert.equal(rect.left, 100, 'left is unset'); |
| 173 |
| 174 }); |
| 175 |
| 176 test('inline positioned element is not re-positioned', function() { |
| 177 var el = fixture('inline-positioned-xy'); |
| 178 var rect = el.getBoundingClientRect(); |
| 179 // need to measure document.body here because mocha sets a min-width o
n html,body, and |
| 180 // the element is positioned wrt to that by css |
| 181 var bodyRect = document.body.getBoundingClientRect(); |
| 182 assert.equal(rect.top, 100, 'top is unset'); |
| 183 assert.equal(rect.left, 100, 'left is unset'); |
| 184 |
| 185 el.refit(); |
| 186 |
| 187 rect = el.getBoundingClientRect(); |
| 188 assert.equal(rect.top, 100, 'top is unset after refit'); |
| 189 assert.equal(rect.left, 100, 'left is unset after refit'); |
| 190 |
| 191 }); |
| 192 |
| 193 test('position property is preserved after', function() { |
| 194 var el = fixture('absolute'); |
| 195 assert.equal(getComputedStyle(el).position, 'absolute', 'position:abso
lute is preserved'); |
| 196 }); |
| 197 }); |
| 198 |
| 199 suite('fit to window', function() { |
| 200 |
| 201 test('sized element is centered in viewport', function() { |
| 202 var el = fixture('sized-xy'); |
| 203 var rect = el.getBoundingClientRect(); |
| 204 assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'ce
ntered horizontally'); |
| 205 assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'c
entered vertically'); |
| 206 }); |
| 207 |
| 208 test('sized element with margin is centered in viewport', function() { |
| 209 var el = fixture('sized-xy'); |
| 210 el.classList.add('with-margin'); |
| 211 el.refit(); |
| 212 var rect = el.getBoundingClientRect(); |
| 213 assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'ce
ntered horizontally'); |
| 214 assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'c
entered vertically'); |
| 215 }); |
| 216 |
| 217 test('scrolling element is centered in viewport', function() { |
| 218 var el = fixture('sized-x'); |
| 219 makeScrolling(el); |
| 220 el.refit(); |
| 221 var rect = el.getBoundingClientRect(); |
| 222 assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'ce
ntered horizontally'); |
| 223 assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'c
entered vertically'); |
| 224 }); |
| 225 |
| 226 test('scrolling element is constrained to viewport height', function() { |
| 227 var el = fixture('sized-x'); |
| 228 makeScrolling(el); |
| 229 el.refit(); |
| 230 var rect = el.getBoundingClientRect(); |
| 231 assert.isTrue(rect.height <= window.innerHeight, 'height is less than
or equal to viewport height'); |
| 232 }); |
| 233 |
| 234 test('scrolling element with max-height is centered in viewport', functi
on() { |
| 235 var el = fixture('sized-x'); |
| 236 el.classList.add('with-max-height'); |
| 237 makeScrolling(el); |
| 238 el.refit(); |
| 239 var rect = el.getBoundingClientRect(); |
| 240 assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'ce
ntered horizontally'); |
| 241 assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'c
entered vertically'); |
| 242 }); |
| 243 |
| 244 test('scrolling element with max-height respects max-height', function()
{ |
| 245 var el = fixture('sized-x'); |
| 246 el.classList.add('with-max-height'); |
| 247 makeScrolling(el); |
| 248 el.refit(); |
| 249 var rect = el.getBoundingClientRect(); |
| 250 assert.isTrue(rect.height <= 500, 'height is less than or equal to max
-height'); |
| 251 }); |
| 252 |
| 253 test('css positioned, scrolling element is constrained to viewport heigh
t (top,left)', function() { |
| 254 var el = fixture('positioned-xy'); |
| 255 makeScrolling(el); |
| 256 el.refit(); |
| 257 var rect = el.getBoundingClientRect(); |
| 258 assert.isTrue(rect.height <= window.innerHeight - 100, 'height is less
than or equal to viewport height'); |
| 259 }); |
| 260 |
| 261 test('css positioned, scrolling element is constrained to viewport heigh
t (bottom, right)', function() { |
| 262 var el = fixture('sized-x'); |
| 263 el.classList.add('positioned-bottom'); |
| 264 el.classList.add('positioned-right'); |
| 265 el.refit(); |
| 266 var rect = el.getBoundingClientRect(); |
| 267 assert.isTrue(rect.height <= window.innerHeight - 100, 'height is less
than or equal to viewport height'); |
| 268 }); |
| 269 |
| 270 test('sized, scrolling element with margin is centered in viewport', fun
ction() { |
| 271 var el = fixture('sized-x'); |
| 272 el.classList.add('with-margin'); |
| 273 makeScrolling(el); |
| 274 el.refit(); |
| 275 var rect = el.getBoundingClientRect(); |
| 276 assert.closeTo(rect.left - (window.innerWidth - rect.right), 0, 5, 'ce
ntered horizontally'); |
| 277 assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'c
entered vertically'); |
| 278 }); |
| 279 |
| 280 test('sized, scrolling element is constrained to viewport height', funct
ion() { |
| 281 var el = fixture('sized-x'); |
| 282 el.classList.add('with-margin'); |
| 283 makeScrolling(el); |
| 284 el.refit(); |
| 285 var rect = el.getBoundingClientRect(); |
| 286 assert.isTrue(rect.height <= window.innerHeight - 20 * 2, 'height is l
ess than or equal to viewport height'); |
| 287 }); |
| 288 |
| 289 test('css positioned, scrolling element with margin is constrained to vi
ewport height (top, left)', function() { |
| 290 var el = fixture('positioned-xy'); |
| 291 el.classList.add('with-margin'); |
| 292 makeScrolling(el); |
| 293 el.refit(); |
| 294 var rect = el.getBoundingClientRect(); |
| 295 assert.isTrue(rect.height <= window.innerHeight - 100 - 20 * 2, 'heigh
t is less than or equal to viewport height'); |
| 296 }); |
| 297 |
| 298 test('css positioned, scrolling element with margin is constrained to vi
ewport height (bottom, right)', function() { |
| 299 var el = fixture('sized-x'); |
| 300 el.classList.add('positioned-bottom'); |
| 301 el.classList.add('positioned-right'); |
| 302 el.classList.add('with-margin') |
| 303 el.refit(); |
| 304 var rect = el.getBoundingClientRect(); |
| 305 assert.isTrue(rect.height <= window.innerHeight - 100 - 20 * 2, 'heigh
t is less than or equal to viewport height'); |
| 306 }); |
| 307 |
| 308 test('scrolling sizingTarget is constrained to viewport height', functio
n() { |
| 309 el = fixture('sectioned'); |
| 310 var internal = Polymer.dom(el).querySelector('.internal'); |
| 311 el.sizingTarget = internal; |
| 312 makeScrolling(internal); |
| 313 el.refit(); |
| 314 var rect = el.getBoundingClientRect(); |
| 315 assert.isTrue(rect.height <= window.innerHeight, 'height is less than
or equal to viewport height'); |
| 316 }); |
| 317 |
| 318 }); |
| 319 |
| 320 suite('fit to element', function() { |
| 321 |
| 322 test('element fits in another element', function() { |
| 323 var constrain = fixture('constrain-target'); |
| 324 var el = Polymer.dom(constrain).querySelector('.el') |
| 325 makeScrolling(el); |
| 326 el.fitInto = constrain; |
| 327 el.refit(); |
| 328 var rect = el.getBoundingClientRect(); |
| 329 var crect = constrain.getBoundingClientRect(); |
| 330 assert.isTrue(rect.height <= crect.height, 'width is less than or equa
l to fitInto width'); |
| 331 assert.isTrue(rect.height <= crect.height, 'height is less than or equ
al to fitInto height'); |
| 332 }); |
| 333 |
| 334 }); |
| 335 |
| 336 </script> |
| 337 |
| 338 </body> |
| 339 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1205703007:
Add polymer 1.0 to npm_modules (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master