summaryrefslogtreecommitdiff
path: root/2024-06-18-guix-social/reveal.js/test/test-scroll.html
diff options
context:
space:
mode:
Diffstat (limited to '2024-06-18-guix-social/reveal.js/test/test-scroll.html')
-rw-r--r--2024-06-18-guix-social/reveal.js/test/test-scroll.html162
1 files changed, 162 insertions, 0 deletions
diff --git a/2024-06-18-guix-social/reveal.js/test/test-scroll.html b/2024-06-18-guix-social/reveal.js/test/test-scroll.html
new file mode 100644
index 0000000..74a16e3
--- /dev/null
+++ b/2024-06-18-guix-social/reveal.js/test/test-scroll.html
@@ -0,0 +1,162 @@
+<!doctype html>
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+
+ <title>reveal.js - Test Scroll View</title>
+
+ <link rel="stylesheet" href="../dist/reveal.css">
+ <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
+ <script src="../node_modules/qunit/qunit/qunit.js"></script>
+ </head>
+
+ <body style="overflow: auto;">
+
+ <div id="qunit"></div>
+ <div id="qunit-fixture"></div>
+
+ <div class="reveal" style="opacity: 0; pointer-events: none;">
+
+ <div class="slides">
+
+ <section>
+ <h1>slide 1</h1>
+ </section>
+
+ <section>
+ <h1>slide 2</h1>
+ </section>
+
+ <section>
+ <h1>slide 3</h1>
+ <p class="fragment">fragment 1</p>
+ <p class="fragment">fragment 2</p>
+ <p class="fragment">fragment 3</p>
+ </section>
+
+ <section>
+ <h1>slide 4</h1>
+ </section>
+
+ </div>
+
+ </div>
+
+ <script src="../dist/reveal.js"></script>
+ <script>
+
+ QUnit.config.testTimeout = 30000;
+ QUnit.config.reorder = false;
+
+ function getScrollHeight() {
+ return Reveal.getViewportElement().scrollHeight;
+ }
+
+ function getViewportHeight() {
+ return Reveal.getViewportElement().offsetHeight;
+ }
+
+ Reveal.initialize({ view: 'scroll' }).then( async () => {
+
+ QUnit.module( 'Scroll View' );
+
+ QUnit.test( 'Activates', assert => {
+ assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' );
+ });
+
+ QUnit.test( 'Can be toggled via API', assert => {
+ Reveal.toggleScrollView( false );
+ assert.ok( getScrollHeight() <= getViewportHeight(), 'Is not overflowing' );
+ Reveal.toggleScrollView( true );
+ assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' );
+ });
+
+ QUnit.test( 'Changes present slide when scrolling', assert => {
+ assert.timeout( 200 );
+ assert.expect( 2 );
+
+ const slides = document.querySelectorAll( '.reveal .slides section' );
+
+ assert.ok( slides[0].classList.contains( 'present' ), 'First slide is present' );
+ Reveal.getViewportElement().scrollTop = getViewportHeight() * 1;
+
+ return new Promise( resolve => {
+ setTimeout(() => {
+ assert.ok( slides[1].classList.contains( 'present' ), 'Second slide is present' );
+ resolve();
+ }, 100);
+ } );
+ });
+
+ QUnit.test( 'Fires slideschanged event when scrolling', assert => {
+ assert.timeout( 200 );
+ assert.expect( 2 );
+
+ const slides = document.querySelectorAll( '.reveal .slides section' );
+
+ return new Promise( resolve => {
+ let callback = ( event ) => {
+ Reveal.off( 'slidechanged', callback );
+ assert.ok( true, 'slidechanged event fired' );
+ assert.ok( event.currentSlide.classList.contains( 'present' ), 'slidechanged provides reference to currentSlide' );
+ resolve();
+ }
+
+ Reveal.on( 'slidechanged', callback );
+ Reveal.getViewportElement().scrollTop = getViewportHeight() * 2;
+ });
+ });
+
+ QUnit.test( 'Fires fragmentshown event when scrolling', assert => {
+ assert.timeout( 200 );
+ assert.expect( 2 );
+
+ const slides = document.querySelectorAll( '.reveal .slides section' );
+
+ return new Promise( resolve => {
+ let callback = ( event ) => {
+ Reveal.off( 'fragmentshown', callback );
+ assert.ok( true, 'fragmentshown event fired' );
+ assert.ok( event.fragments.length > 0, 'fragmentshown provides reference to fragment nodes' );
+ resolve();
+ }
+
+ Reveal.on( 'fragmentshown', callback );
+
+ Reveal.getViewportElement().scrollTop = 0;
+ Reveal.next();
+ Reveal.next();
+ Reveal.getViewportElement().scrollTop += getViewportHeight();
+ });
+ });
+
+ QUnit.test( 'Fires fragmenthidden event when scrolling', assert => {
+ assert.timeout( 200 );
+ assert.expect( 2 );
+
+ const slides = document.querySelectorAll( '.reveal .slides section' );
+
+ return new Promise( resolve => {
+ let callback = ( event ) => {
+ Reveal.off( 'fragmenthidden', callback );
+ assert.ok( true, 'fragmenthidden event fired' );
+ assert.ok( event.fragments.length > 0, 'fragmenthidden provides reference to fragment nodes' );
+ resolve();
+ }
+
+ Reveal.on( 'fragmenthidden', callback );
+
+ Reveal.getViewportElement().scrollTop = 0;
+ Reveal.next();
+ Reveal.next();
+ Reveal.next();
+ Reveal.getViewportElement().scrollTop -= getViewportHeight();
+ });
+ });
+
+ } );
+ </script>
+
+ </body>
+</html>