mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-19 03:48:18 -07:00
299 lines
8.2 KiB
HTML
299 lines
8.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<!--
|
||
|
|
@license
|
||
|
|
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
||
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
|
||
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||
|
|
Code distributed by Google as part of the polymer project is also
|
||
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>iron-scroll-target-behavior test</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||
|
|
|
||
|
|
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||
|
|
<script src="../../web-component-tester/browser.js"></script>
|
||
|
|
|
||
|
|
<link rel="import" href="x-scrollable.html">
|
||
|
|
<link rel="import" href="x-nested-scrollable.html">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#temporaryScrollingRegion,
|
||
|
|
#region {
|
||
|
|
overflow: auto;
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<test-fixture id="trivialScrollable">
|
||
|
|
<template>
|
||
|
|
<div id="temporaryScrollingRegion">
|
||
|
|
<x-scrollable></x-scrollable>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</test-fixture>
|
||
|
|
|
||
|
|
<test-fixture id="trivialScrollingRegion">
|
||
|
|
<template>
|
||
|
|
<div id="region">
|
||
|
|
<x-scrollable scroll-target="region"></x-scrollable>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</test-fixture>
|
||
|
|
|
||
|
|
<test-fixture id="trivialNestedScrollingRegion">
|
||
|
|
<template>
|
||
|
|
<x-nested-scrollable id="nestedScrollingRegion"></x-nested-scrollable>
|
||
|
|
</template>
|
||
|
|
</test-fixture>
|
||
|
|
|
||
|
|
|
||
|
|
<test-fixture id="trivialDocumentScroll">
|
||
|
|
<template>
|
||
|
|
<x-scrollable scroll-target="document"></x-scrollable>
|
||
|
|
</template>
|
||
|
|
</test-fixture>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
suite('basic features', function() {
|
||
|
|
var scrollingRegion, xScroll;
|
||
|
|
|
||
|
|
setup(function() {
|
||
|
|
scrollingRegion = fixture('trivialScrollable');
|
||
|
|
xScroll = Polymer.dom(scrollingRegion).querySelector('x-scrollable');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('default', function() {
|
||
|
|
assert.equal(xScroll._scrollTop, 0, '_scrollTop');
|
||
|
|
assert.equal(xScroll._scrollLeft, 0, '_scrollLeft');
|
||
|
|
assert.equal(xScroll._scrollTargetWidth, 0, '_scrollTargetWidth');
|
||
|
|
assert.equal(xScroll._scrollTargetHeight, 0, '_scrollTargetHeight');
|
||
|
|
assert.equal(xScroll.scrollTarget, null, 'scrollTarget');
|
||
|
|
assert.equal(xScroll._defaultScrollTarget, xScroll.scrollTarget, '_defaultScrollTarget');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('invalid `scrollTarget` selector', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
xScroll.scrollTarget = 'invalid-id';
|
||
|
|
assert.equal(xScroll.scrollTarget, null);
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('valid `scrollTarget` selector', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
xScroll.scrollTarget = 'temporaryScrollingRegion';
|
||
|
|
assert.equal(xScroll.scrollTarget, scrollingRegion);
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
suite('scrolling region', function() {
|
||
|
|
var scrollingRegion, xScrollable;
|
||
|
|
|
||
|
|
setup(function() {
|
||
|
|
scrollingRegion = fixture('trivialScrollingRegion');
|
||
|
|
xScrollable = Polymer.dom(scrollingRegion).querySelector('x-scrollable');
|
||
|
|
});
|
||
|
|
|
||
|
|
teardown(function() {
|
||
|
|
xScrollable._scrollTop = 0;
|
||
|
|
xScrollable._scrollLeft = 0;
|
||
|
|
});
|
||
|
|
|
||
|
|
test('scrollTarget reference', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
assert.equal(xScrollable.scrollTarget, scrollingRegion);
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('invalid scrollTarget', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
assert.equal(xScrollable.scrollTarget, scrollingRegion);
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('setters', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
xScrollable._scrollTop = 100;
|
||
|
|
xScrollable._scrollLeft = 100;
|
||
|
|
|
||
|
|
assert.equal(scrollingRegion.scrollTop, 100);
|
||
|
|
assert.equal(scrollingRegion.scrollLeft, 100);
|
||
|
|
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('getters', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
scrollingRegion.scrollTop = 50;
|
||
|
|
scrollingRegion.scrollLeft = 50;
|
||
|
|
|
||
|
|
assert.equal(xScrollable._scrollTop, 50, '_scrollTop');
|
||
|
|
assert.equal(xScrollable._scrollLeft, 50, '_scrollLeft');
|
||
|
|
assert.equal(xScrollable._scrollTargetWidth, scrollingRegion.offsetWidth, '_scrollTargetWidth');
|
||
|
|
assert.equal(xScrollable._scrollTargetHeight, scrollingRegion.offsetHeight, '_scrollTargetHeight');
|
||
|
|
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('scroll method', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
xScrollable.scroll(110, 110);
|
||
|
|
|
||
|
|
assert.equal(xScrollable._scrollTop, 110);
|
||
|
|
assert.equal(xScrollable._scrollLeft, 110);
|
||
|
|
|
||
|
|
xScrollable.scroll(0, 0);
|
||
|
|
|
||
|
|
assert.equal(xScrollable._scrollTop, 0);
|
||
|
|
assert.equal(xScrollable._scrollLeft, 0);
|
||
|
|
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
suite('document scroll', function() {
|
||
|
|
var xScrollable;
|
||
|
|
|
||
|
|
setup(function() {
|
||
|
|
xScrollable = fixture('trivialDocumentScroll');
|
||
|
|
});
|
||
|
|
|
||
|
|
teardown(function() {
|
||
|
|
xScrollable._scrollTop = 0;
|
||
|
|
xScrollable._scrollLeft = 0;
|
||
|
|
});
|
||
|
|
|
||
|
|
test('scrollTarget reference', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
assert.equal(xScrollable.scrollTarget, document.documentElement);
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('setters', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
xScrollable._scrollTop = 100;
|
||
|
|
xScrollable._scrollLeft = 100;
|
||
|
|
|
||
|
|
assert.equal(window.pageXOffset, 100);
|
||
|
|
assert.equal(window.pageYOffset, 100);
|
||
|
|
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('getters', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
window.scrollTo(50, 50);
|
||
|
|
|
||
|
|
assert.equal(xScrollable._scrollTop, 50, '_scrollTop');
|
||
|
|
assert.equal(xScrollable._scrollLeft, 50, '_scrollLeft');
|
||
|
|
assert.equal(xScrollable._scrollTargetWidth, window.innerWidth, '_scrollTargetWidth');
|
||
|
|
assert.equal(xScrollable._scrollTargetHeight, window.innerHeight, '_scrollTargetHeight');
|
||
|
|
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('scroll method', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
|
||
|
|
xScrollable.scroll(1, 2);
|
||
|
|
|
||
|
|
assert.equal(xScrollable._scrollLeft, 1);
|
||
|
|
assert.equal(xScrollable._scrollTop, 2);
|
||
|
|
|
||
|
|
xScrollable.scroll(3, 4);
|
||
|
|
|
||
|
|
assert.equal(xScrollable._scrollLeft, 3);
|
||
|
|
assert.equal(xScrollable._scrollTop, 4);
|
||
|
|
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
suite('nested scrolling region', function() {
|
||
|
|
var xScrollingRegion;
|
||
|
|
var xScrollable;
|
||
|
|
|
||
|
|
setup(function() {
|
||
|
|
var nestedScrollingRegion = fixture('trivialNestedScrollingRegion');
|
||
|
|
xScrollable = nestedScrollingRegion.$.xScrollable;
|
||
|
|
xScrollingRegion = nestedScrollingRegion.$.xRegion;
|
||
|
|
});
|
||
|
|
|
||
|
|
teardown(function() {
|
||
|
|
xScrollable._scrollTop = 0;
|
||
|
|
xScrollable._scrollLeft = 0;
|
||
|
|
});
|
||
|
|
|
||
|
|
test('scrollTarget reference', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
assert.equal(xScrollable.scrollTarget, xScrollingRegion);
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('setters', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
xScrollable._scrollTop = 10;
|
||
|
|
xScrollable._scrollLeft = 20;
|
||
|
|
|
||
|
|
assert.equal(xScrollingRegion.scrollTop, 10);
|
||
|
|
assert.equal(xScrollingRegion.scrollLeft, 20);
|
||
|
|
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('getters', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
xScrollable._scrollTop = 10;
|
||
|
|
xScrollable._scrollLeft = 20;
|
||
|
|
|
||
|
|
assert.equal(xScrollable._scrollTop, 10, '_scrollTop');
|
||
|
|
assert.equal(xScrollable._scrollLeft, 20, '_scrollLeft');
|
||
|
|
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('scroll method', function(done) {
|
||
|
|
flush(function() {
|
||
|
|
|
||
|
|
xScrollable.scroll(1, 2);
|
||
|
|
|
||
|
|
assert.equal(xScrollable._scrollLeft, 1);
|
||
|
|
assert.equal(xScrollable._scrollTop, 2);
|
||
|
|
|
||
|
|
xScrollable.scroll(3, 4);
|
||
|
|
|
||
|
|
assert.equal(xScrollable._scrollLeft, 3);
|
||
|
|
assert.equal(xScrollable._scrollTop, 4);
|
||
|
|
|
||
|
|
done();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|