1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2016-02-24 16:18:53 -05:00
parent 669a2e46d4
commit 3c9e6e0374
10 changed files with 109 additions and 50 deletions

View file

@ -46,6 +46,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
height: 200px;
}
.sized-xy {
width: 200px;
height: 200px;
}
.positioned-left {
position: absolute;
left: 100px;
@ -83,6 +88,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</head>
<body>
<test-fixture id="absolute">
<template>
<test-fit auto-fit-on-attach class="absolute">
@ -107,6 +113,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="with-max-width">
<template>
<div class="constrain" style="position: fixed; top: 20px; left: 100px; width: 50vw; height: 50vh; border: 1px solid black;">
<test-fit auto-fit-on-attach class="with-max-width el">
with-max-width, auto center/center
</test-fit>
</div>
</template>
</test-fixture>
<test-fixture id="positioned-xy">
<template>
<test-fit auto-fit-on-attach class="sized-x positioned-left positioned-top">
@ -137,7 +153,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<test-fixture id="constrain-target">
<template>
<div class="constrain" style="position: fixed; top: 20px; left: 100px; width: 50vw; height: 50vh; border: 1px solid black;">
<test-fit auto-fit-on-attach class="el">
<test-fit auto-fit-on-attach class="el sized-xy">
<div>
Auto center/center to parent element
</div>
@ -223,6 +239,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.closeTo(rect.top - (window.innerHeight - rect.bottom), 0, 5, 'centered vertically');
});
test('sized element with transformed parent is centered in viewport', function() {
var constrain = fixture('constrain-target');
var el = Polymer.dom(constrain).querySelector('.el');
var rectBefore = el.getBoundingClientRect();
constrain.style.transform = 'translate3d(5px, 5px, 0)';
el.center();
var rectAfter = el.getBoundingClientRect();
assert.equal(rectBefore.top, rectAfter.top, 'top ok');
assert.equal(rectBefore.bottom, rectAfter.bottom, 'bottom ok');
assert.equal(rectBefore.left, rectAfter.left, 'left ok');
assert.equal(rectBefore.right, rectAfter.right, 'right ok');
});
test('scrolling element is centered in viewport', function() {
var el = fixture('sized-x');
makeScrolling(el);
@ -361,6 +390,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto');
});
test('element with max-width centers in another element', function() {
var constrain = fixture('with-max-width');
var el = Polymer.dom(constrain).querySelector('.el');
el.fitInto = constrain;
el.refit();
var rect = el.getBoundingClientRect();
var crect = constrain.getBoundingClientRect();
assert.closeTo(rect.left - crect.left - (crect.right - rect.right), 0, 5, 'centered horizontally in fitInto');
assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto');
});
});
</script>