Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / 9c036a424c275bbeebd43ac872361864546602ac / . / inst / reveal.js-5.1.0 / test / test-scroll.html
blob: 74a16e36ef8842758b3820e089ef5e7d263c8889 [file] [log] [blame]
Marc Kupietz9c036a42024-05-14 13:17:25 +0200[diff] [blame^]1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6
7 <title>reveal.js - Test Scroll View</title>
8
9 <link rel="stylesheet" href="../dist/reveal.css">
10 <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
11 <script src="../node_modules/qunit/qunit/qunit.js"></script>
12 </head>
13
14 <body style="overflow: auto;">
15
16 <div id="qunit"></div>
17 <div id="qunit-fixture"></div>
18
19 <div class="reveal" style="opacity: 0; pointer-events: none;">
20
21 <div class="slides">
22
23 <section>
24 <h1>slide 1</h1>
25 </section>
26
27 <section>
28 <h1>slide 2</h1>
29 </section>
30
31 <section>
32 <h1>slide 3</h1>
33 <p class="fragment">fragment 1</p>
34 <p class="fragment">fragment 2</p>
35 <p class="fragment">fragment 3</p>
36 </section>
37
38 <section>
39 <h1>slide 4</h1>
40 </section>
41
42 </div>
43
44 </div>
45
46 <script src="../dist/reveal.js"></script>
47 <script>
48
49 QUnit.config.testTimeout = 30000;
50 QUnit.config.reorder = false;
51
52 function getScrollHeight() {
53 return Reveal.getViewportElement().scrollHeight;
54 }
55
56 function getViewportHeight() {
57 return Reveal.getViewportElement().offsetHeight;
58 }
59
60 Reveal.initialize({ view: 'scroll' }).then( async () => {
61
62 QUnit.module( 'Scroll View' );
63
64 QUnit.test( 'Activates', assert => {
65 assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' );
66 });
67
68 QUnit.test( 'Can be toggled via API', assert => {
69 Reveal.toggleScrollView( false );
70 assert.ok( getScrollHeight() <= getViewportHeight(), 'Is not overflowing' );
71 Reveal.toggleScrollView( true );
72 assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' );
73 });
74
75 QUnit.test( 'Changes present slide when scrolling', assert => {
76 assert.timeout( 200 );
77 assert.expect( 2 );
78
79 const slides = document.querySelectorAll( '.reveal .slides section' );
80
81 assert.ok( slides[0].classList.contains( 'present' ), 'First slide is present' );
82 Reveal.getViewportElement().scrollTop = getViewportHeight() * 1;
83
84 return new Promise( resolve => {
85 setTimeout(() => {
86 assert.ok( slides[1].classList.contains( 'present' ), 'Second slide is present' );
87 resolve();
88 }, 100);
89 } );
90 });
91
92 QUnit.test( 'Fires slideschanged event when scrolling', assert => {
93 assert.timeout( 200 );
94 assert.expect( 2 );
95
96 const slides = document.querySelectorAll( '.reveal .slides section' );
97
98 return new Promise( resolve => {
99 let callback = ( event ) => {
100 Reveal.off( 'slidechanged', callback );
101 assert.ok( true, 'slidechanged event fired' );
102 assert.ok( event.currentSlide.classList.contains( 'present' ), 'slidechanged provides reference to currentSlide' );
103 resolve();
104 }
105
106 Reveal.on( 'slidechanged', callback );
107 Reveal.getViewportElement().scrollTop = getViewportHeight() * 2;
108 });
109 });
110
111 QUnit.test( 'Fires fragmentshown event when scrolling', assert => {
112 assert.timeout( 200 );
113 assert.expect( 2 );
114
115 const slides = document.querySelectorAll( '.reveal .slides section' );
116
117 return new Promise( resolve => {
118 let callback = ( event ) => {
119 Reveal.off( 'fragmentshown', callback );
120 assert.ok( true, 'fragmentshown event fired' );
121 assert.ok( event.fragments.length > 0, 'fragmentshown provides reference to fragment nodes' );
122 resolve();
123 }
124
125 Reveal.on( 'fragmentshown', callback );
126
127 Reveal.getViewportElement().scrollTop = 0;
128 Reveal.next();
129 Reveal.next();
130 Reveal.getViewportElement().scrollTop += getViewportHeight();
131 });
132 });
133
134 QUnit.test( 'Fires fragmenthidden event when scrolling', assert => {
135 assert.timeout( 200 );
136 assert.expect( 2 );
137
138 const slides = document.querySelectorAll( '.reveal .slides section' );
139
140 return new Promise( resolve => {
141 let callback = ( event ) => {
142 Reveal.off( 'fragmenthidden', callback );
143 assert.ok( true, 'fragmenthidden event fired' );
144 assert.ok( event.fragments.length > 0, 'fragmenthidden provides reference to fragment nodes' );
145 resolve();
146 }
147
148 Reveal.on( 'fragmenthidden', callback );
149
150 Reveal.getViewportElement().scrollTop = 0;
151 Reveal.next();
152 Reveal.next();
153 Reveal.next();
154 Reveal.getViewportElement().scrollTop -= getViewportHeight();
155 });
156 });
157
158 } );
159 </script>
160
161 </body>
162</html>